Skip to content

Commit 390d91b

Browse files
TechQueryTechQuery
committed
[add] Home page
[add] Accordion List document [fix] several details
1 parent 75a4afd commit 390d91b

8 files changed

Lines changed: 216 additions & 76 deletions

File tree

‎document/source/components/BreadCrumb.mdx‎

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

17-
```javascript
18-
<BreadCrumb path={[{ title: 'Home' }]} />
17+
```JavaScript
18+
import { render } from 'web-cell';
19+
import { BreadCrumb } from 'boot-cell/source/Navigator/BreadCrumb';
20+
21+
render(<BreadCrumb path={[{ title: 'Home' }]} />);
1922
```
2023

2124
<Example>
2225
<BreadCrumb path={[{ href: '#', title: 'Home' }, { title: 'Library' }]} />
2326
</Example>
2427

25-
```javascript
26-
<BreadCrumb path={[{ href: '#', title: 'Home' }, { title: 'Library' }]} />
28+
```JavaScript
29+
import { render } from 'web-cell';
30+
import { BreadCrumb } from 'boot-cell/source/Navigator/BreadCrumb';
31+
32+
render(<BreadCrumb path={[{ href: '#', title: 'Home' }, { title: 'Library' }]} />);
2733
```
2834

2935
<Example>
@@ -36,14 +42,17 @@ import { Example } from '../../../source/component/Example';
3642
/>
3743
</Example>
3844

39-
```javascript
40-
<BreadCrumb
45+
```JavaScript
46+
import { render } from 'web-cell';
47+
import { BreadCrumb } from 'boot-cell/source/Navigator/BreadCrumb';
48+
49+
render(<BreadCrumb
4150
path={[
4251
{ href: '#', title: 'Home' },
4352
{ href: '#', title: 'Library' },
4453
{ title: 'Data' }
4554
]}
46-
/>
55+
/>);
4756
```
4857

4958
## Changing the separator
@@ -65,9 +74,3 @@ The separator can be removed by setting `$breadcrumb-divider` to `none`:
6574
```scss
6675
$breadcrumb-divider: none;
6776
```
68-
69-
## Accessibility
70-
71-
Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
72-
73-
For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).

‎document/source/components/Collapse.mdx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
layout: docs
3+
title: Collapse
4+
description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
5+
group: Components
6+
toc: true
7+
---
8+
9+
import { AccordionList } from 'boot-cell/source/Content/Accordion';
10+
import { Example } from '../../../source/component/Example';
11+
12+
## Accordion example
13+
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+
16+
<Example>
17+
<AccordionList
18+
list={[
19+
{
20+
title: 'Collapsible Group Item #1',
21+
content: 'Content 1',
22+
active: true
23+
},
24+
{
25+
title: 'Collapsible Group Item #2',
26+
content: 'Content 2'
27+
},
28+
{
29+
title: 'Collapsible Group Item #3',
30+
content: 'Content 3'
31+
}
32+
]}
33+
/>
34+
</Example>
35+
36+
```JavaScript
37+
import { render } from 'web-cell';
38+
import { AccordionList } from 'boot-cell/source/Content/Accordion';
39+
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+
/>);
57+
```

‎document/source/components/DropMenu.mdx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,18 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
4040
/>
4141
</Example>
4242

43-
```javascript
44-
<DropMenu
43+
```JavaScript
44+
import { render } from 'web-cell';
45+
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
46+
47+
render(<DropMenu
4548
title="Dropdown button"
4649
list={[
4750
{ href: '#', title: 'Action' },
4851
{ href: '#', title: 'Another action' },
4952
{ href: '#', title: 'Something else here' }
5053
]}
51-
/>
54+
/>);
5255
```
5356

5457
The best part is you can do this with any button variant, too:
@@ -67,8 +70,11 @@ The best part is you can do this with any button variant, too:
6770
/>
6871
</Example>
6972

