From 517bd080d24d1732a7a9319d3499b1ea5a441299 Mon Sep 17 00:00:00 2001 From: Samitha Fernando Date: Mon, 6 Nov 2023 19:57:12 +1100 Subject: [PATCH 01/51] Update src/content/articles/code-with-gel --- apps/site/src/content/articles/code-with-gel.yaml | 9 +-------- .../site/src/content/articles/code-with-gel/content.mdoc | 7 ++++--- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/apps/site/src/content/articles/code-with-gel.yaml b/apps/site/src/content/articles/code-with-gel.yaml index 3130f3ec6..6638fa671 100644 --- a/apps/site/src/content/articles/code-with-gel.yaml +++ b/apps/site/src/content/articles/code-with-gel.yaml @@ -2,12 +2,5 @@ name: Code with GEL description: >- The GEL coding framework has been built with serviceability in mind, supporting multiple platforms across the Bank that may use different - libraries, languages and coding technologies. -thumbnail: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663140016/cl81amh5c000mam8i3iuq5qt9.png -smallDescription: >- - Automate your environment, scale your projects and speed up your work flow - with our cutting edge code library. -image: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663300551/cl83y79gg0013am8iddv886ry.jpg + libraries, languages and coding technologies.. author: marita-purins diff --git a/apps/site/src/content/articles/code-with-gel/content.mdoc b/apps/site/src/content/articles/code-with-gel/content.mdoc index 5479726a7..baeefdd6f 100644 --- a/apps/site/src/content/articles/code-with-gel/content.mdoc +++ b/apps/site/src/content/articles/code-with-gel/content.mdoc @@ -10,10 +10,11 @@ Vanilla solution to support teams to integrate with their preferred JavaScript l **Design tokens** -Basic core elements of the system which provide an accurate representation of brand including colours, fonts and font sizes, spacing and breakpoints. Token formats include JSON, LESS, CSS, SCSS/SASS.  +Basic core elements of the system which provide an accurate representation of brand including colours, fonts and font sizes, spacing and breakpoints. Token formats include JSON, LESS, CSS, SCSS/SASS. There are 3 levels of GEL design system adoption ------------------------------------------------- + +--- #### Level 1: Follow the specifications @@ -37,4 +38,4 @@ In this scenario, you can consume the React JS or vanilla HTML code in your proj [Access the design systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system) -[Get started using the GEL design systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/development/get-started?b=WBC) \ No newline at end of file +[Get started using the GEL design systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/development/get-started?b=WBC) From 2a22f97531e29af7f4e6d5eec2c6c664e1058f6e Mon Sep 17 00:00:00 2001 From: Samitha Fernando Date: Mon, 6 Nov 2023 19:57:18 +1100 Subject: [PATCH 02/51] Update src/content/articles/code-with-gel --- apps/site/src/content/articles/code-with-gel.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/code-with-gel.yaml b/apps/site/src/content/articles/code-with-gel.yaml index 6638fa671..c4f8b1bcc 100644 --- a/apps/site/src/content/articles/code-with-gel.yaml +++ b/apps/site/src/content/articles/code-with-gel.yaml @@ -2,5 +2,5 @@ name: Code with GEL description: >- The GEL coding framework has been built with serviceability in mind, supporting multiple platforms across the Bank that may use different - libraries, languages and coding technologies.. + libraries, languages and coding technologies. author: marita-purins From 2b14ca1d823beacb005adc38f83f7427b1677cd7 Mon Sep 17 00:00:00 2001 From: Samitha Fernando Date: Mon, 6 Nov 2023 19:58:10 +1100 Subject: [PATCH 03/51] Update src/content/design-system/components/accordion --- .../src/content/design-system/components/accordion/code.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/accordion/code.mdoc b/apps/site/src/content/design-system/components/accordion/code.mdoc index ddf3bba0f..bd37d806d 100644 --- a/apps/site/src/content/design-system/components/accordion/code.mdoc +++ b/apps/site/src/content/design-system/components/accordion/code.mdoc @@ -22,7 +22,7 @@ See Visual design for the usage recommendations for the default style. ### Lego accordion -See Visual design for the usage recommendations for the lego style. +See Visual design for the usage recommendations for the lego style.. ```jsx From 6c6dbb4686f1f171bfce0981e588bb3d0fd6ca16 Mon Sep 17 00:00:00 2001 From: Samitha Fernando Date: Mon, 6 Nov 2023 19:59:19 +1100 Subject: [PATCH 04/51] Update src/content/design-system/components/accordion --- .../src/content/design-system/components/accordion/code.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/accordion/code.mdoc b/apps/site/src/content/design-system/components/accordion/code.mdoc index bd37d806d..ddf3bba0f 100644 --- a/apps/site/src/content/design-system/components/accordion/code.mdoc +++ b/apps/site/src/content/design-system/components/accordion/code.mdoc @@ -22,7 +22,7 @@ See Visual design for the usage recommendations for the default style. ### Lego accordion -See Visual design for the usage recommendations for the lego style.. +See Visual design for the usage recommendations for the lego style. ```jsx From be922408403b3c5c18c5eea8bfb580399a04ee00 Mon Sep 17 00:00:00 2001 From: Samitha Fernando Date: Mon, 6 Nov 2023 19:59:40 +1100 Subject: [PATCH 05/51] Update src/content/design-system/components/alert --- apps/site/src/content/design-system/components/alert/code.mdoc | 2 +- apps/site/src/content/design-system/components/alert/index.yaml | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/alert/code.mdoc b/apps/site/src/content/design-system/components/alert/code.mdoc index 13e762906..7f3592a1a 100644 --- a/apps/site/src/content/design-system/components/alert/code.mdoc +++ b/apps/site/src/content/design-system/components/alert/code.mdoc @@ -1,4 +1,4 @@ -### Looks +### Looks.. ```jsx
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 05eb7ae34..37cb3e80d 100644 --- a/apps/site/src/content/design-system/components/alert/index.yaml +++ b/apps/site/src/content/design-system/components/alert/index.yaml @@ -13,3 +13,4 @@ accessibility: - title: Accessibility features - title: Keyboard support - title: Accessibility API +relatedInformation: [] From cbc601ad8fae778c20a96e7f122b1a9bec0d6d9c Mon Sep 17 00:00:00 2001 From: Samitha Fernando Date: Mon, 6 Nov 2023 20:00:23 +1100 Subject: [PATCH 06/51] Update src/content/design-system/components/alert --- apps/site/src/content/design-system/components/alert/code.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/alert/code.mdoc b/apps/site/src/content/design-system/components/alert/code.mdoc index 7f3592a1a..13e762906 100644 --- a/apps/site/src/content/design-system/components/alert/code.mdoc +++ b/apps/site/src/content/design-system/components/alert/code.mdoc @@ -1,4 +1,4 @@ -### Looks.. +### Looks ```jsx
From 9ef0f7b46199aaa7e8e7f9aa9523112a2cab8d8e Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Thu, 9 Nov 2023 12:36:38 +1000 Subject: [PATCH 07/51] feat(design-system): importing content --- .../content-tabs/content-tabs.component.tsx | 18 +- .../Colour contrast testing/content.mdoc | 4 + .../content.mdoc | 49 +++++ .../colour-vision-impairment/index.yaml | 9 + .../design/Accessibility testing/content.mdoc | 20 ++ .../design/Accessible interfaces/content.mdoc | 5 + .../design/Deprecated components/content.mdoc | 5 + .../Inclusive content writing/content.mdoc | 3 + .../Inclusive product design/content.mdoc | 1 + .../Principles of accessibility/content.mdoc | 21 ++ .../design-system-accessibility/index.yaml | 14 ++ .../abbreviation/design/title/content.mdoc | 35 ++++ .../guidelines/abbreviation/index.yaml | 5 + .../acronym/design/undefined/content.mdoc | 27 +++ .../content/guidelines/acronym/index.yaml | 5 + .../design/undefined/content.mdoc | 29 +++ .../guidelines/age-&-school-year/index.yaml | 5 + .../design/undefined/content.mdoc | 15 ++ .../bolding-&-underlining/index.yaml | 7 + .../bracket/design/undefined/content.mdoc | 13 ++ .../content/guidelines/bracket/index.yaml | 5 + .../design/undefined/content.mdoc | 28 +++ .../bullet-points-&-numbered-list/index.yaml | 7 + .../design/undefined/content.mdoc | 82 ++++++++ .../calls-to-action-(ctas)/index.yaml | 5 + .../design/Capitalisation/content.mdoc | 65 +++++++ .../design/Countries/content.mdoc | 19 ++ .../design/Headings/content.mdoc | 9 + .../design/Lower-case/content.mdoc | 21 ++ .../design/Sentence-case/content.mdoc | 41 ++++ .../States and territories/content.mdoc | 21 ++ .../guidelines/capital-letter/index.yaml | 12 ++ .../contraction/design/undefined/content.mdoc | 17 ++ .../content/guidelines/contraction/index.yaml | 5 + .../design/undefined/content.mdoc | 169 ++++++++++++++++ .../guidelines/dates,-days-&-time/index.yaml | 5 + .../empty-state/design/undefined/content.mdoc | 8 + .../content/guidelines/empty-state/index.yaml | 7 + .../Displaying error messages/content.mdoc | 27 +++ .../Types of error messages/content.mdoc | 21 ++ .../design/undefined/content.mdoc | 40 ++++ .../guidelines/error-message/index.yaml | 9 + .../design/undefined/content.mdoc | 19 ++ .../headings-&-subheading/index.yaml | 7 + .../design/undefined/content.mdoc | 41 ++++ .../hyperlinks-&-email-addresse/index.yaml | 5 + .../navigation/design/undefined/content.mdoc | 27 +++ .../content/guidelines/navigation/index.yaml | 5 + .../design/undefined/content.mdoc | 139 +++++++++++++ .../guidelines/numbers-&-currencie/index.yaml | 5 + .../design/undefined/content.mdoc | 47 +++++ .../guidelines/people-&-diversity/index.yaml | 5 + .../design/Ampersands [&]/content.mdoc | 9 + .../design/Apostrophes [']/content.mdoc | 55 ++++++ .../design/Colons [:]/content.mdoc | 32 +++ .../design/Commas [,]/content.mdoc | 33 ++++ .../design/Exclamation marks [!]/content.mdoc | 7 + .../design/Full stops [.]/content.mdoc | 47 +++++ .../Hyphens and em - dashes/content.mdoc | 37 ++++ .../design/Per cent [%]/content.mdoc | 5 + .../design/Quatation marks [\"]/content.mdoc" | 9 + .../design/Question mark [?]/content.mdoc | 7 + .../design/Semi colons [;]/content.mdoc | 7 + .../design/Principles/content.mdoc | 13 ++ .../design/Why our words matter/content.mdoc | 7 + .../design/Writing tips/content.mdoc | 183 ++++++++++++++++++ .../content/writing-for-digital/index.yaml | 10 + .../design/Pre-requisites/content.mdoc | 7 + .../design/Quick setup/content.mdoc | 31 +++ .../get-started/design/Resources/content.mdoc | 5 + .../development/get-started/index.yaml | 9 + .../brand/design/undefined/content.mdoc | 23 +++ .../guides/brand/design/useBrand/content.mdoc | 13 ++ .../development/guides/brand/index.yaml | 8 + .../design/How overrides work/content.mdoc | 27 +++ .../design/Override order/content.mdoc | 63 ++++++ .../override/design/Structure/content.mdoc | 31 +++ .../design/Subcomponents/content.mdoc | 7 + .../development/guides/override/index.yaml | 11 ++ .../design/Auto-address/content.mdoc | 15 ++ .../design/Dos and don'ts/content.mdoc | 1 + .../design/Error states/content.mdoc | 3 + .../Pattern examples in code/content.mdoc | 3 + .../design/User experience/content.mdoc | 14 ++ .../patterns/addresses/auto-addres/index.yaml | 9 + .../design/Complex address/content.mdoc | 5 + .../Pattern examples in code/content.mdoc | 3 + .../addresses/complex-addres/index.yaml | 8 + .../design/Error states/content.mdoc | 3 + .../design/International address/content.mdoc | 7 + .../Pattern examples in code/content.mdoc | 3 + .../design/User experience/content.mdoc | 7 + .../addresses/international-addres/index.yaml | 10 + .../design/Error states/content.mdoc | 3 + .../design/Manual address/content.mdoc | 13 ++ .../Pattern examples in code/content.mdoc | 3 + .../addresses/manual-addres/index.yaml | 9 + .../design/Date of birth/content.mdoc | 5 + .../design/Dos and don'ts/content.mdoc | 2 + .../design/Error states/content.mdoc | 7 + .../Pattern examples in code/content.mdoc | 3 + .../design/User experience/content.mdoc | 15 ++ .../patterns/dates/date-of-birth/index.yaml | 11 ++ .../design/Dos and don'ts/content.mdoc | 2 + .../design/Error states/content.mdoc | 11 ++ .../design/Expiry date/content.mdoc | 17 ++ .../Pattern examples in code/content.mdoc | 7 + .../patterns/dates/expiry-date/index.yaml | 10 + .../email/design/Dos and don'ts/content.mdoc | 1 + .../email/design/Email/content.mdoc | 11 ++ .../email/design/Error states/content.mdoc | 9 + .../Pattern examples in code/content.mdoc | 3 + .../personal-details/email/index.yaml | 10 + .../employment/design/Employment/content.mdoc | 11 ++ .../design/Error states/content.mdoc | 3 + .../Pattern examples in code/content.mdoc | 3 + .../design/User experience/content.mdoc | 5 + .../personal-details/employment/index.yaml | 10 + .../name/design/Error states/content.mdoc | 5 + .../name/design/Full name/content.mdoc | 15 ++ .../Pattern examples in code/content.mdoc | 3 + .../name/design/Simple name/content.mdoc | 3 + .../patterns/personal-details/name/index.yaml | 11 ++ .../phone/design/Dos and don'ts/content.mdoc | 3 + .../phone/design/Error states/content.mdoc | 5 + .../Pattern examples in code/content.mdoc | 3 + .../phone/design/Phone number/content.mdoc | 11 ++ .../phone/design/User experience/content.mdoc | 7 + .../personal-details/phone/index.yaml | 11 ++ .../design/Error states/content.mdoc | 3 + .../Pattern examples in code/content.mdoc | 7 + .../design/Tax File Number/content.mdoc | 11 ++ .../design/User experience/content.mdoc | 1 + .../patterns/tax-file-number/index.yaml | 10 + 134 files changed, 2285 insertions(+), 8 deletions(-) create mode 100644 apps/site/src/content/design-system/accessibility/colour-vision-impairment/design/Colour contrast testing/content.mdoc create mode 100644 apps/site/src/content/design-system/accessibility/colour-vision-impairment/design/What is a colour vision impairment?/content.mdoc create mode 100644 apps/site/src/content/design-system/accessibility/colour-vision-impairment/index.yaml create mode 100644 apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Accessibility testing/content.mdoc create mode 100644 apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Accessible interfaces/content.mdoc create mode 100644 apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Deprecated components/content.mdoc create mode 100644 apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Inclusive content writing/content.mdoc create mode 100644 apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Inclusive product design/content.mdoc create mode 100644 apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Principles of accessibility/content.mdoc create mode 100644 apps/site/src/content/design-system/accessibility/design-system-accessibility/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/abbreviation/design/title/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/acronym/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/acronym/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/age-&-school-year/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/age-&-school-year/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/bracket/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/bracket/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/design/Capitalisation/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/design/Countries/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/design/Headings/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/design/Lower-case/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/design/Sentence-case/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/design/States and territories/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/contraction/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/contraction/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/empty-state/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/empty-state/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/error-message/design/Displaying error messages/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/error-message/design/Types of error messages/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/error-message/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/error-message/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/headings-&-subheading/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/headings-&-subheading/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/navigation/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/navigation/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/people-&-diversity/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/people-&-diversity/index.yaml create mode 100644 apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Ampersands [&]/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Apostrophes [']/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Colons [:]/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Commas [,]/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Exclamation marks [!]/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Full stops [.]/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Hyphens and em - dashes/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Per cent [%]/content.mdoc create mode 100644 "apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Quatation marks [\"]/content.mdoc" create mode 100644 apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Question mark [?]/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Semi colons [;]/content.mdoc create mode 100644 apps/site/src/content/design-system/content/writing-for-digital/design/Principles/content.mdoc create mode 100644 apps/site/src/content/design-system/content/writing-for-digital/design/Why our words matter/content.mdoc create mode 100644 apps/site/src/content/design-system/content/writing-for-digital/design/Writing tips/content.mdoc create mode 100644 apps/site/src/content/design-system/content/writing-for-digital/index.yaml create mode 100644 apps/site/src/content/design-system/development/get-started/design/Pre-requisites/content.mdoc create mode 100644 apps/site/src/content/design-system/development/get-started/design/Quick setup/content.mdoc create mode 100644 apps/site/src/content/design-system/development/get-started/design/Resources/content.mdoc create mode 100644 apps/site/src/content/design-system/development/get-started/index.yaml create mode 100644 apps/site/src/content/design-system/development/guides/brand/design/undefined/content.mdoc create mode 100644 apps/site/src/content/design-system/development/guides/brand/design/useBrand/content.mdoc create mode 100644 apps/site/src/content/design-system/development/guides/brand/index.yaml create mode 100644 apps/site/src/content/design-system/development/guides/override/design/How overrides work/content.mdoc create mode 100644 apps/site/src/content/design-system/development/guides/override/design/Override order/content.mdoc create mode 100644 apps/site/src/content/design-system/development/guides/override/design/Structure/content.mdoc create mode 100644 apps/site/src/content/design-system/development/guides/override/design/Subcomponents/content.mdoc create mode 100644 apps/site/src/content/design-system/development/guides/override/index.yaml create mode 100644 apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Auto-address/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Dos and don'ts/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Error states/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Pattern examples in code/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/auto-addres/design/User experience/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/auto-addres/index.yaml create mode 100644 apps/site/src/content/design-system/patterns/addresses/complex-addres/design/Complex address/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/complex-addres/design/Pattern examples in code/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/complex-addres/index.yaml create mode 100644 apps/site/src/content/design-system/patterns/addresses/international-addres/design/Error states/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/international-addres/design/International address/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/international-addres/design/Pattern examples in code/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/international-addres/design/User experience/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/international-addres/index.yaml create mode 100644 apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Error states/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Manual address/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Pattern examples in code/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/addresses/manual-addres/index.yaml create mode 100644 apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Date of birth/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Dos and don'ts/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Error states/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Pattern examples in code/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/dates/date-of-birth/design/User experience/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/dates/date-of-birth/index.yaml create mode 100644 apps/site/src/content/design-system/patterns/dates/expiry-date/design/Dos and don'ts/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/dates/expiry-date/design/Error states/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/dates/expiry-date/design/Expiry date/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/dates/expiry-date/design/Pattern examples in code/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/dates/expiry-date/index.yaml create mode 100644 apps/site/src/content/design-system/patterns/personal-details/email/design/Dos and don'ts/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/email/design/Email/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/email/design/Error states/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/email/design/Pattern examples in code/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/email/index.yaml create mode 100644 apps/site/src/content/design-system/patterns/personal-details/employment/design/Employment/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/employment/design/Error states/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/employment/design/Pattern examples in code/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/employment/design/User experience/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/employment/index.yaml create mode 100644 apps/site/src/content/design-system/patterns/personal-details/name/design/Error states/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/name/design/Full name/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/name/design/Pattern examples in code/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/name/design/Simple name/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/name/index.yaml create mode 100644 apps/site/src/content/design-system/patterns/personal-details/phone/design/Dos and don'ts/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/phone/design/Error states/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/phone/design/Pattern examples in code/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/phone/design/Phone number/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/phone/design/User experience/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/phone/index.yaml create mode 100644 apps/site/src/content/design-system/patterns/tax-file-number/design/Error states/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/tax-file-number/design/Pattern examples in code/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/tax-file-number/design/Tax File Number/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/tax-file-number/design/User experience/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/tax-file-number/index.yaml diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx index f6fc1c42f..cf244c8bb 100644 --- a/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx @@ -1,17 +1,11 @@ 'use client'; import { usePathname, useRouter, useSearchParams } from 'next/navigation'; -import { Key, useCallback } from 'react'; +import { Key, useCallback, useMemo } from 'react'; import { AccessibilityContent, CodeContent, DesignContent, Tabs } from './components'; import { type ContentTabsProps } from './content-tabs.types'; -const TABS = [ - { label: 'Design', key: 'design' }, - { label: 'Accessibility', key: 'accessibility' }, - { label: 'Code', key: 'code' }, -] as const; - export function ContentTabs({ content }: { content: ContentTabsProps }) { const router = useRouter(); const pathname = usePathname(); @@ -26,9 +20,17 @@ export function ContentTabs({ content }: { content: ContentTabsProps }) { [brand, pathname, router], ); + const filteredTabs = useMemo(() => { + return [ + { label: 'Design', key: 'design' }, + ...(content.accessibilitySections.length > 0 ? [{ label: 'Accessibility', key: 'accessibility' }] : []), + ...(content.componentProps || content.code ? [{ label: 'Code', key: 'code' }] : []), + ]; + }, [content.accessibilitySections.length, content.code, content.componentProps]); + return ( - {TABS.map(tab => ( + {filteredTabs.map(tab => (
{tab.key === 'design' && ( diff --git a/apps/site/src/content/design-system/accessibility/colour-vision-impairment/design/Colour contrast testing/content.mdoc b/apps/site/src/content/design-system/accessibility/colour-vision-impairment/design/Colour contrast testing/content.mdoc new file mode 100644 index 000000000..ab4db1963 --- /dev/null +++ b/apps/site/src/content/design-system/accessibility/colour-vision-impairment/design/Colour contrast testing/content.mdoc @@ -0,0 +1,4 @@ +Here are some online tools that can assist with colour contrast testing: + +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [Vision Australia Colour Contrast Analyser](https://www.visionaustralia.org/services/digital-access/resources/colour-contrast-analyser) diff --git a/apps/site/src/content/design-system/accessibility/colour-vision-impairment/design/What is a colour vision impairment?/content.mdoc b/apps/site/src/content/design-system/accessibility/colour-vision-impairment/design/What is a colour vision impairment?/content.mdoc new file mode 100644 index 000000000..1aa7ef572 --- /dev/null +++ b/apps/site/src/content/design-system/accessibility/colour-vision-impairment/design/What is a colour vision impairment?/content.mdoc @@ -0,0 +1,49 @@ +Within the accessibility pages of this site, you will find the colour impairment demonstration tool, this tool allows you to view the components as someone with a colour vision impairment would perceive them. + +Colour vision impairment is something that impacts people (mostly men) across the board, it is a condition that affects how the cone photoreceptors in the retinas detect the colour frequencies of light. It can stop them from being able to perceive different colours. + +Some famous people who are considered _'colour blind'_: + +- Mark Zuckerberg - Founder of Facebook +- Bill Clinton - 42nd president of the United States +- Jamie Oliver - Celebrity chef + +Colour vision impairments can either be inherited or acquired. Inherited colour impairment is passed down genetically from parents to children (primarily from mother to son). Acquired colour impairment can be the result of chronic illness, accidents, chemicals, medications or age. + +Part of the process used when defining the design system brand colours, is to make sure that foreground and background colour combinations have the appropriate colour contrast luminosity ratios (in compliance with WCAG 2.1 AA). Adhering to this contrast ratio allows all our customers to differentiate our brand colours. We also highlight the situations where our brand colours will not have a high enough contrast ratio to be used together. + +Our colour vision impairment tool allows us to view the design system components as someone with an impairment would see them. It shows how important it is to ensure that when designing, you should never rely on a difference in colour alone to communicate to your users. + +Each of the filters in the colour impairment tool shows how the perception of colour is affected by different conditions, very broadly these are: + +## Protanopes + +- _Protanopia_ - No sensitivity to red light. +- _Protanomaly_ - Reduced sensitivity to red light. + +Protanopes tend to find it difficult to distinguish greens, yellows, oranges, reds and browns from each other. + +## Deuteranopes + +- _Deuteranopia_ - No sensitivity to green light. +- _Deuteranomaly_ - Reduced sensitivity to green light. + +Deuteranopes are likely to confuse colours such as green and yellow, or blue and purple, they may also struggle to distinguish between pink and grey or white. + +## Tritanopes + +- _Tritanopia_ - No sensitivity to blue light. +- _Tritanomaly_ - Reduced sensitivity to blue light. + +Tritanopes tend to find it difficult to see the difference between light blues and greys, dark purples and black, mid-greens and blues and oranges and reds. + +## Monochromacy + +- _Achromatopsia_ - Reduced sensitivity to all colours. +- _Achromatomaly_ - No sensitivity to colour. + +Monochromats see the world in black, white and shades of grey. Less severe cases may perceive small traces of specific colours, when the light conditions are just right. + +## Low-contrast + +People with a vision impairment that effects their perception of contrast will struggle to see the difference between colours that do not have enough contrast between them, ie light grey against white. diff --git a/apps/site/src/content/design-system/accessibility/colour-vision-impairment/index.yaml b/apps/site/src/content/design-system/accessibility/colour-vision-impairment/index.yaml new file mode 100644 index 000000000..ad113454c --- /dev/null +++ b/apps/site/src/content/design-system/accessibility/colour-vision-impairment/index.yaml @@ -0,0 +1,9 @@ +name: Colour vision impairment +description: >- + Anywhere from 8-10% of all males have some form of colour vision impairment or + colour blindness and from 0.5-1% of all females. This is something that + effects many of our customers, regardless of age. +design: + - title: What is a colour vision impairment? + - title: Colour contrast testing +accessibility: [] diff --git a/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Accessibility testing/content.mdoc b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Accessibility testing/content.mdoc new file mode 100644 index 000000000..9fa2dc978 --- /dev/null +++ b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Accessibility testing/content.mdoc @@ -0,0 +1,20 @@ +This is the aspect of accessibility that seems to have the most awareness, where the code is tested before delivery of the product or service. If you've got all other aspects of your inclusive design right, then this is the next most important part of the process. Ensuring that the code is accessible is what allows users to consume your content using the assistive technologies they depend on, like screen readers. + +This is one of the driving forces behind the GEL Design System, it is a systematic framework for building accessible and inclusive products and services. + +All components have been thoroughly tested for accessibility and comply with WGAC 2.1 AA. Each component has been tested in isolation, so when teams are building new products using these components, it is still a requirement to test the built product or service before going live. However, if it has been assembled using components from the Design System, you'll already be ahead. + +We have close, established relationships with industry leading accessibility experts and continue to push boundaries to deliver ever-accessible components and patterns. The following describes how our components were tested: + +### Testing approach + +Every component has been tested and passed relevant WCAG 2.1 Level A and AA Success Criteria for mobile and desktop views. The testing was conducted across 7 combinations of assistive technology and web browsers based on the most commonly used assistive technology and web browser combinations on PC, Mac, iOS and Android including: + +- JAWS 17 and JAWS 2019 with Internet Explorer 11 on Windows +- NVDA (latest) with Firefox (latest) on Windows +- VoiceOver with Safari on OSX +- VoiceOver with Safari on iOS (latest) +- TalkBack with Chrome on Android (latest) +- Dragon NaturallySpeaking with Internet Explorer 11 on Windows + +Any WCAG conformance issues, assistive technology issues found were workshopped and addressed using best practice approaches and recommendations for creating a more inclusive experience. diff --git a/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Accessible interfaces/content.mdoc b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Accessible interfaces/content.mdoc new file mode 100644 index 000000000..39ab2bd4a --- /dev/null +++ b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Accessible interfaces/content.mdoc @@ -0,0 +1,5 @@ +When designing and coding for accessibility, it's often the case of function over form to ensure components meet WCAG standards while still retaining a layer of branded attributes and market appeal. + +Consideration for assistive technologies for digital goes beyond screen readers, we also design for those with motor skill challenges, cognitive challenges and impaired sight to name a few. + +Colour contrast, line weights, hit targets and spacing are all considered when designing the visual aspects of the components, while making sure the integrity of each brand in the Westpac Group is protected. diff --git a/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Deprecated components/content.mdoc b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Deprecated components/content.mdoc new file mode 100644 index 000000000..11c176ee6 --- /dev/null +++ b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Deprecated components/content.mdoc @@ -0,0 +1,5 @@ +Unfortunately a few of the components from the previous version of the Design System no longer made the grade in the new WCAG 2.1 AA world. So they had to be deprecated or significantly adjusted, this is what has changed: + +- Removed the functionality to dismiss a popover by clicking anywhere else on the page. We still have the [Popover](/design-system/components/popovers) with toggle functionality. To continue to comply with accessibility requirements Popovers need to be dismissed by either clicking on the trigger that launched them or by selecting a close button. +- Labels were removed from Switches ([Switches](/design-system/components/switches) without labels are still available). The labels, On/Off were removed as they posed an accessibility issue for screen readers. In code, a switch is just a checkbox, a checkbox doesn't have a label that describes if it is checked or not. Re-engineering the switch to include that label was not worth the complexity required. +- Tooltips proved to have accessibility issues as well as not working effectively across responsive applications. As they were not very widely used (if at all) they were removed. diff --git a/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Inclusive content writing/content.mdoc b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Inclusive content writing/content.mdoc new file mode 100644 index 000000000..c331b7440 --- /dev/null +++ b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Inclusive content writing/content.mdoc @@ -0,0 +1,3 @@ +As well as offering simple products, we need to ensure we communicate their specifics in a clear and inclusive way. Complicated terminology can be appropriate for a certain audience, especially when talking about products and services that are specific to customers in more specialised fields. But in general our products and services are for the whole community, so we should ensure that content is easily readable, and if there are situations where that is not possible then we need to use supplemental content to clarify it. According to WCAG ‘Supplemental content is required when text demands reading ability more advanced than the lower secondary education level—that is, more than nine years of school.’ + +The most common form of supplemental content in a digital context would be the ‘Help text’ you find associated with forms and calculators. diff --git a/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Inclusive product design/content.mdoc b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Inclusive product design/content.mdoc new file mode 100644 index 000000000..ece72f9fb --- /dev/null +++ b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Inclusive product design/content.mdoc @@ -0,0 +1 @@ +Before you even create your first wireframe, there needs be consideration to what is being offered to our customers. We advocate for clear customer communication with everything from our product and service offerings, fees and rates to terms and conditions. Ensuring clarity and simplicity in delivering product and service information is integral for communicating value, especially given the complexity of financial products and services and their impact on peoples' lives. diff --git a/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Principles of accessibility/content.mdoc b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Principles of accessibility/content.mdoc new file mode 100644 index 000000000..91968c0a4 --- /dev/null +++ b/apps/site/src/content/design-system/accessibility/design-system-accessibility/design/Principles of accessibility/content.mdoc @@ -0,0 +1,21 @@ +The following comes from the [W3.org](https://www.w3.org/) website, it explains the four principles of accessibility that the Web Contact Accessibility Guidelines (WCAG) and Success Criteria are organised around: + +> _**1\. Perceivable**_ _- Information and user interface components must be presentable to users in ways they can perceive._ +> +> _This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)_ +> +> _**2\. Operable**_ _- User interface components and navigation must be operable._ +> +> _This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)_ +> +> _**3\. Understandable**_ _\- Information and the operation of user interface must be understandable._ +> +> _This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)_ +> +> _**4\. Robust**_ _- Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies._ +> +> _This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)_ +> +> _If any of these are not true, users with disabilities will not be able to use the Web._ + +See [www.w3.org/WAI/WCAG21/Understanding/intro](https://www.w3.org/WAI/WCAG21/Understanding/intro) for the entire article. diff --git a/apps/site/src/content/design-system/accessibility/design-system-accessibility/index.yaml b/apps/site/src/content/design-system/accessibility/design-system-accessibility/index.yaml new file mode 100644 index 000000000..380b7d115 --- /dev/null +++ b/apps/site/src/content/design-system/accessibility/design-system-accessibility/index.yaml @@ -0,0 +1,14 @@ +name: Design system accessibility +description: >- + Accessibility is not just a box you tick at the end of a project, we have to + be diligent and aware of the impacts the decisions we make have at all stages + of product delivery. The following areas need to be considered when designing + for accessibility and inclusion. +design: + - title: Principles of accessibility + - title: Inclusive product design + - title: Inclusive content writing + - title: Accessible interfaces + - title: Accessibility testing + - title: Deprecated components +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/abbreviation/design/title/content.mdoc b/apps/site/src/content/design-system/content/guidelines/abbreviation/design/title/content.mdoc new file mode 100644 index 000000000..fbad1a999 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/abbreviation/design/title/content.mdoc @@ -0,0 +1,35 @@ +Use abbreviations when they're well known and appropriate to use. + +For example: + +> 8am, 5pm +> +> Min., max. + +--- + +For these abbreviations, use a comma beforehand: + +- etc. - 'more of the same' +- i.e. - 'in other words' +- e.g. - ‘for example’ + +For example: + +> We service a range of industries, e.g. health, education, agriculture, etc. + +--- + +Use lower case for numerical abbreviations. + +For example: + +> 10kg, 10m, $10m + +_Note: Don’t use plurals or space between the number and the abbreviation._ + +For example: + +> Do: 10kg +> +> Don’t: 10kgs, 10 kg diff --git a/apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml b/apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml new file mode 100644 index 000000000..a5bd40f14 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml @@ -0,0 +1,5 @@ +name: Abbreviation +description: Abbreviations are shortened forms of words or phrases. +design: + - title: title +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/acronym/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/acronym/design/undefined/content.mdoc new file mode 100644 index 000000000..02cd3e365 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/acronym/design/undefined/content.mdoc @@ -0,0 +1,27 @@ +Before using most acronyms, the first mention should spell them out followed by the initials in rounded brackets – thereafter, just use the acronym. + +For example: + +> You can update your Tax File Number (TFN) at the Australian Tax Office (ATO). Once you’ve updated your TFN, let us know. + +--- + +For well-known acronyms, you don’t need to spell out them out. + +For example: + +> ATM, PIN, BSB, SMS, PDF, URL +> +> NSW, Qld, SA, Vic, ACT, NT, WA, Tas + +_Note: Don’t use full stops between letters._ + +--- + +Don’t use acronyms for product categories. + +For example: + +> Do: credit card, home loan +> +> Don’t: CC, HL diff --git a/apps/site/src/content/design-system/content/guidelines/acronym/index.yaml b/apps/site/src/content/design-system/content/guidelines/acronym/index.yaml new file mode 100644 index 000000000..2cae47442 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/acronym/index.yaml @@ -0,0 +1,5 @@ +name: Acronym +description: Acronyms are words that are formed from the first letters of other words. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/age-&-school-year/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/age-&-school-year/design/undefined/content.mdoc new file mode 100644 index 000000000..b94474832 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/age-&-school-year/design/undefined/content.mdoc @@ -0,0 +1,29 @@ +Use numerals, not words. + +For example: + +> Do: 18 +> +> Don’t: eighteen + +--- + +For individuals, use ‘years old’ or ‘year old’, depending on the context. For groups, use ‘year olds’. + +For example: + +> If you’re under 30 years old… +> +> We asked an 18 year old… +> +> We asked a group of 18 year olds… + +_Note: Don’t use hyphens._ + +--- + +For school years, capitalise the ‘Y’ + +For example: + +> Year 12 students diff --git a/apps/site/src/content/design-system/content/guidelines/age-&-school-year/index.yaml b/apps/site/src/content/design-system/content/guidelines/age-&-school-year/index.yaml new file mode 100644 index 000000000..94ad665d4 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/age-&-school-year/index.yaml @@ -0,0 +1,5 @@ +name: Age & school year +description: A guide to writing age and school years. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/design/undefined/content.mdoc new file mode 100644 index 000000000..af63ca04e --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/design/undefined/content.mdoc @@ -0,0 +1,15 @@ +Don't underline or bold text for emphasis. + +For example: + +> Do: Lock in exchange rates on up to five major currencies. +> +> Don’t: Lock in exchange rates on up to five major currencies. +> +> Don’t: Lock in exchange rates on up to **five major currencies.** + +For steps, use bold text for the exact wording on tabs, links and buttons. Also see [Calls to action (CTAs).](/design-system/content/calls-to-action) + +For example: + +> Sign into the Westpac App > Go to the **$** on the bottom menu > Tap **Pay someone** > Tap **Add** diff --git a/apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/index.yaml b/apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/index.yaml new file mode 100644 index 000000000..551ac50d1 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/index.yaml @@ -0,0 +1,7 @@ +name: Bolding & underlining +description: >- + Bolding and underlining are used to emphasise words. We only use bolding in + certain situations. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/bracket/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/bracket/design/undefined/content.mdoc new file mode 100644 index 000000000..d7792749d --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/bracket/design/undefined/content.mdoc @@ -0,0 +1,13 @@ +Use normal punctuation in brackets. + +For example: + +> Set up direct debit payments for regular bills (e.g. phone, water and electricity), to stay on top of your finances. + +--- + +Ensure the sentence still makes sense with the bracketed copy removed. + +For example: + +> Set up direct debit payments for regular bills, to stay on top of your finances. diff --git a/apps/site/src/content/design-system/content/guidelines/bracket/index.yaml b/apps/site/src/content/design-system/content/guidelines/bracket/index.yaml new file mode 100644 index 000000000..b92a0eb23 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/bracket/index.yaml @@ -0,0 +1,5 @@ +name: Bracket +description: Brackets are used to provide extra information. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/design/undefined/content.mdoc new file mode 100644 index 000000000..08744dda5 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/design/undefined/content.mdoc @@ -0,0 +1,28 @@ +Use bullet points for listing, e.g., features and benefits. + +--- + +Don’t punctuate single words or short phrases. + +For example: + +> Enjoy the benefits of eStatements: +> +> - More secure +> - Environmentally friendly +> - Avoids clutter +> - Convenient + +--- + +Two or more sentences in any position should be fully punctuated but avoid writing in this way as it loses the impact of using bullet points. + +--- + +Use numbered lists for sequential steps, e.g., instructions. Also see [Calls to action (CTAs)](https://gel.westpacgroup.com.au/design-system/content/calls-to-action). + +For example: + +> 1. Sign into the Westpac App +> 2. Go to **Settings** +> 3. Select **Wallpaper** diff --git a/apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/index.yaml b/apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/index.yaml new file mode 100644 index 000000000..e605cd2c5 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/index.yaml @@ -0,0 +1,7 @@ +name: Bullet points & numbered list +description: >- + Bullet points and numbered lists are used to make it easier to understand a + series of items. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/design/undefined/content.mdoc new file mode 100644 index 000000000..5009343da --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/design/undefined/content.mdoc @@ -0,0 +1,82 @@ +CTAs should be short and action-orientated – using buttons and hyperlinked text. + +For example: + +![Two examples of calls to action that are short and action oriented.](https://res.cloudinary.com/westpac-gel/image/upload/v1667894142/cla7x3vj6001ef58icgubfckf.png) + +Use short, action oriented calls to action + +_Note: No full stops in CTAs but fine to use question marks._ + +--- + +Hyperlinks must be underlined unless they’re standalone text links, in which case we add a chevron. + +For example: + +> \> Register for Online Banking + +Instead of using generic CTAs such as ‘Find out more’ and ‘Learn more’ – try to be contextual for accessibility and best practice (SEO & UX). + +However, when space is limited, try CTAs such as ‘Tell me more’ or ‘Show me how’ instead of ‘Find out more’ and ‘Learn more’. + +For example: + +> Find out more about balance transfers +> +> To learn more about whether Online Banking is right for you, see our Online Banking Terms & Conditions for more information. + +> Do: Submit application +> +> Don’t: Finish + +--- + +Try to avoid overt navigation instructions, e.g. ‘Click the link below to start the survey’ or ‘call the number below’ + +For example: + +> Use a CTA button or hyperlink that says ‘Start survey now’ +> +> Call us on 13 20 32 + +--- + +Keep verbs appropriate to the device type. + +For example: + +> **Mobile:** Go to, tap, swipe, scroll, select, choose +> +> **Desktop:** Go to, select, scroll, choose +> +> **Cross-device:** Go to, select, scroll, choose + +_Note: ‘Click’ doesn’t adhere to the_ [\_Accessibility & Inclusion Guidelines_](https://www.w3.org/WAI/tips/writing/)_._ + +--- + +When referring to signing into Online Banking or the Westpac App, use ‘into’, not ‘in to’. + +For example: + +> Sign into Online Banking or the Westpac App + +--- + +For steps, use bold text for the exact wording on tabs, links and buttons. + +For steps in body copy, use chevrons. Capitalise the first word after the chevron. + +For example: + +> Sign into the Westpac App > Go to the **$** on the bottom menu > Tap **Pay someone** > Tap **Add**. + +--- + +If there are more than 5 steps, switch to the list format. Also see [Bullet points & numbered lists](https://gel.westpacgroup.com.au/design-system/content/bullet-points-numbered-lists). + +For example: + +> - Sign into the Westpac App +> - Go to **Settings** and select **Wallpaper** diff --git a/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/index.yaml b/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/index.yaml new file mode 100644 index 000000000..3fe153d8d --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/index.yaml @@ -0,0 +1,5 @@ +name: Calls to action (ctas) +description: Calls to action are used to get a person to perform an instruction. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Capitalisation/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Capitalisation/content.mdoc new file mode 100644 index 000000000..90b8f7b51 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Capitalisation/content.mdoc @@ -0,0 +1,65 @@ +Always use capitalisation for: + +- Branded names (but not generic names of products or services) + +For example: + +> Westpac Life savings account +> +> Altitude Platinum credit card + +- Page meta titles (for SEO) + +For example: + +> Personal | Bank Accounts + +- Guides + +For example: + +> First Home Buyers Guide + +- Holidays - see [People & Diversity](/design-system/content/people-diversity) for more. + +For example: + +> Christmas, Easter, Lunar New Year + +- Days and months + +For example: + +> Monday, Friday +> +> January, December + +- Geographical names + +For example: + +> Sydney, Australia + +- Languages + +For example: + +> English, Cantonese, Vietnamese + +- Government departments + +For example: + +> Australian Taxation Office + +- Job titles (official titles only) + +For example: + +> Get in touch with your Relationship Manager + +- Awards + +For example: + +> Best Business Bank Award 2021 diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Countries/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Countries/content.mdoc new file mode 100644 index 000000000..4d10e88b6 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Countries/content.mdoc @@ -0,0 +1,19 @@ +Take note of the way we refer to certain countries. + +China – use China, not PRC + +United Kingdom - use UK or United Kingdom, not England or Great Britain + +United States - use US or United States, not USA, America or United States of America. + +_Note: For H1 headings, US reads as ‘us’, so use U.S._ + +For example: + +> China trade deal +> +> UK stock market recovery +> +> US stocks hit a slump +> +> INVEST IN U.S. STOCKS diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Headings/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Headings/content.mdoc new file mode 100644 index 000000000..ba8f15387 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Headings/content.mdoc @@ -0,0 +1,9 @@ +Headings always use sentence-case (not title-case), excluding H1 page headings which are all-caps. + +For example: + +> Do: Get $3k cashback when you refinance to us +> +> Don’t: Get $3K Cashback When You Refinance To Us + +_Note: No full stops on the end of any headings – see_ [_Headings and subheadings_](/design-system/content/headings-subheadings)_._ diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Lower-case/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Lower-case/content.mdoc new file mode 100644 index 000000000..7ff153ca0 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Lower-case/content.mdoc @@ -0,0 +1,21 @@ +Always use lower-case for: + +- Seasons + +For example: + +> spring, summer, autumn, winter + +- Online terms + +For example: + +> email, homepage, internet + +_Note: Capitalisation rules do not apply when a formal name is written in lower or upper case._ + +For example: + +> Maria von Trapp, iPhone, ebay +> +> BPAY, PayID diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Sentence-case/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Sentence-case/content.mdoc new file mode 100644 index 000000000..a0f0e7b9b --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/Sentence-case/content.mdoc @@ -0,0 +1,41 @@ +Always use sentence-case for: + +- Navigation menus (unless linking a branded product). + +For example: + +> \> Savings account + +> \> Westpac Life + +- CTA buttons and hyperlinks (no full stops but fine to use question marks) + +For example: + +> Compare accounts +> +> What’s new? + +> \> Calculate my repayments + +> \> How much can I borrow? + +- Validation or error messages + +For example: + +> Enter a valid email address + +- Form fields + +For example: + +> First name, Phone number, Email + +- Numerical amounts + +For example: + +> Do: $10k +> +> Don’t: $10K diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/States and territories/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/States and territories/content.mdoc new file mode 100644 index 000000000..b6e0be46e --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/States and territories/content.mdoc @@ -0,0 +1,21 @@ +States and territories have each word capitalised. + +For example: + +> Australian Capital Territory (ACT) +> +> New South Wales (NSW) +> +> Victoria (Vic) +> +> Queensland (Qld) +> +> Western Australia (WA) +> +> South Australia (SA) +> +> Tasmania (Tas) +> +> Northern Territory (NT) + +_Note: Don’t use all-caps for Vic, Qld, Tas as they are the shortened versions of each full name of the state, rather than each letter representing a word, e.g., NSW stands for New South Wales._ diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml b/apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml new file mode 100644 index 000000000..a40d4dafc --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/index.yaml @@ -0,0 +1,12 @@ +name: Capital letter +description: >- + Capital letters are typically used at the start of a sentence and for proper + nouns. +design: + - title: Headings + - title: Sentence-case + - title: Capitalisation + - title: Lower-case + - title: States and territories + - title: Countries +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/contraction/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/contraction/design/undefined/content.mdoc new file mode 100644 index 000000000..372d0652f --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/contraction/design/undefined/content.mdoc @@ -0,0 +1,17 @@ +Our writing style is conversational, so use contractions wherever possible. + +For example: + +> Do: You’ll, you’re, don’t, aren’t +> +> Don’t: You will, you are, do not, are not + +--- + +Don’t use unnatural sounding contractions. + +For example: + +> Don’t: May’ve, wouldn’t’ve, where’d + +_Note: There are instances where contractions cannot be used for legal reasons._ diff --git a/apps/site/src/content/design-system/content/guidelines/contraction/index.yaml b/apps/site/src/content/design-system/content/guidelines/contraction/index.yaml new file mode 100644 index 000000000..588966de4 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/contraction/index.yaml @@ -0,0 +1,5 @@ +name: Contraction +description: Contractions consist of two words combined to create a shorter word. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/design/undefined/content.mdoc new file mode 100644 index 000000000..1c1a13cd7 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/design/undefined/content.mdoc @@ -0,0 +1,169 @@ +Days and months are spelt out in full unless appearing in T&Cs, disclaimers, contact details or mobile apps. + +For example: + +> Monday, January +> +> Apply by 1 Jan 2021. +> +> Mon–Sun + +--- + +Dates should appear as , + +For example: + +> Monday, 1 January 2021 + +_Note: For T&Cs and disclaimers, shorten dates as DD/MM/YY or 1 Jan 2021._ + +--- + +Don’t use ‘st’, ‘nd’, ‘rd’, ‘th’ on dates. + +For example: + +> Do: 25 January 2021 +> +> Don’t: 25th January 2021 + +--- + +No apostrophes on decades – it’s plural, not possessive. + +For example: + +> 1990s, 90s + +--- + +For date/day/time ranges, use an em dash with no space on either side. + +For example: + +> 10–15 January 2021 +> +> 2010–2020 +> +> Mon–Fri +> +> 8am–8pm + +--- + +For times, use the 12-hour clock and use full stops to separate hours and minutes. + +For example: + +> Do: 8.30am, 5.30pm +> +> Don’t: 8.00am, 8:00am, 17.30 + +_Note: For 12am and 12pm, use ‘midnight’ and ‘noon’._ + +For example: + +> Entries closes before midnight. +> +> The event will start at noon. + +--- + +If you need to specify the time zone, use the following format: + +- Westpac + +8.30am-5pm (Sydney time), Mon-Fri + +- St George + +Mon-Sat, 8am-8pm (AEST) + +- Bank of Melbourne + +Mon-Sat, 8am-8pm + +- BankSA + +Mon-Sat, 7.30am-7.30pm + +--- + +Use 24/7 – not ‘24 hours, 7 days a week’. + +For example: + +> Bank online, 24/7 +> +> You can call us anytime, 24/7 + +--- + +When writing for mobile apps, the guidance for dates and times are: + +- Date can be qualified as today, yesterday or tomorrow + +For example: + +> today, yesterday, tomorrow + +- Date cannot be qualified as today, yesterday or tomorrow + +For example: + +> Fri 1 Mar 2022 + +- Date with time + +For example: + +> Fri 1 Mar 2022 11:50pm (Sydney time) + +--- + +Numbers 0 to 9 are generally written as words while numbers 10+ are generally written as numerals. + +For example: + +> No monthly fees for six months. +> +> Our lowest rate in 20 years. + +--- + +Use numerals instead of words for: + +- business days +- age +- school years +- dates and business days +- street addresses +- tips articles +- instructions +- snappy copy +- mobile apps where space is limited. + +For example: + +> Your new card will arrive within 5 business days +> +> Children under 5 years old… +> +> Year 12 students + +--- + +Avoid starting a headline or sentence with a numeral unless it’s dollar amounts, percentages, points or tips/reasons/steps, etc. + +For example: + +> $3k cashback when you refinance your home loan to us. +> +> 1.99% p.a. fixed rate for first home buyers. +> +> 150,000 Velocity Points could be yours with a Westpac home loan. +> +> 5 tips for paying off your mortgage faster. +> +> 3 easy steps to setting up Online Banking. diff --git a/apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/index.yaml b/apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/index.yaml new file mode 100644 index 000000000..9b1b4bdbf --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/index.yaml @@ -0,0 +1,5 @@ +name: Dates, days & time +description: A guide to writing dates, days and time. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/empty-state/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/empty-state/design/undefined/content.mdoc new file mode 100644 index 000000000..a13cb5846 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/empty-state/design/undefined/content.mdoc @@ -0,0 +1,8 @@ +When creating messages for empty states: + +- avoid generic messages +- guide the customer on how they could move forward, for example, by inserting a call to action or placeholder text + +![Two images showing empty states for linking an account or searching for something.](https://res.cloudinary.com/westpac-gel/image/upload/v1669959576/clb62taq40000bn8iasgdewap.png) + +Provide clear direction when displaying an empty state diff --git a/apps/site/src/content/design-system/content/guidelines/empty-state/index.yaml b/apps/site/src/content/design-system/content/guidelines/empty-state/index.yaml new file mode 100644 index 000000000..85afc44ab --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/empty-state/index.yaml @@ -0,0 +1,7 @@ +name: Empty state +description: >- + Empty states are moments in a person’s experience with a product where there’s + nothing to display. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/error-message/design/Displaying error messages/content.mdoc b/apps/site/src/content/design-system/content/guidelines/error-message/design/Displaying error messages/content.mdoc new file mode 100644 index 000000000..bfa94973b --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/error-message/design/Displaying error messages/content.mdoc @@ -0,0 +1,27 @@ +### In-line errors + +On a standard form, error messages should be displayed between label and input. They should be visibly distinct from inputs without errors. This distinction is created with the ⚠ icon, a message in red text, and a red keyline for input fields and selects. + +Loading... + +There are some instances where the red keyline is not used, such as radio buttons, check boxes and button groups. + +Loading... + +#### WHY DISPLAY MESSAGES IN BETWEEN LABEL AND INPUT?  + +Surfacing the error below the label and above the input gives greater context to the error message. It also assists people who use magnification tools to read the label and an associate error in a natural reading order. This avoids any unnecessary scrolling up and down. + +This also helps on mobile devices when tapping into the input opens a virtual keyboard. By placing the error message just above the input, the error message isn’t covered by the keyboard. + +### Error summary + +In addition to in-line error messaging, there should also be a summary of errors displayed at the top of a page that is triggered by selecting the submit button. The summary contains a list of all active errors on the page. + +The summary allows screen reader users to understand what they must do to recover from the errors. They can proceed by using the links in the error summary, or tab through the error summary and continue onto the page, flowing naturally down and recovering as they go. + +For one-page and multi-page forms, an error summary is the most accessible way of managing errors. + +### Avoid disabled or ‘greyed out’ buttons + +For most people, a disabled button can be confusing and frustrating. To a person relying on assistive technology, a disabled button may not be obvious to them at all. This creates a significant barrier in using a form. It is better to guide a customer through helpful messaging, so they understand what to do next. diff --git a/apps/site/src/content/design-system/content/guidelines/error-message/design/Types of error messages/content.mdoc b/apps/site/src/content/design-system/content/guidelines/error-message/design/Types of error messages/content.mdoc new file mode 100644 index 000000000..59849871d --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/error-message/design/Types of error messages/content.mdoc @@ -0,0 +1,21 @@ +### Blank field errors + +If a customer hasn’t filled in a required field, include the name of the field to maximise clarity. Avoid ambiguous error messages that could apply to any field such as ‘Enter a value’ or ‘This field is required’. + +Loading... + +### Formatting errors + +Formatting errors are shown when someone enters information in an unexpected or incorrect way. Phone numbers, email addresses and dates are examples of fields that need specific formatting. In these cases, it’s best to suggest how someone should enter the information. + +For example, for an error relating to an Australian mobile phone number: + +> ⚠ Enter a number in the format: 0412345678 + +Keep inline error messages brief. There’s no need to include a full stop at the end. If two sentences are required, insert a full stop to separate them, leaving out the full stop at the end. + +For example: + +> Enter an address +> +> We’re currently having technical issues. Try again later diff --git a/apps/site/src/content/design-system/content/guidelines/error-message/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/error-message/design/undefined/content.mdoc new file mode 100644 index 000000000..dba5a58bc --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/error-message/design/undefined/content.mdoc @@ -0,0 +1,40 @@ +Errors are frustrating and interrupt the customer experience, so create messages that can help the customer. + +When creating error messages, don’t blame the customer and avoid alarming them by saying that something has gone wrong. Instead, explain what happened and help the customer get back on track. + +For example: + +> Do: Enter an email address in the format: name@example.com +> +> Don’t: You’ve entered an invalid email + +--- + +Keep the message jargon-free and avoid technical terms like, ‘validation in progress’ or ‘invalid entry’. + +For example: + +> Do: We couldn’t sign you in. Check your internet connection and try again. +> +> Don’t: Network error + +--- + +Don’t use ‘Uh oh’ or ‘Oops’ as they don’t provide any useful information, and please don’t use please. Rather than being apologetic for every error state, focus on helping customers recover quickly by being direct and specific. + +It’s ok to use ‘please’ for the error summary heading, but it doesn’t need to be repeated elsewhere. + +--- + +Give helpful hints to customers before they attempt to fill in a field. + +For example: + +> Your password should: +> +> - be 8 characters or longer +> - contain at least 1 number or symbol e.g. !@#% + +--- + +Error messages should be displayed where the error is located instead of making the customer scroll through the page (especially on a mobile device) to find the corresponding field. diff --git a/apps/site/src/content/design-system/content/guidelines/error-message/index.yaml b/apps/site/src/content/design-system/content/guidelines/error-message/index.yaml new file mode 100644 index 000000000..c63535afd --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/error-message/index.yaml @@ -0,0 +1,9 @@ +name: Error message +description: >- + The way we communicate errors to our users helps them to recover quickly with + less effort. +design: + - {} + - title: Types of error messages + - title: Displaying error messages +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/headings-&-subheading/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/headings-&-subheading/design/undefined/content.mdoc new file mode 100644 index 000000000..24709a30e --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/headings-&-subheading/design/undefined/content.mdoc @@ -0,0 +1,19 @@ +No full stops at the end of any headings but fine to use a full stop or comma to break up a headline. + +For example: + +> OUR DREAM RATE JUST GOT DREAMIER +> +> LIFE IS EVENTFUL. THAT’S WHY WE HELP +> +> MEET RED, YOUR VIRTUAL ASSISTANT + +--- + +Question marks and exclamation marks can help keep headings short and engaging. + +For example: + +> WANT $3K CASHBACK? + +_Note: Only use exclamation marks when appropriate, e.g. Now that’s a great rate!_ diff --git a/apps/site/src/content/design-system/content/guidelines/headings-&-subheading/index.yaml b/apps/site/src/content/design-system/content/guidelines/headings-&-subheading/index.yaml new file mode 100644 index 000000000..80740093c --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/headings-&-subheading/index.yaml @@ -0,0 +1,7 @@ +name: Headings & subheading +description: >- + Headings and subheadings are used to tell a person what they can expect from + the content of a section. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/design/undefined/content.mdoc new file mode 100644 index 000000000..8eae6d328 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/design/undefined/content.mdoc @@ -0,0 +1,41 @@ +Customers with accessibility requirements may use a screen reader which means that they listen to a link text. To assist these customers: + +- link copy should be contextual +- avoid duplicating link text within the same page +- avoid using full URLs. + +_Note: External links should open in a new tab while internal links and PDFs should open in the same tab – exceptions for secure environment._ + +For example: + +> Do: Download our First Home Buyers Guide +> +> Don’t: Download our First Home Buyers Guide + +> Do: For more information, see our Online Banking Terms & Conditions +> +> Don’t: For more information, see our Online Banking Terms & Conditions + +--- + +Never use ‘click here' – and avoid generic CTAs such as 'Find out more', ‘Learn more’, etc. – as these don’t meet our Accessibility & Inclusion requirements. Instead, try describing what the link would do. + +For example: + +> Do: See our range of credit cards +> +> Don’t: Click here for more information on our range of credit cards + +--- + +Email addresses are lower-case without a full stop. + +Westpac URLs don’t include ‘https://’ or ‘www.’ but external websites must include ‘www.’, e.g. www.ato.gov.au + +For example: + +> johnsmith@westpac.com.au +> +> westpac.com.au/westpacapp + +_Note: Don’t end a URL with a full stop or forward slash._ diff --git a/apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/index.yaml b/apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/index.yaml new file mode 100644 index 000000000..00f8a6ac7 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/index.yaml @@ -0,0 +1,5 @@ +name: Hyperlinks & email addresse +description: A guide to using hyperlinks and email addresses. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/navigation/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/navigation/design/undefined/content.mdoc new file mode 100644 index 000000000..1dc170b71 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/navigation/design/undefined/content.mdoc @@ -0,0 +1,27 @@ +Navigation and menu items are sentence case unless it’s a branded product. + +For example: + +> \> Home loans +> +> \> Savings accounts +> +> \> Westpac Life + +Ampersands can be used to shorten the wording + +For example: + +> \> International & Travel +> +> \> Terms & Conditions + +_Note: Capitalise the second word_ + +Refer to the starting screen in the app as ‘home screen’ and not ‘dashboard’ or ‘home dashboard’. + +For example: + +> **How we calculate your net position** +> +> We add up the balances of the Westpac accounts that you see on your home screen. diff --git a/apps/site/src/content/design-system/content/guidelines/navigation/index.yaml b/apps/site/src/content/design-system/content/guidelines/navigation/index.yaml new file mode 100644 index 000000000..56e97ff66 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/navigation/index.yaml @@ -0,0 +1,5 @@ +name: Navigation +description: Navigation is used to help a person find content on a website or app. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/design/undefined/content.mdoc new file mode 100644 index 000000000..bcaf60ac3 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/design/undefined/content.mdoc @@ -0,0 +1,139 @@ +Numbers 0-9 should be written as words. + +For example: + +> No fees for six months. + +Numbers 10+ should be written using numbers. + +For example: + +> Get credit for up to 30 days. + +--- + +Use numerals instead of words for: + +- business days +- age +- school years +- dates and business days +- street addresses +- tips articles +- instructions +- snappy copy +- mobile apps where space is limited. + +For example: + +> 5 TIPS FOR PAYING OFF YOUR MORTGAGE FASTER. +> +> 6 WAYS TO SAVE MORE + +--- + +Avoid starting a sentence or heading with a number unless it’s a rate, dollar amount, points or tips/reasons/steps, etc. + +For example: + +> $3K CASHBACK WITH A WESTPAC HOME LOAN +> +> $3,000 cashback. +> +> Get $3k cashback…. + +--- + +Numerals 1,000+ use commas + +--- + +Thousands, millions and billions can be expressed using k, m, b – and should always be used as such in headings, disclaimers and T&Cs. + +For example: + +> 5m customers… +> +> $5b worth of shares… + +_Note: For points, it’s preferable to use ‘000s as it looks more impressive._ + +--- + +BSB numbers include a dash after the first three digits + +For example: + +> 732-118 + +--- + +Telephone numbers should include spaces. + +For example: + +> 6-digit: 132 032 +> +> 10-digit: +61 2 9155 7700 +> +> Mobile: 0439 111 222 + +_Note: Telephone numbers need to be hyperlinked and underlined for accessibility._ + +--- + +Number ranges use an en dash without spaces on either side. + +For example: + +> 8am–8pm +> +> 18–34 year olds +> +> Years 7–12 + +--- + +Percentages should be %, not ‘percent’. + +For example: + +> Earn up to 3% p.a. interest +> +> Get a fixed rate of 1.99% p.a. + +_Note: No decimal place if a whole number; two decimal places if any decimal applies_ + +--- + +Number rankings can either be: + +- ‘first’, ‘second’, etc. +- #1, #2, #3 +- no.1, no.2 + +For example: + +> Westpac is Australia’s second biggest bank +> +> Westpac is aiming to be Australia’s #1 mobile banking app. +> +> Our no.1 business account. + +--- + +No currency symbols on abbreviations of foreign currencies, e.g. AUD, USD, NZD, EUR, GB, etc. + +For example: + +> Do: AUD100,000 +> +> Don’t: AUD$100,000 + +--- + +Currencies are lower case when using the word. + +For example: + +> euro, dollar, sterling, pound diff --git a/apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/index.yaml b/apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/index.yaml new file mode 100644 index 000000000..60cb32ae6 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/index.yaml @@ -0,0 +1,5 @@ +name: Numbers & currencie +description: A guide to writing numbers and currencies. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/people-&-diversity/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/people-&-diversity/design/undefined/content.mdoc new file mode 100644 index 000000000..a39d22f53 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/people-&-diversity/design/undefined/content.mdoc @@ -0,0 +1,47 @@ +Avoid being gender specific where possible. + +For example: + +> Do: Tradesperson, Tradie +> +> Don’t: Tradesman + +--- + +When referring to First Nations people, use: + +- First Nations +- First people +- Aboriginal and Torres Strait Islander(s) + +For example: + +> We offer various career opportunities for Aboriginal and Torres Strait Islanders to help them prosper and grow. + +_Note: Don’t use ‘Indigenous’ as it can be considered offensive; but it may be used when referring to programs or business names and units._ + +--- + +Avoid defining people by their disability and aim for positive language. + +For example: + +> Do: People with impaired vision +> +> Don’t: Blind people + +_Note: Refer to the_ [\_Accessibility GEL Principles_](https://gel.westpacgroup.com.au/principles/accessibility/) _for more information on designing for an inclusive audience._ + +--- + +Try to keep holidays agnostic where possible. + +For example: + +> festive season, holiday season +> +> Do: Lunar New Year +> +> Don’t: Chinese New Year + +_Note: ‘Christmas’ can be used in mass comms but not personalised comms._ diff --git a/apps/site/src/content/design-system/content/guidelines/people-&-diversity/index.yaml b/apps/site/src/content/design-system/content/guidelines/people-&-diversity/index.yaml new file mode 100644 index 000000000..a31b49275 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/people-&-diversity/index.yaml @@ -0,0 +1,5 @@ +name: People & diversity +description: A guide to writing for an inclusive audience. +design: + - {} +accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Ampersands [&]/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Ampersands [&]/content.mdoc new file mode 100644 index 000000000..ea6c7443f --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Ampersands [&]/content.mdoc @@ -0,0 +1,9 @@ +Replaces the word ‘and’ – often used in headings and navigation menus. Don’t use in body copy unless it’s a noun or otherwise appropriate. + +For example: + +> Terms & Conditions +> +> Travel & International + +_Note: Use of ampersands is subject to brand, legal and compliance reviews._ diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Apostrophes [']/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Apostrophes [']/content.mdoc new file mode 100644 index 000000000..cf795e930 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Apostrophes [']/content.mdoc @@ -0,0 +1,55 @@ +Used to indicate either possession or the omission of letters, as in an abbreviation or contraction. + +For example: + +> The industry’s grown 3% in the past 12 months. +> +> It’s, here’s, you’ll, etc. +> +> Look n’ feel, mix n’ match, etc. + +--- + +### It's vs. Its + +‘It’s’ is a contraction of 'it is' + +‘Its’ is a possessive pronoun meaning 'belonging to it'. + +For example: + +> **It's** our lowest fixed rate in 30 years. +> +> We’ve reduced **its** interest rate… + +--- + +When plural nouns end in 's', add the apostrophe after the ‘s’ to indicate possession. + +For example: + +> Both accounts’ eligibility requirements are the same. + +_Note: Never use Westpacs' – reword the sentence to avoid the punctuation._ + +--- + +Names ending in ‘s’ should have an ‘s on the end to indicate possession. + +For example: + +> Alexis's savings doubled in 12 months. + +--- + +Don’t use an apostrophe for plurals. + +For example: + +> ATMs +> +> 1990s +> +> PDFs + +_Note: Plural nouns that don’t end in 's' use an apostrophe and ‘s’ in the possessive e.g. Children’s account._ diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Colons [:]/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Colons [:]/content.mdoc new file mode 100644 index 000000000..60423193d --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Colons [:]/content.mdoc @@ -0,0 +1,32 @@ +Used to indicate that something follows, such as a list or examples. + +For example: + +> Enjoy the benefits of eStatements: +> +> - More secure +> - Environmentally friendly +> - Clutter free +> - Convenient + +--- + +Capitalise the first letter of each bullet point, unless it continues a sentence started by the introductory clause. + +For example: + +> How to apply for a loan at Westpac: +> +> 1. Online +> 2. Branch +> 3. Phone + +_Note: Only use full stops on the end of bullet points that are relatively lengthy._ + +--- + +A colon is also used where space is limited and separating a field name from data without a colon may confuse a customer. + +For example: + +> Account balance: $503.49 diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Commas [,]/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Commas [,]/content.mdoc new file mode 100644 index 000000000..b699fc46c --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Commas [,]/content.mdoc @@ -0,0 +1,33 @@ +Used to indicate a reading pause in a sentence, improving the flow of the message. + +For example: + +> With your Westpac Digital Card, you’ll never be without your card again. + +_Note: Read the sentence aloud to check if your commas are reflecting your pauses._ + +--- + +Oxford commas are added before the word 'and' to help avoid confusion. + +For example: + +> Credit criteria, terms and conditions, and eligibility apply. + +--- + +Use a comma before the word ‘but’ if joining two sentences. No comma if it’s one sentence. + +For example: + +> You won’t be able to access your Online Banking or Westpac App during this time, **but** you can still get in touch with us via phone or by dropping into branch. + +> The Banking Executive Accountability Regime will strengthen confidence in the financial sector **but** needs to be thought through to avoid unintended consequences. + +--- + +Use commas to separate names from titles. + +For example: + +> Peter King, Westpac Group CEO, was appointed in April 2020. diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Exclamation marks [!]/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Exclamation marks [!]/content.mdoc new file mode 100644 index 000000000..1423bf0cd --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Exclamation marks [!]/content.mdoc @@ -0,0 +1,7 @@ +Lifts the tempo of a word or phrase. Use sparingly and only when appropriate. + +For example: + +> Do: Congratulations! +> +> Don't: Get in touch with us! diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Full stops [.]/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Full stops [.]/content.mdoc new file mode 100644 index 000000000..d89005e65 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Full stops [.]/content.mdoc @@ -0,0 +1,47 @@ +No full stops on the end of headings or sub-headings. + +Use full stops for sub-copy and body copy. + +For example: + +> **Tap into simpler banking** +> +> Introducing the new Westpac App. Enjoy simpler, smarter and smoother banking with the new Westpac App for iPhone. + +--- + +_Note: You can use a full stop to break up a headline, but no full stop on the end._ + +For example: + +> LIFE IS EVENTFUL. THAT’S WHY WE HELP + +--- + +No full stops on the end for: + +- CTA buttons or standalone text links +- URLs +- Email addresses + +For example: + +> **Download now** +> +> **\>** Learn more about the Westpac App +> +> westpac.com.au/westpacapp +> +> brand@westpac.com.au + +--- + +Don’t use full stops on the end of bullet points unless each is relatively lengthy. + +For example: + +> How to apply for a loan: +> +> - Online +> - Branch +> - Phone diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Hyphens and em - dashes/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Hyphens and em - dashes/content.mdoc new file mode 100644 index 000000000..e89eb7b99 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Hyphens and em - dashes/content.mdoc @@ -0,0 +1,37 @@ +Hyphens are used to join words to indicate that they have a combined meaning (such as compound adjectives), or that they’re linked in the grammar of a sentence. + +For example: + +> Up-to-date +> +> Interest-free +> +> Long-term + +_Note: No space on either side of the hyphen._ + +For example: + +> Connect to a third party using a third-party connection + +_Note: ‘third party’ is a noun so it has no hyphen, while ‘third-party’ is a compound adjective so it has a hyphen._ + +--- + +Use em dashes to add extra information or use instead of commas. + +For example: + +> Updating your contact details in Online Banking and the Westpac App is quick and easy – no need to wait in line or call us. + +> It’s good to know you have money set aside to help cope with what life – or business conditions – might throw at you. + +_Note: Don’t use colons and ensure there are spaces on both sides of the em dash._ + +--- + +No hyphen on ‘e’ (electronic) words. + +For example: + +> eStatements, ecommerce, email diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Per cent [%]/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Per cent [%]/content.mdoc new file mode 100644 index 000000000..6e33bece5 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Per cent [%]/content.mdoc @@ -0,0 +1,5 @@ +Use the symbol instead of the word. + +For example: + +> 1.99% p.a. fixed rate diff --git "a/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Quatation marks [\"]/content.mdoc" "b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Quatation marks [\"]/content.mdoc" new file mode 100644 index 000000000..a1389a1a5 --- /dev/null +++ "b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Quatation marks [\"]/content.mdoc" @@ -0,0 +1,9 @@ +Double quotation marks are used to mark speech. Single quotation marks (inverted commas) are used for descriptions. + +For example: + +> Westpac Group CEO, Peter King, said “I’m proud to launch our latest Access and Inclusion Plan today.” +> +> For more information, download our ‘First Home Buyers Guide’. +> +> Search ‘Westpac Choice’ diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Question mark [?]/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Question mark [?]/content.mdoc new file mode 100644 index 000000000..7452f9e7b --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Question mark [?]/content.mdoc @@ -0,0 +1,7 @@ +Engages customers and can help shorten headlines + +For example: + +> WANT $3K CASHBACK? +> +> Switch your home loan to Westpac. diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Semi colons [;]/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Semi colons [;]/content.mdoc new file mode 100644 index 000000000..2318de780 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/punctuation-&-symbol/design/Semi colons [;]/content.mdoc @@ -0,0 +1,7 @@ +Used to separate two sentences that are closely related but could also stand on their own. + +For example: + +> Choose Business One Low if you mainly bank online; and pay no monthly fee for the first year. + +_Note: Often used to break up complex sentences that have multiple messages – typically used in legal-led comms._ diff --git a/apps/site/src/content/design-system/content/writing-for-digital/design/Principles/content.mdoc b/apps/site/src/content/design-system/content/writing-for-digital/design/Principles/content.mdoc new file mode 100644 index 000000000..328757b02 --- /dev/null +++ b/apps/site/src/content/design-system/content/writing-for-digital/design/Principles/content.mdoc @@ -0,0 +1,13 @@ +Our writing principles guide the way we solve customer problems and make decisions across the Westpac brands. You should also follow the Westpac Tone of Voice guidelines. + +**Helpful** + +We create content that enables customers to get their banking done efficiently and effectively. + +**Simple** + +We help customers understand our offering and its implications, giving them control over their finances and personal data. + +**Accessible and inclusive** + +We write in a way that promotes empathy, understanding and acceptance of diverse backgrounds so that every customer can interact with ease. diff --git a/apps/site/src/content/design-system/content/writing-for-digital/design/Why our words matter/content.mdoc b/apps/site/src/content/design-system/content/writing-for-digital/design/Why our words matter/content.mdoc new file mode 100644 index 000000000..9bb888e06 --- /dev/null +++ b/apps/site/src/content/design-system/content/writing-for-digital/design/Why our words matter/content.mdoc @@ -0,0 +1,7 @@ +The designs and words that customers see are inseparable. Together, they help us build and maintain a connection with customers. + +These guidelines aim to help us write in a way that helps our customers successfully complete their task online in the quickest and simplest way possible. + +### These guidelines will change + +Customers’ needs evolve, so these guidelines will change to keep up with those requirements.Often, we won’t get things right the first time, but we can get better after each iteration. diff --git a/apps/site/src/content/design-system/content/writing-for-digital/design/Writing tips/content.mdoc b/apps/site/src/content/design-system/content/writing-for-digital/design/Writing tips/content.mdoc new file mode 100644 index 000000000..bcdd763a1 --- /dev/null +++ b/apps/site/src/content/design-system/content/writing-for-digital/design/Writing tips/content.mdoc @@ -0,0 +1,183 @@ +### Use simple words + +Create content that all customers can understand, regardless of their ability, level of literacy, expertise, gender, age group or cultural background. + +For example: + +> Do: get, start +> +> Don't: acquire, commence + +Consider your audience when using words like ‘very’, ‘really’, ‘highly’ or ‘simply’, as each person’s perception or ability to complete a task may be different. + +For example: + +> Do: It’s easy to manage your savings goals. +> +> Don’t: It’s really easy to manage your savings goals. +> +> Don’t: Simply scan your bill and we’ll do the rest. + +Avoid industry jargon, complex language or [abbreviations](/design-system/content/abbreviations) that aren’t commonly used. If it’s necessary to use any of these, consider including an explanation. + +Don't use slang to shorten words. + +For example: + +> Do: afternoon +> +> Don't: arvo + +--- + +### Keep it brief + +Every word should serve a purpose. If it doesn’t, remove it. See how many words you can omit without losing your key message or meaning. Read it out loud to check if it sounds right. + +For example: + +> Do: You're connected +> +> Don't: The connection has been established successfully + +Include only one idea per sentence. + +Use short headings and visual cues to help with context, scanning and memory. + +Sometimes, a longer message may be helpful, for example, when there’s an extended wait and we want to give the customer an idea of what’s happening. + +For example: + +> Do: We’re getting things ready for you +> +> Don't: Please wait + +--- + +### Provide context + +Consider clarifying questions when sharing information to help a customer accomplish their task. + +For example: + +> **Who**’s the customer? +> +> **What** can we do to help them? +> +> **Why** do they need the information? +> +> **When** will they know the outcome? +> +> **Where** do they need to go to resolve the issue? +> +> **How** can we prevent the issue from recurring? + +For example: + +![Two mobile screens showing examples of how to provide context for the next steps required of the user.](https://res.cloudinary.com/westpac-gel/image/upload/v1667893974/cla7x09o6001df58if3zg4kxp.png) + +Ensure you provide clear direction and context + +Don’t assume that a customer knows what to do. If a customer can’t do something with your message, you may like to rethink why you’re saying it. + +Only include what the customer needs to know. For example, questions about a customer’s tax residency and foreign tax identification number are displayed only after a customer indicates that they are a tax resident in a country other than Australia. + +For example: + +![Two mobile screens showing two different states of a question flow. The first screen hiding further questions based on a previous answer, the second displaying them.](https://res.cloudinary.com/westpac-gel/image/upload/v1667962659/cla91wg22001kf58idlvq7efj.png) + +Only show what the customer needs to know + +--- + +### Use conversational language + +Consider how you would explain something you want a customer to experience to a friend or family member. + +For example: + +> Do: Secure your account with 2-step authentication +> +> Don’t: 2-step authentication + +Use words like ‘you’, ‘we’ and ‘us’. + +Use the first person when a customer is making a statement or choice. Avoid referring to the customer in both the second person and first person in the same sentence. + +For example: + +> Do: I agree to the terms and conditions +> +> Do: No, I don’t want to be contacted +> +> Don’t: Change your preferences in **My Account**. + +Rather than provide information to the customer, consider asking them questions to help make a conversation flow. + +For example: + +> How would you like to pay? + +--- + +### Use active voice + +For example: + +> Do: We’re investigating the issue +> +> Don’t: The problem is being investigated + +An exception to this is where we’ll end up blaming the customer. + +For example: + +> Do: The password is incorrect +> +> Don’t: You’ve entered an incorrect password + +--- + +### Ensure consistency + +Be consistent in the use of a term or the way of expressing information throughout a customer journey. + +For example: + +> Don’t: Using ‘sign in’ and ‘log on’ interchangeably for the same brand. + +Refer to our brand terminology for more information. + +--- + +### Focus on the benefits, not the feature + +For example: + +> Do: +> +> **Safe, secure & for your eyes only** +> +> Lower your risk of identity theft by receiving your statements in the Westpac App or Online Banking. + +> Don’t: +> +> **Switch to eStatements** +> +> Select eStatement in your personal profile. + +--- + +### Don’t use double negatives + +For example: + +> Don’t: I don’t want to unsubscribe + +![Mobile screen showing a clear call-to-action label that does not use a double negative.](https://res.cloudinary.com/westpac-gel/image/upload/v1670300581/clbbpu83p0001bn8igu6e5yj1.png) + +Do - Use clear call to action labels + +![Mobile screen showing a confusing call-to-action label that does use a double negative.](https://res.cloudinary.com/westpac-gel/image/upload/v1670300587/clbbpud7x0002bn8i2m1mbnul.png) + +Avoid - Using double negative labels diff --git a/apps/site/src/content/design-system/content/writing-for-digital/index.yaml b/apps/site/src/content/design-system/content/writing-for-digital/index.yaml new file mode 100644 index 000000000..ff7ae510b --- /dev/null +++ b/apps/site/src/content/design-system/content/writing-for-digital/index.yaml @@ -0,0 +1,10 @@ +name: Writing for digital +description: >- + When writing for digital, we want our customers to easily understand our + messaging and successfully complete their task online in the quickest and + simplest way possible. +design: + - title: Why our words matter + - title: Principles + - title: Writing tips +accessibility: [] diff --git a/apps/site/src/content/design-system/development/get-started/design/Pre-requisites/content.mdoc b/apps/site/src/content/design-system/development/get-started/design/Pre-requisites/content.mdoc new file mode 100644 index 000000000..e24f2f32a --- /dev/null +++ b/apps/site/src/content/design-system/development/get-started/design/Pre-requisites/content.mdoc @@ -0,0 +1,7 @@ +All GEL components have a couple of peer dependencies so please ensure the following are installed: + +npm install react@^17.0.2 @react-spring/web@^9.2.4 + +npm install react@^17.0.2 @react\-spring/web@^9.2.4 + +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } diff --git a/apps/site/src/content/design-system/development/get-started/design/Quick setup/content.mdoc b/apps/site/src/content/design-system/development/get-started/design/Quick setup/content.mdoc new file mode 100644 index 000000000..41dc52106 --- /dev/null +++ b/apps/site/src/content/design-system/development/get-started/design/Quick setup/content.mdoc @@ -0,0 +1,31 @@ +To use the system we require you to install our core component. + +npm install @westpac/core + +npm install @westpac/core + +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } + +In order to provide brand theme context to the components we require you to wrap your React application with our component which is exported from @westpac/core. It is at this level where you need to pass a brand package to the wrapper to style your application based on the brand you are supporting. + +import { GEL } from '@westpac/core'; import wbc from '@westpac/wbc'; function App() { return ( ) } + +import { GEL } from '@westpac/core'; + +import wbc from '@westpac/wbc'; + +function App() { + +return ( + + + + + + + +) + +} + +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } diff --git a/apps/site/src/content/design-system/development/get-started/design/Resources/content.mdoc b/apps/site/src/content/design-system/development/get-started/design/Resources/content.mdoc new file mode 100644 index 000000000..da9f79851 --- /dev/null +++ b/apps/site/src/content/design-system/development/get-started/design/Resources/content.mdoc @@ -0,0 +1,5 @@ +All our components can be found on [npm](https://www.npmjs.com/search?q=%40westpac) under the @westpac/ prefix. + +Please raise any issues on the [Github](https://github.com/WestpacGEL/GEL) repo. + +We use the css-in-js library emotion to style our components. Visit the [emotion docs](https://emotion.sh/docs/introduction) to learn more about installation and usage. diff --git a/apps/site/src/content/design-system/development/get-started/index.yaml b/apps/site/src/content/design-system/development/get-started/index.yaml new file mode 100644 index 000000000..9965d4c6a --- /dev/null +++ b/apps/site/src/content/design-system/development/get-started/index.yaml @@ -0,0 +1,9 @@ +name: Get started +description: >- + The GEL design system is built using React. Use it to easily build new React + applications, as well as add to existing ones. +design: + - title: Pre-requisites + - title: Quick setup + - title: Resources +accessibility: [] diff --git a/apps/site/src/content/design-system/development/guides/brand/design/undefined/content.mdoc b/apps/site/src/content/design-system/development/guides/brand/design/undefined/content.mdoc new file mode 100644 index 000000000..d68bb73a8 --- /dev/null +++ b/apps/site/src/content/design-system/development/guides/brand/design/undefined/content.mdoc @@ -0,0 +1,23 @@ +These brand packages can be found on npm with the @westpac/ prefix plus the brand code i.e. wbc, stg etc. To use, import the brands you require and pass to the wrapper component, this will add a brand context to the components and your application. + +Each brand package provides the following: + +brand = { BRAND: 'Brand details i.e. code and name' COLORS: 'Brand colors as well as tint variations for each' LAYOUT: 'Breakpoints' PACKS: 'Brand and body font typescales as well as some other font styling' SPACING: 'Major and minor spacing helper function' TYPE: 'Brand and bodyfont styles' } + +brand \= { + +BRAND: 'Brand details i.e. code and name' + +COLORS: 'Brand colors as well as tint variations for each' + +LAYOUT: 'Breakpoints' + +PACKS: 'Brand and body font typescales as well as some other font styling' + +SPACING: 'Major and minor spacing helper function' + +TYPE: 'Brand and bodyfont styles' + +} + +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } diff --git a/apps/site/src/content/design-system/development/guides/brand/design/useBrand/content.mdoc b/apps/site/src/content/design-system/development/guides/brand/design/useBrand/content.mdoc new file mode 100644 index 000000000..0088f5bd6 --- /dev/null +++ b/apps/site/src/content/design-system/development/guides/brand/design/useBrand/content.mdoc @@ -0,0 +1,13 @@ +To easily access these brand variables within your application, we have created a useBrand() hook. + +\# Example usage import { useBrand } from '@westpac/core'; const { COLORS } = useBrand(); const Component = (props) =>
+ +\# Example usage + +import { useBrand } from '@westpac/core'; + +const { COLORS } \= useBrand(); + +const Component \= (props) \=>
+ +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } diff --git a/apps/site/src/content/design-system/development/guides/brand/index.yaml b/apps/site/src/content/design-system/development/guides/brand/index.yaml new file mode 100644 index 000000000..77efd0d5a --- /dev/null +++ b/apps/site/src/content/design-system/development/guides/brand/index.yaml @@ -0,0 +1,8 @@ +name: Brand +description: >- + In order to allow for the most flexibility when theming your application, we + have published a package for each of the Westpac Group's brands. +design: + - {} + - title: useBrand +accessibility: [] diff --git a/apps/site/src/content/design-system/development/guides/override/design/How overrides work/content.mdoc b/apps/site/src/content/design-system/development/guides/override/design/How overrides work/content.mdoc new file mode 100644 index 000000000..d7b1506b0 --- /dev/null +++ b/apps/site/src/content/design-system/development/guides/override/design/How overrides work/content.mdoc @@ -0,0 +1,27 @@ +Overrides work by giving you access to a subcomponent and allows you to override any of the 3 parts of its structure. GEL allows for multiple ways to introduce overrides to a component all of which use the same override API. + +### Top level API + +GEL overrides always take the form of an object, mapping the 3 parts of a subcomponent with a corresponding function. + +overrides = { \[subcomponent\]: { styles: (styles, props) => {}, attributes: (attributes, props) => {}, component: (props) => {} } } + +overrides \= { + +\[subcomponent\]: { + + styles: (styles, props) \=> {}, + + attributes: (attributes, props) \=> {}, + + component: (props) \=> {} + +} + +} + +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } + +As part of override reconciliation that is handled by the top level component, each of these functions will be passed the props that the default subcomponent needs to work. Styles and attributes also receive the current default styles and attributes for that subcomponent allowing for you to reuse and modify, or for you to disregard them and use completely new styles and attributes. + +Another useful thing we pass to components as part of props is a 'state' object. The 'state' object contains all the props passed and any internal state used at the top-most level of the component. diff --git a/apps/site/src/content/design-system/development/guides/override/design/Override order/content.mdoc b/apps/site/src/content/design-system/development/guides/override/design/Override order/content.mdoc new file mode 100644 index 000000000..0ade5517a --- /dev/null +++ b/apps/site/src/content/design-system/development/guides/override/design/Override order/content.mdoc @@ -0,0 +1,63 @@ +The override system contains different levels where you can introduce overrides to a component. The levels you can introduce an override are: + +- token: overrides coming from the theme/brand package +- brand: overrides coming from the \`brand\` prop on the '' wrapper +- component: overrides coming from the component \`override\` prop + +An application is able to introduce overrides at different levels and our components will perform a reconciliation and merge on all the overrides passed to it with the following specificity order (from lowest to highest): + +token -> brand -> component + +### Component overrides + +All GEL components take an \`override\` prop which is an object mapping of subcomponents and their overrides. + +Loading... + +### Brand overrides + +The GEL design system also allows for overrides at a brand level. This way you can specify an override once and all instances of the component within the GEL wrapper will use this override. To override at a brand level, add a key with the GEL component package name with an override value within the brand object. + +import wbc from '@westpac/wbc'; const brand = { ...wbc }; brand\['@westpac/switch'\] = { Label: { styles: (styles) => ({ ...styles, color: 'indigo', paddingRight: '2rem', }), }, Toggle: { styles: (styles, { checked }) => ({ ...styles, borderColor: 'indigo', backgroundColor: checked ? 'darkmagenta' : 'white', }), }, }; + +import wbc from '@westpac/wbc'; + +const brand \= { ...wbc }; + +brand\['@westpac/switch'\] \= { + + Label: { + + styles: (styles) \=> ({ + + ...styles, + + color: 'indigo', + + paddingRight: '2rem', + + }), + + }, + + Toggle: { + + styles: (styles, { checked }) \=> ({ + + ...styles, + + borderColor: 'indigo', + + backgroundColor: checked ? 'darkmagenta' : 'white', + + }), + + }, + + }; + +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } + +### Token overrides + +As we are a multi-brand design system, we allow for each of the brands to have brand specific styling in their components. The GEL team handles this by adding them directly into the brand package that is used by applications. These overrides are not able to be directly accessed by developers as they are in the brand package but developers are able to override them by introducing their own overrides at a higher specificity level. diff --git a/apps/site/src/content/design-system/development/guides/override/design/Structure/content.mdoc b/apps/site/src/content/design-system/development/guides/override/design/Structure/content.mdoc new file mode 100644 index 000000000..a5fc841a6 --- /dev/null +++ b/apps/site/src/content/design-system/development/guides/override/design/Structure/content.mdoc @@ -0,0 +1,31 @@ +All subcomponents are structured in the same way and are comprised of three main parts: + +**Component** + +The react component that will be rendered. + +const Component = (props) =>
+ +const Component \= (props) \=>
+ +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } + +**Styles** + +The css styles that are applied. Note: We use [emotion](https://emotion.sh/docs/introduction) style objects in our components. + +const styles = () => ({ backgroundColor: '#d5002b', color: '#fff' }) + +const styles \= () \=> ({ backgroundColor: '#d5002b', color: '#fff' }) + +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } + +**Attributes** + +Properties that are spread over the component. + +const attributes = () => ({'aria-label': 'label', 'data-js': 'attribute'}) + +const attributes \= () \=> ({'aria-label': 'label', 'data-js': 'attribute'}) + +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } diff --git a/apps/site/src/content/design-system/development/guides/override/design/Subcomponents/content.mdoc b/apps/site/src/content/design-system/development/guides/override/design/Subcomponents/content.mdoc new file mode 100644 index 000000000..a153138b4 --- /dev/null +++ b/apps/site/src/content/design-system/development/guides/override/design/Subcomponents/content.mdoc @@ -0,0 +1,7 @@ +Overrides should be used sparingly as the components in the system have been designed to work across multiple touch points and changing too much of a component can lead to an inconsistent experience for users. + +GEL components are typically composed of many different **subcomponents**. Let's take a look at the \`@westpac/switch\` as an example: + +Loading... + +The usage of the component is pretty straight forward with a single self contained import, but under the hood there are multiple **subcomponents** such as \`Switch\`, \`Toggle\` & \`Label\` with various styles and attributes that compose the \`@westpac/switch\` component. The component developer docs list all the subcomponents that make up a component. diff --git a/apps/site/src/content/design-system/development/guides/override/index.yaml b/apps/site/src/content/design-system/development/guides/override/index.yaml new file mode 100644 index 000000000..a0363ddc0 --- /dev/null +++ b/apps/site/src/content/design-system/development/guides/override/index.yaml @@ -0,0 +1,11 @@ +name: Override +description: >- + As part of the Westpac GEL design system we have introduced an override system + that allows developers to customise different parts of a component for their + development needs. +design: + - title: Subcomponents + - title: Structure + - title: How overrides work + - title: Override order +accessibility: [] diff --git a/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Auto-address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Auto-address/content.mdoc new file mode 100644 index 000000000..e5192a884 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Auto-address/content.mdoc @@ -0,0 +1,15 @@ +### Base pattern + +The auto address pattern uses auto-complete functionality requiring less input effort (lower interaction cost) from users, while validating the address at the same time. This is available in our core forms development platform. + +_This pattern uses an auto-complete component that is currently being tested and amended to ensure up to date WCAG 2.1 AA accessibility compliance. This work should be completed in the new year, 2022. All other aspects of this pattern are compliant._ + +Loading... + +### Usage examples + +This example shows the base pattern used with additional questions when further details are required; Mailing address. + +To capture a different mailing address, use a text label with a button group to answer the question 'Do you have a different mailing address' with a yes or no. Depending on your project requirements you can serve either an Auto address, Manual address, Manual complex address, or International address. This should alway follow directly after the Home address. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Dos and don'ts/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Dos and don'ts/content.mdoc new file mode 100644 index 000000000..32fd49bb7 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Dos and don'ts/content.mdoc @@ -0,0 +1 @@ +- Do not remove the hint text or manual input option above the field as this is important discoverable functionality for assistive technologies and those with a disability. diff --git a/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Error states/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Error states/content.mdoc new file mode 100644 index 000000000..aceab15d4 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Error states/content.mdoc @@ -0,0 +1,3 @@ +The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Pattern examples in code/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Pattern examples in code/content.mdoc new file mode 100644 index 000000000..d686a3f1d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/Pattern examples in code/content.mdoc @@ -0,0 +1,3 @@ +### Base pattern + +Loading... diff --git a/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/User experience/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/User experience/content.mdoc new file mode 100644 index 000000000..9e9fbe5b5 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/auto-addres/design/User experience/content.mdoc @@ -0,0 +1,14 @@ +Communication around user expectations for this pattern is very important: + +- The label 'Search for your address' should manage expectations about what is about to happen. Often users can type much faster than the search functionality can react, and may have tabbed out of the field before the correct address has been selected. Using 'Search' in the label gives a clue as to how the interaction works. +- The default hint text ‘Not a PO Box’ is used to communicate that PO Boxes are not accepted making it clear to customers what type of address can constitute a home address. +- Some addresses can be difficult to find using auto-complete or may not be found on the database. There may also be instances whereby there are service interruptions. Screen reader users, and those with cognitive challenges may also struggle. For these reasons the ability to enter manually is important. +- The text field is keep reasonably long to accomodate lengthy addresses + +### Enter your address manually + +There is a fall-back option for users to add their address manually, it’s important to provide users with options to complete their task in ways that they know or feel comfortable with. By surfacing those options up front and not hiding them within a drop down, we are making the option discoverable and inclusive as well as assisting those with a disability to find the alternate method. Hiding within the autocomplete dropdown isn't discoverable for screen reader users. + +### Mailing address + +Once the primary address is completed, users have the option to add a mailing address. By default, the button group selection for 'Do you have a different mailing address?' is left unselected, this ensures a conscious answer is provided. If users select ‘Yes’, the same auto-complete with option for manual entry appears for them to provide the additional mailing address - which obviously can be a PO Box. diff --git a/apps/site/src/content/design-system/patterns/addresses/auto-addres/index.yaml b/apps/site/src/content/design-system/patterns/addresses/auto-addres/index.yaml new file mode 100644 index 000000000..13556e25d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/auto-addres/index.yaml @@ -0,0 +1,9 @@ +name: Auto-addres +description: Use auto-address to capture addresses quickly and with more accuracy. +design: + - title: Auto-address + - title: Error states + - title: User experience + - title: Dos and don'ts + - title: Pattern examples in code +accessibility: [] diff --git a/apps/site/src/content/design-system/patterns/addresses/complex-addres/design/Complex address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/complex-addres/design/Complex address/content.mdoc new file mode 100644 index 000000000..7b060f408 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/complex-addres/design/Complex address/content.mdoc @@ -0,0 +1,5 @@ +### Base pattern + +The Complex manual address pattern was born out of a platform requirement to facilitate the capture of multiple property types. By answering the property type question, users can then be served the correct corresponding fields. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/addresses/complex-addres/design/Pattern examples in code/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/complex-addres/design/Pattern examples in code/content.mdoc new file mode 100644 index 000000000..d686a3f1d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/complex-addres/design/Pattern examples in code/content.mdoc @@ -0,0 +1,3 @@ +### Base pattern + +Loading... diff --git a/apps/site/src/content/design-system/patterns/addresses/complex-addres/index.yaml b/apps/site/src/content/design-system/patterns/addresses/complex-addres/index.yaml new file mode 100644 index 000000000..742f1aed2 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/complex-addres/index.yaml @@ -0,0 +1,8 @@ +name: Complex addres +description: >- + Use the complex address pattern when you need to allow for the accurate + capture of multiple property types. +design: + - title: Complex address + - title: Pattern examples in code +accessibility: [] diff --git a/apps/site/src/content/design-system/patterns/addresses/international-addres/design/Error states/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/international-addres/design/Error states/content.mdoc new file mode 100644 index 000000000..aceab15d4 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/international-addres/design/Error states/content.mdoc @@ -0,0 +1,3 @@ +The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/addresses/international-addres/design/International address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/international-addres/design/International address/content.mdoc new file mode 100644 index 000000000..4cebad92f --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/international-addres/design/International address/content.mdoc @@ -0,0 +1,7 @@ +### Base pattern + +Many countries have different formats for entering addresses making it difficult to facilitate and maintain. By being as open and flexible as possible with field entry we are giving users the best chance possible of entering the information required. + +Loading... + +_This pattern uses an auto-complete component that is currently being tested and amended to ensure up to date WCAG 2.1 AA accessibility compliance. This work should be completed in the new year, 2022. All other aspects of this pattern are compliant._ diff --git a/apps/site/src/content/design-system/patterns/addresses/international-addres/design/Pattern examples in code/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/international-addres/design/Pattern examples in code/content.mdoc new file mode 100644 index 000000000..d686a3f1d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/international-addres/design/Pattern examples in code/content.mdoc @@ -0,0 +1,3 @@ +### Base pattern + +Loading... diff --git a/apps/site/src/content/design-system/patterns/addresses/international-addres/design/User experience/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/international-addres/design/User experience/content.mdoc new file mode 100644 index 000000000..c37b5235d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/international-addres/design/User experience/content.mdoc @@ -0,0 +1,7 @@ +When trying to accommodate very broad data sets, you can end up with very long lists of items to choose from. One way this pattern tries to assist users when entering this data is by providing an auto-complete for country selection, this saves them from having to scroll or swipe through a long list of countries. + +### Selects + +Auto-complete is not always technically possible, in these situation using selects can provide more accurate results but can also be unwieldy on mobile, and difficult for those with motor or cognitive deficiencies. It is best practise not to use select boxes with lengthy data sets as forcing users to scroll through long lists of data to find their country can be frustrating. + +One way of limiting the issue of a long list is to show the most common responses at the top (in this case it’s countries) so the majority of your audience doesn’t need to scroll. diff --git a/apps/site/src/content/design-system/patterns/addresses/international-addres/index.yaml b/apps/site/src/content/design-system/patterns/addresses/international-addres/index.yaml new file mode 100644 index 000000000..f492ecc79 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/international-addres/index.yaml @@ -0,0 +1,10 @@ +name: International addres +description: >- + Use this flexible address pattern for capturing addresses in multiple + international formats. +design: + - title: International address + - title: Error states + - title: User experience + - title: Pattern examples in code +accessibility: [] diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Error states/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Error states/content.mdoc new file mode 100644 index 000000000..aceab15d4 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Error states/content.mdoc @@ -0,0 +1,3 @@ +The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Manual address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Manual address/content.mdoc new file mode 100644 index 000000000..8b7b3617d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Manual address/content.mdoc @@ -0,0 +1,13 @@ +### Base pattern + +This pattern simplifies address capture to the most basic elements, without the need for extra functionality. It can be used on it own or within other more complex patterns eg as the manual entry option for [Auto-address](/design-system/patterns/address/auto-address). + +Loading... + +### Usage examples + +This example shows the base pattern used with additional questions when further details are required; Mailing address. + +To capture a different mailing address, use a text label with a button group to answer the question 'Do you have a different mailing address' with a yes or no. Depending on your project requirements you can serve either an Auto address, Manual address, Manual complex address, or International address. This should alway follow directly after the Home address. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Pattern examples in code/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Pattern examples in code/content.mdoc new file mode 100644 index 000000000..d686a3f1d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/manual-addres/design/Pattern examples in code/content.mdoc @@ -0,0 +1,3 @@ +### Base pattern + +Loading... diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-addres/index.yaml b/apps/site/src/content/design-system/patterns/addresses/manual-addres/index.yaml new file mode 100644 index 000000000..1307be465 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/addresses/manual-addres/index.yaml @@ -0,0 +1,9 @@ +name: Manual addres +description: >- + Use the manual address pattern when auto-address is not available, has not + succeeded or has been chosen by the user. +design: + - title: Manual address + - title: Error states + - title: Pattern examples in code +accessibility: [] diff --git a/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Date of birth/content.mdoc b/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Date of birth/content.mdoc new file mode 100644 index 000000000..c9636e0c9 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Date of birth/content.mdoc @@ -0,0 +1,5 @@ +### Base pattern + +This pattern is defined as a ‘memorable date’, of which users will know the answer. Using hint text helps the user to understand the format, while the three separate boxes with Day, Month, Year labels removes ambiguity about which comes first, day or month. They also serve an important part in helping assistive technologies recognise and distinguish all three. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Dos and don'ts/content.mdoc b/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Dos and don'ts/content.mdoc new file mode 100644 index 000000000..e6aa4e2ba --- /dev/null +++ b/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Dos and don'ts/content.mdoc @@ -0,0 +1,2 @@ +- Do ensure field lengths match the expected length of the data to be captured. +- Do not remove the hint text above the field or sub labels as this is important discoverable functionality for usability, assistive technologies, and persons with a disability. diff --git a/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Error states/content.mdoc b/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Error states/content.mdoc new file mode 100644 index 000000000..890331d78 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Error states/content.mdoc @@ -0,0 +1,7 @@ +The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change. + +The Date of birth pattern can isolate which field carries the error and highlight accordingly. + +If more than one field has an error, the errors stack in a group under the hint text as each input field (Day, Month, Year) is in a group. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Pattern examples in code/content.mdoc b/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Pattern examples in code/content.mdoc new file mode 100644 index 000000000..d686a3f1d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/Pattern examples in code/content.mdoc @@ -0,0 +1,3 @@ +### Base pattern + +Loading... diff --git a/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/User experience/content.mdoc b/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/User experience/content.mdoc new file mode 100644 index 000000000..2f5e9a586 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/dates/date-of-birth/design/User experience/content.mdoc @@ -0,0 +1,15 @@ +### Why not select boxes? + +Swiping on mobile through long lists of numbers requires more effort, as does the time it takes on desktop to click, scroll, and select x 3. + +The necessity to move between keyboard and mouse rather than continuing with input fields means progress is slowed and more difficult for those with poor motor skills. + +The ‘tab to next field’ control is a standard practise for persons with a disability. + +### Why not one field? + +One field can be prone to errors as users need to adhere to a format which usually requires dashes or slashes, and spaces or no spaces, requiring more cognitive effort to complete as the user needs to check and match the system exactly, as well as generating more rules around handling errors. + +### Why not auto focus on the next field? + +This is an accessibility issue as automatically moving the focus from one field to another contradicts assistive technologies which use the tab button to focus on a field, as well as taking away control from user.expiry dates. diff --git a/apps/site/src/content/design-system/patterns/dates/date-of-birth/index.yaml b/apps/site/src/content/design-system/patterns/dates/date-of-birth/index.yaml new file mode 100644 index 000000000..42c8d60b1 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/dates/date-of-birth/index.yaml @@ -0,0 +1,11 @@ +name: Date of birth +description: >- + A unique date pattern for capturing birthdays, memorable dates that are easily + recalled and entered without the need for select elements. +design: + - title: Date of birth + - title: Error states + - title: User experience + - title: Dos and don'ts + - title: Pattern examples in code +accessibility: [] diff --git a/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Dos and don'ts/content.mdoc b/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Dos and don'ts/content.mdoc new file mode 100644 index 000000000..7ed20f58b --- /dev/null +++ b/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Dos and don'ts/content.mdoc @@ -0,0 +1,2 @@ +- Do ensure field lengths match the expected length of the data to be captured. +- Do not remove the hint text or the sub label text above the field as this is important discoverable functionality for usability, assistive technologies, and persons with a disability. diff --git a/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Error states/content.mdoc b/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Error states/content.mdoc new file mode 100644 index 000000000..9cc5c4271 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Error states/content.mdoc @@ -0,0 +1,11 @@ +The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change. + +The Expiry date pattern can isolate which field carries the error and highlight accordingly. + +### Text inputs with errors + +Loading... + +### Selects with errors + +Loading... diff --git a/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Expiry date/content.mdoc b/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Expiry date/content.mdoc new file mode 100644 index 000000000..ff67aa3cf --- /dev/null +++ b/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Expiry date/content.mdoc @@ -0,0 +1,17 @@ +### Base pattern + +This pattern gives clear instructions regarding format with an easily understood input field. Keyboard entry is a fast and accessible way of capturing information. + +Use this pattern when there are large data sets so users are not required to scroll or swipe endlessly. + +This pattern exists as a [widget in the WDP system](https://one.dev1.ui.westpac.com.au/react/gel/docs/6.17.4/index.html?path=/story/widgets-expirydate--basic). + +Loading... + +### Date range + +When databases have short and defined ranges, using select boxes can assist in matching real world card details and reduce errors. For example, a credit card will ask for an expiry date including month (12 options) and typically not have a yearly range beyond 6. This means users will not have the challenges of swiping through large sets of data. + +This pattern exists as a [widget in the WDP system](https://one.dev1.ui.westpac.com.au/react/gel/docs/6.17.4/index.html?path=/story/widgets-expirydate--range). + +Loading... diff --git a/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Pattern examples in code/content.mdoc b/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Pattern examples in code/content.mdoc new file mode 100644 index 000000000..cff0d0dcd --- /dev/null +++ b/apps/site/src/content/design-system/patterns/dates/expiry-date/design/Pattern examples in code/content.mdoc @@ -0,0 +1,7 @@ +### Base pattern + +Loading... + +### Range + +Loading... diff --git a/apps/site/src/content/design-system/patterns/dates/expiry-date/index.yaml b/apps/site/src/content/design-system/patterns/dates/expiry-date/index.yaml new file mode 100644 index 000000000..da90cf254 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/dates/expiry-date/index.yaml @@ -0,0 +1,10 @@ +name: Expiry date +description: >- + This pattern is used for capturing a date that requires month and year only, + and is most commonly used for expiry dates. +design: + - title: Expiry date + - title: Error states + - title: Dos and don'ts + - title: Pattern examples in code +accessibility: [] diff --git a/apps/site/src/content/design-system/patterns/personal-details/email/design/Dos and don'ts/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/email/design/Dos and don'ts/content.mdoc new file mode 100644 index 000000000..f6b32133b --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/email/design/Dos and don'ts/content.mdoc @@ -0,0 +1 @@ +- Do use the Email with confirm pattern if email communication is critical to the success of the form. diff --git a/apps/site/src/content/design-system/patterns/personal-details/email/design/Email/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/email/design/Email/content.mdoc new file mode 100644 index 000000000..df820f37f --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/email/design/Email/content.mdoc @@ -0,0 +1,11 @@ +### Base pattern + +This is email capture at its simplest with the hint text doing some of the work in order to ensure the user inputs their correct details. This base pattern can be used with additional fields and questions for specific use cases, ie when asking the user to update their details within our secure environment, you may need to allow them to add multiple email addresses. + +Loading... + +### Usage example + +If email communication is critical to the success of the form, requiring the user to confirm their details, may yield better results by managing mistakes - despite the higher level of user effort required to input their email address twice. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/email/design/Error states/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/email/design/Error states/content.mdoc new file mode 100644 index 000000000..bf04433aa --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/email/design/Error states/content.mdoc @@ -0,0 +1,9 @@ +The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change. + +### Email with instructions error + +Loading... + +### Email with confirm error + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/email/design/Pattern examples in code/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/email/design/Pattern examples in code/content.mdoc new file mode 100644 index 000000000..d686a3f1d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/email/design/Pattern examples in code/content.mdoc @@ -0,0 +1,3 @@ +### Base pattern + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/email/index.yaml b/apps/site/src/content/design-system/patterns/personal-details/email/index.yaml new file mode 100644 index 000000000..e0e63b75b --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/email/index.yaml @@ -0,0 +1,10 @@ +name: Email +description: >- + This pattern is used for accurately capturing email addresses. As email is the + primary way we communicate with customers, it’s important to get this right. +design: + - title: Email + - title: Error states + - title: Dos and don'ts + - title: Pattern examples in code +accessibility: [] diff --git a/apps/site/src/content/design-system/patterns/personal-details/employment/design/Employment/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/employment/design/Employment/content.mdoc new file mode 100644 index 000000000..357078b8b --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/employment/design/Employment/content.mdoc @@ -0,0 +1,11 @@ +### Base pattern + +This is the pattern in its simplest form, additional fields and questions can be added for specific use cases, ie the details required for completing a credit card application (see usage example below), as opposed updating your information within the secure environment. + +Loading... + +### Usage example + +This example shows the base pattern used with additional questions when further details of employment are required; Employer name and duration. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/employment/design/Error states/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/employment/design/Error states/content.mdoc new file mode 100644 index 000000000..aceab15d4 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/employment/design/Error states/content.mdoc @@ -0,0 +1,3 @@ +The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/employment/design/Pattern examples in code/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/employment/design/Pattern examples in code/content.mdoc new file mode 100644 index 000000000..d686a3f1d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/employment/design/Pattern examples in code/content.mdoc @@ -0,0 +1,3 @@ +### Base pattern + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/employment/design/User experience/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/employment/design/User experience/content.mdoc new file mode 100644 index 000000000..6333723e8 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/employment/design/User experience/content.mdoc @@ -0,0 +1,5 @@ +### Limitations + +As credit score criteria is often based off existing external agency databases and data sets (most likely derived from ABS sources), this limits the amount of influence we can have in creating this pattern from a ‘best practise’ approach. + +In particular, the data sets provided for Occupation category and Occupation don’t marry up with modern interpretations of vocation with many increasingly common titles absent. diff --git a/apps/site/src/content/design-system/patterns/personal-details/employment/index.yaml b/apps/site/src/content/design-system/patterns/personal-details/employment/index.yaml new file mode 100644 index 000000000..2458a0b76 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/employment/index.yaml @@ -0,0 +1,10 @@ +name: Employment +description: >- + Use this pattern for capturing employment details, the structure of this data + is often dictated by systems outside of the bank. +design: + - title: Employment + - title: Error states + - title: User experience + - title: Pattern examples in code +accessibility: [] diff --git a/apps/site/src/content/design-system/patterns/personal-details/name/design/Error states/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/name/design/Error states/content.mdoc new file mode 100644 index 000000000..a74e3463f --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/name/design/Error states/content.mdoc @@ -0,0 +1,5 @@ +The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change. + +### Simple name with error + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/name/design/Full name/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/name/design/Full name/content.mdoc new file mode 100644 index 000000000..e831427f0 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/name/design/Full name/content.mdoc @@ -0,0 +1,15 @@ +### Base pattern + +This pattern is kept as simple as possible yet captures more data points than Simple name (see below) should business requirements call for more details. The labels _Given name_ and _Family name_ are used, as _First name_ and _Last name_ do not translate consistently across cultures. + +**Why not one field?** Arguments for inclusivity and user control may suggest just one field for name capture, however this poses some issues when it comes to parsing a name for a database (e.g Peter van den Elshout). More often than not these databases need to speak to external agencies which ask for specific data points for such tasks as ID verification for example, as well as aligning with other business criteria. + +**Title:** Only ask for a title if absolutely necessary. Gender, and how we identify ourselves is a personal topic so reasons for capture need to be clear. + +Loading... + +### Example usage + +This example shows the base pattern used with additional questions when further details are required; Any other name. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/name/design/Pattern examples in code/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/name/design/Pattern examples in code/content.mdoc new file mode 100644 index 000000000..d686a3f1d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/name/design/Pattern examples in code/content.mdoc @@ -0,0 +1,3 @@ +### Base pattern + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/name/design/Simple name/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/name/design/Simple name/content.mdoc new file mode 100644 index 000000000..9e02d5b2b --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/name/design/Simple name/content.mdoc @@ -0,0 +1,3 @@ +Sometimes we do not require user to provide full details, for example if they are only submitting en enquiry, this pattern is useful in these instances. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/name/index.yaml b/apps/site/src/content/design-system/patterns/personal-details/name/index.yaml new file mode 100644 index 000000000..64c0583ac --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/name/index.yaml @@ -0,0 +1,11 @@ +name: Name +description: >- + This pattern is used for accurately capturing name information. Catering for + the needs of a diverse society means that this pattern needs to be flexible + and inclusive. +design: + - title: Full name + - title: Simple name + - title: Error states + - title: Pattern examples in code +accessibility: [] diff --git a/apps/site/src/content/design-system/patterns/personal-details/phone/design/Dos and don'ts/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/phone/design/Dos and don'ts/content.mdoc new file mode 100644 index 000000000..24e676d18 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/phone/design/Dos and don'ts/content.mdoc @@ -0,0 +1,3 @@ +- Don't increase or decrease field lengths. +- For Simple phone numbers, don't separate a number into multiple fields. +- For Simple phone numbers, don't demand separated area codes or other specifics. diff --git a/apps/site/src/content/design-system/patterns/personal-details/phone/design/Error states/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/phone/design/Error states/content.mdoc new file mode 100644 index 000000000..5bcc0a37e --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/phone/design/Error states/content.mdoc @@ -0,0 +1,5 @@ +The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change. + +### Simple phone number with errors + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/phone/design/Pattern examples in code/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/phone/design/Pattern examples in code/content.mdoc new file mode 100644 index 000000000..d686a3f1d --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/phone/design/Pattern examples in code/content.mdoc @@ -0,0 +1,3 @@ +### Base pattern + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/phone/design/Phone number/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/phone/design/Phone number/content.mdoc new file mode 100644 index 000000000..1626a9a7e --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/phone/design/Phone number/content.mdoc @@ -0,0 +1,11 @@ +### Base pattern + +Keep the collection of simple phone numbers easy, use hint text to indicate when you require an area code to be included. When using within an application form, only capture the minimum information you require. This base pattern can be broken down to only ask for one or two of the numbers displayed, or used with additional fields and questions for specific use cases, ie when asking the user to update their details within our secure environment, you may need to allow them to add multiple phone numbers. + +Loading... + +### Usage example + +**International phone number:** Use this component only when it’s absolutely necessary to capture an international phone number, eg. in the scenario where it is required to deliver or service a product. The dropdown allows the user to select from a list of country codes, rather than have to know the date format required. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/phone/design/User experience/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/phone/design/User experience/content.mdoc new file mode 100644 index 000000000..6c1959b1a --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/phone/design/User experience/content.mdoc @@ -0,0 +1,7 @@ +In order to maximise data capture and keep your form lean, only select the phone number types necessary for compliance, and preferably only one such as mobile (keeping in mind not every customer will own a mobile phone). + +These components are purposefully kept simple to satisfy accessibility requirements as well as reduce complexity and ambiguity which comes with shoehorning multiple choices into one field. + +**Why not field masking?** Field masking separates numerical inputs according to a predetermined format to match the real world reference. While this is a good heuristic to abide by, in this instance it causes issues with assistive technologies making playback nonsensical, and thus should be avoided. + +**Use hint text** If there is a specific format required such as an area code, use hint text to communicate this. The back end systems should accept numbers with spaces or without spaces. diff --git a/apps/site/src/content/design-system/patterns/personal-details/phone/index.yaml b/apps/site/src/content/design-system/patterns/personal-details/phone/index.yaml new file mode 100644 index 000000000..c2c4d0a7a --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/phone/index.yaml @@ -0,0 +1,11 @@ +name: Phone +description: >- + This pattern is used for accurately capturing phone numbers. Only capture what + you need for your application. +design: + - title: Phone number + - title: Error states + - title: User experience + - title: Dos and don'ts + - title: Pattern examples in code +accessibility: [] diff --git a/apps/site/src/content/design-system/patterns/tax-file-number/design/Error states/content.mdoc b/apps/site/src/content/design-system/patterns/tax-file-number/design/Error states/content.mdoc new file mode 100644 index 000000000..aceab15d4 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/tax-file-number/design/Error states/content.mdoc @@ -0,0 +1,3 @@ +The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/tax-file-number/design/Pattern examples in code/content.mdoc b/apps/site/src/content/design-system/patterns/tax-file-number/design/Pattern examples in code/content.mdoc new file mode 100644 index 000000000..4cdac6dc2 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/tax-file-number/design/Pattern examples in code/content.mdoc @@ -0,0 +1,7 @@ +### Base pattern + +Loading... + +### Previously provided + +Loading... diff --git a/apps/site/src/content/design-system/patterns/tax-file-number/design/Tax File Number/content.mdoc b/apps/site/src/content/design-system/patterns/tax-file-number/design/Tax File Number/content.mdoc new file mode 100644 index 000000000..260e2cc2f --- /dev/null +++ b/apps/site/src/content/design-system/patterns/tax-file-number/design/Tax File Number/content.mdoc @@ -0,0 +1,11 @@ +### Base pattern + +The Tax File Number (TFN) pattern uses progressive disclosure as to allow the user to match their preferences and not overwhelm with too many questions at once. + +Loading... + +### Previously provided + +This variation includes an option to select a TFN that has been provided previously, this is for existing customers. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/tax-file-number/design/User experience/content.mdoc b/apps/site/src/content/design-system/patterns/tax-file-number/design/User experience/content.mdoc new file mode 100644 index 000000000..6e99ced75 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/tax-file-number/design/User experience/content.mdoc @@ -0,0 +1 @@ +To encourage users to supply their tax file information, use the hint text to communicate what will happen if users withhold their tax file number. Tax File Number exemption reasons should be unambiguous, clear, and succinct speaking the language of the customer, not business rationale. diff --git a/apps/site/src/content/design-system/patterns/tax-file-number/index.yaml b/apps/site/src/content/design-system/patterns/tax-file-number/index.yaml new file mode 100644 index 000000000..eaf216bb5 --- /dev/null +++ b/apps/site/src/content/design-system/patterns/tax-file-number/index.yaml @@ -0,0 +1,10 @@ +name: Tax file number +description: >- + Use this pattern to capture the preferences around whether or not a customer + wants to provide their Tax File Number details. +design: + - title: Tax File Number + - title: Error states + - title: User experience + - title: Pattern examples in code +accessibility: [] From 33e5558c62b93793d712b4ffb07e3bbcacbfcf52 Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Thu, 9 Nov 2023 16:36:40 +1000 Subject: [PATCH 08/51] fix(layout): layout with grid and gap --- apps/site/keystatic.config.ts | 2 +- .../[article]/components/document-renderer.tsx | 2 ++ .../content-tabs/components/document-renderer.tsx | 2 ++ .../components/document-renderer/layout/index.ts | 2 ++ .../document-renderer/layout/layout.component.tsx | 15 +++++++++++++++ .../document-renderer/layout/layout.types.ts | 6 ++++++ .../Dos and don\342\200\231ts/content.mdoc" | 2 +- .../Dos and don\342\200\231ts/content.mdoc" | 4 ++-- .../Dos and don\342\200\231ts/content.mdoc" | 2 +- .../Dos and don\342\200\231ts/content.mdoc" | 4 ++-- .../Dos and don\342\200\231ts/content.mdoc" | 2 +- 11 files changed, 35 insertions(+), 8 deletions(-) create mode 100644 apps/site/src/components/document-renderer/layout/index.ts create mode 100644 apps/site/src/components/document-renderer/layout/layout.component.tsx create mode 100644 apps/site/src/components/document-renderer/layout/layout.types.ts diff --git a/apps/site/keystatic.config.ts b/apps/site/keystatic.config.ts index c10faeb08..ef89966d6 100644 --- a/apps/site/keystatic.config.ts +++ b/apps/site/keystatic.config.ts @@ -109,7 +109,7 @@ export default config({ dividers: true, links: true, images: true, - layouts: [[1, 1]], + layouts: [[6, 6]], label: 'Design', }), }), diff --git a/apps/site/src/app/articles/[article]/components/document-renderer.tsx b/apps/site/src/app/articles/[article]/components/document-renderer.tsx index 63764345c..4fc91f20a 100644 --- a/apps/site/src/app/articles/[article]/components/document-renderer.tsx +++ b/apps/site/src/app/articles/[article]/components/document-renderer.tsx @@ -2,6 +2,7 @@ import { DocumentRendererProps } from '@keystatic/core/renderer'; import { Code as InlineCode, Link } from '@/components/content-blocks/typography'; import { Blockquote, Code, Divider, List, Paragraph } from '@/components/document-renderer'; +import { Layout } from '@/components/document-renderer/layout/layout.component'; import { Heading } from './heading'; import { Image } from './image'; @@ -19,6 +20,7 @@ export const DOCUMENT_RENDERERS: Required['renderers'] = ), image: Image, + layout: Layout, }, inline: { code: InlineCode, diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx index da5619c12..5639ff6bb 100644 --- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx @@ -2,6 +2,7 @@ import { DocumentRendererProps } from '@keystatic/core/renderer'; import { Code as InlineCode, Link } from '@/components/content-blocks/typography'; import { Code, Divider, Heading, List, Paragraph } from '@/components/document-renderer'; +import { Layout } from '@/components/document-renderer/layout/layout.component'; export const DOCUMENT_RENDERERS: Required['renderers'] = { block: { @@ -10,6 +11,7 @@ export const DOCUMENT_RENDERERS: Required['renderers'] = code: props => , heading: Heading, list: props => , + layout: Layout, }, inline: { code: InlineCode, diff --git a/apps/site/src/components/document-renderer/layout/index.ts b/apps/site/src/components/document-renderer/layout/index.ts new file mode 100644 index 000000000..f06103070 --- /dev/null +++ b/apps/site/src/components/document-renderer/layout/index.ts @@ -0,0 +1,2 @@ +export * from './heading.component'; +export * from './heading.types'; diff --git a/apps/site/src/components/document-renderer/layout/layout.component.tsx b/apps/site/src/components/document-renderer/layout/layout.component.tsx new file mode 100644 index 000000000..0aaaf8460 --- /dev/null +++ b/apps/site/src/components/document-renderer/layout/layout.component.tsx @@ -0,0 +1,15 @@ +import { Grid, Item } from '@westpac/ui'; + +import { type LayoutProps } from './layout.types'; + +export const Layout = ({ children, layout }: LayoutProps) => { + return ( + + {children.map((child, index) => ( + + {child} + + ))} + + ); +}; diff --git a/apps/site/src/components/document-renderer/layout/layout.types.ts b/apps/site/src/components/document-renderer/layout/layout.types.ts new file mode 100644 index 000000000..e3e2571be --- /dev/null +++ b/apps/site/src/components/document-renderer/layout/layout.types.ts @@ -0,0 +1,6 @@ +import { ReactElement } from 'react'; + +export type LayoutProps = { + children: ReactElement[]; + layout: [number, ...number[]]; +}; diff --git "a/apps/site/src/content/design-system/components/button/design/Dos and don\342\200\231ts/content.mdoc" "b/apps/site/src/content/design-system/components/button/design/Dos and don\342\200\231ts/content.mdoc" index 19ec31409..c9ed0f468 100644 --- "a/apps/site/src/content/design-system/components/button/design/Dos and don\342\200\231ts/content.mdoc" +++ "b/apps/site/src/content/design-system/components/button/design/Dos and don\342\200\231ts/content.mdoc" @@ -6,7 +6,7 @@ - Avoid disabled buttons where possible - users may not know why a function is disabled as there is no feedback offered. - Avoid placing critical functions next to one another to avoid errors and loss of data or accidental processes. -{% layout layout=[1, 1] %} +{% layout layout=[6, 6] %} {% layout-area %} ![Two buttons vertically stacked with space between them, labelled ‘Save’ and ‘Delete’. This diagram has a tick.](https://res.cloudinary.com/westpac-gel/image/upload/v1603847085/5f98c3ac28dd13161ae76fd8.png) diff --git "a/apps/site/src/content/design-system/components/checkbox-group/design/Dos and don\342\200\231ts/content.mdoc" "b/apps/site/src/content/design-system/components/checkbox-group/design/Dos and don\342\200\231ts/content.mdoc" index 93a762bf7..410b75043 100644 --- "a/apps/site/src/content/design-system/components/checkbox-group/design/Dos and don\342\200\231ts/content.mdoc" +++ "b/apps/site/src/content/design-system/components/checkbox-group/design/Dos and don\342\200\231ts/content.mdoc" @@ -4,7 +4,7 @@ - Avoid changing the text styling of the checkbox label (size, colour etc). - Do make sure the taxonomy of the options you are offering makes sense as any ambiguity will only slow down or confuse the user. -{% layout layout=[1, 1] %} +{% layout layout=[6, 6] %} {% layout-area %} ![Question set asking ‘Which methods do you use to get to work?’ With checkbox options: Car, Bicycle, Train, Other means. This diagram has a tick.](https://res.cloudinary.com/westpac-gel/image/upload/v1603779769/5f97bcb7bf99e236cd9193f6.png) @@ -18,7 +18,7 @@ Avoid - Mixing checkboxes and radios {% /layout-area %} {% /layout %} -{% layout layout=[1, 1] %} +{% layout layout=[6, 6] %} {% layout-area %} ![Question set asking ‘Do you have any of the following in your household?’ With checkbox options: Cameras, Bicycles, Audio equipment, Computer equipment. This diagram has a tick.](https://res.cloudinary.com/westpac-gel/image/upload/v1604288190/5f9f7ebdc5be90222be29900.png) diff --git "a/apps/site/src/content/design-system/components/input/design/Dos and don\342\200\231ts/content.mdoc" "b/apps/site/src/content/design-system/components/input/design/Dos and don\342\200\231ts/content.mdoc" index 31d95bc51..e7f61cb85 100644 --- "a/apps/site/src/content/design-system/components/input/design/Dos and don\342\200\231ts/content.mdoc" +++ "b/apps/site/src/content/design-system/components/input/design/Dos and don\342\200\231ts/content.mdoc" @@ -3,7 +3,7 @@ - Do use any of the predefined input sizes but make sure to use the corresponding button size if required. - Do keep labels in close proximity above the input field. -{% layout layout=[1, 1] %} +{% layout layout=[6, 6] %} {% layout-area %} ![](https://res.cloudinary.com/westpac-gel/image/upload/v1603846745/5f98c25828dd13161ae76fd6.png) diff --git "a/apps/site/src/content/design-system/components/radio-group/design/Dos and don\342\200\231ts/content.mdoc" "b/apps/site/src/content/design-system/components/radio-group/design/Dos and don\342\200\231ts/content.mdoc" index 1e7c9419f..18884b7d2 100644 --- "a/apps/site/src/content/design-system/components/radio-group/design/Dos and don\342\200\231ts/content.mdoc" +++ "b/apps/site/src/content/design-system/components/radio-group/design/Dos and don\342\200\231ts/content.mdoc" @@ -4,7 +4,7 @@ - Avoid changing the text styling of the radio label (size, colour etc). - Do make sure the taxonomy of the options you are offering makes sense as any ambiguity will only slow down or confuse the user. -{% layout layout=[1, 1] %} +{% layout layout=[6, 6] %} {% layout-area %} ![Question set asking ‘Select your favourite fruit’ With radio options vertically stacked: Apples, Pineapples, Pears. This diagram has a tick.](https://res.cloudinary.com/westpac-gel/image/upload/v1604287075/5f9f7a62c5be90222be298fc.png) @@ -18,7 +18,7 @@ Avoid - Placing more than two checkboxes horizontally, side-by-side. {% /layout-area %} {% /layout %} -{% layout layout=[1, 1] %} +{% layout layout=[6, 6] %} {% layout-area %} ![Question set asking ‘Select your favourite fruit’ With radio options: Apples, Pineapples, Pears, Watermelons. This diagram has a tick.](https://res.cloudinary.com/westpac-gel/image/upload/v1624410638/60d28a0d62675721d7db363e.png) diff --git "a/apps/site/src/content/design-system/components/switch/design/Dos and don\342\200\231ts/content.mdoc" "b/apps/site/src/content/design-system/components/switch/design/Dos and don\342\200\231ts/content.mdoc" index 1b370bd93..9fcc0b2e5 100644 --- "a/apps/site/src/content/design-system/components/switch/design/Dos and don\342\200\231ts/content.mdoc" +++ "b/apps/site/src/content/design-system/components/switch/design/Dos and don\342\200\231ts/content.mdoc" @@ -2,7 +2,7 @@ - Do use the corresponding size when using switches with form inputs etc. - Don't use switches to answer Yes/No questions - they should reflect On/Off. -{% layout layout=[1, 1] %} +{% layout layout=[6, 6] %} {% layout-area %} ![](https://res.cloudinary.com/westpac-gel/image/upload/v1604288835/5f9f8142c5be90222be29901.png) From 9fa3d674321dcdb7fbfc96d33620120bf9275d12 Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Fri, 10 Nov 2023 14:33:06 +1000 Subject: [PATCH 09/51] feat(design-system): sections without titles, titles with special characters --- apps/site/keystatic.config.ts | 1 + .../code-content/code-content.component.tsx | 16 +++-- .../code-content/code-content.types.ts | 2 +- .../design-content.component.tsx | 6 +- .../design-content/design-content.types.tsx | 2 +- .../components/document-renderer.tsx | 3 + .../components/intro/intro.component.tsx | 8 ++- .../content-tabs/content-tabs.component.tsx | 65 ++++++++++++------- .../content-tabs/content-tabs.types.ts | 2 +- .../components/header/header.component.tsx | 9 +-- .../design-system/[...component]/layout.tsx | 15 ++++- .../app/design-system/[...component]/page.tsx | 6 +- apps/site/src/app/design-system/layout.tsx | 4 +- .../typography/typography.component.tsx | 15 ++++- .../content/articles/what-is-gel/content.mdoc | 2 +- .../components/select/index.yaml | 1 - .../guidelines/abbreviation/index.yaml | 1 + .../content/guidelines/acronym/index.yaml | 3 +- .../age-school-year}/accessibilityDemo.mdoc | 0 .../guidelines/age-school-year}/code.mdoc | 0 .../design/undefined/content.mdoc | 8 +-- .../index.yaml | 4 +- .../design/undefined/content.mdoc | 0 .../index.yaml | 3 +- .../content/guidelines/bracket/index.yaml | 3 +- .../design/undefined/content.mdoc | 0 .../index.yaml | 3 +- .../calls-to-action-(ctas)/index.yaml | 3 +- .../content/guidelines/contraction/index.yaml | 3 +- .../design/undefined/content.mdoc | 0 .../index.yaml | 3 +- .../content/guidelines/empty-state/index.yaml | 3 +- .../guidelines/error-message/index.yaml | 3 +- .../design/undefined/content.mdoc | 0 .../index.yaml | 3 +- .../design/undefined/content.mdoc | 0 .../index.yaml | 5 +- .../content/guidelines/navigation/index.yaml | 3 +- .../design/undefined/content.mdoc | 0 .../index.yaml | 5 +- .../design/undefined/content.mdoc | 0 .../index.yaml | 3 +- .../development/guides/brand/index.yaml | 3 +- .../design/How overrides work/content.mdoc | 27 -------- .../design/Override order/content.mdoc | 63 ------------------ .../override/design/Structure/content.mdoc | 31 --------- .../design/Subcomponents/content.mdoc | 7 -- .../development/guides/override/index.yaml | 11 ---- apps/site/src/utils/format.ts | 8 +-- 49 files changed, 148 insertions(+), 218 deletions(-) delete mode 100644 apps/site/src/content/design-system/components/select/index.yaml rename apps/site/src/content/design-system/{components/select => content/guidelines/age-school-year}/accessibilityDemo.mdoc (100%) rename apps/site/src/content/design-system/{components/select => content/guidelines/age-school-year}/code.mdoc (100%) rename apps/site/src/content/design-system/content/guidelines/{age-&-school-year => age-school-year}/design/undefined/content.mdoc (91%) rename apps/site/src/content/design-system/content/guidelines/{age-&-school-year => age-school-year}/index.yaml (62%) rename apps/site/src/content/design-system/content/guidelines/{bolding-&-underlining => bolding-underlining}/design/undefined/content.mdoc (100%) rename apps/site/src/content/design-system/content/guidelines/{bolding-&-underlining => bolding-underlining}/index.yaml (79%) rename apps/site/src/content/design-system/content/guidelines/{bullet-points-&-numbered-list => bullet-points-numbered-list}/design/undefined/content.mdoc (100%) rename apps/site/src/content/design-system/content/guidelines/{bullet-points-&-numbered-list => bullet-points-numbered-list}/index.yaml (79%) rename apps/site/src/content/design-system/content/guidelines/{dates,-days-&-time => dates-days-time}/design/undefined/content.mdoc (100%) rename apps/site/src/content/design-system/content/guidelines/{dates,-days-&-time => dates-days-time}/index.yaml (70%) rename apps/site/src/content/design-system/content/guidelines/{headings-&-subheading => headings-subheading}/design/undefined/content.mdoc (100%) rename apps/site/src/content/design-system/content/guidelines/{headings-&-subheading => headings-subheading}/index.yaml (80%) rename apps/site/src/content/design-system/content/guidelines/{hyperlinks-&-email-addresse => hyperlinks-email-addresses}/design/undefined/content.mdoc (100%) rename apps/site/src/content/design-system/content/guidelines/{hyperlinks-&-email-addresse => hyperlinks-email-addresses}/index.yaml (52%) rename apps/site/src/content/design-system/content/guidelines/{numbers-&-currencie => numbers-currencies}/design/undefined/content.mdoc (100%) rename apps/site/src/content/design-system/content/guidelines/{numbers-&-currencie => numbers-currencies}/index.yaml (53%) rename apps/site/src/content/design-system/content/guidelines/{people-&-diversity => people-diversity}/design/undefined/content.mdoc (100%) rename apps/site/src/content/design-system/content/guidelines/{people-&-diversity => people-diversity}/index.yaml (71%) delete mode 100644 apps/site/src/content/design-system/development/guides/override/design/How overrides work/content.mdoc delete mode 100644 apps/site/src/content/design-system/development/guides/override/design/Override order/content.mdoc delete mode 100644 apps/site/src/content/design-system/development/guides/override/design/Structure/content.mdoc delete mode 100644 apps/site/src/content/design-system/development/guides/override/design/Subcomponents/content.mdoc delete mode 100644 apps/site/src/content/design-system/development/guides/override/index.yaml diff --git a/apps/site/keystatic.config.ts b/apps/site/keystatic.config.ts index ef89966d6..0c0861352 100644 --- a/apps/site/keystatic.config.ts +++ b/apps/site/keystatic.config.ts @@ -104,6 +104,7 @@ export default config({ design: fields.array( fields.object({ title: fields.text({ label: 'Name' }), + noTitle: fields.checkbox({ label: 'No title' }), content: fields.document({ formatting: true, dividers: true, diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx index 2ff53d52d..53448cb10 100644 --- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.component.tsx @@ -15,14 +15,16 @@ import { TableOfContents } from '../intro/components'; import { type CodeContentProps } from '.'; -export function CodeContent({ content, westpacUIInfo, componentProps, subComponentProps }: CodeContentProps) { +export function CodeContent({ content = [], westpacUIInfo, componentProps, subComponentProps }: CodeContentProps) { const tableOfContents = useMemo(() => { - return content.reduce((acc, item: DocumentElement & { level?: number }) => { - if (item.type === 'heading' && item?.level && item.level <= 3) { - return [...acc, { title: item.children[0].text as string }]; - } - return acc; - }, [] as { title: string }[]); + return ( + content?.reduce((acc, item: DocumentElement & { level?: number }) => { + if (item.type === 'heading' && item?.level && item.level <= 3) { + return [...acc, { title: item.children[0].text as string }]; + } + return acc; + }, [] as { title: string }[]) || [] + ); }, [content]); return ( diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.types.ts b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.types.ts index 51651d9be..c4349b065 100644 --- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.types.ts +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/code-content/code-content.types.ts @@ -8,7 +8,7 @@ export type CodeSectionProps = { content: DocumentElement[]; title: string }; export type CodeContentProps = { componentProps?: ComponentProps; - content: DocumentElement[]; + content?: DocumentElement[]; description?: string; relatedComponents?: RelatedInfoProps['relatedComponents']; subComponentProps?: ComponentProps[]; 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 e45bf7266..1ac78dba6 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 @@ -15,18 +15,18 @@ import { type DesignContentProps } from '.'; export function DesignContent({ designSections, description, relatedComponents }: DesignContentProps) { const sectionNames = useMemo(() => { - return designSections?.map(({ title }) => ({ title })) || []; + return designSections?.filter(({ noTitle }) => !noTitle).map(({ title }) => ({ title })) || []; }, [designSections]); return ( <> {description && } - {designSections?.map(({ title, content }) => { + {designSections?.map(({ title, content, noTitle }) => { const id = title.toLowerCase().split(' ').join('-'); return (
- {title} + {!noTitle && {title}} ['renderers'] = heading: Heading, list: props => , layout: Layout, + blockquote: ({ children }) => ( +
{children}
+ ), }, inline: { code: InlineCode, diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/intro/intro.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/intro/intro.component.tsx index 8e83b288a..e4eeddce4 100644 --- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/intro/intro.component.tsx +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/intro/intro.component.tsx @@ -16,9 +16,11 @@ export function Intro({ description, sectionNames }: IntroProps) { {description}

- - - + {sectionNames.length > 0 && ( + + + + )}
diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx index cf244c8bb..a1802e394 100644 --- a/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx @@ -6,6 +6,37 @@ import { Key, useCallback, useMemo } from 'react'; import { AccessibilityContent, CodeContent, DesignContent, Tabs } from './components'; import { type ContentTabsProps } from './content-tabs.types'; +const TabPanelByKey = ({ tabKey, content }: { content: ContentTabsProps; tabKey: string }) => { + if (tabKey === 'design') { + return ( + + ); + } + if (tabKey === 'accessibility') { + return ( + + ); + } + if (tabKey === 'code') { + return ( + + ); + } + return <>; +}; + export function ContentTabs({ content }: { content: ContentTabsProps }) { const router = useRouter(); const pathname = usePathname(); @@ -22,38 +53,26 @@ export function ContentTabs({ content }: { content: ContentTabsProps }) { const filteredTabs = useMemo(() => { return [ - { label: 'Design', key: 'design' }, + ...(content.designSections?.length ? [{ label: 'Design', key: 'design' }] : []), ...(content.accessibilitySections.length > 0 ? [{ label: 'Accessibility', key: 'accessibility' }] : []), ...(content.componentProps || content.code ? [{ label: 'Code', key: 'code' }] : []), ]; - }, [content.accessibilitySections.length, content.code, content.componentProps]); + }, [content.accessibilitySections.length, content.code, content.componentProps, content.designSections?.length]); + + if (filteredTabs.length === 1) { + return ( +
+ +
+ ); + } return ( {filteredTabs.map(tab => (
- {tab.key === 'design' && ( - - )} - {tab.key === 'accessibility' && ( - - )} - {tab.key === 'code' && ( - - )} +
))} diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.types.ts b/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.types.ts index 1cfc48962..0785b7ce5 100644 --- a/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.types.ts +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.types.ts @@ -9,7 +9,7 @@ import { DesignSectionProps } from './components/design-content/design-content.t export type ContentTabsProps = { accessibilityDemo: DocumentElement[]; accessibilitySections: AccessibilitySectionProps[]; - code: DocumentElement[]; + code?: DocumentElement[]; componentProps?: ComponentProps; description?: string; designSections?: DesignSectionProps[]; diff --git a/apps/site/src/app/design-system/[...component]/components/header/header.component.tsx b/apps/site/src/app/design-system/[...component]/components/header/header.component.tsx index a388907e7..e73f9ad29 100644 --- a/apps/site/src/app/design-system/[...component]/components/header/header.component.tsx +++ b/apps/site/src/app/design-system/[...component]/components/header/header.component.tsx @@ -1,11 +1,10 @@ 'use client'; import { HamburgerMenuIcon } from '@westpac/ui/icon'; -import { useParams, useSearchParams } from 'next/navigation'; +import { useSearchParams } from 'next/navigation'; import React, { useEffect, useState } from 'react'; import { BrandKey } from '@/app/types/brand.types'; -import { formatComponentSlug } from '@/utils/format'; import { useSidebar } from '../../../components/sidebar/sidebar.context'; @@ -13,12 +12,10 @@ import { styles as headerStyles } from './header.styles'; const FIXED_HEADER = 162; // 228 - 66 = height to stick -export function Header({ className }: { className?: string }) { +export function Header({ className, title }: { className?: string; title?: string }) { const [fixed, setFixed] = useState(false); const searchParams = useSearchParams(); const brand = searchParams.get('brand')?.toLowerCase(); - const params = useParams(); - const component = formatComponentSlug(params?.component.at(-1) ?? ''); const styles = headerStyles({ brand: brand as BrandKey, fixed, className }); const { setOpen } = useSidebar(); @@ -38,7 +35,7 @@ export function Header({ className }: { className?: string }) { -

{component}

+

{title}

); } diff --git a/apps/site/src/app/design-system/[...component]/layout.tsx b/apps/site/src/app/design-system/[...component]/layout.tsx index 56ac3434e..9846b549b 100644 --- a/apps/site/src/app/design-system/[...component]/layout.tsx +++ b/apps/site/src/app/design-system/[...component]/layout.tsx @@ -1,9 +1,20 @@ +import { reader } from '@/app/reader'; + import { Header } from './components'; -export default function ComponentLayout({ children }: { children: React.ReactNode }) { +export default async function ComponentLayout({ + children, + params, +}: { + children: React.ReactNode; + params: { component: string[] }; +}) { + const { component } = params; + const content = await reader.collections.designSystem.readOrThrow(component.join('/')); + return ( <> -
+
{children}
diff --git a/apps/site/src/app/design-system/[...component]/page.tsx b/apps/site/src/app/design-system/[...component]/page.tsx index 7edf16195..02da1b3c6 100644 --- a/apps/site/src/app/design-system/[...component]/page.tsx +++ b/apps/site/src/app/design-system/[...component]/page.tsx @@ -35,6 +35,7 @@ export default async function ComponentPage({ params }: { params: { component: s resolve({ title: section.title, content: content, + noTitle: section.noTitle, }); return { ...section, @@ -71,6 +72,9 @@ export default async function ComponentPage({ params }: { params: { component: s content?.accessibilityDemo(), content?.code(), ]); + + const codeIsEmpty = code[0].children.length <= 1 && !code[0].children[0].text; + const componentProps: ComponentProps | undefined = (json as any)[componentName]; const subComponentProps = Object.entries(json).reduce((acc, [key, value]: [string, any]) => { if (key.indexOf(`${componentName}.`) !== 0) { @@ -85,7 +89,7 @@ export default async function ComponentPage({ params }: { params: { component: s westpacUIInfo: westpacInfo, accessibilitySections, accessibilityDemo, - code, + code: codeIsEmpty ? undefined : code, description: content.description, designSections, relatedComponents: content.relatedInformation.filter(value => !!value) as string[], diff --git a/apps/site/src/app/design-system/layout.tsx b/apps/site/src/app/design-system/layout.tsx index 60c3058b4..41a076527 100644 --- a/apps/site/src/app/design-system/layout.tsx +++ b/apps/site/src/app/design-system/layout.tsx @@ -4,8 +4,8 @@ import { formatNavItems } from '@/utils/format'; import { Sidebar, SidebarContextProvider } from './components'; export default async function DesignSystemLayout({ children }: { children: React.ReactNode }) { - const items = await reader.collections.designSystem.list(); - const formattedItems = formatNavItems(items); + const allContent = await reader.collections.designSystem.all(); + const formattedItems = formatNavItems(allContent.map(({ entry, slug }) => ({ slug, name: entry.name }))); return (
diff --git a/apps/site/src/components/content-blocks/typography/typography.component.tsx b/apps/site/src/components/content-blocks/typography/typography.component.tsx index e3a8db079..7e7c5a509 100644 --- a/apps/site/src/components/content-blocks/typography/typography.component.tsx +++ b/apps/site/src/components/content-blocks/typography/typography.component.tsx @@ -1,3 +1,4 @@ +import { NewWindowIcon } from '@westpac/ui/icon'; import NextLink, { LinkProps } from 'next/link'; import { VariantProps } from 'tailwind-variants'; @@ -9,9 +10,21 @@ export function Text({ children }: { children?: React.ReactNode }) { export function Link({ color = 'default', + children, + href, ...props }: React.PropsWithChildren>) { - return ; + return ( + + {children} + + + ); } export function Code({ children }: { children?: React.ReactNode }) { diff --git a/apps/site/src/content/articles/what-is-gel/content.mdoc b/apps/site/src/content/articles/what-is-gel/content.mdoc index ee0501d7c..99d7bc3c2 100644 --- a/apps/site/src/content/articles/what-is-gel/content.mdoc +++ b/apps/site/src/content/articles/what-is-gel/content.mdoc @@ -1,4 +1,4 @@ -he Global Experience Language is our single source of truth, providing everything you need to deliver our brand promises and create consistent, coherent customer experiences across our entire digital landscape faster, and with less effort. +The Global Experience Language is our single source of truth, providing everything you need to deliver our brand promises and create consistent, coherent customer experiences across our entire digital landscape faster, and with less effort. ## We are customer centred diff --git a/apps/site/src/content/design-system/components/select/index.yaml b/apps/site/src/content/design-system/components/select/index.yaml deleted file mode 100644 index b07d74d1c..000000000 --- a/apps/site/src/content/design-system/components/select/index.yaml +++ /dev/null @@ -1 +0,0 @@ -name: Select diff --git a/apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml b/apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml index a5bd40f14..93c0dfa8c 100644 --- a/apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/abbreviation/index.yaml @@ -2,4 +2,5 @@ name: Abbreviation description: Abbreviations are shortened forms of words or phrases. design: - title: title + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/acronym/index.yaml b/apps/site/src/content/design-system/content/guidelines/acronym/index.yaml index 2cae47442..84fdfdb1e 100644 --- a/apps/site/src/content/design-system/content/guidelines/acronym/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/acronym/index.yaml @@ -1,5 +1,6 @@ name: Acronym description: Acronyms are words that are formed from the first letters of other words. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/components/select/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/guidelines/age-school-year/accessibilityDemo.mdoc similarity index 100% rename from apps/site/src/content/design-system/components/select/accessibilityDemo.mdoc rename to apps/site/src/content/design-system/content/guidelines/age-school-year/accessibilityDemo.mdoc diff --git a/apps/site/src/content/design-system/components/select/code.mdoc b/apps/site/src/content/design-system/content/guidelines/age-school-year/code.mdoc similarity index 100% rename from apps/site/src/content/design-system/components/select/code.mdoc rename to apps/site/src/content/design-system/content/guidelines/age-school-year/code.mdoc diff --git a/apps/site/src/content/design-system/content/guidelines/age-&-school-year/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/age-school-year/design/undefined/content.mdoc similarity index 91% rename from apps/site/src/content/design-system/content/guidelines/age-&-school-year/design/undefined/content.mdoc rename to apps/site/src/content/design-system/content/guidelines/age-school-year/design/undefined/content.mdoc index b94474832..0f350c765 100644 --- a/apps/site/src/content/design-system/content/guidelines/age-&-school-year/design/undefined/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/age-school-year/design/undefined/content.mdoc @@ -3,7 +3,7 @@ Use numerals, not words. For example: > Do: 18 -> +> > Don’t: eighteen --- @@ -13,12 +13,12 @@ For individuals, use ‘years old’ or ‘year old’, depending on the context For example: > If you’re under 30 years old… -> +> > We asked an 18 year old… -> +> > We asked a group of 18 year olds… -_Note: Don’t use hyphens._ +*Note: Don’t use hyphens.* --- diff --git a/apps/site/src/content/design-system/content/guidelines/age-&-school-year/index.yaml b/apps/site/src/content/design-system/content/guidelines/age-school-year/index.yaml similarity index 62% rename from apps/site/src/content/design-system/content/guidelines/age-&-school-year/index.yaml rename to apps/site/src/content/design-system/content/guidelines/age-school-year/index.yaml index 94ad665d4..6f1ee7db7 100644 --- a/apps/site/src/content/design-system/content/guidelines/age-&-school-year/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/age-school-year/index.yaml @@ -1,5 +1,7 @@ name: Age & school year description: A guide to writing age and school years. design: - - {} + - title: undefined + noTitle: true accessibility: [] +relatedInformation: [] diff --git a/apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/bolding-underlining/design/undefined/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/design/undefined/content.mdoc rename to apps/site/src/content/design-system/content/guidelines/bolding-underlining/design/undefined/content.mdoc diff --git a/apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/index.yaml b/apps/site/src/content/design-system/content/guidelines/bolding-underlining/index.yaml similarity index 79% rename from apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/index.yaml rename to apps/site/src/content/design-system/content/guidelines/bolding-underlining/index.yaml index 551ac50d1..682d56e3c 100644 --- a/apps/site/src/content/design-system/content/guidelines/bolding-&-underlining/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/bolding-underlining/index.yaml @@ -3,5 +3,6 @@ description: >- Bolding and underlining are used to emphasise words. We only use bolding in certain situations. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/bracket/index.yaml b/apps/site/src/content/design-system/content/guidelines/bracket/index.yaml index b92a0eb23..3d9dfd42c 100644 --- a/apps/site/src/content/design-system/content/guidelines/bracket/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/bracket/index.yaml @@ -1,5 +1,6 @@ name: Bracket description: Brackets are used to provide extra information. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/design/undefined/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/design/undefined/content.mdoc rename to apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/design/undefined/content.mdoc diff --git a/apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/index.yaml b/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/index.yaml similarity index 79% rename from apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/index.yaml rename to apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/index.yaml index e605cd2c5..d5e26b663 100644 --- a/apps/site/src/content/design-system/content/guidelines/bullet-points-&-numbered-list/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/bullet-points-numbered-list/index.yaml @@ -3,5 +3,6 @@ description: >- Bullet points and numbered lists are used to make it easier to understand a series of items. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/index.yaml b/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/index.yaml index 3fe153d8d..a247e838b 100644 --- a/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/index.yaml @@ -1,5 +1,6 @@ name: Calls to action (ctas) description: Calls to action are used to get a person to perform an instruction. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/contraction/index.yaml b/apps/site/src/content/design-system/content/guidelines/contraction/index.yaml index 588966de4..6dcdcc51a 100644 --- a/apps/site/src/content/design-system/content/guidelines/contraction/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/contraction/index.yaml @@ -1,5 +1,6 @@ name: Contraction description: Contractions consist of two words combined to create a shorter word. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/undefined/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/design/undefined/content.mdoc rename to apps/site/src/content/design-system/content/guidelines/dates-days-time/design/undefined/content.mdoc diff --git a/apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/index.yaml b/apps/site/src/content/design-system/content/guidelines/dates-days-time/index.yaml similarity index 70% rename from apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/index.yaml rename to apps/site/src/content/design-system/content/guidelines/dates-days-time/index.yaml index 9b1b4bdbf..acfd95f8b 100644 --- a/apps/site/src/content/design-system/content/guidelines/dates,-days-&-time/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/dates-days-time/index.yaml @@ -1,5 +1,6 @@ name: Dates, days & time description: A guide to writing dates, days and time. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/empty-state/index.yaml b/apps/site/src/content/design-system/content/guidelines/empty-state/index.yaml index 85afc44ab..d3146a45e 100644 --- a/apps/site/src/content/design-system/content/guidelines/empty-state/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/empty-state/index.yaml @@ -3,5 +3,6 @@ description: >- Empty states are moments in a person’s experience with a product where there’s nothing to display. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/error-message/index.yaml b/apps/site/src/content/design-system/content/guidelines/error-message/index.yaml index c63535afd..a66f4462f 100644 --- a/apps/site/src/content/design-system/content/guidelines/error-message/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/error-message/index.yaml @@ -3,7 +3,8 @@ description: >- The way we communicate errors to our users helps them to recover quickly with less effort. design: - - {} + - title: undefined + noTitle: true - title: Types of error messages - title: Displaying error messages accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/headings-&-subheading/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/undefined/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/guidelines/headings-&-subheading/design/undefined/content.mdoc rename to apps/site/src/content/design-system/content/guidelines/headings-subheading/design/undefined/content.mdoc diff --git a/apps/site/src/content/design-system/content/guidelines/headings-&-subheading/index.yaml b/apps/site/src/content/design-system/content/guidelines/headings-subheading/index.yaml similarity index 80% rename from apps/site/src/content/design-system/content/guidelines/headings-&-subheading/index.yaml rename to apps/site/src/content/design-system/content/guidelines/headings-subheading/index.yaml index 80740093c..af6618d58 100644 --- a/apps/site/src/content/design-system/content/guidelines/headings-&-subheading/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/headings-subheading/index.yaml @@ -3,5 +3,6 @@ description: >- Headings and subheadings are used to tell a person what they can expect from the content of a section. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/design/undefined/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/design/undefined/content.mdoc rename to apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/design/undefined/content.mdoc diff --git a/apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/index.yaml b/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/index.yaml similarity index 52% rename from apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/index.yaml rename to apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/index.yaml index 00f8a6ac7..4e1e3f9f1 100644 --- a/apps/site/src/content/design-system/content/guidelines/hyperlinks-&-email-addresse/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/hyperlinks-email-addresses/index.yaml @@ -1,5 +1,6 @@ -name: Hyperlinks & email addresse +name: Hyperlinks & email addresses description: A guide to using hyperlinks and email addresses. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/navigation/index.yaml b/apps/site/src/content/design-system/content/guidelines/navigation/index.yaml index 56e97ff66..f99810a35 100644 --- a/apps/site/src/content/design-system/content/guidelines/navigation/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/navigation/index.yaml @@ -1,5 +1,6 @@ name: Navigation description: Navigation is used to help a person find content on a website or app. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/numbers-currencies/design/undefined/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/design/undefined/content.mdoc rename to apps/site/src/content/design-system/content/guidelines/numbers-currencies/design/undefined/content.mdoc diff --git a/apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/index.yaml b/apps/site/src/content/design-system/content/guidelines/numbers-currencies/index.yaml similarity index 53% rename from apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/index.yaml rename to apps/site/src/content/design-system/content/guidelines/numbers-currencies/index.yaml index 60cb32ae6..2021f7b43 100644 --- a/apps/site/src/content/design-system/content/guidelines/numbers-&-currencie/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/numbers-currencies/index.yaml @@ -1,5 +1,6 @@ -name: Numbers & currencie +name: Numbers & currencies description: A guide to writing numbers and currencies. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/content/guidelines/people-&-diversity/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/people-diversity/design/undefined/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/guidelines/people-&-diversity/design/undefined/content.mdoc rename to apps/site/src/content/design-system/content/guidelines/people-diversity/design/undefined/content.mdoc diff --git a/apps/site/src/content/design-system/content/guidelines/people-&-diversity/index.yaml b/apps/site/src/content/design-system/content/guidelines/people-diversity/index.yaml similarity index 71% rename from apps/site/src/content/design-system/content/guidelines/people-&-diversity/index.yaml rename to apps/site/src/content/design-system/content/guidelines/people-diversity/index.yaml index a31b49275..d09d5afe2 100644 --- a/apps/site/src/content/design-system/content/guidelines/people-&-diversity/index.yaml +++ b/apps/site/src/content/design-system/content/guidelines/people-diversity/index.yaml @@ -1,5 +1,6 @@ name: People & diversity description: A guide to writing for an inclusive audience. design: - - {} + - title: undefined + noTitle: true accessibility: [] diff --git a/apps/site/src/content/design-system/development/guides/brand/index.yaml b/apps/site/src/content/design-system/development/guides/brand/index.yaml index 77efd0d5a..a3ade0278 100644 --- a/apps/site/src/content/design-system/development/guides/brand/index.yaml +++ b/apps/site/src/content/design-system/development/guides/brand/index.yaml @@ -3,6 +3,7 @@ description: >- In order to allow for the most flexibility when theming your application, we have published a package for each of the Westpac Group's brands. design: - - {} + - title: undefined + noTitle: true - title: useBrand accessibility: [] diff --git a/apps/site/src/content/design-system/development/guides/override/design/How overrides work/content.mdoc b/apps/site/src/content/design-system/development/guides/override/design/How overrides work/content.mdoc deleted file mode 100644 index d7b1506b0..000000000 --- a/apps/site/src/content/design-system/development/guides/override/design/How overrides work/content.mdoc +++ /dev/null @@ -1,27 +0,0 @@ -Overrides work by giving you access to a subcomponent and allows you to override any of the 3 parts of its structure. GEL allows for multiple ways to introduce overrides to a component all of which use the same override API. - -### Top level API - -GEL overrides always take the form of an object, mapping the 3 parts of a subcomponent with a corresponding function. - -overrides = { \[subcomponent\]: { styles: (styles, props) => {}, attributes: (attributes, props) => {}, component: (props) => {} } } - -overrides \= { - -\[subcomponent\]: { - - styles: (styles, props) \=> {}, - - attributes: (attributes, props) \=> {}, - - component: (props) \=> {} - -} - -} - -/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } - -As part of override reconciliation that is handled by the top level component, each of these functions will be passed the props that the default subcomponent needs to work. Styles and attributes also receive the current default styles and attributes for that subcomponent allowing for you to reuse and modify, or for you to disregard them and use completely new styles and attributes. - -Another useful thing we pass to components as part of props is a 'state' object. The 'state' object contains all the props passed and any internal state used at the top-most level of the component. diff --git a/apps/site/src/content/design-system/development/guides/override/design/Override order/content.mdoc b/apps/site/src/content/design-system/development/guides/override/design/Override order/content.mdoc deleted file mode 100644 index 0ade5517a..000000000 --- a/apps/site/src/content/design-system/development/guides/override/design/Override order/content.mdoc +++ /dev/null @@ -1,63 +0,0 @@ -The override system contains different levels where you can introduce overrides to a component. The levels you can introduce an override are: - -- token: overrides coming from the theme/brand package -- brand: overrides coming from the \`brand\` prop on the '' wrapper -- component: overrides coming from the component \`override\` prop - -An application is able to introduce overrides at different levels and our components will perform a reconciliation and merge on all the overrides passed to it with the following specificity order (from lowest to highest): - -token -> brand -> component - -### Component overrides - -All GEL components take an \`override\` prop which is an object mapping of subcomponents and their overrides. - -Loading... - -### Brand overrides - -The GEL design system also allows for overrides at a brand level. This way you can specify an override once and all instances of the component within the GEL wrapper will use this override. To override at a brand level, add a key with the GEL component package name with an override value within the brand object. - -import wbc from '@westpac/wbc'; const brand = { ...wbc }; brand\['@westpac/switch'\] = { Label: { styles: (styles) => ({ ...styles, color: 'indigo', paddingRight: '2rem', }), }, Toggle: { styles: (styles, { checked }) => ({ ...styles, borderColor: 'indigo', backgroundColor: checked ? 'darkmagenta' : 'white', }), }, }; - -import wbc from '@westpac/wbc'; - -const brand \= { ...wbc }; - -brand\['@westpac/switch'\] \= { - - Label: { - - styles: (styles) \=> ({ - - ...styles, - - color: 'indigo', - - paddingRight: '2rem', - - }), - - }, - - Toggle: { - - styles: (styles, { checked }) \=> ({ - - ...styles, - - borderColor: 'indigo', - - backgroundColor: checked ? 'darkmagenta' : 'white', - - }), - - }, - - }; - -/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } - -### Token overrides - -As we are a multi-brand design system, we allow for each of the brands to have brand specific styling in their components. The GEL team handles this by adding them directly into the brand package that is used by applications. These overrides are not able to be directly accessed by developers as they are in the brand package but developers are able to override them by introducing their own overrides at a higher specificity level. diff --git a/apps/site/src/content/design-system/development/guides/override/design/Structure/content.mdoc b/apps/site/src/content/design-system/development/guides/override/design/Structure/content.mdoc deleted file mode 100644 index a5fc841a6..000000000 --- a/apps/site/src/content/design-system/development/guides/override/design/Structure/content.mdoc +++ /dev/null @@ -1,31 +0,0 @@ -All subcomponents are structured in the same way and are comprised of three main parts: - -**Component** - -The react component that will be rendered. - -const Component = (props) =>
- -const Component \= (props) \=>
- -/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } - -**Styles** - -The css styles that are applied. Note: We use [emotion](https://emotion.sh/docs/introduction) style objects in our components. - -const styles = () => ({ backgroundColor: '#d5002b', color: '#fff' }) - -const styles \= () \=> ({ backgroundColor: '#d5002b', color: '#fff' }) - -/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } - -**Attributes** - -Properties that are spread over the component. - -const attributes = () => ({'aria-label': 'label', 'data-js': 'attribute'}) - -const attributes \= () \=> ({'aria-label': 'label', 'data-js': 'attribute'}) - -/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } diff --git a/apps/site/src/content/design-system/development/guides/override/design/Subcomponents/content.mdoc b/apps/site/src/content/design-system/development/guides/override/design/Subcomponents/content.mdoc deleted file mode 100644 index a153138b4..000000000 --- a/apps/site/src/content/design-system/development/guides/override/design/Subcomponents/content.mdoc +++ /dev/null @@ -1,7 +0,0 @@ -Overrides should be used sparingly as the components in the system have been designed to work across multiple touch points and changing too much of a component can lead to an inconsistent experience for users. - -GEL components are typically composed of many different **subcomponents**. Let's take a look at the \`@westpac/switch\` as an example: - -Loading... - -The usage of the component is pretty straight forward with a single self contained import, but under the hood there are multiple **subcomponents** such as \`Switch\`, \`Toggle\` & \`Label\` with various styles and attributes that compose the \`@westpac/switch\` component. The component developer docs list all the subcomponents that make up a component. diff --git a/apps/site/src/content/design-system/development/guides/override/index.yaml b/apps/site/src/content/design-system/development/guides/override/index.yaml deleted file mode 100644 index a0363ddc0..000000000 --- a/apps/site/src/content/design-system/development/guides/override/index.yaml +++ /dev/null @@ -1,11 +0,0 @@ -name: Override -description: >- - As part of the Westpac GEL design system we have introduced an override system - that allows developers to customise different parts of a component for their - development needs. -design: - - title: Subcomponents - - title: Structure - - title: How overrides work - - title: Override order -accessibility: [] diff --git a/apps/site/src/utils/format.ts b/apps/site/src/utils/format.ts index f93fdc5f0..d65e7adfd 100644 --- a/apps/site/src/utils/format.ts +++ b/apps/site/src/utils/format.ts @@ -3,14 +3,14 @@ export function formatComponentSlug(component: string) { return name.replace(/-/g, ' '); } -export function formatNavItems(navList: string[]) { +export function formatNavItems(navList: { name: string; slug: string }[]) { const navItems: any[] = []; - navList.forEach(path => { - const params = path.split('/'); + navList.forEach(({ slug, name }) => { + const params = slug.split('/'); let curr = navItems; params.forEach((param, i) => { if (i === params.length - 1) { - curr.push({ label: param, path }); + curr.push({ label: name, path: slug }); } else { let exists = false; curr.forEach(item => { From 21decce7a66b67cd7f5992155e63a0c82a69aa38 Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Fri, 10 Nov 2023 14:34:12 +1000 Subject: [PATCH 10/51] markdown fix --- .../age-school-year/design/undefined/content.mdoc | 8 ++++---- .../calls-to-action-(ctas)/design/undefined/content.mdoc | 2 +- .../dates-days-time/design/undefined/content.mdoc | 2 +- .../people-diversity/design/undefined/content.mdoc | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/site/src/content/design-system/content/guidelines/age-school-year/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/age-school-year/design/undefined/content.mdoc index 0f350c765..b94474832 100644 --- a/apps/site/src/content/design-system/content/guidelines/age-school-year/design/undefined/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/age-school-year/design/undefined/content.mdoc @@ -3,7 +3,7 @@ Use numerals, not words. For example: > Do: 18 -> +> > Don’t: eighteen --- @@ -13,12 +13,12 @@ For individuals, use ‘years old’ or ‘year old’, depending on the context For example: > If you’re under 30 years old… -> +> > We asked an 18 year old… -> +> > We asked a group of 18 year olds… -*Note: Don’t use hyphens.* +_Note: Don’t use hyphens._ --- diff --git a/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/design/undefined/content.mdoc index 5009343da..a9a5dc5bb 100644 --- a/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/design/undefined/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/calls-to-action-(ctas)/design/undefined/content.mdoc @@ -52,7 +52,7 @@ For example: > > **Cross-device:** Go to, select, scroll, choose -_Note: ‘Click’ doesn’t adhere to the_ [\_Accessibility & Inclusion Guidelines_](https://www.w3.org/WAI/tips/writing/)_._ +_Note: ‘Click’ doesn’t adhere to the_ [\_Accessibility & Inclusion Guidelines\_](https://www.w3.org/WAI/tips/writing/)_._ --- diff --git a/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/undefined/content.mdoc index 1c1a13cd7..edf6f20d5 100644 --- a/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/undefined/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/undefined/content.mdoc @@ -74,7 +74,7 @@ If you need to specify the time zone, use the following format: - Westpac -8.30am-5pm (Sydney time), Mon-Fri + 8.30am-5pm (Sydney time), Mon-Fri - St George diff --git a/apps/site/src/content/design-system/content/guidelines/people-diversity/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/people-diversity/design/undefined/content.mdoc index a39d22f53..38864d401 100644 --- a/apps/site/src/content/design-system/content/guidelines/people-diversity/design/undefined/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/people-diversity/design/undefined/content.mdoc @@ -30,7 +30,7 @@ For example: > > Don’t: Blind people -_Note: Refer to the_ [\_Accessibility GEL Principles_](https://gel.westpacgroup.com.au/principles/accessibility/) _for more information on designing for an inclusive audience._ +_Note: Refer to the_ [\_Accessibility GEL Principles\_](https://gel.westpacgroup.com.au/principles/accessibility/) _for more information on designing for an inclusive audience._ --- From cd6b47d1724d0295b92af3317805f6703511d7d8 Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Fri, 10 Nov 2023 14:37:04 +1000 Subject: [PATCH 11/51] fix --- .../components/content-tabs/components/document-renderer.tsx | 2 +- apps/site/src/components/document-renderer/layout/index.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx index 641c863b2..7a3db9ab2 100644 --- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx +++ b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx @@ -2,7 +2,7 @@ import { DocumentRendererProps } from '@keystatic/core/renderer'; import { Code as InlineCode, Link } from '@/components/content-blocks/typography'; import { Code, Divider, Heading, List, Paragraph } from '@/components/document-renderer'; -import { Layout } from '@/components/document-renderer/layout/layout.component'; +import { Layout } from '@/components/document-renderer/layout'; export const DOCUMENT_RENDERERS: Required['renderers'] = { block: { diff --git a/apps/site/src/components/document-renderer/layout/index.ts b/apps/site/src/components/document-renderer/layout/index.ts index f06103070..6057beac4 100644 --- a/apps/site/src/components/document-renderer/layout/index.ts +++ b/apps/site/src/components/document-renderer/layout/index.ts @@ -1,2 +1,2 @@ -export * from './heading.component'; -export * from './heading.types'; +export * from './layout.component'; +export * from './layout.types'; From a8bbe17f33c2ecd4bea795937998454ff9936d9b Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Fri, 10 Nov 2023 14:49:51 +1000 Subject: [PATCH 12/51] fix --- apps/site/src/app/layout.tsx | 1 - .../guidelines/dates-days-time/design/undefined/content.mdoc | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx index ffc4de835..74a1a3e15 100644 --- a/apps/site/src/app/layout.tsx +++ b/apps/site/src/app/layout.tsx @@ -1,7 +1,6 @@ import './styles/globals.css'; import { type Metadata } from 'next'; -import { StickyFooter } from '@/components/sticky-footer'; import { ThemeProvider } from '@/components/theme'; export const metadata: Metadata = { diff --git a/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/undefined/content.mdoc b/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/undefined/content.mdoc index edf6f20d5..1c1a13cd7 100644 --- a/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/undefined/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/dates-days-time/design/undefined/content.mdoc @@ -74,7 +74,7 @@ If you need to specify the time zone, use the following format: - Westpac - 8.30am-5pm (Sydney time), Mon-Fri +8.30am-5pm (Sydney time), Mon-Fri - St George From 940c5a54cc449a3016b2f47ab78185148de70f21 Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Fri, 10 Nov 2023 15:14:00 +1000 Subject: [PATCH 13/51] removing the .mdoc on the check --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f1155709b..3f01ad35b 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "build:watch": "turbo run build:watch --filter=./packages/* --no-daemon", "check-types": "turbo run check-types --filter=./packages/* --no-daemon", "dev": "turbo run dev --parallel --no-daemon", - "format": "prettier --check \"**/{.vscode/*,*.ts,*.tsx,*.js,*.json,*.md,*.mdoc}\"", + "format": "prettier --check \"**/{.vscode/*,*.ts,*.tsx,*.js,*.json,*.md}\"", "format:fix": "prettier --write \"**/{.vscode/*,*.ts,*.tsx,*.js,*.json,*.md,*.mdoc}\"", "lint": "turbo run lint --no-daemon", "lint:fix": "turbo run lint:fix --no-daemon", From 9c8a166431fd53b9a26886acfdbb6e68edd09088 Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Fri, 10 Nov 2023 15:37:23 +1000 Subject: [PATCH 14/51] closes #272 changing color --- .../app/(home)/components/circle-logo/circle-logo.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/app/(home)/components/circle-logo/circle-logo.component.tsx b/apps/site/src/app/(home)/components/circle-logo/circle-logo.component.tsx index 8c912edca..9330df6df 100644 --- a/apps/site/src/app/(home)/components/circle-logo/circle-logo.component.tsx +++ b/apps/site/src/app/(home)/components/circle-logo/circle-logo.component.tsx @@ -4,7 +4,7 @@ export function CircleLogo({ className, children }: { children: React.ReactNode; return ( From 0a5e9ce23506f2b595ceb3fb6d6ec7345175d4f5 Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Fri, 10 Nov 2023 16:13:12 +1000 Subject: [PATCH 15/51] fixes #270 menu styles --- .../components/list-box-option/list-box-option.styles.ts | 2 +- .../brand-select/components/list-box/list-box.component.tsx | 6 +++++- .../brand-select/components/popover/popover.component.tsx | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/site/src/app/(home)/components/brand-select/components/list-box/components/list-box-option/list-box-option.styles.ts b/apps/site/src/app/(home)/components/brand-select/components/list-box/components/list-box-option/list-box-option.styles.ts index 179d279f9..94b293f93 100644 --- a/apps/site/src/app/(home)/components/brand-select/components/list-box/components/list-box-option/list-box-option.styles.ts +++ b/apps/site/src/app/(home)/components/brand-select/components/list-box/components/list-box-option/list-box-option.styles.ts @@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants'; export const styles = tv( { - base: 'flex h-10 cursor-pointer items-center justify-between border-t border-t-border bg-white px-3 py-[0.625rem] transition-colors first:border-t-0 hover:bg-light focus:bg-light', + base: 'flex h-10 cursor-pointer items-center justify-between border-t border-t-border bg-white px-1 py-[0.625rem] transition-colors first:border-t-0 hover:bg-light focus:bg-light', variants: { isFocused: { true: 'bg-light', diff --git a/apps/site/src/app/(home)/components/brand-select/components/list-box/list-box.component.tsx b/apps/site/src/app/(home)/components/brand-select/components/list-box/list-box.component.tsx index c91abd7e7..670629912 100644 --- a/apps/site/src/app/(home)/components/brand-select/components/list-box/list-box.component.tsx +++ b/apps/site/src/app/(home)/components/brand-select/components/list-box/list-box.component.tsx @@ -12,7 +12,11 @@ export function ListBox(props: ListBoxProps) { const { listBoxProps } = useListBox(props, state, listBoxRef); return ( -