Merge pull request #1729 from cozy/svgr-icons

.travis.yml

@@ -16,7 +16,7 @@ script:
   - yarn screenshots --mode react --viewport 300x600 --no-empty-screenshot-dir
   - yarn screenshots --mode stack --no-empty-screenshot-dir
   - yarn screenshots --mode kss --no-empty-screenshot-dir
-  - yarn argos --token $ARGOS_TOKEN --branch $TRAVIS_BRANCH --commit $TRAVIS_COMMIT
+  - yarn argos:upload --token $ARGOS_TOKEN --branch $TRAVIS_BRANCH --commit $TRAVIS_COMMIT
 deploy:
   - provider: script
     repo: cozy/cozy-ui

docs/components/SectionsRenderer.jsx

@@ -7,7 +7,6 @@ export default class SectionsRenderer extends Component {
     return (
       <>
         <DefaultSectionsRenderer>{this.props.children}</DefaultSectionsRenderer>
-        <IconSprite />
       </>
     )
   }

package.json

@@ -17,7 +17,7 @@
   },
   "homepage": "https://github.com/cozy/cozy-ui",
   "scripts": {
-    "argos": "argos upload screenshots/",
+    "argos:upload": "argos upload screenshots/",
     "stylus-build": "stylus -c --include stylus  --use ./node_modules/autoprefixer-stylus",
     "build:css:all": "yarn build:css && yarn build:css:utils",
     "build:css": "env CSSMODULES=false yarn run stylus-build -o dist/cozy-ui.min.css stylus/cozy-ui/build.styl",
@@ -75,7 +75,7 @@
     "@svgr/cli": "^5.4.0",
     "@testing-library/react": "^9.5.0",
     "@testing-library/react-hooks": "^3.2.1",
-    "argos-cli": "0.1.3",
+    "argos-cli": "^0.3.3",
     "autoprefixer-stylus": "1.0.0",
     "babel-loader": "8.1.0",
     "babel-plugin-css-modules-transform": "1.6.2",

react/ActionMenu/Readme.md

@@ -10,6 +10,9 @@ import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Typography from "cozy-ui/transpiled/react/Typography";
 
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
+import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
+
 class ExempleMenu extends React.Component {
   constructor(props){
     super(props);
@@ -35,9 +38,9 @@ class ExempleMenu extends React.Component {
         anchorElRef={this.ref}
         autoclose={true}
         onClose={this.hideMenu}>
-        <ActionMenuItem left={<Icon icon='file' />} right={<Icon icon='warning' color="var(--errorColor)" />}>Item 1</ActionMenuItem>
+        <ActionMenuItem left={<Icon icon={FileIcon} />} right={<Icon icon={WarningIcon} color="var(--errorColor)" />}>Item 1</ActionMenuItem>
         <ActionMenuItem left={<ActionMenuRadio />}>Item 2</ActionMenuItem>
-        <ActionMenuItem left={<Icon icon='file' />}>
+        <ActionMenuItem left={<Icon icon={FileIcon} />}>
           <Typography variant="body1" gutterBottom>
             Item 3
           </Typography>
@@ -66,6 +69,9 @@ import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from '../Icon';
 import Filename from '../Filename';
 
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
+import RightIcon from "cozy-ui/transpiled/react/Icons/Right";
+
 initialState = { menuDisplayed: isTesting() };
 
 const showMenu = () => setState({ menuDisplayed: true });
@@ -77,11 +83,11 @@ const hideMenu = () => setState({ menuDisplayed: false });
     <ActionMenu
       onClose={hideMenu}>
       <ActionMenuHeader>
-        <Filename icon="file" filename="my_awesome_paper" extension=".pdf" />
+        <Filename icon={FileIcon} filename="my_awesome_paper" extension=".pdf" />
       </ActionMenuHeader>
-      <ActionMenuItem left={<Icon icon='file' />}>Item 1</ActionMenuItem>
-      <ActionMenuItem left={<Icon icon='right' />}>Item 2</ActionMenuItem>
-      <ActionMenuItem left={<Icon icon='file' />}>Item 3</ActionMenuItem>
+      <ActionMenuItem left={<Icon icon={FileIcon} />}>Item 1</ActionMenuItem>
+      <ActionMenuItem left={<Icon icon={RightIcon} />}>Item 2</ActionMenuItem>
+      <ActionMenuItem left={<Icon icon={FileIcon} />}>Item 3</ActionMenuItem>
   </ActionMenu>}
 </div>
 ```
@@ -93,6 +99,7 @@ import ActionMenu, { ActionMenuItem, ActionMenuHeader } from './index';
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from '../Icon';
 import Filename from '../Filename';
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
 
 initialState = { menuDisplayed: isTesting() };
 
@@ -105,9 +112,9 @@ const hideMenu = () => setState({ menuDisplayed: false });
     <ActionMenu
       onClose={hideMenu}>
       <ActionMenuHeader>
-        <Filename icon="file" filename="my_awesome_paper" extension=".pdf" />
+        <Filename icon={FileIcon} filename="my_awesome_paper" extension=".pdf" />
       </ActionMenuHeader>
-      <ActionMenuItem onClick={() => alert('click')}left={<Icon icon='file' />}>Item 1</ActionMenuItem>
+      <ActionMenuItem onClick={() => alert('click')}left={<Icon icon={FileIcon} />}>Item 1</ActionMenuItem>
   </ActionMenu>}
 </div>
 ```
@@ -121,6 +128,8 @@ import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
+
 initialState = { menuDisplayed: isTesting() };
 
 const showMenu = () => setState({ menuDisplayed: true });
@@ -135,7 +144,7 @@ const anchorRef = React.createRef();
       anchorElRef={anchorRef}
       popperOptions={{ placement: 'bottom-end'}}
       onClose={hideMenu}>
-      <ActionMenuItem left={<Icon icon='file' />}>Item 1</ActionMenuItem>
+      <ActionMenuItem left={<Icon icon={FileIcon} />}>Item 1</ActionMenuItem>
   </ActionMenu>}
 </div>
 ```
@@ -153,6 +162,8 @@ import {
 } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 import Button from 'cozy-ui/transpiled/react/Button'
 
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
+
 initialState = { menuDisplayed: isTesting(),  modalOpened: isTesting() };
 
 const showMenu = () => setState({ menuDisplayed: true });
@@ -171,7 +182,7 @@ const onClose = () => setState({ modalOpened: !state.modalOpened });
           popperOptions={{ placement: 'bottom-end'}}
           onClose={hideMenu}>
             <ActionMenuItem
-              left={<Icon icon='file' />}
+              left={<Icon icon={FileIcon} />}
               onClick={() => setState({ modalOpened: !state.modalOpened })}>
                 Item 1
             </ActionMenuItem>

react/Avatar/Readme.md

@@ -3,15 +3,18 @@
 ```jsx
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
-import Icon from 'cozy-ui/transpiled/react/Icon'; 
+import Icon from 'cozy-ui/transpiled/react/Icon';
+
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
+import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
 
 <div className="u-flex">
   <Avatar />
   <Avatar text="CD" />
   <Avatar image={cozyLogo} />
-  <Avatar icon="link" />
+  <Avatar icon={LinkIcon} />
   <Avatar text="CD" style={{color: 'black', backgroundColor: 'var(--seafoamGreen)' }} />
-  <Avatar icon={<Icon icon='warning' />} />
+  <Avatar icon={<Icon icon={WarningIcon} />} />
 </div>
 ```
 
@@ -21,11 +24,13 @@ import Icon from 'cozy-ui/transpiled/react/Icon';
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
+
 <div className="u-flex">
   <Avatar disabled />
   <Avatar text="CD" disabled />
   <Avatar image={cozyLogo} disabled />
-  <Avatar icon="link" disabled />
+  <Avatar icon={LinkIcon} disabled />
   <Avatar text="CD" disabled style={{color: 'black', backgroundColor: 'var(--seafoamGreen)' }} />
 </div>
 ```
@@ -35,6 +40,7 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar';
 ```jsx
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
 const style={
   marginLeft: '-1rem'
 };
@@ -43,11 +49,11 @@ const style={
   <Avatar style={style} />
   <Avatar text="CD" style={style} />
   <Avatar image={cozyLogo} style={style} />
-  <Avatar icon="link" style={style} />
+  <Avatar icon={LinkIcon} style={style} />
   <Avatar disabled style={style} />
   <Avatar text="CD" disabled style={style} />
   <Avatar image={cozyLogo} disabled style={style} />
-  <Avatar icon="link" disabled style={style}/>
+  <Avatar icon={LinkIcon} disabled style={style}/>
 </div>
 ```
 
@@ -59,43 +65,45 @@ The size can also be specifically defined using a number of pixels.
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
+
 <div>
   <div className="u-flex">
     <Avatar size="xsmall" />
     <Avatar text="CD" size="xsmall" />
     <Avatar image={cozyLogo} size="xsmall" />
-    <Avatar icon="link" size="xsmall" />
+    <Avatar icon={LinkIcon} size="xsmall" />
   </div>
   <div className="u-flex">
     <Avatar size="small" />
     <Avatar text="CD" size="small" />
     <Avatar image={cozyLogo} size="small" />
-    <Avatar icon="link" size="small" />
+    <Avatar icon={LinkIcon} size="small" />
   </div>
   <div className="u-flex">
     <Avatar size="medium" />
     <Avatar text="CD" size="medium" />
     <Avatar image={cozyLogo} size="medium" />
-    <Avatar icon="link" size="medium" />
+    <Avatar icon={LinkIcon} size="medium" />
   </div>
   <div className="u-flex">
     <Avatar size="large" />
     <Avatar text="CD" size="large" />
     <Avatar image={cozyLogo} size="large" />
-    <Avatar icon="link" size="large" />
+    <Avatar icon={LinkIcon} size="large" />
   </div>
   <div className="u-flex">
     <Avatar size="xlarge" />
     <Avatar text="CD" size="xlarge" />
     <Avatar image={cozyLogo} size="xlarge" />
-    <Avatar icon="link" size="xlarge" />
+    <Avatar icon={LinkIcon} size="xlarge" />
   </div>
   <hr />
   <div className="u-flex">
     <Avatar size={24} />
     <Avatar text="CD" size={24} />
     <Avatar image={cozyLogo} size={24} />
-    <Avatar icon="link" size={24} />
+    <Avatar icon={LinkIcon} size={24} />
   </div>
 </div>
 ```

react/Avatar/index.jsx

@@ -6,6 +6,7 @@ import assign from 'lodash/assign'
 import palette from '../palette'
 import styles from './styles.styl'
 import Icon, { iconPropType } from '../Icon'
+import PeopleIcon from '../Icons/People'
 import { createSizeStyle } from '../Circle'
 
 const nameToColor = (name = '') => {
@@ -90,7 +91,7 @@ Avatar.defaultProps = {
   size: 'medium',
   className: '',
   disabled: false,
-  icon: 'people',
+  icon: PeopleIcon,
   style: {}
 }
 

react/Badge/Readme.md

@@ -11,6 +11,8 @@ import Badge from 'cozy-ui/transpiled/react/Badge';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Variants from 'cozy-ui/docs/components/Variants';
 
+import CircleFilledIcon from "cozy-ui/transpiled/react/Icons/CircleFilled";
+
 const initialVariants = [
   { error: false, dot: false, large: false, small: false },
   { error: true, dot: true, large: false, small: false },
@@ -22,7 +24,7 @@ const initialVariants = [
   variant => (
     <p>
       <Badge badgeContent={4} color={variant.error ? 'error' : variant.secondaryColor ? 'secondary' : 'primary'} variant={variant.dot ? 'dot' : 'standard'} size={variant.large ? 'large' : variant.small ? 'small' : 'medium'} anchorOrigin={{vertical: variant.bottom ? 'bottom' : 'top', 'horizontal': variant.left ? 'left' : 'right'}}>
-        <Icon icon="circle-filled" size={variant.large ? '32' : variant.small ? '16' : '24'} color="var(--slateGrey)" />
+        <Icon icon={CircleFilledIcon} size={variant.large ? '32' : variant.small ? '16' : '24'} color="var(--slateGrey)" />
       </Badge>
     </p>
   )
@@ -39,11 +41,13 @@ import InfosBadge from 'cozy-ui/transpiled/react/InfosBadge';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
+
 <p>
   <InfosBadge
     badgeContent={
       <Badge color="error" variant="dot" size="small">
-        <Icon icon="link" size="10" />
+        <Icon icon={LinkIcon} size="10" />
       </Badge>
     }
   >

react/Banner/Readme.md

@@ -12,6 +12,8 @@ import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
 
+import DownloadIcon from "cozy-ui/transpiled/react/Icons/Download";
+
 const shortText = "You have lost connection to the internet."
 const longText = "You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text."
 const buttonOne = <Button theme="text" label="Turn on wifi" />
@@ -37,7 +39,7 @@ const initialVariants = [
     icon={<Icon icon={DeviceLaptopIcon} />}
     text="Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times"
     bgcolor={palette['paleGrey']}
-    buttonOne={<Button theme="text" icon='download' label="Download" onClick={() => alert("Clicked!")} />}
+    buttonOne={<Button theme="text" icon={DownloadIcon} label="Download" onClick={() => alert("Clicked!")} />}
     buttonTwo={<Button theme="text" label="No, thanks!" />}
     inline
   /></>

react/BarButton/Readme.md

@@ -17,30 +17,34 @@ return (
 
 ```jsx
 import BarButton from 'cozy-ui/transpiled/react/BarButton';
+import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous';
 
-<BarButton icon="previous" disabled />
+<BarButton icon={PreviousIcon} disabled />
 ```
 
 ## `href`
 
 ```jsx
 import BarButton from 'cozy-ui/transpiled/react/BarButton';
+import UploadIcon from 'cozy-ui/transpiled/react/Icons/Upload';
 
-<BarButton icon="upload" href="http://cozy.io" />
+<BarButton icon={UploadIcon} href="http://cozy.io" />
 ```
 
 ## `icon`
 
 ```jsx
 import BarButton from 'cozy-ui/transpiled/react/BarButton';
+import CubeIcon from 'cozy-ui/transpiled/react/Icons/Cube';
 
-<BarButton icon="cube" />
+<BarButton icon={CubeIcon} />
 ```
 
 ## `onClick`
 
 ```jsx
 import BarButton from 'cozy-ui/transpiled/react/BarButton';
+import GearIcon from 'cozy-ui/transpiled/react/Icons/Gear';
 
-<BarButton icon="gear" onClick={() => alert('BarButton has been clicked')} />
+<BarButton icon={GearIcon} onClick={() => alert('BarButton has been clicked')} />
 ```

react/Breadcrumbs/Readme.md

@@ -7,7 +7,9 @@ context.
 ```
 import { Component } from 'react'
 import Breadcrumbs from '.';
-import Icon from '../Icon'
+import Icon from '../Icon';
+import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
+import FolderIcon from 'cozy-ui/transpiled/react/Icons/Folder'
 
 const items = [
   { 
@@ -34,7 +36,7 @@ const Items = ({ items, onClickItem }) => {
   return items.map(item => (
     <div style={{ color: 'var(--primaryTextColor)', height: '2rem', display: 'flex', alignItems: 'center'}} className={item.items ? 'u-c-pointer' : null } onClick={() => onClickItem(item)}>
       <Icon
-        icon={!item.items ? 'file' : 'folder'}
+        icon={!item.items ? FileIcon : FolderIcon}
         className='u-mr-half' color='var(--primaryTextColor)' />
       { item.name }
     </div>