From 512e0af738abc029f83d671a5a0e9a2f6fe3d1cf Mon Sep 17 00:00:00 2001 From: Eran Machiels Date: Mon, 1 Mar 2021 23:08:48 +0100 Subject: [PATCH] Changed panels to panes --- .eslintrc | 3 +- package-lock.json | 10 + package.json | 1 + src/components/Card/Card.tsx | 2 +- src/components/Panel/Container.tsx | 33 + src/components/Panel/Content.tsx | 31 + src/components/Panel/Pane.tsx | 51 + src/components/Panel/Panel.tsx | 24 - src/components/Panel/__tests__/Pane.test.tsx | 61 + src/components/Panel/__tests__/Panel.test.tsx | 25 - src/components/Panel/index.ts | 10 +- src/style/base/_variables.scss | 27 +- src/style/components/_panel.scss | 26 +- www/src/index.tsx | 3990 +++++++++-------- 14 files changed, 2239 insertions(+), 2055 deletions(-) create mode 100644 src/components/Panel/Container.tsx create mode 100644 src/components/Panel/Content.tsx create mode 100644 src/components/Panel/Pane.tsx delete mode 100644 src/components/Panel/Panel.tsx create mode 100644 src/components/Panel/__tests__/Pane.test.tsx delete mode 100644 src/components/Panel/__tests__/Panel.test.tsx diff --git a/.eslintrc b/.eslintrc index f9da029..f03794e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -19,7 +19,8 @@ "dist", "setupTests.ts", "babel.config.js", - "www" + "www", + "src/**/__tests__/*" ], "rules": { "comma-dangle": "off", diff --git a/package-lock.json b/package-lock.json index 93c9ceb..b370924 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3658,6 +3658,16 @@ "@types/istanbul-lib-report": "*" } }, + "@types/jest": { + "version": "26.0.20", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.20.tgz", + "integrity": "sha512-9zi2Y+5USJRxd0FsahERhBwlcvFh6D2GLQnY2FH2BzK8J9s9omvNHIbvABwIluXa0fD8XVKMLTO0aOEuUfACAA==", + "dev": true, + "requires": { + "jest-diff": "^26.0.0", + "pretty-format": "^26.0.0" + } + }, "@types/json-schema": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz", diff --git a/package.json b/package.json index 1a20be2..c445433 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@babel/preset-typescript": "^7.13.0", "@types/enzyme": "^3.10.8", "@types/enzyme-adapter-react-16": "^1.0.6", + "@types/jest": "^26.0.20", "@types/react": "^17.0.2", "@types/react-dom": "^16.9.11", "@typescript-eslint/eslint-plugin": "^4.15.2", diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 08e8431..b39026d 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -16,7 +16,7 @@ export interface CardProps extends React.HTMLAttributes { } // Static properties are not given yet, when declaring the card const. Therefore, the error saying -// that Card is missing above CardStatics properties. These will defined after the card component +// that Card is missing above CardStatics properties. These will defined after the card component // is defined. // @ts-ignore const Card: ForwardComponentWithStatics = React.forwardRef(( diff --git a/src/components/Panel/Container.tsx b/src/components/Panel/Container.tsx new file mode 100644 index 0000000..83b65a7 --- /dev/null +++ b/src/components/Panel/Container.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; + +export interface PanelContainerProps extends React.HTMLAttributes { + vertical?: boolean; +} + +const PanelContainer = React.forwardRef(( + { + children, + vertical + }, + ref +): React.ReactElement => ( +
+ {children} +
+)); + +PanelContainer.displayName = 'PanelContainer'; +PanelContainer.propTypes = { + children: PropTypes.node, + vertical: PropTypes.bool +} + +export default PanelContainer; diff --git a/src/components/Panel/Content.tsx b/src/components/Panel/Content.tsx new file mode 100644 index 0000000..9ead825 --- /dev/null +++ b/src/components/Panel/Content.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; + +export type PaneContentProps = React.HTMLAttributes; + +const PaneContent = React.forwardRef(( + { + children, + className + }, + ref +): React.ReactElement => ( +
+ {children} +
+)); + +PaneContent.displayName = 'PaneContent'; +PaneContent.propTypes = { + children: PropTypes.node, + className: PropTypes.string +} + +export default PaneContent; diff --git a/src/components/Panel/Pane.tsx b/src/components/Panel/Pane.tsx new file mode 100644 index 0000000..fdfe5f9 --- /dev/null +++ b/src/components/Panel/Pane.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import PaneContent from './Content'; +import { ForwardComponentWithStatics } from '../utils'; +import { PaneContainer } from './index'; + +export type PaneStatics = { + Content: typeof PaneContent; + Container: typeof PaneContainer; +} + +export interface PaneProps extends React.HTMLAttributes { + horizontal?: boolean; +} + +// Static properties are not given yet, when declaring the card const. Therefore, the error saying +// that Pane is missing above PaneStatics properties. These will defined after the pane component +// is defined. +// @ts-ignore +const Pane: ForwardComponentWithStatics = React.forwardRef(( + { + children, + className, + horizontal + }, + ref +): React.ReactElement => ( +
+ {children} +
+)); + +Pane.displayName = 'Pane'; +Pane.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + horizontal: PropTypes.bool +} + +Pane.Content = PaneContent; +Pane.Container = PaneContainer; + +export default Pane; diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx deleted file mode 100644 index 1357420..0000000 --- a/src/components/Panel/Panel.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import clsx from 'clsx'; - -export interface PanelProps extends React.HTMLAttributes { - spaced?: boolean; -} - -const Panel = ({ - children, - className, - spaced -}: React.PropsWithChildren): React.ReactElement => ( -
- {children} -
-); - -export default Panel; diff --git a/src/components/Panel/__tests__/Pane.test.tsx b/src/components/Panel/__tests__/Pane.test.tsx new file mode 100644 index 0000000..171a78c --- /dev/null +++ b/src/components/Panel/__tests__/Pane.test.tsx @@ -0,0 +1,61 @@ +import { mount, shallow } from 'enzyme'; +import React from 'react'; +import Pane from '../Pane'; +import PaneContainer from '../Container'; +import PaneContent from '../Content'; + +describe('Pane test', () => { + it('should render pane container', () => { + const container = shallow( + + Hello world + + ); + + expect(container.find('.pane-container').length).toBe(1); + }); + + it('should render vertical pane container', () => { + const container = shallow( + + Hello world + + ); + + expect(container.find('.pane-container.vertical').length).toBe(1); + }); + + it('should render pane', () => { + const container = shallow( + + Hello world + + ); + + expect(container.find('.pane').length).toBe(1); + }); + + it('should render horizontal pane', () => { + const container = shallow( + + Hello world + + ); + + expect(container.find('.pane.horizontal').length).toBe(1); + }); + it('should render pane content', () => { + const container = mount( +
+ + Hello world + + + Hello world + +
+ ); + + expect(container.find('.pane-content').length).toBe(2); + }); +}); diff --git a/src/components/Panel/__tests__/Panel.test.tsx b/src/components/Panel/__tests__/Panel.test.tsx deleted file mode 100644 index 88d3d04..0000000 --- a/src/components/Panel/__tests__/Panel.test.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { shallow } from 'enzyme'; -import React from 'react'; -import Panel from '../Panel'; - -describe('Page test', () => { - it('should render panel', () => { - const container = shallow( - - Hello world - - ); - - expect(container.find('.panel').length).toBe(1); - }); - - it('should render spaced panel', () => { - const container = shallow( - - Hello world - - ); - - expect(container.find('.panel.panel-spaced').length).toBe(1); - }); -}); diff --git a/src/components/Panel/index.ts b/src/components/Panel/index.ts index d1146d5..00213ed 100644 --- a/src/components/Panel/index.ts +++ b/src/components/Panel/index.ts @@ -1,2 +1,8 @@ -export { default as Panel } from './Panel'; -export type { PanelProps } from './Panel' +export { default as PaneContainer} from './Container'; +export type { PanelContainerProps } from './Container'; + +export { default as PaneContent } from './Content'; +export type { PaneContentProps } from './Content'; + +export { default as Panel } from './Pane'; +export type { PaneProps } from './Pane' diff --git a/src/style/base/_variables.scss b/src/style/base/_variables.scss index 7510724..fd7bf72 100644 --- a/src/style/base/_variables.scss +++ b/src/style/base/_variables.scss @@ -1,5 +1,5 @@ /** - * 1. Colors + * Colors */ $colors: ( 'red': ( @@ -147,7 +147,7 @@ $colors: ( } /** - * 2. Base + * Base */ $base-background-color: color('gray', 'background') !default; $base-body-gutter: 0 !default; @@ -206,18 +206,7 @@ $success-color-active: color('green', 'active') !default; } /** - * 3. Panel - */ -$panel-background: #fff !default; -$panel-gutter: 2rem !default; - -:root { - --panel-background: #{$panel-background}; - --panel-gutter: #{$panel-gutter} -} - -/** - * 4. Page + * Page */ $page-gutter: 2rem !default; @@ -226,7 +215,7 @@ $page-gutter: 2rem !default; } /** - * 5. Button + * Button */ $button-padding: 1rem !default; $button-font-weight: 600 !default; @@ -277,7 +266,7 @@ $danger-button-ghost-active-background: color('red', 'background-hover') !defaul } /** - * 6. Cards + * Cards */ $card-padding: 1.5rem !default; $card-background: #fff !default; @@ -288,7 +277,7 @@ $card-background: #fff !default; } /** - * 7. Form fields + * Form fields */ $form-field-padding: 1rem !default; $form-field-font-weight: 500 !default; @@ -301,7 +290,7 @@ $form-field-font-size: 1rem !default; } /** - * 8. Icons + * Icons */ $iconPath: '../icons' !default; $icons: ( @@ -556,7 +545,7 @@ $icons: ( } /** - * 8. Form fields + * Form fields */ $form-field-padding: 1rem !default; $form-field-font-weight: 500 !default; diff --git a/src/style/components/_panel.scss b/src/style/components/_panel.scss index e46dc3a..db80526 100644 --- a/src/style/components/_panel.scss +++ b/src/style/components/_panel.scss @@ -1,7 +1,27 @@ -.panel { +.pane-container { + display: flex; + + &.vertical { + flex-direction: column; + } +} + +.pane { background: var(--panel-background); + display: flex; + flex-direction: column; + flex: 1 auto; + position: relative; + + &.horizontal { + flex-direction: row; + } + + .pane-content { + padding: var(--base-gutter); + } - &.panel-spaced { - padding: var(--panel-gutter); + .pane-header { + padding: var(--base-gutter); } } diff --git a/www/src/index.tsx b/www/src/index.tsx index e590941..fd5c0d3 100644 --- a/www/src/index.tsx +++ b/www/src/index.tsx @@ -3,12 +3,27 @@ import { useState } from 'react'; import * as ReactDom from 'react-dom'; import '../../src/style/index.scss'; -import { Button, Card, Col, Grid, Icon, Modal, Page, Row, SelectField, Tag, TextField, Variant } from '../../src'; +import { + Button, + Card, + Col, + Grid, + Icon, + Modal, + Page, + PaneContainer, + Row, + SelectField, + Tag, + TextField, + Variant +} from '../../src'; import Container from '../../src/components/Container/Container'; import FormGroup from '../../src/components/Form/Group'; import FormLabel from '../../src/components/Form/Label'; import FormMessage from '../../src/components/Form/Message'; import { Tooltip } from '../../src/components/Tooltip'; +import Pane from '../../src/components/Panel/Pane'; const TestControllable = () => { const [value, setValue] = useState(''); @@ -106,1997 +121,2012 @@ const TestModals = () => { }; ReactDom.render( - - - - - - - - - -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- -

Button colors

- -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +

Button colors

+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ - top - - - - + + - right - - - - + + - bottom - - - - + + - left - - -
- - - - - - - - - - - Col 1/1 - - - Col 1/2 - Col 2/2 - + + + + + + + + + + + + + + Col 1/1 + + + Col 1/2 + Col 2/2 + - - Col 1/3 - Col 2/3 - Col 3/4 - + + Col 1/3 + Col 2/3 + Col 3/4 + - - Col 1/3 - Col 2/3 - Col 3/4 - + + Col 1/3 + Col 2/3 + Col 3/4 + - - Col 1/4 - Col 2/4 - Col 3/4 - Col 4/4 - - - - - - - - - - -
Standard input
- Username - - + + Col 1/4 + Col 2/4 + Col 3/4 + Col 4/4 + + + + + + + + + + +
Standard input
+ Username + + - -
Input with floating label
- - + +
Input with floating label
+ + - -
Input with default value
- - + +
Input with default value
+ + - -
Input with actions
- { + +
Input with actions
+ { - }} - actions={[ - - ]} - valid={true} - /> - + }} + actions={[ + + ]} + valid={true} + /> + - -
Invalid input
- - - Input is invalid - - + +
Invalid input
+ + + Input is invalid + + - -
Valid input
- - - -
Valid input
- - - - - - - - - - - - - - - test text - Primary - Danger - Rood - Roze - Paars - Diep-paars - Indigo - Blauw - Lichtblauw - Teal - Groen - Lichtgroen - Limoen - Geel - Amber - Oranje - Bruin - Grijs - Blauwgrijs - - - - - - - - - - - - - - - -
Activity
- - - - - -
Alert circle
- - - - - -
Alert triangle
- - - - - -
Archive
- - - - - -
Arrow left
- - - - - -
Arrow circle down
- - - - - -
Arrow circle left
- - - - - -
Arrow circle right
- - - - - -
Arrow circle up
- - - - - -
Sort down
- - - - - -
Sort down
- - - - - -
Arrow right
- - - - - -
Arrow alt left
- - - - - -
Arrow alt down
- - - - - -
Arrow alt right
- - - - - -
Arrow alt up
- - - - - -
Sort left
- - - - - -
Sort right
- - - - - -
Sort up
- - - - - -
Arrow up
- - - - - -
chevron-double down
- - - - - -
chevron-double left
- - - - - -
chevron-double right
- - - - - -
chevron-double up
- - - - - -
At
- - - - - -
Attach 2
- - - - - -
Attach
- - - - - -
Award
- - - - - -
Backspace
- - - - - -
Bar chart 2
- - - - - -
Bar chart
- - - - - -
Battery
- - - - - -
Behance
- - - - - -
Bell off
- - - - - -
Bell
- - - - - -
Bluetooth
- - - - - -
Book open
- - - - - -
Book
- - - - - -
Bookmark
- - - - - -
Briefcase
- - - - - -
Browser
- - - - - -
Brush
- - - - - -
Bulb
- - - - - -
Calendar
- - - - - -
Camera
- - - - - -
Car
- - - - - -
Cast
- - - - - -
Charging
- - - - - -
Checkmark circle 2
- - - - - -
Checkmark circle
- - - - - -
Checkmark
- - - - - -
Checkmark square 2
- - - - - -
Checkmark square
- - - - - -
Chevron down
- - - - - -
Chevron left
- - - - - -
Chevron right
- - - - - -
Chevron up
- - - - - -
Clipboard
- - - - - -
Clock
- - - - - -
Close circle
- - - - - -
Close
- - - - - -
Close square
- - - - - -
Cloud download
- - - - - -
Cloud upload
- - - - - -
Code download
- - - - - -
Code
- - - - - -
Collapse
- - - - - -
Color palette
- - - - - -
Color picker
- - - - - -
Compass
- - - - - -
Copy
- - - - - -
Corner down left
- - - - - -
Corner down right
- - - - - -
Corner left down
- - - - - -
Corner left up
- - - - - -
Corner right down
- - - - - -
Corner right up
- - - - - -
Corner up left
- - - - - -
Corner up right
- - - - - -
Credit card
- - - - - -
Crop
- - - - - -
Cube
- - - - - -
Diagonal arrow left down
- - - - - -
Diagonal arrow left up
- - - - - -
Diagonal arrow right down
- - - - - -
Diagonal arrow right up
- - - - - -
Done all
- - - - - -
Download
- - - - - -
Droplet off
- - - - - -
Droplet
- - - - - -
Edit 2
- - - - - -
Edit
- - - - - -
Email
- - - - - -
Expand
- - - - - -
External link
- - - - - -
Eye off 2
- - - - - -
Eye off
- - - - - -
Eye
- - - - - -
Facebook
- - - - - -
File add
- - - - - -
File
- - - - - -
File remove
- - - - - -
File text
- - - - - -
Film
- - - - - -
Flag
- - - - - -
Flash off
- - - - - -
Flash
- - - - - -
Flip 2
- - - - - -
Flip
- - - - - -
Folder add
- - - - - -
Folder
- - - - - -
Folder remove
- - - - - -
Funnel
- - - - - -
Gift
- - - - - -
Github
- - - - - -
Globe 2
- - - - - -
Globe
- - - - - -
Google
- - - - - -
Grid
- - - - - -
Hard drive
- - - - - -
Hash
- - - - - -
Headphones
- - - - - -
Heart
- - - - - -
Home
- - - - - -
Image
- - - - - -
Inbox
- - - - - -
Info
- - - - - -
Keypad
- - - - - -
Layers
- - - - - -
Layout
- - - - - -
Link 2
- - - - - -
Link
- - - - - -
Linkedin
- - - - - -
List
- - - - - -
Loader
- - - - - -
Lock
- - - - - -
Log in
- - - - - -
Log out
- - - - - -
Map
- - - - - -
Maximize
- - - - - -
Menu 2
- - - - - -
Menu arrow
- - - - - -
Menu
- - - - - -
Message circle
- - - - - -
Message square
- - - - - -
Mic off
- - - - - -
Mic
- - - - - -
Minimize
- - - - - -
Minus circle
- - - - - -
Minus
- - - - - -
Minus square
- - - - - -
Monitor
- - - - - -
Moon
- - - - - -
More horizontal
- - - - - -
More vertical
- - - - - -
Move
- - - - - -
Music
- - - - - -
Navigation 2
- - - - - -
Navigation
- - - - - -
Npm
- - - - - -
Options 2
- - - - - -
Options
- - - - - -
Pantone
- - - - - -
Paper plane
- - - - - -
Pause circle
- - - - - -
People
- - - - - -
Percent
- - - - - -
user add
- - - - - -
user delete
- - - - - -
user done
- - - - - -
user
- - - - - -
user remove
- - - - - -
Phone call
- - - - - -
Phone missed
- - - - - -
Phone off
- - - - - -
Phone
- - - - - -
Pie chart
- - - - - -
Pin
- - - - - -
Play circle
- - - - - -
Plus circle
- - - - - -
Plus
- - - - - -
Plus square
- - - - - -
Power
- - - - - -
Pricetags
- - - - - -
Printer
- - - - - -
Question mark circle
- - - - - -
Question mark
- - - - - -
Radio button off
- - - - - -
Radio button on
- - - - - -
Radio
- - - - - -
Recording
- - - - - -
Refresh
- - - - - -
Repeat
- - - - - -
Rewind left
- - - - - -
Rewind right
- - - - - -
Save
- - - - - -
Scissors
- - - - - -
Search
- - - - - -
Settings 2
- - - - - -
Settings
- - - - - -
Shake
- - - - - -
Share
- - - - - -
Shield off
- - - - - -
Shield
- - - - - -
Shopping bag
- - - - - -
Shopping cart
- - - - - -
Shuffle 2
- - - - - -
Shuffle
- - - - - -
Step backwards
- - - - - -
Step forward
- - - - - -
Slash
- - - - - -
Smartphone
- - - - - -
Smiling face
- - - - - -
Speaker
- - - - - -
Square
- - - - - -
Star
- - - - - -
Stop circle
- - - - - -
Sun
- - - - - -
Swap
- - - - - -
Sync
- - - - - -
Text
- - - - - -
Thermometer minus
- - - - - -
Thermometer
- - - - - -
Thermometer plus
- - - - - -
Toggle left
- - - - - -
Toggle right
- - - - - -
Trash 2
- - - - - -
Trash
- - - - - -
Trending down
- - - - - -
Trending up
- - - - - -
Tv
- - - - - -
Twitter
- - - - - -
Umbrella
- - - - - -
Undo
- - - - - -
Unlock
- - - - - -
Upload
- - - - - -
Video off
- - - - - -
Video
- - - - - -
Volume down
- - - - - -
Volume mute
- - - - - -
Volume off
- - - - - -
Volume up
- - - - - -
Wifi off
- - - - - -
Wifi
- - - - - - - - , + +
Valid input
+ + + +
Valid input
+ + + + + + + + + + + + + + + test text + Primary + Danger + Rood + Roze + Paars + Diep-paars + Indigo + Blauw + Lichtblauw + Teal + Groen + Lichtgroen + Limoen + Geel + Amber + Oranje + Bruin + Grijs + Blauwgrijs + + + + + + + + + + + + + + + +
Activity
+ + + + + +
Alert circle
+ + + + + +
Alert triangle
+ + + + + +
Archive
+ + + + + +
Arrow left
+ + + + + +
Arrow circle down
+ + + + + +
Arrow circle left
+ + + + + +
Arrow circle right
+ + + + + +
Arrow circle up
+ + + + + +
Sort down
+ + + + + +
Sort down
+ + + + + +
Arrow right
+ + + + + +
Arrow alt left
+ + + + + +
Arrow alt down
+ + + + + +
Arrow alt right
+ + + + + +
Arrow alt up
+ + + + + +
Sort left
+ + + + + +
Sort right
+ + + + + +
Sort up
+ + + + + +
Arrow up
+ + + + + +
chevron-double down
+ + + + + +
chevron-double left
+ + + + + +
chevron-double right
+ + + + + +
chevron-double up
+ + + + + +
At
+ + + + + +
Attach 2
+ + + + + +
Attach
+ + + + + +
Award
+ + + + + +
Backspace
+ + + + + +
Bar chart 2
+ + + + + +
Bar chart
+ + + + + +
Battery
+ + + + + +
Behance
+ + + + + +
Bell off
+ + + + + +
Bell
+ + + + + +
Bluetooth
+ + + + + +
Book open
+ + + + + +
Book
+ + + + + +
Bookmark
+ + + + + +
Briefcase
+ + + + + +
Browser
+ + + + + +
Brush
+ + + + + +
Bulb
+ + + + + +
Calendar
+ + + + + +
Camera
+ + + + + +
Car
+ + + + + +
Cast
+ + + + + +
Charging
+ + + + + +
Checkmark circle 2
+ + + + + +
Checkmark circle
+ + + + + +
Checkmark
+ + + + + +
Checkmark square 2
+ + + + + +
Checkmark square
+ + + + + +
Chevron down
+ + + + + +
Chevron left
+ + + + + +
Chevron right
+ + + + + +
Chevron up
+ + + + + +
Clipboard
+ + + + + +
Clock
+ + + + + +
Close circle
+ + + + + +
Close
+ + + + + +
Close square
+ + + + + +
Cloud download
+ + + + + +
Cloud upload
+ + + + + +
Code download
+ + + + + +
Code
+ + + + + +
Collapse
+ + + + + +
Color palette
+ + + + + +
Color picker
+ + + + + +
Compass
+ + + + + +
Copy
+ + + + + +
Corner down left
+ + + + + +
Corner down right
+ + + + + +
Corner left down
+ + + + + +
Corner left up
+ + + + + +
Corner right down
+ + + + + +
Corner right up
+ + + + + +
Corner up left
+ + + + + +
Corner up right
+ + + + + +
Credit card
+ + + + + +
Crop
+ + + + + +
Cube
+ + + + + +
Diagonal arrow left down
+ + + + + +
Diagonal arrow left up
+ + + + + +
Diagonal arrow right down
+ + + + + +
Diagonal arrow right up
+ + + + + +
Done all
+ + + + + +
Download
+ + + + + +
Droplet off
+ + + + + +
Droplet
+ + + + + +
Edit 2
+ + + + + +
Edit
+ + + + + +
Email
+ + + + + +
Expand
+ + + + + +
External link
+ + + + + +
Eye off 2
+ + + + + +
Eye off
+ + + + + +
Eye
+ + + + + +
Facebook
+ + + + + +
File add
+ + + + + +
File
+ + + + + +
File remove
+ + + + + +
File text
+ + + + + +
Film
+ + + + + +
Flag
+ + + + + +
Flash off
+ + + + + +
Flash
+ + + + + +
Flip 2
+ + + + + +
Flip
+ + + + + +
Folder add
+ + + + + +
Folder
+ + + + + +
Folder remove
+ + + + + +
Funnel
+ + + + + +
Gift
+ + + + + +
Github
+ + + + + +
Globe 2
+ + + + + +
Globe
+ + + + + +
Google
+ + + + + +
Grid
+ + + + + +
Hard drive
+ + + + + +
Hash
+ + + + + +
Headphones
+ + + + + +
Heart
+ + + + + +
Home
+ + + + + +
Image
+ + + + + +
Inbox
+ + + + + +
Info
+ + + + + +
Keypad
+ + + + + +
Layers
+ + + + + +
Layout
+ + + + + +
Link 2
+ + + + + +
Link
+ + + + + +
Linkedin
+ + + + + +
List
+ + + + + +
Loader
+ + + + + +
Lock
+ + + + + +
Log in
+ + + + + +
Log out
+ + + + + +
Map
+ + + + + +
Maximize
+ + + + + +
Menu 2
+ + + + + +
Menu arrow
+ + + + + +
Menu
+ + + + + +
Message circle
+ + + + + +
Message square
+ + + + + +
Mic off
+ + + + + +
Mic
+ + + + + +
Minimize
+ + + + + +
Minus circle
+ + + + + +
Minus
+ + + + + +
Minus square
+ + + + + +
Monitor
+ + + + + +
Moon
+ + + + + +
More horizontal
+ + + + + +
More vertical
+ + + + + +
Move
+ + + + + +
Music
+ + + + + +
Navigation 2
+ + + + + +
Navigation
+ + + + + +
Npm
+ + + + + +
Options 2
+ + + + + +
Options
+ + + + + +
Pantone
+ + + + + +
Paper plane
+ + + + + +
Pause circle
+ + + + + +
People
+ + + + + +
Percent
+ + + + + +
user add
+ + + + + +
user delete
+ + + + + +
user done
+ + + + + +
user
+ + + + + +
user remove
+ + + + + +
Phone call
+ + + + + +
Phone missed
+ + + + + +
Phone off
+ + + + + +
Phone
+ + + + + +
Pie chart
+ + + + + +
Pin
+ + + + + +
Play circle
+ + + + + +
Plus circle
+ + + + + +
Plus
+ + + + + +
Plus square
+ + + + + +
Power
+ + + + + +
Pricetags
+ + + + + +
Printer
+ + + + + +
Question mark circle
+ + + + + +
Question mark
+ + + + + +
Radio button off
+ + + + + +
Radio button on
+ + + + + +
Radio
+ + + + + +
Recording
+ + + + + +
Refresh
+ + + + + +
Repeat
+ + + + + +
Rewind left
+ + + + + +
Rewind right
+ + + + + +
Save
+ + + + + +
Scissors
+ + + + + +
Search
+ + + + + +
Settings 2
+ + + + + +
Settings
+ + + + + +
Shake
+ + + + + +
Share
+ + + + + +
Shield off
+ + + + + +
Shield
+ + + + + +
Shopping bag
+ + + + + +
Shopping cart
+ + + + + +
Shuffle 2
+ + + + + +
Shuffle
+ + + + + +
Step backwards
+ + + + + +
Step forward
+ + + + + +
Slash
+ + + + + +
Smartphone
+ + + + + +
Smiling face
+ + + + + +
Speaker
+ + + + + +
Square
+ + + + + +
Star
+ + + + + +
Stop circle
+ + + + + +
Sun
+ + + + + +
Swap
+ + + + + +
Sync
+ + + + + +
Text
+ + + + + +
Thermometer minus
+ + + + + +
Thermometer
+ + + + + +
Thermometer plus
+ + + + + +
Toggle left
+ + + + + +
Toggle right
+ + + + + +
Trash 2
+ + + + + +
Trash
+ + + + + +
Trending down
+ + + + + +
Trending up
+ + + + + +
Tv
+ + + + + +
Twitter
+ + + + + +
Umbrella
+ + + + + +
Undo
+ + + + + +
Unlock
+ + + + + +
Upload
+ + + + + +
Video off
+ + + + + +
Video
+ + + + + +
Volume down
+ + + + + +
Volume mute
+ + + + + +
Volume off
+ + + + + +
Volume up
+ + + + + +
Wifi off
+ + + + + +
Wifi
+ + + + + + + + + , document.getElementById('root') );