-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #757 from WestpacGEL/patterns-kate-new
Patterns kate new
- Loading branch information
Showing
46 changed files
with
788 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
...t/design-system/components/bottom-sheet/accessibility/accessibility-features/content.mdoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) |
Empty file.
17 changes: 17 additions & 0 deletions
17
...e/src/content/design-system/components/bottom-sheet/code/development-example/content.mdoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ); | ||
| }; | ||
| ``` |
19 changes: 19 additions & 0 deletions
19
apps/site/src/content/design-system/components/bottom-sheet/design/bottom-sheet/content.mdoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ); | ||
| }; | ||
| ``` |
5 changes: 5 additions & 0 deletions
5
...ite/src/content/design-system/components/bottom-sheet/design/user-experience/content.mdoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
1 change: 1 addition & 0 deletions
1
.../site/src/content/design-system/components/bottom-sheet/design/visual-design/content.mdoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
50 changes: 50 additions & 0 deletions
50
...content/design-system/components/bottom-sheet/design/where-is-this-available/content.mdoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ``` |
37 changes: 37 additions & 0 deletions
37
apps/site/src/content/design-system/components/bottom-sheet/index.yaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 0 additions & 56 deletions
56
...c/content/design-system/components/flexi-cell/design/product-tile-with-badge/content.mdoc
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.