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

Content badges kate #925

Merged
merged 8 commits into from
Nov 6, 2024
Merged

Content badges kate #925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4b462b3
Update src/content/design-system/components/badge
KateMacdonald Nov 6, 2024
0883cf6
Update src/content/design-system/components/badge
KateMacdonald Nov 6, 2024
04c1e89
Update src/content/design-system/components/badge
KateMacdonald Nov 6, 2024
92f7c3b
Update src/content/design-system/components/badge
KateMacdonald Nov 6, 2024
d6f99ef
Update src/content/design-system/components/badge
KateMacdonald Nov 6, 2024
1634532
Update src/content/design-system/components/badge
KateMacdonald Nov 6, 2024
a98e111
Update src/content/design-system/components/badge
KateMacdonald Nov 6, 2024
6c92872
Update src/content/design-system/components/badge
KateMacdonald Nov 6, 2024
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
54 changes: 48 additions & 6 deletions apps/site/src/content/design-system/components/badge/code/development-examples/content.mdoc
View file
Open in desktop
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
Open in desktop
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
Loading