feat: add icons (#58)

dequelabs · Aug 5, 2020 · 159b747 · 159b747
1 parent 41b179d
commit 159b747
Show file tree

Hide file tree

Showing 73 changed files with 1,558 additions and 504 deletions.
diff --git a/docs/Demo/index.js b/docs/Demo/index.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import jsxStringify from 'react-element-to-jsx-string';
-import { Code } from '../../packages/react/src';
+import { Code } from '@deque/cauldron-react';
 import './index.css';
 
 const stringifyConfig = {

diff --git a/docs/Home/index.js b/docs/Home/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Code } from '../../packages/react/src';
+import { Code } from '@deque/cauldron-react';
 
 const Home = () => (
   <div>

diff --git a/docs/index.js b/docs/index.js
@@ -16,12 +16,12 @@ import {
   OptionsMenuList,
   TopBarMenu,
   Icon
-} from '../packages/react/src';
+} from '@deque/cauldron-react';
 import logo from './assets/img/logo.svg';
 
 // styles
 import '../packages/styles';
-import '../packages/react/src/index.css';
+import '@deque/cauldron-react/cauldron.css';
 import './index.css';
 
 const componentsList = [
@@ -42,7 +42,8 @@ const componentsList = [
   'Card',
   'ExpandCollapsePanel',
   'TextField',
-  'Link'
+  'Link',
+  'Icon'
 ].sort();
 
 class App extends Component {
@@ -139,7 +140,7 @@ class App extends Component {
                   ref={this.topBarTrigger}
                   aria-expanded={show}
                 >
-                  <Icon type="fa-bars" />
+                  <Icon type="gears" />
                 </button>
               </TopBarTrigger>
               <TopBarItem>
@@ -158,10 +159,10 @@ class App extends Component {
               >
                 <div className="TopBar__item--icon">
                   {thin ? (
-                    <Icon type="fa-cog" label="Settings" />
+                    <Icon type="gears" label="Settings" />
                   ) : (
                     <Fragment>
-                      <Icon type="fa-cog" />
+                      <Icon type="gears" />
                       <div>Settings</div>
                     </Fragment>
                   )}

diff --git a/docs/patterns/components/Alert/index.js b/docs/patterns/components/Alert/index.js
@@ -1,10 +1,5 @@
 import React, { Component } from 'react';
-import {
-  Button,
-  Alert,
-  AlertActions,
-  Code
-} from '../../../../packages/react/src/';
+import { Button, Alert, AlertActions, Code } from '@deque/cauldron-react/';
 
 export default class Demo extends Component {
   constructor() {

diff --git a/docs/patterns/components/Button/index.js b/docs/patterns/components/Button/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Demo from '../../../Demo';
-import { Button } from '../../../../packages/react/src/';
+import { Button } from '@deque/cauldron-react/';
 import { children, className } from '../../../props';
 
 const ButtonDemo = () => (

diff --git a/docs/patterns/components/Card/index.js b/docs/patterns/components/Card/index.js
@@ -5,7 +5,7 @@ import {
   CardContent,
   CardFooter,
   Code
-} from '../../../../packages/react/src/';
+} from '@deque/cauldron-react/';
 import './index.css';
 
 const Demo = () => (

diff --git a/docs/patterns/components/Checkbox/index.js b/docs/patterns/components/Checkbox/index.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Demo from '../../../Demo';
 import { className } from '../../../props';
-import { Checkbox } from '../../../../packages/react/src/';
+import { Checkbox } from '@deque/cauldron-react/';
 
 export default class CheckboxDemo extends Component {
   state = {

diff --git a/docs/patterns/components/ClickOutsideListener/index.js b/docs/patterns/components/ClickOutsideListener/index.js
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  ClickOutsideListener,
-  Code,
-  Button
-} from '../../../../packages/react/src/';
+import { ClickOutsideListener, Code, Button } from '@deque/cauldron-react/';
 
 const Demo = () => (
   <div>

diff --git a/docs/patterns/components/ExpandCollapsePanel/index.js b/docs/patterns/components/ExpandCollapsePanel/index.js
@@ -3,7 +3,7 @@ import {
   ExpandCollapsePanel,
   PanelTrigger,
   Code
-} from '../../../../packages/react/src/';
+} from '@deque/cauldron-react/';
 
 const ControlledExpandCollapse = () => {
   const [open, setOpen] = useState(false);

diff --git a/docs/patterns/components/Icon/index.js b/docs/patterns/components/Icon/index.js
@@ -0,0 +1,131 @@
+import React, { Component } from 'react';
+import Demo from '../../../Demo';
+import { Icon, Code } from '@deque/cauldron-react/';
+import { children, className } from '../../../props';
+
+export default class IconDemo extends Component {
+  render() {
+    return (
+      <div>
+        <Demo
+          component={Icon}
+          states={[
+            {
+              type: 'arrow-left'
+            },
+            {
+              type: 'arrow-right'
+            },
+            {
+              type: 'arrow-up'
+            },
+            {
+              type: 'arrow-down'
+            },
+            {
+              type: 'bolt'
+            },
+            {
+              type: 'checkbox-checked'
+            },
+            {
+              type: 'checkbox-unchecked'
+            },
+            {
+              type: 'chevron-double-right'
+            },
+            {
+              type: 'chevron-double-left'
+            },
+            {
+              type: 'chevron-double-up'
+            },
+            {
+              type: 'chevron-double-down'
+            },
+            {
+              type: 'chevron-up'
+            },
+            {
+              type: 'chevron-down'
+            },
+            {
+              type: 'chevron-left'
+            },
+            {
+              type: 'chevron-right'
+            },
+            {
+              type: 'close'
+            },
+            {
+              type: 'code'
+            },
+            {
+              type: 'eye'
+            },
+            {
+              type: 'exchange'
+            },
+            {
+              type: 'external-link'
+            },
+            {
+              type: 'flag'
+            },
+            {
+              type: 'gears'
+            },
+            {
+              type: 'info-circle'
+            },
+            {
+              type: 'kabob'
+            },
+            {
+              type: 'menu'
+            },
+            {
+              type: 'plus'
+            },
+            {
+              type: 'question-circle'
+            },
+            {
+              type: 'radio-checked'
+            },
+            {
+              type: 'radio-unchecked'
+            },
+            {
+              type: 'run-again'
+            },
+            {
+              type: 'star'
+            },
+            {
+              type: 'sun'
+            },
+            {
+              type: 'trash'
+            },
+            {
+              type: 'target'
+            }
+          ].sort((a, b) => a.type.localeCompare(b.type))}
+          propDocs={{
+            className,
+            label: {
+              type: 'string'
+            },
+            type: {
+              type: 'string',
+              required: true
+            }
+          }}
+        />
+      </div>
+    );
+  }
+}
+IconDemo.displayName = 'IconDemo';
diff --git a/docs/patterns/components/Layout/index.js b/docs/patterns/components/Layout/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Code } from '../../../../packages/react/src/';
+import { Code } from '@deque/cauldron-react/';
 
 export default function Layout() {
   return (

diff --git a/docs/patterns/components/Link/index.js b/docs/patterns/components/Link/index.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Demo from '../../../Demo';
-import { Link, Code } from '../../../../packages/react/src/';
+import { Link, Code } from '@deque/cauldron-react/';
 import { children, className } from '../../../props';
 
 export default class LinkDemo extends Component {

diff --git a/docs/patterns/components/Loader/index.js b/docs/patterns/components/Loader/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Demo from '../../../Demo';
-import { Loader } from '../../../../packages/react/src/';
+import { Loader } from '@deque/cauldron-react/';
 import { className } from '../../../props';
 
 const LoaderDemo = () => (

diff --git a/docs/patterns/components/Modal/index.js b/docs/patterns/components/Modal/index.js
@@ -5,7 +5,7 @@ import {
   ModalContent,
   ModalFooter,
   Code
-} from '../../../../packages/react/src/';
+} from '@deque/cauldron-react/';
 
 export default class Demo extends Component {
   constructor() {

diff --git a/docs/patterns/components/OptionsMenu/index.js b/docs/patterns/components/OptionsMenu/index.js
@@ -5,7 +5,7 @@ import {
   OptionsMenuTrigger,
   Icon,
   Code
-} from '../../../../packages/react/src/';
+} from '@deque/cauldron-react/';
 
 export default class Demo extends Component {
   render() {
@@ -18,7 +18,7 @@ export default class Demo extends Component {
           align="left"
           trigger={triggerProps => (
             <OptionsMenuTrigger {...triggerProps}>
-              <Icon type="fa-ellipsis-v" label="Options" />
+              <Icon type="kabob" label="Options" />
             </OptionsMenuTrigger>
           )}
         >
@@ -66,7 +66,7 @@ class Demo extends Component {
           align="left"
           trigger={triggerProps => (
             <OptionsMenuTrigger {...triggerProps}>
-              <Icon type="fa-ellipsis-v" label="Options" />
+              <Icon type="kabob" label="Options" />
             </OptionsMenuTrigger>
           )}
         >

diff --git a/docs/patterns/components/Pointout/index.js b/docs/patterns/components/Pointout/index.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Pointout, Code } from '../../../../packages/react/src';
+import { Pointout, Code } from '@deque/cauldron-react';
 
 const Demo = () => {
   const buttonRef = React.createRef();

diff --git a/docs/patterns/components/RadioGroup/index.js b/docs/patterns/components/RadioGroup/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { RadioGroup, Code } from '../../../../packages/react/src/';
+import { RadioGroup, Code } from '@deque/cauldron-react/';
 
 export default class Demo extends Component {
   render() {

diff --git a/docs/patterns/components/Select/index.js b/docs/patterns/components/Select/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Select, Code } from '../../../../packages/react/lib/';
+import { Select, Code } from '@deque/cauldron-react/';
 import '../../../../packages/styles/select.css';
 import './index.css';
 

diff --git a/docs/patterns/components/TextField/index.js b/docs/patterns/components/TextField/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { TextField, Button, Code } from '../../../../packages/react/src/';
+import { TextField, Button, Code } from '@deque/cauldron-react/';
 import './index.css';
 
 export default class Demo extends Component {

diff --git a/docs/patterns/components/Toast/index.js b/docs/patterns/components/Toast/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Button, Toast, Link } from '../../../../packages/react/src/';
+import { Button, Toast, Link } from '@deque/cauldron-react/';
 import DemoComponent from '../../../Demo';
 import { children } from '../../../props';
 

diff --git a/docs/patterns/components/Tooltip/index.js b/docs/patterns/components/Tooltip/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip, Button, Code } from '../../../../packages/react/src/';
+import { Tooltip, Button, Code } from '@deque/cauldron-react/';
 import './index.css';
 
 const Demo = () => (

diff --git a/docs/patterns/components/TopBarMenu/index.js b/docs/patterns/components/TopBarMenu/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Code } from '../../../../packages/react/src/';
+import { Button, Code } from '@deque/cauldron-react/';
 
 class TopBarMenuDemo extends React.Component {
   buttonRef = React.createRef();

diff --git a/package.json b/package.json
@@ -50,15 +50,14 @@
     "postcss-loader": "^3.0.0",
     "prettier": "^1.19.1",
     "proxyquire": "^1.8.0",
-    "react": "^16.6.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-element-to-jsx-string": "^14.0.2",
     "react-helmet": "^5.2.1",
     "react-router-dom": "^4.2.2",
     "standard-version": "^8.0.1",
     "style-loader": "^0.19.0",
     "terser-webpack-plugin": "^2.3.5",
-    "ts-loader": "^7.0.2",
     "ts-node": "^8.9.1",
     "typescript": "^3.7.5",
     "webpack": "^4.43.0",