Skip to content

Commit 2c66faf

Browse files
TechQueryTechQuery
committed
[add] Tooltip component document
[add] Side Navigator component of Document site
1 parent 390d91b commit 2c66faf

10 files changed

Lines changed: 171 additions & 118 deletions

File tree

‎document/source/components/Tooltip.mdx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
layout: docs
3+
title: Tooltip
4+
description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations.
5+
group: Components
6+
---
7+
8+
import { TooltipBox } from 'boot-cell/source/Prompt/Tooltip';
9+
import { Button } from 'boot-cell/source/Form/Button';
10+
11+
import { Example } from '../../../source/component/Example';
12+
13+
<Example>
14+
<TooltipBox text="Tooltip on top">
15+
<Button kind="secondary">Tooltip on top</Button>
16+
</TooltipBox>
17+
<TooltipBox position="right" text="Tooltip on right">
18+
<Button kind="secondary">Tooltip on right</Button>
19+
</TooltipBox>
20+
<TooltipBox position="bottom" text="Tooltip on bottom">
21+
<Button kind="secondary">Tooltip on bottom</Button>
22+
</TooltipBox>
23+
<TooltipBox position="left" text="Tooltip on left">
24+
<Button kind="secondary">Tooltip on left</Button>
25+
</TooltipBox>
26+
</Example>
27+
28+
```JavaScript
29+
<TooltipBox text="Tooltip on top">
30+
<Button kind="secondary">Tooltip on top</Button>
31+
</TooltipBox>
32+
<TooltipBox position="right" text="Tooltip on right">
33+
<Button kind="secondary">Tooltip on right</Button>
34+
</TooltipBox>
35+
<TooltipBox position="bottom" text="Tooltip on bottom">
36+
<Button kind="secondary">Tooltip on bottom</Button>
37+
</TooltipBox>
38+
<TooltipBox position="left" text="Tooltip on left">
39+
<Button kind="secondary">Tooltip on left</Button>
40+
</TooltipBox>
41+
```
42+
43+
And with custom HTML added:
44+
45+
```JavaScript
46+
<TooltipBox text={
47+
<Fragment>
48+
<em>Tooltip</em>{' '}
49+
<u>with</u>{' '}
50+
<b>HTML</b>
51+
</Fragment>
52+
}>
53+
<Button kind="secondary">Tooltip on left</Button>
54+
</TooltipBox>
55+
```

‎package.json‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
11
{
22
"name": "bootcell-document",
3-
"version": "0.4.0",
3+
"version": "0.5.0",
44
"description": "Re-implemented Official Web-site of BootStrap based on WebCell, BootCell & MarkCell",
55
"dependencies": {
6-
"boot-cell": "^0.23.2",
6+
"boot-cell": "^0.28.0",
77
"cell-router": "^2.0.0-rc.6",
88
"classnames": "^2.2.6",
99
"lodash.groupby": "^4.6.0",
10-
"mobx": "^5.15.2",
10+
"mobx": "^5.15.4",
1111
"mobx-web-cell": "^0.2.5",
12-
"web-cell": "^2.0.0-rc.15"
12+
"web-cell": "^2.0.0-rc.18"
1313
},
1414
"devDependencies": {
1515
"@types/lodash.groupby": "^4.6.6",
16+
"autoprefixer": "^9.7.4",
1617
"husky": "^4.2.1",
1718
"less": "^3.10.3",
18-
"lint-staged": "^9.5.0",
19+
"lint-staged": "^10.0.7",
1920
"mark-cell": "^0.2.3",
2021
"parcel": "^1.12.4",
22+
"postcss-modules": "^1.5.0",
2123
"prettier": "^1.19.1",
2224
"typescript": "^3.7.5"
2325
},
26+
"postcss": {
27+
"modules": true,
28+
"plugins": {
29+
"autoprefixer": {
30+
"grid": true
31+
}
32+
}
33+
},
2434
"prettier": {
2535
"singleQuote": true,
2636
"tabWidth": 4
2737
},
2838
"lint-staged": {
2939
"*.{html,md,mdx,less,json,yml,ts,tsx}": [
30-
"prettier --write",
31-
"git add"
40+
"prettier --write"
3241
]
3342
},
3443
"scripts": {

‎source/component/Example.module.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.box > * {
2+
margin: 0.25rem;
3+
}

‎source/component/Example.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import { createCell } from 'web-cell';
22
import { WebCellProps } from 'boot-cell/source/utility/type';
33

4+
import style from './Example.module.css';
5+
46
export function Example({ defaultSlot }: WebCellProps) {
5-
return <div className="border border-light p-4">{defaultSlot}</div>;
7+
return (
8+
<div className={`border border-light p-4 ${style.box}`}>
9+
{defaultSlot}
10+
</div>
11+
);
612
}

‎source/component/Jumbotron.tsx‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎source/component/SideNav.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { createCell } from 'web-cell';
2+
import { HTMLProps, HTMLHyperLinkProps } from 'boot-cell/source/utility/type';
3+
4+
interface SideNavProps extends HTMLProps {
5+
menu: { [group: string]: HTMLHyperLinkProps[] };
6+
}
7+
8+
export function SideNav({ menu, ...rest }: SideNavProps) {
9+
return (
10+
<nav {...rest}>
11+
<ul className="list-unstyled">
12+
{Object.entries(menu).map(([group, list]) => (
13+
<li>
14+
<h5>{group}</h5>
15+
16+
<ul className="list-unstyled">
17+
{list.map(({ href, title }) => (
18+
<li>
19+
<a href={href}>{title}</a>
20+
</li>
21+
))}
22+
</ul>
23+
</li>
24+
))}
25+
</ul>
26+
</nav>
27+
);
28+
}

‎source/global.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.css' {
2+
const map: { [key: string]: string };
3+
4+
export default map;
5+
}

‎source/index.html‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
1-
<head>
2-
<title>BootCell</title>
3-
<link
4-
rel="stylesheet"
5-
href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
6-
/>
7-
<link
8-
rel="stylesheet"
9-
href="https://cdn.jsdelivr.net/npm/highlight.js@9.18.0/styles/atom-one-dark.css"
10-
/>
11-
<link rel="stylesheet" href="index.less" />
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
9+
/>
10+
<title>BootCell</title>
11+
<link
12+
rel="stylesheet"
13+
href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
14+
/>
15+
<link
16+
rel="stylesheet"
17+
href="https://cdn.jsdelivr.net/npm/highlight.js@9.18.0/styles/atom-one-dark.css"
18+
/>
19+
<link rel="stylesheet" href="index.less" />
1220

13-
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=Object.fromEntries%2CArray.prototype.flat"></script>
14-
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.0/webcomponents-bundle.min.js"></script>
15-
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.0/custom-elements-es5-adapter.js"></script>
21+
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=Object.fromEntries%2CArray.prototype.flat"></script>
22+
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.0/webcomponents-bundle.min.js"></script>
23+
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.0/custom-elements-es5-adapter.js"></script>
1624

17-
<script src="index.tsx" async></script>
18-
</head>
25+
<script src="index.tsx" async></script>
26+
</head>
27+
<body></body>
28+
</html>

‎source/page/Home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createCell } from 'web-cell';
2-
import { Jumbotron } from '../component/Jumbotron';
2+
import { Jumbotron } from 'boot-cell/source/Content/Jumbotron';
33
import { Button } from 'boot-cell/source/Form/Button';
44

