Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes/flexicell style #299

Merged
merged 6 commits into from
Nov 22, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
29 changes: 25 additions & 4 deletions apps/site/keystatic.config.ts
Original file line number Diff line number Diff line change
@@ -103,7 +103,16 @@ export default config({
}),
design: fields.array(
fields.object({
title: fields.text({ label: 'Name' }),
title: fields.slug({
name: {
label: 'Title',
validation: {
length: {
min: 1,
},
},
},
}),
noTitle: fields.checkbox({ label: 'No title' }),
content: fields.document({
formatting: true,
@@ -116,13 +125,22 @@ export default config({
}),
{
label: 'Design sections',
itemLabel: props => props.fields.title.value,
itemLabel: props => props.fields.title.value.name,
slugField: 'title',
},
),
accessibility: fields.array(
fields.object({
title: fields.text({ label: 'Name' }),
title: fields.slug({
name: {
label: 'Title',
validation: {
length: {
min: 1,
},
},
},
}),
content: fields.document({
formatting: true,
dividers: true,
@@ -132,7 +150,7 @@ export default config({
}),
{
label: 'Accessibility sections',
itemLabel: props => props.fields.title.value,
itemLabel: props => props.fields.title.value.name,
slugField: 'title',
},
),
@@ -193,6 +211,9 @@ export default config({
},
},
}),
cardTitle: fields.text({
label: 'Card title on the home page',
}),
description: fields.text({
label: 'Description',
multiline: true,
Original file line number Diff line number Diff line change
@@ -17,7 +17,7 @@ export function ArticleTile({ article, slug, className, layout, index }: Article
</div>
)}
<div className={styles.contentWrapper({})}>
<h4 className={styles.title({})}>{article.name}</h4>
<h4 className={styles.title({})}>{article.cardTitle}</h4>
<p className={styles.description({})}>{article.smallDescription}</p>
<ArrowRightIcon className={styles.icon({})} />
</div>
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ export const styles = tv({
},
level: {
1: 'typography-site-5 mb-5',
2: 'typography-site-7 mb-4 xsl:typography-site-6 xsl:mb-5',
2: 'typography-site-7 mb-4 !leading-loose xsl:typography-site-6 xsl:mb-5',
3: 'typography-site-7 mb-5',
4: 'typography-site-9 mb-5',
5: 'typography-site-10 mb-2',
4 changes: 2 additions & 2 deletions apps/site/src/app/design-system/[...component]/page.tsx
Original file line number Diff line number Diff line change
@@ -61,7 +61,7 @@ export default async function ComponentPage({ params }: { params: { component: s
.content()
.then(content => {
resolve({
title: section.title,
title: section.title.name,
content: content,
noTitle: section.noTitle,
});
@@ -83,7 +83,7 @@ export default async function ComponentPage({ params }: { params: { component: s
.content()
.then(content => {
resolve({
title: section.title,
title: section.title.name,
content: content,
});
return {
4 changes: 2 additions & 2 deletions apps/site/src/components/document-renderer/list/list.style.ts
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
export const styles = tv({
slots: {
base: 'my-4 w-full p-0 leading-[2] last:mb-0',
li: 'relative mb-2 pl-3 leading-7',
li: 'relative mb-2 pl-[1.1875rem] leading-7',
},
variants: {
color: {
@@ -20,7 +20,7 @@ export const styles = tv({
},
unordered: {
base: '',
li: 'leading-normal before:absolute before:left-0 before:top-[0.6rem] before:block before:h-[0.5rem] before:w-[0.5rem] before:rounded-full last:mb-0',
li: 'leading-normal before:absolute before:left-[0.25rem] before:top-1 before:block before:h-[0.5rem] before:w-[0.5rem] before:rounded-full last:mb-0',
},
},
fontFamily: {
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import { EmailIcon, GithubIcon } from '@westpac/ui/icon';
import throttle from 'lodash.throttle';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useLayoutEffect, useState } from 'react';
import { MouseEventHandler, useCallback, useLayoutEffect, useState } from 'react';

import { UpIcon } from './components/up-icon';
import { styles as footerStyles } from './sticky-footer.styles';
@@ -35,6 +35,11 @@ export function StickyFooter() {
};
}, []);

const handleOnClick: MouseEventHandler<HTMLButtonElement> = useCallback(ev => {
ev.preventDefault();
window?.scrollTo({ top: 0, behavior: 'smooth' });
}, []);

return (
<footer className={styles.footer()}>
<div className="flex items-center">
@@ -49,10 +54,9 @@ export function StickyFooter() {
</div>
</div>
<Button
tag="a"
href="#0"
look="link"
iconAfter={UpIcon}
onClick={handleOnClick}
size="large"
className={styles.button()}
aria-label="Go to top"
1 change: 1 addition & 0 deletions apps/site/src/content/articles/accessible-by-design.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Accessible By Design
cardTitle: Accessible By Design
description: >-
Let’s change the way we think about accessibility. Westpac’s Access and
Inclusion Director, Majella Knobel notes “People assume accessibility is only
1 change: 1 addition & 0 deletions apps/site/src/content/articles/build-strong-brands.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Build strong brands
cardTitle: Build strong brands
description: >-
We take a digital first approach to brand design including meeting
accessibility standards to ensure our brands are optimised for all of our
1 change: 1 addition & 0 deletions apps/site/src/content/articles/code-with-gel.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Code with GEL
cardTitle: Code with GEL
thumbnail: >-
https://res.cloudinary.com/westpac-gel/image/upload/v1663140016/cl81amh5c000mam8i3iuq5qt9.png
smallDescription: Automate your environment, scale your projects and speed up your work flow with our cutting edge code library.
1 change: 1 addition & 0 deletions apps/site/src/content/articles/collaborate-for-change.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: 'Collaborate for change '
cardTitle: 'Collaborate for change '
description: >-
Design system change has wide impact, whether it’s a brand change, a component
or a pattern change so collaboration & early engagement are key.
1 change: 1 addition & 0 deletions apps/site/src/content/articles/colour.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Colour
cardTitle: Colour
description: >-
Colour plays an important role in our lives. Our minds are programmed to
respond to colour. We stop our cars for red lights and go on green. We see
1 change: 1 addition & 0 deletions apps/site/src/content/articles/data-visualisation.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Data visualisation
cardTitle: DataViz for everyone
description: >-
In recent years our appetite for data has increased significantly. So too has
the need for a consistent approach to data visualisation. This article is an
1 change: 1 addition & 0 deletions apps/site/src/content/articles/design-with-gel.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Design with GEL
cardTitle: Design with GEL
description: >-
You’ve got grand ideas! You’re up to speed on all the latest AI, AR, VR, and
hardware technology. You’re excited to push the boundaries of what’s possible
1 change: 1 addition & 0 deletions apps/site/src/content/articles/figma-libraries.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Figma Libraries
cardTitle: Figma Libraries
description: >-
The Figma Libraries are a complete set of multi-brand, accessible design
assets to help you create high quality, consistent, experiences across all our
1 change: 1 addition & 0 deletions apps/site/src/content/articles/gel-design-approach.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: GEL design approach
cardTitle: GEL design approach
description: >-
The greatest value the GEL Design System can offer is re-use and consistency.
We provide quality, re-usable solutions so that you have more time to focus on
1 change: 1 addition & 0 deletions apps/site/src/content/articles/iconography.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Iconography
cardTitle: Iconography
description: >-
Our global visual language is shared across all our brands. We have a library
of carefully crafted user interface icons for use in our designs. This article
1 change: 1 addition & 0 deletions apps/site/src/content/articles/motion-principles.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Motion principles
cardTitle: Motion principles
description: >-
It can be difficult to deliver consistent experiences that feel on-brand, are
accessible, and serve a purpose without following some guiding principles.
1 change: 1 addition & 0 deletions apps/site/src/content/articles/multi-brand-made-easy.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Multi-brand made easy
cardTitle: Multi-brand made easy
description: >-
We’re a truly multi-brand organisation, which is why being able to create
individually branded customer experiences while re-using our technical
1 change: 1 addition & 0 deletions apps/site/src/content/articles/patterns.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Patterns
cardTitle: Patterns
description: >-
UX and UI patterns, are recurring design solutions and best practices that
address common problems and challenges in user interface and interaction
1 change: 1 addition & 0 deletions apps/site/src/content/articles/test.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: test
cardTitle: test
description: test
thumbnail: /images/articles/test/thumbnail.png
smallDescription: /images/articles/test/smallDescription.png
1 change: 1 addition & 0 deletions apps/site/src/content/articles/the-grid.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: The Grid
cardTitle: The Grid
description: >-
In recent years we’ve seen a fundamental shift in the hardware our customers
use to access information and services online. New devices are being
1 change: 1 addition & 0 deletions apps/site/src/content/articles/think-responsive.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Think responsive
cardTitle: Think responsive
description: >-
An increasing number of people are accessing information and services on their
mobile devices. New devices are being introduced every day. We can’t keep
1 change: 1 addition & 0 deletions apps/site/src/content/articles/typography.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Typography
cardTitle: Typography
description: "There’s no disputing the power of typography. It has a huge influence on brand perception and recognition. Good typography not only differentiates a brand but also communicates the brand’s style, personality and tone of voice. This article explains how we use typography as part of our multi-brand system.\L\L"
thumbnail: >-
https://res.cloudinary.com/westpac-gel/image/upload/v1663139139/cl81a3o5k000iam8ib3zxgea6.png
1 change: 1 addition & 0 deletions apps/site/src/content/articles/using-fonts.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Using Fonts
cardTitle: Using fonts online
description: >-
Using fonts today is fairly straight forward, however there are some
complexities and requirements that should be addressed before jumping in. This
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: Value of a design system
cardTitle: Value of a design system
description: >-
The value of a design system is well documented and has roots in manufacturing
and construction dating back centuries. In our digital world, and for Westpac
1 change: 1 addition & 0 deletions apps/site/src/content/articles/what-is-gel.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
name: What is GEL?
cardTitle: What is GEL?
description: >-
The Global Experience Language is our single source of truth, providing
everything you need to deliver our brand promises and create consistent,
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
Within the accessibility pages of this site, you will find the colour impairment demonstration tool, this tool allows you to view the components as someone with a colour vision impairment would perceive them.

Colour vision impairment is something that impacts people (mostly men) across the board, it is a condition that affects how the cone photoreceptors in the retinas detect the colour frequencies of light. It can stop them from being able to perceive different colours.

Some famous people who are considered _'colour blind'_:

- Mark Zuckerberg - Founder of Facebook
- Bill Clinton - 42nd president of the United States
- Jamie Oliver - Celebrity chef

Colour vision impairments can either be inherited or acquired. Inherited colour impairment is passed down genetically from parents to children (primarily from mother to son). Acquired colour impairment can be the result of chronic illness, accidents, chemicals, medications or age.

Part of the process used when defining the design system brand colours, is to make sure that foreground and background colour combinations have the appropriate colour contrast luminosity ratios (in compliance with WCAG 2.1 AA). Adhering to this contrast ratio allows all our customers to differentiate our brand colours. We also highlight the situations where our brand colours will not have a high enough contrast ratio to be used together.

Our colour vision impairment tool allows us to view the design system components as someone with an impairment would see them. It shows how important it is to ensure that when designing, you should never rely on a difference in colour alone to communicate to your users.

Each of the filters in the colour impairment tool shows how the perception of colour is affected by different conditions, very broadly these are:

## Protanopes

- _Protanopia_ - No sensitivity to red light.
- _Protanomaly_ - Reduced sensitivity to red light.

Protanopes tend to find it difficult to distinguish greens, yellows, oranges, reds and browns from each other.

## Deuteranopes

- _Deuteranopia_ - No sensitivity to green light.
- _Deuteranomaly_ - Reduced sensitivity to green light.

Deuteranopes are likely to confuse colours such as green and yellow, or blue and purple, they may also struggle to distinguish between pink and grey or white.

## Tritanopes

- _Tritanopia_ - No sensitivity to blue light.
- _Tritanomaly_ - Reduced sensitivity to blue light.

Tritanopes tend to find it difficult to see the difference between light blues and greys, dark purples and black, mid-greens and blues and oranges and reds.

## Monochromacy

- _Achromatopsia_ - Reduced sensitivity to all colours.
- _Achromatomaly_ - No sensitivity to colour.

Monochromats see the world in black, white and shades of grey. Less severe cases may perceive small traces of specific colours, when the light conditions are just right.

## Low-contrast

People with a vision impairment that effects their perception of contrast will struggle to see the difference between colours that do not have enough contrast between them, ie light grey against white.
Original file line number Diff line number Diff line change
@@ -4,6 +4,10 @@ description: >-
colour blindness and from 0.5-1% of all females. This is something that
effects many of our customers, regardless of age.
design:
- title: What is a colour vision impairment
- title: Colour contrast testing
- title:
name: What is a colour vision impairment?
slug: what-is-a-colour-vision-impairment
- title:
name: Colour contrast testing
slug: colour-contrast-testing
accessibility: []
Original file line number Diff line number Diff line change
@@ -5,10 +5,22 @@ description: >-
of product delivery. The following areas need to be considered when designing
for accessibility and inclusion.
design:
- title: Principles of accessibility
- title: Inclusive product design
- title: Inclusive content writing
- title: Accessible interfaces
- title: Accessibility testing
- title: Deprecated components
- title:
name: Principles of accessibility
slug: principles-of-accessibility
- title:
name: Inclusive product design
slug: inclusive-product-design
- title:
name: Inclusive content writing
slug: inclusive-content-writing
- title:
name: Accessible interfaces
slug: accessible-interfaces
- title:
name: Accessibility testing
slug: accessibility-testing
- title:
name: Deprecated components
slug: deprecated-components
accessibility: []
Original file line number Diff line number Diff line change
@@ -3,12 +3,28 @@ 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: Accordion
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Accordion
slug: accordion
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
36 changes: 27 additions & 9 deletions apps/site/src/content/design-system/components/alert/index.yaml
Original file line number Diff line number Diff line change
@@ -3,14 +3,32 @@ description: >-
Alerts use a cross-brand palette of reserved, contextual colours providing a
flexible, consistent message system for common user interactions.
design:
- title: Alert boxes
- title: Alert text
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Alert boxes
slug: alert-boxes
- title:
name: Alert text
slug: alert-text
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
relatedInformation: []
32 changes: 24 additions & 8 deletions apps/site/src/content/design-system/components/badge/index.yaml
Original file line number Diff line number Diff line change
@@ -4,12 +4,28 @@ description: >-
be used as a number count, to highlight a word or give context to an action
needed.
design:
- title: Badge styles
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Badge styles
slug: badge-styles
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
Original file line number Diff line number Diff line change
@@ -4,12 +4,26 @@ description: >-
within your site. They are a simple, effective and proven method to aid
orientation.
design:
- title: Breadcrumbs
- title: User experience
- title: Visual design
- title:
name: Breadcrumbs
slug: breadcrumbs
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
relatedInformation: []
Original file line number Diff line number Diff line change
@@ -3,11 +3,25 @@ description: >-
Button dropdowns are essentially select boxes that contain a list of elements
to choose from. Use a button dropdown to display a styled list of actions.
design:
- title: Button dropdown menu sizes
- title: User experience
- title: Visual design
- title:
name: Button dropdown menu sizes
slug: button-dropdown-menu-sizes
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
Original file line number Diff line number Diff line change
@@ -3,12 +3,28 @@ description: >-
Button groups are an elegant and easily tapable way to visualise a simple
choice.
design:
- title: Button groups
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Button groups
slug: button-groups
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
40 changes: 30 additions & 10 deletions apps/site/src/content/design-system/components/button/index.yaml
Original file line number Diff line number Diff line change
@@ -4,15 +4,35 @@ description: >-
uses and require careful consideration for consistency, hierarchy, brand, and
accessibility.
design:
- title: Button sizes
- title: Button styles
- title: Responsive buttons
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Button sizes
slug: button-sizes
- title:
name: Button styles
slug: button-styles
- title:
name: Responsive buttons
slug: responsive-buttons
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
relatedInformation: []
Original file line number Diff line number Diff line change
@@ -3,15 +3,37 @@ description: >-
Checkboxes are a proven and effective way to elicit a multiple choice from a
user. They also require careful consideration to produce the best results.
design:
- title: Checkbox sizes
- title: Horizontal layout
- title: Checkbox with hint text
- title: Checkbox with reveal
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Checkbox sizes
slug: checkbox-sizes
- title:
name: Horizontal layout
slug: horizontal-layout
- title:
name: Checkbox with hint text
slug: checkbox-with-hint-text
- title:
name: Checkbox with reveal
slug: checkbox-with-reveal
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
Original file line number Diff line number Diff line change
@@ -3,11 +3,25 @@ description: >-
A Collapsible is a component used for containing information that you may not
want to surface at the page or screen level, but needs to be findable.
design:
- title: Examples
- title: User experience
- title: Visual design
- title:
name: Examples
slug: examples
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
20 changes: 15 additions & 5 deletions apps/site/src/content/design-system/components/compacta/index.yaml
Original file line number Diff line number Diff line change
@@ -3,9 +3,19 @@ description: >-
The Compacta is a form input for capturing multiple instances of multiple
fields, saving valuable screen space.
design:
- title: Default
- title: Error states
- title: User experience
- title: Dos and don'ts
- title:
name: Default
slug: default
- title:
name: Error states
slug: error-states
- title:
name: User experience
slug: user-experience
- title:
name: Dos and don'ts
slug: dos-and-donts
accessibility:
- title: Accessibility notes
- title:
name: Accessibility notes
slug: accessibility-notes
Original file line number Diff line number Diff line change
@@ -3,13 +3,31 @@ description: >-
Date pickers assist when dates are not known, set in the future, to schedule
something, or assist in providing “day of the week” context.
design:
- title: Sizes
- title: Date range
- title: Unavailable dates
- title: User experience
- title: Visual design
- title: Dos and don'ts
- title:
name: Sizes
slug: sizes
- title:
name: Date range
slug: date-range
- title:
name: Unavailable dates
slug: unavailable-dates
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don'ts
slug: dos-and-donts
accessibility:
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
Original file line number Diff line number Diff line change
@@ -3,13 +3,31 @@ description: >-
Input field is an input field either followed or preceded by an input or
character. They are useful for giving context to input field values.
design:
- title: Input field examples
- title: Input field sizes
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Input field examples
slug: input-field-examples
- title:
name: Input field sizes
slug: input-field-sizes
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
40 changes: 30 additions & 10 deletions apps/site/src/content/design-system/components/input/index.yaml
Original file line number Diff line number Diff line change
@@ -4,14 +4,34 @@ description: >-
used to capture information critical to acquiring or servicing a product:
users' information.
design:
- title: Text inputs
- title: Selects
- title: Text areas
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Text inputs
slug: text-inputs
- title:
name: Selects
slug: selects
- title:
name: Text areas
slug: text-areas
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
32 changes: 24 additions & 8 deletions apps/site/src/content/design-system/components/link/index.yaml
Original file line number Diff line number Diff line change
@@ -5,12 +5,28 @@ description: >-
main styles of links for different use cases. This component is also called
Anchor.
design:
- title: Standalone
- title: Inline
- title: User experience
- title: Visual Design
- title:
name: Standalone
slug: standalone
- title:
name: Inline
slug: inline
- title:
name: User experience
slug: user-experience
- title:
name: Visual Design
slug: visual-design
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
36 changes: 27 additions & 9 deletions apps/site/src/content/design-system/components/list/index.yaml
Original file line number Diff line number Diff line change
@@ -4,13 +4,31 @@ description: >-
intuitive, simple and extremely effective at highlighting features, benefits,
or legal copy for example.
design:
- title: Bullet lists
- title: Other lists
- title: List item spacing
- title: User experience
- title: Visual design
- title:
name: Bullet lists
slug: bullet-lists
- title:
name: Other lists
slug: other-lists
- title:
name: List item spacing
slug: list-item-spacing
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
32 changes: 24 additions & 8 deletions apps/site/src/content/design-system/components/modal/index.yaml
Original file line number Diff line number Diff line change
@@ -4,12 +4,28 @@ description: >-
area of the screen. They are typically reserved for critical junctions in a
user journey.
design:
- title: Modal sizes
- title: Modal variations
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Modal sizes
slug: modal-sizes
- title:
name: Modal variations
slug: modal-variations
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
Original file line number Diff line number Diff line change
@@ -3,12 +3,28 @@ description: >-
Pagination is a component capable of helping the user navigate and give access
to multiple pages of content, typically used in long form content.
design:
- title: Pagination
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Pagination
slug: pagination
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
40 changes: 30 additions & 10 deletions apps/site/src/content/design-system/components/panel/index.yaml
Original file line number Diff line number Diff line change
@@ -3,14 +3,34 @@ description: >-
Panels are containers used to group and separate content with a strong intent
or action, or to simply communicate important information.
design:
- title: Default panel
- title: Faint panel
- title: Panel with table
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Default panel
slug: default-panel
- title:
name: Faint panel
slug: faint-panel
- title:
name: Panel with table
slug: panel-with-table
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
28 changes: 21 additions & 7 deletions apps/site/src/content/design-system/components/popover/index.yaml
Original file line number Diff line number Diff line change
@@ -3,11 +3,25 @@ description: >-
Popovers are small contextual panels of information. They can be used to help
your users in the moment yet require careful consideration for mobile screens.
design:
- title: Popover
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Popover
slug: popover
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
Original file line number Diff line number Diff line change
@@ -4,12 +4,28 @@ description: >-
task or a response to user input. They can be accompanied by a percentage of
completion value.
design:
- title: Progress bar
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Progress bar
slug: progress-bar
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
Original file line number Diff line number Diff line change
@@ -3,13 +3,31 @@ description: >-
The progress rope is a tool for signposting completion on long forms or
applications and is designed to be used with the GEL forms framework.
design:
- title: Default progress rope
- title: Grouped progress rope
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Default progress rope
slug: default-progress-rope
- title:
name: Grouped progress rope
slug: grouped-progress-rope
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
Original file line number Diff line number Diff line change
@@ -3,15 +3,37 @@ description: >-
Radios are a proven and effective way to elicit a single choice from a user.
They also require careful consideration to produce the best results.
design:
- title: Radio sizes
- title: Horizontal layout
- title: Radios with hint text
- title: Radios with reveal
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Radio sizes
slug: radio-sizes
- title:
name: Horizontal layout
slug: horizontal-layout
- title:
name: Radios with hint text
slug: radios-with-hint-text
- title:
name: Radios with reveal
slug: radios-with-reveal
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
16 changes: 12 additions & 4 deletions apps/site/src/content/design-system/components/repeater/index.yaml
Original file line number Diff line number Diff line change
@@ -3,8 +3,16 @@ description: >-
A Repeater is a user controlled pattern for allowing multiple instances of
something.
design:
- title: Default
- title: User experience
- title: Dos and don'ts
- title:
name: Default
slug: default
- title:
name: User experience
slug: user-experience
- title:
name: Dos and don'ts
slug: dos-and-donts
accessibility:
- title: Notes and accessibility
- title:
name: Notes and accessibility
slug: notes-and-accessibility
32 changes: 24 additions & 8 deletions apps/site/src/content/design-system/components/selector/index.yaml
Original file line number Diff line number Diff line change
@@ -3,12 +3,28 @@ description: >-
A Selector is essentially a large stylised radio or checkbox that can be
configured in many different ways for different uses.
design:
- title: Selector functionality
- title: Selector design
- title: User experience
- title: Visual design
- title:
name: Selector functionality
slug: selector-functionality
- title:
name: Selector design
slug: selector-design
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
32 changes: 24 additions & 8 deletions apps/site/src/content/design-system/components/switch/index.yaml
Original file line number Diff line number Diff line change
@@ -3,12 +3,28 @@ description: >-
Switches are a toggle element with a binary value. They are an effective way
to quickly define settings or preferences at an account or system level.
design:
- title: Switches
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Switches
slug: switches
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
28 changes: 21 additions & 7 deletions apps/site/src/content/design-system/components/symbol/index.yaml
Original file line number Diff line number Diff line change
@@ -5,11 +5,25 @@ description: >-
quality rendering on all devices. It also allows styling using code and
complies with WGAG AA accessibility requirements.
design:
- title: Third Party Symbols
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Third Party Symbols
slug: third-party-symbols
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
48 changes: 36 additions & 12 deletions apps/site/src/content/design-system/components/table/index.yaml
Original file line number Diff line number Diff line change
@@ -4,16 +4,40 @@ description: >-
and services are often complex, they are effective at communicating and
comparing values.
design:
- title: Basic table
- title: Striped row table
- title: Bordered table
- title: Bordered, striped table
- title: Basic table with highlights
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Basic table
slug: basic-table
- title:
name: Striped row table
slug: striped-row-table
- title:
name: Bordered table
slug: bordered-table
- title:
name: Bordered, striped table
slug: bordered-striped-table
- title:
name: Basic table with highlights
slug: basic-table-with-highlights
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
40 changes: 30 additions & 10 deletions apps/site/src/content/design-system/components/tabs/index copy.yaml
Original file line number Diff line number Diff line change
@@ -3,14 +3,34 @@ 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: Tabcordion
- title: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Tabset
slug: tabset
- title:
name: Accordion
slug: accordion
- title:
name: Tabcordion
slug: tabcordion
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
32 changes: 24 additions & 8 deletions apps/site/src/content/design-system/components/tabs/index.yaml
Original file line number Diff line number Diff line change
@@ -3,12 +3,28 @@ 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: User experience
- title: Visual design
- title: Dos and don’ts
- title:
name: Tabset
slug: tabset
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
28 changes: 21 additions & 7 deletions apps/site/src/content/design-system/components/well/index.yaml
Original file line number Diff line number Diff line change
@@ -3,11 +3,25 @@ description: >-
Wells are containers with simple text. They are designed to house content
without interfering with the primary content on a page.
design:
- title: Well
- title: User experience
- title: Visual design
- title:
name: Well
slug: well
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
accessibility:
- title: Notes on accessibility
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Notes on accessibility
slug: notes-on-accessibility
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
name: Abbreviation
description: Abbreviations are shortened forms of words or phrases.
design:
- title: title
noTitle: true
- title:
name: title
slug: title
accessibility: []
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
name: Acronym
description: Acronyms are words that are formed from the first letters of other words.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
name: Age & school year
description: A guide to writing age and school years.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
relatedInformation: []
Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@ description: >-
Bolding and underlining are used to emphasise words. We only use bolding in
certain situations.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
name: Bracket
description: Brackets are used to provide extra information.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@ description: >-
Bullet points and numbered lists are used to make it easier to understand a
series of items.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
name: Calls to action (ctas)
description: Calls to action are used to get a person to perform an instruction.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -3,10 +3,22 @@ description: >-
Capital letters are typically used at the start of a sentence and for proper
nouns.
design:
- title: Headings
- title: Sentence-case
- title: Capitalisation
- title: Lower-case
- title: States and territories
- title: Countries
- title:
name: Headings
slug: headings
- title:
name: Sentence-case
slug: sentence-case
- title:
name: Capitalisation
slug: capitalisation
- title:
name: Lower-case
slug: lower-case
- title:
name: States and territories
slug: states-and-territories
- title:
name: Countries
slug: countries
accessibility: []
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
name: Contraction
description: Contractions consist of two words combined to create a shorter word.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
name: Dates, days & time
description: A guide to writing dates, days and time.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@ description: >-
Empty states are moments in a person’s experience with a product where there’s
nothing to display.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -3,8 +3,14 @@ description: >-
The way we communicate errors to our users helps them to recover quickly with
less effort.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
- title: Types of error messages
- title: Displaying error messages
- title:
name: Types of error messages
slug: types-of-error-messages
- title:
name: Displaying error messages
slug: displaying-error-messages
accessibility: []
Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@ description: >-
Headings and subheadings are used to tell a person what they can expect from
the content of a section.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
name: Hyperlinks & email addresses
description: A guide to using hyperlinks and email addresses.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
name: Navigation
description: Navigation is used to help a person find content on a website or app.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
name: Numbers & currencies
description: A guide to writing numbers and currencies.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
name: People & diversity
description: A guide to writing for an inclusive audience.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
accessibility: []
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
Don't use spaces on the sides of a forward slash.

For example:

> Do: and/or

> Don’t: and / or

It is also used to replace the word ‘per’.

For example:

> Do: $100,000/year

> Don’t: $100,000/yearly
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
name: Punctuation & symbols
description: Punctuation and symbols are used to structure or clarify the meaning of text.
design:
- title:
name: Ampersands [&]
slug: ampersands
- title:
name: Apostrophes [']
slug: apostrophes
- title:
name: Colons [:]
slug: colons
- title:
name: Commas [,]
slug: commas
- title:
name: Exclamation marks [!]
slug: exclamation-marks
- title:
name: Full stops [.]
slug: full-stops
- title:
name: Hyphens and em - dashes
slug: hyphens-and-em-dashes
- title:
name: Per cent [%]
slug: per-cent
- title:
name: Question mark [?]
slug: question-mark
- title:
name: Quatation marks ["]
slug: quatation-marks
- title:
name: Semi colons [;]
slug: semi-colons
- title:
name: Slashes [/]
slug: slashes
accessibility: []
Original file line number Diff line number Diff line change
@@ -4,7 +4,13 @@ description: >-
messaging and successfully complete their task online in the quickest and
simplest way possible.
design:
- title: Why our words matter
- title: Principles
- title: Writing tips
- title:
name: Why our words matter
slug: why-our-words-matter
- title:
name: Principles
slug: principles
- title:
name: Writing tips
slug: writing-tips
accessibility: []
Original file line number Diff line number Diff line change
@@ -3,7 +3,13 @@ description: >-
The GEL design system is built using React. Use it to easily build new React
applications, as well as add to existing ones.
design:
- title: Pre-requisites
- title: Quick setup
- title: Resources
- title:
name: Pre-requisites
slug: pre-requisites
- title:
name: Quick setup
slug: quick-setup
- title:
name: Resources
slug: resources
accessibility: []
Original file line number Diff line number Diff line change
@@ -3,7 +3,11 @@ description: >-
In order to allow for the most flexibility when theming your application, we
have published a package for each of the Westpac Group's brands.
design:
- title: undefined
- title:
name: undefined
slug: undefined
noTitle: true
- title: useBrand
- title:
name: useBrand
slug: usebrand
accessibility: []
36 changes: 27 additions & 9 deletions apps/site/src/content/design-system/foundation/colour/index.yaml
Original file line number Diff line number Diff line change
@@ -4,13 +4,31 @@ description: >-
It’s important to understand how the colour system works in a multi-brand
environment and adhere to the accessibility guidelines.
design:
- title: Primary UI palette
- title: Secondary colours
- title: Reserved colours
- title: User experience
- title: Visual design
- title:
name: Primary UI palette
slug: primary-ui-palette
- title:
name: Secondary colours
slug: secondary-colours
- title:
name: Reserved colours
slug: reserved-colours
- title:
name: User experience
slug: user-experience
- title:
name: Visual design
slug: visual-design
accessibility:
- title: Accessibility notes
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Accessibility notes
slug: accessibility-notes
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
36 changes: 27 additions & 9 deletions apps/site/src/content/design-system/foundation/font/index.yaml
Original file line number Diff line number Diff line change
@@ -3,13 +3,31 @@ description: >-
The font system allows each brand to designate two typefaces: A display font
for headings and a body font for editorial and UI elements.
design:
- title: Brand font
- title: Body font
- title: Typographic scale
- title: Font weights
- title: Using fonts
- title: Dos and don’ts
- title:
name: Brand font
slug: brand-font
- title:
name: Body font
slug: body-font
- title:
name: Typographic scale
slug: typographic-scale
- title:
name: Font weights
slug: font-weights
- title:
name: Using fonts
slug: using-fonts
- title:
name: Dos and don’ts
slug: dos-and-donts
accessibility:
- title: Accessibility features
- title: Keyboard support
- title: Accessibility API
- title:
name: Accessibility features
slug: accessibility-features
- title:
name: Keyboard support
slug: keyboard-support
- title:
name: Accessibility API
slug: accessibility-api
Loading
You are viewing a condensed version of this merge commit. You can view the full changes here.