Merge pull request #608 from WestpacGEL/develop

Develop to main

apps/site/src/content/articles/design-with-gel/content.mdoc

@@ -16,11 +16,11 @@ In practical terms and in its simplest form, it's a set of assets and guidelines
 
 First and foremost, usability and accessibility has to be the foundation from which we design. Luckily, GEL elements, components, and patterns are all user tested and accessibility tested. Bonus! However, it’s important to remember that context can change many things as can the way products are built in code, so user and accessibility testing should always be part of your project.
 
-UX designers can access component and pattern rationale through Confluence, use tools like the Forms paper prototyping sheets to rapidly prototype low fidelity user journeys and screens, and see forms components and patterns in action through [Protoform](https://gel.westpacgroup.com.au/protoform).
+UX designers can access component and pattern rationale through Confluence, use tools like the Forms paper prototyping sheets to rapidly prototype low fidelity user journeys and screens, and see forms components and patterns in Figma.
 
-UI designers can access design assets from the [Figma Libraries](/articles/figma-libraries), and get up to speed on our brand and design standards such as [Typography](/articles/typography) and [Colour](/articles/colour) elsewhere on the GEL website. Assemble high quality mock-ups and prototypes using the [Figma Libraries](/articles/figma-libraries) while [Protoform](https://gel.westpacgroup.com.au/protoform) is another useful tool for seeing the behaviour of components and patterns.
+UI designers can access design assets from the [Figma Libraries](/articles/figma-libraries), and get up to speed on our brand and design standards such as [Typography](/articles/typography) and [Colour](/articles/colour) elsewhere on the GEL website. Assemble high quality mock-ups and prototypes using the [Figma Libraries](/articles/figma-libraries).
 
-Developers can go straight to the [design system](/design-system) to read implementation guidelines and access code, while also referencing [Protoform](https://gel.westpacgroup.com.au/protoform), our interactive demonstration of common form patterns. [Protoform](https://gel.westpacgroup.com.au/protoform) provides best-practice consideration for responsive layout, WCAG accessibility compliance, user experience and brand requirements.
+Developers can go straight to the [design system](/design-system) to read implementation guidelines and access code, and learn best-practice consideration for responsive layout, WCAG accessibility compliance, user experience and brand requirements.
 
 ## I want to design the interface my way
 

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

@@ -0,0 +1,21 @@
+All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fall under the [four principles of accessibility](/design-system/accessibility/design-system-accessibility) – Perceivable, Operable, Understandable and Robust. Below are some specific ways in which this component follows these principles:
+
+### Perceivable
+
+*Autocomplete field-* These input fields have been designed and tested to have the correct amount of contrast and line weight around the border. This is important so as to quickly recognise the field as an affordance and also greatly assists those with low vision, and those without extensive knowledge of web design trends.
+
+*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.
+
+### Operable
+
+The Design System components have been coded to be navigable using a keyboard and other assistive technologies. WCAG compliance recommends being aware of the time it takes for people to complete tasks and to not automatically move focus. Animation should be controlled and simple so as not to cause seizures, and it’s important to provide the ability to perform the same task in multiple ways where possible. These rules have been followed where navigation and interaction is included in Design System components or patterns.
+
+### Understandable
+
+WCAG compliance requires consistent and predicable interactions, clear and simple language, concise labels, no jargon or abbreviations and clear error messaging. These rules have been followed where content and interactions are included in Design System components or patterns.
+
+### Robust
+
+A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a larger clickable area, for example, to select or activate the control. It also ensures that assistive technology can refer to the correct label when presenting a form control.

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

@@ -0,0 +1,19 @@
+```jsx
+<Autocomplete
+  errorMessage="Error message goes here"
+  hintMessage="Search for the appropriate colour"
+  label="What colour is the sky?"
+  noOptionsMessage="No options"
+  validationState="invalid"
+>
+  <Autocomplete.Item>
+    Green
+  </Autocomplete.Item>
+  <Autocomplete.Item>
+    Purple
+  </Autocomplete.Item>
+  <Autocomplete.Item>
+    Blue
+  </Autocomplete.Item>
+</Autocomplete>
+```

apps/site/src/content/design-system/components/autocomplete/design/dos-and-don-ts/content.mdoc

@@ -0,0 +1,2 @@
+- Do use the Autocomplete field in scenarios where the user will already know the option they need to search for and select, e.g., their address or a country, etc.  
+- Avoid using Autocomplete if the user needs to see the entire list of options before they can select, e.g., a list of Product specific options. 

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

@@ -0,0 +1,41 @@
+Autocomplete fields come in four different sizes (heights), which align to the regular text inputs within the Design system. Ensure when you are designing forms that you alway use the same size across element types.
+
+```jsx
+
+       <div>     <Autocomplete label="Small example" size="small" className="mb-4">
+              <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+              <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+              <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+              <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+              <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+              <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+            </Autocomplete>
+
+ <Autocomplete label="Medium example" size="medium" className="mb-4">
+              <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+              <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+              <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+              <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+              <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+              <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+            </Autocomplete>
+
+ <Autocomplete label="Large example" size="large" className="mb-4">
+              <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+              <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+              <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+              <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+              <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+              <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+            </Autocomplete>
+
+ <Autocomplete label="X-Large example" size="xlarge">
+              <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+              <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+              <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+              <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+              <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+              <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+            </Autocomplete>
+</div>
+```

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

@@ -0,0 +1,3 @@
+Using an Autocomplete field can streamline and accelerate the process of inputting information. As the user starts typing, a filtered list of options appears, based on the characters they have entered. It can be very useful in scenarios where the list of possible options is very long, and the user already knows the answer they are looking for. When used correctly, this component helps make selections more efficiently, reduces typos and generally improves the user experience. 
+
+We suggest using the word *Search* somewhere in the hint text label, this, along with the Search icon, this sets the expectation of search-oriented functionality rather than a simple text input.

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

@@ -0,0 +1 @@
+As with most components in the GUI the Autocomplete is designed to be simple, unobtrusive and accessible. The addition of the Search icon, provides the affordance to the user that there is a search functionality as opposed to a straight input.

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

@@ -1,5 +1,41 @@
-name: Autocompletes
+name: Autocomplete
+description: >-
+  Autocomplete predicts and suggests possible inputs as users type, speeding up
+  the input process and enhancing the user experience. 
+namedExport:
+  discriminant: false
+design:
+  - title:
+      name: Autocomplete
+      slug: autocomplete
+    noTitle: false
+  - title:
+      name: Sizes
+      slug: sizes
+    noTitle: false
+  - title:
+      name: User experience
+      slug: user-experience
+    noTitle: false
+  - title:
+      name: Visual design
+      slug: visual-design
+    noTitle: false
+  - title:
+      name: Dos and don'ts
+      slug: dos-and-don-ts
+    noTitle: false
+accessibility:
+  - title:
+      name: Notes on accessibility
+      slug: notes-on-accessibility
+relatedComponents:
+  - title: Icons
+    slug: /design-system/foundation/icon
+  - title: Text input
+    slug: /design-system/components/input
 code:
   - title:
       name: Development examples
-      slug: development-examples
+      slug: development-examples
+    noTitle: false

apps/site/src/content/design-system/components/progress-bar/accessibility/accessibility-api/content.mdoc

@@ -1 +1 @@
-- `<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0% complete" aria-live="polite">`: Provides a progress bar with aria attributes to indicate the actual progress value. The _aria-live_ attribute informs assistive technologies the region receives updates that are important for the user to receive, but not so rapid as to be annoying. \[React component: refer to _value_ prop\]
+- `<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0% complete" aria-live="polite">`: Provides a progress bar with aria attributes to indicate the actual progress value. The *aria-live* attribute informs assistive technologies the region receives updates that are important for the user to receive, but not so rapid as to be annoying. [React component: refer to *value* prop]

apps/site/src/content/design-system/components/progress-bar/accessibility/accessibility-features/content.mdoc

@@ -1,4 +1,4 @@
-- A `<div>` element with “progressbar” _role_ identifies an element that displays the progress status for a task that take a long time or consists of several steps. Various aria attributes provide min, max and current values.
+- A `<div>` element with “progressbar” *role* identifies an element that displays the progress status for a task that take a long time or consists of several steps. Various aria attributes provide min, max and current values.
 - The progress bar is configured to provide an indication of task or action completion in percentage units, announced as “x% complete”
 - Displaying the current value is optional; it can be visually hidden if required, but always provided to screen readers through aria value attributes
 - The progress bar shape and is visible in Windows High Contrast Mode (WHCM). The indicator bar is additionally rendered using a transparent CSS border to ensure visibility in WHCM.

apps/site/src/content/design-system/components/progress-bar/code/development-examples/content.mdoc

@@ -1,4 +1,4 @@
-## Progress Bar
+### Progress Bar
 
 ```jsx
 () => {

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

@@ -3,19 +3,25 @@ description: >-
   Progress bars are animated bars which show a rate of completion for a system
   task or a response to user input. They can be accompanied by a percentage of
   completion value.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Progress bar
       slug: progress-bar
+    noTitle: false
   - title:
       name: User experience
       slug: user-experience
+    noTitle: false
   - title:
       name: Visual design
       slug: visual-design
+    noTitle: false
   - title:
       name: Dos and don’ts
       slug: dos-and-donts
+    noTitle: false
 accessibility:
   - title:
       name: Notes on accessibility
@@ -29,7 +35,9 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedComponents: []
 code:
   - title:
       name: Development examples
-      slug: development-examples
+      slug: development-examples
+    noTitle: false

apps/site/src/content/design-system/components/progress-rope/code/development-examples/content.mdoc

@@ -1,5 +1,3 @@
-## Progress Rope
-
 ### Default usage
 
 ```tsx

apps/site/src/content/design-system/content/guidelines/abbreviation/design/abbreviations/content.mdoc

@@ -0,0 +1,39 @@
+Use abbreviations when they're well known and appropriate to use.
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4">8am, 5pm</p>
+<p className="typography-body-10 ml-4">Min., max.</p>
+</div>
+```
+
+---
+
+For these abbreviations, use a comma beforehand:
+
+- etc. - 'more of the same'
+- i.e. - 'in other words'
+- e.g. - ‘for example’
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">We service a range of industries, e.g. health, education, agriculture, etc.</p>
+</div>
+```
+
+---
+
+Use lower case for numerical abbreviations.
+
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10  mb-2 ml-3">10kg, 10m, $10m</p>
+<p className="typography-body-10 text-muted italic  mb-3">Note: Don’t use plurals or space between the number and the abbreviation.</p>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> 10kg</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> 10kgs, 10 kg</p>
+</div>
+```

apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml

@@ -1,8 +1,12 @@
 name: Abbreviations
 description: Abbreviations are shortened forms of words or phrases.
+namedExport:
+  discriminant: false
 design:
   - title:
-      name: title
-      slug: title
+      name: Abbreviations
+      slug: abbreviations
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []

apps/site/src/content/design-system/content/guidelines/acronym/design/acronyms/content.mdoc

@@ -1,27 +1,33 @@
 Before using most acronyms, the first mention should spell them out followed by the initials in rounded brackets – thereafter, just use the acronym.
 
-For example:
-
-> You can update your Tax File Number (TFN) at the Australian Tax Office (ATO). Once you’ve updated your TFN, let us know.
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 ml-4">You can update your Tax File Number (TFN) at the Australian Tax Office (ATO). Once you’ve updated your TFN, let us know.</p>
+</div>
+```
 
 ---
 
 For well-known acronyms, you don’t need to spell out them out.
 
-For example:
-
-> ATM, PIN, BSB, SMS, PDF, URL
->
-> NSW, Qld, SA, Vic, ACT, NT, WA, Tas
-
-_Note: Don’t use full stops between letters._
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-6 ml-4">ATM, PIN, BSB, SMS, PDF, URL</p>
+<p className="typography-body-10 mb-6 ml-4">NSW, Qld, SA, Vic, ACT, NT, WA, Tas</p>
+<p className="typography-body-10 text-muted italic">Note: Don’t use full stops between letters.</p>
+</div>
+```
 
 ---
 
 Don’t use acronyms for product categories.
 
-For example:
-
-> Do: credit card, home loan
->
-> Don’t: CC, HL
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">FOR EXAMPLE:</h4>
+<p className="typography-body-10 mb-2 ml-4"><span className="text-success font-bold">Do:</span> credit card, home loan</p>
+<p className="typography-body-10 ml-4"><span className="text-danger font-bold">Don't:</span> CC, HL</p>
+</div>
+```

apps/site/src/content/design-system/content/guidelines/acronym/index.yaml

@@ -1,8 +1,12 @@
 name: Acronyms
 description: Acronyms are words that are formed from the first letters of other words.
+namedExport:
+  discriminant: false
 design:
   - title:
       name: Acronyms
       slug: acronyms
     noTitle: true
 accessibility: []
+relatedComponents: []
+code: []