55
import routes from '../../document/dist';

‎source/page/index.tsx‎

Lines changed: 30 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { HTMLRouter } from 'cell-router/source';
55
import { NavBar } from 'boot-cell/source/Navigator/NavBar';
66

77
import { history } from '../model';
8+
import { SideNav } from '../component/SideNav';
89
import { HomePage } from './Home';
910
import routes from '../../document/dist';
1011

@@ -28,11 +29,15 @@ export class PageRouter extends HTMLRouter {
2829
const Content = await component();
2930

3031
return () => (
31-
<Fragment>
32-
<h1>{title}</h1>
33-
<p className="lead">{description}</p>
34-
<Content />
35-
</Fragment>
32+
<div className="d-flex">
33+
<SideNav className="p-3" menu={side_menu} />
34+
35+
<div className="flex-fill p-3">
36+
<h1>{title}</h1>
37+
<p className="lead">{description}</p>
38+
<Content />
39+
</div>
40+
</div>
3641
);
3742
}
3843
}))
@@ -47,62 +52,30 @@ export class PageRouter extends HTMLRouter {
4752
document.execCommand('copy');
4853
}
4954

50-
renderSideMenu() {
51-
return (
52-
<ul className="list-unstyled">
53-
{Object.entries(side_menu).map(([group, list]) => (
54-
<li>
55-
<h5>{group}</h5>
56-
57-
<ul className="list-unstyled">
58-
{list.map(({ href, title }) => (
59-
<li>
60-
<a href={href}>{title}</a>
61-
</li>
62-
))}
63-
</ul>
64-
</li>
65-
))}
66-
</ul>
67-
);
68-
}
69-
70-
renderFooter() {
71-
return (
72-
<footer className="text-center bg-light py-5">
73-
Proudly developed with{' '}
74-
<a target="_blank" href="https://web-cell.dev/">
75-
WebCell v2
76-
</a>
77-
,{' '}
78-
<a target="_blank" href="https://web-cell.dev/BootCell/">
79-
BootCell v1
80-
</a>{' '}
81-
&amp;{' '}
82-
<a
83-
target="_blank"
84-
href="https://github.com/EasyWebApp/MarkCell"
85-
>
86-
MarkCell
87-
</a>
88-
</footer>
89-
);
90-
}
91-
9255
render() {
93-
const documents = history.path.startsWith('component');
94-
9556
return (
9657
<Fragment>
97-
<NavBar title="BootCell" />
58+
<NavBar brand="BootCell" />
59+
60+
<main className="mt-5">{super.render()}</main>
9861

99-
<div className="mt-5 d-flex">
100-
{!documents ? null : (
101-
<nav className="p-3">{this.renderSideMenu()}</nav>
102-
)}
103-
<main className="flex-fill p-3">{super.render()}</main>
104-
</div>
105-
{documents ? null : this.renderFooter()}
62+
<footer className="text-center bg-light py-5">
63+
Proudly developed with{' '}
64+
<a target="_blank" href="https://web-cell.dev/">
65+
WebCell v2
66+
</a>
67+
,{' '}
68+
<a target="_blank" href="https://web-cell.dev/BootCell/">
69+
BootCell v1
70+
</a>{' '}
71+
&amp;{' '}
72+
<a
73+
target="_blank"
74+
href="https://github.com/EasyWebApp/MarkCell"
75+
>
76+
MarkCell
77+
</a>
78+
</footer>
10679
</Fragment>
10780
);
10881
}

0 commit comments

Comments
 (0)