Skip to content

Commit

Permalink
Merge branch 'main' of github.com:WestpacGEL/GEL-next into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
Jeremy Ortiz committed Nov 18, 2024
2 parents d7be6c0 + 488af88 commit 7d94904
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 138 deletions.
54 changes: 48 additions & 6 deletions apps/site/src/content/design-system/components/badge/code/development-examples/content.mdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,62 @@

```tsx
<Fragment>
<p className="my-2">
<Badge >Default</Badge>
</p>
<p className="typography-body-10 text-muted">
<em>Default</em>
</p>
<p className="my-2">
<Badge color="primary">Primary</Badge>{" "}
<Badge color="hero">Hero</Badge>{" "}
<Badge color="neutral">Neutral</Badge>{" "}
<Badge color="faint">Faint</Badge>
</p>
<p className="my-2">
<Badge color="faint">Faint</Badge>{" "}

<Badge color="success" >Success</Badge>{" "}
<Badge color="info" >Info</Badge>{" "}
<Badge color="warning" >Warning</Badge>{" "}
<Badge color="danger" >Danger</Badge>
</p>
<p className="typography-body-10 text-muted">
<em>Soft</em>
</p>
<p className="my-2">
<Badge color="primary" soft>Primary</Badge>{" "}
<Badge color="hero" soft>Hero</Badge>{" "}
<Badge color="neutral" soft>Neutral</Badge>{" "}
<Badge color="faint" soft>Faint</Badge>{" "}
<Badge color="success" soft>Success</Badge>{" "}
<Badge color="info" soft>Info</Badge>{" "}
<Badge color="warning" soft>Warning</Badge>{" "}
<Badge color="danger" soft>Danger</Badge>
</p>

<Fragment>
<p className="mb-2 mt-6 typography-body-10 text-muted">
<em>Default - Pill</em>
</p>
<div className="flex gap-1">
<Badge color="primary" type="pill">88</Badge>{" "}
<Badge color="hero" type="pill">88</Badge>{" "}
<Badge color="neutral" type="pill">88</Badge>{" "}
<Badge color="faint" type="pill">88</Badge>{" "}

<Badge color="success" type="pill">88</Badge>{" "}
<Badge color="info" type="pill">88</Badge>{" "}
<Badge color="warning" type="pill">88</Badge>{" "}
<Badge color="danger" type="pill">88</Badge>
</p>
<p className="mb-2 mt-2 typography-body-10 text-muted">
<em>Soft - Pill</em>
</p>
<div className="flex gap-1">
<Badge color="primary" type="pill" soft>88</Badge>{" "}
<Badge color="hero" type="pill" soft>88</Badge>{" "}
<Badge color="neutral" type="pill" soft>88</Badge>{" "}
<Badge color="faint" type="pill" soft>88</Badge>{" "}
<Badge color="success" type="pill" soft>88</Badge>{" "}
<Badge color="info" type="pill" soft>88</Badge>{" "}
<Badge color="warning" type="pill" soft>88</Badge>{" "}
<Badge color="danger" type="pill" soft>88</Badge>
</p>
</Fragment>
</Fragment>
```
267 changes: 140 additions & 127 deletions apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc
View file
Original file line number Diff line number Diff line change
@@ -1,151 +1,164 @@
Badges come in 2 different styles: Default, used to highlight words, and Pill, used to highlight numbers.
Badges come in 2 different types:

- Default - used to highlight words
- Pill - used to highlight numbers

### Badges - Default

