Skip to content

Commit 566bdb3

Browse files
TechQueryTechQuery
committed
[refactor] upgrade to BootCell 1.0 & Bootstrap 4.5
1 parent 2643997 commit 566bdb3

33 files changed

Lines changed: 1430 additions & 867 deletions

‎document/source/components/Alert.mdx‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,32 +14,36 @@ import { Example } from '../../../source/component/Example';
1414
Alerts are available for any length of text, as well as an optional dismiss button.
1515

1616
<Example>
17-
<Alert>A simple primary alert—check it out!</Alert>
18-
<Alert type="secondary">A simple secondary alert—check it out!</Alert>
19-
<Alert type="success">A simple success alert—check it out!</Alert>
20-
<Alert type="danger">A simple danger alert—check it out!</Alert>
21-
<Alert type="warning">A simple warning alert—check it out!</Alert>
22-
<Alert type="info">A simple info alert—check it out!</Alert>
23-
<Alert type="light">A simple light alert—check it out!</Alert>
24-
<Alert type="dark">A simple dark alert—check it out!</Alert>
17+
{[
18+
'primary',
19+
'secondary',
20+
'success',
21+
'danger',
22+
'warning',
23+
'info',
24+
'light',
25+
'dark'
26+
].map(color => (
27+
<Alert color={color}>A simple {color} alert—check it out!</Alert>
28+
))}
2529
</Example>
2630

2731
```TSX
28-
import { render, createCell, Fragment } from 'web-cell';
32+
import { render, createCell } from 'web-cell';
2933
import { Alert } from 'boot-cell/source/Prompt/Alert';
3034

31-
render(
32-
<Fragment>
33-
<Alert>A simple primary alert—check it out!</Alert>
34-
<Alert type="secondary">A simple secondary alert—check it out!</Alert>
35-
<Alert type="success">A simple success alert—check it out!</Alert>
36-
<Alert type="danger">A simple danger alert—check it out!</Alert>
37-
<Alert type="warning">A simple warning alert—check it out!</Alert>
38-
<Alert type="info">A simple info alert—check it out!</Alert>
39-
<Alert type="light">A simple light alert—check it out!</Alert>
40-
<Alert type="dark">A simple dark alert—check it out!</Alert>
41-
</Fragment>
42-
);
35+
render([
36+
'primary',
37+
'secondary',
38+
'success',
39+
'danger',
40+
'warning',
41+
'info',
42+
'light',
43+
'dark'
44+
].map(color => (
45+
<Alert color={color}>A simple {color} alert—check it out!</Alert>
46+
)));
4347
```
4448

