Merge branch 'develop' into 459-design-system-docs-dividers-on-the-co…

…de-tab-not-full-width

apps/site/src/app/design-system/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx

@@ -2,6 +2,7 @@
 
 import { DocumentRenderer } from '@keystatic/core/renderer';
 import { Grid, Item, Select } from '@westpac/ui';
+import { useSearchParams } from 'next/navigation';
 import { useId, useState } from 'react';
 
 import { Container } from '@/app/design-system/components';
@@ -30,12 +31,14 @@ const FILTERS = [
 export function AccessibilityContent({ accessibilitySections, accessibilityDemo }: AccessibilityContentProps) {
   const [filter, setFilter] = useState<VisionFilterProps['value']>();
   const id = useId();
+  const searchParams = useSearchParams();
+  const brand = searchParams.get('brand') || 'wbc';
 
   return (
     <>
       {accessibilityDemo && (
         <Section className="border-t-0">
-          <Container className="pt-5">
+          <Container className="pt-7">
             <Heading level={2} className="mb-4 sm:mb-7">
               Colour impairment demonstration
             </Heading>
@@ -44,11 +47,15 @@ export function AccessibilityContent({ accessibilitySections, accessibilityDemo
                 <Text>
                   All components are designed and tested to ensure colour contrast ratios comply with the WCAG 2.1 AA
                   specification. Select a filter from the list below to see how this component would appear to someone
-                  with a: <Link href="#">colour vision impairment</Link>.
+                  with a:{' '}
+                  <Link href={`/design-system/accessibility/colour-vision-impairment?brand=${brand}`}>
+                    colour vision impairment
+                  </Link>
+                  .
                 </Text>
               </Item>
             </Grid>
-            <div className="mb-4 flex items-center bg-light p-4">
+            <div className="flex items-center bg-light p-4">
               <label htmlFor={id} className="mr-[1rem]">
                 Select filter
               </label>

apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx

@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 
 import { Container } from '@/app/design-system/components';
 import { Colors } from '@/components/component-blocks/colors/colors.component';
+import { ImageCaption } from '@/components/component-blocks/components/image-caption';
 import { Icons } from '@/components/component-blocks/icons/icons.component';
 import { Logos } from '@/components/component-blocks/logos/logos.component';
 import { Pictograms } from '@/components/component-blocks/pictograms/pictograms.component';
@@ -47,6 +48,7 @@ export function DesignContent({ designSections, description, relatedComponents,
                   pictograms: () => <Pictograms />,
                   symbols: () => <Symbols />,
                   colors: props => <Colors palette={props.palette} />,
+                  imageCaption: props => <ImageCaption text={props.text} />,
                 }}
               />
             </Container>

apps/site/src/app/design-system/[...component]/components/header/header.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'sticky top-0 z-50 flex w-full items-center gap-2 bg-hero px-2 py-3.5 antialiased transition-colors sm:px-4 md:top-[-10.125rem] md:h-[14.25rem] md:items-end',
+      base: 'sticky top-0 z-10 flex w-full items-center gap-2 bg-hero px-2 py-3.5 antialiased transition-colors sm:px-4 md:top-[-10.125rem] md:h-[14.25rem] md:items-end',
       gridButton: 'flex h-6 items-stretch gap-[0.125rem] p-1',
       gridButtonWrapper: 'fixed right-2 top-2 hidden items-center text-white sm:flex',
       hamburgerButton: 'fixed left-0 top-0 block h-4 w-4 translate-y-[-0.125rem] px-2 py-3.5 sm:left-2 lg:hidden',
@@ -12,7 +12,7 @@ export const styles = tv(
     variants: {
       fixed: {
         true: {
-          base: 'items-center',
+          base: 'items-center shadow-[0_2px_5px_rgba(0,0,0,0.3)]',
           title: '',
         },
         false: {

apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx

@@ -57,9 +57,9 @@ export function Sidebar({ items }: SidebarProps) {
     <>
       <div
         className={clsx(
-          'fixed top-0 z-[60] flex h-full w-[18.75rem] grow-0 flex-col border-r-0 bg-white text-text shadow-2xl transition-transform ease-in-out lg:bottom-0 lg:h-auto lg:-translate-x-0 lg:overflow-x-hidden lg:border-r lg:border-r-border lg:shadow-none',
+          'fixed top-0 z-[60] flex h-full w-[18.75rem] grow-0 flex-col border-r-0 bg-white text-text transition-transform ease-in-out lg:bottom-0 lg:h-auto lg:-translate-x-0 overflow-x-hidden lg:border-r lg:border-r-border',
           {
-            '-translate-x-full overflow-x-hidden': !open, //hide sidebar to the left when closed
+            '-translate-x-full': !open, //hide sidebar to the left when closed
           },
         )}
         ref={outsideRef}

apps/site/src/components/component-blocks/components/image-caption/image-caption.component.tsx

@@ -0,0 +1,6 @@
+import { styles } from './image-caption.style';
+import { type ImageCaptionProps } from './image-caption.types';
+
+export const ImageCaption = ({ text }: ImageCaptionProps) => {
+  return <p className={styles({})}>{text}</p>;
+};

apps/site/src/components/component-blocks/components/image-caption/image-caption.preview.tsx

@@ -0,0 +1,11 @@
+import { component, fields } from '@keystatic/core';
+
+export const imageCaption = component({
+  label: 'Image Caption',
+  preview: props => <>{props.fields.text.value || ''}</>,
+  schema: {
+    text: fields.text({
+      label: 'Image Caption',
+    }),
+  },
+});

apps/site/src/components/component-blocks/components/image-caption/image-caption.style.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'typography-body-10 mb-5 mt-2 text-muted',
+});

apps/site/src/components/component-blocks/components/image-caption/image-caption.types.ts

@@ -0,0 +1,3 @@
+export type ImageCaptionProps = {
+  text?: string;
+};

apps/site/src/components/component-blocks/components/image-caption/index.ts

@@ -0,0 +1,2 @@
+export * from './image-caption.component';
+export * from './image-caption.types';

apps/site/src/components/component-blocks/foundation-blocks.tsx

@@ -1,4 +1,5 @@
 import { colors } from './colors/colors.preview';
+import { imageCaption } from './components/image-caption/image-caption.preview';
 import { icons } from './icons/icons.preview';
 import { logos } from './logos/logos.preview';
 import { pictograms } from './pictograms/pictograms.preview';
@@ -10,4 +11,5 @@ export const foundationBlocks = {
   logos,
   pictograms,
   symbols,
+  imageCaption,
 };

apps/site/src/components/content-blocks/typography/typography.component.tsx

@@ -1,7 +1,10 @@
 import { NewWindowIcon } from '@westpac/ui/icon';
 import NextLink, { LinkProps } from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import { VariantProps } from 'tailwind-variants';
 
+import { BrandKey } from '@/app/types/brand.types';
+
 import { linkStyles } from './typography.styles';
 
 export function Text({ children }: { children?: React.ReactNode }) {
@@ -14,15 +17,18 @@ export function Link({
   href,
   ...props
 }: React.PropsWithChildren<LinkProps & VariantProps<typeof linkStyles>>) {
+  const searchParams = useSearchParams();
+  const brand = (searchParams.get('brand') ?? 'wbc') as BrandKey;
+  const isExternalLink = href.toString().indexOf('http') === 0 || href.toString().indexOf('mailto') === 0;
   return (
     <NextLink
-      href={href}
-      target={href.toString().indexOf('http') === 0 ? '_blank' : '_self'}
+      href={isExternalLink ? href : `${href}?brand=${brand}`}
+      target={isExternalLink ? '_blank' : '_self'}
       className={linkStyles({ color })}
       {...props}
     >
       {children}
-      <NewWindowIcon size="xsmall" className="ml-1" />
+      {isExternalLink && <NewWindowIcon size="xsmall" className="ml-1" />}
     </NextLink>
   );
 }

apps/site/src/components/related-info/related-info.component.tsx

@@ -2,8 +2,10 @@ import { DocumentRenderer } from '@keystatic/core/renderer';
 import { Grid, Item } from '@westpac/ui';
 import { ArrowRightIcon, CubeIcon, GenericFileIcon } from '@westpac/ui/icon';
 import NextLink, { LinkProps } from 'next/link';
+import { useSearchParams } from 'next/navigation';
 
 import { Container } from '@/app/design-system/components';
+import { type BrandKey } from '@/app/types/brand.types';
 
 import { Section } from '../content-blocks/section';
 import { Heading } from '../document-renderer';
@@ -13,6 +15,8 @@ import { RelatedInfoProps } from './related-info.types';
 
 export function RelatedInfo({ relatedComponents = [], relatedArticles }: RelatedInfoProps) {
   const relatedComponentsEmpty = relatedComponents?.length < 1;
+  const searchParams = useSearchParams();
+  const brand = (searchParams.get('brand') ?? 'wbc') as BrandKey;
   return (
     <Section className="bg-white">
       <Container className="">
@@ -30,7 +34,7 @@ export function RelatedInfo({ relatedComponents = [], relatedArticles }: Related
                 {relatedComponents.map(({ title, slug }) => {
                   return (
                     <li key={title}>
-                      <Link href={`/design-system/${slug}?brand=wbc`}>{title}</Link>
+                      <Link href={`/design-system/${slug}?brand=${brand}`}>{title}</Link>
                     </li>
                   );
                 })}

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](https://gel.westpacgroup.com.au/design-system/foundation/colours)
+[Access the design system for the digital brand foundations](/design-system/foundation/colour)

apps/site/src/content/articles/code-with-gel/content.mdoc

@@ -34,6 +34,6 @@ In this scenario, you can consume the React JS or vanilla HTML code in your proj
 
 [Read more about the levels of design system adoption](/articles/build-strong-brands)
 
-[Access the design system](https://gel.westpacgroup.com.au/design-system)
+[Access the design system](/design-system)
 
-[Get started using the GEL design system](https://gel.westpacgroup.com.au/design-system/development/get-started?b=WBC)
+[Get started using the GEL design system](/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](https://gel.westpacgroup.com.au/design-system/foundation/colours)
+[View the colour system](/design-system/foundation/colour)
 
 ### **Accessibility**
 

apps/site/src/content/articles/design-with-gel/content.mdoc

@@ -20,7 +20,7 @@ UX designers can access component and pattern rationale through Confluence, use
 
 UI designers can access design assets from the [Figma Libraries](/articles/figma-libraries), and get up to speed on our brand and design standards such as [Typography](/articles/typography) and [Colour](/articles/colour) elsewhere on the GEL website. Assemble high quality mock-ups and prototypes using the [Figma Libraries](/articles/figma-libraries) while [Protoform](https://gel.westpacgroup.com.au/protoform) is another useful tool for seeing the behaviour of components and patterns.
 
-Developers can go straight to the [design system](https://gel.westpacgroup.com.au/design-system) to read implementation guidelines and access code, while also referencing [Protoform](https://gel.westpacgroup.com.au/protoform), our interactive demonstration of common form patterns. [Protoform](https://gel.westpacgroup.com.au/protoform) provides best-practice consideration for responsive layout, WCAG accessibility compliance, user experience and brand requirements.
+Developers can go straight to the [design system](/design-system) to read implementation guidelines and access code, while also referencing [Protoform](https://gel.westpacgroup.com.au/protoform), our interactive demonstration of common form patterns. [Protoform](https://gel.westpacgroup.com.au/protoform) provides best-practice consideration for responsive layout, WCAG accessibility compliance, user experience and brand requirements.
 
 ## I want to design the interface my way
 

apps/site/src/content/articles/figma-libraries/content.mdoc

@@ -14,7 +14,7 @@ The following Figma libraries are _only_ available for designers working within
 - [GEL Pictograms](https://www.figma.com/file/sWRKQTkG8PyNtGNKwlLReo/GEL-Pictograms)
 - [GEL Logos & Symbols](https://www.figma.com/file/WojlFfS0UyU0i3BPvZiJf0/GEL-Logos-and-Symbols)
 
-Each of the Component libraries are identical, except for the colours, fonts and logos used within them, which are specific to each brand. This is how we manage the [multibrand](/multi-brand-made-easy) system.
+Each of the Component libraries are identical, except for the colours, fonts and logos used within them, which are specific to each brand. This is how we manage the [multibrand](/articles/multi-brand-made-easy) system.
 
 The components from the _GEL Icons_ and _GEL Logos & Symbols_ libraries are not brand specific. The _GEL Pictograms_ library contains the components for every brand in the one library.
 
@@ -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/foundation/colours) 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](/design-system/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**
 
@@ -62,7 +62,7 @@ As our brands evolve, we’re constantly updating and refining the Figma Librari
 
 The Design System covers the core UI elements common to most user interfaces. The majority of the elements you need should be available. However, every project is different and sometimes requires bespoke elements that are not available in the Design System. If that’s the case, of course you can create what you need, just use the brand colour palette, and don’t 'adjust' existing components.
 
-If you are trying to create something new, our general recommendation is to check with other projects or teams to see if they have done something similar. If the problem has already been solved elsewhere, don’t re-invent the wheel. Also, if this is something that other projects require, it might be candidate for a new Global GEL component. Read more about [how to request a new component.](/articles/collaboration-is-key)
+If you are trying to create something new, our general recommendation is to check with other projects or teams to see if they have done something similar. If the problem has already been solved elsewhere, don’t re-invent the wheel. Also, if this is something that other projects require, it might be candidate for a new Global GEL component. Read more about [how to request a new component.](/articles/collaboration-for-change)
 
 ### **Who do I contact for help?**
 

apps/site/src/content/articles/iconography/content.mdoc

@@ -34,7 +34,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](https://gel.westpacgroup.com.au/design-system/foundation/pictograms?b=WBC)
+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/foundation/pictogram)
 
 {% layout layout=[5, 5] %}
 {% layout-area %}
@@ -195,4 +195,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.](https://gel.westpacgroup.com.au/design-system/foundation/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/foundation/icon)

apps/site/src/content/articles/multi-brand-made-easy/content.mdoc

@@ -94,7 +94,7 @@ As mentioned, the GEL provides a suite of highly crafted tools and resources. Av
 
 For designers there's the [Figma Libraries.](/articles/figma-libraries) A complete set of multi-brand, accessible design assets to help you create high quality, consistent, experiences across all our digital touch-points.
 
-For developers there's the [Front End Development Framework.](https://gel.westpacgroup.com.au/design-system) This extensive (React) code base is a mirror image of the Figma library. All assets are categorised and labeled in exactly the same way to ensure that we're all speaking the same language.
+For developers there's the [Front End Development Framework.](/design-system) This extensive (React) code base is a mirror image of the Figma library. All assets are categorised and labeled in exactly the same way to ensure that we're all speaking the same language.
 
 Both the Figma Library and the FED Framework use automated multi-brand features to leverage the power of the Design Systems theming capability. Not only does this automation significantly reduce the time and effort required to roll out an experience across all our brands it also removes the margin for error and maintains consistency throughout the customer journey.
 

apps/site/src/content/articles/patterns/content.mdoc

@@ -4,22 +4,22 @@ We have a range of patterns across multiple projects and streams of work. Each p
 
 Apply these patterns when creating application forms.
 
-[See the Originations patterns.](https://gel.westpacgroup.com.au/articles/originations-experience)
+[See the Originations patterns.](/articles/originations-experience)
 
 ## Banking
 
 Apply these patterns when delivering features and experiences in our online banking applications.
 
-[See the Banking patterns.](https://gel.westpacgroup.com.au/articles/banking)
+[See the Banking patterns.](/articles/banking)
 
 ## Website
 
 Apply these patterns when you are delivering a page on the website.
 
-[https://gel.westpacgroup.com.au/articles/website](https://gel.westpacgroup.com.au/articles/website)
+[See the Website patterns.](/articles/website)
 
 ## Notifications
 
 Apply these patterns when you are delivering a message to customers using our notification channels.
 
-[See the Notifications patterns.](https://gel.westpacgroup.com.au/articles/notifications)
+[See the Notifications patterns.](/articles/notifications)