feat(icons): add collections icons for bolt and star (#1338)

* feat(icons): add collections icons for bolt and star

* feat(icons): remove selected prop from collections icons

Author: nickgriffin1

src/icons/collections/IconCollections.js

@@ -9,24 +9,14 @@ type Props = {
     className?: string,
     color?: string,
     height?: number,
-    selected?: boolean,
     /** A text-only string describing the icon if it's not purely decorative for accessibility */
     title?: string | React.Element<any>,
     width?: number,
 };
 
-const IconCollections = ({
-    className = '',
-    color = bdlNeutral03,
-    height = 32,
-    selected = false,
-    title,
-    width = 32,
-}: Props) => (
+const IconCollections = ({ className = '', color = bdlNeutral03, height = 32, title, width = 32 }: Props) => (
     <AccessibleSVG
-        className={classNames('bdl-IconCollections', className, {
-            'is-selected': selected,
-        })}
+        className={classNames('bdl-IconCollections', className)}
         height={height}
         title={title}
         viewBox="0 0 32 32"

src/icons/collections/IconCollectionsAdd.js

@@ -9,24 +9,14 @@ type Props = {
     className?: string,
     color?: string,
     height?: number,
-    selected?: boolean,
     /** A text-only string describing the icon if it's not purely decorative for accessibility */
     title?: string | React.Element<any>,
     width?: number,
 };
 
-const IconCollectionsAdd = ({
-    className = '',
-    color = bdlNeutral03,
-    height = 32,
-    selected = false,
-    title,
-    width = 32,
-}: Props) => (
+const IconCollectionsAdd = ({ className = '', color = bdlNeutral03, height = 32, title, width = 32 }: Props) => (
     <AccessibleSVG
-        className={classNames('bdl-IconCollectionsAdd', className, {
-            'is-selected': selected,
-        })}
+        className={classNames('bdl-IconCollectionsAdd', className)}
         height={height}
         title={title}
         viewBox="0 0 32 32"

src/icons/collections/IconCollectionsBolt.js

@@ -0,0 +1,35 @@
+// @flow
+import * as React from 'react';
+import classNames from 'classnames';
+
+import AccessibleSVG from '../accessible-svg';
+import { bdlNeutral03 } from '../../styles/variables';
+
+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 IconCollectionsBolt = ({ className = '', color = bdlNeutral03, height = 32, title, width = 32 }: Props) => (
+    <AccessibleSVG
+        className={classNames('bdl-IconCollectionsBolt', className)}
+        height={height}
+        title={title}
+        viewBox="0 0 32 32"
+        width={width}
+    >
+        <g className="fill-color" fill={color} fillRule="evenodd">
+            <path d="M24 12.876h-4.187l.065-8.476L14 14.011h4.187l-.065 8.389z" />
+            <path
+                fillRule="nonzero"
+                d="M7.896 0h21.642A2.462 2.462 0 0 1 32 2.462v21.642a2.462 2.462 0 0 1-2.462 2.462H7.896a2.462 2.462 0 0 1-2.462-2.462V2.462A2.462 2.462 0 0 1 7.896 0zm.615 23.49h20.412V3.076H8.511v20.412zM1.509 13.282c.834 0 1.51.676 1.51 1.51V26.52a2.462 2.462 0 0 0 2.461 2.46h11.728a1.51 1.51 0 0 1 0 3.019H4.923A4.923 4.923 0 0 1 0 27.077V14.792a1.51 1.51 0 0 1 1.51-1.509z"
+            />
+        </g>
+    </AccessibleSVG>
+);
+
+export default IconCollectionsBolt;

src/icons/collections/IconCollectionsFilled.js

@@ -9,24 +9,14 @@ type Props = {
     className?: string,
     color?: string,
     height?: number,
-    selected?: boolean,
     /** A text-only string describing the icon if it's not purely decorative for accessibility */
     title?: string | React.Element<any>,
     width?: number,
 };
 
-const IconCollectionsFilled = ({
-    className = '',
-    color = bdlNeutral03,
-    height = 32,
-    selected = false,
-    title,
-    width = 32,
-}: Props) => (
+const IconCollectionsFilled = ({ className = '', color = bdlNeutral03, height = 32, title, width = 32 }: Props) => (
     <AccessibleSVG
-        className={classNames('bdl-IconCollectionsFilled', className, {
-            'is-selected': selected,
-        })}
+        className={classNames('bdl-IconCollectionsFilled', className)}
         height={height}
         title={title}
         viewBox="0 0 32 32"

src/icons/collections/IconCollectionsStar.js

@@ -0,0 +1,34 @@
+// @flow
+import * as React from 'react';
+import classNames from 'classnames';
+
+import AccessibleSVG from '../accessible-svg';
+import { bdlNeutral03 } from '../../styles/variables';
+
+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 IconCollectionsStar = ({ className = '', color = bdlNeutral03, height = 32, title, width = 32 }: Props) => (
+    <AccessibleSVG
+        className={classNames('bdl-IconCollectionsStar', className)}
+        height={height}
+        title={title}
+        viewBox="0 0 32 32"
+        width={width}
+    >
+        <path
+            className="fill-color"
+            d="M7.896 0h21.642A2.462 2.462 0 0 1 32 2.462v21.642a2.462 2.462 0 0 1-2.462 2.462H7.896a2.462 2.462 0 0 1-2.462-2.462V2.462A2.462 2.462 0 0 1 7.896 0zm.615 23.49h20.412V3.076H8.511v20.412zm6.646-2.932c-.691.378-1.486-.258-1.35-1.081l.672-4.07-2.852-2.888c-.575-.583-.268-1.625.513-1.743l3.97-.6 1.769-3.724c.349-.736 1.323-.736 1.672 0l1.77 3.725 3.969.6c.781.117 1.088 1.159.513 1.742l-2.852 2.888.672 4.07c.136.823-.659 1.46-1.35 1.081l-3.558-1.944-3.558 1.944zM1.51 13.283c.834 0 1.51.676 1.51 1.51V26.52a2.462 2.462 0 0 0 2.46 2.46h11.728a1.51 1.51 0 0 1 0 3.019H4.923A4.923 4.923 0 0 1 0 27.077V14.792a1.51 1.51 0 0 1 1.51-1.509z"
+            fill={color}
+            fillRule="nonzero"
+        />
+    </AccessibleSVG>
+);
+
+export default IconCollectionsStar;

src/icons/collections/README.md

@@ -5,6 +5,8 @@ const IconsExample = require('../../../examples/src/IconsExample').default;
 const IconCollections = require('./IconCollections').default;
 const IconCollectionsFilled = require('./IconCollectionsFilled').default;
 const IconCollectionsAdd = require('./IconCollectionsAdd').default;
+const IconCollectionsStar = require('./IconCollectionsStar').default;
+const IconCollectionsBolt = require('./IconCollectionsBolt').default;
 
 const icons = [
     {
@@ -19,6 +21,14 @@ const icons = [
         name: 'IconCollectionsAdd',
         component: IconCollectionsAdd,
     },
+     {
+        name: 'IconCollectionsStar',
+        component: IconCollectionsStar,
+    },
+     {
+        name: 'IconCollectionsBolt',
+        component: IconCollectionsBolt,
+    },
 ];
 
 <IconsExample icons={icons} />

src/icons/collections/__tests__/IconCollectionsBolt-test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import IconCollectionsBolt from '../IconCollectionsBolt';
+
+describe('icons/collections/IconCollectionsBolt', () => {
+    const getWrapper = (props = {}) => shallow(<IconCollectionsBolt {...props} />);
+
+    test('should correctly render default icon', () => {
+        const wrapper = getWrapper();
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});

src/icons/collections/__tests__/IconCollectionsStar-test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import IconCollectionsStar from '../IconCollectionsStar';
+
+describe('icons/collections/IconCollectionsStar', () => {
+    const getWrapper = (props = {}) => shallow(<IconCollectionsStar {...props} />);
+
+    test('should correctly render default icon', () => {
+        const wrapper = getWrapper();
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});

src/icons/collections/__tests__/__snapshots__/IconCollectionsBolt-test.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`icons/collections/IconCollectionsBolt should correctly render default icon 1`] = `
+<AccessibleSVG
+  className="bdl-IconCollectionsBolt"
+  height={32}
+  viewBox="0 0 32 32"
+  width={32}
+>
+  <g
+    className="fill-color"
+    fill="#909090"
+    fillRule="evenodd"
+  >
+    <path
+      d="M24 12.876h-4.187l.065-8.476L14 14.011h4.187l-.065 8.389z"
+    />
+    <path
+      d="M7.896 0h21.642A2.462 2.462 0 0 1 32 2.462v21.642a2.462 2.462 0 0 1-2.462 2.462H7.896a2.462 2.462 0 0 1-2.462-2.462V2.462A2.462 2.462 0 0 1 7.896 0zm.615 23.49h20.412V3.076H8.511v20.412zM1.509 13.282c.834 0 1.51.676 1.51 1.51V26.52a2.462 2.462 0 0 0 2.461 2.46h11.728a1.51 1.51 0 0 1 0 3.019H4.923A4.923 4.923 0 0 1 0 27.077V14.792a1.51 1.51 0 0 1 1.51-1.509z"
+      fillRule="nonzero"
+    />
+  </g>
+</AccessibleSVG>
+`;

src/icons/collections/__tests__/__snapshots__/IconCollectionsStar-test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`icons/collections/IconCollectionsStar should correctly render default icon 1`] = `
+<AccessibleSVG
+  className="bdl-IconCollectionsStar"
+  height={32}
+  viewBox="0 0 32 32"
+  width={32}
+>
+  <path
+    className="fill-color"
+    d="M7.896 0h21.642A2.462 2.462 0 0 1 32 2.462v21.642a2.462 2.462 0 0 1-2.462 2.462H7.896a2.462 2.462 0 0 1-2.462-2.462V2.462A2.462 2.462 0 0 1 7.896 0zm.615 23.49h20.412V3.076H8.511v20.412zm6.646-2.932c-.691.378-1.486-.258-1.35-1.081l.672-4.07-2.852-2.888c-.575-.583-.268-1.625.513-1.743l3.97-.6 1.769-3.724c.349-.736 1.323-.736 1.672 0l1.77 3.725 3.969.6c.781.117 1.088 1.159.513 1.742l-2.852 2.888.672 4.07c.136.823-.659 1.46-1.35 1.081l-3.558-1.944-3.558 1.944zM1.51 13.283c.834 0 1.51.676 1.51 1.51V26.52a2.462 2.462 0 0 0 2.46 2.46h11.728a1.51 1.51 0 0 1 0 3.019H4.923A4.923 4.923 0 0 1 0 27.077V14.792a1.51 1.51 0 0 1 1.51-1.509z"
+    fill="#909090"
+    fillRule="nonzero"
+  />
+</AccessibleSVG>
+`;