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

…ity-tab-content

feat(prettier): format the markdown files

.prettierrc

@@ -4,5 +4,11 @@
   "singleQuote": true,
   "printWidth": 120,
   "bracketSpacing": true,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "overrides": [
+    {
+      "files": "*.mdoc",
+      "options": { "parser": "markdown" }
+    }
+  ]
 }

apps/site/src/content/articles/accessible-by-design/content.mdoc

@@ -4,15 +4,15 @@ Web accessibility is a measure of how effectively all people, including those wi
 
 ## **Why we care**
 
-*because it’s a social responsibility*
+_because it’s a social responsibility_
 
 Accessible websites ensure that people living with disability can access our products and services independently. Such independence is especially important in financial and banking settings.
 
 As set out in our Human Rights Position Statement and Action Plan, our focus is to provide equal access, inclusion and dignity for our customers, employees and community with disability.
 
 ## **Recognising disability**
 
-*there are many different types*
+_there are many different types_
 
 At Westpac, we take a broad view of disability. This means that we consider visible and invisible disabilities, as well as temporary and situational impairment that people may experience during their lifetime.
 
@@ -63,7 +63,7 @@ A focus on accessibility should be included in all phases of a project. Here are
 
 ## **Listen to the experts**
 
-*there’s a wealth of information available*
+_there’s a wealth of information available_
 
 There are plenty of free resources out there to help you get started and to steer you in the right direction. You can start with the formal guidelines to make sure your understanding of accessibility compliance is current. There are also tools to assess your work.
 

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

