Merge pull request #895 from WestpacGEL/content-bigpatterns-kate

Content bigpatterns kate

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

@@ -191,7 +191,7 @@ Add-on elements can be used either before or after an input, they can provide cl
         <Input />
       </InputGroup>
 
-      <InputGroup size="large" width={30} name="example-button" label="Search" after={<Button>Go</Button>}>
+      <InputGroup size="large" width={30} name="example-button" label="Search" after={<Button size="large" >Go</Button>}>
         <Input defaultValue="" />
       </InputGroup>
 

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

@@ -47,7 +47,7 @@ Supporting text sits below the field, it can be a character count, or validated
     <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>}
+      after={validating ? { icon: ProgressIndicator } : <Button onClick={validate}>Check</Button>}
       errorMessage={error}
     >
       <Input invalid={!!error} onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />

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

@@ -1,12 +1,12 @@
-### Progress Indicator
+### Progress indicator
 
 ```tsx
 () => {
   return <ProgressIndicator />;
 };
 ```
 
-### Progress Indicator Sizes
+### Sizes
 
 ```tsx
 () => {
@@ -20,14 +20,14 @@
 };
 ```
 
-### Inverted Progress Indicator
+### Dark background
 
 ```tsx
 () => {
   return (
     <div className="bg-black w-fit">
       {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
-        <ProgressIndicator size={size} inverted className="mr-2" />
+        <ProgressIndicator size={size} color={'white'} className="mr-2" />
       ))}
     </div>
   );

apps/site/src/content/design-system/components/progress-indicator/design/progress-indicator/content.mdoc

@@ -1,5 +1,41 @@
+### Default
+
+Use this progress indicator to show a process is running.
+
 ```tsx
 () => {
-  return <ProgressIndicator />;
+  return (
+    <div className="p-1 rounded-md flex items-end justify-center" >
+      <ProgressIndicator size="xlarge" />
+    </div>
+  );
+}
+```
+
+### Sizes
+
+The indicator comes in various sizes (Xs, Sm, Md, Lg and Xl) suitable for buttons, fields, or full-page loading.
+
+```tsx
+() => {
+  return (
+    <div className="p-1 rounded-md flex items-end justify-center" >
+      {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
+        <ProgressIndicator size={size} className="mr-2" />
+      ))}
+    </div>
+  );
 };
 ```
+
+### Dark backgrounds
+
+The indicator can appear white for use on dark backgrounds.
+
+```tsx
+() => {
+  return <div className="rounded-md bg-black flex items-end justify-center">
+      <ProgressIndicator size="xlarge" color="white" className="mr-2 mb-2 mt-2" />)}
+    </div>;
+}
+```

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

@@ -0,0 +1 @@
+Use this component within loading patterns. Predominantly the user experience direction is dictated by the pattern that contains it.

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

@@ -0,0 +1 @@
+Simplicity is the key design requirement for this component. It has an intentional minimal form and simple animation, just enough to capture the essence of its meaning. This ensures readability and clarity even at small sizes. It also optimises the file size.

apps/site/src/content/design-system/components/progress-indicator/design/where-is-this-available/content.mdoc

@@ -0,0 +1,8 @@
+{% shortCode name="where-is-this-available" /%}
+
+{% availabilityContent
+   availableGel="available"
+   availableMesh="available"
+   availableLegacyWdp="older-version-available"
+   alternativeMesh="Loader"
+   alternativeLegacyWdp="Loader" /%}

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

@@ -2,7 +2,7 @@ name: Progress indicator
 description: Progress indicators are used to show a state of loading.
 namedExport:
   discriminant: false
-excludeFromNavbar: true
+excludeFromNavbar: false
 design:
   - title:
       name: Progress indicator
@@ -20,14 +20,11 @@ design:
     noTitle: false
     noDemo: false
   - title:
-      name: Dos and don’ts
-      slug: dos-and-donts
+      name: Where is this available?
+      slug: where-is-this-available
     noTitle: false
     noDemo: false
 accessibility:
-  - title:
-      name: Colour impairment demonstration
-      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features

apps/site/src/content/design-system/patterns/help-text/index.yaml → apps/site/src/content/design-system/guides/help-text/index.yaml

@@ -1,4 +1,4 @@
-name: Help text
+name: Help
 description: >-
   Clear communication is vital in the jargon and complexity filled industry of
   financial services.

apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc

@@ -0,0 +1,39 @@
+There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. Page loading solutions are used when the system is waiting for an entire page or application to load. Loading pages should also communicate with the user about what is happening and why they are waiting.
+
+### Why
+
+- The process is transitioning to a new application
+- The page is loading a very large volume of content
+- There is a technical issue
+
+In these scenarios it can be important to disable the entire screen so the user cannot interact with it, using an overlay can achieve this.
+
+### When
+
+Display after about 1-2 seconds
+
+### What
+
+The most common page loading pattern is a simple, animated [Progress Indicator](/components/progress-indicator) (or Spinner icon) on a page overlay. This approach prevents the user from interacting with the content on the screen by covering the entire page including headers, footers or any other navigation. The loading animation should be accompanied by messaging that explains what is happening and why the user is waiting. The message can change based on how long the system is taking.
+
+#### Spinner vs animation
+
+Depending on the process or the audience, instead of showing a simple spinner, we can take the opportunity to insert a brand moment by using a more complex, branded and potentially engaging animation. These are usually reserved for customer facing processes. These animations can be visually specific to the actual process, for example showing an animated letter if the system is sending a message.
+
+### Usage example
+
+Description of what will be displayed
+
+```jsx
+() => {
+  const state = useOverlayTriggerState({});
+  return (
+    <>
+<ProgressIndicator size="xlarge" color="white" className="mr-2 mb-2 mt-2" />
+      <Button look="primary" soft onClick={state.open}>
+        Open
+      </Button>
+    </>
+  );
+};
+```

apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc

@@ -0,0 +1,62 @@
+There are also scenarios where small, individual components require a loading state. For example if you have a button that initiates an action in the page or that you only want the user to click once, the button can have a [Progress Indicator](/components/progress-indicator) (or Spinner icon) that appears once the button is clicked and disables the button until the action is completed.\
+\
+Another common pattern is loading within an input field for an auto-complete component. The user starts typing, if there is a lag while the system calls the back-end to retrieve the items the field can display a [Progress Indicator](/components/progress-indicator) (or Spinner icon)  until the action is completed.
+
+### Why
+
+- To indicate a process has initiated, like search
+- To disable a button from being clicked more than once
+
+### When
+
+Display immediately for disabling scenarios, or after about 200–500 milliseconds when loading.
+
+### What
+
+When indicating loading for very small elements we use an animated icon embedded with the component.
+
+### Usage examples
+
+#### In-field
+
+```jsx
+() => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const [validating, setValidating] = useState<boolean>(false);
+  const [error, setError] = useState<string>();
+  const validate = useCallback(() => {
+    setValidating(true);
+    setError(undefined);
+    setTimeout(() => {
+      if (inputValue !== '647453') {
+        setError('Now you have seen the Progress indicator within a small component.');
+      }
+      setValidating(false);
+    }, 1500);
+  }, [inputValue]);
+  return <InputGroup label="Validate entry" width="20" hint="Select validate to see the Progress Indicator." after={validating ? {
+    icon: ProgressIndicator
+  } : <Button onClick={validate}>Validate</Button>} errorMessage={error}>
+      <Input invalid={!!error} onChange={({
+      target: {
+        value
+      }
+    }) => setInputValue(value)} value={inputValue} />
+    </InputGroup>;
+}
+```
+
+#### In button
+
+```jsx
+() => {
+  return <div className="flex gap-2 py-2">
+<Button size='large' look='primary'  iconAfter={DownloadIcon} iconSize='small' iconColor='white'>
+                Download{'  '}
+              </Button>
+              <Button size='large' look='primary'  iconAfter={ProgressIndicator} disabled iconSize='small' iconColor='white'>
+                Downloading{'  '}
+              </Button>
+    </div>;
+}
+```

apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc

@@ -0,0 +1,31 @@
+Sometimes the system is waiting for only a portion of the page to load, when only a part of the page is still loading we use a [Skeleton loader.](#)
+
+### Why
+
+- Often because of the time it could take for an API to load.
+
+### When
+
+Display after about 200–500 milliseconds
+
+### What
+
+A [Skeleton loader](#) displays a very simplified visual placeholder that mimics the layout of the final content in an abstract and non-literal way. These can often have an animation layer added called a shimmer that creates movement and a bit of visual interest to show that something is happening. As the Skeleton loaders only obscure the areas that are taking a while to appear, it means the user still has access to interact with other areas of the page including navigation.
+
+### Usage example
+
+Showing examples of skeleton loading. Could we do an animated demo where the skeleton loading transitions to the actual UI?
+
+```jsx
+() => {
+  const state = useOverlayTriggerState({});
+  return (
+    <>
+<ProgressIndicator size="xlarge" color="white" className="mr-2 mb-2 mt-2" />
+      <Button look="primary" soft onClick={state.open}>
+        Demo of skeleton loader
+      </Button>
+    </>
+  );
+};
+```

apps/site/src/content/design-system/guides/loading/index.yaml

@@ -0,0 +1,30 @@
+name: Loading
+description: >-
+  Loading patterns are used when the system takes too long to display the
+  requested content on screen. This sort of communication is a critical aspect
+  of the user experience. It helps manage user expectations and reduce perceived
+  wait times. 
+namedExport:
+  discriminant: false
+excludeFromNavbar: false
+design:
+  - title:
+      name: Page loading
+      slug: loading-options
+    noTitle: false
+    noDemo: false
+  - title:
+      name: Page section loading
+      slug: page-section-loading
+    noTitle: false
+    noDemo: false
+  - title:
+      name: Loading within components
+      slug: loading-within-components
+    noTitle: false
+    noDemo: true
+accessibility: []
+relatedComponents:
+  - title: Progress Indicator
+    slug: /components/progress-indicator
+code: []

apps/site/src/utils/format.ts

@@ -52,6 +52,7 @@ export function sortMenu(menuItems: Item[]) {
     'get-started',
     'foundation',
     'components',
+    'guides',
     'patterns',
     'accessibility',
     'content',