feat(icons): add new shield Icon (#1216)

BREAKING CHANGE: Replacing IconShield with a new Icon that represent
Shield. It follows the the 32 x 32 guideline. Please override any style if needed.

Author: Sunyang730

src/icons/general/IconShield.js

@@ -1,35 +1,46 @@
 // @flow
 import * as React from 'react';
 
+import classNames from 'classnames';
 import AccessibleSVG from '../accessible-svg';
+import { boxBlue, white } from '../../styles/variables';
 
 type Props = {
     className?: string,
     color?: string,
     height?: number,
+    opacity?: number,
     /** A text-only string describing the icon if it's not purely decorative for accessibility */
     title?: string | React.Element<any>,
     width?: number,
 };
 
-const IconShield = ({ className = '', color = '#888888', height = 14, title, width = 12 }: Props) => (
+const IconShield = ({ className, color = boxBlue, height = 32, opacity = 0.2, width = 32, title }: Props) => (
     <AccessibleSVG
-        className={`icon-governance ${className}`}
+        className={classNames('bdl-IconShield', className)}
         height={height}
         title={title}
-        viewBox="0 0 12 14"
+        viewBox="0 0 32 32"
         width={width}
     >
-        <g
+        <path
             className="stroke-color"
-            fill="none"
-            fillRule="evenodd"
+            fill={white}
             stroke={color}
             strokeLinecap="round"
             strokeLinejoin="round"
-        >
-            <path d="M.5 1.5S3.25 3.08 6 .5c2.75 2.58 5.5 1 5.5 1v8.88L6 13.5.5 10.37V1.5zM9.5 4.5v4" />
-        </g>
+            strokeWidth="2"
+            d="M3 3.308S9.5 6.962 16 1c6.5 5.962 13 2.308 13 2.308v20.48L16 31 3 23.788V3.308z"
+        />
+        <path className="fill-color" fill={color} fillOpacity={opacity} d="M16 5C10.5 8.5 6 7 6 7v14.712L16 27V5z" />
+        <path
+            className="stroke-color"
+            stroke={color}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M25 10v11"
+        />
     </AccessibleSVG>
 );
 

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

@@ -0,0 +1,41 @@
+// @flow
+import React from 'react';
+
+import IconShield from '../IconShield';
+
+describe('icons/states/IconShield', () => {
+    test('should correctly render default icon', () => {
+        const wrapper = shallow(<IconShield />);
+        expect(wrapper.hasClass('bdl-IconShield')).toBeTruthy();
+    });
+
+    test('should correctly render the icon with specified class', () => {
+        const className = 'my-state';
+        const wrapper = shallow(<IconShield className={className} />);
+
+        expect(wrapper.hasClass(className)).toBeTruthy();
+    });
+
+    test('should correctly render icon with specified width and height', () => {
+        const width = 20;
+        const height = 15;
+        const wrapper = shallow(<IconShield height={height} width={width} />);
+
+        expect(wrapper.prop('width')).toEqual(width);
+        expect(wrapper.prop('height')).toEqual(height);
+    });
+
+    test('should correctly render svg with specified title', () => {
+        const title = 'oh what ever';
+        const wrapper = shallow(<IconShield title={title} />);
+
+        expect(wrapper.prop('title')).toEqual(title);
+    });
+
+    test('should override color in svg when specified', () => {
+        const color = '#bdf';
+        const wrapper = shallow(<IconShield color={color} />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`icons/states/IconShield should override color in svg when specified 1`] = `
+<AccessibleSVG
+  className="bdl-IconShield"
+  height={32}
+  viewBox="0 0 32 32"
+  width={32}
+>
+  <path
+    className="stroke-color"
+    d="M3 3.308S9.5 6.962 16 1c6.5 5.962 13 2.308 13 2.308v20.48L16 31 3 23.788V3.308z"
+    fill="#fff"
+    stroke="#bdf"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+  />
+  <path
+    className="fill-color"
+    d="M16 5C10.5 8.5 6 7 6 7v14.712L16 27V5z"
+    fill="#bdf"
+    fillOpacity={0.2}
+  />
+  <path
+    className="stroke-color"
+    d="M25 10v11"
+    stroke="#bdf"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+  />
+</AccessibleSVG>
+`;