Skip to content

Commit a8ad7bc

Browse files
TechQueryTechQuery
committed
[add] API URL button
[optimize] upgrade Upstream packages
1 parent 09d500f commit a8ad7bc

22 files changed

Lines changed: 174 additions & 149 deletions

‎document/source/components/Alert.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Alerts are available for any length of text, as well as an optional dismiss butt
2424
<Alert type="dark">A simple dark alert—check it out!</Alert>
2525
</Example>
2626

27-
```JavaScript
27+
```TSX
2828
import { render, Fragment } from 'web-cell';
2929
import { Alert } from 'boot-cell/source/Prompt/Alert';
3030

@@ -70,7 +70,7 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d
7070
</Alert>
7171
</Example>
7272

73-
```JavaScript
73+
```TSX
7474
import { render } from 'web-cell';
7575
import { Alert } from 'boot-cell/source/Prompt/Alert';
7676

@@ -101,7 +101,7 @@ You can see this in action with a live demo:
101101
</Alert>
102102
</Example>
103103

104-
```JavaScript
104+
```TSX
105105
import { render } from 'web-cell';
106106
import { Alert } from 'boot-cell/source/Prompt/Alert';
107107

‎document/source/components/BreadCrumb.mdx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,26 @@ import { Example } from '../../../source/component/Example';
1515
<BreadCrumb path={[{ title: 'Home' }]} />
1616
</Example>
1717

18-
```JavaScript
18+
```TSX
1919
import { render } from 'web-cell';
2020
import { BreadCrumb } from 'boot-cell/source/Navigator/BreadCrumb';
2121

22-
render(<BreadCrumb path={[{ title: 'Home' }]} />);
22+
render(
23+
<BreadCrumb path={[{ title: 'Home' }]} />
24+
);
2325
```
2426

2527
<Example>
2628
<BreadCrumb path={[{ href: '#', title: 'Home' }, { title: 'Library' }]} />
2729
</Example>
2830

29-
```JavaScript
31+
```TSX
3032
import { render } from 'web-cell';
3133
import { BreadCrumb } from 'boot-cell/source/Navigator/BreadCrumb';
3234

33-
render(<BreadCrumb path={[{ href: '#', title: 'Home' }, { title: 'Library' }]} />);
35+
render(
36+
<BreadCrumb path={[{ href: '#', title: 'Home' }, { title: 'Library' }]} />
37+
);
3438
```
3539

