Feature/#46 icons (#158)

* add boilerplate project * add the ability for storybook to include svg files * wrap svgIcon * move svg icon file * add default story * add type support for svg files * add all svg icons from figma * update svg type * wrap all icons * forward props * display all icons in storybook * replace all fill and stroke values with "currentColor" * fix icon fill * update shapeRendering to be enum * add single icon story * install svgo and add to build script optimize all the svgs! * Update README with contributing info * update show code for single icon * replace material icons with our own in storybook stories * replace x with * * remove @material-ui/icons as dependency
nl-design-system · May 5, 2021 · 767573d · 767573d
1 parent 3059ea6
commit 767573d
Show file tree

Hide file tree

Showing 69 changed files with 753 additions and 81 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -4,4 +4,17 @@ module.exports = {
     '../src/components/*/src/*.stories.@(js|jsx|ts|tsx)'
   ],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+
+  webpackFinal: async (config, { configType }) => {
+    const rules = config.module.rules;
+    const fileLoaderRule = rules.find(rule => rule.test.test('.svg'));
+    fileLoaderRule.exclude = /\.svg$/;
+
+    rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+
+    return config;
+  }
 };
diff --git a/package.json b/package.json
@@ -41,7 +41,6 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.2",
-    "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha",
     "@material-ui/pickers": "^3.2.10",
     "yarn-outdated-formatter": "^2.2.0"
@@ -54,6 +53,7 @@
     "@storybook/addon-essentials": "^6.2.8",
     "@storybook/addon-links": "^6.2.8",
     "@storybook/react": "^6.2.8",
+    "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -90,6 +90,7 @@
     "storybook": "^6.2.8",
     "stylelint": "^13.8.0",
     "stylelint-config-prettier": "^8.0.2",
+    "svgo": "^2.3.0",
     "typescript": "^4.1.3"
   },
   "engines": {

diff --git a/src/components/Accordion/package.json b/src/components/Accordion/package.json
@@ -31,5 +31,8 @@
     "peerDependencies": {
         "react": "^17.0.1"
     },
+    "devDependencies": {
+        "@gemeente-denhaag/icons": "*"
+    },
     "gitHead": "dcf72a9b79266c1ebede35aff4a02dd9121a980f"
 }
diff --git a/src/components/Accordion/src/Accordion.stories.tsx b/src/components/Accordion/src/Accordion.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
-import { ExpandMore } from "@material-ui/icons";
+import { ChevronDownIcon } from "@gemeente-denhaag/icons";
 import Accordion, { AccordionProps } from ".";
 import AccordionSummary from "../../AccordionSummary";
 import Typography from "../../Typography";
