[WNMGDS-622] Update inverse examples (#813)

* Add inverse examples to all form examples, make html and react examples consistent

* Example tweaks

* backstop update

* Update packages/design-system-docs/src/pages/components/FormLabel/form-label.example.html

Co-authored-by: Scott Weber <[email protected]>

* Update packages/design-system-docs/src/pages/components/DateField/datefield.example.html

Co-authored-by: Ni Chia <[email protected]>

* Update dropdown labels

* Fix choice e2e test

Co-authored-by: Scott Weber <[email protected]>
Co-authored-by: Ni Chia <[email protected]>

packages/design-system-docs/src/pages/components/Button/button.example.html

@@ -85,7 +85,7 @@ <h6 class="preview__label">Size variant buttons</h6>
 </button>
 
 <h6 class="preview__label">Inverse buttons</h6>
-<div class="example--inverse">
+<div class="example--inverse ds-u-margin-top--0">
   <div class="ds-u-margin-bottom--1">
     <button type="button" class="ds-c-button ds-c-button--inverse">
       Default

packages/design-system-docs/src/pages/components/ChoiceList/ChoiceList.example.jsx

@@ -34,23 +34,28 @@ ReactDOM.render(
         { label: 'Choice 1', value: 'A', defaultChecked: true },
         { label: 'Choice 2', value: 'B' },
       ]}
-      label="Small variant example"
+      label="Small size example"
       name="size-variants"
       type="radio"
       size="small"
     />
     <div className="example--wrapper example--inverse">
       <ChoiceList
         choices={[
-          { label: 'Choice 1', requirementLabel: 'Choice hint text', value: 'A' },
+          {
+            label: 'Choice 1',
+            requirementLabel: 'Choice hint text',
+            value: 'A',
+            defaultChecked: true,
+          },
           { label: 'Choice 2', value: 'B' },
           { label: 'Disabled choice 3', value: 'c', disabled: true },
         ]}
         label="Inverse example"
         errorMessage="Example error message"
         hint="Helpful hint text"
         name="inverse_choices_field"
-        type="radio"
+        type="checkbox"
         inversed
       />
     </div>

packages/design-system-docs/src/pages/components/ChoiceList/checkbox-radio.example.html

@@ -56,7 +56,7 @@
     <label for="radio-2"><span>Choice 2</span></label>
   </fieldset>
   <fieldset class="ds-c-fieldset">
-    <legend class="ds-c-label"><span>Small variant example</span></legend>
+    <legend class="ds-c-label"><span>Small size example</span></legend>
     <input
       class="ds-c-choice ds-c-choice--small"
       id="small-1"
@@ -83,7 +83,7 @@
     <fieldset class="ds-c-fieldset">
       <legend class="ds-c-label"><span>Inverse example</span></legend>
       <span class="ds-c-field__hint ds-c-field__hint--inverse">Helpful hint text</span>
-      <span class="ds-c-field__hint ds-u-color--error-light">Error message example</span>
+      <span class="ds-c-field__hint ds-u-color--error-light">Example error message</span>
       <input
         class="ds-c-choice ds-c-choice--inverse"
         id="inverse-1"

packages/design-system-docs/src/pages/components/DateField/DateField.example.jsx

@@ -14,37 +14,44 @@ class ControlledDateField extends React.PureComponent {
 
   render() {
     return (
-      <fieldset className="ds-u-margin-top--3 ds-u-padding-left--3 ds-u-padding-bottom--3 ds-u-border--2">
-        <legend className="ds-u-font-size--h3">Controlled Example</legend>
-        <DateField
-          label={
-            <span>
-              DateField using default <code>dateFormatter</code>
-            </span>
-          }
-          hint="Try to enter a date with invalid number of digits"
-          monthValue={this.state.month}
-          dayValue={this.state.day}
-          yearValue={this.state.year}
-          onChange={(e, dateObject) => this.setState(dateObject)}
-        />
-      </fieldset>
+      <DateField
+        label={
+          <span>
+            Controlled example using <code>dateFormatter</code>
+          </span>
+        }
+        hint="Try to enter a date with invalid number of digits"
+        monthValue={this.state.month}
+        dayValue={this.state.day}
+        yearValue={this.state.year}
+        onChange={(e, dateObject) => this.setState(dateObject)}
+      />
     );
   }
 }
 
 ReactDOM.render(
-  <>
+  <div className="example--wrapper">
     <DateField
-      label="DateField example with invalid year"
+      label="Date of birth"
       errorMessage="Please enter a year in the past"
       monthDefaultValue="10"
       dayDefaultValue="31"
       yearDefaultValue="2050"
       yearInvalid
     />
-
     <ControlledDateField />
-  </>,
+    <div className="example--wrapper example--inverse">
+      <DateField
+        label="Inverse example"
+        errorMessage="Please enter a year in the past"
+        monthDefaultValue="10"
+        dayDefaultValue="31"
+        yearDefaultValue="2050"
+        yearInvalid
+        inversed
+      />
+    </div>
+  </div>,
   document.getElementById('js-example')
 );

