Skip to content

Commit a8086d9

Browse files
AdamJAdamJ
committed
badge: add outline variant
1 parent f1b127d commit a8086d9

File tree

3 files changed

+82
-40
lines changed

3 files changed

+82
-40
lines changed

‎src/stories/badge/Badge.js‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,54 @@
11
export const createBadge = ({
22
primary = false,
3+
outline = false,
34
count = false,
45
label
56
}) => {
67
const badge = document.createElement('span');
78

89
let mode;
9-
if (count) {
10-
mode = 'position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger';
11-
// if (primary) {
12-
// mode = 'position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger';
13-
// } else if (label === 'Secondary Pill') {
14-
// mode = 'rounded-pill text-bg-secondary';
15-
// } else if (label === 'Success Pill') {
16-
// mode = 'rounded-pill text-bg-success';
17-
// } else if (label === 'Danger Pill') {
18-
// mode = 'rounded-pill text-bg-danger';
19-
// } else if (label === 'Warning Pill') {
20-
// mode = 'rounded-pill text-bg-warning';
21-
// } else if (label === 'Info Pill') {
22-
// mode = 'rounded-pill text-bg-info';
23-
// } else if (label === 'Light Pill') {
24-
// mode = 'rounded-pill text-bg-light';
25-
// } else if (label === 'Dark Pill') {
26-
// mode = 'rounded-pill text-bg-dark';
27-
// }
10+
// if (count) {
11+
// mode = 'position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger';
12+
// // if (primary) {
13+
// // mode = 'position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger';
14+
// // } else if (label === 'Secondary Pill') {
15+
// // mode = 'rounded-pill text-bg-secondary';
16+
// // } else if (label === 'Success Pill') {
17+
// // mode = 'rounded-pill text-bg-success';
18+
// // } else if (label === 'Danger Pill') {
19+
// // mode = 'rounded-pill text-bg-danger';
20+
// // } else if (label === 'Warning Pill') {
21+
// // mode = 'rounded-pill text-bg-warning';
22+
// // } else if (label === 'Info Pill') {
23+
// // mode = 'rounded-pill text-bg-info';
24+
// // } else if (label === 'Light Pill') {
25+
// // mode = 'rounded-pill text-bg-light';
26+
// // } else if (label === 'Dark Pill') {
27+
// // mode = 'rounded-pill text-bg-dark';
28+
// // }
29+
// } else {
30+
if (outline) {
31+
if (primary) {
32+
mode = 'text-bg-primary bg-transparent border border-primary text-primary';
33+
} else if (label === 'Secondary') {
34+
mode = 'text-bg-secondary bg-transparent border border-secondary text-secondary';
35+
} else if (label === 'Success') {
36+
mode = 'text-bg-success bg-transparent border border-success text-success';
37+
} else if (label === 'Danger') {
38+
mode = 'text-bg-danger bg-transparent border border-danger text-danger';
39+
} else if (label === 'Warning') {
40+
mode = 'text-bg-warning bg-transparent border border-warning text-warning';
41+
} else if (label === 'Info') {
42+
mode = 'text-bg-info bg-transparent border border-info text-info';
43+
} else if (label === 'Light') {
44+
mode = 'text-bg-light bg-transparent border border-light-subtle text-black-50';
45+
} else if (label === 'Dark') {
46+
mode = 'text-bg-dark bg-transparent border border-dark-subtle text-dark';
47+
} else {
48+
mode = 'text-bg-secondary bg-transparent border border-secondary text-secondary';
49+
}
2850
} else {
29-
if (primary) {
51+
if (primary) {
3052
mode = 'text-bg-primary';
3153
} else if (label === 'Secondary') {
3254
mode = 'text-bg-secondary';
@@ -43,7 +65,7 @@ export const createBadge = ({
4365
} else if (label === 'Dark') {
4466
mode = 'text-bg-dark';
4567
} else {
46-
mode = 'text-bg-primary';
68+
mode = 'text-bg-secondary';
4769
}
4870
}
4971

‎src/stories/badge/Badge.stories.js‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,16 @@ export default {
99
component: createBadge,
1010
id: 'Components/Badge',
1111
tags: ['component'],
12-
render: ({ label, ...args }) => {
12+
render: ({ label, primary, outline, ...args }) => {
1313
// You can either use a function to create DOM elements or use a plain html string!
1414
// return `<div>${label}</div>`;
15-
return createBadge({ label, ...args });
15+
return createBadge({ label, primary, outline, ...args });
1616
},
1717
argTypes: {
1818
count: { control: 'boolean' },
1919
label: { control: 'text' },
20+
primary: { control: 'boolean' },
21+
outline: { control: 'boolean' },
2022
},
2123
parameters: {
2224
design: {
@@ -33,47 +35,81 @@ export const Primary = {
3335
args: {
3436
count: false,
3537
label: 'Primary',
38+
outline: false,
39+
primary: true,
3640
},
3741
};
3842
export const Secondary = {
3943
args: {
4044
count: false,
4145
label: 'Secondary',
46+
outline: false,
47+
primary: false,
4248
},
4349
};
4450
export const Success = {
4551
args: {
4652
count: false,
4753
label: 'Success',
54+
outline: false,
55+
primary: false,
4856
},
4957
};
5058
export const Danger = {
5159
args: {
5260
count: false,
5361
label: 'Danger',
62+
outline: false,
63+
primary: false,
5464
},
5565
};
5666
export const Warning = {
5767
args: {
5868
count: false,
5969
label: 'Warning',
70+
outline: false,
71+
primary: false,
6072
},
6173
};
6274
export const Info = {
6375
args: {
6476
count: false,
6577
label: 'Info',
78+
outline: false,
79+
primary: false,
6680
},
6781
};
6882
export const Light = {
6983
args: {
7084
count: false,
7185
label: 'Light',
86+
outline: false,
87+
primary: false,
7288
},
7389
};
7490
export const Dark = {
7591
args: {
7692
count: false,
7793
label: 'Dark',
94+
outline: false,
95+
primary: false,
7896
},
7997
};
98+
export const BadgeInsideButton = () => {
99+
return `
100+
<button type="button" class="btn btn-primary">
101+
Notifications <span class="badge text-bg-light">4</span>
102+
</button>
103+
`;
104+
};
105+
export const BadgeAsCounter = () => {
106+
return `
107+
<button type="button" class="btn btn-outline-primary position-relative">
108+
Inbox
109+
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
110+
99+
111+
<span class="visually-hidden">unread messages</span>
112+
</span>
113+
</button>
114+
`;
115+
};

‎src/stories/badge/Badges.mdx‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -47,26 +47,10 @@ These controls allow you to interactively modify the props of the component in t
4747

4848
## Additional variations
4949

50-
<Canvas of={BadgeStories.Secondary} />
51-
<Canvas of={BadgeStories.Success} />
52-
<Canvas of={BadgeStories.Danger} />
53-
<Canvas of={BadgeStories.Warning} />
54-
<Canvas of={BadgeStories.Info} />
55-
<Canvas of={BadgeStories.Light} />
56-
<Canvas of={BadgeStories.Dark} />
57-
5850
### Badge as a Counter
5951

6052
As this example shows, badges can be used as counters to indicate the number of unread messages or notifications. This is typically done by positioning the badge in the top-right corner of an icon or button.
6153

62-
```html
63-
<button type="button" class="btn btn-primary position-relative">
64-
Inbox
65-
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
66-
99+
67-
<span class="visually-hidden">unread messages</span>
68-
</span>
69-
</button>
70-
```
54+
<Canvas of={BadgeStories.BadgeAsCounter} />
7155

7256
</div>

0 commit comments

Comments
 (0)