Update knowledge seed examples, keep context sticky

[jeff-phillips-18]

Closes #699

Description

Updates the Create seed data page in the Knowledge contribution wizard:

• Uses expandable cards for each seed example
• Updates the mechanism for selecting context from a file
• Adds actions to clear the seed data or edit the context
• Make the context sticky when expanded
• Adds word counts for the questions and answers

Screen shots

[Misjohns]

@jeff-phillips-18 Below are my comments:

See example cards
On the Seed example cards the text gets truncated very early. The text should expand to right margin of card.

Currently, the text boxes do not adjust to accommodate the text which cuts off content. Use PF autoResize text box to modify height based on contents. This would grow the box as the user types so they can see anything they enter but still provides them the ability to manually adjust the height of the text boxes in desired.

For the helper text, we decided to only show the # of words the associated text box container (ie. 35 words), not 35/150 words. The text field should only be marked on error if the user goes above the allotted word count. At that time we could display "0 words remaining". If we need to also display a word count then something like, "35 words / 5 words above limit" so user can easy determine the number of words they need to remove from text box. All empty text boxes in that seed example that have not been filled would display "0 words remaining" error. LMK if this is not feasible at this time. Alternatively, we could prevent the user from typing anything beyond the maximum word limit but this is not the ideal experience. @kaedward Please assist with microcopy for error message: "35 words / 5 words above limit".

When a seed example card is expanded all 3 QnA pairs should appear in card.

[jeff-phillips-18]

@jeff-phillips-18 Below are my comments:

See example cards On the Seed example cards the text gets truncated very early. The text should expand to right

That is only because in this example there is a newline in the copy. Here is an instance where there isn't:

Currently, the text boxes do not adjust to accommodate the text which cuts off content. Use [PF autoResize text box]

👍

For the helper text, we decided to only show the # of words the associated text box container (ie. 35 words), not 35/150 words. The text field should only be marked on error if the user goes above the allotted word count. At that time we could display "0 words remaining". If we need to also display a word count then something like, "35 words / 5 words above limit" so user can easy determine the number of words they need to remove from text box. All empty text boxes in that seed example that have not been filled would display "0 words remaining" error. LMK if this is not feasible at this time. Alternatively, we could prevent the user from typing anything beyond the maximum word limit but this is not the ideal experience. @kaedward Please assist with microcopy for error message: "35 words / 5 words above limit".

Yeah, I put that there so the user knows where they are over and by how much. Happy to change it however you like.

When a seed example card is expanded all 3 QnA pairs should appear in card.

This is not possible and I thought the point was to keep the context visible when entering all the answers. If we don't scroll the question and answer area we get:

You can see that by the time the user gets to Q and A 3, the context will be long gone

[kaedward]

@Misjohns for the "above word limit" alert, I recommend "100/99 words". The text format shouldn't change, the indicator that something is wrong is the red icon.

if we're following the pattern, the 3rd text box in the screenshot should have the help text: "0/0 words". The first help text should be "31/[number remaining] words"

Is this pattern overly complicated? I admit that I don't know exactly how editing a previous context would affect the following ones if you have already filled out all fields. I've never encountered this type of issue where word limit is shared between multiple fields.

---

I also advise against using the tooltip to show the full context that has been truncated. This might work if the full context was fewer than ~150 characters, but since the contexts can be up to 500 words, I wouldn't use the tooltip at all, even when the context is short.

Why is the context truncated when the card is expanded? I would expect the full context to be shown, instead of having an additional dropdown option to reveal the full text.

[Misjohns]

@kaedward The context area of the card is sticky and remains visible until the user scrolls to the bottom of the 3rd QnA for that context. By default the full context displays but we wanted the user to be able to gain some more real estate to enter their QnA pairs.