Merge pull request #260 from WestpacGEL/feature/components-accessibil…

…ity-tab-content

feat(docs): adding examples

apps/site/keystatic.config.ts

@@ -108,6 +108,8 @@ export default config({
               formatting: true,
               dividers: true,
               links: true,
+              images: true,
+              layouts: [[1, 1]],
               label: 'Design',
             }),
           }),

apps/site/src/components/code/code.inject-components.ts

@@ -28,7 +28,18 @@ export {
   ButtonDropdown,
   InputField,
   Modal,
+  Field,
   ProgressRope,
+  VisuallyHidden,
+  Pagination,
+  Popover,
+  Repeater,
+  SkipLink,
+  Compacta,
+  Form,
+  Selector,
+  Grid,
+  Item,
 } from '@westpac/ui';
 
 export {
@@ -55,6 +66,9 @@ export {
   VisibilityOffIcon,
   RefreshIcon,
   PhoneIcon,
+  SettingsIcon,
+  WatchIcon,
+  EmailIcon,
 } from '@westpac/ui/icon';
 
 export { GiftPictogram } from '@westpac/ui/pictogram';

apps/site/src/components/sticky-header/sticky-header.styles.ts

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'sticky top-0 z-[1] transition-shadow delay-0 duration-200 ease-[ease]',
+  base: 'sticky top-0 z-[11] transition-shadow delay-0 duration-200 ease-[ease]',
   variants: {
     shadow: {
       true: 'shadow-[0_8px_8px_rgba(0,0,0,0.24)]',

apps/site/src/content/articles/build-strong-brands/content.mdoc

@@ -33,4 +33,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 foundationsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/colours)
+[Access the design system for the digital brand foundations](https://gel.westpacgroup.com.au/design-system/foundation/colours)

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

@@ -35,6 +35,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 systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system)
+[Access the design system](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)
+[Get started using the GEL design system](https://gel.westpacgroup.com.au/design-system/development/get-started?b=WBC)

apps/site/src/content/articles/collaborate-for-change/content.mdoc

@@ -72,6 +72,6 @@ We take a rigorous, best practice, production & development inclusive approach t
 
 If you have a design problem you think is a problem shared we’ll investigate its potential to become a global solution.
 
-You can help us improve and evolve the Design System by raising bugs and suggestions in our [Github pageCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://github.com/WestpacGEL/GEL/issues).
+You can help us improve and evolve the Design System by raising bugs and suggestions in our [Github page](https://github.com/WestpacGEL/GEL/issues).
 
-To help us continuously improve our design patterns you can send your feedback to [[email protected].auCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:[email protected]).
+To help us continuously improve our design patterns you can send your feedback to [[email protected].au](mailto:[email protected]).

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

@@ -47,10 +47,10 @@ 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 systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/colours)
+[View the colour system](https://gel.westpacgroup.com.au/design-system/foundation/colours)
 
 ### **Accessibility**
 
-The Westpac group have committed to comply with WCAG 2.1 AA standards. This is both a social responsibility and a legal requirement. As a result, key colours and colour combinations have been rigorously tested to ensure contrast ratios comply with WCAG standards. The Design System’s colour section contains a basic guide to accessibility for each brand, however, we still encourage designers to always check colour contrast ratios during the design phase. The [Colour Contrast AnalyserCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.paciellogroup.com/resources/contrastanalyser/) is a useful tool for this purpose.
+The Westpac group have committed to comply with WCAG 2.1 AA standards. This is both a social responsibility and a legal requirement. As a result, key colours and colour combinations have been rigorously tested to ensure contrast ratios comply with WCAG standards. The Design System’s colour section contains a basic guide to accessibility for each brand, however, we still encourage designers to always check colour contrast ratios during the design phase. The [Colour Contrast Analyser](https://www.paciellogroup.com/resources/contrastanalyser/) is a useful tool for this purpose.
 
 The [Accessibility Matters](/articles/accessible-by-design) article provides more in-depth information on accessibility.

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

@@ -19,11 +19,11 @@ Right, how do I use it?
 
 First and foremost, usability and accessibility has to be the foundation from which we design. Luckily, GEL elements, components, and patterns are all user tested and accessibility tested. Bonus! However, it’s important to remember that context can change many things as can the way products are built in code, so user and accessibility testing should always be part of your project.
 
-UX designers can access component and pattern rationale through Confluence, use tools like the Forms paper prototyping sheets to rapidly prototype low fidelity user journeys and screens, and see forms components and patterns in action through [ProtoformCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/protoform).
+UX designers can access component and pattern rationale through Confluence, use tools like the Forms paper prototyping sheets to rapidly prototype low fidelity user journeys and screens, and see forms components and patterns in action through [Protoform](https://gel.westpacgroup.com.au/protoform).
 
-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 [ProtoformCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/protoform) is another useful tool for seeing the behaviour of components and patterns.
+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 systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system) to read implementation guidelines and access code, while also referencing [ProtoformCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/protoform), our interactive demonstration of common form patterns. [ProtoformCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](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](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.
 
 I want to design the interface my way
 -------------------------------------
@@ -62,7 +62,7 @@ How do I suggest an improvement or iteration?
 
 Improvement is what we’re all about. Build, test, deliver, learn, repeat, right? If you feel you have a better way of doing something or have a new pattern for consideration by all means let us know.
 
-[Contact the GEL teamCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:[email protected])
+[Contact the GEL team](mailto:[email protected])
 
 Reframing your approach
 -----------------------

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

@@ -5,15 +5,15 @@ The foundations of the GEL Figma Library ecosystem are the GEL Component Librari
 
 The following Figma libraries are _only_ available for designers working within the Westpac group organisation:
 
-*   [GEL WBC ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/oyl5USuOmI86B1BIcrwG3o/GEL-WBC-Components)
-*   [GEL STG ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/U82PSQ4galbXGMTCqhAkZw/GEL-STG-Components)
-*   [GEL BSA ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/VpkWqS1jnlYi0HQIoJtjzK/GEL-BSA-Components)
-*   [GEL BOM ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/pHjPTlwvKBngtAdOk9A8pw/GEL-BOM-Components)
-*   [GEL RAMS ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/EMqLUSQpDckSaT5VQNYOz0/GEL-RAMS-Components)
-*   [GEL WBG (GROUP) ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/pKouqjpeCZb0JkuD0V5RwQ/GEL-WBG-(GROUP)-Components)
-*   [GEL IconsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/5ksudv161S5nYyEGkgkXQa/GEL-Icons)
-*   [GEL PictogramsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/sWRKQTkG8PyNtGNKwlLReo/GEL-Pictograms)
-*   [GEL Logos & SymbolsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/WojlFfS0UyU0i3BPvZiJf0/GEL-Logos-and-Symbols)
+*   [GEL WBC Components](https://www.figma.com/file/oyl5USuOmI86B1BIcrwG3o/GEL-WBC-Components)
+*   [GEL STG Components](https://www.figma.com/file/U82PSQ4galbXGMTCqhAkZw/GEL-STG-Components)
+*   [GEL BSA Components](https://www.figma.com/file/VpkWqS1jnlYi0HQIoJtjzK/GEL-BSA-Components)
+*   [GEL BOM Components](https://www.figma.com/file/pHjPTlwvKBngtAdOk9A8pw/GEL-BOM-Components)
+*   [GEL RAMS Components](https://www.figma.com/file/EMqLUSQpDckSaT5VQNYOz0/GEL-RAMS-Components)
+*   [GEL WBG (GROUP) Components](https://www.figma.com/file/pKouqjpeCZb0JkuD0V5RwQ/GEL-WBG-(GROUP)-Components)
+*   [GEL Icons](https://www.figma.com/file/5ksudv161S5nYyEGkgkXQa/GEL-Icons)
+*   [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.
 
@@ -57,7 +57,7 @@ Read the [Using fonts](/articles/using-fonts) article for information on how we
 
 Sometimes you will be required to produce the same design across multiple brands. A quick way to do this is to use the Figma plugin Themer. It allows you to instantly switch the styles used in your design (colours and fonts) to those of a different brand. Even though there will be some components (logos or pictograms) that will have to be switched manually, this is a very simple process.
 
-Follow the instructions on the [Themer pageCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/community/plugin/731176732337510831/Themer) to install the plugin. We have GEL specific configuration that connects to GEL styles, this requires an **API Key** and **Bin URL** that need to be entered into the Themer admin window. You will find these in the notes of the [Themer set-up videoCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://web.microsoftstream.com/video/825ca04e-973f-4612-848c-c98ef62221df).
+Follow the instructions on the [Themer page](https://www.figma.com/community/plugin/731176732337510831/Themer) to install the plugin. We have GEL specific configuration that connects to GEL styles, this requires an **API Key** and **Bin URL** that need to be entered into the Themer admin window. You will find these in the notes of the [Themer set-up video](https://web.microsoftstream.com/video/825ca04e-973f-4612-848c-c98ef62221df).
 
 **Updates**
 -----------
@@ -75,4 +75,4 @@ If you are trying to create something new, our general recommendation is to chec
 
 ### **Who do I contact for help?**
 
-If you have any questions or want to share ideas, please [contact the GEL teamCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:[email protected]). There’s also loads of information and resources in the [GEL site](/) and in the [Teams Figma channelCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://teams.microsoft.com/l/channel/19%3af1d8ec67a5744fc2837dbeef6efd2720%40thread.tacv2/Figma?groupId=a39efb9d-1df0-4986-b16a-157876ad82a5&tenantId=57c64fd4-66ca-49f5-ab38-2e67ef58e724).
+If you have any questions or want to share ideas, please [contact the GEL team](mailto:[email protected]). There’s also loads of information and resources in the [GEL site](/) and in the [Teams Figma channel](https://teams.microsoft.com/l/channel/19%3af1d8ec67a5744fc2837dbeef6efd2720%40thread.tacv2/Figma?groupId=a39efb9d-1df0-4986-b16a-157876ad82a5&tenantId=57c64fd4-66ca-49f5-ab38-2e67ef58e724).