Skip to content

Commit a8a5d05

Browse files
simuraisimurai
authored
Add utilities to Storybook (#2370)
* Add borders * Add Animations * Use singular name * Add Shadow * Add Color * Add Details * Add Flexbox * Add Grid * Add Layout * Add Margin * Add Padding * Add Typography
1 parent 818d130 commit a8a5d05

11 files changed

+1657
-0
lines changed

‎docs/src/stories/utilities/Animation.stories.jsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
export default {
2+
title: 'Utilities/Animation'
3+
}
4+
5+
export const FadeIn = ({}) => (
6+
<div class="anim-fade-in">
7+
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
8+
Hello from GitHub!
9+
</div>
10+
)
11+
12+
export const FadeOut = ({}) => (
13+
<div class="anim-fade-out">
14+
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
15+
Hello from GitHub!
16+
</div>
17+
)
18+
19+
export const FadeUp = ({}) => (
20+
<div class="anim-fade-up">
21+
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
22+
Hello from GitHub!
23+
</div>
24+
)
25+
26+
export const FadeDown = ({}) => (
27+
<div class="anim-fade-down">
28+
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
29+
Hello from GitHub!
30+
</div>
31+
)
32+
33+
export const ScaleIn = ({}) => (
34+
<span class="anim-scale-in d-inline-block">
35+
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
36+
Hello from GitHub!
37+
</span>
38+
)
39+
40+
export const GrowX = ({}) => (
41+
<div class="anim-grow-x py-2 color-bg-success-emphasis"></div>
42+
)
43+
44+
export const Pulse = ({}) => (
45+
<span class="anim-pulse d-inline-block">
46+
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
47+
Hello from GitHub!
48+
</span>
49+
)
50+
51+
export const Hover = ({}) => (
52+
<div class="anim-hover-grow Box p-3">
53+
<svg height="32" class="octicon octicon-mark-github v-align-middle" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
54+
</div>
55+
)
56+
57+
export const Rotate = ({}) => (
58+
<div class="anim-rotate d-inline-block">
59+
<svg height="32" class="octicon octicon-mark-github v-align-middle" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
60+
</div>
61+
)

‎docs/src/stories/utilities/Border.stories.jsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
export default {
2+
title: 'Utilities/Border'
3+
}
4+
5+
export const Default = ({}) => (
6+
<span class="color-bg-subtle p-2 border">
7+
.border
8+
</span>
9+
)
10+
11+
export const Direction = ({}) => (
12+
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
13+
<div class="color-bg-subtle p-2 border-left">
14+
.border-left
15+
</div>
16+
<div class="color-bg-subtle p-2 border-top">
17+
.border-top
18+
</div>
19+
<div class="color-bg-subtle p-2 border-bottom">
20+
.border-bottom
21+
</div>
22+
<div class="color-bg-subtle p-2 border-right">
23+
.border-right
24+
</div>
25+
<div class="color-bg-subtle p-2 border-x">
26+
.border-x
27+
</div>
28+
<div class="color-bg-subtle p-2 border-y">
29+
.border-y
30+
</div>
31+
</div>
32+
)
33+
34+
export const Hide = ({}) => (
35+
<span class="color-bg-subtle p-2 border border-top-0">
36+
.border-top-0
37+
</span>
38+
)
39+
40+
export const Style = ({}) => (
41+
<span class="color-bg-subtle p-2 border border-dashed">
42+
.border-dashed
43+
</span>
44+
)
45+
46+
export const Rounded = ({}) => (
47+
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
48+
<div class="color-bg-subtle p-2 border rounded-0">
49+
.rounded-0
50+
</div>
51+
<div class="color-bg-subtle p-2 border rounded-1">
52+
.rounded-1
53+
</div>
54+
<div class="color-bg-subtle p-2 border rounded-2">
55+
.rounded-2
56+
</div>
57+
<div class="color-bg-subtle p-2 border rounded-3">
58+
.rounded-3
59+
</div>
60+
<div class="color-bg-subtle border circle" style={{display: 'inline-flex', justifyContent: 'center', alignItems: 'center', width: '100px', height: '100px'}}>
61+
.circle
62+
</div>
63+
</div>
64+
)
65+
66+
export const RoundedDirection = ({}) => (
67+
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
68+
<div class="color-bg-subtle p-2 border rounded-top-2">
69+
.rounded-top-2
70+
</div>
71+
<div class="color-bg-subtle p-2 border rounded-right-2">
72+
.rounded-right-2
73+
</div>
74+
<div class="color-bg-subtle p-2 border rounded-bottom-2">
75+
.rounded-bottom-2
76+
</div>
77+
<div class="color-bg-subtle p-2 border rounded-left-2">
78+
.rounded-left-2
79+
</div>
80+
</div>
81+
)
82+
83+
export const Responsive = ({}) => (
84+
<div class="color-bg-subtle p-2 border-left border-sm-top border-md-right border-lg-bottom" style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
85+
<div>.border-left</div>
86+
<div class="d-none d-sm-block">.border-sm-top</div>
87+
<div class="d-none d-md-block">.border-md-right</div>
88+
<div class="d-none d-lg-block">.border-lg-bottom</div>
89+
</div>
90+
)

‎docs/src/stories/utilities/Color.stories.jsx

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
export default {
2+
title: 'Utilities/Color'
3+
}
4+
5+
export const Text = ({}) => (
6+
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '0.25rem'}}>
7+
<div class="color-fg-default">.color-fg-default</div>
8+
<div class="color-fg-muted">.color-fg-muted</div>
9+
<div class="color-fg-subtle">.color-fg-subtle</div>
10+
11+
<div class="color-fg-accent mt-3">.color-fg-accent</div>
12+
<div class="color-fg-success">.color-fg-success</div>
13+
<div class="color-fg-attention">.color-fg-attention</div>
14+
<div class="color-fg-severe">.color-fg-severe</div>
15+
<div class="color-fg-danger">.color-fg-danger</div>
16+
<div class="color-fg-open">.color-fg-open</div>
17+
<div class="color-fg-closed">.color-fg-closed</div>
18+
<div class="color-fg-done">.color-fg-done</div>
19+
<div class="color-fg-sponsors">.color-fg-sponsors</div>
20+
21+
<div class="color-fg-on-emphasis color-bg-accent-emphasis p-2 rounded mt-3">.color-fg-on-emphasis</div>
22+
</div>
23+
)
24+
25+
export const TextInherit = ({}) => (
26+
<div class="color-fg-success">This text is green, <a href="#" class="color-fg-inherit">including the link</a></div>
27+
)
28+
29+
export const Background = ({}) => (
30+
<div style={{display: 'inline-flex', flexDirection: 'column'}}>
31+
<div class="color-bg-default p-2 rounded mb-2">.color-bg-default</div>
32+
<div class="color-bg-overlay p-2 rounded mb-2">.color-bg-overlay</div>
33+
<div class="color-bg-inset p-2 rounded mb-2">.color-bg-inset</div>
34+
<div class="color-bg-subtle p-2 rounded mb-2">.color-bg-subtle</div>
35+
<div class="color-bg-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-emphasis</div>
36+
37+
<div class="color-bg-accent p-2 rounded mb-2">.color-bg-accent</div>
38+
<div class="color-bg-accent-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-accent-emphasis</div>
39+
40+
<div class="color-bg-success p-2 rounded mb-2">.color-bg-success</div>
41+
<div class="color-bg-success-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-success-emphasis</div>
42+
43+
<div class="color-bg-attention p-2 rounded mb-2">.color-bg-attention</div>
44+
<div class="color-bg-attention-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-attention-emphasis</div>
45+
46+
<div class="color-bg-severe p-2 rounded mb-2">.color-bg-severe</div>
47+
<div class="color-bg-severe-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-severe-emphasis</div>
48+
49+
<div class="color-bg-danger p-2 rounded mb-2">.color-bg-danger</div>
50+
<div class="color-bg-danger-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-danger-emphasis</div>
51+
52+
<div class="color-bg-open p-2 rounded mb-2">.color-bg-open</div>
53+
<div class="color-bg-open-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-open-emphasis</div>
54+
55+
<div class="color-bg-closed p-2 rounded mb-2">.color-bg-closed</div>
56+
<div class="color-bg-closed-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-closed-emphasis</div>
57+
58+
<div class="color-bg-done p-2 rounded mb-2">.color-bg-done</div>
59+
<div class="color-bg-done-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-done-emphasis</div>
60+
61+
<div class="color-bg-sponsors p-2 rounded mb-2">.color-bg-sponsors</div>
62+
<div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded">.color-bg-sponsors-emphasis</div>
63+
64+
<div class="color-bg-transparent p-2 rounded mb-2">.color-bg-transparent</div>
65+
</div>
66+
)
67+
68+
export const Border = ({}) => (
69+
<div style={{display: 'inline-flex', flexDirection: 'column'}}>
70+
<div class="border color-border-default p-2 rounded mb-2">.color-border-default</div>
71+
<div class="border color-border-muted p-2 rounded mb-2">.color-border-muted</div>
72+
<div class="border color-border-subtle p-2 rounded mb-4">.color-border-subtle</div>
73+
74+
<div class="border color-border-accent p-2 rounded mb-2">.color-border-accent</div>
75+
<div class="border color-border-accent-emphasis p-2 rounded mb-4">.color-border-accent-emphasis</div>
76+
77+
<div class="border color-border-success p-2 rounded mb-2">.color-border-success</div>
78+
<div class="border color-border-success-emphasis p-2 rounded mb-4">.color-border-success-emphasis</div>
79+
80+
<div class="border color-border-attention p-2 rounded mb-2">.color-border-attention</div>
81+
<div class="border color-border-attention-emphasis p-2 rounded mb-4">.color-border-attention-emphasis</div>
82+
83+
<div class="border color-border-severe p-2 rounded mb-2">.color-border-severe</div>
84+
<div class="border color-border-severe-emphasis p-2 rounded mb-4">.color-border-severe-emphasis</div>
85+
86+
<div class="border color-border-danger p-2 rounded mb-2">.color-border-danger</div>
87+
<div class="border color-border-danger-emphasis p-2 rounded mb-4">.color-border-danger-emphasis</div>
88+
89+
<div class="border color-border-open p-2 rounded mb-2">.color-border-open</div>
90+
<div class="border color-border-open-emphasis p-2 rounded mb-4">.color-border-open-emphasis</div>
91+
92+
<div class="border color-border-closed p-2 rounded mb-2">.color-border-closed</div>
93+
<div class="border color-border-closed-emphasis p-2 rounded mb-4">.color-border-closed-emphasis</div>
94+
95+
<div class="border color-border-done p-2 rounded mb-2">.color-border-done</div>
96+
<div class="border color-border-done-emphasis p-2 rounded mb-4">.color-border-done-emphasis</div>
97+
98+
<div class="border color-border-sponsors p-2 rounded mb-2">.color-border-sponsors</div>
99+
<div class="border color-border-sponsors-emphasis p-2 rounded">.color-border-sponsors-emphasis</div>
100+
</div>
101+
)

