[KOptionalText] New component

[AlexVelezLl]

Description

Add a new component to KDS KOptionalText that will either display the text or KEmptyPlacehlder if it's an empty string, undefined, or null.

Issue addressed

Addresses #285

Steps to test

1. Link this KDS branch to any product.
2. Use KOptionalText component as described in Implementation notes.

Implementation notes

At a high level, how did you implement this?

KOptionalText will recieve a text prop or slot that renders text nodes, if there is text to show, the text or the slot will be shown whithin a span element, if not, the KEmptyPlacehlder component will be shown. Also a textStyle prop can be passed which will be set to the span element.

Examples:

All of them will render "Hello world" in red color:

<KOptionalText text="Hello world" appearanceOverrides="color: red" />

<KOptionalText appearanceOverrides="color: red">
  Hello World
<KOptionalText/>

<KOptionalText>
  <span style="color: red">Hello </span>
  <span style="color: red">World</span>
</KOptionalText>

If name and lastname are nonempty strings name and lastname will be shown. If not it will render a "-":

<KOptionalText :text="`${name} ${lastname}`" />

<KOptionalText>
  <span>{{ name }}</span>
  <span>{{ lastname }}</span>
</KOptionalText>

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change has been added to the changelog

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?

[akolson]

Hi @AlexVelezLl code generally LGTM! Please see herein a few recommendation

[AlexVelezLl]

Hi @akolson! Thank you for the recommendations! I have updated the branch with them :)

[akolson]

Thanks @AlexVelezLl for the changes. LGTM!
Once the accompanying PR in Kolibri/Studio(if any) has been tested for functionality of the component, this PR should be merged! cc @marcellamaki

[rtibbles]

I think it would be good to add this new component to the documentation, especially as you have already written out examples. See here on how to do this: https://github.com/learningequality/kolibri-design-system#development-of-the-documentation-site

The other slight concern is that the Kolibri frontend tests for this integration are failing - showing empty string instead of the placeholder text. Possible that this is a result of stubbing of child components, but would be good to verify what is happening there.

[AlexVelezLl]

Hi @rtibbles! tests on Kolibri were fixed, and docs for this component were added! Let me know if everything is ok with the wording of the docs. Once this PR is merged, I can proceed with updating learningequality/kolibri#10050 to bring the reference back to the main KDS branch.

[rtibbles]

Could you add a second example showing how it works with the default slot as well?

[AlexVelezLl]

Sure! Could it be a new row on the current example table? Or should it be a new different example?

[rtibbles]

I think maybe do it as a separate example, and then you can add some explanatory text about how it is different to the example above. Can even show the difference in a codeblock like you did in your PR description. For an example of showing code instead of rendering the code, see here: https://github.com/learningequality/kolibri-design-system/blob/develop/docs/pages/kcheckbox.vue#L67

[AlexVelezLl]

Got it! I have added one more example, with code examples 😃