Skip to content

Commit 1d1c532

Browse files
kmonahankmonahan
authored
Merge pull request #10 from forumone/duration-easing-space
added initial files for duration, easing and spacing variable stories
2 parents 6b73a1a + 85fcafa commit 1d1c532

File tree

8 files changed

+268
-0
lines changed

8 files changed

+268
-0
lines changed

‎services/app/source/00-config/duration.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
:root {
2+
--duration-shortest: 150ms;
3+
--duration-short: 200ms;
4+
--duration-standard: 375ms;
5+
--duration-long: 400ms;
6+
--duration-intro: 270ms;
7+
--duration-outro: 195ms;
8+
}

‎services/app/source/00-config/easing.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
:root {
2+
--easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
3+
--easing-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
4+
--easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
5+
--easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
6+
}

‎services/app/source/00-config/vars.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,7 @@
22
@import 'box-shadow.css';
33
@import 'constrain.css';
44
@import 'colors.css';
5+
@import 'duration.css';
6+
@import 'easing.css';
57
@import 'typography.css';
68
@import 'spacing.css';

‎services/app/source/01-global/duration/duration.module.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
$duration-swatch: rem(40px);
2+
3+
.duration {
4+
margin-bottom: 1rem;
5+
}
6+
7+
.helptext {
8+
margin-bottom: 1rem;
9+
}
10+
11+
.group {
12+
background-color: #eee;
13+
display: flex;
14+
flex-wrap: wrap;
15+
padding: 1rem;
16+
17+
&:hover {
18+
.indicator {
19+
transform: scale(1.5);
20+
}
21+
}
22+
}
23+
24+
.item {
25+
flex: 0 0 rem(150px);
26+
padding: 1rem;
27+
text-align: center;
28+
}
29+
30+
.indicator {
31+
background-color: #666;
32+
border-radius: 50%;
33+
display: inline-block;
34+
height: $duration-swatch;
35+
margin-bottom: 2rem;
36+
position: relative;
37+
transition: all 2s ease-out;
38+
width: $duration-swatch;
39+
}

‎services/app/source/01-global/duration/duration.stories.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Meta, Story } from '@storybook/react';
2+
import { Property } from 'csstype';
3+
import getCssVariables from '../../06-utility/storybook/getCssVariables';
4+
import styles from './duration.module.css';
5+
6+
const settings: Meta = {
7+
title: 'Global/Duration',
8+
};
9+
10+
interface DurationOptions {
11+
[duration: string]: Property.TransitionDuration;
12+
}
13+
14+
const allVars = getCssVariables();
15+
const duration = allVars.reduce((allDurations, [key, value]) => {
16+
if (key.indexOf('--duration') === 0) {
17+
const duration = key.substring(11);
18+
allDurations[duration] = value;
19+
}
20+
return allDurations;
21+
}, {} as DurationOptions);
22+
23+
const Duration: Story = args => {
24+
return (
25+
<div className={styles.duration}>
26+
<div className={styles.helptext}>(Hover to demo duration)</div>
27+
<div className={styles.group}>
28+
{Object.entries(args.duration as DurationOptions).map(
29+
([duration, transitionDuration]) => (
30+
<div className={styles.item} key={`duration-${duration}`}>
31+
<div
32+
className={styles.indicator}
33+
style={{
34+
transitionDuration,
35+
}}
36+
></div>
37+
<div className={styles.label}>
38+
<div>{duration}</div>
39+
<div>{transitionDuration}</div>
40+
</div>
41+
</div>
42+
),
43+
)}
44+
</div>
45+
</div>
46+
);
47+
};
48+
Duration.args = {
49+
duration: duration,
50+
};
51+
52+
export default settings;
53+
export { Duration };

‎services/app/source/01-global/easing/easing.module.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
$easing-swatch: rem(75px);
3+
4+
.easing {
5+
background-color: #eee;
6+
padding: 1rem;
7+
}
8+
9+
.helptext {
10+
margin-bottom: 1rem;
11+
}
12+
13+
.group {
14+
padding: 0 rem(150px) 0 1rem;
15+
16+
&:hover {
17+
.indicator {
18+
left: 100%;
19+
}
20+
}
21+
}
22+
23+
24+
.item {
25+
margin-bottom: 1rem;
26+
}
27+
28+
.indicator {
29+
background-color: #666;
30+
border-radius: 10%;
31+
height: $easing-swatch;
32+
left: 0;
33+
margin-bottom: 0.5rem;
34+
position: relative;
35+
transition-duration: 1s;
36+
transition-property: left;
37+
width: $easing-swatch;
38+
}