@@ -22,7 +22,7 @@ export default {
 
 const Template: Story<AccordionProps> = (args: any) => (
   <Accordion {...args}>
-    <AccordionSummary expandIcon={<ExpandMore />}>
+    <AccordionSummary expandIcon={<ChevronDownIcon />}>
       <Typography>Click me to collapse me!</Typography>
     </AccordionSummary>
     <AccordionDetails>

diff --git a/src/components/AppBar/package.json b/src/components/AppBar/package.json
@@ -28,5 +28,8 @@
     "peerDependencies": {
         "react": "^17.0.1"
     },
+    "devDependencies": {
+        "@gemeente-denhaag/icons": "*"
+    },
     "gitHead": "dcf72a9b79266c1ebede35aff4a02dd9121a980f"
 }
diff --git a/src/components/AppBar/src/AppBar.stories.tsx b/src/components/AppBar/src/AppBar.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
-import MenuIcon from "@material-ui/icons/Menu";
+import { HamburgerIcon } from "@gemeente-denhaag/icons";
 import AppBar, { AppBarProps } from ".";
 import Toolbar from "../../Toolbar";
 import IconButton from "../../IconButton";
@@ -26,7 +26,7 @@ const Template: Story<AppBarProps> = (args: AppBarProps) => {
     <AppBar {...args}>
       <Toolbar>
         <IconButton edge="start" color="inherit" aria-label="menu">
-          <MenuIcon />
+          <HamburgerIcon />
         </IconButton>
         <Typography variant="h6">News</Typography>
       </Toolbar>
@@ -40,7 +40,7 @@ const defaultCode = `
 <AppBar position='relative'>
   <Toolbar>
     <IconButton edge="start" color="inherit" aria-label="menu">
-      <MenuIcon/>
+      <HamburgerIcon/>
     </IconButton>
     <Typography variant="h6">News</Typography>
   </Toolbar>
@@ -69,7 +69,7 @@ const staticCode = `
 <AppBar position='static'>
   <Toolbar>
     <IconButton edge="start" color="inherit" aria-label="menu">
-      <MenuIcon/>
+      <HamburgerIcon/>
     </IconButton>
     <Typography variant="h6">News</Typography>
   </Toolbar>
@@ -98,7 +98,7 @@ const secondaryCode = `
 <AppBar position='static' color={'secondary'}>
   <Toolbar>
     <IconButton edge="start" color="inherit" aria-label="menu">
-      <MenuIcon/>
+      <HamburgerIcon/>
     </IconButton>
     <Typography variant="h6">News</Typography>
   </Toolbar>

diff --git a/src/components/Badge/package.json b/src/components/Badge/package.json
@@ -28,5 +28,8 @@
     "peerDependencies": {
         "react": "^17.0.1"
     },
+    "devDependencies": {
+        "@gemeente-denhaag/icons": "*"
+    },
     "gitHead": "dcf72a9b79266c1ebede35aff4a02dd9121a980f"
 }
diff --git a/src/components/Badge/src/Badge.stories.tsx b/src/components/Badge/src/Badge.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
 import Badge, { BadgeProps } from ".";
-import MailIcon from "@material-ui/icons/Mail";
+import { MessageIcon } from "@gemeente-denhaag/icons";
 import pkg from "../package.json";
 
 export default {
@@ -19,7 +19,7 @@ export default {
 
 const Template: Story<BadgeProps> = (args: BadgeProps) => (
   <Badge {...args}>
-    <MailIcon />
+    <MessageIcon />
   </Badge>
 );
 
@@ -35,7 +35,7 @@ Default.parameters = {
   docs: {
     source: {
       // language=HTML
-      code: `<Badge badgeContent={4}><MailIcon /></Badge>`,
+      code: `<Badge badgeContent={4}><MessageIcon /></Badge>`,
     },
   },
 };
@@ -53,7 +53,7 @@ PrimaryColoured.parameters = {
   docs: {
     source: {
       // language=HTML
-      code: `<Badge badgeContent={4} color={'primary'}><MailIcon /></Badge>`,
+      code: `<Badge badgeContent={4} color={'primary'}><MessageIcon /></Badge>`,
     },
   },
 };
@@ -71,7 +71,7 @@ CircleOverlap.parameters = {
   docs: {
     source: {
       // language=HTML
-      code: `<Badge badgeContent={4} color={'primary'} overlap={'circle'}><MailIcon /></Badge>`,
+      code: `<Badge badgeContent={4} color={'primary'} overlap={'circle'}><MessageIcon /></Badge>`,
     },
   },
 };
@@ -88,7 +88,7 @@ DotVariant.args = {
 DotVariant.parameters = {
   docs: {
     source: {
-      code: `<Badge badgeContent={4} color={'primary'} variant={'dot'}><MailIcon /></Badge>`,
+      code: `<Badge badgeContent={4} color={'primary'} variant={'dot'}><MessageIcon /></Badge>`,
     },
   },
 };
diff --git a/src/components/Card/package.json b/src/components/Card/package.json
@@ -32,5 +32,8 @@
     "peerDependencies": {
         "react": "^17.0.1"
     },
+    "devDependencies": {
+        "@gemeente-denhaag/icons": "*"
+    },
     "gitHead": "dcf72a9b79266c1ebede35aff4a02dd9121a980f"
 }
diff --git a/src/components/Card/src/Card.stories.tsx b/src/components/Card/src/Card.stories.tsx
@@ -1,9 +1,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
-import FavoriteIcon from "@material-ui/icons/Favorite";
-import ShareIcon from "@material-ui/icons/Share";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import MoreVertIcon from "@material-ui/icons/MoreVert";
+import { CheckCircleIcon, ShareIcon, ChevronDownIcon, SettingsIcon } from "@gemeente-denhaag/icons";
 import Card, { CardProps } from ".";
 import CardActions from "../../CardActions";
 import CardContent from "../../CardContent";
@@ -14,12 +11,12 @@ import IconButton from "../../IconButton";
 import pkg from "../package.json";
 
 export default {
-  title: 'Components/Surfaces/Card',
+  title: "Components/Surfaces/Card",
   parameters: {
     componentSubtitle: `${pkg.name} - ${pkg.version}`,
     docs: {
       source: {
-        type: 'dynamic',
+        type: "dynamic",
       },
     },
   },
@@ -32,7 +29,7 @@ const Template: Story<CardProps> = (args: CardProps) => (
       avatar={<Avatar aria-label="recipe">R</Avatar>}
       action={
         <IconButton aria-label="settings">
-          <MoreVertIcon />
+          <SettingsIcon />
         </IconButton>
       }
       title="Shrimp and Chorizo Paella"
@@ -46,13 +43,13 @@ const Template: Story<CardProps> = (args: CardProps) => (
     </CardContent>
     <CardActions disableSpacing>
       <IconButton aria-label="add to favorites">
-        <FavoriteIcon />
+        <CheckCircleIcon />
       </IconButton>
       <IconButton aria-label="share">
         <ShareIcon />
       </IconButton>
       <IconButton aria-label="show more">
-        <ExpandMoreIcon />
+        <ChevronDownIcon />
       </IconButton>
     </CardActions>
   </Card>
@@ -65,7 +62,7 @@ const defaultCode = `
     avatar={<Avatar aria-label='recipe'>R</Avatar>}
     action={
       <IconButton aria-label='settings'>
-        <MoreVertIcon/>
+        <SettingsIcon/>
       </IconButton>
     }
     title='Shrimp and Chorizo Paella'
@@ -78,13 +75,13 @@ const defaultCode = `
     </CardContent>
     <CardActions disableSpacing>
       <IconButton aria-label='add to favorites'>
-        <FavoriteIcon/>
+        <CheckCircleIcon/>
       </IconButton>
       <IconButton aria-label='share'>
         <ShareIcon/>
       </IconButton>
       <IconButton aria-label='show more'>
-        <ExpandMoreIcon/>
+        <ChevronDownIcon/>
       </IconButton>
     </CardActions>
   </CardHeader>
@@ -111,7 +108,7 @@ const raisedCode = `
     avatar={<Avatar aria-label='recipe'>R</Avatar>}
     action={
       <IconButton aria-label='settings'>
-        <MoreVertIcon/>
+        <SettingsIcon/>
       </IconButton>
     }
     title='Shrimp and Chorizo Paella'
@@ -125,13 +122,13 @@ const raisedCode = `
     </CardContent>
     <CardActions disableSpacing>
       <IconButton aria-label='add to favorites'>
-        <FavoriteIcon/>
+        <CheckCircleIcon/>
       </IconButton>
       <IconButton aria-label='share'>
         <ShareIcon/>
       </IconButton>
       <IconButton aria-label='show more'>
-        <ExpandMoreIcon/>
+        <ChevronDownIcon/>
       </IconButton>
     </CardActions>
   </CardHeader>

diff --git a/src/components/Divider/package.json b/src/components/Divider/package.json
@@ -28,5 +28,8 @@
     "peerDependencies": {
         "react": "^17.0.1"
     },
+    "devDependencies": {
+        "@gemeente-denhaag/icons": "*"
+    },
     "gitHead": "dcf72a9b79266c1ebede35aff4a02dd9121a980f"
 }
diff --git a/src/components/Divider/src/Divider.stories.tsx b/src/components/Divider/src/Divider.stories.tsx
@@ -3,8 +3,7 @@ import { Meta, Story } from "@storybook/react";
 import Divider, { DividerProps } from ".";
 import pkg from "../package.json";
 import List, { ListItem, ListItemIcon, ListItemText } from "../../List";
-import InboxIcon from "@material-ui/icons/Inbox";
-import DraftsIcon from "@material-ui/icons/Drafts";
+import { InboxIcon, EmailIcon } from "@gemeente-denhaag/icons";
 
 export default {
   title: 'Components/Data Display/Divider',
@@ -30,7 +29,7 @@ const Template: Story<DividerProps> = (args: DividerProps) => (
     <Divider {...args} />
     <ListItem button>
       <ListItemIcon>
-        <DraftsIcon />
+        <EmailIcon />
       </ListItemIcon>
       <ListItemText primary="I am under the divider." />
     </ListItem>
@@ -49,7 +48,7 @@ const defaultCode = `
   <Divider/>
   <ListItem button>
     <ListItemIcon>
-      <DraftsIcon/>
+      <EmailIcon/>
     </ListItemIcon>
     <ListItemText primary="I am under the divider."/>
   </ListItem>
@@ -68,7 +67,7 @@ const insetCode = `
   <Divider variant="inset"/>
   <ListItem button>
     <ListItemIcon>
-      <DraftsIcon/>
+      <EmailIcon/>
     </ListItemIcon>
     <ListItemText primary="I am under the divider."/>
   </ListItem>
@@ -87,7 +86,7 @@ const lightCode = `
   <Divider light/>
   <ListItem button>
     <ListItemIcon>
-      <DraftsIcon/>
+      <EmailIcon/>
     </ListItemIcon>
     <ListItemText primary="I am under the divider."/>
   </ListItem>
@@ -106,7 +105,7 @@ const absoluteCode = `
   <Divider absolute/>
   <ListItem button>
     <ListItemIcon>
-      <DraftsIcon/>
+      <EmailIcon/>
     </ListItemIcon>
     <ListItemText primary="I am under the divider."/>
   </ListItem>

diff --git a/src/components/GridListTileBar/package.json b/src/components/GridListTileBar/package.json
@@ -27,5 +27,8 @@
     "peerDependencies": {
         "react": "^17.0.1"
     },
+    "devDependencies": {
+        "@gemeente-denhaag/icons": "*"
+    },
     "gitHead": "dcf72a9b79266c1ebede35aff4a02dd9121a980f"
 }