Skip to content

Commit df4c9f9

Browse files
ninanoletoninanoleto
committed
feat: write more stories
1 parent 2e37e54 commit df4c9f9

File tree

10 files changed

+860
-0
lines changed

10 files changed

+860
-0
lines changed

‎src/pat/autotoc/autotoc.docs.mdx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Meta, Story } from "@storybook/addon-docs";
2+
import { Autotoc, AutotocTabs } from "./autotoc.stories.js";
3+
4+
<Meta title="Patterns/Autotoc" />
5+
6+
# Autotoc pattern.
7+
8+
Automatically create a table of contents.
9+
10+
## Configuration
11+
12+
```md
13+
| Option | Type | Default | Description |
14+
| :------------------: | :----: | :---------------: | :-----------------------------------: |
15+
| IDPrefix | string | 'autotoc-item-' | Prefix used to generate ID. |
16+
| classActiveName | string | 'active' | Class used for active level. |
17+
| classLevelPrefixName | string | 'autotoc-level-' | Class prefix used for the TOC levels. |
18+
| classSectionName | string | 'autotoc-section' | Class used for section in TOC. |
19+
| classTOCName | string | 'autotoc-nav' | Class used for the TOC. |
20+
| levels | string | 'h1,h2,h3' | Selectors used to find levels. |
21+
| scrollDuration | string | 'slow' | Speed of scrolling. |
22+
| scrollEasing | string | 'swing' | Easing to use while scrolling. |
23+
| section | string | 'section' | Tag type to use for TOC. |
24+
```
25+
26+
## Examples
27+
28+
### Example 1
29+
30+
<br />
31+
<Story name="AutotocTabs" of={AutotocTabs} />
32+
33+
### Example 2
34+
35+
<br />
36+
<Story name="Autotoc" of={Autotoc} />

‎src/pat/autotoc/autotoc.stories.js‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import $ from "jquery";
2+
import { RenderHTML } from "../../../.storybook/setup.js";
3+
import AutotocComponent from "./autotoc.js";
4+
5+
export default {
6+
title: "Patterns/Autotoc",
7+
};
8+
9+
const getAutotoc = () => `
10+
<div class="pat-autotoc" data-pat-autotoc="scrollDuration:slow;levels:h4,h5,h6;">
11+
<h4>Title 1</h4>
12+
<p>
13+
Mr. Zuckerkorn, you've been warned about touching. You said spanking. It walked
14+
on my pillow! How about a turtle? I've always loved those leathery little snappy
15+
faces.
16+
17+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
18+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
19+
similique ne mel.
20+
21+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
22+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
23+
similique ne mel.
24+
25+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
26+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
27+
similique ne mel.
28+
29+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
30+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
31+
similique ne mel.
32+
</p>
33+
<h5>Title 1.1</h5>
34+
<p>
35+
Ah coodle doodle do Caw ca caw, caw ca caw. Butterscotch!
36+
37+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
38+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
39+
similique ne mel.
40+
41+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
42+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
43+
similique ne mel.
44+
45+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
46+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
47+
similique ne mel.
48+
49+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
50+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
51+
similique ne mel.
52+
53+
</p>
54+
<h6>Title 1.1.1</h6>
55+
<p>
56+
Want a lick? Okay, Lindsay, are you forgetting that I was a professional twice
57+
over - an analyst and a therapist.
58+
59+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
60+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
61+
similique ne mel.
62+
63+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
64+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
65+
similique ne mel.
66+
67+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
68+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
69+
similique ne mel.
70+
71+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
72+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
73+
similique ne mel.
74+
75+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
76+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
77+
similique ne mel.
78+
79+
</p>
80+
<h4>Title 2</h4>
81+
<p>
82+
You boys know how to shovel coal? Don't worry, these young beauties have been
83+
nowhere near the bananas. I thought the two of us could talk man-on-man.
84+
85+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
86+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
87+
similique ne mel.
88+
89+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
90+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
91+
similique ne mel.
92+
93+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
94+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
95+
similique ne mel.
96+
97+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
98+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
99+
similique ne mel.
100+
101+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
102+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
103+
similique ne mel.
104+
105+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
106+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
107+
similique ne mel.
108+
109+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
110+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
111+
similique ne mel.
112+
</p>
113+
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br />
114+
</div>
115+
`;
116+
117+
export const Autotoc = {
118+
render: () => RenderHTML({}, getAutotoc),
119+
};
120+
121+
const getAutotocTabs = () => `
122+
<div class="pat-autotoc autotabs" data-pat-autotoc="section:fieldset;levels:legend;">
123+
<fieldset>
124+
<legend>Tab 1</legend>
125+
<div>
126+
Lorem ipsum dolor sit amet, ex nam odio ceteros fastidii, id porro lorem pro,
127+
homero facilisis in cum. At doming voluptua indoctum mel, natum noster
128+
similique ne mel.
129+
</div>
130+
</fieldset>
131+
<fieldset>
132+
<legend>Tab 2</legend>
133+
<div>
134+
Reque repudiare eum et. Prompta expetendis percipitur eu eam, et graece
135+
mandamus pro, eu vim harum audire tractatos. Ad perpetua salutandi mea,
136+
soluta delicata aliquando eam ne. Qui nostrum lucilius perpetua ut, eum suas
137+
stet oblique ut.
138+
</div>
139+
</fieldset>
140+
<fieldset>
141+
<legend>Tab 3</legend>
142+
<div>
143+
Vis mazim harum deterruisset ex, duo nemore nostro civibus ad, eros
144+
vituperata id cum. Vim at erat solet soleat, eum et iuvaret luptatum, pro an
145+
esse dolorum maiestatis.
146+
</div>
147+
</fieldset>
148+
</div>
149+
`;
150+
151+
export const AutotocTabs = {
152+
render: () => RenderHTML({}, getAutotocTabs),
153+
};