‎services/app/source/01-global/easing/easing.stories.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Meta, Story } from '@storybook/react';
2+
import { Property } from 'csstype';
3+
import getCssVariables from '../../06-utility/storybook/getCssVariables';
4+
import styles from './easing.module.css';
5+
6+
const settings: Meta = {
7+
title: 'Global/Easing',
8+
};
9+
10+
interface EasingOptions {
11+
[ease: string]: Property.TransitionTimingFunction;
12+
}
13+
14+
const allVars = getCssVariables();
15+
const easing = allVars.reduce((allEases, [key, value]) => {
16+
if (key.indexOf('--easing') === 0) {
17+
const ease = key.substring(9);
18+
allEases[ease] = value;
19+
}
20+
return allEases;
21+
}, {} as EasingOptions);
22+
23+
const Easing: Story = args => {
24+
return (
25+
<div className={styles['easing']}>
26+
<div className={styles.helptext}>(Hover to demo easing)</div>
27+
{Object.entries(args.easing as EasingOptions).map(
28+
([ease, transitionTimingFunction]) => (
29+
<div className={styles.group} key={`easing-${ease}`}>
30+
<div className={styles.item}>
31+
<div
32+
className={styles.indicator}
33+
style={{
34+
transitionTimingFunction,
35+
}}
36+
></div>
37+
<div className={styles.label}>{ease}</div>
38+
</div>
39+
</div>
40+
),
41+
)}
42+
</div>
43+
);
44+
};
45+
Easing.args = {
46+
easing: easing,
47+
};
48+
49+
export default settings;
50+
export { Easing };

‎services/app/source/01-global/spacing/space.stories.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { Meta, Story } from '@storybook/react';
2+
import getCssVariables from '../../06-utility/storybook/getCssVariables';
3+
4+
const settings: Meta = {
5+
title: 'Global/Spacing',
6+
};
7+
8+
const allVars = getCssVariables();
9+
10+
const baseFontVar = allVars.find(
11+
([key]) => key.indexOf('--base-font-size') === 0,
12+
);
13+
const baseFontSize = baseFontVar ? parseInt(baseFontVar[1]) : 16;
14+
15+
interface SpacingOptions {
16+
[space: string]: string;
17+
}
18+
19+
const spacing = allVars.reduce((allSpacing, [key, value]) => {
20+
if (key.indexOf('--spacing') === 0) {
21+
let space = key.substring(10);
22+
if (space.includes('-')) {
23+
space = space.replace('-', '.');
24+
}
25+
allSpacing[space] = value;
26+
}
27+
return allSpacing;
28+
}, {} as SpacingOptions);
29+
30+
const Spacing: Story = args => {
31+
return (
32+
<table>
33+
<thead>
34+
<tr>
35+
<th>Token</th>
36+
<th>REM</th>
37+
<th>PX</th>
38+
<th>Example</th>
39+
</tr>
40+
</thead>
41+
<tbody>
42+
{Object.entries(args.spacing as SpacingOptions)
43+
.sort(([keyA], [keyB]) => Number(keyA) - Number(keyB))
44+
.map(([name, unit]) => (
45+
<tr key={`spacing-${name}`}>
46+
<td>{name}</td>
47+
<td>
48+
{parseInt(unit) / baseFontSize}
49+
rem
50+
</td>
51+
<td>{unit}</td>
52+
<td>
53+
<div
54+
style={{
55+
height: unit,
56+
width: unit,
57+
backgroundColor: '#ccc',
58+
}}
59+
></div>
60+
</td>
61+
</tr>
62+
))}
63+
</tbody>
64+
</table>
65+
);
66+
};
67+
Spacing.args = {
68+
spacing: spacing,
69+
};
70+
71+
export default settings;
72+
export { Spacing };

0 commit comments

Comments
 (0)