packages/design-system-docs/src/pages/components/DateField/datefield.example.html

@@ -1,55 +1,126 @@
-<fieldset class="ds-c-fieldset">
-  <legend class="ds-c-label" id="dob-datefield">
-    <span class="ds-u-font-weight--bold">Date of birth</span>
-    <span class="ds-c-field__hint">For example: 4 / 28 / 1986</span>
-  </legend>
-  <div class="ds-l-form-row ds-u-align-items--end">
-    <div class="ds-l-col--auto">
-      <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="month"
-        ><span>Month</span></label
-      >
-      <input
-        class="ds-c-field ds-c-field--month"
-        type="text"
-        inputmode="numeric"
-        pattern="[0-9]*"
-        id="month"
-        name="birthdate[month]"
-        autocomplete="bday-month"
-        aria-describedby="dob-datefield"
-      />
-    </div>
-    <span class="ds-c-datefield__separator">/</span>
-    <div class="ds-l-col--auto">
-      <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="day"
-        ><span>Day</span></label
-      >
-      <input
-        class="ds-c-field ds-c-field--day"
-        type="text"
-        inputmode="numeric"
-        pattern="[0-9]*"
-        id="day"
-        name="birthdate[day]"
-        autocomplete="bday-day"
-        aria-describedby="dob-datefield"
-      />
-    </div>
-    <span class="ds-c-datefield__separator">/</span>
-    <div class="ds-l-col--auto">
-      <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="year"
-        ><span>Year</span></label
-      >
-      <input
-        class="ds-c-field ds-c-field--year"
-        type="text"
-        inputmode="numeric"
-        pattern="[0-9]*"
-        id="year"
-        name="birthdate[year]"
-        autocomplete="bday-year"
-        aria-describedby="dob-datefield"
-      />
+<div class="example--wrapper">
+  <fieldset class="ds-c-fieldset">
+    <legend class="ds-c-label" id="dob-datefield">
+      <span class="ds-u-font-weight--bold">Date of birth</span>
+      <span class="ds-c-field__hint">For example: 4 / 28 / 1986</span>
+      <span class="ds-c-field__hint ds-u-color--error" role="alert">
+        Please enter a year in the past
+      </span>
+    </legend>
+    <div class="ds-l-form-row ds-u-align-items--end">
+      <div class="ds-l-col--auto">
+        <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="month"
+          ><span>Month</span></label
+        >
+        <input
+          class="ds-c-field ds-c-field--month"
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          id="month"
+          name="birthdate[month]"
+          autocomplete="bday-month"
+          aria-describedby="dob-datefield"
+          value="10"
+        />
+      </div>
+      <span class="ds-c-datefield__separator">/</span>
+      <div class="ds-l-col--auto">
+        <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="day"
+          ><span>Day</span></label
+        >
+        <input
+          class="ds-c-field ds-c-field--day"
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          id="day"
+          name="birthdate[day]"
+          autocomplete="bday-day"
+          aria-describedby="dob-datefield"
+          value="31"
+        />
+      </div>
+      <span class="ds-c-datefield__separator">/</span>
+      <div class="ds-l-col--auto">
+        <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="year"
+          ><span>Year</span></label
+        >
+        <input
+          class="ds-c-field ds-c-field--error ds-c-field--year"
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          id="year"
+          name="birthdate[year]"
+          autocomplete="bday-year"
+          aria-describedby="dob-datefield"
+          value="2050"
+        />
+      </div>
     </div>
