Merge pull request #763 from WestpacGEL/kate-patterns-26mar

Kate patterns 26mar

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

@@ -16,14 +16,7 @@ sdfsdf
         }}
       />
       <p className="text-muted">
-        Our site and your online application are secure. For more information read our{' '}
-        <Link
-          href="https://www.westpac.com.au/security/"
-          type="inline"
-        >
-          information on security
-        </Link>
-        . © Copyright © Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714.
+        Footer content.
       </p>
     </div>
   </Footer>

apps/site/src/content/design-system/components/header/code/default/content.mdoc

@@ -0,0 +1,137 @@
+### Default
+
+Default usage example
+
+```tsx
+<>
+  <Header brand="wbc" />
+</>
+```
+
+### Right button
+
+Example with a button on the right
+
+```tsx
+<>
+  <Header brand="wbc">
+    <Button
+      look="faint"
+      onClick={function Ya(){}}
+      size={{
+        initial: 'small',
+        sm: 'medium'
+      }}
+      soft
+    >
+      Sign Out
+    </Button>
+  </Header>
+</>
+```
+
+### Centre at Xsl
+
+Example of logo centering when XSL
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    logoCenter
+  />
+</>
+```
+
+### Logo onClick
+
+Example of logo with onClick
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    logoOnClick={function Ya(){}}
+  />
+</>
+```
+
+### Logo with skiplink
+
+Example of header with skiplink
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    skipToContentId="#"
+  />
+</>
+```
+
+### Fixed
+
+Example fixed header. Does not show correctly in Docs view as it will show how it looks when scrolled, check specific story for non-scrolled view
+
+```tsx
+<div className="h-10">
+  <Header
+    brand="wbc"
+    fixed
+  />
+</div>
+```
+
+### With back arrow
+
+Example of header with arrow button
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    leftIcon="arrow"
+  />
+</>
+```
+
+### With back arrow onClick
+
+Example of header with back arrow button with onClick
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    leftIcon="arrow"
+    leftOnClick={function Ya(){}}
+  />
+</>
+```
+
+### With hamburger
+
+Example of header with hamburger (only visible below xsl)
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    leftIcon="hamburger"
+  />
+</>
+```
+
+### With hamburger onClick
+
+Example of header with hamburger (only visible below xsl) with onClick
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    leftIcon="hamburger"
+    leftOnClick={function Ya(){}}
+  />
+</>
+```

apps/site/src/content/design-system/footer-usage/design/originations-footer/content.mdoc

@@ -0,0 +1,31 @@
+sdfsdf
+
+```jsx
+<>
+  <Footer
+    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 online application are secure. For more information read our{' '}
+        <Link
+          href="https://www.westpac.com.au/security/"
+          type="inline"
+        >
+          information on security
+        </Link>
+        . © Copyright © Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714.
+      </p>
+    </div>
+  </Footer>
+</>
+```

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

@@ -0,0 +1,12 @@
+name: Footer usage
+namedExport:
+  discriminant: false
+excludeFromNavbar: false
+design:
+  - title:
+      name: Originations footer
+      slug: originations-footer
+    noTitle: false
+accessibility: []
+relatedComponents: []
+code: []

apps/site/src/content/design-system/patterns/country-selection/design/country-selection-list/content.mdoc

@@ -1,27 +1,30 @@
-THIS DEMO NEEDS FLAGS, AND THE SEPARATORS FIXED
-
 ```tsx
 () => {
   const MOCK_COUNTRIES = [
     {
       title: 'Popular',
       id: 'popular',
       payees: [
-        {
-          code: 'AU',
-          name: 'Australia',
-        },
         {
           code: 'IN',
           name: 'India',
+          svg: (
+            <IndiaFlag />
+          ),
         },
         {
           code: 'UK',
           name: 'United Kingdom',
+          svg: (
+            <UnitedKingdomFlag />
+          ),
         },
         {
           code: 'USA',
           name: 'United States',
+          svg: (
+            <UnitedStatesFlag />
+          ),
         },
       ],
     },
@@ -30,24 +33,32 @@ THIS DEMO NEEDS FLAGS, AND THE SEPARATORS FIXED
       id: 'a',
       payees: [
         {
-          code: 'AC',
-          name: 'Ascension Islands',
+          code: 'AI',
+          name: 'Ascension Island',
+          svg: (
+            <AscensionIslandFlag />
+          ),
         },
         {
-          code: 'AD',
+          code: 'AN',
           name: 'Andorra',
+          svg: (
+            <AndorraFlag />
+          ),
         },
         {
-          code: 'AE',
+          code: 'UA',
           name: 'United Arab Emirates',
+          svg: (
+            <UnitedArabEmiratesFlag />
+          ),
         },
         {
           code: 'AF',
           name: 'Afghanistan',
-        },
-        {
-          code: 'AG',
-          name: 'Antigua and Barbuda',
+          svg: (
+            <AfghanistanFlag />
+          ),
         },
       ],
     },
@@ -56,10 +67,10 @@ THIS DEMO NEEDS FLAGS, AND THE SEPARATORS FIXED
   return (
     <div>
       {MOCK_COUNTRIES.map(({ title, id, payees }) => (
-        <div key={id} className="flex flex-col gap-3">          
-            <h3 className="font-normal">{title}</h3>
+        <div key={id} className="flex flex-col gap-3">
+          <h3 className="m-0 font-normal">{title}</h3>
           <div>
-            {payees.map(({ name }) => {
+            {payees.map(({ name, svg }) => {
               return (
 <Grid>
   <GridItem span={{ initial: 12, sm: 6 }}>
@@ -68,26 +79,11 @@ THIS DEMO NEEDS FLAGS, AND THE SEPARATORS FIXED
                   href="#"
                   withBorder
                   key={name}
-                  before={
-                    <FlexiCellAdornment>
-                      <svg
-                        className="h-4 w-4"
-                        viewBox="0 0 640 480"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        aria-label="French flag"
-                      >
-    <path fill="#00732f" d="M0 0h640v160H0z"></path>
-    <path fill="#fff" d="M0 160h640v160H0z"></path>
-    <path d="M0 320h640v160H0z"></path>
-    <path fill="red" d="M0 0h220v480H0z"></path>
-                      </svg>
-                    </FlexiCellAdornment>
-                  }
+                  before={<FlexiCellAdornment>{svg}</FlexiCellAdornment>}
                 >
                   <FlexiCellLabel tag="span">{name}</FlexiCellLabel>
                 </FlexiCell>
-  </GridItem>
+</GridItem>
 </Grid>
               );
             })}