```tsx
() => {
const COLORS = ['danger', 'warning', 'success', 'info', 'primary', 'hero', 'neutral', 'faint', 'muted'] as const;

return (
<div className="flex flex-col gap-2">
<p className="typography-body-10 text-muted">
<em>Colours</em>
</p>
<div>
{COLORS.map(color => (
<Badge color={color} className="my-1 mr-2" >
{color}
</Badge>
))}
</div>
<p className="typography-body-10 text-muted">
<em>Soft</em>
</p>
<div>
{COLORS.map(color => (
<Badge color={color} soft className="my-1 mr-2">
{color}
</Badge>
))}
</div>
</div>
);
};
<Fragment>
<p className="typography-body-10 text-muted">
<em>Default</em>
</p>
<p className="my-2">
<Badge color="primary">Primary</Badge> <Badge color="hero">Hero</Badge> <Badge color="neutral">Neutral</Badge>{' '}
<Badge color="faint">Faint</Badge> <Badge color="success">Success</Badge> <Badge color="info">Info</Badge>{' '}
<Badge color="warning">Warning</Badge> <Badge color="danger">Danger</Badge>
</p>
<p className="typography-body-10 text-muted">
<em>Soft</em>
</p>
<p className="my-2">
<Badge color="primary" soft>
Primary
</Badge>{' '}
<Badge color="hero" soft>
Hero
</Badge>{' '}
<Badge color="neutral" soft>
Neutral
</Badge>{' '}
<Badge color="faint" soft>
Faint
</Badge>{' '}
<Badge color="success" soft>
Success
</Badge>{' '}
<Badge color="info" soft>
Info
</Badge>{' '}
<Badge color="warning" soft>
Warning
</Badge>{' '}
<Badge color="danger" soft>
Danger
</Badge>
</p>
</Fragment>
```

### Badges - Pill

```tsx
() => {
const COLORS = ['danger', 'warning', 'success', 'info', 'primary', 'hero', 'neutral', 'faint', 'muted'] as const;

return (
<div className="flex flex-col gap-2">
<p className="typography-body-10 text-muted">
<em>Colours</em>
<Fragment>
<p className="mb-2 typography-body-10 text-muted">
<em>Default</em>
</p>
<div>
{COLORS.map(color => (
<Badge className="my-1 mr-2" type="pill" color={color}>
88
</Badge>
))}
</div>
<p className="typography-body-10 text-muted">
<div className="flex gap-1">
<Badge color="primary" type="pill">88</Badge>{" "}
<Badge color="hero" type="pill">88</Badge>{" "}
<Badge color="neutral" type="pill">88</Badge>{" "}
<Badge color="faint" type="pill">88</Badge>{" "}

<Badge color="success" type="pill">88</Badge>{" "}
<Badge color="info" type="pill">88</Badge>{" "}
<Badge color="warning" type="pill">88</Badge>{" "}
<Badge color="danger" type="pill">88</Badge>
</p>
<p className="mb-2 mt-2 typography-body-10 text-muted">
<em>Soft</em>
</p>
<div>
{COLORS.map(color => (
<Badge className="my-1 mr-2" type="pill" color={color} soft>
88
</Badge>
))}
</div>
</div>
);
};
<div className="flex gap-1">
<Badge color="primary" type="pill" soft>88</Badge>{" "}
<Badge color="hero" type="pill" soft>88</Badge>{" "}
<Badge color="neutral" type="pill" soft>88</Badge>{" "}
<Badge color="faint" type="pill" soft>88</Badge>{" "}
<Badge color="success" type="pill" soft>88</Badge>{" "}
<Badge color="info" type="pill" soft>88</Badge>{" "}
<Badge color="warning" type="pill" soft>88</Badge>{" "}
<Badge color="danger" type="pill" soft>88</Badge>
</p>
</Fragment>
```

### Usage examples

