EO-849 Add FileType icon

SparkPost · Jun 21, 2019 · b4db4ef · b4db4ef
1 parent 69950c2
commit b4db4ef
Show file tree

Hide file tree

Showing 8 changed files with 218 additions and 69 deletions.
diff --git a/packages/matchbox-icons/src/IconBase/IconBase.js b/packages/matchbox-icons/src/IconBase/IconBase.js
@@ -20,7 +20,14 @@ class IconBase extends Component {
     height: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number
-    ])
+    ]),
+    viewBox: PropTypes.string,
+    /** FileType icon only */
+    text: PropTypes.string,
+    /** FileType icon only */
+    textFill: PropTypes.string,
+    /** FileType icon only */
+    textProps: PropTypes.object
   }
 
   render() {
@@ -30,6 +37,7 @@ class IconBase extends Component {
       height,
       size,
       style = {},
+      viewBox = '0 0 24 24',
       ...rest
     } = this.props;
 
@@ -42,7 +50,7 @@ class IconBase extends Component {
       <svg
         fill='currentColor'
         preserveAspectRatio='xMidYMid meet'
-        viewBox='0 0 24 24'
+        viewBox={viewBox}
         width={width || size}
         height={height || size}
         {...rest}
@@ -63,4 +71,30 @@ export function createSvgIcon(path, displayName) {
   return Icon;
 }
 
+export function createExtendedSvgIcon({
+  displayName,
+  path,
+  text,
+  textContainer,
+  viewBox
+}) {
+  const Icon = ({
+    text,
+    textFill = 'white',
+    textProps,
+    ...props
+  }) => (
+    <IconBase viewBox={viewBox} {...props}>
+      {path}
+      <text fill={textFill} {...textContainer} {...textProps}>
+        {text}
+      </text>
+    </IconBase>
+  );
+
+  Icon.displayName = displayName;
+
+  return Icon;
+}
+
 export default IconBase;
diff --git a/packages/matchbox-icons/src/IconBase/tests/IconBase.test.js b/packages/matchbox-icons/src/IconBase/tests/IconBase.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import IconBase, { createSvgIcon } from '../IconBase';
+import IconBase, { createSvgIcon, createExtendedSvgIcon } from '../IconBase';
 import { shallow } from 'enzyme';
 
 describe('IconBase', () => {
@@ -29,3 +29,21 @@ describe('createSvgIcon', () => {
     expect(shallow(<Icon />)).toMatchSnapshot();
   });
 });
+
+describe('createExtendedSvgIcon', () => {
+  it('creates an extended Icon correctly', () => {
+    const Icon = createExtendedSvgIcon({
+      path: <path d="a path"/>,
+      displayName: 'TextIcon',
+      viewBox: '0 0 100 100',
+      textContainer: {
+        x: '22',
+        y: '62',
+        fontSize: '24'
+      }
+    });
+    expect(shallow(
+      <Icon text='test text' textFill='white' textProps={{ stroke: 'black' }} />
+    )).toMatchSnapshot();
+  });
+});
diff --git a/packages/matchbox-icons/src/IconBase/tests/__snapshots__/IconBase.test.js.snap b/packages/matchbox-icons/src/IconBase/tests/__snapshots__/IconBase.test.js.snap
@@ -21,6 +21,26 @@ exports[`IconBase renders children correctly 1`] = `
 </svg>
 `;
 
+exports[`createExtendedSvgIcon creates an extended Icon correctly 1`] = `
+<IconBase
+  size={18}
+  viewBox="0 0 100 100"
+>
+  <path
+    d="a path"
+  />
+  <text
+    fill="white"
+    fontSize="24"
+    stroke="black"
+    x="22"
+    y="62"
+  >
+    test text
+  </text>
+</IconBase>
+`;
+
 exports[`createSvgIcon creates an Icon correctly 1`] = `
 <IconBase
   size={18}

diff --git a/packages/matchbox-icons/src/extendedIcons/FileType.js b/packages/matchbox-icons/src/extendedIcons/FileType.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { createExtendedSvgIcon } from '../IconBase';
+
+export default createExtendedSvgIcon({
+  path: (
+    <g>
+      <path d="M89.3 80.9c.3.3.4.8.3 1.2s-.5.8-.9.9c-.4.1-.9 0-1.2-.4L79.8 75v23.1c0 .7-.6 1.2-1.2 1.2s-1.2-.6-1.2-1.2V75l-7.6 7.6c-.5.5-1.3.5-1.8 0-.2-.2-.4-.5-.4-.9s.1-.6.4-.9l8.9-8.9c.5-.5 1.1-.7 1.8-.7s1.3.3 1.7.7l8.9 9zm-69.4 1.2c0 2.8 2.3 5.1 5.1 5.1h32.2l-1.1 1.4-31.1.1c-3.7 0-6.6-2.9-6.6-6.6V69.5h-2.2c-3.2 0-5.9-2.6-5.9-5.8V42.9c0-3.2 2.6-5.8 5.9-5.8h2.2V13.9c0-3.6 3-6.6 6.6-6.6h33.8c1.8 0 3.4.7 4.7 2l20 19.9c1.3 1.2 2 2.9 2 4.7V53L68.8 69.5H19.9v12.6zm0-68.2v23.2h64v-3.3c0-1-.3-1.9-.8-2.7H61.5V9.6c-.8-.5-1.8-.8-2.8-.8H25c-2.8 0-5.1 2.2-5.1 5.1z"/>
+    </g>
+  ),
+  displayName: 'FileType',
+  viewBox: '0 0 100 100',
+  textContainer: {
+    x: '22',
+    y: '62',
+    fontSize: '24'
+  }
+});
diff --git a/packages/matchbox-icons/src/index.js b/packages/matchbox-icons/src/index.js
@@ -1,4 +1,8 @@
 /* eslint-disable max-lines */
+// Extended Icons
+export { default as FileType } from './extendedIcons/FileType';
+
+// Regular Icons
 export { default as AccessAlarm } from './icons/AccessAlarm';
 export { default as AccessAlarms } from './icons/AccessAlarms';
 export { default as Accessibility } from './icons/Accessibility';