diff --git a/apps/site/keystatic.config.ts b/apps/site/keystatic.config.ts index 142ac538d..c10faeb08 100644 --- a/apps/site/keystatic.config.ts +++ b/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', }), }), diff --git a/apps/site/src/components/code/code.inject-components.ts b/apps/site/src/components/code/code.inject-components.ts index 79bf053a8..211053527 100644 --- a/apps/site/src/components/code/code.inject-components.ts +++ b/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'; diff --git a/apps/site/src/components/sticky-header/sticky-header.styles.ts b/apps/site/src/components/sticky-header/sticky-header.styles.ts index 9dc0a0a89..27a55291c 100644 --- a/apps/site/src/components/sticky-header/sticky-header.styles.ts +++ b/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)]', 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 beb9cdb66..e46eccdb1 100644 --- a/apps/site/src/content/articles/build-strong-brands/content.mdoc +++ b/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) \ No newline at end of file +[Access the design system for the digital brand foundations](https://gel.westpacgroup.com.au/design-system/foundation/colours) \ No newline at end of file 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 5479726a7..227fb00e7 100644 --- a/apps/site/src/content/articles/code-with-gel/content.mdoc +++ b/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) \ No newline at end of file +[Get started using the GEL design system](https://gel.westpacgroup.com.au/design-system/development/get-started?b=WBC) \ No newline at end of file diff --git a/apps/site/src/content/articles/collaborate-for-change/content.mdoc b/apps/site/src/content/articles/collaborate-for-change/content.mdoc index e5ab4bfb6..2662c4190 100644 --- a/apps/site/src/content/articles/collaborate-for-change/content.mdoc +++ b/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 [gel@westpac.com.auCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:gel@westpac.com.au). \ No newline at end of file +To help us continuously improve our design patterns you can send your feedback to [gel@westpac.com.au](mailto:gel@westpac.com.au). \ No newline at end of file diff --git a/apps/site/src/content/articles/colour/content.mdoc b/apps/site/src/content/articles/colour/content.mdoc index a976cd5cc..7cd6dc011 100644 --- a/apps/site/src/content/articles/colour/content.mdoc +++ b/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. \ No newline at end of file diff --git a/apps/site/src/content/articles/design-with-gel/content.mdoc b/apps/site/src/content/articles/design-with-gel/content.mdoc index 9a86f198d..cac5055db 100644 --- a/apps/site/src/content/articles/design-with-gel/content.mdoc +++ b/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:gel@westpac.com.au) +[Contact the GEL team](mailto:gel@westpac.com.au) Reframing your approach ----------------------- diff --git a/apps/site/src/content/articles/figma-libraries/content.mdoc b/apps/site/src/content/articles/figma-libraries/content.mdoc index 4a0348364..c764b86f6 100644 --- a/apps/site/src/content/articles/figma-libraries/content.mdoc +++ b/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:gel@westpac.com.au). 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). \ No newline at end of file +If you have any questions or want to share ideas, please [contact the GEL team](mailto:gel@westpac.com.au). 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). \ No newline at end of file diff --git a/apps/site/src/content/articles/iconography/content.mdoc b/apps/site/src/content/articles/iconography/content.mdoc index 33870a003..ca4e7e08f 100644 --- a/apps/site/src/content/articles/iconography/content.mdoc +++ b/apps/site/src/content/articles/iconography/content.mdoc @@ -1,7 +1,7 @@ Usage Guidelines ---------------- -These guidelines are designed to assist you in the correct use of icons. We have a library of almost 300 icons for use in your designs. For those using Figma, every icon has now been tagged with relevant keywords making it easy to find exactly what you're looking for. Please note: These guidelines are high level and may be updated to cater for evolving design and business requirements. If you have any questions or need help please don’t hesitate to contact the [GEL team.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:gel@westpac.com.au) +These guidelines are designed to assist you in the correct use of icons. We have a library of almost 300 icons for use in your designs. For those using Figma, every icon has now been tagged with relevant keywords making it easy to find exactly what you're looking for. Please note: These guidelines are high level and may be updated to cater for evolving design and business requirements. If you have any questions or need help please don’t hesitate to contact the [GEL team.](mailto:gel@westpac.com.au) ### When to use icons @@ -35,7 +35,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 [PictogramsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](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](https://gel.westpacgroup.com.au/design-system/foundation/pictograms?b=WBC) ![Image showing the icon sizing chart. Available sizes are: 12, 18, 24, 36 and 48 pixels.](https://res.cloudinary.com/westpac-gel/image/upload/v1690447333/clkkwp1dg00014g8iashk6m6s.png) @@ -48,7 +48,7 @@ Pictograms should always be larger that 36px Design Principles ----------------- -If you cannot find an icon in the library to suit your needs it’s likely that you’ll need to create your own bespoke icon. The principles below explain how to design and craft icons correctly - aligning to the grid, using the correct corner radius, stroke widths etc. Note: before deciding to design new icons we recommend contacting the [GEL teamCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:gel@westpac.com.au) or speaking to your Principle as we may be able to assist with finding a suitable library icon. +If you cannot find an icon in the library to suit your needs it’s likely that you’ll need to create your own bespoke icon. The principles below explain how to design and craft icons correctly - aligning to the grid, using the correct corner radius, stroke widths etc. Note: before deciding to design new icons we recommend contacting the [GEL team](mailto:gel@westpac.com.au) or speaking to your Principle as we may be able to assist with finding a suitable library icon. ### Simplicity @@ -173,4 +173,4 @@ Don’t - scale icons to random sizes. This will cause them to fall off the grid 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.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/icons) \ No newline at end of file +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) \ No newline at end of file diff --git a/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc b/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc index 4aed0a361..107f99456 100644 --- a/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc +++ b/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc @@ -88,7 +88,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.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](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.](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. 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. diff --git a/apps/site/src/content/articles/patterns/content.mdoc b/apps/site/src/content/articles/patterns/content.mdoc index 9f81215ac..d93551711 100644 --- a/apps/site/src/content/articles/patterns/content.mdoc +++ b/apps/site/src/content/articles/patterns/content.mdoc @@ -5,25 +5,25 @@ Originations Apply these patterns when creating application forms. -[See the Originations patterns.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/articles/originations-experience) +[See the Originations patterns.](https://gel.westpacgroup.com.au/articles/originations-experience) Banking ------- Apply these patterns when delivering features and experiences in our online banking applications.  -[See the Banking patterns.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/articles/banking) +[See the Banking patterns.](https://gel.westpacgroup.com.au/articles/banking) Website ------- Apply these patterns when you are delivering a page on the website. -[https://gel.westpacgroup.com.au/articles/websiteCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/articles/website) +[https://gel.westpacgroup.com.au/articles/website](https://gel.westpacgroup.com.au/articles/website) Notifications ------------- Apply these patterns when you are delivering a message to customers using our notification channels.  -[See the Notifications patterns.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/articles/notifications) \ No newline at end of file +[See the Notifications patterns.](https://gel.westpacgroup.com.au/articles/notifications) \ No newline at end of file diff --git a/apps/site/src/content/articles/think-responsive/content.mdoc b/apps/site/src/content/articles/think-responsive/content.mdoc index 43378038a..d778b5d3a 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 systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/grid) \ No newline at end of file +[Access the grid from the design system](https://gel.westpacgroup.com.au/design-system/foundation/grid) \ No newline at end of file diff --git a/apps/site/src/content/articles/typography/content.mdoc b/apps/site/src/content/articles/typography/content.mdoc index 454c44375..731eafaea 100644 --- a/apps/site/src/content/articles/typography/content.mdoc +++ b/apps/site/src/content/articles/typography/content.mdoc @@ -42,4 +42,4 @@ We’re hoping to establish a more robust system of spacing for our Typography s ![The font sizes available in the design system.](https://res.cloudinary.com/westpac-gel/image/upload/v1666141371/cl9exjwys000ptc8i1ki2fsxh.png) -[Access the design system fontsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/fonts) \ No newline at end of file +[Access the design system fonts](https://gel.westpacgroup.com.au/design-system/foundation/fonts) \ No newline at end of file diff --git a/apps/site/src/content/articles/using-fonts/content.mdoc b/apps/site/src/content/articles/using-fonts/content.mdoc index 46074481e..a60314f17 100644 --- a/apps/site/src/content/articles/using-fonts/content.mdoc +++ b/apps/site/src/content/articles/using-fonts/content.mdoc @@ -26,9 +26,9 @@ Typically brand will engage with the type foundry and purchase an enterprise lic ### 2: You need a web font licence -While purchasing a licence to use the desktop font brand will also purchase a suitable web font licence which will permit use on specific domains (e.g. [westpacgroup.com.auCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](http://westpacgroup.com.au)) and in specific apps. +While purchasing a licence to use the desktop font brand will also purchase a suitable web font licence which will permit use on specific domains (e.g. [westpacgroup.com.au](http://westpacgroup.com.au)) and in specific apps. -**Important:** When purchasing a web licence all brands must ensure that the licence includes the [westpacgroup.com.auCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](http://westpacgroup.com.au) domain. This will ensure that the web font can be used in the design system which is hosted on the westpac group domain. +**Important:** When purchasing a web licence all brands must ensure that the licence includes the [westpacgroup.com.au](http://westpacgroup.com.au) domain. This will ensure that the web font can be used in the design system which is hosted on the westpac group domain. Custom made fonts ----------------- @@ -59,11 +59,11 @@ As a designer at Westpac the desktop fonts you require should be pre-installed o * **St.George** uses Dragon Bold - This font should be installed on your Mac or PC. * **Bank of Melbourne** uses LL Brown - You will need to request this desktop font from brand. * **Bank SA** uses Aller - You will need to request this desktop font from brand. -* **Rams** uses SourceSansPro - This is a Google font available [here.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://fonts.google.com/specimen/Source+Sans+Pro) -* **Westpac Group** uses Montseratt - This is a Google font available [here.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://fonts.google.com/specimen/Montserrat?query=Montserrat) +* **Rams** uses SourceSansPro - This is a Google font available [here.](https://fonts.google.com/specimen/Source+Sans+Pro) +* **Westpac Group** uses Montseratt - This is a Google font available [here.](https://fonts.google.com/specimen/Montserrat?query=Montserrat) ### 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 SystemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/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](https://gel.westpacgroup.com.au/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. \ No newline at end of file diff --git a/apps/site/src/content/design-system/components/a11y/code.mdoc b/apps/site/src/content/design-system/components/a11y/code.mdoc new file mode 100644 index 000000000..29c8cc760 --- /dev/null +++ b/apps/site/src/content/design-system/components/a11y/code.mdoc @@ -0,0 +1,62 @@ +## Visually hidden + +Visually hide content while still allowing it to be exposed to assistive technologies (such as screen readers). + +Use the VisuallyHidden component to incorporate important descriptive content not already provided in the UI visual layer to aid assistive technology users. + +```jsx + +