```tsx
() => {
const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const;
const INVERTED_COLORS = [
'danger-inverted',
'faint-inverted',
'hero-inverted',
'info-inverted',
'neutral-inverted',
'primary-inverted',
'success-inverted',
'warning-inverted',
] as const;

return (
<div className="flex flex-col gap-6">
<div>
<p className="mb-2 typography-body-10 text-muted">
<em>Examples showing pill style badge</em>
</p>
<div className="flex gap-2">
<Button look="primary" soft>
<div className="flex gap-1">
<Badge color="hero" type="pill">
6
</Badge>
<span>Label</span>
</div>
</Button>
<Button look="primary">
<div className="flex gap-1">
<Badge color="faint" type="pill" soft>
88
</Badge>
<span>Label</span>
</div>
</Button>
<a className="text-link flex items-center" href="#">
<div className="underline">
Messages
</div>
<Badge color="muted" type="pill" className="ml-1">
12
</Badge>
</a>
</div>
const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const;
const INVERTED_COLORS = [
'danger-inverted',
'faint-inverted',
'hero-inverted',
'info-inverted',
'neutral-inverted',
'primary-inverted',
'success-inverted',
'warning-inverted',
] as const;

return (
<div className="flex flex-col gap-6">
<div>
<p className="mb-2 typography-body-10 text-muted">
<em>Examples showing pill style badge</em>
</p>
<div className="flex gap-2">
<Button look="primary" soft>
<div className="flex gap-1">
<Badge color="hero" type="pill">
6
</Badge>
<span>Label</span>
</div>
</Button>
<Button look="primary">
<div className="flex gap-1">
<Badge color="faint" type="pill" soft>
88
</Badge>
<span>Label</span>
</div>
</Button>
<a className="text-link underline" href="#">
Messages{' '}
</a>
<Badge color="muted" type="pill" className="ml-.5">
12
</Badge>
</div>
<div>
<p className="mb-2 typography-body-10 text-muted">
<em>Examples showing basic style badge</em>
</p>

<div className="flex gap-2">
<Button look="primary" soft>
<div className="flex gap-1 items-center">
<span>Label</span>
<Badge color="hero">NEW</Badge>
</div>
</Button>

<Button look="primary">
<div className="flex gap-1 items-center">
<span>Label</span>
<Badge color="faint" soft>NEW</Badge>
</div>
</Button>

<a className="text-link underline" href="#">
Product feature
<Badge color="muted" className="ml-1">
NEW
</Badge>
</a>
</div>
<div>
<p className="mb-2 typography-body-10 text-muted">
<em>Examples showing basic style badge</em>
</p>

<div className="flex gap-2">
<Button look="primary" soft>
<div className="flex gap-1 items-center">
<span>Label</span>
<Badge color="hero">New</Badge>
</div>
</Button>

</div>
<Button look="primary">
<div className="flex gap-1 items-center">
<span>Label</span>
<Badge color="faint" soft>
New
</Badge>
</div>
</Button>

<a className="text-link underline" href="#">
Product feature
</a>
<Badge color="muted" className="ml-.5">
New
</Badge>
</div>
</div>
);
};
</div>
);
};
```
2 changes: 2 additions & 0 deletions .../content/design-system/components/compacta/accessibility/accessibility-notes/content.mdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,5 @@ All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fa
In order to assist screen reader users in determine which ‘compacta’ they are viewing an associated number is required. This is kept at the UI level for those who may use a combination of magnifier and screen reader.

Compactas are accessible components and must have numerical signifiers to aid screen reader users navigate and contextualise as well as those who use zoom tools or a combination of both.

The left-aligned placement of the 'Add another' and 'Remove' buttons is also an accessibility consideration for users who rely on zoom functionality, ensuring they can easily locate these controls without needing to search across the screen.
6 changes: 1 addition & 5 deletions apps/site/src/content/design-system/components/compacta/design/user-experience/content.mdoc
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
The Compacta was designed to meet the need of capturing multiple instances of detailed information without overwhelming users, particularly on mobile devices. An example use case may be multiple questions about a customers’ assets.

It is always editable, with the drawer state an easy and familiar show/hide interaction. The remove button is located at the top of an open Compacta for consistency, recall, and to keep all functions in one place.

The numbering of each Compacta is an accessibility consideration for low vision/zoom and screen reader users to help navigate and identify groupings of content.
The drawer has an easy and familiar show/hide interaction. The 'Add another' and 'Remove' buttons are left-aligned and positioned at the bottom of an open Compacta. This placement, along with the numbering of each Compacta are both accessibility considerations for users who rely on zoom functionality, ensuring they can easily locate these controls without needing to search across the screen.

### States and behaviours

Expand All @@ -29,5 +27,3 @@ An example may be:
### Pre-populated content

Pre-populating fields with content brings complexity for data management, technology, data quality, risk and compliance, and users’ cognitive load. However, if done well with good quality data it can expedite form progress.

If pre-populating Compactas, use an alert above the first instance to highlight the need for the user to open and review their information as all pre-populated Compactas should be closed by default. By having all pre-populated Compactas open for review would be potentially overwhelming.

0 comments on commit 7d94904

Please sign in to comment.