From 9bb6a8bcbe21fb9db1a3a705b783774cb11664db Mon Sep 17 00:00:00 2001
From: Daniel Almaguer <daniel.almaguer@bigcommerce.com>
Date: Tue, 2 Apr 2019 08:20:44 -0500
Subject: [PATCH] feat(component): icon components

---
 .../src/components/Icons/CheckIcon.tsx        | 31 +++++++++++++++++++
 .../src/components/Icons/DropdownIcon.tsx     | 30 ++++++++++++++++++
 .../src/components/Icons/ErrorIcon.tsx        | 29 +++++++++++++++++
 .../big-design/src/components/Icons/Icon.tsx  | 23 ++++++++++++++
 .../src/components/Icons/LoadingIcon.tsx      | 25 +++++++++++++++
 .../src/components/Icons/PlusIcon.tsx         | 28 +++++++++++++++++
 .../big-design/src/components/Icons/index.ts  |  7 +++++
 .../src/components/Icons/svg/check-icon.svg   |  3 ++
 .../components/Icons/svg/dropdown-icon.svg    |  3 ++
 .../src/components/Icons/svg/error-icon.svg   |  5 +++
 .../src/components/Icons/svg/loading-icon.svg |  3 ++
 .../src/components/Icons/svg/plus-icon.svg    |  3 ++
 packages/big-design/src/components/index.ts   |  1 +
 13 files changed, 191 insertions(+)
 create mode 100644 packages/big-design/src/components/Icons/CheckIcon.tsx
 create mode 100644 packages/big-design/src/components/Icons/DropdownIcon.tsx
 create mode 100644 packages/big-design/src/components/Icons/ErrorIcon.tsx
 create mode 100644 packages/big-design/src/components/Icons/Icon.tsx
 create mode 100644 packages/big-design/src/components/Icons/LoadingIcon.tsx
 create mode 100644 packages/big-design/src/components/Icons/PlusIcon.tsx
 create mode 100644 packages/big-design/src/components/Icons/index.ts
 create mode 100644 packages/big-design/src/components/Icons/svg/check-icon.svg
 create mode 100644 packages/big-design/src/components/Icons/svg/dropdown-icon.svg
 create mode 100644 packages/big-design/src/components/Icons/svg/error-icon.svg
 create mode 100644 packages/big-design/src/components/Icons/svg/loading-icon.svg
 create mode 100644 packages/big-design/src/components/Icons/svg/plus-icon.svg

