{
173 | this.selectionEl = n;
174 | }}
175 | />
176 | )}
177 |
178 |
179 |
187 |
194 |
195 |
196 |
{
204 | this.container = n;
205 | }}
206 | >
207 | {items.map(item => (
208 | - {
214 | this.items[item] = n;
215 | }}
216 | onClick={() => this.toggleItem(item)}
217 | />
218 | ))}
219 |
220 |
221 | );
222 | }
223 | }
224 |
225 | export default Selection;
226 |
--------------------------------------------------------------------------------
/src/components/DragSelect/DragSelect.scss:
--------------------------------------------------------------------------------
1 | .Wrapper {
2 | width: 650px;
3 |
4 | &.is-grid {
5 | display: grid;
6 | grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
7 | grid-template-rows: repeat(4, 126px);
8 | grid-gap: 5px;
9 | }
10 | }
11 |
12 | .Header {
13 | display: flex;
14 | justify-content: space-between;
15 | flex-direction: column;
16 | margin-bottom: 8px;
17 | margin-top: 30px;
18 | }
19 |
20 | .Selection {
21 | transition: opacity 250ms ease;
22 | position: absolute;
23 | z-index: 9999;
24 | background: #0080ff0f;
25 | border: solid 1px #2196f382;
26 | pointer-events: none;
27 | }
28 |
29 | .ButtonGroup {
30 | align-self: flex-end;
31 | .Button:not(:last-child) {
32 | margin-right: 4px;
33 | }
34 | }
35 |
36 | .Button {
37 | color: white;
38 | background: #1782ff;
39 | box-shadow: 0 4px 8px -3px rgba(0, 118, 255, 0.25),
40 | 0 1px 1px rgba(0, 118, 255, 0.2);
41 | padding: 0 12px;
42 | line-height: 32px;
43 | display: inline-block;
44 | border-radius: 4px;
45 | transition: all 0.15s ease;
46 | font-size: 14px;
47 | font-weight: 500;
48 | border: 0;
49 | outline: 0;
50 |
51 | &:disabled {
52 | cursor: default;
53 | opacity: 0.5;
54 | }
55 |
56 | &:active {
57 | background: rgb(24, 122, 234);
58 | box-shadow: 0 0 0 0 rgba(0, 118, 255, 0.25),
59 | 0 1px 1px rgba(0, 118, 255, 0.2);
60 | }
61 | }
62 |
63 | .fade-out {
64 | opacity: 0;
65 | }
66 |
--------------------------------------------------------------------------------
/src/components/DragSelect/Item.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import classNames from 'classnames';
3 |
4 | import './Item.scss';
5 |
6 | const CheckIcon = () => (
7 |
15 | );
16 |
17 | class Item extends Component {
18 | render() {
19 | const { children, style, short, selected, innerRef, ...props } = this.props;
20 | return (
21 |
30 | {children}
31 |
35 |
36 |
37 |
38 | );
39 | }
40 | }
41 |
42 | export default Item;
43 |
--------------------------------------------------------------------------------
/src/components/DragSelect/Item.scss:
--------------------------------------------------------------------------------
1 | .Item {
2 | user-select: none;
3 | background: white;
4 | border-radius: 4px;
5 | position: relative;
6 | transition: box-shadow 150ms ease;
7 | background-size: cover;
8 | background-position: center;
9 | box-shadow: 0 3px 6px #00000008, 0 0 0 1px #00000005;
10 |
11 | &--selected {
12 | box-shadow: 0 3px 6px #00000008, 0 0 0 1px #00000005,
13 | inset 0 0 0 2px #1782ff;
14 | }
15 |
16 | .is-grid & {
17 | height: auto;
18 | margin: unset;
19 |
20 | &:nth-child(1),
21 | &:nth-child(3),
22 | &:nth-child(5),
23 | &:nth-child(8),
24 | &:nth-child(10) {
25 | grid-column: span 2;
26 | }
27 |
28 | &:nth-child(4) {
29 | grid-column: span 2;
30 | grid-row: span 2;
31 | }
32 | }
33 |
34 | .is-list & {
35 | height: 48px;
36 | margin-bottom: 4px;
37 | }
38 | }
39 |
40 | .Check {
41 | display: flex;
42 | align-items: center;
43 | justify-content: center;
44 | width: 24px;
45 | height: 24px;
46 | position: absolute;
47 | right: 0;
48 | bottom: 0;
49 | transition: 150ms ease-out;
50 | transition-property: opacity;
51 | background: #1782ff;
52 | border-top-left-radius: 4px;
53 | border-bottom-right-radius: 4px;
54 | opacity: 0;
55 |
56 | &--selected {
57 | opacity: 1;
58 | }
59 |
60 | svg {
61 | height: 12px;
62 | width: 12px;
63 | fill: white;
64 | }
65 |
66 | .is-list & {
67 | border-radius: 100%;
68 | width: 20px;
69 | height: 20px;
70 | background-position: -2px -1px;
71 | bottom: auto;
72 | top: 50%;
73 | right: 12px;
74 | transform: translateY(-50%);
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/DragSelect/README.md:
--------------------------------------------------------------------------------
1 | # `DragSelect`
2 |
3 | A drag & select interaction.
4 |
5 |
6 | 
7 |
--------------------------------------------------------------------------------
/src/components/DragSelect/stories/index.story.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Selection from '../DragSelect';
5 |
6 | storiesOf('DragSelect', module)
7 | .add('Grid', () =>
, {
8 | notes:
9 | 'Move the mouse pointer over one of the tiles, and then hold-click and ' +
10 | 'drag to another point to select tiles. Try a few times with different ' +
11 | 'combinations of selected and selected tiles.'
12 | })
13 | .add('List', () =>
, {
14 | notes:
15 | 'Move the mouse pointer over one of the items, and then hold-click and ' +
16 | 'drag to another point to select items. Try a few times with different ' +
17 | 'combinations of selected and selected items.'
18 | });
19 |
--------------------------------------------------------------------------------
/src/components/IconInput/IconInput.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --add-new-width: 240px;
3 | --add-new-padding: 8px;
4 | }
5 | .IconInput {
6 | display: inline-block;
7 | height: 36px;
8 | position: relative;
9 | width: 24px;
10 | height: 24px;
11 | transition: all ease 300ms;
12 | }
13 | .IconInput.active {
14 | width: calc(var(--add-new-width) - var(--add-new-padding) * 2);
15 | }
16 | .IconInput-input {
17 | position: absolute;
18 | width: 0;
19 | overflow: hidden;
20 | right: calc(var(--add-new-padding) * -1);
21 | top: calc(var(--add-new-padding) * -1);
22 | opacity: 0;
23 | transition: all ease 300ms;
24 | }
25 | .IconInput-input input {
26 | border: 0;
27 | width: 100%;
28 | margin: 0;
29 | padding: var(--add-new-padding) 3em var(--add-new-padding)
30 | var(--add-new-padding);
31 | line-height: 24px;
32 | font-size: 14px;
33 | background: #1f1f1f;
34 | color: white;
35 | outline: 0;
36 | border-radius: 4px;
37 | }
38 | .IconInput-input input:disabled {
39 | -webkit-text-fill-color: rgb(102, 102, 102);
40 | }
41 | .IconInput-input input::placeholder {
42 | -webkit-text-fill-color: rgb(102, 102, 102);
43 | }
44 | .IconInput.active input:disabled {
45 | color: #5d5d5d;
46 | }
47 | .IconInput.active .IconInput-input {
48 | width: var(--add-new-width);
49 | opacity: 1;
50 | }
51 |
52 | .IconInput button {
53 | background: transparent;
54 | border: 0;
55 | color: white;
56 | display: block;
57 | height: 24px;
58 | opacity: 0.66;
59 | outline: 0;
60 | padding: 0;
61 | position: absolute;
62 | right: 0;
63 | transition: all ease 300ms;
64 | width: 24px;
65 | }
66 | .IconInput button:not(:disabled) {
67 | cursor: pointer;
68 | }
69 | .IconInput button:hover,
70 | .IconInput button:focus {
71 | opacity: 1;
72 | }
73 | .IconInput.stateful button {
74 | opacity: 0;
75 | }
76 | .IconInput.active button {
77 | pointer-events: none;
78 | color: gray;
79 | z-index: 1;
80 | }
81 |
82 | .IconInput svg.Spinner {
83 | animation: spinner linear 2s infinite;
84 | }
85 | .IconInput-status {
86 | color: gray;
87 | position: absolute;
88 | right: 0;
89 | top: 0;
90 | z-index: 1;
91 | pointer-events: none;
92 | width: 24px;
93 | height: 24px;
94 | }
95 | .IconInput-status svg {
96 | animation: zoom 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
97 | }
98 | @keyframes spinner {
99 | from {
100 | transform: rotate(0deg);
101 | }
102 | to {
103 | transform: rotate(360deg);
104 | }
105 | }
106 | @keyframes zoom {
107 | 0% {
108 | opacity: 0;
109 | transform: scale(2);
110 | }
111 | 100% {
112 | opacity: 1;
113 | transform: scale(1);
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/src/components/IconInput/IconInput.js:
--------------------------------------------------------------------------------
1 | import React, { createRef } from 'react';
2 | import { Loader, Check, X } from 'react-feather';
3 | import classNames from 'classnames';
4 | import './IconInput.css';
5 |
6 | class IconInput extends React.Component {
7 | state = {
8 | value: '',
9 | active: false,
10 | success: false,
11 | error: false
12 | };
13 |
14 | inputRef = createRef();
15 |
16 | componentWillReceiveProps(nextProps) {
17 | const finishedLoading = this.props.loading && !nextProps.loading;
18 | if (finishedLoading && nextProps.error) {
19 | this.setState({ success: false, error: true });
20 | }
21 | if (finishedLoading && !nextProps.error && nextProps.success) {
22 | this.setState({ active: false, error: false, success: true, value: '' });
23 | setTimeout(() => {
24 | this.setState({ success: false });
25 | }, 1000);
26 | }
27 | }
28 |
29 | componentDidUpdate() {
30 | if (this.state.active) {
31 | this.inputRef.current.focus();
32 | }
33 | }
34 |
35 | handleChange = e => {
36 | this.setState({ value: e.target.value, error: false });
37 | };
38 |
39 | handleSubmit = e => {
40 | if (this.props.loading) return;
41 | e.preventDefault();
42 | this.props.onSubmit(this.state.value);
43 | };
44 |
45 | setActive = () => {
46 | this.setState({ active: true });
47 | };
48 |
49 | setInactive = () => {
50 | if (this.state.value || this.state.loading || this.state.success) return;
51 | this.setState({ active: false, error: false });
52 | };
53 |
54 | render() {
55 | const { active, value, success, error } = this.state;
56 | const { loading } = this.props;
57 | const disabled = loading || success;
58 | return (
59 |
93 | );
94 | }
95 | }
96 |
97 | export default IconInput;
98 |
--------------------------------------------------------------------------------
/src/components/IconInput/README.md:
--------------------------------------------------------------------------------
1 | # `IconInput`
2 |
3 | A icon that transitions into a text input on focus with various interactive states such as loading, success, and error.
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/src/components/IconInput/stories/index.story.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { storiesOf } from '@storybook/react';
3 | import classNames from 'classnames';
4 | import { UserPlus } from 'react-feather';
5 | import IconInput from '../IconInput';
6 |
7 | import './index.style.scss';
8 |
9 | const Wrapper = ({ children, leftAligned }) => (
10 |
11 |
17 | {children}
18 |
19 |
20 | );
21 |
22 | class Example extends Component {
23 | state = {
24 | loading: false,
25 | success: false,
26 | error: false
27 | };
28 |
29 | handleSubmit = () => {
30 | this.setState({ loading: true }, () => {
31 | setTimeout(() => {
32 | this.setState({
33 | loading: false,
34 | [this.props.error ? 'error' : 'success']: true
35 | });
36 | }, 750);
37 | });
38 | };
39 |
40 | render() {
41 | return (
42 |
43 |
50 |
51 |
52 |
53 | );
54 | }
55 | }
56 |
57 | storiesOf('IconInput', module)
58 | .add('Success State', () =>
, {
59 | notes:
60 | 'Click or focus the icon to transition into a text input. Type something' +
61 | 'and hit the enter key to submit.'
62 | })
63 | .add('Error State', () =>
, {
64 | notes:
65 | 'Click or focus the icon to transition into a text input. Type something' +
66 | 'and hit the enter key to submit.'
67 | })
68 | .add('Fixed Position (Left)', () =>
, {
69 | notes:
70 | 'Click or focus the icon to transition into a text input. Type something' +
71 | 'and hit the enter key to submit.'
72 | });
73 |
--------------------------------------------------------------------------------
/src/components/IconInput/stories/index.style.scss:
--------------------------------------------------------------------------------
1 | .FullScreen {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | display: flex;
6 | background: black;
7 | width: 100vw;
8 | height: 100vh;
9 | align-items: center;
10 | justify-content: center;
11 |
12 | &-content {
13 | display: flex;
14 | flex-direction: column;
15 | align-items: flex-end;
16 | min-width: 58px;
17 | max-width: 600px;
18 | border-radius: 4px;
19 | padding: 1em;
20 |
21 | &--leftAligned {
22 | padding: 4em;
23 | width: 100%;
24 | max-width: 100vw;
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/TabSwitcher/README.md:
--------------------------------------------------------------------------------
1 | # `TabSwitcher`
2 |
3 | A tabs UI with an active tab indicator that re-positions and resizes itself based on the selected tab.
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/components/TabSwitcher/TabSwitcher.css:
--------------------------------------------------------------------------------
1 | .TabSwitcher {
2 | color: white;
3 | font-weight: 400;
4 | position: relative;
5 | white-space: nowrap;
6 | }
7 |
8 | .TabSwitcher-items {
9 | padding: 0;
10 | margin: 0;
11 | list-style: none;
12 | border-bottom: 2px #2c2c2c solid;
13 | }
14 |
15 | @keyframes slideInUp {
16 | from {
17 | transform: translate3d(0, 10px, 0);
18 | opacity: 0;
19 | }
20 | to {
21 | transform: translate3d(0, 0, 0);
22 | opacity: 1;
23 | }
24 | }
25 |
26 | .TabSwitcher-item {
27 | display: inline-block;
28 | position: relative;
29 | animation: slideInUp ease 0.5s;
30 | }
31 |
32 | .TabSwitcher-item a {
33 | backface-visibility: hidden;
34 | position: relative;
35 | transform: translateZ(0px);
36 | -webkit-transform: translateZ(0px);
37 | color: #9b9b9b;
38 | text-decoration: none;
39 | padding: 10px 0;
40 | display: inline-block;
41 | transition: all ease-in-out 0.15s;
42 | }
43 |
44 | .TabSwitcher-item.is-active a {
45 | color: white;
46 | }
47 |
48 | .TabSwitcher-item a:hover {
49 | color: white;
50 | }
51 |
52 | .TabSwitcher-item:not(:last-child) {
53 | margin-right: 1.5em;
54 | }
55 |
56 | .TabSwitcher-indicator {
57 | position: absolute;
58 | height: 2px;
59 | background: white;
60 | bottom: 0;
61 | transition: all cubic-bezier(0.175, 0.885, 0.32, 1.05) 0.3s;
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/TabSwitcher/TabSwitcher.js:
--------------------------------------------------------------------------------
1 | import React, { Component, createRef } from 'react';
2 | import classNames from 'classnames';
3 | import './TabSwitcher.css';
4 |
5 | class TabSwitcher extends Component {
6 | containerRef = createRef();
7 |
8 | indicatorRef = createRef();
9 |
10 | activeItemRef = createRef();
11 |
12 | state = { activeItem: 0 };
13 |
14 | componentDidMount() {
15 | this.updateIndicatorPosition();
16 | }
17 |
18 | componentDidUpdate(prevState) {
19 | if (prevState.activeItem !== this.state.activeItem) {
20 | this.updateIndicatorPosition();
21 | }
22 | }
23 |
24 | handleItemClick = e => {
25 | if (e) {
26 | e.preventDefault();
27 | }
28 | this.setState({ activeItem: Number(e.target.dataset.tabIndex) });
29 | };
30 |
31 | updateIndicatorPosition() {
32 | const { current: activeItem } = this.activeItemRef;
33 | const { current: container } = this.containerRef;
34 | const { current: indicator } = this.indicatorRef;
35 | const menuRect = container.getBoundingClientRect();
36 | const activeItemRect = activeItem.getBoundingClientRect();
37 | const x = Math.round(activeItemRect.left - menuRect.left);
38 | indicator.style.width = `${activeItemRect.width}px`;
39 | indicator.style.transform = `translateX(${x}px)`;
40 | }
41 |
42 | render() {
43 | const { items } = this.props;
44 | const { activeItem } = this.state;
45 | return (
46 |
68 | );
69 | }
70 | }
71 |
72 | export default TabSwitcher;
73 |
--------------------------------------------------------------------------------
/src/components/TabSwitcher/stories/index.story.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import { storiesOf } from '@storybook/react';
4 |
5 | import TabSwitcher from '../TabSwitcher';
6 |
7 | const Wrapper = ({ children, leftAligned }) => (
8 |
9 |
15 | {children}
16 |
17 |
18 | );
19 |
20 | storiesOf('TabSwitcher', module).add(
21 | 'Example',
22 | () => (
23 |
24 |
34 |
35 | ),
36 | {
37 | notes:
38 | 'Click on one of the tabs listed above. The active tab indicator will ' +
39 | 'slide to the selected tab position and resize itself accordingly.'
40 | }
41 | );
42 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | padding: 0;
8 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
9 | Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | min-height: 100vh;
14 | background: #e8edf3;
15 | padding: 32px;
16 | }
17 |
18 | hr {
19 | border: 0;
20 | border-top: 1px solid rgba(0, 0, 0, 0.05);
21 | margin: 1em 0 0.5em;
22 | }
23 |
--------------------------------------------------------------------------------