feat(Icon): add check-circle icon (#711)

tillersystems · Aug 21, 2019 · dd3d491 · dd3d491
1 parent e06eb65
commit dd3d491
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 2 deletions.
diff --git a/src/Icon/CheckCircle/index.js b/src/Icon/CheckCircle/index.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Check Circle Icon comnponent
+ *
+ * @return {jsx}
+ */
+const CheckCircle = ({ fill }) => {
+  return (
+    <>
+      <defs>
+        <path
+          d="M351.5 41.7a21.3 21.3 0 0 1-17.4 39A192 192 0 1 0 448 256v-19.6a21.3 21.3 0 0 1 42.7 0v19.6A234.7 234.7 0 1 1 351.5 41.7zm133 28.7a21.3 21.3 0 0 1 0 30.1L271 314.1a21.3 21.3 0 0 1-30.2 0l-64-64a21.3 21.3 0 1 1 30.2-30.2l48.9 49L454.2 70.3a21.3 21.3 0 0 1 30.2 0z"
+          id="circle"
+        />
+      </defs>
+      <g fill="none" fillRule="evenodd">
+        <mask id="check" fill="#fff" fillOpacity="0">
+          <use xlinkHref="#circle" />
+        </mask>
+        <use fill={fill} fillRule="nonzero" xlinkHref="#circle" />
+        <g mask="url(#check)" fill={fill}>
+          <path d="M0 0h512v512H0z" />
+        </g>
+      </g>
+    </>
+  );
+};
+
+/**
+ * PropTypes Validation
+ */
+const { string } = PropTypes;
+
+CheckCircle.propTypes = {
+  /**
+   * Fill color
+   */
+  fill: string,
+};
+
+/**
+ * Default props.
+ */
+CheckCircle.defaultProps = {
+  fill: 'white',
+};
+
+/**
+ * Display name
+ */
+CheckCircle.displayName = 'CheckCircle';
+
+export default CheckCircle;
diff --git a/src/Icon/__tests__/Icon.test.js b/src/Icon/__tests__/Icon.test.js
@@ -11,6 +11,12 @@ describe('<Icon />', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('should render multipath icon', () => {
+    const { container } = render(<Icon name="check-circle" />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   test('should display icon with a different name', () => {
     const { container } = render(<Icon name="check" />);
 

diff --git a/src/Icon/__tests__/__snapshots__/Icon.test.js.snap b/src/Icon/__tests__/__snapshots__/Icon.test.js.snap
@@ -26,6 +26,59 @@ exports[`<Icon /> should display icon with a different name 1`] = `
 </svg>
 `;
 
+exports[`<Icon /> should render multipath icon 1`] = `
+.c0 {
+  display: inline-block;
+}
+
+<svg
+  aria-hidden="true"
+  class="c0"
+  focusable="false"
+  height="20"
+  role="img"
+  viewBox="0 0 512 512"
+  width="20"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g>
+    <defs>
+      <path
+        d="M351.5 41.7a21.3 21.3 0 0 1-17.4 39A192 192 0 1 0 448 256v-19.6a21.3 21.3 0 0 1 42.7 0v19.6A234.7 234.7 0 1 1 351.5 41.7zm133 28.7a21.3 21.3 0 0 1 0 30.1L271 314.1a21.3 21.3 0 0 1-30.2 0l-64-64a21.3 21.3 0 1 1 30.2-30.2l48.9 49L454.2 70.3a21.3 21.3 0 0 1 30.2 0z"
+        id="circle"
+      />
+    </defs>
+    <g
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <mask
+        fill="#fff"
+        fill-opacity="0"
+        id="check"
+      >
+        <use
+          xlink:href="#circle"
+        />
+      </mask>
+      <use
+        fill="hsl(0,100%,100%)"
+        fill-rule="nonzero"
+        xlink:href="#circle"
+      />
+      <g
+        fill="hsl(0,100%,100%)"
+        mask="url(#check)"
+      >
+        <path
+          d="M0 0h512v512H0z"
+        />
+      </g>
+    </g>
+  </g>
+</svg>
+`;
+
 exports[`<Icon /> should render without a problem 1`] = `
 .c0 {
   display: inline-block;

diff --git a/src/Icon/data.js b/src/Icon/data.js
diff --git a/src/Icon/index.js b/src/Icon/index.js
@@ -53,7 +53,12 @@ const Icon = ({ className, color, name, size, title, ...restProps }) => {
    *
    * @return {string}
    */
-  const getIconPath = useMemo(() => Data[name], [name]);
+  const getIconPath = Data[name];
+
+  /**
+   * Icon element
+   */
+  const IconElement = typeof getIconPath === 'function' && getIconPath;
 
   const rootProps = {
     'aria-hidden': title ? undefined : true,
@@ -70,7 +75,11 @@ const Icon = ({ className, color, name, size, title, ...restProps }) => {
     <svg className={className} xmlns="http://www.w3.org/2000/svg" {...rootProps}>
       {title && <title id={titleElementId}>{title}</title>}
       <g>
-        <path data-testid="icon-svg-path" fill={getColor} fillRule="evenodd" d={getIconPath} />
+        {!IconElement ? (
+          <path data-testid="icon-svg-path" fill={getColor} fillRule="evenodd" d={getIconPath} />
+        ) : (
+          <IconElement fill={getColor} />
+        )}
       </g>
     </svg>
   );