diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx index 71c608d4b..20798f85c 100644 --- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx @@ -6,7 +6,7 @@ import { useId, useState } from 'react'; import { Section } from '@/components/content-blocks/section'; import { Link, Text } from '@/components/content-blocks/typography'; -import { Heading } from '@/components/document-renderer'; +import { Code, Heading } from '@/components/document-renderer'; import { VisionFilter, VisionFilterProps } from '@/components/vision-filter'; import { DOCUMENT_RENDERERS } from '../document-renderer'; @@ -65,7 +65,17 @@ export function AccessibilityContent({ accessibilitySections, accessibilityDemo - + , + }, + }} + componentBlocks={{}} + /> )} diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx index 7fa4c0736..e45bf7266 100644 --- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx @@ -5,7 +5,7 @@ import { Container } from '@westpac/ui'; import { useMemo } from 'react'; import { Section } from '@/components/content-blocks/section'; -import { Heading } from '@/components/document-renderer'; +import { Code, Heading } from '@/components/document-renderer'; import { RelatedInfo } from '@/components/related-info'; import { Intro } from '..'; @@ -27,7 +27,17 @@ export function DesignContent({ designSections, description, relatedComponents }
{title} - + , + }, + }} + componentBlocks={{}} + />
); diff --git a/apps/site/src/components/code/code.component.tsx b/apps/site/src/components/code/code.component.tsx index 5db8dc811..e4c5f3aba 100644 --- a/apps/site/src/components/code/code.component.tsx +++ b/apps/site/src/components/code/code.component.tsx @@ -19,7 +19,7 @@ const LIVE_SCOPE = { React, }; -export function Code({ children, live, showCode, className, language = 'tsx' }: CodeProps) { +export function Code({ children, live, showCode, className, language = 'tsx', enableLiveCode = true }: CodeProps) { const childrenAsString = children?.toString().trim(); if (!childrenAsString) return null; @@ -27,7 +27,7 @@ export function Code({ children, live, showCode, className, language = 'tsx' }: if (live) { return ( - + ); } diff --git a/apps/site/src/components/code/code.types.ts b/apps/site/src/components/code/code.types.ts index 915ba2ff7..86a869e2a 100644 --- a/apps/site/src/components/code/code.types.ts +++ b/apps/site/src/components/code/code.types.ts @@ -3,6 +3,7 @@ import { ReactNode } from 'react'; export type CodeProps = { children?: ReactNode; className?: string; + enableLiveCode?: boolean; language?: string; live?: boolean; showCode?: boolean; diff --git a/apps/site/src/components/code/components/live-code/live-code.component.tsx b/apps/site/src/components/code/components/live-code/live-code.component.tsx index 3d90c0548..49cbb1249 100644 --- a/apps/site/src/components/code/components/live-code/live-code.component.tsx +++ b/apps/site/src/components/code/components/live-code/live-code.component.tsx @@ -7,7 +7,7 @@ import { LiveContext, LiveEditor, LivePreview } from 'react-live'; import { styles as liveCodeStyles } from './live-code.styles'; import { LiveCodeProps } from './live-code.types'; -export function LiveCode({ showCode = false, className }: LiveCodeProps) { +export function LiveCode({ showCode = false, enableLiveCode = true, className }: LiveCodeProps) { const liveCodeToggleButton = useRef(null); const live = useContext(LiveContext); @@ -53,34 +53,38 @@ export function LiveCode({ showCode = false, className }: LiveCodeProps) { ) : ( )} -
- +
+ )} + + {enableLiveCode && ( +
+ +
- -
- - -
+ )} ); } diff --git a/apps/site/src/components/code/components/live-code/live-code.types.ts b/apps/site/src/components/code/components/live-code/live-code.types.ts index 9cdb285f2..bc4932322 100644 --- a/apps/site/src/components/code/components/live-code/live-code.types.ts +++ b/apps/site/src/components/code/components/live-code/live-code.types.ts @@ -1 +1 @@ -export type LiveCodeProps = { className?: string; showCode?: boolean }; +export type LiveCodeProps = { className?: string; enableLiveCode?: boolean; showCode?: boolean }; diff --git a/apps/site/src/components/document-renderer/code/code.types.ts b/apps/site/src/components/document-renderer/code/code.types.ts index fc5ccef72..e6906cb2d 100644 --- a/apps/site/src/components/document-renderer/code/code.types.ts +++ b/apps/site/src/components/document-renderer/code/code.types.ts @@ -1,5 +1,6 @@ export type CodeProps = { children: string; className?: string; + enableLiveCode?: boolean; language?: string; }; diff --git a/apps/site/src/content/design-system/components/a11y/index.yaml b/apps/site/src/content/design-system/components/a11y/index.yaml new file mode 100644 index 000000000..4b1d7b9a7 --- /dev/null +++ b/apps/site/src/content/design-system/components/a11y/index.yaml @@ -0,0 +1,6 @@ +name: A11y +description: >- + This is a developer-only accessibility package that is used to ensure an + optimal experience for users of assistive technologies. +design: [] +accessibility: [] diff --git a/apps/site/src/content/design-system/components/alert/index.yaml b/apps/site/src/content/design-system/components/alert/index.yaml index b484b4f46..05eb7ae34 100644 --- a/apps/site/src/content/design-system/components/alert/index.yaml +++ b/apps/site/src/content/design-system/components/alert/index.yaml @@ -13,6 +13,3 @@ accessibility: - title: Accessibility features - title: Keyboard support - title: Accessibility API -relatedInformation: - - components/button-group - - components/colors diff --git a/apps/site/src/content/design-system/components/badge/accessibility/Accessibility API/content.mdoc b/apps/site/src/content/design-system/components/badge/accessibility/Accessibility API/content.mdoc new file mode 100644 index 000000000..0584a1d6a --- /dev/null +++ b/apps/site/src/content/design-system/components/badge/accessibility/Accessibility API/content.mdoc @@ -0,0 +1 @@ +No specific accessibility attributes required. \ No newline at end of file diff --git a/apps/site/src/content/design-system/components/badge/accessibility/Accessibility features/content.mdoc b/apps/site/src/content/design-system/components/badge/accessibility/Accessibility features/content.mdoc new file mode 100644 index 000000000..eb2427a80 --- /dev/null +++ b/apps/site/src/content/design-system/components/badge/accessibility/Accessibility features/content.mdoc @@ -0,0 +1 @@ +The Badge shape and text content is visible in Windows High Contrast Mode (WHCM). The ‘look’ styling (colour) is not visible in WHCM. \ No newline at end of file diff --git a/apps/site/src/content/design-system/components/badge/accessibility/Keyboard support/content.mdoc b/apps/site/src/content/design-system/components/badge/accessibility/Keyboard support/content.mdoc new file mode 100644 index 000000000..542673c45 --- /dev/null +++ b/apps/site/src/content/design-system/components/badge/accessibility/Keyboard support/content.mdoc @@ -0,0 +1 @@ +No keyboard interaction needed. \ No newline at end of file diff --git a/apps/site/src/content/design-system/components/badge/accessibility/Notes on accessibility/content.mdoc b/apps/site/src/content/design-system/components/badge/accessibility/Notes on accessibility/content.mdoc new file mode 100644 index 000000000..935e3375e --- /dev/null +++ b/apps/site/src/content/design-system/components/badge/accessibility/Notes on accessibility/content.mdoc @@ -0,0 +1,17 @@ +All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fall under the [four principles of accessibility](/design-system/accessibility/design-system-accessibility) – Perceivable, Operable, Understandable and Robust. Below are some specific ways in which this component follows these principles: + +### Perceivable + +The Design System components have been designed to adhere to colour contrast ratios for both text and non-text elements. They have been coded to include text alternatives when required, and allow component text and labels to be resized. They do not use colour alone to convey information. + +### Operable + +The Design System components have been coded to be navigable using a keyboard and other assistive technologies. WCAG compliance recommends being aware of the time it takes for people to complete tasks and to not automatically move focus. Animation should be controlled and simple so as not to cause seizures, and it’s important to provide the ability to perform the same task in multiple ways where possible. These rules have been followed where navigation and interaction is included in Design System components or patterns. + +### Understandable + +WCAG compliance requires consistent and predicable interactions, clear and simple language, concise labels, no jargon or abbreviations and clear error messaging. These rules have been followed where content and interactions are included in Design System components or patterns. + +### Robust + +All Design System components have been coded so they can be clearly announced, understood and navigated using all modern assistive technologies. \ No newline at end of file diff --git a/apps/site/src/content/design-system/components/badge/design/Badge styles/content.mdoc b/apps/site/src/content/design-system/components/badge/design/Badge styles/content.mdoc new file mode 100644 index 000000000..3739f6470 --- /dev/null +++ b/apps/site/src/content/design-system/components/badge/design/Badge styles/content.mdoc @@ -0,0 +1,13 @@ +Badges come in 2 different styles, _Default_ and _Pill._ Each style has 8 colour options, the Reserved colours as well as 4 brand colours. In general, badges can be used to highlight that something requires attention. + +### Badges - Default + +Loading... + +### Badges - Pill + +Loading... + +### Usage examples + +Loading... \ No newline at end of file diff --git "a/apps/site/src/content/design-system/components/badge/design/Dos and don\342\200\231ts/content.mdoc" "b/apps/site/src/content/design-system/components/badge/design/Dos and don\342\200\231ts/content.mdoc" new file mode 100644 index 000000000..506d8e44d --- /dev/null +++ "b/apps/site/src/content/design-system/components/badge/design/Dos and don\342\200\231ts/content.mdoc" @@ -0,0 +1,2 @@ +* Avoid using long text labels. +* Avoid using badges alone as buttons or links. \ No newline at end of file diff --git a/apps/site/src/content/design-system/components/badge/design/User experience/content.mdoc b/apps/site/src/content/design-system/components/badge/design/User experience/content.mdoc new file mode 100644 index 000000000..ad7b17854 --- /dev/null +++ b/apps/site/src/content/design-system/components/badge/design/User experience/content.mdoc @@ -0,0 +1,7 @@ +**Default style** badges are designed to highlight a word. The commonly seen usage is when indicating a function or feature in an application that is new or when onboarding. + +**Pill style** badges are designed to highlight a number. The most common usage is to indicate the number of unread emails or messages that need to be addressed. + +Badges are most effective at drawing attention when they appear and disappear as needed, or when the number they are highlighting changes. For example, in the ‘Unread emails’ scenario, when all the emails have been read the badge should no longer be visible. Or when being used to indicate a new feature, the label should hide once the feature is no longer new. This behaviour helps make them more prominent to a user when they do appear. + +Used incorrectly or too often runs the risk that future uses of badges will be ignored. \ No newline at end of file diff --git a/apps/site/src/content/design-system/components/badge/design/Visual design/content.mdoc b/apps/site/src/content/design-system/components/badge/design/Visual design/content.mdoc new file mode 100644 index 000000000..d273da7bb --- /dev/null +++ b/apps/site/src/content/design-system/components/badge/design/Visual design/content.mdoc @@ -0,0 +1 @@ +Badges inherit styles from the button and alert components which provides a wide range of colour options. They can be used alone, with text links or inside buttons. Unlike most components, badges are designed to be more prominent and attract attention. \ No newline at end of file diff --git a/apps/site/src/content/design-system/components/badge/index.yaml b/apps/site/src/content/design-system/components/badge/index.yaml new file mode 100644 index 000000000..fd4d9c6be --- /dev/null +++ b/apps/site/src/content/design-system/components/badge/index.yaml @@ -0,0 +1,14 @@ +name: Breadcrumb +description: >- + Breadcrumbs are styled navigational links used to indicate the user’s location + within your site. They are a simple, effective and proven method to aid + orientation. +design: + - title: Breadcrumbs + - title: User experience + - title: Visual design +accessibility: + - title: Notes on accessibility + - title: Accessibility features + - title: Keyboard support + - title: Accessibility API diff --git a/apps/site/src/content/design-system/components/breadcrumb/accessibility/Accessibility API/content.mdoc b/apps/site/src/content/design-system/components/breadcrumb/accessibility/Accessibility API/content.mdoc new file mode 100644 index 000000000..162bf858b --- /dev/null +++ b/apps/site/src/content/design-system/components/breadcrumb/accessibility/Accessibility API/content.mdoc @@ -0,0 +1,4 @@ +- `