Merge pull request #490 from WestpacGEL/488-github-link-in-footer-not…

…-linked-correctly

488 GitHub link in footer not linked correctly

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

@@ -2,7 +2,6 @@
 
 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';
@@ -31,8 +30,6 @@ 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 (
     <>
@@ -48,10 +45,7 @@ export function AccessibilityContent({ accessibilitySections, accessibilityDemo
                   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={`/design-system/accessibility/colour-vision-impairment?brand=${brand}`}>
-                    colour vision impairment
-                  </Link>
-                  .
+                  <Link href="/design-system/accessibility/colour-vision-impairment">colour vision impairment</Link>.
                 </Text>
               </Item>
             </Grid>

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

@@ -37,10 +37,12 @@ export function Header({ className, title }: { className?: string; title?: strin
       </button>
 
       <div className={styles.gridButtonWrapper()}>
+        <span className="sr-only">Active breakpoint:</span>
         <span className="hidden font-bold sm:block md:hidden">SM</span>
         <span className="hidden font-bold md:block lg:hidden">MD</span>
         <span className="hidden font-bold lg:block">LG</span>
         <button
+          aria-hidden="true"
           className={styles.gridButton()}
           onClick={() => {
             return;

apps/site/src/components/sticky-footer/sticky-footer.component.tsx

@@ -48,7 +48,7 @@ export function StickyFooter() {
           <Link href="mailto:[email protected]">
             <EmailIcon />
           </Link>
-          <Link href="github.com/WestpacGEL">
+          <Link target="_blank" href="https://github.com/WestpacGEL/GEL-next">
             <GithubIcon />
           </Link>
         </div>

apps/site/src/content/design-system/development/get-started/design/installation/content.mdoc

@@ -13,7 +13,7 @@ Update `tailwind.config.js` to use the `withGEL` helper exported by `@westpac/ui
     /** @type {import('tailwindcss').Config} */
     const config = withGEL({
         relative: true,
-        content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/@westpac/ui/src/**/*.{js,ts,jsx,tsx,mdx}'],
+        content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/@westpac/ui/src/**/*.{js,ts,jsx,tsx}'],
         safelist: [],
     });
 
@@ -29,17 +29,17 @@ For applications using `brand fonts` add the following options config to the `wi
 
     const config = withGEL({
         relative: true,
-        content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/@westpac/ui/src/**/*.{js,ts,jsx,tsx,mdx}'],
+        content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/@westpac/ui/src/**/*.{js,ts,jsx,tsx}'],
         safelist: [],
         options: {
             brandFonts: {
             // path to font files
-            src: '/fonts', 
-            /** takes a single brand string e.g. 'wbc' or an array of brands. 
+            src: '/fonts',
+            /** takes a single brand string e.g. 'wbc' or an array of brands.
             If no brands are specified will import all brands by default */
-            brands: ['wbc', 'stg'], 
+            brands: ['wbc', 'stg'],
             },
         },
     });
 `} />
-```
+```

apps/site/src/content/design-system/development/guides/brand/design/using-brands/content.mdoc

@@ -9,4 +9,16 @@ The following example shows adding the `wbc` theme. You can add other valid bran
     ...
     </html>
 `} />
-```
+```
+
+### Targeting a specific brand with Tailwind CSS
+
+You can target a specific brand by using the `active-theme-[brand_name]` prefix. For example, to target the `wbc` brand, you can use the following prefix.
+
+```html
+<StaticCode language="jsx" code={`
+    <section>
+        <p class="text-text active-theme-wbc:text-primary">Budgeting for beginners</p>
+    </section>
+`} />
+```