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
Show file tree
Hide file tree
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
  •  
  •  
  •  
Prev Previous commit
Next Next commit
Merge branch 'develop' into fixes/flexicell-style
  • Loading branch information
tomjackking authored Nov 20, 2023
commit dd8eec0b892c4ac1967a2d7fa19fab265e99b503
29 changes: 25 additions & 4 deletions apps/site/keystatic.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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',
},
),
Expand Down Expand Up @@ -193,6 +211,9 @@ export default config({
},
},
}),
cardTitle: fields.text({
label: 'Card title on the home page',
}),
description: fields.text({
label: 'Description',
multiline: true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
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
Expand Up @@ -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,
});
Expand All @@ -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 {
Expand Down
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
Expand Up @@ -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: {
Expand All @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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">
Expand All @@ -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"
Expand Down
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
Expand Down
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
Expand Down
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.
Expand Down
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.
Expand Down
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
Expand Down
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
Expand Down
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
Expand Down
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
Expand Down
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
Expand Down
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
Expand Down
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.
Expand Down
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
Expand Down
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
Expand Down
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
Expand Down
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
Expand Down
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
Expand Down
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
Expand Down
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
Expand Down
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
Expand Down
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,
Expand Down
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
Expand Up @@ -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
Expand Up @@ -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
Expand Up @@ -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
Loading
You are viewing a condensed version of this merge commit. You can view the full changes here.