Skip to content

Commit 5999184

Browse files
TechQueryTechQuery
committed
[add] Alert & ListGroup components
[optimize] several details
1 parent 3b0da3a commit 5999184

10 files changed

Lines changed: 720 additions & 202 deletions

File tree

‎document/source/components/Alert.mdx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
layout: docs
3+
title: Alert
4+
description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
5+
group: Components
6+
---
7+
8+
import { Alert } from 'boot-cell/source/Prompt/Alert';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
## Examples
13+
14+
Alerts are available for any length of text, as well as an optional dismiss button.
15+
16+
<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>
25+
</Example>
26+
27+
```JavaScript
28+
import { render, Fragment } from 'web-cell';
29+
import { Alert } from 'boot-cell/source/Prompt/Alert';
30+
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+
);
43+
```
44+
45+
> ##### Conveying meaning to assistive technologies
46+
>
47+
> Using color to add meaning only provides a visual indication,
48+
> which will not be conveyed to users of assistive technologies –
49+
> such as screen readers.
50+
> Ensure that information denoted by the color is either obvious from the content itself
51+
> (e.g. the visible text), or is included through alternative means,
52+
> such as additional text hidden with the `.sr-only` class.
53+
54+
## Additional content
55+
56+
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
57+
58+
<Example>
59+
<Alert type="success" title="Well done!">
60+
<p>
61+
Aww yeah, you successfully read this important alert message. This
62+
example text is going to run a bit longer so that you can see how
63+
spacing within an alert works with this kind of content.
64+
</p>
65+
<hr />
66+
<p className="mb-0">
67+
Whenever you need to, be sure to use margin utilities to keep things
68+
nice and tidy.
69+
</p>
70+
</Alert>
71+
</Example>
72+
73+
```JavaScript
74+
import { render } from 'web-cell';
75+
import { Alert } from 'boot-cell/source/Prompt/Alert';
76+
77+
render(
78+
<Alert type="success" title="Well done!">
79+
<p>
80+
Aww yeah, you successfully read this important alert message. This
81+
example text is going to run a bit longer so that you can see how
82+
spacing within an alert works with this kind of content.
83+
</p>
84+
<hr />
85+
<p className="mb-0">
86+
Whenever you need to, be sure to use margin utilities to keep things
87+
nice and tidy.
88+
</p>
89+
</Alert>
90+
);
91+
```
92+
93+
## Dismissing
94+
95+
You can see this in action with a live demo:
96+
97+
<Example>
98+
<Alert type="warning" closable>
99+
<strong>Holy guacamole!</strong> You should check in on some of those
100+
fields below.
101+
</Alert>
102+
</Example>
103+
104+
```JavaScript
105+
import { render } from 'web-cell';
106+
import { Alert } from 'boot-cell/source/Prompt/Alert';
107+
108+
render(
109+
<Alert type="warning" closable>
110+
<strong>Holy guacamole!</strong> You should check in on some of those
111+
fields below.
112+
</Alert>
113+
);
114+
```

‎document/source/components/BreadCrumb.mdx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ group: Components
66
---
77

88
import { BreadCrumb } from 'boot-cell/source/Navigator/BreadCrumb';
9+
910
import { Example } from '../../../source/component/Example';
1011

