From 66b2a71550f1f2984a6829666c5b0113939553bd Mon Sep 17 00:00:00 2001
From: qa46hx <Gerjan.van.Geest@ing.com>
Date: Mon, 3 Feb 2020 10:52:56 +0100
Subject: [PATCH] chore(input): show example html inside label

---
 packages/field/test/FormControlMixin.test.js | 22 ++++++-
 packages/input/stories/index.stories.mdx     | 61 +++++++++++++++++++-
 2 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/packages/field/test/FormControlMixin.test.js b/packages/field/test/FormControlMixin.test.js
index 115b66af3..0325865c7 100644
--- a/packages/field/test/FormControlMixin.test.js
+++ b/packages/field/test/FormControlMixin.test.js
@@ -38,12 +38,21 @@ describe('FormControlMixin', () => {
 
     const elElem = await fixture(html`
       <${tag}>
-        <label slot="label">Email <span>address</span></label>
+        <label slot="label">Email address</label>
         ${inputSlot}
       </${tag}>`);
     expect(elElem.label).to.equal('Email address', 'as an element');
   });
 
+  it('has a label that supports inner html', async () => {
+    const el = await fixture(html`
+      <${tag}>
+        <label slot="label">Email <span>address</span></label>
+        ${inputSlot}
+      </${tag}>`);
+    expect(el.label).to.equal('Email address');
+  });
+
   it('can have a help-text', async () => {
     const elAttr = await fixture(html`
       <${tag} help-text="We will not send you any spam">${inputSlot}</${tag}>
@@ -59,12 +68,21 @@ describe('FormControlMixin', () => {
 
     const elElem = await fixture(html`
       <${tag}>
-        <label slot="help-text">We will not send you any <span>spam</span></label>
+        <label slot="help-text">We will not send you any spam</label>
         ${inputSlot}
       </${tag}>`);
     expect(elElem.helpText).to.equal('We will not send you any spam', 'as an element');
   });
 
+  it('can have a help-text that supports inner html', async () => {
+    const el = await fixture(html`
+      <${tag}>
+        <label slot="help-text">We will not send you any spam</label>
+        ${inputSlot}
+      </${tag}>`);
+    expect(el.helpText).to.equal('We will not send you any spam');
+  });
+
   it('does not duplicate aria-describedby and aria-labelledby ids', async () => {
     const lionField = await fixture(`
       <${elem} help-text="This element will be disconnected/reconnected">${inputSlot}</${elem}>
diff --git a/packages/input/stories/index.stories.mdx b/packages/input/stories/index.stories.mdx
index b66f2f356..7c3c5b213 100644
--- a/packages/input/stories/index.stories.mdx
+++ b/packages/input/stories/index.stories.mdx
@@ -10,7 +10,7 @@ import '../lion-input.js';
 
 `lion-input` component is a webcomponent that enhances the functionality of the native `<input>` element.
 
-<Story name="default">
+<Story name="Default">
   {html`
     <lion-input label="First Name"></lion-input>
   `}
@@ -25,7 +25,7 @@ import '../lion-input.js';
 - Based on [field](?path=/docs/forms-system-overview--page)
 - Extra visual elements can be added via `slots`
   - **label**: can also be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
-    For example add an `sr-only` class to the label to make it visually hidden.
+    For example add an `u-sr-only` class to the label to make it visually hidden.
     A label is always needed for accessibility reasons.
   - **help-text**: a helper text shown below the label to give extra clarification.
   - **prefix**: does not have an active use case yet, but the option is in place.
@@ -49,9 +49,64 @@ import '@lion/input/lion-input.js';
 
 ## Examples
 
+### Label
+
+Can be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
+For example add an `u-sr-only` class to the label to make it (partially) visually hidden.
+A label is always needed for accessibility reasons.
+
+<Story name="Label">
+  {html`
+    <style>
+      .u-sr-only {
+        position: absolute;
+        top: 0;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(100%);
+        clip: rect(1px, 1px, 1px, 1px);
+        white-space: nowrap;
+        border: 0;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+    <lion-input>
+      <label slot="label">Label <span class="u-sr-only">partially only visible for screen-readers</span></label>
+    </lion-input>
+  `}
+</Story>
+
+```html
+<style>
+  .u-sr-only {
+    position: absolute;
+    top: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(100%);
+    clip: rect(1px, 1px, 1px, 1px);
+    white-space: nowrap;
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+</style>
+<lion-input>
+  <label slot="label">Label <span class="u-sr-only">partially only visible for screen-readers</span></label>
+</lion-input>
+```
+
 ### Help-text
 
-<Story name="Help-text with html">
+A helper text shown below the label to give extra clarification.
+
+Just like the `label`, a `help-text` can be provided via the `help-text` attribute, a slot can be used to change the `html` and `CSS` of the help-text.
+For example add an anchor with further explanation.
+
+<Story name="Help-text">
   {html`
     <lion-input>
       <label slot="label">Label</label>