3640
<Example>
@@ -43,7 +47,7 @@ render(<BreadCrumb path={[{ href: '#', title: 'Home' }, { title: 'Library' }]} /
4347
/>
4448
</Example>
4549

46-
```JavaScript
50+
```TSX
4751
import { render } from 'web-cell';
4852
import { BreadCrumb } from 'boot-cell/source/Navigator/BreadCrumb';
4953

‎document/source/components/Card.mdx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ This is easily customized with our various [sizing options](#sizing).
3636
</Card>
3737
</Example>
3838

39-
```JavaScript
39+
```TSX
4040
import { render } from 'web-cell';
4141
import { Card } from 'boot-cell/source/Content/Card';
4242
import { Button } from 'boot-cell/source/Form/Button';
@@ -65,7 +65,7 @@ The building block of a card is the `.card-body`. Use it whenever you need a pad
6565
<Card text="This is some text within a card body." />
6666
</Example>
6767

68-
```JavaScript
68+
```TSX
6969
import { render } from 'web-cell';
7070
import { Card } from 'boot-cell/source/Content/Card';
7171

@@ -94,7 +94,7 @@ links are added and placed next to each other by adding `.card-link` to an `<a /
9494
</Card>
9595
</Example>
9696

97-
```JavaScript
97+
```TSX
9898
import { render } from 'web-cell';
9999
import { Card } from 'boot-cell/source/Content/Card';
100100

@@ -125,7 +125,7 @@ render(
125125
/>
126126
</Example>
127127

128-
```JavaScript
128+
```TSX
129129
import { render } from 'web-cell';
130130
import { Card } from 'boot-cell/source/Content/Card';
131131

@@ -151,7 +151,7 @@ Add an optional header and/or footer within a card.
151151
</Card>
152152
</Example>
153153

154-
```JavaScript
154+
```TSX
155155
import { render } from 'web-cell';
156156
import { Card } from 'boot-cell/source/Content/Card';
157157
import { Button } from 'boot-cell/source/Form/Button';
@@ -181,7 +181,7 @@ render(
181181
</Card>
182182
</Example>
183183

184-
```JavaScript
184+
```TSX
185185
import { render } from 'web-cell';
186186
import { Card } from 'boot-cell/source/Content/Card';
187187

@@ -212,7 +212,7 @@ render(
212212
</Card>
213213
</Example>
214214

215-
```JavaScript
215+
```TSX
216216
import { render } from 'web-cell';
217217
import { Card } from 'boot-cell/source/Content/Card';
218218
import { Button } from 'boot-cell/source/Form/Button';
@@ -249,7 +249,7 @@ Depending on the image, you may or may not need additional styles or utilities.
249249
</Card>
250250
</Example>
251251

252-
```JavaScript
252+
```TSX
253253
import { render } from 'web-cell';
254254
import { Card } from 'boot-cell/source/Content/Card';
255255

@@ -285,7 +285,7 @@ Further adjustments may be needed depending on your card content.
285285
</Card>
286286
</Example>
287287

288-
```JavaScript
288+
```TSX
289289
import { render } from 'web-cell';
290290
import { Card } from 'boot-cell/source/Content/Card';
291291

‎document/source/components/Carousel.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ Here’s a carousel with slides only.
4141
/>
4242
</Example>
4343

44-
```JavaScript
44+
```TSX
4545
import { render } from 'web-cell';
4646
import { CarouselView } from 'boot-cell/source/Content/Carousel';
4747

@@ -71,7 +71,7 @@ Adding in the previous and next controls:
7171
/>
7272
</Example>
7373

74-
```JavaScript
74+
```TSX
7575
import { render } from 'web-cell';
7676
import { CarouselView } from 'boot-cell/source/Content/Carousel';
7777

@@ -103,7 +103,7 @@ You can also add the indicators to the carousel, alongside the controls, too.
103103
/>
104104
</Example>
105105

106-
```JavaScript
106+
```TSX
107107
import { render } from 'web-cell';
108108
import { CarouselView } from 'boot-cell/source/Content/Carousel';
109109

@@ -147,7 +147,7 @@ We hide them initially with `.d-none` and bring them back on medium-sized device
147147
/>
148148
</Example>
149149

150-
```JavaScript
150+
```TSX
151151
import { render } from 'web-cell';
152152
import { CarouselView } from 'boot-cell/source/Content/Carousel';
153153

@@ -189,7 +189,7 @@ Add `mode="fade"` to your carousel to animate slides with a fade transition inst
189189
/>
190190
</Example>
191191

192-
```JavaScript
192+
```TSX
193193
import { render } from 'web-cell';
194194
import { CarouselView } from 'boot-cell/source/Content/Carousel';
195195

‎document/source/components/Collapse.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Using the [card](components/card) component, you can extend the default collapse
3636
/>
3737
</Example>
3838

39-
```JavaScript
39+
```TSX
4040
import { render } from 'web-cell';
4141
import { AccordionList } from 'boot-cell/source/Content/Accordion';
4242

‎document/source/components/DropMenu.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ Here's how you can put them to work with either `<button>` elements:
5656
/>
5757
</Example>
5858

59-
```JavaScript
59+
```TSX
6060
import { render } from 'web-cell';
6161
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
6262

@@ -88,7 +88,7 @@ The best part is you can do this with any button variant, too:
8888
/>
8989
</Example>
9090

91-
```JavaScript
91+
```TSX
9292
import { render } from 'web-cell';
9393
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
9494

@@ -124,7 +124,7 @@ render(
124124
/>
125125
</Example>
126126

127-
```JavaScript
127+
```TSX
128128
import { render } from 'web-cell';
129129
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
130130

‎document/source/components/Icon.mdx‎

Lines changed: 20 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Wrapper component for FontAwesome v5 (CSS fonts)
55
group: Components
66
---
77

8-
import { Icon } from 'boot-cell/source/Reminder/Icon';
8+
import { Icon, BGIcon } from 'boot-cell/source/Reminder/Icon';
99
import { Table } from 'boot-cell/source/Content/Table';
1010

1111
import { Example } from '../../../source/component/Example';
@@ -120,7 +120,7 @@ With the following properties, we can increase or decrease the size of icons rel
120120
<Icon name="camera" size="10x" />
121121
</Example>
122122

123-
```JavaScript
123+
```TSX
124124
import { render, Fragment } from 'web-cell';
125125
import { Icon } from 'boot-cell/source/Reminder/Icon';
126126

@@ -171,7 +171,7 @@ For clarity in the following example, we’ve added a background color on the ic
171171
</ul>
172172
</Example>
173173

174-
```JavaScript
174+
```TSX
175175
import { render } from 'web-cell';
176176
import { Icon } from 'boot-cell/source/Reminder/Icon';
177177

@@ -214,7 +214,7 @@ Use `border` and `pull="right"` or `pull="left"` for easy pull quotes or article
214214
the current, borne back ceaselessly into the past.
215215
</Example>
216216

217-
```JavaScript
217+
```TSX
218218
import { render, Fragment } from 'web-cell';
219219
import { Icon } from 'boot-cell/source/Reminder/Icon';
220220

@@ -239,7 +239,7 @@ Use `border` in combination with pulled icon styles for more visual separation.
239239
the current, borne back ceaselessly into the past.
240240
</Example>
241241

242-
```JavaScript
242+
```TSX
243243
import { render, Fragment } from 'web-cell';
244244
import { Icon } from 'boot-cell/source/Reminder/Icon';
245245

@@ -271,7 +271,7 @@ To arbitrarily rotate and flip icons, use the `rotate` and `flip` properties whe
271271
<Icon name="snowboarding" flip="both" />
272272
</Example>
273273

274-
```JavaScript
274+
```TSX
275275
import { render } from 'web-cell';
276276
import { Icon } from 'boot-cell/source/Reminder/Icon';
277277

@@ -305,7 +305,7 @@ Works especially well with `name="spinner"` & everything in the [spinner icons c
305305
<Icon name="stroopwafel" animation="spin" />
306306
</Example>
307307

308-
```JavaScript
308+
```TSX
309309
import { render } from 'web-cell';
310310
import { Icon } from 'boot-cell/source/Reminder/Icon';
311311

@@ -347,7 +347,7 @@ Use `fa-ul` and `fa-li` to replace default bullets in unordered lists.
347347
</ul>
348348
</Example>
349349

350-
```JavaScript
350+
```TSX
351351
import { render } from 'web-cell';
352352
import { Icon } from 'boot-cell/source/Reminder/Icon';
353353

@@ -379,53 +379,29 @@ Then add the `stack={1}` property for the regularly sized icon and add the `stac
379379
You can even throw larger icon classes on the parent to get further control of sizing.
380380

381381
<Example>
382-
<span className="fa-stack fa-2x">
383-
<Icon name="square" stack={2} />
384-
<Icon kind="brands" name="twitter" stack={1} inverse />
385-
</span>
386-
<span className="fa-stack fa-2x">
387-
<Icon name="circle" stack={2} />
388-
<Icon name="flag" stack={1} inverse />
389-
</span>
390-
<span className="fa-stack fa-2x">
391-
<Icon name="square" stack={2} />
392-
<Icon name="terminal" stack={1} inverse />
393-
</span>
394-
<span className="fa-stack fa-4x">
395-
<Icon name="square" stack={2} />
396-
<Icon name="terminal" stack={1} inverse />
397-
</span>
382+
<BGIcon type="square" kind="brands" name="twitter" size={2} />
383+
<BGIcon type="circle" name="flag" size={2} />
384+
<BGIcon type="square" name="terminal" size={2} />
385+
<BGIcon type="square" name="terminal" size={4} />
398386
<span className="fa-stack fa-2x">
399387
<Icon name="camera" stack={1} />
400-
<Icon name="ban" stack={2} className="text-danger" />
388+
<Icon name="ban" stack={2} color="danger" />
401389
</span>
402390
</Example>
403391

404-
```JavaScript
392+
```TSX
405393
import { render, Fragment } from 'web-cell';
406-
import { Icon } from 'boot-cell/source/Reminder/Icon';
394+
import { Icon, BGIcon } from 'boot-cell/source/Reminder/Icon';
407395

408396
render(
409397
<Fragment>
410-
<span className="fa-stack fa-2x">
411-
<Icon name="square" stack={2} />
412-
<Icon kind="brands" name="twitter" stack={1} inverse />
413-
</span>
414-
<span className="fa-stack fa-2x">
415-
<Icon name="circle" stack={2} />
416-
<Icon name="flag" stack={1} inverse />
417-
</span>
418-
<span className="fa-stack fa-2x">
419-
<Icon name="square" stack={2} />
420-
<Icon name="terminal" stack={1} inverse />
421-
</span>
422-
<span className="fa-stack fa-4x">
423-
<Icon name="square" stack={2} />
424-
<Icon name="terminal" stack={1} inverse />
425-
</span>
398+
<BGIcon type="square" kind="brands" name="twitter" size={2} />
399+
<BGIcon type="circle" name="flag" size={2} />
400+
<BGIcon type="square" name="terminal" size={2} />
401+
<BGIcon type="square" name="terminal" size={4} />
426402
<span className="fa-stack fa-2x">
427403
<Icon name="camera" stack={1} />
428-
<Icon name="ban" stack={2} className="text-danger" />
404+
<Icon name="ban" stack={2} color="danger" />
429405
</span>
430406
</Fragment>
431407
);

0 commit comments

Comments
 (0)