Skip to content

Commit

Permalink
Merge pull request #925 from WestpacGEL/content-badges-kate
Browse files Browse the repository at this point in the history 
Content badges kate
  • Loading branch information
@KateMacdonald
KateMacdonald authored Nov 6, 2024
2 parents e6ae684 + 6c92872 commit 67d479a
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 69 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>
```
131 changes: 68 additions & 63 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,69 +1,74 @@
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
Expand Down Expand Up @@ -106,11 +111,11 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
</div>
</Button>
<a className="text-link underline" href="#">
Messages
<Badge color="muted" type="pill" className="ml-1">
Messages </a>
<Badge color="muted" type="pill" className="ml-.5">
12
</Badge>
</a>

</div>
</div>
<div>
Expand All @@ -122,23 +127,23 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
<Button look="primary" soft>
<div className="flex gap-1 items-center">
<span>Label</span>
<Badge color="hero">NEW</Badge>
<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>
<Badge color="faint" soft>New</Badge>
</div>
</Button>

<a className="text-link underline" href="#">
Product feature
<Badge color="muted" className="ml-1">
NEW
Product feature</a>
<Badge color="muted" className="ml-.5">
New
</Badge>
</a>



</div>
Expand Down

0 comments on commit 67d479a

Please sign in to comment.