Skip to content

Commit 3cf7730

Browse files
TechQueryTechQuery
committed
[add] Image, Embed & Pagination components
1 parent b7bf919 commit 3cf7730

8 files changed

Lines changed: 277 additions & 41 deletions

File tree

‎document/source/components/Embed.mdx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
layout: docs
3+
title: Embed
4+
description: Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
5+
group: Components
6+
---
7+
8+
import { Embed } from 'boot-cell/source/Content/Embed';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
## About
13+
14+
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<audio>` elements.
15+
16+
**Pro-Tip!** You don’t need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
17+
18+
## Example
19+
20+
<Example>
21+
<Embed
22+
is="iframe"
23+
src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"
24+
allowfullscreen
25+
/>
26+
</Example>
27+
28+
```TSX
29+
import { render, createCell } from 'web-cell';
30+
import { Embed } from 'boot-cell/source/Content/Embed';
31+
32+
render(
33+
<Embed
34+
is="iframe"
35+
src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"
36+
allowfullscreen
37+
/>
38+
);
39+
```
40+
41+
## Aspect ratios
42+
43+
Aspect ratios can be customized with `ratio` property.
44+
45+
```TSX
46+
<Embed is="iframe" ratio="21/9" src="test.html" />
47+
48+
<Embed is="iframe" ratio="16/9" src="test.html" />
49+
50+
<Embed is="iframe" ratio="4/3" src="test.html" />
51+
52+
<Embed is="iframe" ratio="1/1" src="test.html" />
53+
```

‎document/source/components/Image.mdx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
layout: docs
3+
title: Image
4+
description: Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them — all via classes.
5+
group: Components
6+
---
7+
8+
import { Image, Figure } from 'boot-cell/source/Content/Image';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
## Responsive images
13+
14+
`max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
15+
16+
<Example>
17+
<Image
18+
fluid
19+
src="https://tech-query.me/medias/featureimages/6.jpg"
20+
alt="Responsive image"
21+
/>
22+
</Example>
23+
24+
```TSX
25+
import { render, createCell } from 'web-cell';
26+
import { Image } from 'boot-cell/source/Content/Image';
27+
28+
render(
29+
<Image
30+
fluid
31+
src="https://tech-query.me/medias/featureimages/6.jpg"
32+
alt="Responsive image"
33+
/>
34+
);
35+
```
36+
37+
## Image thumbnails
38+
39+
In addition to our [border-radius utilities][1], you can use `thumbnail` property to give an image a rounded 1px border appearance.
40+
41+
<Example>
42+
<Image
43+
thumbnail
44+
src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
45+
alt="Thumbnail image"
46+
/>
47+
</Example>
48+
49+
```TSX
50+
import { render, createCell } from 'web-cell';
51+
import { Image } from 'boot-cell/source/Content/Image';
52+
53+
render(
54+
<Image
55+
thumbnail
56+
src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
57+
alt="Thumbnail image"
58+
/>
59+
);
60+
```
61+
62+
## Background images
63+
64+
<Example>
65+
<Image
66+
background
67+
src="https://tech-query.me/medias/featureimages/6.jpg"
68+
alt="Background image"
69+
/>
70+
</Example>
71+
72+
```TSX
73+
import { render, createCell } from 'web-cell';
74+
import { Image } from 'boot-cell/source/Content/Image';
75+
76+
render(
77+
<Image
78+
background
79+
src="https://tech-query.me/medias/featureimages/6.jpg"
80+
alt="Background image"
81+
/>
82+
);
83+
```
84+
85+
## Figure images
86+
87+
Anytime you need to display a piece of content — like an image with a caption, consider using a `<Figure />`.
88+
89+
<Example>
90+
<Figure
91+
title="Figure image"
92+
alt="Figure image"
93+
src="https://tech-query.me/medias/featureimages/6.jpg"
94+
/>
95+
</Example>
96+
97+
```TSX
98+
import { render, createCell } from 'web-cell';
99+
import { Figure } from 'boot-cell/source/Content/Image';
100+
101+
render(
102+
<Figure
103+
title="Figure image"
104+
alt="Figure image"
105+
src="https://tech-query.me/medias/featureimages/6.jpg"
106+
/>
107+
);
108+
```
109+
110+
[1]: https://getbootstrap.com/docs/4.5/utilities/borders/

