Merge pull request #760 from WestpacGEL/patterns2-kate

Patterns2 kate

apps/site/src/content/design-system/components/flexi-cell/design/user-experience/content.mdoc

@@ -0,0 +1 @@
+The user experience considerations for the flexi-cell components are specific to the patterns that are utilising it.

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

@@ -15,6 +15,10 @@ design:
       name: Horizontal layout
       slug: horizontal-layout
     noTitle: false
+  - title:
+      name: User experience
+      slug: user-experience
+    noTitle: false
   - title:
       name: Where is this available?
       slug: where-is-this-available

apps/site/src/content/design-system/components/footer/design/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/components/footer/design/user-experience/content.mdoc

@@ -0,0 +1,9 @@
+Footers are like an anchor which signifies the end of a page or screen. They are also used as a secondary or tertiary navigation for many users. Often links to service, contact, or other overarching information is found in the footer.
+
+In forms, the footer is simplified to show the secure environment in which the user is in, as well as any legal obligations. The security icon is a visual cue which signifies the secure environment and shouldn’t be removed.
+
+### Copy in footers
+
+All footer copy should be considered at the design stage in consultation with legal teams.
+
+ 

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

@@ -0,0 +1,3 @@
+The footer component is a basic, configurable component used to hold global elements such as Copyright information etc. As with all the GEL UI components they are intentionally designed to be subtle and understated so as not to detract from the content. We also use a “sticky” footer to ensure that that this component never moves above the base of the viewport.
+
+The footer component is designed to be responsive and multi-brand. This ensures that all branding etc will automatically be the correct size and position when the brand is switched.

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

@@ -0,0 +1,50 @@
+{% shortCode name="where-is-this-available" /%}
+
+```tsx
+ <Table colspan={2}>
+
+      <React.Fragment key=".0">
+        <TableHeader>
+          <TableHeaderRow>
+            <TableHeaderCell>
+              Platform
+            </TableHeaderCell>
+            <TableHeaderCell>
+              Status
+            </TableHeaderCell>
+
+          </TableHeaderRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <strong>GEL Design System</strong>
+            </TableCell>
+            <TableCell>
+<div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div>
+            </TableCell>
+
+          </TableRow>
+<TableRow>
+            <TableCell>
+              <strong>Mesh UI</strong>
+            </TableCell>
+            <TableCell>
+<div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div>
+            </TableCell>
+
+          </TableRow>
+          <TableRow>
+            <TableCell>
+             <strong>Legacy WDP</strong>
+            </TableCell>
+            <TableCell>
+<div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div>
+            </TableCell>
+
+          </TableRow>
+        </TableBody>
+
+      </React.Fragment>
+    </Table>
+```

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

@@ -0,0 +1,32 @@
+name: Footer
+description: >-
+  Having consistent and familiar footers throughout an experience is critical,
+  it assists in providing our customers context and confidence in the experience
+  they are in.   
+namedExport:
+  discriminant: false
+excludeFromNavbar: false
+design:
+  - title:
+      name: Footer
+      slug: footer
+    noTitle: false
+  - title:
+      name: User experience
+      slug: user-experience
+    noTitle: false
+  - title:
+      name: Visual design
+      slug: visual-design
+    noTitle: false
+  - title:
+      name: Where is this available?
+      slug: where-is-this-available
+    noTitle: false
+accessibility: []
+relatedComponents:
+  - title: Icons
+    slug: /foundation/icons
+  - title: Headers
+    slug: /components/header
+code: []

apps/site/src/content/design-system/header/code/center-at-xsl/content.mdoc

@@ -0,0 +1,10 @@
+Example of logo centering when XSL
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    logoCenter
+  />
+</>
+```

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

@@ -0,0 +1,7 @@
+Default usage example
+
+```tsx
+<>
+  <Header brand="wbc" />
+</>
+```

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

@@ -0,0 +1,10 @@
+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>
+```

apps/site/src/content/design-system/header/code/logo-on-click/content.mdoc

