Merge pull request #718 from WestpacGEL/kate-changes

Kate changes

apps/site/src/content/design-system/components/autocomplete/design/autocomplete/content.mdoc

@@ -1,11 +1,10 @@
 ```jsx
 <Autocomplete width="30"
-  errorMessage="Error message goes here"
   hintMessage="Search for the appropriate colour"
   label="What colour is the sky?"
   noOptionsMessage="No options"
-  validationState="invalid"
-size="small"
+  validationState="valid"
+size="large"
 >
   <AutocompleteItem>
     Green

apps/site/src/content/design-system/components/autocomplete/design/error-state/content.mdoc

@@ -0,0 +1,22 @@
+All form elements have associated error states, see [Error messages](/content/guidelines/error-message) in our content guidelines for more.
+
+```jsx
+<Autocomplete width="30"
+  errorMessage="If there is an error it can go here"
+  hintMessage="Search for the appropriate colour"
+  label="What colour is the sky?"
+  noOptionsMessage="No options"
+  validationState="invalid"
+size="large"
+>
+  <AutocompleteItem>
+    Green
+  </AutocompleteItem>
+  <AutocompleteItem>
+    Purple
+  </AutocompleteItem>
+  <AutocompleteItem>
+    Blue
+  </AutocompleteItem>
+</Autocomplete>
+```

apps/site/src/content/design-system/components/autocomplete/index.yaml

@@ -14,6 +14,10 @@ design:
       name: Sizes
       slug: sizes
     noTitle: false
+  - title:
+      name: Error state
+      slug: error-state
+    noTitle: false
   - title:
       name: User experience
       slug: user-experience

apps/site/src/content/design-system/components/input-group/design/add-ons/content.mdoc

@@ -244,3 +244,64 @@ Add-on elements can be used either before or after an input, they can provide cl
   );
 };
 ```
+
+### Error state
+
+```tsx
+ () => {
+      const [value, setValue] = useState(0);
+
+      return (
+        <Fragment>
+          <h4 className="typography-body-10 text-muted italic mb-3">Text add-ons with errors</h4>
+
+
+          <InputGroup width={10} size="medium" name="example-text" before="Text" after="Text">
+            <Input invalid defaultValue="Medium" />
+          </InputGroup>
+
+
+          <h4 className="typography-body-10 text-muted italic mb-3">Select add-ons with errors</h4>
+
+
+
+          <InputGroup
+            width={10}
+            size="medium"
+            before={
+              <Select invalid size="medium">
+                <option>Select</option>
+                <option>Option 1</option>
+                <option>Option 2</option>
+              </Select>
+            }
+            after={
+              <Select invalid size="medium">
+                <option>Select</option>
+                <option>Option 1</option>
+                <option>Option 2</option>
+              </Select>
+            }
+          >
+            <Input invalid defaultValue="Medium" />
+          </InputGroup>
+
+
+
+          <h4 className="typography-body-10 text-muted italic mb-3">Button add-ons with errors</h4>
+
+
+          <InputGroup
+            width={10}
+            size="medium"
+            name="example-text"
+            before={<Button size="medium">Button</Button>}
+            after={<Button size="medium">Button</Button>}
+          >
+            <Input invalid defaultValue="Medium" />
+          </InputGroup>
+
+        </Fragment>
+      );
+    };
+```

apps/site/src/content/design-system/components/input-group/design/labels/content.mdoc

@@ -1,17 +1,7 @@
-Use the input group component to accessibly define the labels used with [Inputs,](/components/inputs) [Selects](/components/selects) and [Text areas](/components/textareas). All inputs require labels for usability and accessibility.
+Use the input group component to accessibly define the labels used with [Inputs,](/components/inputs) and [Text areas](/components/textarea). All inputs require labels for usability and accessibility.
 
 ```jsx
-<FormGroup >
-          <FormLabel htmlFor="formInput">Label</FormLabel>
-            <FormHint>Hint text</FormHint>
-          <Input aria-describedby="formHint" width="20" id="formInput" name="test" />
-        </FormGroup>
-```
-
-testing 1 - using InputGroup - not FormGroup
-
-```jsx
-  <InputGroup label="Label" hint="Hint text"  errorMessage="If there is an error it can go here">
-          <Input invalid />
+  <InputGroup width={20} label="Label" hint="Hint text" >
+          <Input />
         </InputGroup>
 ```

