Skip to content

Commit 8cfbe95

Browse files
ryanlanciauxryanlanciaux
committed
CellMenu - Add start of components
1 parent 1cd0ca2 commit 8cfbe95

File tree

10 files changed

+262
-0
lines changed

10 files changed

+262
-0
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"@rollup/plugin-image": "^2.0.4",
6262
"@types/classnames": "^2.2.10",
6363
"classnames": "^2.2.6",
64+
"react-toggle": "^4.1.1",
6465
"rollup-plugin-css-only": "^2.0.0"
6566
}
6667
}

‎src/CellMenu/CellMenu.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.cell-menu {
2+
background: #29313A;
3+
border: 1px solid #13181E;
4+
box-sizing: border-box;
5+
box-shadow: 0px 10px 42px rgba(0, 0, 0, 0.32), 0px 6px 24px rgba(0, 0, 0, 0.16);
6+
border-radius: 4px;
7+
color: #FFF;
8+
}
9+
10+
.cell-menu > * {
11+
box-sizing: border-box;
12+
width: 100%;
13+
padding: 4px 8px;
14+
}
15+
16+
.cell-menu > *:not(:first-child) {
17+
border-top: 1px solid rgba(143, 150, 157, .2);
18+
}
19+
20+
.cell-menu > *:not(:last-child) {
21+
border-bottom: 1px solid #13181E;
22+
}
23+
24+
.cell-menu-section > *:not(:last-child) {
25+
margin-bottom: 8px;
26+
}
27+
28+
.cell-menu-item {
29+
display: flex;
30+
flex-direction: row;
31+
justify-content: space-between;
32+
}
33+
34+
.cell-menu-item:only-child {
35+
width: 100%;
36+
}
37+
38+
.cell-menu-item.heading {
39+
color: rgba(255, 255, 255, 0.6);
40+
}

‎src/CellMenu/CellMenu.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { HTMLAttributes } from 'react';
2+
import './CellMenu.css';
3+
4+
export type Props = React.FC<HTMLAttributes<HTMLDivElement>>;
5+
6+
export const CellMenuSection: Props = ({ children }) => {
7+
return <div className="cell-menu-section">{children}</div>;
8+
};
9+
10+
export const CellMenuItem: Props = ({ children }) => {
11+
return <div className="cell-menu-item">{children}</div>;
12+
};
13+
14+
export const CellMenu: Props = ({ children }) => {
15+
return <div className="cell-menu">{children}</div>;
16+
};

‎src/CellMenu/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './CellMenu';

‎src/ToggleSwitch/ToggleSwitch.css‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
.toggle-switch.react-toggle {
2+
--unchecked-background: #757F88;
3+
--checked-background: #6100FF;
4+
--thumb-background: #FFF;
5+
touch-action: pan-x;
6+
7+
display: inline-block;
8+
position: relative;
9+
cursor: pointer;
10+
background-color: transparent;
11+
border: 0;
12+
padding: 0;
13+
14+
-webkit-touch-callout: none;
15+
-webkit-user-select: none;
16+
-khtml-user-select: none;
17+
-moz-user-select: none;
18+
-ms-user-select: none;
19+
user-select: none;
20+
21+
-webkit-tap-highlight-color: rgba(0,0,0,0);
22+
-webkit-tap-highlight-color: transparent;
23+
}
24+
25+
.react-toggle-screenreader-only {
26+
border: 0;
27+
clip: rect(0 0 0 0);
28+
height: 1px;
29+
margin: -1px;
30+
overflow: hidden;
31+
padding: 0;
32+
position: absolute;
33+
width: 1px;
34+
}
35+
36+
.react-toggle--disabled {
37+
cursor: not-allowed;
38+
opacity: 0.5;
39+
-webkit-transition: opacity 0.25s;
40+
transition: opacity 0.25s;
41+
}
42+
43+
.react-toggle-track {
44+
width: 30px;
45+
height: 16px;
46+
padding: 0;
47+
border-radius: 30px;
48+
background-color: var(--unchecked-background);
49+
-webkit-transition: all 0.2s ease;
50+
-moz-transition: all 0.2s ease;
51+
transition: all 0.2s ease;
52+
}
53+
54+
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
55+
background-color: var(--unchecked-background);
56+
}
57+
58+
.react-toggle--checked .react-toggle-track {
59+
background-color: var(--checked-background);
60+
}
61+
62+
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
63+
background-color: var(--checked-background);
64+
}
65+
66+
.react-toggle-track-check {
67+
position: absolute;
68+
width: 14px;
69+
height: 10px;
70+
top: 0px;
71+
bottom: 0px;
72+
margin-top: auto;
73+
margin-bottom: auto;
74+
line-height: 0;
75+
left: 8px;
76+
opacity: 0;
77+
-webkit-transition: opacity 0.25s ease;
78+
-moz-transition: opacity 0.25s ease;
79+
transition: opacity 0.25s ease;
80+
}
81+
82+
.react-toggle--checked .react-toggle-track-check {
83+
opacity: 1;
84+
-webkit-transition: opacity 0.25s ease;
85+
-moz-transition: opacity 0.25s ease;
86+
transition: opacity 0.25s ease;
87+
}
88+
89+
.react-toggle-track-x {
90+
position: absolute;
91+
width: 10px;
92+
height: 10px;
93+
top: 0px;
94+
bottom: 0px;
95+
margin-top: auto;
96+
margin-bottom: auto;
97+
line-height: 0;
98+
right: 10px;
99+
opacity: 1;
100+
-webkit-transition: opacity 0.25s ease;
101+
-moz-transition: opacity 0.25s ease;
102+
transition: opacity 0.25s ease;
103+
}
104+
105+
.react-toggle--checked .react-toggle-track-x {
106+
opacity: 0;
107+
}
108+
109+
.react-toggle-thumb {
110+
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
111+
position: absolute;
112+
top: 2px;
113+
left: 2px;
114+
width: 12px;
115+
height: 12px;
116+
border: none;
117+
border-radius: 50%;
118+
background-color: var(--thumb-background);
119+
120+
-webkit-box-sizing: border-box;
121+
-moz-box-sizing: border-box;
122+
box-sizing: border-box;
123+
124+
-webkit-transition: all 0.25s ease;
125+
-moz-transition: all 0.25s ease;
126+
transition: all 0.25s ease;
127+
}
128+
129+
.react-toggle--checked .react-toggle-thumb {
130+
/* switch track width - (thumb width + 2px padding) */
131+
left: calc(30px - 14px);
132+
border-color: none;
133+
}