@@ -4,8 +4,7 @@ The foundations of our digital brands such as [colours](/articles/colour), [font
 
 The design system delivers our digital brands in React, Vanilla HTML CSS and tokens to help us efficiently manage 6 brands and service multiple technologies and platforms across the organisation. Each brand’s code can also be leveraged by front-end developers to build multi-brand, responsive and accessible solutions with greater brand consistency and quality at speed, with less effort.
 
-Digital brand compliance
-------------------------
+## Digital brand compliance
 
 We have 3 approaches to achieve digital brand compliance. This gives projects the flexibility to tailor the GEL features that best suit their requirements. For example; Project X is using a 3rd party web service with it's own codebase, therefore a Level 1 engagement is probably all that's required.
 
@@ -33,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](https://gel.westpacgroup.com.au/design-system/foundation/colours)

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

@@ -10,10 +10,9 @@ Vanilla solution to support teams to integrate with their preferred JavaScript l
 
 **Design tokens**
 
-Basic core elements of the system which provide an accurate representation of brand including colours, fonts and font sizes, spacing and breakpoints. Token formats include JSON, LESS, CSS, SCSS/SASS. 
+Basic core elements of the system which provide an accurate representation of brand including colours, fonts and font sizes, spacing and breakpoints. Token formats include JSON, LESS, CSS, SCSS/SASS.
 
-There are 3 levels of GEL design system adoption
-------------------------------------------------
+## There are 3 levels of GEL design system adoption
 
 #### Level 1: Follow the specifications
 
@@ -37,4 +36,4 @@ In this scenario, you can consume the React JS or vanilla HTML code in your proj
 
 [Access the design system](https://gel.westpacgroup.com.au/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](https://gel.westpacgroup.com.au/design-system/development/get-started?b=WBC)

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

@@ -1,7 +1,6 @@
 Change impacts the customer journey and brand experience as well as project funding and prioritisation. Since many platforms, touch-points and teams are impacted, we take an evidence based approach to global change to prove the value of making change across the Group.
 
-Balancing many perspectives
----------------------------
+## Balancing many perspectives
 
 The enterprise GEL Design System is created in collaboration with teams across the Group to ensure it balances the various requirements of the business including branding, accessibility, experience design and usability, technology and operations.
 
@@ -15,24 +14,22 @@ The system evolves to include valuable global components and patterns to serve m
 
 We facilitate the exploration of shared design and development problems across the digital channel. Our intention is to align teams to and provide a truly global, best practice solution for inclusion in the system, to continue to deliver customer and business value.
 
-Governing change
-----------------
+## Governing change
 
 Since multiple teams across the Bank are impacted by change in the design system, these teams are key to driving change decisions to ensure we maintain a strategic, enterprise approach. Change requests will go through a process and will also need to meet GEL quality standards to be accepted.
 
 When proposing a component change a strong business case is required as change must go through a comprehensive process of:
 
-*   Senior stakeholder engagement and approval
-*   Accessibility testing
-*   Requirements and co-design with impacted teams
-*   Technical build in the design system
-*   Technical build in platform component libraries 
-*   Adoption across projects, touch-points and platforms
+- Senior stakeholder engagement and approval
+- Accessibility testing
+- Requirements and co-design with impacted teams
+- Technical build in the design system
+- Technical build in platform component libraries
+- Adoption across projects, touch-points and platforms
 
 ![The 5 stages of the process; request, review, feedback, approval and build.](https://res.cloudinary.com/westpac-gel/image/upload/v1667029580/cl9tmdbnu000gf58idsyzgaiq.png)
 
-Requesting component and pattern change
----------------------------------------
+## Requesting component and pattern change
 
 To consider a global component change would need to determine if there is a business or customer challenge to solve proven through data and research insights and if there is a usability or accessibility issue presenting an application risk down the line.
 
@@ -56,22 +53,22 @@ If a problem is validated with evidence, as part of standard process, we would i
 
 We take a rigorous, best practice, production & development inclusive approach to interface design, prioritising criteria such as:
 
-*   Masterbrand alignment and brand consistency
-*   Group accessibility goals and standards
-*   Re-usable design and code
-*   Modular design
-*   Product and context agnostic design
-*   Usability principles
-*   Multi-brand
-*   Scalability
-*   Optimise for build and maintenance efficiencies
-*   Performance
-*   Browser compliance
-*   Multi-lingual
-*   Legibility
+- Masterbrand alignment and brand consistency
+- Group accessibility goals and standards
+- Re-usable design and code
+- Modular design
+- Product and context agnostic design
+- Usability principles
+- Multi-brand
+- Scalability
+- Optimise for build and maintenance efficiencies
+- Performance
+- Browser compliance
+- Multi-lingual
+- Legibility
 
 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 page](https://github.com/WestpacGEL/GEL/issues).
 
-To help us continuously improve our design patterns you can send your feedback to [[email protected]](mailto:[email protected]).
+To help us continuously improve our design patterns you can send your feedback to [[email protected]](mailto:[email protected]).

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

@@ -1,12 +1,10 @@
-**Colour in brand**
--------------------
+## **Colour in brand**
 
 There’s no disputing the significance of colour in branding. Many of the world’s most recognisable brands rely on colour for instant recognition. Colour increases brand recognition by up to 80% _(Source: University of Loyola, Maryland study)_
 
 Each brand in the Westpac Group uses a unique colour palette as part of its identity. These colours permeate across every touchpoint in the customer journey. The correct use of these colours plays a crucial role in brand recognition and customer experience. When the colour palette is not applied correctly the integrity of the brand is diluted and the customer journey fragmented.
 
-**Colour in the user interface**
---------------------------------
+## **Colour in the user interface**
 
 Applying each of the brand colour palettes in the the digital space comes with its own set of design challenges and opportunities.
 
@@ -28,8 +26,7 @@ Further more, in the event of a re-brand or brand refresh the colour system allo
 
 The practical application of the colour system encourages consistency across all user interfaces which strengthens brand recognition, creates a consistent user journey and provides a positive customer experience.
 
-**How it works**
-----------------
+## **How it works**
 
 The Colour system is a collection of carefully considered variables (or tokens) designed to work in unison. In consultation with each brand we developed a unique set of corresponding colour values all rigorously tested to ensure brand alignment and guarantee the user interface remained accessible in every possible scenario.
 
@@ -53,4 +50,4 @@ Each brand has a neutral colour with a set of 11 tints for subtle colouring. Sev
 
 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.
+The [Accessibility Matters](/articles/accessible-by-design) article provides more in-depth information on accessibility.

apps/site/src/content/articles/data-visualisation/content.mdoc

@@ -1,5 +1,4 @@
-Accessibility
--------------
+## Accessibility
 
 Ensuring that your graphs and charts comply with WCAG’s AA accessibility standards is the number one priority. The data visualisation system has catered for this using several methods.
 
@@ -51,8 +50,7 @@ Fig.7
 
 Fig.8
 
-The colour system
------------------
+## The colour system
 
 From a multi-brand perspective the colour system is our friend. As a rule of thumb we recommend designers always assume that their chart (or indeed anything they design at Westpac) will at some stage need to be multi-brand.
 
@@ -70,8 +68,7 @@ To assist designers with this we’ve created a data visualisation colour palett
 
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1668059668/claannokx002df58igzw175tj.png)
 
-Examples
---------
+## Examples
 
 To give you some context, the following examples show how these colours are applied. Circular swatches indicate the colours used in the graph. In fig.9 below the pie chart uses the solid colours A-D as shown in fig.10.
 
@@ -101,8 +98,7 @@ Fig.13
 
 Fig.14
 
-Colour hierarchy
-----------------
+## Colour hierarchy
 
 We just looked at where to use these colours. Now we’re going to look at when to use them. As mentioned earlier, each brand provides 6 colours for designers to use in their charts. See fig.15 below.
 
@@ -114,8 +110,7 @@ Fig.15
 
 Incorrect use of these colours will dilute the consistency and integrity of the brand. If you’re unsure how to apply these colours or have any concerns please ask your design principle for help. We also recommend informing the business whenever you use the backup colours in charts as they are strictly governed, and only for use in edge-case scenarios.
 
-Do’s and don’ts
----------------
+## Do’s and don’ts
 
 There are 4 key principles that guide the correct use of this colour system. Applying these principles will ensure that your charts are on-brand, accessible and systemised allowing you to re-use the chart in any of our Westpac Group brands. Not only will this save time, it will also reduce the margin for error and increase consistency.
 
@@ -197,4 +192,4 @@ Fig.25
 
 Fig.26
 
-Hopefully this has given you some direction on how to create data visualisations. At the time of writing this system was in its infancy, we'd love to see what you do with this and get your feedback, comments and ideas so we can continue to improve the way we display and communicate data to our customers.
+Hopefully this has given you some direction on how to create data visualisations. At the time of writing this system was in its infancy, we'd love to see what you do with this and get your feedback, comments and ideas so we can continue to improve the way we display and communicate data to our customers.

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

@@ -1,21 +1,18 @@
-It’s a design mindset
----------------------
+## It’s a design mindset
 
 If you’re new to enterprise design, you’ll soon find it requires a different mindset to agency, consulting, or startups. It’s not so much about pushing the latest trends live, gaining billable hours, or speed to market (although this is still important).
 
 Enterprise design requires consideration for multiple streams of work, often dealing with legacy systems, and with the challenge of traditional corporate structures creating silos with co mpeting interests. Because of this, standardisation and efficiencies in design and delivery become increasingly vital, and this where a design system can help.
 
-Actually, what is a design system?
-----------------------------------
+## Actually, what is a design system?
 
 We describe our design system, the Global Experience Language (GEL), as:
 
 The Global Experience Language (GEL) is our single source of truth, providing everything you need to deliver our brand promises and create consistent, cohesive customer experiences across our entire digital landscape faster, and with less effort.
 
 In practical terms and in its simplest form, it's a set of assets and guidelines which meet brand, CX, UX, UI, and development criteria, designed to be reused in order to realise the benefits mentioned.
 
-Right, how do I use it?
------------------------
+## 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.
 
@@ -25,50 +22,46 @@ UI designers can access design assets from the [Figma Libraries](/articles/figma
 
 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
--------------------------------------
+## I want to design the interface my way
 
 The GEL tools are not about stifling creativity, they are about creating opportunity and ensuring scalability and compliance. There’s no denying the benefits for the business and customer of reusing design and code and by doing so you’re freeing up yourself and your team to solving other more important problems or adding value elsewhere in the experience.
 
 GEL elements, components, and patterns look and behave the way they do because they factor in so many criteria to be useful across multiple scenarios and multiple brands. The more the design system is used on your project, the more efficiencies you inherit, and the more risk is reduced.
 
-I’ve got a really cool idea, can I use it?
-------------------------------------------
+## I’ve got a really cool idea, can I use it?
 
 Sure! While we actively encourage use of the design system, it’s up to your team to decide to deviate, however there are a few things you should be aware of if you decide to do so.
 
 Consider these things first:
 
-*   What customer problem are you trying to solve?
-*   Is there an existing component or pattern to serve this need?
-*   Have you considered other ways to solve the problem other than through the interface
-*   Is it scalable?
-*   Is there scope for a new design in your project?
-*   What is the cost to build?
-*   How much time will it take to build?
-*   Does it integrate with existing system architecture?
-*   Is this of value to the customer or just a ‘cool new thing’?
+- What customer problem are you trying to solve?
+- Is there an existing component or pattern to serve this need?
+- Have you considered other ways to solve the problem other than through the interface
+- Is it scalable?
+- Is there scope for a new design in your project?
+- What is the cost to build?
+- How much time will it take to build?
+- Does it integrate with existing system architecture?
+- Is this of value to the customer or just a ‘cool new thing’?
 
 And when it comes to designing for enterprise, is it:
 
-*   Responsive
-*   Reusable
-*   Multi-brand
-*   Accessible
-*   Meeting usability standards
+- Responsive
+- Reusable
+- Multi-brand
+- Accessible
+- Meeting usability standards
 
-How do I suggest an improvement or iteration?
----------------------------------------------
+## 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 team](mailto:[email protected])
 
-Reframing your approach
------------------------
+## Reframing your approach
 
 Designing with a design system isn’t hard. When you realise by designing with a design system you’re contributing to something bigger than a single page or screen, it all makes sense.
 
 This all results in consistent customer experiences increasing NPS, brand recall and integrity.
 
-It’s about shifting your priorities and focus from solving isolated problems to owning the solution from a holistic approach.
+It’s about shifting your priorities and focus from solving isolated problems to owning the solution from a holistic approach.