v0.1.8

Author: jwoo0122

.svgrrc

@@ -0,0 +1,109 @@
+const svgElements = [
+  'a',,
+  'animate',
+  'animateMotion',
+  'animateTransform',
+  'audio',
+  'canvas',
+  'circle',
+  'clipPath',
+  'defs',
+  'desc',
+  'discard',
+  'ellipse',
+  'feBlend',
+  'feColorMatrix',
+  'feComponentTransfer',
+  'feComposite',
+  'feConvolveMatrix',
+  'feDiffuseLighting',
+  'feDisplacementMap',
+  'feDistantLight',
+  'feDropShadow',
+  'feFlood',
+  'feFuncA',
+  'feFuncB',
+  'feFuncG',
+  'feFuncR',
+  'feGaussianBlur',
+  'feImage',
+  'feMerge',
+  'feMergeNode',
+  'feMorphology',
+  'feOffset',
+  'fePointLight',
+  'feSpecularLighting',
+  'feSpotLight',
+  'feTile',
+  'feTurbulence',
+  'filter',
+  'foreignObject',
+  'g',
+  'iframe',
+  'image',
+  'line',
+  'linearGradient',
+  'marker',
+  'mask',
+  'metadata',
+  'mpath',
+  'path',
+  'pattern',
+  'polygon',
+  'polyline',
+  'radialGradient',
+  'rect',
+  'script',
+  'set',
+  'stop',
+  'style',
+  'switch',
+  'symbol',
+  'text',
+  'textPath',
+  'title',
+  'tspan',
+  'unknown',
+  'use',
+  'video',
+  'view',
+]
+
+module.exports = {
+  "icon": true,
+  "typescript": true,
+  "singleQuote": true,
+  "prettier": true,
+  "prettierConfig": {
+    "dimensions": false,
+    "semi": false,
+    "endOfLine": "lf",
+    "singleQuote": true
+  },
+  "jsx": {
+    babelConfig: {
+      plugins: [
+        [
+          '@svgr/babel-plugin-remove-jsx-attribute',
+          {
+            elements: svgElements,
+            attributes: ['fill'],
+          },
+        ],
+        [
+          '@svgr/babel-plugin-add-jsx-attribute',
+          {
+            elements: svgElements,
+            attributes: [
+              {
+                name: 'fill',
+                value: 'currentColor',
+                position: 'start',
+              }
+            ],
+          }
+        ]
+      ],
+    },
+  }
+}

.svgrrc.js

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",
@@ -64,6 +64,8 @@
     "@storybook/addon-knobs": "^5.3.19",
     "@storybook/react": "^5.3.18",
     "@storybook/storybook-deployer": "^2.8.6",
+    "@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
+    "@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
     "@svgr/cli": "^5.4.0",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^10.0.4",

package-lock.json

@@ -0,0 +1,35 @@
+/* External dependencies */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+/* Internal dependencies */
+import Icon, { ICON_TEST_ID } from './Icon'
+import IconProps from './Icon.types'
+
+describe('Icon test >', () => {
+  let props: IconProps
+
+  beforeEach(() => {
+    props = {
+      name: 'all',
+    }
+  })
+
+  const renderIcon = (optionProps?: IconProps) => render(<Icon {...props} {...optionProps}/>)
+
+  it('Icon inherits fill color', () => {
+    const { getByTestId } = renderIcon()
+
+    const renderedIcon = getByTestId(ICON_TEST_ID)
+
+    expect(renderedIcon).toHaveStyle('color: inherit;')
+  })
+
+  it('Icon receives custom color', () => {
+    const { getByTestId } = renderIcon({ name: 'all', color: 'rgb(20, 30, 50)' })
+
+    const renderedIcon = getByTestId(ICON_TEST_ID)
+
+    expect(renderedIcon).toHaveStyle('color: rgb(20, 30, 50);')
+  })
+})

package.json

@@ -1,24 +1,31 @@
 /* External dependencies */
 import React, { memo } from 'react'
+import _ from 'lodash'
 
 /* Internal dependencies */
 import IconProps, { IconSize } from './Icon.types'
 import icons from './generated'
 import Styled from './Icon.styled'
 
