Feature/bt panorama brand

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

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

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

@@ -1,6 +1,6 @@
 {% shortCode name="where-is-this-available" /%}
 
 {% availabilityContent
-  availableGel="available"
-  availableMesh="in-progress"
-  availableLegacyWdp="older-version-available" /%}
+   availableGel="available"
+   availableMesh="older-version-available"
+   availableLegacyWdp="older-version-available" /%}

apps/site/src/content/design-system/components/bottom-sheet/design/where-is-this-available/content.mdoc

@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
-   availableLegacyWdp="older-version-available" /%}
+   availableMesh="unavailable"
+   availableLegacyWdp="unavailable" /%}

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

@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
+   availableMesh="older-version-available"
    availableLegacyWdp="older-version-available" /%}

apps/site/src/content/design-system/components/flexi-cell/design/where-is-this-available/content.mdoc

@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
-   availableLegacyWdp="older-version-available" /%}
+   availableMesh="unavailable"
+   availableLegacyWdp="unavailable" /%}

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

@@ -6,18 +6,19 @@
     brand="wbc"
     hideLogo
   >
-    <div>
-      <SecurityIcon
-        className="float-left shrink-0 max-md:mr-1 md:mr-2"
-        color="muted"
-        size={{
-          initial: 'small',
-          md: 'medium'
-        }}
-      />
-      <p className="text-muted">
-        Footer content
-      </p>
+    <div className="relative">
+      <div className="float-left flex-none">
+        <SecurityIcon
+          className="float-left shrink-0 mr-1 mt-0.5"
+          color="muted"
+          size="small"
+        />
+      </div>
+      <div className="flex">
+        <p className="text-muted relative flex-1">
+          Footer content goes here.
+        </p>
+      </div>
     </div>
   </Footer>
 </>

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

@@ -6,25 +6,19 @@ This is the basic footer component, the content should be project specific.
     brand="wbc"
     hideLogo
   >
-    <div>
-      <SecurityIcon
-        className="float-left shrink-0 max-md:mr-1 md:mr-2"
-        color="muted"
-        size={{
-          initial: 'small',
-          md: 'medium'
-        }}
-      />
-      <p className="text-muted">
-        Our site and your transactions are secure. You can read our{' '}
-        <Link
-          href="#"
-          type="inline"
-        >
-          security information
-        </Link>
-        . © 2023 Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714.
-      </p>
+    <div className="relative">
+      <div className="float-left flex-none">
+        <SecurityIcon
+          className="float-left shrink-0 mr-1 mt-0.5"
+          color="muted"
+          size="small"
+        />
+      </div>
+      <div className="flex">
+        <p className="text-muted relative flex-1">
+          Footer content goes here.
+        </p>
+      </div>
     </div>
   </Footer>
 </>

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

@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="available"
-   availableLegacyWdp="available" /%}
+   availableMesh="older-version-available"
+   availableLegacyWdp="older-version-available" /%}

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

@@ -5,7 +5,7 @@ description: >-
   they are in.
 namedExport:
   discriminant: false
-excludeFromNavbar: true
+excludeFromNavbar: false
 design:
   - title:
       name: Footer

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/input-group/design/where-is-this-available/content.mdoc

@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
+   availableMesh="older-version-available"
    availableLegacyWdp="older-version-available" /%}

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

@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
+   availableMesh="older-version-available"
    availableLegacyWdp="older-version-available" /%}

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/components/repeater/design/where-is-this-available/content.mdoc

@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
+   availableMesh="older-version-available"
    availableLegacyWdp="older-version-available" /%}

apps/site/src/content/design-system/content/digital-writing-approach/index.yaml → apps/site/src/content/design-system/content/before-you-start/index.yaml

@@ -1,4 +1,4 @@
-name: Digital writing approach
+name: Before you start
 description: >-
   When writing for digital, we want our customers to easily understand our
   messaging and successfully complete their task online in the quickest and

apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc

@@ -1,19 +1,21 @@
 No full stops at the end of any headings but fine to use a full stop or comma to break up a headline.
 
-For example:
-
-> OUR DREAM RATE JUST GOT DREAMIER
-> 
-> LIFE IS EVENTFUL. THAT’S WHY WE HELP
-> 
-> MEET RED, YOUR VIRTUAL ASSISTANT
-
----
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">For example:</h4>
+<p className="typography-body-10 mb-2 ml-4">OUR DREAM RATE JUST GOT DREAMIER</p>
+<p className="typography-body-10 mb-2 ml-4">LIFE IS EVENTFUL. THAT’S WHY WE HELP</p>
+<p className="typography-body-10 mb-2 ml-4">MEET RED, YOUR VIRTUAL ASSISTANT</p>
+</div>
+```
 
 Question marks and exclamation marks can help keep headings short and engaging.
 
-For example:
-
-> WANT $3K CASHBACK?
-
-*Note: Only use exclamation marks when appropriate, e.g. Now that’s a great rate!*
+```jsx
+<div>
+<h4 className="typography-body-10 text-muted mb-3">For example:</h4>
+<p className="typography-body-10 mb-2 ml-4">WANT $3K CASHBACK?</p>
+<p className="typography-body-10 mb-6 ml-4">LIFE IS EVENTFUL. THAT’S WHY WE HELP</p>
+<p className="typography-body-10 text-muted italic">Note: Only use exclamation marks when appropriate, e.g. Now that’s a great rate!</p>
+</div>
+```

apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc

@@ -41,8 +41,6 @@ Avoid defining people by their disability and aim for positive language.
 
 Try to keep holidays agnostic where possible.
 
-For example:
-
 ```jsx
 <div>
 <h4 className="typography-body-10 text-muted mb-3">For example:</h4>

apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/full-stops/content.mdoc

@@ -12,8 +12,6 @@ Use full stops for sub-copy and body copy.
 
 *Note: You can use a full stop to break up a headline, but no full stop on the end.*
 
-For example:
-
 ```jsx
 <div>
 <h4 className="typography-body-10 text-muted mb-3">For example:</h4>

apps/site/src/content/design-system/design-tokens/index.yaml

@@ -1,9 +1,16 @@
 name: Design tokens
-description: Design tokens support us to share basic brand styling at the simplest level with any interface on any platform across the Bank.
+description: >-
+  Design tokens support us to share basic brand styling at the simplest level
+  with any interface on any platform across the Bank.
+namedExport:
+  discriminant: false
+excludeFromNavbar: true
 design:
   - title:
       name: Main
       slug: main
     noTitle: true
+    noDemo: false
 accessibility: []
 relatedComponents: []
+code: []

apps/site/src/content/design-system/foundation/font/index.yaml

@@ -15,17 +15,17 @@ design:
       name: Body font
       slug: body-font
     noTitle: false
-    noDemo: false
+    noDemo: true
   - title:
       name: Typographic scale
       slug: typographic-scale
     noTitle: false
-    noDemo: false
+    noDemo: true
   - title:
       name: Font weights
       slug: font-weights
     noTitle: false
-    noDemo: false
+    noDemo: true
   - title:
       name: Using fonts
       slug: using-fonts

apps/site/src/content/design-system/foundation/icon/design/where-is-this-available/content.mdoc

@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="available"
-   availableLegacyWdp="available" /%}
+   availableMesh="older-version-available"
+   availableLegacyWdp="older-version-available" /%}