+ Note: The text found below this message is visually hidden, but will be announced by screen readers +

+ This is screen reader only text + +``` + +### Accessibility features + +The VisuallyHidden component uses a common cross-browser supported method to visually hide content using CSS. + +### Keyboard support + +No keyboard interaction needed. + +### Accessibility API + +No specific accessibility attributes required. + +--- + +## Skip link + +A fixed position ‘Jump link’ banner that is visually hidden by default. The link becomes visible when focused (e.g. by a keyboard-only user). + +Assistive technology users commonly use ‘Skip links’ to quickly navigate to important web page content, ‘jumping over’ irrelevant content; without having to cycle through all page content. + +SkipLink requires a href (URL) value pointing to the id attribute value of a target element (anchor) on the current page. + +```tsx + +

+ + Note: The link found below this message is visually hidden until focused, but will be announced by screen readers + +

+ This is screen reader only text (visible when focused) + +``` + +### Accessibility features + +- The link is hidden using a method similar to the VisuallyHidden component, it is always visible to assistive technologies +- When the link receives focus it is no longer visually hidden +- The target element receives focus natively (without the use of JavaScript) +- The link is visible in WHCM (when focused) + +### Keyboard support + +The link is displayed when it receives focus. + +### Accessibility API + +- `

`: It is recommended to link directly to a heading, its content will be announced when focused. The heading element must have a tabindex attribute as it’s not a ‘focusable element’, otherwise the element will not receive focus and the target content will not be announced by screen readers in some browsers. Generally use tabindex="-1" or tabindex="0" if you also require the target to be focusable during normal keyboard interaction. diff --git a/apps/site/src/content/design-system/components/accordion/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/accordion/accessibilityDemo.mdoc index e69de29bb..2b5099cc1 100644 --- a/apps/site/src/content/design-system/components/accordion/accessibilityDemo.mdoc +++ b/apps/site/src/content/design-system/components/accordion/accessibilityDemo.mdoc @@ -0,0 +1,40 @@ +```tsx + +

