feat: add element property to #form-label to make it more flexible …

…for what it can be used.
dnbexperience · Jul 4, 2019 · a9d5e94 · a9d5e94
1 parent 1e742fc
commit a9d5e94
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 37 deletions.
diff --git a/...gn-system-portal/src/pages/uilib/components/form-label/form-label-properties.md b/...gn-system-portal/src/pages/uilib/components/form-label/form-label-properties.md
@@ -9,3 +9,4 @@ draft: true
 | `vertical`  | _(optional)_ is a short hand to define a `vertical` direction if set to `true`.                                                                                      |
 | `title`     | _(optional)_ the `title` attribute of the label.                                                                                                                     |
 | `text`      | _(optional)_ the `text` of the label.                                                                                                                                |
+| `element`   | _(optional)_ defines the HTML element used. Defaults to `label`.                                                                                                     |
diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -30,20 +30,28 @@ exports[`Checkbox component have to match snapshot 1`] = `
       className={null}
       direction={null}
       disabled="disabled"
+      element="label"
       for_id="id"
       id="id-label"
       render_content={null}
       text="label"
       title={null}
       vertical={null}
     >
-      <label
+      <Element
         className="dnb-form-label"
         htmlFor="id"
         id="id-label"
+        is="label"
       >
-        label
-      </label>
+        <label
+          className="dnb-form-label"
+          htmlFor="id"
+          id="id-label"
+        >
+          label
+        </label>
+      </Element>
     </FormLabel>
     <span
       className="dnb-checkbox className class"

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -82,20 +82,28 @@ exports[`Dropdown component have to match snapshot 1`] = `
     className={null}
     direction={null}
     disabled="disabled"
+    element="label"
     for_id="dropdown-id"
     id="dropdown-id-label"
     render_content={null}
     text="label"
     title={null}
     vertical={null}
   >
-    <label
+    <Element
       className="dnb-form-label"
       htmlFor="dropdown-id"
       id="dropdown-id-label"
+      is="label"
     >
-      label
-    </label>
+      <label
+        className="dnb-form-label"
+        htmlFor="dropdown-id"
+        id="dropdown-id-label"
+      >
+        label
+      </label>
+    </Element>
   </FormLabel>
   <span
     className="dnb-dropdown dnb-dropdown--icon-position-icon_position dnb-dropdown--direction-bottom dnb-dropdown--scroll dnb-dropdown--hidden dnb-dropdown__form-status dnb-dropdown__status--error class className"

