Merge pull request #764 from WestpacGEL/kate-header-page

Kate header page

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

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

apps/site/src/content/design-system/components/header/code/development-examples/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) with onClick
+
+```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/components/header/design/header/content.mdoc

@@ -1,5 +1,48 @@
 ```tsx
+<div className="flex flex-col gap-4">
+<div><ComponentTitle>Default</ComponentTitle>
 <>
   <Header brand="wbc" />
-</>
+</></div>
+
+  <div><ComponentTitle>With Sign Out </ComponentTitle>
+<>
+  <Header brand="wbc">
+    <Button
+      look="faint"
+      onClick={function Ya(){}}
+      size={{
+        initial: 'small',
+        sm: 'medium'
+      }}
+      soft
+    >
+      Sign Out
+    </Button>
+  </Header>
+</></div>
+
+  <div><ComponentTitle>Logo in centre at small views (see demo)</ComponentTitle>
+<>
+  <Header
+    brand="wbc"
+    logoCenter
+  />
+</></div>
+ <div> <ComponentTitle>With back arrow</ComponentTitle>
+<>
+  <Header
+    brand="wbc"
+    leftIcon="arrow"
+  />
+</></div>
+<div>
+  <ComponentTitle>With hamburger at small views (see demo)</ComponentTitle>
+<>
+  <Header
+    brand="wbc"
+    leftIcon="hamburger"
+  />
+</></div>
+</div>
 ```

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

@@ -31,42 +31,6 @@ relatedComponents:
     slug: /components/footers
 code:
   - title:
-      name: Default
-      slug: default
-    noTitle: false
-  - title:
-      name: Right button
-      slug: right-button
-    noTitle: false
-  - title:
-      name: Center at Xsl
-      slug: center-at-xsl
-    noTitle: false
-  - title:
-      name: Logo on click
-      slug: logo-on-click
-    noTitle: false
-  - title:
-      name: Logo with skip link
-      slug: logo-with-skip-link
-    noTitle: false
-  - title:
-      name: Fixed
-      slug: fixed
-    noTitle: false
-  - title:
-      name: With back arrow
-      slug: with-back-arrow
-    noTitle: false
-  - title:
-      name: With back arrow on click
-      slug: with-back-arrow-on-click
-    noTitle: false
-  - title:
-      name: With hamburger
-      slug: with-hamburger
-    noTitle: false
-  - title:
-      name: With hamburger on click
-      slug: with-hamburger-on-click
+      name: Development examples
+      slug: development-examples
     noTitle: false