+export const ICON_TEST_ID = 'ch-design-system-icon'
+
 function Icon({
   className,
   style,
   name,
   color,
+  testId = ICON_TEST_ID,
   size = IconSize.Normal,
   marginTop = 0,
   marginRight = 0,
   marginBottom = 0,
   marginLeft = 0,
 }: IconProps) {
+  if (_.isNil(icons[name])) { return null }
+
   return (
     <Styled
+      data-testid={testId}
       className={className}
       color={color}
       as={icons[name]}

src/components/Icon/Icon.test.tsx

@@ -4,7 +4,7 @@ function SvgCloseWin(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
       <path
-        fill="#A7A7AA"
+        fill="currentColor"
         fillRule="evenodd"
         d="M16.5 6.793l.707.707-4.5 4.5 4.5 4.5-.707.707-4.5-4.5-4.5 4.5-.707-.707 4.5-4.5-4.5-4.5.707-.707 4.5 4.5 4.5-4.5z"
       />

src/components/Icon/Icon.tsx

@@ -4,7 +4,7 @@ function SvgEnlargeWin(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
       <path
-        fill="#A7A7AA"
+        fill="currentColor"
         fillRule="evenodd"
         d="M17 7v10H7V7h10zm-1 1H8v8h8V8z"
       />

src/components/Icon/generated/CloseWin.tsx

@@ -4,8 +4,14 @@ function SvgHexahedron(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
       <g fill="currentColor" fillRule="evenodd">
-        <path d="M13 2.577l7 4.042c.619.357 1 1.017 1 1.732v8.083a2 2 0 01-1 1.732l-7 4.041a1.996 1.996 0 01-2 0l-7-4.041a2 2 0 01-1-1.732V8.35c0-.715.381-1.375 1-1.732l7-4.042a2.001 2.001 0 012 0zm-1 1.605L4.89 8.287v8.21L12 20.604l7.11-4.105v-8.21L12 4.181z" />
-        <path d="M19.502 7.133l.996 1.734L13 13.177v8.22h-2v-8.219L3.502 8.867l.996-1.734L12 11.445l7.502-4.312z" />
+        <path
+          fill="currentColor"
+          d="M13 2.577l7 4.042c.619.357 1 1.017 1 1.732v8.083a2 2 0 01-1 1.732l-7 4.041a1.996 1.996 0 01-2 0l-7-4.041a2 2 0 01-1-1.732V8.35c0-.715.381-1.375 1-1.732l7-4.042a2.001 2.001 0 012 0zm-1 1.605L4.89 8.287v8.21L12 20.604l7.11-4.105v-8.21L12 4.181z"
+        />
+        <path
+          fill="currentColor"
+          d="M19.502 7.133l.996 1.734L13 13.177v8.22h-2v-8.219L3.502 8.867l.996-1.734L12 11.445l7.502-4.312z"
+        />
       </g>
     </svg>
   )

src/components/Icon/generated/EnlargeWin.tsx

@@ -4,8 +4,14 @@ function SvgIos(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
       <g fill="currentColor" fillRule="evenodd">
-        <path d="M18.542 10.194c2.185 0 3.045 1.554 3.045 1.554s-1.681.86-1.681 2.946c0 2.353 2.094 3.162 2.094 3.162s-1.464 4.121-3.441 4.121c-.908 0-1.614-.611-2.571-.611-.976 0-1.943.634-2.574.634-1.805 0-4.087-3.91-4.087-7.05 0-3.091 1.932-4.713 3.743-4.713 1.177 0 2.09.678 2.703.678.525 0 1.5-.721 2.769-.721zm.22-3.739s.21 1.266-.805 2.486c-1.083 1.301-2.314 1.088-2.314 1.088s-.232-1.024.676-2.221c.944-1.243 2.226-1.344 2.418-1.352z" />
-        <path d="M13 2a2 2 0 012 2v16a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2h8zm0 3H5v14h8V5z" />
+        <path
+          fill="currentColor"
+          d="M18.542 10.194c2.185 0 3.045 1.554 3.045 1.554s-1.681.86-1.681 2.946c0 2.353 2.094 3.162 2.094 3.162s-1.464 4.121-3.441 4.121c-.908 0-1.614-.611-2.571-.611-.976 0-1.943.634-2.574.634-1.805 0-4.087-3.91-4.087-7.05 0-3.091 1.932-4.713 3.743-4.713 1.177 0 2.09.678 2.703.678.525 0 1.5-.721 2.769-.721zm.22-3.739s.21 1.266-.805 2.486c-1.083 1.301-2.314 1.088-2.314 1.088s-.232-1.024.676-2.221c.944-1.243 2.226-1.344 2.418-1.352z"
+        />
+        <path
+          fill="currentColor"
+          d="M13 2a2 2 0 012 2v16a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2h8zm0 3H5v14h8V5z"
+        />
       </g>
     </svg>
   )