diff --git a/packages/big-design/src/components/Icons/CheckIcon.tsx b/packages/big-design/src/components/Icons/CheckIcon.tsx
new file mode 100644
index 000000000..e53480ba0
--- /dev/null
+++ b/packages/big-design/src/components/Icons/CheckIcon.tsx
@@ -0,0 +1,31 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React from 'react';
+
+import { Icon } from './Icon';
+
+export default class SvgCheckIcon extends Icon {
+  render() {
+    const { title, theme, ...rest } = this.props;
+    const size = this.getSize();
+    const style = {
+      width: size,
+      height: size,
+    };
+    const props = { ...rest, style };
+
+    return (
+      <svg width={size} height={size} viewBox="0 0 10 10" fill="none" {...props}>
+        <title>{title}</title>
+        <path
+          d="M1 6.105L3.667 8 9 2"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+}
diff --git a/packages/big-design/src/components/Icons/DropdownIcon.tsx b/packages/big-design/src/components/Icons/DropdownIcon.tsx
new file mode 100644
index 000000000..835da45d3
--- /dev/null
+++ b/packages/big-design/src/components/Icons/DropdownIcon.tsx
@@ -0,0 +1,30 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React from 'react';
+
+import { Icon } from './Icon';
+
+export default class SvgDropdownIcon extends Icon {
+  render() {
+    const { title, theme, ...rest } = this.props;
+    const size = this.getSize();
+    const style = {
+      width: size,
+      height: size,
+    };
+    const props = { ...rest, style };
+
+    return (
+      <svg width={size} height={size} viewBox="0 0 20 20" fill="none" {...props}>
+        <title>{title}</title>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.04 8a.5.5 0 0 0-.39.812l2.96 3.7c.2.25.58.25.78 0l2.96-3.7A.5.5 0 0 0 12.96 8H7.04z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+}
diff --git a/packages/big-design/src/components/Icons/ErrorIcon.tsx b/packages/big-design/src/components/Icons/ErrorIcon.tsx
new file mode 100644
index 000000000..cc7692420
--- /dev/null
+++ b/packages/big-design/src/components/Icons/ErrorIcon.tsx
@@ -0,0 +1,29 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React from 'react';
+
+import { Icon } from './Icon';
+
+export default class SvgErrorIcon extends Icon {
+  render() {
+    const { title, theme, ...rest } = this.props;
+    const size = this.getSize();
+    const style = {
+      width: size,
+      height: size,
+    };
+    const props = { ...rest, style };
+
+    return (
+      <svg width={size} height={size} viewBox="0 0 20 20" fill="none" {...props}>
+        <title>{title}</title>
+        <circle cx={10} cy={10} r={8} fill="currentColor" />
+        <path
+          d="M11 14.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1zM11 10.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v5z"
+          fill="#fff"
+        />
+      </svg>
+    );
+  }
+}
diff --git a/packages/big-design/src/components/Icons/Icon.tsx b/packages/big-design/src/components/Icons/Icon.tsx
new file mode 100644
index 000000000..16360ea31
--- /dev/null
+++ b/packages/big-design/src/components/Icons/Icon.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { defaultTheme, ThemeInterface } from '../../theme';
+import { Spacing } from '../../theme/system/spacing';
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size: keyof Spacing;
+  theme?: ThemeInterface;
+  title?: string;
+}
+
+export class Icon extends React.PureComponent<IconProps> {
+  static defaultProps: Partial<IconProps> = {
+    size: 'large',
+  };
+
+  protected getSize() {
+    const theme = this.props.theme || defaultTheme;
+    const { spacing } = theme;
+
+    return spacing[this.props.size];
+  }
+}
diff --git a/packages/big-design/src/components/Icons/LoadingIcon.tsx b/packages/big-design/src/components/Icons/LoadingIcon.tsx
new file mode 100644
index 000000000..278eceda9
--- /dev/null
+++ b/packages/big-design/src/components/Icons/LoadingIcon.tsx
@@ -0,0 +1,25 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React from 'react';
+
+import { Icon } from './Icon';
+
+export default class SvgLoadingIcon extends Icon {
+  render() {
+    const { title, theme, ...rest } = this.props;
+    const size = this.getSize();
+    const style = {
+      width: size,
+      height: size,
+    };
+    const props = { ...rest, style };
+
+    return (
+      <svg width={size} height={size} viewBox="0 0 20 20" fill="none" {...props}>
+        <title>{title}</title>
+        <path d="M18 10a8 8 0 1 0-8 8v-2.29A5.709 5.709 0 1 1 15.71 10H18z" fill="currentColor" />
+      </svg>
+    );
+  }
+}
diff --git a/packages/big-design/src/components/Icons/PlusIcon.tsx b/packages/big-design/src/components/Icons/PlusIcon.tsx
new file mode 100644
index 000000000..03d8f54f9
--- /dev/null
+++ b/packages/big-design/src/components/Icons/PlusIcon.tsx
@@ -0,0 +1,28 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React from 'react';
+
+import { Icon } from './Icon';
+
+export default class SvgPlusIcon extends Icon {
+  render() {
+    const { title, theme, ...rest } = this.props;
+    const size = this.getSize();
+    const style = {
+      width: size,
+      height: size,
+    };
+    const props = { ...rest, style };
+
+    return (
+      <svg width={size} height={size} viewBox="0 0 20 20" fill="none" {...props}>
+        <title>{title}</title>
+        <path
+          d="M16 11h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H4c-.55 0-1-.45-1-1s.45-1 1-1h5V4c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+}
diff --git a/packages/big-design/src/components/Icons/index.ts b/packages/big-design/src/components/Icons/index.ts
new file mode 100644
index 000000000..4cf8099af
--- /dev/null
+++ b/packages/big-design/src/components/Icons/index.ts
@@ -0,0 +1,7 @@
+export * from './Icon';
+
+export { default as CheckIcon } from './CheckIcon';
+export { default as DropdownIcon } from './DropdownIcon';
+export { default as ErrorIcon } from './ErrorIcon';
+export { default as LoadingIcon } from './LoadingIcon';
+export { default as PlusIcon } from './PlusIcon';
diff --git a/packages/big-design/src/components/Icons/svg/check-icon.svg b/packages/big-design/src/components/Icons/svg/check-icon.svg
new file mode 100644
index 000000000..1dcf3583a
--- /dev/null
+++ b/packages/big-design/src/components/Icons/svg/check-icon.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6.10526L3.66667 8L9 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/big-design/src/components/Icons/svg/dropdown-icon.svg b/packages/big-design/src/components/Icons/svg/dropdown-icon.svg
new file mode 100644
index 000000000..ab2f26071
--- /dev/null
+++ b/packages/big-design/src/components/Icons/svg/dropdown-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.04031 8C6.62106 8 6.38797 8.48497 6.64988 8.81235L9.60957 12.512C9.80973 12.7622 10.1903 12.7622 10.3904 12.512L13.3501 8.81235C13.612 8.48497 13.3789 8 12.9597 8H7.04031Z" fill="currentColor"/>
+</svg>
diff --git a/packages/big-design/src/components/Icons/svg/error-icon.svg b/packages/big-design/src/components/Icons/svg/error-icon.svg
new file mode 100644
index 000000000..ef5ea2570
--- /dev/null
+++ b/packages/big-design/src/components/Icons/svg/error-icon.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="8" fill="currentColor"/>
+<path d="M11 14.5C11 14.7761 10.7761 15 10.5 15H9.5C9.22386 15 9 14.7761 9 14.5V13.5C9 13.2239 9.22386 13 9.5 13H10.5C10.7761 13 11 13.2239 11 13.5V14.5Z" fill="white"/>
+<path d="M11 10.5C11 10.7761 10.7761 11 10.5 11H9.5C9.22386 11 9 10.7761 9 10.5V5.5C9 5.22386 9.22386 5 9.5 5H10.5C10.7761 5 11 5.22386 11 5.5V10.5Z" fill="white"/>
+</svg>
diff --git a/packages/big-design/src/components/Icons/svg/loading-icon.svg b/packages/big-design/src/components/Icons/svg/loading-icon.svg
new file mode 100644
index 000000000..d40c6d851
--- /dev/null
+++ b/packages/big-design/src/components/Icons/svg/loading-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 10C18 8.41775 17.5308 6.87103 16.6518 5.55544C15.7727 4.23984 14.5233 3.21446 13.0615 2.60896C11.5997 2.00346 9.99113 1.84504 8.43928 2.15372C6.88743 2.4624 5.46197 3.22433 4.34315 4.34315C3.22433 5.46197 2.4624 6.88743 2.15372 8.43928C1.84504 9.99113 2.00346 11.5997 2.60896 13.0615C3.21446 14.5233 4.23985 15.7727 5.55544 16.6518C6.87103 17.5308 8.41775 18 10 18V15.7091C8.87085 15.7091 7.76706 15.3743 6.8282 14.7469C5.88935 14.1196 5.1576 13.228 4.72549 12.1848C4.29338 11.1416 4.18032 9.99367 4.40061 8.88621C4.6209 7.77876 5.16463 6.7615 5.96307 5.96307C6.7615 5.16463 7.77876 4.6209 8.88621 4.40061C9.99367 4.18032 11.1416 4.29338 12.1848 4.72549C13.228 5.1576 14.1196 5.88935 14.7469 6.8282C15.3743 7.76706 15.7091 8.87085 15.7091 10H18Z" fill="currentColor"/>
+</svg>
diff --git a/packages/big-design/src/components/Icons/svg/plus-icon.svg b/packages/big-design/src/components/Icons/svg/plus-icon.svg
new file mode 100644
index 000000000..e5d1abec3
--- /dev/null
+++ b/packages/big-design/src/components/Icons/svg/plus-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 11H11V16C11 16.55 10.55 17 10 17C9.45 17 9 16.55 9 16V11H4C3.45 11 3 10.55 3 10C3 9.45 3.45 9 4 9H9V4C9 3.45 9.45 3 10 3C10.55 3 11 3.45 11 4V9H16C16.55 9 17 9.45 17 10C17 10.55 16.55 11 16 11Z" fill="currentColor"/>
+</svg>
diff --git a/packages/big-design/src/components/index.ts b/packages/big-design/src/components/index.ts
index 468f97e1b..77fd6e7f8 100644
--- a/packages/big-design/src/components/index.ts
+++ b/packages/big-design/src/components/index.ts
@@ -2,4 +2,5 @@ export * from './Box';
 export * from './Flex';
 export * from './GlobalStyle';
 export * from './Grid';
+export * from './Icons';
 export * from './Typography';