‎document/source/components/Pagination.mdx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
layout: docs
3+
title: Pagination
4+
description: Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
5+
group: Components
6+
---
7+
8+
import { Pagination } from 'boot-cell/source/Navigator/Pagination';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
## Overview
13+
14+
We use a large block of connected links for our pagination, making links hard to miss and easily scalable —
15+
all while providing large hit areas.
16+
Pagination is built with list HTML elements so screen readers can announce the number of available links.
17+
Use a wrapping `<nav>` element to identify it as a navigation section to screen readers and other assistive technologies.
18+
19+
In addition, as pages likely have more than one such navigation section,
20+
it’s advisable to provide a descriptive `aria-label` for the `<Pagination />` to reflect its purpose.
21+
For example, if the pagination component is used to navigate between a set of search results,
22+
an appropriate label could be `aria-label="Search results pages"`.
23+
24+
<Example>
25+
<Pagination total={3} current={2} aria-label="Page navigation example" />
26+
</Example>
27+
28+
```TSX
29+
import { render, createCell } from 'web-cell';
30+
import { Pagination } from 'boot-cell/source/Navigator/Pagination';
31+
32+
render(
33+
<Pagination total={3} current={2} aria-label="Page navigation example" />
34+
);
35+
```
36+
37+
## Sizing
38+
39+
Fancy larger or smaller pagination? Add `size="lg"` or `size="sm"` for additional sizes.
40+
41+
<Example>
42+
<Pagination size="lg" total={3} current={1} aria-label="..." />
43+
</Example>
44+
45+
```TSX
46+
import { render, createCell } from 'web-cell';
47+
import { Pagination } from 'boot-cell/source/Navigator/Pagination';
48+
49+
render(
50+
<Pagination size="lg" total={3} current={1} aria-label="..." />
51+
);
52+
```
53+
54+
<Example>
55+
<Pagination size="sm" total={3} current={1} aria-label="..." />
56+
</Example>
57+
58+
```TSX
59+
import { render, createCell } from 'web-cell';
60+
import { Pagination } from 'boot-cell/source/Navigator/Pagination';
61+
62+
render(
63+
<Pagination size="sm" total={3} current={1} aria-label="..." />
64+
);
65+
```

‎package.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "bootcell-document",
3-
"version": "0.26.0",
3+
"version": "0.29.0",
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
6-
"boot-cell": "^1.0.0-rc.24",
6+
"boot-cell": "^1.0.0-rc.25",
77
"cell-router": "^2.0.0-rc.8",
88
"classnames": "^2.2.6",
99
"github-web-widget": "^3.0.0-beta.5",
@@ -19,9 +19,10 @@
1919
"@types/lodash.groupby": "^4.6.6",
2020
"husky": "^4.2.5",
2121
"less": "^3.11.3",
22-
"lint-staged": "^10.2.9",
22+
"lint-staged": "^10.2.10",
2323
"mark-cell": "^0.4.1",
2424
"parcel": "^1.12.4",
25+
"postcss-modules": "^2.0.0",
2526
"prettier": "^2.0.5",
2627
"typescript": "^3.9.5"
2728
},
@@ -36,6 +37,9 @@
3637
"prettier --write"
3738
]
3839
},
40+
"postcss": {
41+
"modules": true
42+
},
3943
"scripts": {
4044
"test": "lint-staged",
4145
"pack-mdx": "rm -rf document/dist/ && mark-cell document/source -p web-cell -f createCell",

‎source/component/Example.less‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.example {
2+
& > *:not(:only-child) {
3+
margin: 0.5rem;
4+
}
5+
& + pre {
6+
border-radius: 0 0 0.3rem 0.3rem;
7+
}
8+
}

‎source/component/Example.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { WebCellProps, createCell } from 'web-cell';
22
import classNames from 'classnames';
33

4+
import style from './Example.less';
5+
46
export function Example({ className, defaultSlot }: WebCellProps) {
57
return (
68
<div
79
className={classNames(
810
'border',
911
'border-light',
1012
'p-4',
11-
'bd-example',
13+
style.example,
1214
className
1315
)}
1416
>

‎source/global.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
declare module '*.css' {
1+
declare module '*.less' {
22
const map: Record<string, string>;
33

44
export default map;

‎source/index.less‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,35 @@
1-
blockquote {
2-
border-left: 3px solid lightgray;
3-
padding-left: 1rem;
4-
}
5-
pre[class*='language-'] {
6-
margin: 0 0 1rem;
7-
border-radius: 0.3rem;
8-
& > code {
9-
white-space: pre-wrap;
10-
}
11-
position: relative;
12-
&::before {
13-
position: absolute;
14-
top: 0.25rem;
15-
right: 0.5rem;
16-
content: 'Copy';
17-
color: gray;
18-
padding: 0.25rem 0.5rem;
19-
border-radius: 3px;
20-
cursor: pointer;
21-
transition: 0.25s;
1+
:global {
2+
blockquote {
3+
border-left: 3px solid lightgray;
4+
padding-left: 1rem;
225
}
23-
&:hover::before {
24-
background: white;
25-
color: black;
6+
pre[class*='language-'] {
7+
margin: 0 0 1rem;
8+
border-radius: 0.3rem;
9+
& > code {
10+
white-space: pre-wrap;
11+
}
12+
position: relative;
13+
&::before {
14+
position: absolute;
15+
top: 0.25rem;
16+
right: 0.5rem;
17+
content: 'Copy';
18+
color: gray;
19+
padding: 0.25rem 0.5rem;
20+
border-radius: 3px;
21+
cursor: pointer;
22+
transition: 0.25s;
23+
}
24+
&:hover::before {
25+
background: white;
26+
color: black;
27+
}
2628
}
27-
}
28-
.vh-50 {
29-
height: 50vh;
30-
}
31-
.right-0 {
32-
right: 0;
33-
}
34-
.bd-example {
35-
& > *:not(:only-child) {
36-
margin: 0.5rem;
29+
.vh-50 {
30+
height: 50vh;
3731
}
38-
& + pre {
39-
border-radius: 0 0 0.3rem 0.3rem;
32+
.right-0 {
33+
right: 0;
4034
}
4135
}

0 commit comments

Comments
 (0)