‎src/pat/cookietrigger/cookietrigger.docs.mdx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Meta, Story } from "@storybook/addon-docs";
2+
import { CookieTrigger } from "./cookietrigger.stories.js";
3+
4+
<Meta title="Patterns/Cookie Trigger" />
5+
6+
# Cookie Trigger pattern.
7+
8+
Show a DOM element if browser cookies are disabled.
9+
10+
## Example
11+
12+
If you do not see a message between the following START and END, you have cookies allowed and this pattern works.
13+
14+
START
15+
16+
<br />
17+
<Story name="Cookie Trigger" of={CookieTrigger} />
18+
<br />
19+
20+
END
21+
22+
```html
23+
<div class="portalMessage error pat-cookietrigger">
24+
Cookies are not enabled. You must enable cookies before you can log in.
25+
</div>
26+
```

‎src/pat/cookietrigger/cookietrigger.stories.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import $ from "jquery";
2+
import { RenderHTML } from "../../../.storybook/setup.js";
3+
import CookieTriggerComponent from "./cookietrigger.js";
4+
5+
export default {
6+
title: "Patterns/Cookie Trigger",
7+
};
8+
9+
const getCookieTrigger = () => `
10+
<div class="portalMessage error pat-cookietrigger">
11+
Cookies are not enabled. You must enable cookies before you can log in.
12+
</div>
13+
`;
14+
15+
export const CookieTrigger = {
16+
render: () => RenderHTML({}, getCookieTrigger),
17+
};

‎src/pat/datatables/datatables.docs.mdx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Meta, Story } from "@storybook/addon-docs";
2+
import { DataTables } from "./datatables.stories.js";
3+
4+
<Meta title="Patterns/Data Tables" />
5+
6+
# DataTables
7+
8+
This pattern provides the functionality from https://datatables.net/
9+
10+
## Example
11+
12+
<br />
13+
<Story name="Data Tables" of={DataTables} />
14+
<br />

0 commit comments

Comments
 (0)