diff --git a/packages/dnb-ui-lib/src/components/form-label/FormLabel.js b/packages/dnb-ui-lib/src/components/form-label/FormLabel.js
@@ -21,6 +21,7 @@ const renderProps = {
 
 export const propTypes = {
   for_id: PropTypes.string,
+  element: PropTypes.string,
   title: PropTypes.string,
   text: PropTypes.string,
   id: PropTypes.string,
@@ -43,6 +44,7 @@ export const propTypes = {
 
 export const defaultProps = {
   for_id: null,
+  element: 'label',
   title: null,
   text: null,
   id: null,
@@ -85,6 +87,7 @@ export default class FormLabel extends PureComponent {
 
     const {
       for_id,
+      element,
       title,
       className,
       id,
@@ -118,6 +121,18 @@ export default class FormLabel extends PureComponent {
     // also used for code markup simulation
     validateDOMAttributes(this.props, params)
 
-    return <label {...params}>{content}</label>
+    return (
+      <Element is={element} {...params}>
+        {content}
+      </Element>
+    )
   }
 }
+
+const Element = ({ is: Element, children, ...rest }) => (
+  <Element {...rest}>{children}</Element>
+)
+Element.propTypes = {
+  is: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired
+}
diff --git a/packages/dnb-ui-lib/src/components/form-label/__tests__/FormLabel.test.js b/packages/dnb-ui-lib/src/components/form-label/__tests__/FormLabel.test.js
@@ -22,6 +22,7 @@ import dnb_form_label_theme_ui from '../style/themes/dnb-form-label-theme-ui.scs
 const props = fakeProps(require.resolve('../FormLabel'), {
   optional: true
 })
+props.element = 'label'
 props.direction = 'horizontal'
 
 describe('FormLabel component', () => {

diff --git a/packages/dnb-ui-lib/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap b/packages/dnb-ui-lib/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap
@@ -6,21 +6,30 @@ exports[`FormLabel component have to match snapshot 1`] = `
   className="className"
   direction="horizontal"
   disabled="disabled"
+  element="label"
   for_id="for_id"
   id="id"
   render_content={[Function]}
   text="text"
   title="title"
   vertical="vertical"
 >
-  <label
+  <Element
     className="dnb-form-label dnb-form-label--horizontal className class"
     htmlFor="for_id"
     id="id"
+    is="label"
     title="title"
   >
-    text
-  </label>
+    <label
+      className="dnb-form-label dnb-form-label--horizontal className class"
+      htmlFor="for_id"
+      id="id"
+      title="title"
+    >
+      text
+    </label>
+  </Element>
 </FormLabel>
 `;
 

diff --git a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
@@ -24,20 +24,28 @@ exports[`FormRow component have to match snapshot 1`] = `
       className="dnb-form-row__label"
       direction={null}
       disabled={false}
+      element="label"
       for_id="form-row"
       id="label_id-label"
       render_content={null}
       text="label"
       title={null}
       vertical={null}
     >
-      <label
+      <Element
         className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
         htmlFor="form-row"
         id="label_id-label"
+        is="label"
       >
-        label
-      </label>
+        <label
+          className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+          htmlFor="form-row"
+          id="label_id-label"
+        >
+          label
+        </label>
+      </Element>
     </FormLabel>
     <div
       className="dnb-form-row__content"

diff --git a/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -32,21 +32,30 @@ exports[`Radio component have to match snapshot 1`] = `
       className={null}
       direction={null}
       disabled={false}
+      element="label"
       for_id="radio"
       id="radio-label"
       render_content={null}
       text="label"
       title={null}
       vertical={null}
     >
-      <label
+      <Element
         aria-hidden={false}
         className="dnb-form-label"
         htmlFor="radio"
         id="radio-label"
+        is="label"
       >
-        label
-      </label>
+        <label
+          aria-hidden={false}
+          className="dnb-form-label"
+          htmlFor="radio"
+          id="radio-label"
+        >
+          label
+        </label>
+      </Element>
     </FormLabel>
     <span
       className="dnb-radio__shell"
@@ -131,20 +140,28 @@ exports[`Radio group component have to match group snapshot 1`] = `
           className="dnb-form-row__label"
           direction={null}
           disabled={false}
+          element="label"
           for_id="group"
           id="group-label"
           render_content={null}
           text="Label"
           title={null}
           vertical={null}
         >
-          <label
+          <Element
             className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
             htmlFor="group"
             id="group-label"
+            is="label"
           >
-            Label
-          </label>
+            <label
+              className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+              htmlFor="group"
+              id="group-label"
+            >
+              Label
+            </label>
+          </Element>
         </FormLabel>
         <div
           className="dnb-form-row__content"
@@ -185,21 +202,30 @@ exports[`Radio group component have to match group snapshot 1`] = `
                   className={null}
                   direction={null}
                   disabled={false}
+                  element="label"
                   for_id="radio-1"
                   id="radio-1-label"
                   render_content={null}
                   text="Radio 1"
                   title={null}
                   vertical={null}
                 >
-                  <label
+                  <Element
                     aria-hidden={true}
                     className="dnb-form-label dnb-form-label--horizontal"
                     htmlFor="radio-1"
                     id="radio-1-label"
+                    is="label"
                   >
-                    Radio 1
-                  </label>
+                    <label
+                      aria-hidden={true}
+                      className="dnb-form-label dnb-form-label--horizontal"
+                      htmlFor="radio-1"
+                      id="radio-1-label"
+                    >
+                      Radio 1
+                    </label>
+                  </Element>
                 </FormLabel>
                 <span
                   className="dnb-radio__shell"
@@ -265,21 +291,30 @@ exports[`Radio group component have to match group snapshot 1`] = `
                   className={null}
                   direction={null}
                   disabled={false}
+                  element="label"
                   for_id="radio-2"
                   id="radio-2-label"
                   render_content={null}
                   text="Radio 2"
                   title={null}
                   vertical={null}
                 >
-                  <label
+                  <Element
                     aria-hidden={true}
                     className="dnb-form-label dnb-form-label--horizontal"
                     htmlFor="radio-2"
                     id="radio-2-label"
+                    is="label"
                   >
-                    Radio 2
-                  </label>
+                    <label
+                      aria-hidden={true}
+                      className="dnb-form-label dnb-form-label--horizontal"
+                      htmlFor="radio-2"
+                      id="radio-2-label"
+                    >
+                      Radio 2
+                    </label>
+                  </Element>
                 </FormLabel>
                 <span
                   className="dnb-radio__shell"

diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
@@ -34,20 +34,28 @@ exports[`Slider component have to match snapshot 1`] = `
       className={null}
       direction={null}
       disabled={false}
+      element="label"
       for_id="id"
       id="id-label"
       render_content={null}
       text="label"
       title={null}
       vertical={null}
     >
-      <label
+      <Element
         className="dnb-form-label"
         htmlFor="id"
         id="id-label"
+        is="label"
       >
-        label
-      </label>
+        <label
+          className="dnb-form-label"
+          htmlFor="id"
+          id="id-label"
+        >
+          label
+        </label>
+      </Element>
     </FormLabel>
     <span
       className="dnb-slider className class"

diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
@@ -30,20 +30,28 @@ exports[`Switch component have to match snapshot 1`] = `
       className={null}
       direction={null}
       disabled="disabled"
+      element="label"
       for_id="id"
       id="id-label"
       render_content={null}
       text="label"
       title={null}
       vertical={null}
     >
-      <label
+      <Element
         className="dnb-form-label"
         htmlFor="id"
         id="id-label"
+        is="label"
       >
-        label
-      </label>
+        <label
+          className="dnb-form-label"
+          htmlFor="id"
+          id="id-label"
+        >
+          label
+        </label>
+      </Element>
     </FormLabel>
     <span
       className="dnb-switch className class"