Develop

apps/protoform/CHANGELOG.md

@@ -1,5 +1,12 @@
 # protoform
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [0a7cf7c]
+  - @westpac/[email protected]
+
 ## 0.1.5
 
 ### Patch Changes

apps/protoform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "protoform",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "scripts": {
     "dev": "next dev",

apps/site/CHANGELOG.md

@@ -1,5 +1,12 @@
 # site
 
+## 0.1.8
+
+### Patch Changes
+
+- Updated dependencies [0a7cf7c]
+  - @westpac/[email protected]
+
 ## 0.1.7
 
 ### Patch Changes

apps/site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "site",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": true,
   "scripts": {
     "build": "next build",

apps/site/src/components/code/code.inject-components.ts

@@ -97,6 +97,7 @@ export {
   GridItem,
   Heading,
   ProgressIndicator,
+  BottomSheet,
 } from '@westpac/ui';
 
 export * from '@westpac/ui/icon';

apps/site/src/content/design-system/components/bottom-sheet/accessibility/accessibility-features/content.mdoc

@@ -0,0 +1,18 @@
+- Bottom sheet/Modal heading receives focus and is announced on open. The user is able to ‘arrow down’ to navigate the content if desired. This pattern differs from the [WAI-ARIA Authoring Practices Modal Dialog](https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html) pattern, which announces all modal content on open and is often considered unnecessarily verbose for screen reader users.
+- Close button appears below the heading in the source order; users can easily ‘arrow down’ and close if the heading content was of no interest
+- When open, focus is constrained within the context of the Bottom sheet/Modal. Sequential keyboard navigation loops through focusable elements within the component; and not to any elements found outside.
+- Close using Close button, Esc key or background click (if modal is dismissible)
+- On touch devices the Bottom sheet can be closed via swipe.
+- When the modal closes, focus returns to the button that originally toggled the Bottom sheet/Modal
+- The Bottom sheet/Modal shape, text and icon content is visible in Windows High Contrast Mode (WHCM). Button ‘look’ styling (colour) is not visible in WHCM.
+
+### Accessibility in the HTML
+
+- `<button aria-label="Close modal">`: Close button announced as “Close modal” in screen readers
+
+### Keyboard support
+
+- ‘Tab’ moves focus to next focusable element inside the dialog. When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
+- ‘Shift + Tab’ moves focus to previous focusable element inside the dialog
+- When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog
+- ‘Esc’ key closes the modal (if modal is dismissible)

apps/site/src/content/design-system/components/bottom-sheet/code/development-example/content.mdoc

@@ -0,0 +1,17 @@
+```jsx
+() => {
+  const state = useOverlayTriggerState({});
+
+  return (
+    <>
+      <Button onClick={state.open}> Open Bottom Sheet </Button>
+      <BottomSheet title="Heading" primaryLabel="Label" secondaryLabel="Label" state={state} primaryOnClick={state.close} secondaryOnClick={state.close}>
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam ullam atque dignissimos ab quaerat nobis rem a
+          ad blanditiis laborum labore repellendus, vero nihil ducimus, aliquam culpa explicabo doloremque corporis.
+        </p>
+      </BottomSheet>
+    </>
+  );
+};
+```

apps/site/src/content/design-system/components/bottom-sheet/design/bottom-sheet/content.mdoc

@@ -0,0 +1,19 @@
+View this component using the demo button to see how it responds across views.
+
+```jsx
+() => {
+  const state = useOverlayTriggerState({});
+
+  return (
+    <>
+      <Button onClick={state.open}> Open Bottom Sheet </Button>
+      <BottomSheet title="Heading" primaryLabel="Label" secondaryLabel="Label" state={state} primaryOnClick={state.close} secondaryOnClick={state.close}>
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam ullam atque dignissimos ab quaerat nobis rem a
+          ad blanditiis laborum labore repellendus, vero nihil ducimus, aliquam culpa explicabo doloremque corporis.
+        </p>
+      </BottomSheet>
+    </>
+  );
+};
+```

apps/site/src/content/design-system/components/bottom-sheet/design/user-experience/content.mdoc

@@ -0,0 +1,5 @@
+This component was developed as a web version of a UI element typically associated with native experiences, such as iOS's 'ActionSheet' and Android's 'BottomSheet.' While these native components are designed for mobile experiences, our responsive Design System requires a web version that could adapt for larger devices, where the bottom sheet interaction is less effective.
+
+The Bottom sheet component appears as an overlay and behaves in a similar way to a modal, it requires the user to interact with it or dismiss it. It blocks any interaction with the background content while it is visible.
+
+Where it differs to a modal is when it is viewed on a touch device, it can be dismissed via a swipe.

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

@@ -0,0 +1 @@
+The Bottom sheet is a generic component designed to work in as many scenarios as possible. It can be configured to accommodate most functional requirements.

apps/site/src/content/design-system/components/bottom-sheet/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-info"><CalendarIcon size="small" look="outlined" className="mr-2" />Currently  not available - Request in backlog</div>
+            </TableCell>
+
+          </TableRow>
+          <TableRow>
+            <TableCell>
+             <strong>Legacy WDP</strong>
+            </TableCell>
+            <TableCell>
+<div className="typography-body-10 text-danger"><AlertIcon size="small" look="outlined" className="mr-2" />Not available</div>
+            </TableCell>
+
+          </TableRow>
+        </TableBody>
+
+      </React.Fragment>
+    </Table>
+```

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

@@ -0,0 +1,37 @@
+name: Bottom sheet
+description: >-
+  The responsive bottom sheet component is a modal-style element that slides up
+  from the bottom of the screen in mobile views and appears as a modal in larger
+  views.
+namedExport:
+  discriminant: false
+excludeFromNavbar: true
+design:
+  - title:
+      name: Bottom sheet
+      slug: bottom-sheet
+    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:
+  - title:
+      name: Accessibility features
+      slug: accessibility-features
+relatedComponents:
+  - title: Modal
+    slug: /components/modal
+code:
+  - title:
+      name: Development example
+      slug: development-example
+    noTitle: false

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

@@ -639,7 +639,7 @@
 };
 ```
 
-### Promo tiles horizontal list usage
+### Promo tiles - Vertically stacked
 
 ```jsx
 () => {
@@ -697,7 +697,7 @@
 };
 ```
 
-### Vertical Promo Tiles
+### Promo Tiles - Horizontal layout
 
 ```jsx
 () => {

apps/site/src/content/design-system/components/flexi-cell/design/promotional-tiles-vertical/content.mdoc → apps/site/src/content/design-system/components/flexi-cell/design/horizontal-layout/content.mdoc

@@ -1,5 +1,3 @@
-Test 3 trying to separate code into individual tiles
-
 ```
     <div className="flex gap-2">
 
@@ -10,12 +8,8 @@ Test 3 trying to separate code into individual tiles
         withBorder
 
       >
-        <FlexiCellAdornment className="mb-2">
-          <img
-            src="https://res.cloudinary.com/westpac-gel/image/upload/v1603779769/ys16da3e5cvuww7s0oza.png"
-            alt=""
-            className="h-10.5 w-full object-cover"
-          />
+        <FlexiCellAdornment className="max-sm:hidden">
+          <GiftIcon look="outlined" color="hero" />
         </FlexiCellAdornment>
 
         <FlexiCellLabel className="text-[12px] font-normal text-muted" tag="p">
@@ -29,8 +23,7 @@ Test 3 trying to separate code into individual tiles
 <FlexiCellHint className="line-clamp-3 max-sm:h-10 sm:h-10.5">This is the tile description. It can be a couple of lines long.</FlexiCellHint>
 
 <FlexiCellFooter className="absolute max-sm:bottom-2 max-sm:left-2 sm:bottom-3 sm:left-3">
-          <Badge color="primary">Badge 1</Badge>
-          <Badge color="faint">Badge 2</Badge>
+
         </FlexiCellFooter>
       </FlexiCell>
 
@@ -41,12 +34,8 @@ Test 3 trying to separate code into individual tiles
         withBorder
 
       >
-        <FlexiCellAdornment className="mb-2">
-          <img
-            src="https://res.cloudinary.com/westpac-gel/image/upload/v1603779769/ys16da3e5cvuww7s0oza.png"
-            alt=""
-            className="h-10.5 w-full object-cover"
-          />
+        <FlexiCellAdornment className="max-sm:hidden">
+          <GiftIcon look="outlined" color="hero" />
         </FlexiCellAdornment>
 
         <FlexiCellLabel className="text-[12px] font-normal text-muted" tag="p">
@@ -60,8 +49,6 @@ Test 3 trying to separate code into individual tiles
 <FlexiCellHint className="line-clamp-3 max-sm:h-10 sm:h-10.5">This is the tile description. It can be a couple of lines long.</FlexiCellHint>
 
 <FlexiCellFooter className="absolute max-sm:bottom-2 max-sm:left-2 sm:bottom-3 sm:left-3">
-          <Badge color="primary">Badge 1</Badge>
-          <Badge color="faint">Badge 2</Badge>
         </FlexiCellFooter>
       </FlexiCell>
 
@@ -72,12 +59,8 @@ Test 3 trying to separate code into individual tiles
         withBorder
 
       >
-        <FlexiCellAdornment className="mb-2">
-          <img
-            src="https://res.cloudinary.com/westpac-gel/image/upload/v1603779769/ys16da3e5cvuww7s0oza.png"
-            alt=""
-            className="h-10.5 w-full object-cover"
-          />
+        <FlexiCellAdornment className="max-sm:hidden">
+          <GiftIcon look="outlined" color="hero" />
         </FlexiCellAdornment>
 
         <FlexiCellLabel className="text-[12px] font-normal text-muted" tag="p">
@@ -91,8 +74,6 @@ Test 3 trying to separate code into individual tiles
 <FlexiCellHint className="line-clamp-3 max-sm:h-10 sm:h-10.5">This is the tile description. It can be a couple of lines long.</FlexiCellHint>
 
 <FlexiCellFooter className="absolute max-sm:bottom-2 max-sm:left-2 sm:bottom-3 sm:left-3">
-          <Badge color="primary">Badge 1</Badge>
-          <Badge color="faint">Badge 2</Badge>
         </FlexiCellFooter>
       </FlexiCell>
   </div>