4549
> ##### Conveying meaning to assistive technologies
@@ -56,7 +60,7 @@ render(
5660
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
5761

5862
<Example>
59-
<Alert type="success" title="Well done!">
63+
<Alert color="success" title="Well done!">
6064
<p>
6165
Aww yeah, you successfully read this important alert message. This
6266
example text is going to run a bit longer so that you can see how
@@ -75,7 +79,7 @@ import { render, createCell } from 'web-cell';
7579
import { Alert } from 'boot-cell/source/Prompt/Alert';
7680

7781
render(
78-
<Alert type="success" title="Well done!">
82+
<Alert color="success" title="Well done!">
7983
<p>
8084
Aww yeah, you successfully read this important alert message. This
8185
example text is going to run a bit longer so that you can see how
@@ -95,7 +99,7 @@ render(
9599
You can see this in action with a live demo:
96100

97101
<Example>
98-
<Alert type="warning" closable>
102+
<Alert color="warning" closable>
99103
<strong>Holy guacamole!</strong> You should check in on some of those
100104
fields below.
101105
</Alert>
@@ -106,7 +110,7 @@ import { render, createCell } from 'web-cell';
106110
import { Alert } from 'boot-cell/source/Prompt/Alert';
107111

108112
render(
109-
<Alert type="warning" closable>
113+
<Alert color="warning" closable>
110114
<strong>Holy guacamole!</strong> You should check in on some of those
111115
fields below.
112116
</Alert>

‎document/source/components/Badge.mdx‎

Lines changed: 47 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Badges scale to match the size of the immediate parent element by using relative
1919
const Tag = 'h' + level;
2020
return (
2121
<Tag>
22-
Example heading <Badge kind="secondary">New</Badge>
22+
Example heading <Badge color="secondary">New</Badge>
2323
</Tag>
2424
);
2525
})}
@@ -34,7 +34,7 @@ render([1, 2, 3, 4, 5, 6].map(level => {
3434

3535
return (
3636
<Tag>
37-
Example heading <Badge kind="secondary">New</Badge>
37+
Example heading <Badge color="secondary">New</Badge>
3838
</Tag>
3939
);
4040
}));
@@ -44,7 +44,7 @@ Badges can be used as part of links or buttons to provide a counter.
4444

4545
<Example>
4646
<Button>
47-
Notifications <Badge kind="light">4</Badge>
47+
Notifications <Badge color="light">4</Badge>
4848
</Button>
4949
</Example>
5050

@@ -55,7 +55,7 @@ import { Button } from 'boot-cell/source/Form/Button';
5555

5656
render(
5757
<Button>
58-
Notifications <Badge kind="light">4</Badge>
58+
Notifications <Badge color="light">4</Badge>
5959
</Button>
6060
);
6161
```
@@ -71,7 +71,7 @@ the “4” is the number of notifications), consider including additional conte
7171

7272
<Example>
7373
<Button>
74-
Profile <Badge kind="light">9</badge>
74+
Profile <Badge color="light">9</badge>
7575
<span className="sr-only">unread messages</span>
7676
</Button>
7777
</Example>
@@ -83,43 +83,51 @@ import { Button } from 'boot-cell/source/Form/Button';
8383

8484
render(
8585
<Button>
86-
Profile <Badge kind="light">9</badge>
86+
Profile <Badge color="light">9</badge>
8787
<span className="sr-only">unread messages</span>
8888
</Button>
8989
);
9090
```
9191

9292
## Contextual variations
9393

94-
Add any of the below mentioned `kind` property values to change the appearance of a badge.
94+
Add any of the below mentioned `color` property values to change the appearance of a badge.
9595

9696
<Example>
97-
<Badge>Primary</Badge>
98-
<Badge kind="secondary">Secondary</Badge>
99-
<Badge kind="success">Success</Badge>
100-
<Badge kind="danger">Danger</Badge>
101-
<Badge kind="warning">Warning</Badge>
102-
<Badge kind="info">Info</Badge>
103-
<Badge kind="light">Light</Badge>
104-
<Badge kind="dark">Dark</Badge>
97+
{[
98+
'primary',
99+
'secondary',
100+
'success',
101+
'danger',
102+
'warning',
103+
'info',
104+
'light',
105+
'dark'
106+
].map(color => (
107+
<Badge color={color} className="text-capitalize">
108+
{color}
109+
</Badge>
110+
))}
105111
</Example>
106112

107113
```TSX
108114
import { render, createCell } from 'web-cell';
109115
import { Badge } from 'boot-cell/source/Reminder/Badge';
110116

111-
render(
112-
<Fragment>
113-
<Badge>Primary</Badge>
114-
<Badge kind="secondary">Secondary</Badge>
115-
<Badge kind="success">Success</Badge>
116-
<Badge kind="danger">Danger</Badge>
117-
<Badge kind="warning">Warning</Badge>
118-
<Badge kind="info">Info</Badge>
119-
<Badge kind="light">Light</Badge>
120-
<Badge kind="dark">Dark</Badge>
121-
</Fragment>
122-
);
117+
render([
118+
'primary',
119+
'secondary',
120+
'success',
121+
'danger',
122+
'warning',
123+
'info',
124+
'light',
125+
'dark'
126+
].map(color => (
127+
<Badge color={color} className="text-capitalize">
128+
{color}
129+
</Badge>
130+
)));
123131
```
124132

125133
> ##### Conveying meaning to assistive technologies
@@ -143,9 +151,9 @@ Useful if you miss the badges from v3.
143151
'info',
144152
'light',
145153
'dark'
146-
].map(kind => (
147-
<Badge pill kind={kind} className="text-capitalize">
148-
{kind}
154+
].map(color => (
155+
<Badge pill color={color} className="text-capitalize">
156+
{color}
149157
</Badge>
150158
))}
151159
</Example>
@@ -163,9 +171,9 @@ render([
163171
'info',
164172
'light',
165173
'dark'
166-
].map(kind => (
167-
<Badge pill kind={kind} className="text-capitalize">
168-
{kind}
174+
].map(color => (
175+
<Badge pill color={color} className="text-capitalize">
176+
{color}
169177
</Badge>
170178
)));
171179
```
@@ -184,9 +192,9 @@ Using `href` property on `<Badge />` quickly provide actionable badges with hove
184192
'info',
185193
'light',
186194
'dark'
187-
].map(kind => (
188-
<Badge href="." kind={kind} className="text-capitalize">
189-
{kind}
195+
].map(color => (
196+
<Badge href="." color={color} className="text-capitalize">
197+
{color}
190198
</Badge>
191199
))}
192200
</Example>
@@ -204,9 +212,9 @@ render([
204212
'info',
205213
'light',
206214
'dark'
207-
].map(kind => (
208-
<Badge href="." kind={kind} className="text-capitalize">
209-
{kind}
215+
].map(color => (
216+
<Badge href="." color={color} className="text-capitalize">
217+
{color}
210218
</Badge>
211219
)));
212220
```

0 commit comments

Comments
 (0)