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 7cf82347e..389f2b3b1 100644 --- a/apps/site/src/components/content-blocks/typography/typography.component.tsx +++ b/apps/site/src/components/content-blocks/typography/typography.component.tsx @@ -23,8 +23,16 @@ export function Link({ const params = useParams(); const brand = (params.brand ?? 'wbc') as BrandKey; const isExternalLink = href.toString().indexOf('http') === 0 || href.toString().indexOf('mailto') === 0; + const isArticle = href.toString().indexOf('/article') === 0; + const isDesignSystem = href.toString().indexOf('/design-system') === 0; + return ( - + {children} {isExternalLink && } diff --git a/apps/site/src/content/articles/build-strong-brands/content.mdoc b/apps/site/src/content/articles/build-strong-brands/content.mdoc index 966e2ade7..f725ea4b2 100644 --- a/apps/site/src/content/articles/build-strong-brands/content.mdoc +++ b/apps/site/src/content/articles/build-strong-brands/content.mdoc @@ -32,4 +32,4 @@ This is where things get really interesting. At level 3, not only are you fully So, as well as increasing the speed which your project can be created, it also means that any future branding and accessibility updates can be simpler, save time and money now and in the future. -[Access the design system for the digital brand foundations](/design-system/wbc/foundation/colour) +[Access the design system for the digital brand foundations](/foundation/colour) 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 78412c3d2..8ac30af42 100644 --- a/apps/site/src/content/articles/code-with-gel/content.mdoc +++ b/apps/site/src/content/articles/code-with-gel/content.mdoc @@ -36,4 +36,4 @@ In this scenario, you can consume the React JS or vanilla HTML code in your proj [Access the design system](/design-system) -[Get started using the GEL design system](/design-system/wbc/development/get-started) +[Get started using the GEL design system](/development/get-started) diff --git a/apps/site/src/content/articles/colour/content.mdoc b/apps/site/src/content/articles/colour/content.mdoc index 4240dfa14..b968a03f8 100644 --- a/apps/site/src/content/articles/colour/content.mdoc +++ b/apps/site/src/content/articles/colour/content.mdoc @@ -44,7 +44,7 @@ The Westpac group has a set of reserved, contextual colours used only for messag Each brand has a neutral colour with a set of 11 tints for subtle colouring. Several of these tints are already used in the primary palette for borders and backgrounds etc. The remaining tints can be used for additional colouring if required. -[View the colour system](/design-system/wbc/foundation/colour) +[View the colour system](/foundation/colour) ### **Accessibility** diff --git a/apps/site/src/content/articles/figma-libraries/content.mdoc b/apps/site/src/content/articles/figma-libraries/content.mdoc index d48459da5..10d35a999 100644 --- a/apps/site/src/content/articles/figma-libraries/content.mdoc +++ b/apps/site/src/content/articles/figma-libraries/content.mdoc @@ -40,7 +40,7 @@ Where possible, elements and components are responsive making them easier to res ## **The styles** -The component libraries use Styles to manage colours and some typography. The colour styles are aligned with the [colour palettes](/design-system/wbc/foundation/colour) of the GEL Design System. Sticking to these styles (rather than using hex values) will help ensure your design is on brand. It will also allow you to use the Themer plugin to easily switch your design to a different brand. See more about Themer below. +The component libraries use Styles to manage colours and some typography. The colour styles are aligned with the [colour palettes](/foundation/colour) of the GEL Design System. Sticking to these styles (rather than using hex values) will help ensure your design is on brand. It will also allow you to use the Themer plugin to easily switch your design to a different brand. See more about Themer below. ## **Fonts** diff --git a/apps/site/src/content/articles/iconography/content.mdoc b/apps/site/src/content/articles/iconography/content.mdoc index 8d9a4eae6..de6e7bc85 100644 --- a/apps/site/src/content/articles/iconography/content.mdoc +++ b/apps/site/src/content/articles/iconography/content.mdoc @@ -43,7 +43,7 @@ Icons should be used sparingly. Too many icons add clutter and confusion to the ### Icons v Pictograms -The GEL design system also provides a library of Pictograms. Unlike icons Pictograms are not intended to aid navigation or represent common actions like search and print. The primary purpose of Pictograms is brand embellishment. They’re designed to enhance the brand at specific points in the customer journey, we call these “brand moments”. Given their primary function Pictograms are not designed to be used at small sizes. They’re not drawn on the pixel grid and depending on the brand they may use colours that are not accessible. As a result Pictograms must always be larger than 36px. For more information and downloads please refer to the Design System [Pictograms](/design-system/wbc/foundation/pictogram) +The GEL design system also provides a library of Pictograms. Unlike icons Pictograms are not intended to aid navigation or represent common actions like search and print. The primary purpose of Pictograms is brand embellishment. They’re designed to enhance the brand at specific points in the customer journey, we call these “brand moments”. Given their primary function Pictograms are not designed to be used at small sizes. They’re not drawn on the pixel grid and depending on the brand they may use colours that are not accessible. As a result Pictograms must always be larger than 36px. For more information and downloads please refer to the Design System [Pictograms](/foundation/pictogram) {% layout layout=[5, 5] %} {% layout-area %} @@ -275,4 +275,4 @@ Consistency aids user comprehension of icons. Use the existing system icons when ## SVG icons -With the release of the GEL Design System v2.0 we superseded the icon font in favour of an SVG (scalable vector graphics) implementation. Using SVGs ensures the highest quality rendering on all devices both now and into the future. SVGs can also be styled using code avoiding the need for multiple versions of the same icon. SVGs also comply with AA accessibility requirements. This is a more flexible and accessible approach. For more technical information (embedding, styling, sizing etc) and to download the SVG icons please refer to the Design System [Iconography.](/design-system/wbc/foundation/icon) +With the release of the GEL Design System v2.0 we superseded the icon font in favour of an SVG (scalable vector graphics) implementation. Using SVGs ensures the highest quality rendering on all devices both now and into the future. SVGs can also be styled using code avoiding the need for multiple versions of the same icon. SVGs also comply with AA accessibility requirements. This is a more flexible and accessible approach. For more technical information (embedding, styling, sizing etc) and to download the SVG icons please refer to the Design System [Iconography.](/foundation/icon) diff --git a/apps/site/src/content/articles/notifications/content.mdoc b/apps/site/src/content/articles/notifications/content.mdoc index 9d68d7a49..c4a1b9fb8 100644 --- a/apps/site/src/content/articles/notifications/content.mdoc +++ b/apps/site/src/content/articles/notifications/content.mdoc @@ -79,7 +79,7 @@ These Sequences also demonstrate the relevant notification patterns: ### Step 3: Draft content -Using the [Digital Writing Guidelines](/design-system/wbc/content/writing-for-digital) and [WBC Brand Tone Of Voice Guidelines](https://confluence.srv.westpac.com.au/display/DXD/CD+-+Content+Design?preview=/1190737850/1236813014/DB%200412%20WBC%20Update%20to%20TOV%20Guidelines%20Short%20V01.pdf) (Westpac employees only), draft your message content for the various notification types. +Using the [Digital Writing Guidelines](/content/writing-for-digital) and [WBC Brand Tone Of Voice Guidelines](https://confluence.srv.westpac.com.au/display/DXD/CD+-+Content+Design?preview=/1190737850/1236813014/DB%200412%20WBC%20Update%20to%20TOV%20Guidelines%20Short%20V01.pdf) (Westpac employees only), draft your message content for the various notification types. You should adopt the patterns as they are, however, you’ll need to adjust the copy so your message is fit for purpose. diff --git a/apps/site/src/content/articles/think-responsive/content.mdoc b/apps/site/src/content/articles/think-responsive/content.mdoc index 16607fe1f..152267b19 100644 --- a/apps/site/src/content/articles/think-responsive/content.mdoc +++ b/apps/site/src/content/articles/think-responsive/content.mdoc @@ -18,4 +18,4 @@ Obviously, we can’t use motion sensors and robotics to accomplish this the way [Read about the grid and how it helps achieve responsive design](/articles/the-grid) -[Access the grid from the design system](/design-system/wbc/foundation/grid) +[Access the grid from the design system](/foundation/grid) diff --git a/apps/site/src/content/articles/typography/content.mdoc b/apps/site/src/content/articles/typography/content.mdoc index debfb610a..783e1cc21 100644 --- a/apps/site/src/content/articles/typography/content.mdoc +++ b/apps/site/src/content/articles/typography/content.mdoc @@ -45,4 +45,4 @@ We’re hoping to establish a more robust system of spacing for our Typography s image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1666141371/cl9exjwys000ptc8i1ki2fsxh.png", alt: "The font sizes available in the design system", height: 1382, width: 1852} type="bodyWide" /%} -[Access the design system fonts](/design-system/wbc/foundation/font) +[Access the design system fonts](/foundation/font) diff --git a/apps/site/src/content/articles/using-fonts/content.mdoc b/apps/site/src/content/articles/using-fonts/content.mdoc index 2c72e329d..8971a885d 100644 --- a/apps/site/src/content/articles/using-fonts/content.mdoc +++ b/apps/site/src/content/articles/using-fonts/content.mdoc @@ -57,6 +57,6 @@ As a designer at Westpac the desktop fonts you require should be pre-installed o ### For developers -For those who work at Westpac we provide an internal link to the web font files in the [Downloads section of the Design System](/design-system/wbc/downloads). These fonts are stored securely on the internal network and only available to Westpac Group Developers. +For those who work at Westpac we provide an internal link to the web font files in the [Downloads section of the Design System](/downloads). These fonts are stored securely on the internal network and only available to Westpac Group Developers. **IMPORTANT:** Projects must ensure that the web fonts they wish to use are licensed for use on all the public domains, sub-domains, and or apps that will host and or display these fonts. diff --git a/apps/site/src/content/articles/website/content.mdoc b/apps/site/src/content/articles/website/content.mdoc index fae160a2d..752d49bec 100644 --- a/apps/site/src/content/articles/website/content.mdoc +++ b/apps/site/src/content/articles/website/content.mdoc @@ -73,7 +73,7 @@ Select the page pattern that will best support your goal. Each page pattern has #### Step 2 – Prepare your content -Referring to the page pattern and using the [Digital Writing Guidelines](/design-system/wbc/content/writing-for-digital), you can prepare your content. The page pattern will help you understand your content needs and the flow of your message. +Referring to the page pattern and using the [Digital Writing Guidelines](/content/writing-for-digital), you can prepare your content. The page pattern will help you understand your content needs and the flow of your message. #### Step 3 – Create your design 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 index d21700ece..96267fce4 100644 --- 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 @@ -1,5 +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/wbc/components/popover) 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/wbc/components/switch) 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. +- Removed the functionality to dismiss a popover by clicking anywhere else on the page. We still have the [Popover](/components/popover) 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](/components/switch) 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/components/autocomplete/accessibility/notes-on-accessibility/content.mdoc b/apps/site/src/content/design-system/components/autocomplete/accessibility/notes-on-accessibility/content.mdoc index d2bc4979f..c1c1dda86 100644 --- a/apps/site/src/content/design-system/components/autocomplete/accessibility/notes-on-accessibility/content.mdoc +++ b/apps/site/src/content/design-system/components/autocomplete/accessibility/notes-on-accessibility/content.mdoc @@ -1,4 +1,4 @@ -All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fall under the [four principles of accessibility](/design-system/wbc/accessibility/design-system-accessibility) – Perceivable, Operable, Understandable and Robust. Below are some specific ways in which this component follows these principles: +All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fall under the [four principles of accessibility](/accessibility/design-system-accessibility) – Perceivable, Operable, Understandable and Robust. Below are some specific ways in which this component follows these principles: ### Perceivable diff --git a/apps/site/src/content/design-system/components/autocomplete/index.yaml b/apps/site/src/content/design-system/components/autocomplete/index.yaml index efe92141a..8f8106ca5 100644 --- a/apps/site/src/content/design-system/components/autocomplete/index.yaml +++ b/apps/site/src/content/design-system/components/autocomplete/index.yaml @@ -31,9 +31,9 @@ accessibility: slug: notes-on-accessibility relatedComponents: - title: Icons - slug: /design-system/wbc/foundation/icon + slug: /foundation/icon - title: Text input - slug: /design-system/wbc/components/input + slug: /components/input code: - title: name: Development examples diff --git a/apps/site/src/content/design-system/components/breadcrumb/accessibility/accessibility-features/content.mdoc b/apps/site/src/content/design-system/components/breadcrumb/accessibility/accessibility-features/content.mdoc index d5babaa3e..58adf86d5 100644 --- a/apps/site/src/content/design-system/components/breadcrumb/accessibility/accessibility-features/content.mdoc +++ b/apps/site/src/content/design-system/components/breadcrumb/accessibility/accessibility-features/content.mdoc @@ -1,6 +1,6 @@ - The set of links is structured using an ordered list - A `