‎src/ToggleSwitch/ToggleSwitch.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import Toggle from 'react-toggle';
3+
import './ToggleSwitch.css';
4+
interface Props {
5+
label?: string;
6+
checked?: boolean;
7+
onChange?: () => void;
8+
}
9+
10+
export const ToggleSwitch: React.FC<Props> = ({ label, checked, onChange }) => (
11+
<label>
12+
<Toggle
13+
icons={false}
14+
checked={checked}
15+
onChange={onChange}
16+
className="toggle-switch"
17+
/>
18+
{label && <span>{label}</span>}
19+
</label>
20+
);

‎src/ToggleSwitch/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './ToggleSwitch';

‎src/types.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module 'react-toggle';

‎stories/CellMenu.stories.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import { action } from '@storybook/addon-actions';
3+
import {
4+
CellMenu,
5+
Props,
6+
CellMenuItem,
7+
CellMenuSection,
8+
} from '../src/CellMenu';
9+
10+
import { ToggleSwitch } from '../src/ToggleSwitch';
11+
12+
export default {
13+
title: 'CellMenu',
14+
};
15+
16+
// By passing optional props to this story, you can control the props of the component when
17+
// you consume the story in a test.
18+
export const Default = (props?: Partial<Props>) => {
19+
const [checked, toggleChecked] = React.useState(false);
20+
21+
return (
22+
<CellMenu>
23+
<CellMenuSection>
24+
<CellMenuItem>
25+
<span>One</span>
26+
<span>Two</span>
27+
</CellMenuItem>
28+
<CellMenuItem>
29+
Two
30+
<ToggleSwitch
31+
checked={checked}
32+
onChange={() => toggleChecked(previous => !previous)}
33+
/>
34+
</CellMenuItem>
35+
</CellMenuSection>
36+
<CellMenuSection>
37+
<CellMenuItem>Three</CellMenuItem>
38+
<CellMenuItem>Four</CellMenuItem>
39+
</CellMenuSection>
40+
</CellMenu>
41+
);
42+
};

‎yarn.lock‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9709,6 +9709,13 @@ react-textarea-autosize@^7.1.0:
97099709
"@babel/runtime" "^7.1.2"
97109710
prop-types "^15.6.0"
97119711

9712+
react-toggle@^4.1.1:
9713+
version "4.1.1"
9714+
resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-4.1.1.tgz#2317f67bf918ea3508a96b09dd383efd9da572af"
9715+
integrity sha512-+wXlMcSpg8SmnIXauMaZiKpR+r2wp2gMUteroejp2UTSqGTVvZLN+m9EhMzFARBKEw7KpQOwzCyfzeHeAndQGw==
9716+
dependencies:
9717+
classnames "^2.2.5"
9718+
97129719
react@^16.13.1, react@^16.8.3:
97139720
version "16.13.1"
97149721
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"

0 commit comments

Comments
 (0)