1112
## Example
@@ -46,18 +47,23 @@ render(<BreadCrumb path={[{ href: '#', title: 'Home' }, { title: 'Library' }]} /
4647
import { render } from 'web-cell';
4748
import { BreadCrumb } from 'boot-cell/source/Navigator/BreadCrumb';
4849

49-
render(<BreadCrumb
50-
path={[
51-
{ href: '#', title: 'Home' },
52-
{ href: '#', title: 'Library' },
53-
{ title: 'Data' }
54-
]}
55-
/>);
50+
render(
51+
<BreadCrumb
52+
path={[
53+
{ href: '#', title: 'Home' },
54+
{ href: '#', title: 'Library' },
55+
{ title: 'Data' }
56+
]}
57+
/>
58+
);
5659
```
5760

5861
## Changing the separator
5962

60-
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by changing `$breadcrumb-divider`. The [quote](https://sass-lang.com/documentation/functions/string#quote) function is needed to generate the quotes around a string, so if you want `>` as separator, you can use this:
63+
Separators are automatically added in CSS through [`::before`][1] and [`content`][2].
64+
They can be changed by changing `$breadcrumb-divider`.
65+
The [quote][3] function is needed to generate the quotes around a string,
66+
so if you want `>` as separator, you can use this:
6167

6268
```scss
6369
$breadcrumb-divider: quote('>');
@@ -74,3 +80,7 @@ The separator can be removed by setting `$breadcrumb-divider` to `none`:
7480
```scss
7581
$breadcrumb-divider: none;
7682
```
83+
84+
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/::before
85+
[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/content
86+
[3]: https://sass-lang.com/documentation/functions/string#quote

‎document/source/components/Collapse.mdx‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
---
22
layout: docs
33
title: Collapse
4-
description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
4+
description: Toggle the visibility of content across your project.
55
group: Components
66
toc: true
77
---
88

99
import { AccordionList } from 'boot-cell/source/Content/Accordion';
10+
1011
import { Example } from '../../../source/component/Example';
1112

1213
## Accordion example
1314

14-
Using the [card](components/card) component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use `.accordion` as a wrapper.
15+
Using the [card](components/card) component, you can extend the default collapse behavior to create an accordion.
1516

1617
<Example>
1718
<AccordionList
@@ -37,21 +38,23 @@ Using the [card](components/card) component, you can extend the default collapse
3738
import { render } from 'web-cell';
3839
import { AccordionList } from 'boot-cell/source/Content/Accordion';
3940

40-
render(<AccordionList
41-
list={[
42-
{
43-
title: 'Collapsible Group Item #1',
44-
content: "Content 1",
45-
active: true
46-
},
47-
{
48-
title: 'Collapsible Group Item #2',
49-
content: "Content 2"
50-
},
51-
{
52-
title: 'Collapsible Group Item #3',
53-
content: "Content 3"
54-
}
55-
]}
56-
/>);
41+
render(
42+
<AccordionList
43+
list={[
44+
{
45+
title: 'Collapsible Group Item #1',
46+
content: "Content 1",
47+
active: true
48+
},
49+
{
50+
title: 'Collapsible Group Item #2',
51+
content: "Content 2"
52+
},
53+
{
54+
title: 'Collapsible Group Item #3',
55+
content: "Content 3"
56+
}
57+
]}
58+
/>
59+
);
5760
```

‎document/source/components/DropMenu.mdx‎

Lines changed: 64 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,49 @@
11
---
22
layout: docs
3-
title: DropMenu
3+
title: Drop menu
44
description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
55
group: Components
66
toc: true
77
---
88

99
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
10+
1011
import { Example } from '../../../source/component/Example';
1112

1213
## Overview
1314

14-
DropMenu are toggleable, contextual overlays for displaying lists of links and more. They're toggled by clicking, not by hovering; this is [an intentional design decision](http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/).
15+
DropMenu are toggleable, contextual overlays for displaying lists of links and more.
16+
They're toggled by clicking, not by hovering; this is [an intentional design decision][1].
1517

1618
## Accessibility
1719

18-
The [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr>](https://www.w3.org/TR/wai-aria/) standard defines an actual [`role="menu"` widget](https://www.w3.org/WAI/PF/aria/roles#menu), but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.
20+
The [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr>][2]
21+
standard defines an actual [`role="menu"` widget][3], but this is specific to application-like menus which trigger actions or functions.
22+
23+
<abbr title="Accessible Rich Internet Applications">
24+
ARIA
25+
</abbr> menus can only contain menu items,
26+
checkbox menu items, radio button menu items, radio button groups, and sub-menus.
1927

20-
Bootstrap's dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the `role` and `aria-` attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.
28+
Bootstrap's dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures.
29+
For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms.
30+
For this reason, Bootstrap does not expect (nor automatically add) any of the `role` and `aria-` attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus.
31+
Authors will have to include these more specific attributes themselves.
2132

22-
However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual `.dropdown-item` elements using the cursor keys and close the menu with the <kbd>ESC</kbd> key.
33+
However, Bootstrap does add built-in support for most standard keyboard menu interactions,
34+
such as the ability to move through individual `.dropdown-item` elements using the cursor keys and close the menu with the <kbd>ESC</kbd> key.
2335

2436
## Examples
2537

26-
Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. DropMenu can be triggered from `<a>` or `<button>` elements to better fit your potential needs. The examples shown here use semantic `<ul>` elements where appropriate, but custom markup is supported.
38+
Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`,
39+
or another element that declares `position: relative;`.
40+
DropMenu can be triggered from `<a>` or `<button>` elements to better fit your potential needs.
41+
The examples shown here use semantic `<ul>` elements where appropriate, but custom markup is supported.
2742

2843
### Single button
2944

30-
Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements:
45+
Any single `.btn` can be turned into a dropdown toggle with some markup changes.
46+
Here's how you can put them to work with either `<button>` elements:
3147

3248
<Example>
3349
<DropMenu
@@ -44,14 +60,16 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
4460
import { render } from 'web-cell';
4561
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
4662

47-
render(<DropMenu
48-
title="Dropdown button"
49-
list={[
50-
{ href: '#', title: 'Action' },
51-
{ href: '#', title: 'Another action' },
52-
{ href: '#', title: 'Something else here' }
53-
]}
54-
/>);
63+
render(
64+
<DropMenu
65+
title="Dropdown button"
66+
list={[
67+
{ href: '#', title: 'Action' },
68+
{ href: '#', title: 'Another action' },
69+
{ href: '#', title: 'Something else here' }
70+
]}
71+
/>
72+
);
5573
```
5674

5775
The best part is you can do this with any button variant, too:
@@ -74,17 +92,19 @@ The best part is you can do this with any button variant, too:
7492
import { render } from 'web-cell';
7593
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
7694

77-
render(<DropMenu
78-
buttonKind="danger"
79-
title="Danger"
80-
list={[
81-
{ href: '#', title: 'Action' },
82-
{ href: '#', title: 'Another action' },
83-
{ href: '#', title: 'Something else here' },
84-
{},
85-
{ href: '#', title: 'Separated link' }
86-
]}
87-
/>);
95+
render(
96+
<DropMenu
97+
buttonKind="danger"
98+
title="Danger"
99+
list={[
100+
{ href: '#', title: 'Action' },
101+
{ href: '#', title: 'Another action' },
102+
{ href: '#', title: 'Something else here' },
103+
{},
104+
{ href: '#', title: 'Separated link' }
105+
]}
106+
/>
107+
);
88108
```
89109

90110
### Split button
@@ -108,16 +128,22 @@ render(<DropMenu
108128
import { render } from 'web-cell';
109129
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
110130

111-
render(<DropMenu
112-
buttonKind="danger"
113-
title="Action"
114-
href="https://web-cell.dev/BootCell/"
115-
list={[
116-
{ href: '#', title: 'Action' },
117-
{ href: '#', title: 'Another action' },
118-
{ href: '#', title: 'Something else here' },
119-
{},
120-
{ href: '#', title: 'Separated link' }
121-
]}
122-
/>);
131+
render(
132+
<DropMenu
133+
buttonKind="danger"
134+
title="Action"
135+
href="https://web-cell.dev/BootCell/"
136+
list={[
137+
{ href: '#', title: 'Action' },
138+
{ href: '#', title: 'Another action' },
139+
{ href: '#', title: 'Something else here' },
140+
{},
141+
{ href: '#', title: 'Separated link' }
142+
]}
143+
/>
144+
);
123145
```
146+
147+
[1]: http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/
148+
[2]: https://www.w3.org/TR/wai-aria/
149+
[3]: https://www.w3.org/WAI/PF/aria/roles#menu

0 commit comments

Comments
 (0)