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.

Sign up for GitHub

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

Jump to bottom

357 compacta default demo is missing in gel next #358

Merged
merged 3 commits into from
Nov 23, 2023
Merged

357 compacta default demo is missing in gel next #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9a4dfc5
Merge pull request #350 from WestpacGEL/develop
jaortiz Nov 23, 2023
90ea0ce
closes #349 checkbox examples
kenjishiromajp Nov 23, 2023
b9965e8
closes #357 compacta examples
kenjishiromajp Nov 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/site/src/components/code/code.inject-components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import Link from 'next/link';

export { ComponentTitle } from '../document-renderer/component-title';

export {
Badge,
Button,
Expand Down
5 changes: 5 additions & 0 deletions apps/site/src/components/document-renderer/component-title/component-title.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { type ComponentTitle } from './component-title.types';

export function ComponentTitle({ children }: ComponentTitle) {
return <p className="typography-body-10 mb-[0.875rem] font-normal italic text-muted">{children}</p>;
}
5 changes: 5 additions & 0 deletions apps/site/src/components/document-renderer/component-title/component-title.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { ReactNode } from 'react';

export type ComponentTitle = {
children: ReactNode;
};
1 change: 1 addition & 0 deletions apps/site/src/components/document-renderer/component-title/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './component-title.component';
12 changes: 6 additions & 6 deletions apps/site/src/content/design-system/components/alert/accessibilityDemo.mdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
```tsx
<div>
<p className="typography-body-10 mb-[0.875rem] italic text-muted">Success</p>
<ComponentTitle>Success</ComponentTitle>
<Alert look="success">
<strong>Thank you</strong> Your account has successfully been opened.
</Alert>
<p className="typography-body-10 mb-[0.875rem] italic text-muted">Information</p>
<ComponentTitle>Information</ComponentTitle>
<Alert look="info" dismissible>
<strong>Changed Opening Hours</strong> The opening hours for this branch have changed.
</Alert>
<p className="typography-body-10 mb-[0.875rem] italic text-muted">Warning</p>
<ComponentTitle>Warning</ComponentTitle>
<Alert look="warning" dismissible>
<strong>Time out</strong> Please make sure you complete this process, this operation will time out in 5 min.
</Alert>
<p className="typography-body-10 mb-[0.875rem] italic text-muted">Danger</p>
<ComponentTitle>Danger</ComponentTitle>
<Alert look="danger" dismissible>
<strong>Please fix the 3 errors listed below</strong>
<ul className="[&_li]:m-1 [&_li]:underline">
Expand All @@ -21,12 +21,12 @@
<li>Enter your family name</li>
</ul>
</Alert>
<p className="typography-body-10 mb-[0.875rem] italic text-muted">System error</p>
<ComponentTitle>System error</ComponentTitle>
<Alert look="system" dismissible>
<strong>System Error</strong> The server is not responding. Please try again later. We are sorry for any
inconvenience.
</Alert>
<p className="typography-body-10 mb-[0.875rem] italic text-muted">Flexible info style icon</p>
<ComponentTitle>Flexible info style icon</ComponentTitle>
<Alert look="info" icon={PhoneIcon}>
Please make sure your mobile number is correct, we will use this to contact you if we have any questions about your
application.
Expand Down
17 changes: 4 additions & 13 deletions apps/site/src/content/design-system/components/checkbox-group/accessibilityDemo.mdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,6 @@
```jsx
<div>
<CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} orientation="horizontal">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>

<CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large" orientation="horizontal">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
</div>
<CheckboxGroup orientation="horizontal">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
</CheckboxGroup>
```
107 changes: 73 additions & 34 deletions apps/site/src/content/design-system/components/checkbox-group/code.mdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,71 @@
This component was combined with RadioGroup in the old GEL, it is now it's own component as it using React Aria

## Checkbox sizes
### Default form checks

```jsx
<div className="flex">
<CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
<span className="mr-3" />
<CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large">
<div className="grid grid-cols-2">
<CheckboxGroup className="col-span-1" label={<ComponentTitle>Checkbox</ComponentTitle>}>
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
</div>
```

## Horizontal layout
### With default value

```jsx
<CheckboxGroup label={<ComponentTitle>Checkbox</ComponentTitle>} defaultValue={['1', '3']}>
<CheckboxGroup.Checkbox value="1" isDisabled>
Option 1
</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
```

### With onChange

```jsx
<div>
<CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} orientation="horizontal">
() => {
const [formCheckValue, setFormCheckValue] = useState(['1', '3']);

return (
<CheckboxGroup
value={formCheckValue}
onChange={(value, event) => setFormCheckValue(value)}
label={<ComponentTitle>Checkbox</ComponentTitle>}
>
<CheckboxGroup.Checkbox value="1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
);
};
```

### Checkbox sizes

```jsx
<div className="grid grid-cols-2">
<CheckboxGroup className="col-span-1" label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>

<CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large" orientation="horizontal">
<CheckboxGroup className="col-span-1" label={<ComponentTitle>Large</ComponentTitle>} size="large">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
</div>
```

## Checkboxes with hint text
### Checkboxes with hint text

```jsx
<div className="flex">
<CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
<div className="grid grid-cols-2">
<CheckboxGroup className="col-span-1" label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
<CheckboxGroup.Checkbox value="Option 1" hint="This is hint text">
Option 1
</CheckboxGroup.Checkbox>
Expand All @@ -51,8 +76,7 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
Option 3
</CheckboxGroup.Checkbox>
</CheckboxGroup>
<span className="mr-3" />
<CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large">
<CheckboxGroup className="col-span-1" label={<ComponentTitle>Large</ComponentTitle>} size="large">
<CheckboxGroup.Checkbox value="Option 1" hint="This is hint text">
Option 1
</CheckboxGroup.Checkbox>
Expand All @@ -66,55 +90,70 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
</div>
```

## CheckboxGroup with Reveal
### Inline

```jsx
<div className="grid grid-cols-2">
<CheckboxGroup label={<ComponentTitle>Medium</ComponentTitle>} orientation="horizontal">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>

<CheckboxGroup label={<ComponentTitle>Large</ComponentTitle>} size="large" orientation="horizontal">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
</div>
```

### CheckboxGroup with Reveal

```jsx
<div className="flex">
<CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium" showAmount={1}>
<div className="grid grid-cols-2">
<CheckboxGroup label={<ComponentTitle>Medium</ComponentTitle>} size="medium" showAmount={1}>
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
<span className="mr-3" />
<CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large" showAmount={1}>
<CheckboxGroup label={<ComponentTitle>Large</ComponentTitle>} size="large" showAmount={1}>
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
</div>
```

## CheckboxGroup completely disabled
### CheckboxGroup completely disabled

```jsx
<div className="flex">
<CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium" isDisabled>
<div className="grid grid-cols-2">
<CheckboxGroup label={<ComponentTitle>Medium</ComponentTitle>} size="medium" isDisabled>
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
<span className="mr-3" />
<CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large" isDisabled>
<CheckboxGroup label={<ComponentTitle>Large</ComponentTitle>} size="large" isDisabled>
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
</div>
```

## CheckboxGroup with individual items disabled
### CheckboxGroup with individual items disabled

```jsx
<div className="flex">
<CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
<div className="grid grid-cols-2">
<CheckboxGroup label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
<CheckboxGroup.Checkbox value="Option 1" isDisabled>
Option 1
</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
<span className="mr-3" />
<CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large">
<CheckboxGroup label={<ComponentTitle>Large</ComponentTitle>} size="large">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2" isDisabled>
Option 2
Expand Down
7 changes: 3 additions & 4 deletions ...te/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
There are two checkbox sizes, make sure when laying out forms that your checkbox size and field sizes are aligned.

```jsx
<div className="flex">
<CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
<div className="grid grid-cols-2">
<CheckboxGroup className="col-span-1" label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
<span className="mr-3" />
<CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large">
<CheckboxGroup className="col-span-1" label={<ComponentTitle>Large</ComponentTitle>} size="large">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
Expand Down
7 changes: 3 additions & 4 deletions ...ntent/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
This variation allows supporting text to be displayed below the selectable item. For use in scenarios where the options are complex and require further information for clarity, using the hint text prevents the labels becoming too long which can effect scanability.

```jsx
<div className="flex">
<CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
<div className="grid grid-cols-2">
<CheckboxGroup className="col-span-1" label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
<CheckboxGroup.Checkbox value="Option 1" hint="This is hint text">
Option 1
</CheckboxGroup.Checkbox>
Expand All @@ -13,8 +13,7 @@ This variation allows supporting text to be displayed below the selectable item.
Option 3
</CheckboxGroup.Checkbox>
</CheckboxGroup>
<span className="mr-3" />
<CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large">
<CheckboxGroup className="col-span-1" label={<ComponentTitle>Large</ComponentTitle>} size="large">
<CheckboxGroup.Checkbox value="Option 1" hint="This is hint text">
Option 1
</CheckboxGroup.Checkbox>
Expand Down
7 changes: 3 additions & 4 deletions .../content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,13 @@ When requirements dictate long lists of choices, and particularly as mobile scre
- Always express how many items are behind the reveal.

```jsx
<div className="flex">
<CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium" showAmount={1}>
<div className="grid grid-cols-2">
<CheckboxGroup label={<ComponentTitle>Medium</ComponentTitle>} size="medium" showAmount={1}>
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
<span className="mr-3" />
<CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large" showAmount={1}>
<CheckboxGroup label={<ComponentTitle>Large</ComponentTitle>} size="large" showAmount={1}>
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
Expand Down
18 changes: 5 additions & 13 deletions ...src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
Use this option when you require an inline layout, it's only recommended in very specific circumstances and we suggest never having more than two checkboxes side-by-side.

```jsx
<div>
<CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} orientation="horizontal">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>

<CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large" orientation="horizontal">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
</div>
<CheckboxGroup orientation="horizontal">
<CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
</CheckboxGroup>
```
Loading