@@ -0,0 +1,10 @@
+Example of logo with onClick
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    logoOnClick={function Ya(){}}
+  />
+</>
+```

apps/site/src/content/design-system/header/code/logo-with-skip-link/content.mdoc

@@ -0,0 +1,10 @@
+Example of header with skiplink
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    skipToContentId="#"
+  />
+</>
+```

apps/site/src/content/design-system/header/code/right-button/content.mdoc

@@ -0,0 +1,19 @@
+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>
+</>
+```

apps/site/src/content/design-system/header/code/with-back-arrow-on-click/content.mdoc

@@ -0,0 +1,11 @@
+Example of header with back arrow button with onClick
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    leftIcon="arrow"
+    leftOnClick={function Ya(){}}
+  />
+</>
+```

apps/site/src/content/design-system/header/code/with-back-arrow/content.mdoc

@@ -0,0 +1,10 @@
+Example of header with arrow button
+
+```tsx
+<>
+  <Header
+    brand="wbc"
+    leftIcon="arrow"
+  />
+</>
+```

apps/site/src/content/design-system/header/code/with-hamburger-on-click/content.mdoc

@@ -0,0 +1,11 @@
+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/header/code/with-hamburger/content.mdoc

@@ -0,0 +1,11 @@
+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/header/design/header/content.mdoc

@@ -0,0 +1,5 @@
+```tsx
+<>
+  <Header brand="wbc" />
+</>
+```

apps/site/src/content/design-system/header/design/user-experience/content.mdoc

@@ -0,0 +1 @@
+Headers provide a reliable place to house navigation and, when required, access to other key features, ie Sign in/out. The brand identity is not only used for recognition, but serves as a ‘home’ button when the user needs an ‘escape’ from whatever environment they are in. At the smaller breakpoints the header also houses access to the Menu. 

apps/site/src/content/design-system/header/design/visual-design/content.mdoc

@@ -0,0 +1,3 @@
+The Header components is a basic, configurable component used to hold global elements such as logos and navigation. As with all the GEL UI components they are intentionally designed to be subtle and understated so as not to detract from the content. When the header is fixed a drop shadow is applied when content scrolls below the header.
+
+The Header component is designed to be responsive and multi-brand. This ensures that all branding etc will automatically be the correct size and position when the brand is switched.

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

@@ -0,0 +1,50 @@
+{% shortCode name="where-is-this-available" /%}
+
+```tsx
+ <Table colspan={2}>
+
+      <React.Fragment key=".0">
+        <TableHeader>
+          <TableHeaderRow>
+            <TableHeaderCell>
+              Platform
+            </TableHeaderCell>
+            <TableHeaderCell>
+              Status
+            </TableHeaderCell>
+
+          </TableHeaderRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <strong>GEL Design System</strong>
+            </TableCell>
+            <TableCell>
+<div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div>
+            </TableCell>
+
+          </TableRow>
+<TableRow>
+            <TableCell>
+              <strong>Mesh UI</strong>
+            </TableCell>
+            <TableCell>
+<div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div>
+            </TableCell>
+
+          </TableRow>
+          <TableRow>
+            <TableCell>
+             <strong>Legacy WDP</strong>
+            </TableCell>
+            <TableCell>
+<div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div>
+            </TableCell>
+
+          </TableRow>
+        </TableBody>
+
+      </React.Fragment>
+    </Table>
+```

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

@@ -0,0 +1,72 @@
+name: Header
+description: >-
+  Having consistent and familiar headers throughout an experience is critical,
+  it assists in providing our customers context and confidence in the experience
+  they are in.   
+namedExport:
+  discriminant: false
+excludeFromNavbar: true
+design:
+  - title:
+      name: Header
+      slug: header
+    noTitle: false
+  - title:
+      name: User experience
+      slug: user-experience
+    noTitle: false
+  - title:
+      name: Visual design
+      slug: visual-design
+    noTitle: false
+  - title:
+      name: Where is this available?
+      slug: where-is-this-available
+    noTitle: false
+accessibility: []
+relatedComponents:
+  - title: Logos
+    slug: /components/foundation/logos
+  - title: Footer
+    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
+    noTitle: false