+  </fieldset>
+  <div class="example--wrapper example--inverse">
+    <fieldset class="ds-c-fieldset">
+      <legend class="ds-c-label" id="dob-datefield">
+        <span class="ds-u-font-weight--bold">Inverse example</span>
+        <span class="ds-c-field__hint ds-c-field__hint--inverse">For example: 4 / 28 / 1986</span>
+        <span class="ds-c-field__hint ds-u-color--error-light" role="alert">
+          Please enter a year in the past
+        </span>
+      </legend>
+      <div class="ds-l-form-row ds-u-align-items--end">
+        <div class="ds-l-col--auto">
+          <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="month"
+            ><span>Month</span></label
+          >
+          <input
+            class="ds-c-field ds-c-field--month"
+            type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            id="month"
+            name="birthdate[month]"
+            autocomplete="bday-month"
+            aria-describedby="dob-datefield"
+            value="10"
+          />
+        </div>
+        <span class="ds-c-datefield__separator">/</span>
+        <div class="ds-l-col--auto">
+          <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="day"
+            ><span>Day</span></label
+          >
+          <input
+            class="ds-c-field ds-c-field--day"
+            type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            id="day"
+            name="birthdate[day]"
+            autocomplete="bday-day"
+            aria-describedby="dob-datefield"
+            value="31"
+          />
+        </div>
+        <span class="ds-c-datefield__separator">/</span>
+        <div class="ds-l-col--auto">
+          <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="year"
+            ><span>Year</span></label
+          >
+          <input
+            class="ds-c-field ds-c-field--error ds-c-field--year"
+            type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            id="year"
+            name="birthdate[year]"
+            autocomplete="bday-year"
+            aria-describedby="dob-datefield"
+            value="2050"
+          />
+        </div>
+      </div>
+    </fieldset>
   </div>
-</fieldset>
+</div>

packages/design-system-docs/src/pages/components/Dropdown/Dropdown.example.jsx

@@ -14,46 +14,47 @@ const dropdownOptions = [
 ];
 
 ReactDOM.render(
-  <div>
+  <div className="example--wrapper">
     <Dropdown
       options={dropdownOptions}
-      defaultValue={'1'}
-      hint="Example hint text"
+      defaultValue="1"
       label="Dropdown example"
+      labelClassName="ds-u-margin-top--0"
       name="dropdown_field"
     />
     <Dropdown
       options={dropdownOptions}
-      defaultValue={'1'}
+      defaultValue="1"
       size="small"
-      label="Small dropdown example"
+      label="Small size example"
       name="small_dropdown_field"
     />
     <Dropdown
       options={dropdownOptions}
-      defaultValue={'1'}
+      defaultValue="1"
       size="medium"
-      label="Medium dropdown example"
+      label="Medium size example"
       name="medium_dropdown_field"
     />
     <Dropdown
       options={dropdownOptions}
-      defaultValue={'1'}
-      errorMessage="Error message example"
-      label="Error dropdown example "
-      name="dropdown_field"
+      defaultValue="1"
+      errorMessage="Example error message"
+      hint="Helpful hint text"
+      label="Error example"
+      name="error_dropdown_field"
     />
     <Dropdown
       options={dropdownOptions}
-      defaultValue={'1'}
-      label="Disabled dropdown example"
+      defaultValue="1"
+      label="Disabled example"
       disabled
       name="disabled_dropdown_field"
     />
     <Dropdown
       options={[]}
-      defaultValue={'1-1'}
-      label="Option group dropdown example"
+      defaultValue="1-1"
+      label="Option group example"
       name="custom_dropdown_field"
     >
       <optgroup label="Option group">
@@ -67,6 +68,18 @@ ReactDOM.render(
         <option value="2-3">Option 6</option>
       </optgroup>
     </Dropdown>
+    <div className="example--wrapper example--inverse">
+      <Dropdown
+        labelClassName="ds-u-margin-top--0"
+        options={dropdownOptions}
+        defaultValue="1"
+        errorMessage="Example error message"
+        hint="Helpful hint text"
+        label="Inverse example"
+        name="inverse_dropdown_field"
+        inversed
+      />
+    </div>
   </div>,
   document.getElementById('js-example')
 );