Merge pull request #703 from WestpacGEL/kate-content-changes

Kate content changes

apps/site/src/content/design-system/components/badge/accessibilityDemo.mdoc

@@ -13,7 +13,7 @@
     ] as const;
 
     return (
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-6">
         <div>
           <p className="mb-2 typography-body-10 text-muted">
             <em>Examples showing pill style badge</em>
@@ -29,15 +29,15 @@
             </Button>
             <Button look="primary">
               <div className="flex gap-1">
-                <Badge color="faint" type="pill">
+                <Badge color="faint" type="pill" soft>
                   88
                 </Badge>
                 <span>Label</span>
               </div>
             </Button>
             <a className="text-link underline" href="#">
                 Messages 
-                <Badge color="success" type="pill">
+                <Badge color="muted" type="pill" className="ml-1">
                   12
                 </Badge>
               </a>
@@ -59,21 +59,21 @@
             <Button look="primary">
               <div className="flex gap-1 items-center">
                 <span>Label</span>
-                <Badge color="faint">NEW</Badge>
+                <Badge color="faint" soft>NEW</Badge>
               </div>
             </Button>
 
             <a className="text-link underline" href="#">
                 Product feature
-                <Badge color="faint"  ml-4>
+                <Badge color="muted"  className="ml-1">
                   NEW
                 </Badge>
               </a>
 
+
           </div>
         </div>
       </div>
     );
   };
-
 ```

apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc

@@ -1,18 +1,33 @@
-Badges come in 2 different styles, *Default* and *Pill.* Each style has 8 colour options, the Reserved colours as well as 4 brand colours. In general, badges can be used to highlight that something requires attention.
+Badges come in 2 different styles: Default, used to highlight words, and Pill, used to highlight numbers.
 
 ### Badges - Default
 
 ```tsx
 () => {
-  const COLORS = ['danger', 'warning', 'success', 'info', 'primary', 'hero', 'neutral', 'faint'] as const;
-
+  const COLORS = ['danger', 'warning', 'success', 'info', 'primary', 'hero', 'neutral', 'faint', 'muted'] as const;
+ 
   return (
-    <div className="flex gap-1 flex-wrap w-[15.625rem]">
-      {COLORS.map(color => (
-        <Badge className="my-1" color={color}>
-          {color}
-        </Badge>
-      ))}
+    <div className="flex flex-col gap-2">
+          <p className="typography-body-10 text-muted">
+            <em>Colours</em>
+          </p>
+      <div className="flex gap-2">
+        {COLORS.map(color => (
+          <Badge color={color} >
+            {color}
+          </Badge>
+        ))}
+      </div>
+          <p className="typography-body-10 text-muted">
+            <em>Soft</em>
+          </p>
+      <div className="flex gap-2">
+        {COLORS.map(color => (
+          <Badge color={color} soft>
+            {color}
+          </Badge>
+        ))}
+      </div>
     </div>
   );
 };
@@ -22,15 +37,30 @@ Badges come in 2 different styles, *Default* and *Pill.* Each style has 8 colour
 
 ```tsx
 () => {
-  const COLORS = ['danger', 'warning', 'success', 'info', 'primary', 'hero', 'neutral', 'faint'] as const;
-
+  const COLORS = ['danger', 'warning', 'success', 'info', 'primary', 'hero', 'neutral', 'faint', 'muted'] as const;
+ 
   return (
-    <div className="flex gap-1 flex-wrap w-[12rem]">
-      {COLORS.map(color => (
-        <Badge className="my-1" type="pill" color={color}>
-          88
-        </Badge>
-      ))}
+    <div className="flex flex-col gap-2">
+          <p className="typography-body-10 text-muted">
+            <em>Colours</em>
+          </p>
+      <div className="flex gap-2">
+        {COLORS.map(color => (
+          <Badge className="my-1" type="pill" color={color} >
+            88
+          </Badge>
+        ))}
+      </div>
+          <p className="typography-body-10 text-muted">
+            <em>Soft</em>
+          </p>
+      <div className="flex gap-2">
+        {COLORS.map(color => (
+          <Badge className="my-1" type="pill" color={color} soft>
+            88
+          </Badge>
+        ))}
+      </div>
     </div>
   );
 };
@@ -53,7 +83,7 @@ Badges come in 2 different styles, *Default* and *Pill.* Each style has 8 colour
     ] as const;
 
     return (
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-6">
         <div>
           <p className="mb-2 typography-body-10 text-muted">
             <em>Examples showing pill style badge</em>
@@ -69,15 +99,15 @@ Badges come in 2 different styles, *Default* and *Pill.* Each style has 8 colour
             </Button>
             <Button look="primary">
               <div className="flex gap-1">
-                <Badge color="faint" type="pill">
+                <Badge color="faint" type="pill" soft>
                   88
                 </Badge>
                 <span>Label</span>
               </div>
             </Button>
             <a className="text-link underline" href="#">
                 Messages 
-                <Badge color="success" type="pill">
+                <Badge color="muted" type="pill" className="ml-1">
                   12
                 </Badge>
               </a>
@@ -99,17 +129,18 @@ Badges come in 2 different styles, *Default* and *Pill.* Each style has 8 colour
             <Button look="primary">
               <div className="flex gap-1 items-center">
                 <span>Label</span>
-                <Badge color="faint">NEW</Badge>
+                <Badge color="faint" soft>NEW</Badge>
               </div>
             </Button>
 
             <a className="text-link underline" href="#">
-                Product feature{' '}
-                <Badge color="faint"  ml-4>
+                Product feature
+                <Badge color="muted"  className="ml-1">
                   NEW
                 </Badge>
               </a>
 
+
           </div>
         </div>
       </div>

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

@@ -5,6 +5,7 @@ description: >-
   needed.
 namedExport:
   discriminant: false
+excludeFromNavbar: false
 design:
   - title:
       name: Badge styles

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

@@ -30,7 +30,7 @@
   const clearInput = useCallback(() => setInputValue(''), []);
 
   return (
-    <InputGroup
+    <InputGroup width={20}
       label="Search"
       before={{
         icon: SearchIcon,
@@ -52,7 +52,7 @@
   const toggleType = useCallback(() => setTypeInput(state => (state === 'password' ? 'text' : 'password')), []);
 
   return (
-    <InputGroup
+    <InputGroup width={20}
       label="Show and hide input visibility"
       after={{
         inset: true,

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

@@ -5,6 +5,7 @@ description: >-
   icons and supporting text.
 namedExport:
   discriminant: false
+excludeFromNavbar: false
 design:
   - title:
       name: Add-ons

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

@@ -1,10 +1,10 @@
 name: Colours
 description: >-
-  The colours specified below should be used for all Westpac user interfaces.
   It’s important to understand how the colour system works in a multi-brand
   environment and adhere to the accessibility guidelines.
 namedExport:
   discriminant: false
+excludeFromNavbar: false
 design:
   - title:
       name: Primary UI palette

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

@@ -1,9 +1,10 @@
 name: Fonts
 description: >-
-  The font system allows each brand to designate two typefaces: A display font
-  for headings and a body font for editorial and UI elements.
+  The font system allows each brand to designate two typefaces, a brand font and
+  a body font.
 namedExport:
   discriminant: false
+excludeFromNavbar: false
 design:
   - title:
       name: Brand font