apps/site/src/content/design-system/components/input-group/design/supporting-text/content.mdoc

@@ -3,7 +3,7 @@ Supporting text sits below the field, it can be a character count, or validated
 ### Types
 
 ```tsx
-<InputGroup width={20} label="Supporting text" supportingText="I am supporting text">
+<InputGroup width="20" label="Supporting text" supportingText="I am supporting text">
   <Input />
 </InputGroup>
 ```
@@ -44,7 +44,7 @@ Supporting text sits below the field, it can be a character count, or validated
   }, [inputValue]);
 
   return (
-    <InputGroup
+    <InputGroup width="20"
       label="Enter ABA routing number"
       hint="For a valid response use: 647453, all other numbers will show the invalid response"
       after={validating ? { icon: RefreshIcon } : <Button onClick={validate}>Check</Button>}

apps/site/src/content/design-system/components/input-group/design/user-experience/content.mdoc

@@ -1 +1,9 @@
-Input groups are a great addition to fields in forms and calculators, they give immediate affordance informing the user what is required of them. Use input groups when there’s an association between one attribute and another, as they add a clear affordance for what type of data is required to be entered in the field, e.g. $ or %. You can also use an input group add-on at either end of a field related to a question eg an amount or time frame. For example, a numerical value and a time value ($2200 / month), or a currency and numerical value (AUD / $2200).
+### Add-ons
+
+Add-ons are a great addition to fields in forms and calculators, they provide instant cues that inform users about what is expected of them. Use text add-ons when there’s an association between one attribute and another, as they add a clear affordance for what type of data is required to be entered in the field, e.g. $ or %.
+
+You can also use a select add-on at either end of a field to combine two related questions e.g., an amount and a time frame ($2200 / month), or a currency type and a value (AUD / $2200).
+
+### Supporting text
+
+The most common usage of Supporting text is to display a character count for a field entry, this can be very useful to help manage users expectations around how much space is available for their message. It provides visual clarity and for users who may have cognitive or visual impairments, a character count can serve as an accessibility aid, helping them understand the input constraints more easily.

apps/site/src/content/design-system/components/input-group/design/visual-design/content.mdoc

@@ -1 +1 @@
-As with most components in the GUI Input groups are designed to be simple, unobtrusive and accessible. Input addon elements can be positioned at either end of input fields.
+As with most components in the Design system Input groups are designed to be simple, unobtrusive and accessible.

apps/site/src/content/design-system/components/input/accessibility/notes-on-accessibility/content.mdoc

@@ -4,9 +4,9 @@ All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fa
 
 **Input fields** - These fields have been carefully designed and tested to achieve optimal contrast and border line weight. This is crucial for users to quickly identify the element as an input field, providing significant assistance to individuals with low vision and those less familiar with prevailing web design trends. The border colour was modified from the original "Border" colour to a darker version named "Border Dark," to ensure ongoing compliance with WCAG colour contrast guidelines.
 
-**Input labels** _-_ Input labels should be placed above the input field. This helps promote scanning, readability and faster progress.
+**Input labels** *-* Input labels should be placed above the input field. This helps promote scanning, readability and faster progress.
 
-**Hint text** _-_ Hint text should be placed directly under the input label for context. This also ensures on mobile the hint text is visible ‘on canvas’ and is not obscured by any select boxes or keypads when activated.
+**Hint text** *-* Hint text should be placed directly under the input label for context. This also ensures on mobile the hint text is visible ‘on canvas’ and is not obscured by any select boxes or keypads when activated.
 
 ### Robust
 

apps/site/src/content/design-system/components/input/design/error-state/content.mdoc

@@ -0,0 +1,7 @@
+All form elements have associated error states, see [Error messages](/content/guidelines/error-message) in our content guidelines for more.
+
+```jsx
+  <InputGroup width={20} label="Label" hint="Hint text"  errorMessage="If there is an error it can go here">
+          <Input invalid />
+        </InputGroup>
+```

apps/site/src/content/design-system/components/input/design/inputs-with-labels/content.mdoc

@@ -0,0 +1,7 @@
+Use the [Input group](/components/input-group) component to accessibly define the labels used with Inputs, and [Text areas](/components/textareas). All inputs require labels for usability and accessibility.
+
+```jsx
+  <InputGroup width={20} label="Label" hint="Hint text" >
+          <Input />
+        </InputGroup>
+```

apps/site/src/content/design-system/components/input/index.yaml

@@ -4,7 +4,12 @@ description: >-
   used in forms and search tools allowing users to submit information.
 namedExport:
   discriminant: false
+excludeFromNavbar: false
 design:
+  - title:
+      name: Inputs with labels
+      slug: inputs-with-labels
+    noTitle: false
   - title:
       name: Sizes
       slug: sizes
@@ -13,6 +18,10 @@ design:
       name: Fixed widths
       slug: fixed-widths
     noTitle: false
+  - title:
+      name: Error state
+      slug: error-state
+    noTitle: false
   - title:
       name: User experience
       slug: user-experience

apps/site/src/content/design-system/components/select/design/error-state/content.mdoc

@@ -0,0 +1,12 @@
+All form elements have associated error states, see [Error messages](/content/guidelines/error-message) in our content guidelines for more.
+
+```tsx
+<Field label="Select an option" hintMessage="This is a select with labels" errorMessage="If there is an error it can go here">
+        <Select invalid>
+          <option value="option-1">Option 1</option>
+          <option value="option-2">Option 2</option>
+          <option value="option-3">Option 3</option>
+          <option value="option-4">Option 4</option>
+        </Select>
+      </Field>
+```

apps/site/src/content/design-system/components/select/design/select-with-labels/content.mdoc

@@ -0,0 +1,12 @@
+All inputs require labels for usability and accessibility.
+
+```tsx
+<Field label="Select an option" hintMessage="This is a select with labels">
+        <Select >
+          <option value="option-1">Option 1</option>
+          <option value="option-2">Option 2</option>
+          <option value="option-3">Option 3</option>
+          <option value="option-4">Option 4</option>
+        </Select>
+      </Field>
+```

apps/site/src/content/design-system/components/select/index.yaml

@@ -6,6 +6,10 @@ namedExport:
   discriminant: false
 excludeFromNavbar: false
 design:
+  - title:
+      name: Select with labels
+      slug: select-with-labels
+    noTitle: false
   - title:
       name: Sizes
       slug: sizes
@@ -14,6 +18,10 @@ design:
       name: Fixed widths
       slug: fixed-widths
     noTitle: false
+  - title:
+      name: Error state
+      slug: error-state
+    noTitle: false
   - title:
       name: User experience
       slug: user-experience

apps/site/src/content/design-system/components/selector/design/error-state/content.mdoc

@@ -0,0 +1,22 @@
+All form elements have associated error states, see [Error messages](/content/guidelines/error-message) in our content guidelines for more.
+
+```tsx
+<Grid>
+  <GridItem span={{ initial: 12, sm: 6 }}>
+    <Selector label="Select an option" description="This is a select with labels" errorMessage="testing the error" type="radio" validationState="invalid">
+      <SelectorRadio key="1" value="1">
+        <SelectorLabel>Option 1</SelectorLabel>
+        <SelectorHint className="max-sm:typography-body-10 sm:typography-body-9">This selector has the same fucntionality as radios</SelectorHint>
+      </Selector.Radio>
+      <SelectorRadio key="2" value="2">
+        <SelectorLabel>Option 2</SelectorLabel>
+        <SelectorHint className="max-sm:typography-body-10 sm:typography-body-9">This selector has the same fucntionality as radios</SelectorHint>
+      </Selector.Radio>
+      <SelectorRadio key="3" value="3">
+        <SelectorLabel>Option 3</SelectorLabel>
+        <SelectorHint className="max-sm:typography-body-10 sm:typography-body-9">This selector has the same fucntionality as radios</SelectorHint>
+      </Selector.Radio>
+    </Selector>
+  </GridItem>
+</Grid>
+```

apps/site/src/content/design-system/components/selector/design/selector-with-labels/content.mdoc

@@ -0,0 +1,22 @@
+Although it does not appear as a typical form input, the Selector component requires labels as all inputs do for usability and accessibility.
+
+```tsx
+<Grid>
+  <GridItem span={{ initial: 12, sm: 6 }}>
+    <Selector label="Select an option" description="This is a select with labels" type="radio" >
+      <SelectorRadio key="1" value="1">
+        <SelectorLabel>Option 1</SelectorLabel>
+        <SelectorHint className="max-sm:typography-body-10 sm:typography-body-9">This selector has the same fucntionality as radios</SelectorHint>
+      </Selector.Radio>
+      <SelectorRadio key="2" value="2">
+        <SelectorLabel>Option 2</SelectorLabel>
+        <SelectorHint className="max-sm:typography-body-10 sm:typography-body-9">This selector has the same fucntionality as radios</SelectorHint>
+      </Selector.Radio>
+      <SelectorRadio key="3" value="3">
+        <SelectorLabel>Option 3</SelectorLabel>
+        <SelectorHint className="max-sm:typography-body-10 sm:typography-body-9">This selector has the same fucntionality as radios</SelectorHint>
+      </Selector.Radio>
+    </Selector>
+  </GridItem>
+</Grid>
+```

apps/site/src/content/design-system/components/selector/index.yaml

@@ -6,6 +6,10 @@ namedExport:
   discriminant: false
 excludeFromNavbar: false
 design:
+  - title:
+      name: Selector with labels
+      slug: selector-with-labels
+    noTitle: false
   - title:
       name: Selector functionality
       slug: selector-functionality
@@ -14,6 +18,10 @@ design:
       name: Selector design
       slug: selector-design
     noTitle: false
+  - title:
+      name: Error state
+      slug: error-state
+    noTitle: false
   - title:
       name: User experience
       slug: user-experience

apps/site/src/content/design-system/components/textarea/design/error-state/content.mdoc

@@ -0,0 +1,7 @@
+All form elements have associated error states, see [Error messages](/content/guidelines/error-message) in our content guidelines for more.
+
+```jsx
+  <InputGroup label="Label" hint="Hint text"  errorMessage="If there is an error it can go here">
+          <Textarea invalid />
+        </InputGroup>
+```

apps/site/src/content/design-system/components/textarea/design/text-area-with-labels/content.mdoc

@@ -0,0 +1,7 @@
+Use the [Input group](/components/input-group) component to accessibly define the labels used with Text areas and [Inputs](/components/input). All inputs require labels for usability and accessibility.
+
+```jsx
+  <InputGroup label="Label" hint="Hint text" >
+          <Textarea />
+        </InputGroup>
+```

apps/site/src/content/design-system/components/textarea/index.yaml

@@ -6,10 +6,18 @@ namedExport:
   discriminant: false
 excludeFromNavbar: false
 design:
+  - title:
+      name: Text area with labels
+      slug: text-area-with-labels
+    noTitle: false
   - title:
       name: Sizes
       slug: sizes
     noTitle: false
+  - title:
+      name: Error state
+      slug: error-state
+    noTitle: false
   - title:
       name: User experience
       slug: user-experience