‎docs/src/stories/utilities/Details.stories.jsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
export default {
2+
title: 'Utilities/Details'
3+
}
4+
5+
export const Overlay = ({}) => (
6+
<details class="details-overlay">
7+
<summary class="btn">More</summary>
8+
<div class="border p-3 mt-2">Hidden text</div>
9+
</details>
10+
)
11+
12+
export const OverlayDark = ({}) => (
13+
<details class="details-overlay details-overlay-dark">
14+
<summary class="btn">More</summary>
15+
<div class="position-relative color-bg-default rounded p-3 mt-2" style={{zIndex: '112'}}>
16+
Hidden text
17+
</div>
18+
</details>
19+
)
20+
21+
export const Caret = ({}) => (
22+
<details class="details-reset">
23+
<summary class="btn">More <span class="dropdown-caret"></span></summary>
24+
<div class="border p-3 mt-2">Hidden text</div>
25+
</details>
26+
)
27+
28+
export const Summary = ({}) => (
29+
<div>
30+
<details>
31+
<summary class="btn btn-primary">More</summary>
32+
<div class="border p-3 mt-2">Hidden text</div>
33+
</details>
34+
35+
<details class="details-reset mt-3">
36+
<summary class="btn-link">More <span class="dropdown-caret"></span></summary>
37+
<div class="border p-3 mt-2">Hidden text</div>
38+
</details>
39+
</div>
40+
)

0 commit comments

Comments
 (0)