+ Default +

+ + {[ + { key: 'files', title: 'Your files' }, + { key: 'shared', title: 'Shared with you' }, + { key: 'last', title: 'Last item' }, + ].map(({ key, title }) => ( + +

{title}

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam + reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam! +

+ + ))} + +

+ Lego +

+ + {[ + { key: 'files', title: 'Your files' }, + { key: 'shared', title: 'Shared with you' }, + { key: 'last', title: 'Last item' }, + ].map(({ key, title }) => ( + +

{title}

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam + reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam! +

+ + ))} + + +``` diff --git a/apps/site/src/content/design-system/components/accordion/code.mdoc b/apps/site/src/content/design-system/components/accordion/code.mdoc index ddf3bba0f..dd9a163ab 100644 --- a/apps/site/src/content/design-system/components/accordion/code.mdoc +++ b/apps/site/src/content/design-system/components/accordion/code.mdoc @@ -25,7 +25,7 @@ See Visual design for the usage recommendations for the default style. See Visual design for the usage recommendations for the lego style. ```jsx - + {[ { key: 'files', title: 'Your files' }, { key: 'shared', title: 'Shared with you' }, diff --git a/apps/site/src/content/design-system/components/accordion/design/Accordion/content.mdoc b/apps/site/src/content/design-system/components/accordion/design/Accordion/content.mdoc new file mode 100644 index 000000000..2b1f0a987 --- /dev/null +++ b/apps/site/src/content/design-system/components/accordion/design/Accordion/content.mdoc @@ -0,0 +1,39 @@ +**Default accordion:** See Visual design for the usage recommendations for the default style. + +```jsx + + {[ + { key: 'files', title: 'Your files' }, + { key: 'shared', title: 'Shared with you' }, + { key: 'last', title: 'Last item' }, + ].map(({ key, title }) => ( + +

{title}

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam + reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam! +

+ + ))} + +``` + +**Lego accordion:** See Visual design for the usage recommendations for the lego style. + +```jsx + + {[ + { key: 'files', title: 'Your files' }, + { key: 'shared', title: 'Shared with you' }, + { key: 'last', title: 'Last item' }, + ].map(({ key, title }) => ( + +

{title}

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam + reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam! +

+ + ))} + +``` diff --git a/apps/site/src/content/design-system/components/accordion/design/Tabset/content.mdoc b/apps/site/src/content/design-system/components/accordion/design/Tabset/content.mdoc deleted file mode 100644 index e60504abf..000000000 --- a/apps/site/src/content/design-system/components/accordion/design/Tabset/content.mdoc +++ /dev/null @@ -1,7 +0,0 @@ -\**Default tabset: **See Visual design for the usage recommendations for the default style. Tabsets can appear both ranged to the right, or justified. - -```tsx - -``` - -\**Lego tabset: **See Visual design for the usage recommendations for the lego style. Tabsets can appear both ranged to the right, or justified. diff --git a/apps/site/src/content/design-system/components/accordion/index.yaml b/apps/site/src/content/design-system/components/accordion/index.yaml index 92cf0bb7c..fd76e8a3e 100644 --- a/apps/site/src/content/design-system/components/accordion/index.yaml +++ b/apps/site/src/content/design-system/components/accordion/index.yaml @@ -3,7 +3,7 @@ description: >- Tabcordions are grouped sets of tabbed or accordion style panels. Use them to group and simplify large amounts of content such as product information. design: - - title: Tabset + - title: Accordion - title: User experience - title: Visual design - title: Dos and don’ts @@ -12,5 +12,3 @@ accessibility: - title: Accessibility features - title: Keyboard support - title: Accessibility API -relatedInformation: - - components/panel diff --git a/apps/site/src/content/design-system/components/autocomplete/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/autocomplete/accessibilityDemo.mdoc new file mode 100644 index 000000000..3eac8c157 --- /dev/null +++ b/apps/site/src/content/design-system/components/autocomplete/accessibilityDemo.mdoc @@ -0,0 +1,10 @@ +```jsx + + Red Panda + Cat + Dog + Aardvark + Kangaroo + Snake + +``` diff --git a/apps/site/src/content/design-system/components/badge/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/badge/accessibilityDemo.mdoc new file mode 100644 index 000000000..1a31be8f0 --- /dev/null +++ b/apps/site/src/content/design-system/components/badge/accessibilityDemo.mdoc @@ -0,0 +1,78 @@ +```tsx +() => { + const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const; + const INVERTED_COLORS = [ + 'danger-inverted', + 'faint-inverted', + 'hero-inverted', + 'info-inverted', + 'neutral-inverted', + 'primary-inverted', + 'success-inverted', + 'warning-inverted', + ] as const; + + return ( +
+
+

+ Examples showing pill style badge +

+
+ + + +
+
+
+

+ Examples showing pill style badge Examples showing basic style badge +

+
+ + + +
+
+
+ ); +}; +``` diff --git a/apps/site/src/content/design-system/components/badge/code.mdoc b/apps/site/src/content/design-system/components/badge/code.mdoc new file mode 100644 index 000000000..463b1adcf --- /dev/null +++ b/apps/site/src/content/design-system/components/badge/code.mdoc @@ -0,0 +1,33 @@ +## Autocomplete + +```tsx +() => { + const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const; + + const INVERTED_COLORS = [ + 'danger-inverted', + 'faint-inverted', + 'hero-inverted', + 'info-inverted', + 'neutral-inverted', + 'primary-inverted', + 'success-inverted', + 'warning-inverted', + ] as const; + + return ( +
+
+ {COLORS.map(color => ( + {color} + ))} +
+
+ {INVERTED_COLORS.map(color => ( + {color} + ))} +
+
+ ); +}; +``` diff --git a/apps/site/src/content/design-system/components/badge/design/Badge styles/content.mdoc b/apps/site/src/content/design-system/components/badge/design/Badge styles/content.mdoc index 3739f6470..d5fc5f4ef 100644 --- a/apps/site/src/content/design-system/components/badge/design/Badge styles/content.mdoc +++ b/apps/site/src/content/design-system/components/badge/design/Badge styles/content.mdoc @@ -2,12 +2,152 @@ Badges come in 2 different styles, _Default_ and _Pill._ Each style has 8 colour ### Badges - Default -Loading... +```tsx +() => { + const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const; + + const INVERTED_COLORS = [ + 'danger-inverted', + 'faint-inverted', + 'hero-inverted', + 'info-inverted', + 'neutral-inverted', + 'primary-inverted', + 'success-inverted', + 'warning-inverted', + ] as const; + + return ( +
+
+ {COLORS.map(color => ( + {color} + ))} +
+
+ {INVERTED_COLORS.map(color => ( + {color} + ))} +
+
+ ); +}; +``` ### Badges - Pill -Loading... +```tsx +() => { + const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const; + const INVERTED_COLORS = [ + 'danger-inverted', + 'faint-inverted', + 'hero-inverted', + 'info-inverted', + 'neutral-inverted', + 'primary-inverted', + 'success-inverted', + 'warning-inverted', + ] as const; + + return ( +
+
+ {COLORS.map(color => ( + + {color} + + ))} +
+
+ {INVERTED_COLORS.map(color => ( + + {color} + + ))} +
+
+ ); +}; +``` ### Usage examples -Loading... \ No newline at end of file +```tsx +() => { + const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const; + const INVERTED_COLORS = [ + 'danger-inverted', + 'faint-inverted', + 'hero-inverted', + 'info-inverted', + 'neutral-inverted', + 'primary-inverted', + 'success-inverted', + 'warning-inverted', + ] as const; + + return ( +
+
+

+ Examples showing pill style badge +

+
+ + + +
+
+
+

+ Examples showing pill style badge Examples showing basic style badge +

+
+ + + +
+
+
+ ); +}; +``` diff --git a/apps/site/src/content/design-system/components/badge/index.yaml b/apps/site/src/content/design-system/components/badge/index.yaml index fd4d9c6be..bc4d11731 100644 --- a/apps/site/src/content/design-system/components/badge/index.yaml +++ b/apps/site/src/content/design-system/components/badge/index.yaml @@ -1,12 +1,13 @@ -name: Breadcrumb +name: Badge description: >- - Breadcrumbs are styled navigational links used to indicate the user’s location - within your site. They are a simple, effective and proven method to aid - orientation. + Badges are small, styled UI items usually used with other elements. They can + be used as a number count, to highlight a word or give context to an action + needed. design: - - title: Breadcrumbs + - title: Badge styles - title: User experience - title: Visual design + - title: Dos and don’ts accessibility: - title: Notes on accessibility - title: Accessibility features diff --git a/apps/site/src/content/design-system/components/breadcrumb/accessibility/Accessibility API/content.mdoc b/apps/site/src/content/design-system/components/breadcrumb/accessibility/Accessibility API/content.mdoc index 162bf858b..52b5b49df 100644 --- a/apps/site/src/content/design-system/components/breadcrumb/accessibility/Accessibility API/content.mdoc +++ b/apps/site/src/content/design-system/components/breadcrumb/accessibility/Accessibility API/content.mdoc @@ -1,4 +1,4 @@ - `