Merge remote-tracking branch 'origin/develop'

# Conflicts:
#	apps/site/src/content/design-system/components/breadcrumb/accessibility/accessibility-features/content.mdoc

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 (
-    <NextLink href={href} target={isExternalLink ? '_blank' : '_self'} className={linkStyles({ color })} {...props}>
+    <NextLink
+      href={isExternalLink || isArticle || isDesignSystem ? href : `/design-system/${brand}${href.toString()}`}
+      target={isExternalLink ? '_blank' : '_self'}
+      className={linkStyles({ color })}
+      {...props}
+    >
       {children}
       {isExternalLink && <NewWindowIcon size="xsmall" className="ml-1" />}
     </NextLink>

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)

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)

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**
 

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**
 

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)

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.
 

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)

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)

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.

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
 

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.

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
 

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

@@ -32,9 +32,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

apps/site/src/content/design-system/components/breadcrumb/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:
 
 ### Operable
 

apps/site/src/content/design-system/components/button-group/design/dos-and-donts/content.mdoc

@@ -1,3 +1,3 @@
 - Only use up to 3 items in a group
 - Do keep the labels short to aid scanability and avoid text wrapping
-- If you have long labels, or more than 3 options, use [radio buttons](/design-system/wbc/components/radios).
+- If you have long labels, or more than 3 options, use [radio buttons](/components/radios).

apps/site/src/content/design-system/components/button-group/design/user-experience/content.mdoc

@@ -4,4 +4,4 @@ As button groups tend to break on small screen sizes especially when using more
 
 Consider the two-button button group when designing forms for questions with yes/no answers.
 
-It's important to note that button groups differ from [switches](/design-system/wbc/components/switch).
+It's important to note that button groups differ from [switches](/components/switch).

apps/site/src/content/design-system/components/button-group/design/visual-design/content.mdoc

@@ -1 +1 @@
-Button groups inherit styling from buttons, see [Buttons](/design-system/wbc/components/buttons) for more information.
+Button groups inherit styling from buttons, see [Buttons](/components/button) for more information.

apps/site/src/content/design-system/components/button/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:
 
 ### Operable
 

apps/site/src/content/design-system/components/checkbox-group/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:
 
 ### Operable
 

apps/site/src/content/design-system/components/collapsible/design/examples/content.mdoc

@@ -1,6 +1,6 @@
 ### Basic
 
-Similar to [accordions](/design-system/wbc/components/accordion) or [tabs](/design-system/wbc/components/tabs), a Collapsible toggles to open and reveal more content below. They come in four sizes, the different sizes are reflected in the font size of the link, these sizes correspond to the sizes of the other form elements.
+Similar to [accordions](/components/accordion) or [tabs](/components/tabs), a Collapsible toggles to open and reveal more content below. They come in four sizes, the different sizes are reflected in the font size of the link, these sizes correspond to the sizes of the other form elements.
 
 ```jsx
 <Collapsible text="Drink me" size="medium">

apps/site/src/content/design-system/components/compacta/accessibility/accessibility-notes/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:
 
 ### Operable
 

apps/site/src/content/design-system/components/date-picker/design/dos-and-donts/content.mdoc

@@ -1 +1 @@
-Never use a date picker for a memorable date, ie [Date of birth](/design-system/wbc/patterns/dates/date-of-birth)
+Never use a date picker for a memorable date, ie [Date of birth](/patterns/dates/date-of-birth)

apps/site/src/content/design-system/components/input-group/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:
 
 ### Robust
 

apps/site/src/content/design-system/components/input/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
 

apps/site/src/content/design-system/components/link/accessibility/notes-on-accessibility/content.mdoc

@@ -1,6 +1,6 @@
 Links are a fundamental part of making an experience accessible, and key to navigation and providing access to products and services. By making links unambiguous through styling, placement, and copywriting we are upholding a high standard while reducing the chances of litigation.
 
-Here are some specific ways in which this component follows the 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.
+Here are some specific ways in which this component follows the 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.
 
 ### Perceivable
 

apps/site/src/content/design-system/components/link/design/standalone/content.mdoc

@@ -1,4 +1,4 @@
-The standalone option is to be used by itself, on its own line, and never within a sentence or paragraph. It must always be used with an [icon](/design-system/wbc/foundation/icons) before or after. The styling for a standalone link is "Text" colour text and "Link" colour icon. The underline appears on hover.
+The standalone option is to be used by itself, on its own line, and never within a sentence or paragraph. It must always be used with an [icon](/foundation/icons) before or after. The styling for a standalone link is "Text" colour text and "Link" colour icon. The underline appears on hover.
 
 ```jsx
 <div className="flex flex-col gap-5">

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

@@ -6,4 +6,4 @@ Standalone links produce an underline for the text on hover while inline links r
 
 ### Link lists
 
-The most accessible way to present a list of links is to use the [List component](/design-system/wbc/components/lists). It can be configured as a list of links which is better for screen reader users to navigate.
+The most accessible way to present a list of links is to use the [List component](/components/lists). It can be configured as a list of links which is better for screen reader users to navigate.