70-
```javascript
71-
<DropMenu
73+
```JavaScript
74+
import { render } from 'web-cell';
75+
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
76+
77+
render(<DropMenu
7278
buttonKind="danger"
7379
title="Danger"
7480
list={[
@@ -78,7 +84,7 @@ The best part is you can do this with any button variant, too:
7884
{},
7985
{ href: '#', title: 'Separated link' }
8086
]}
81-
/>
87+
/>);
8288
```
8389

8490
### Split button
@@ -98,8 +104,11 @@ The best part is you can do this with any button variant, too:
98104
/>
99105
</Example>
100106

101-
```javascript
102-
<DropMenu
107+
```JavaScript
108+
import { render } from 'web-cell';
109+
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
110+
111+
render(<DropMenu
103112
buttonKind="danger"
104113
title="Action"
105114
href="https://web-cell.dev/BootCell/"
@@ -110,5 +119,5 @@ The best part is you can do this with any button variant, too:
110119
{},
111120
{ href: '#', title: 'Separated link' }
112121
]}
113-
/>
122+
/>);
114123
```

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bootcell-document",
3-
"version": "0.3.0",
3+
"version": "0.4.0",
44
"description": "Re-implemented Official Web-site of BootStrap based on WebCell, BootCell & MarkCell",
55
"dependencies": {
66
"boot-cell": "^0.23.2",
@@ -13,10 +13,10 @@
1313
},
1414
"devDependencies": {
1515
"@types/lodash.groupby": "^4.6.6",
16-
"husky": "^4.2.0",
16+
"husky": "^4.2.1",
1717
"less": "^3.10.3",
1818
"lint-staged": "^9.5.0",
19-
"mark-cell": "^0.2.1",
19+
"mark-cell": "^0.2.3",
2020
"parcel": "^1.12.4",
2121
"prettier": "^1.19.1",
2222
"typescript": "^3.7.5"

‎source/component/Jumbotron.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { createCell, Fragment } from 'web-cell';
2+
import { WebCellProps } from 'boot-cell/source/utility/type';
3+
import classNames from 'classnames';
4+
5+
export interface JumbotronProps extends WebCellProps {
6+
fluid?: boolean;
7+
title: string;
8+
description: string;
9+
}
10+
11+
export function Jumbotron({
12+
fluid,
13+
title,
14+
description,
15+
defaultSlot
16+
}: JumbotronProps) {
17+
const content = (
18+
<Fragment>
19+
<h1 className="display-4">{title}</h1>
20+
<p className="lead">{description}</p>
21+
22+
{defaultSlot[0] && (
23+
<Fragment>
24+
<hr className="my-4" />
25+
{defaultSlot}
26+
</Fragment>
27+
)}
28+
</Fragment>
29+
);
30+
31+
return (
32+
<div className={classNames('jumbotron', fluid && 'jumbotron-fluid')}>
33+
{fluid ? <div className="container">{content}</div> : content}
34+
</div>
35+
);
36+
}

‎source/index.less‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
1-
p > strong,
2-
p > abbr,
3-
p > code,
4-
p > kbd,
5-
p > a {
6-
margin: auto 0.25rem;
7-
}
81
pre > code {
92
display: block;
3+
max-width: 84.5vw;
4+
overflow: auto;
105
background: #f8f9fa;
116
padding: 1.5rem;
127

13-
[class^='hljs-'] {
14-
padding-left: 0.5rem;
15-
}
168
position: relative;
179
&::before {
1810
position: absolute;

‎source/page/Home.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { createCell } from 'web-cell';
2+
import { Jumbotron } from '../component/Jumbotron';
3+
import { Button } from 'boot-cell/source/Form/Button';
4+
5+
import routes from '../../document/dist';
6+
7+
export function HomePage() {
8+
return (
9+
<Jumbotron
10+
title="BootCell"
11+
description="Build responsive, mobile-first projects on the web with the world’s most popular front-end component library."
12+
>
13+
<p>
14+
BootCell is a{' '}
15+
<a target="_blank" href="https://www.webcomponents.org/">
16+
Web Components
17+
</a>{' '}
18+
UI library based on{' '}
19+
<a target="_blank" href="https://web-cell.dev/">
20+
WebCell v2
21+
</a>{' '}
22+
&amp;{' '}
23+
<a target="_blank" href="https://getbootstrap.com/">
24+
BootStrap v4
25+
</a>
26+
</p>
27+
<Button outline size="lg" href={routes[0].paths[0]}>
28+
Get started
29+
</Button>
30+
</Jumbotron>
31+
);
32+
}

0 commit comments

Comments
 (0)