feat(app-recommendations): add box square icon and double arrows icons (#1092)

Author: vweebox

src/icons/general/IconBoxSquare.js

@@ -0,0 +1,33 @@
+// @flow
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+
+type Props = {
+    className?: string,
+    height?: number,
+    title?: string | React.Element<any>,
+    width?: number,
+};
+
+const IconBoxSquare = ({ className = '', height = 72, title, width = 72 }: Props) => (
+    <AccessibleSVG
+        className={`box-square-icon ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 72 72"
+        width={width}
+    >
+        <rect width="72" height="72" rx="8" ry="8" fill="#0061d5" />
+        <path
+            d="M37.39 28.57A10.26 10.26 0 0 0 28.33 34a10.31 10.31 0 0 0-15.23-3.39V22A2.05 2.05 0 0 0 9 22v17a10.27 10.27 0 0 0 19.33 4.62 10.25 10.25 0 1 0 9.06-15zM19.26 44.91a6.13 6.13 0 1 1 6.15-6.13 6.14 6.14 0 0 1-6.15 6.13zm18.13 0a6.13 6.13 0 1 1 6.15-6.13 6.14 6.14 0 0 1-6.15 6.13z"
+            fill="#fff"
+        />
+        <path
+            d="M58 38.77l5.58-6.83a1.93 1.93 0 0 0-.47-2.82 2.37 2.37 0 0 0-3.1.37l-4.81 5.86-4.8-5.86a2.35 2.35 0 0 0-3.09-.37 1.92 1.92 0 0 0-.47 2.82l5.57 6.83-5.57 6.81a1.93 1.93 0 0 0 .47 2.83A2.36 2.36 0 0 0 50.4 48l4.8-5.85L60 48a2.37 2.37 0 0 0 3.1.38 1.93 1.93 0 0 0 .47-2.83z"
+            fill="#fff"
+        />
+    </AccessibleSVG>
+);
+
+export default IconBoxSquare;

src/icons/general/IconBoxSquare.md

@@ -0,0 +1,3 @@
+```
+<IconBoxSquare />
+```

src/icons/general/IconDoubleArrows.js

@@ -0,0 +1,29 @@
+// @flow
+import * as React from 'react';
+import AccessibleSVG from '../accessible-svg';
+
+type Props = {
+    className?: string,
+    color?: string,
+    height?: number,
+    /** A text-only string describing the icon if it's not purely decorative for accessibility */
+    title?: string | React.Element<any>,
+    width?: number,
+};
+
+const IconDoubleArrows = ({ className = '', color = '#bfbfbf', height = 32, title, width = 32 }: Props) => (
+    <AccessibleSVG
+        className={`icon-double-arrows ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 32 32"
+        width={width}
+    >
+        <path
+            d="M3.8 6l3.5-3.44a1 1 0 0 0 0-1.36 1 1 0 0 0-1.39 0L.72 6.29a1 1 0 0 0 0 1.41l5.19 5.1a1 1 0 0 0 1.39 0 .94.94 0 0 0 0-1.35L3.8 8H23a1 1 0 0 0 0-2zM28.2 24l-3.5-3.44a1 1 0 0 1 0-1.36 1 1 0 0 1 1.39 0l5.19 5.1a1 1 0 0 1 0 1.41l-5.19 5.1a1 1 0 0 1-1.39 0 .94.94 0 0 1 0-1.35L28.2 26H9a1 1 0 0 1 0-2z"
+            fill={color}
+        />
+    </AccessibleSVG>
+);
+
+export default IconDoubleArrows;

src/icons/general/IconDoubleArrows.md

@@ -0,0 +1,3 @@
+```
+<IconDoubleArrows />
+```

src/icons/general/__tests__/IconBoxSquare-test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import IconBoxSquare from '../IconBoxSquare';
+
+describe('icons/general/IconBoxSquare', () => {
+    test('should correctly render default icon', () => {
+        const wrapper = shallow(<IconBoxSquare />);
+
+        expect(wrapper.is('AccessibleSVG')).toBe(true);
+        expect(wrapper.prop('height')).toEqual(72);
+        expect(wrapper.prop('height')).toEqual(72);
+        expect(wrapper.hasClass('box-square-icon')).toEqual(true);
+    });
+
+    test('should correctly render icon with specified width and height', () => {
+        const width = 50;
+        const height = 50;
+        const wrapper = shallow(<IconBoxSquare height={height} width={width} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('width')).toEqual(width);
+        expect(wrapper.find('AccessibleSVG').prop('height')).toEqual(height);
+    });
+
+    test('should correctly render icon with title', () => {
+        const title = 'hellojello';
+        const wrapper = shallow(<IconBoxSquare title={title} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('title')).toEqual(title);
+    });
+});

src/icons/general/__tests__/IconDoubleArrows-test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import IconDoubleArrows from '../IconDoubleArrows';
+
+describe('icons/general/IconDoubleArrows', () => {
+    test('should correctly render default icon', () => {
+        const wrapper = shallow(<IconDoubleArrows />);
+
+        expect(wrapper.hasClass('icon-double-arrows')).toEqual(true);
+    });
+
+    test('should correctly render icon with specified color', () => {
+        const color = '#bfbfbf';
+        const wrapper = shallow(<IconDoubleArrows color={color} />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should correctly render icon with specified width and height', () => {
+        const width = 50;
+        const height = 50;
+        const wrapper = shallow(<IconDoubleArrows height={height} width={width} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('width')).toEqual(width);
+        expect(wrapper.find('AccessibleSVG').prop('height')).toEqual(height);
+    });
+
+    test('should correctly render icon with title', () => {
+        const title = 'whazzah';
+        const wrapper = shallow(<IconDoubleArrows title={title} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('title')).toEqual(title);
+    });
+});

src/icons/general/__tests__/__snapshots__/IconDoubleArrows-test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`icons/general/IconDoubleArrows should correctly render icon with specified color 1`] = `
+<AccessibleSVG
+  className="icon-double-arrows "
+  height={32}
+  viewBox="0 0 32 32"
+  width={32}
+>
+  <path
+    d="M3.8 6l3.5-3.44a1 1 0 0 0 0-1.36 1 1 0 0 0-1.39 0L.72 6.29a1 1 0 0 0 0 1.41l5.19 5.1a1 1 0 0 0 1.39 0 .94.94 0 0 0 0-1.35L3.8 8H23a1 1 0 0 0 0-2zM28.2 24l-3.5-3.44a1 1 0 0 1 0-1.36 1 1 0 0 1 1.39 0l5.19 5.1a1 1 0 0 1 0 1.41l-5.19 5.1a1 1 0 0 1-1.39 0 .94.94 0 0 1 0-1.35L28.2 26H9a1 1 0 0 1 0-2z"
+    fill="#bfbfbf"
+  />
+</AccessibleSVG>
+`;