feat(icon): create login and storage icon (#1708)

* feat(icon): create login and storage icon

* feat(icon): address review comments

* feat(icon): Fix typo

Author: indiramuru

src/icons/general/IconLogin.js

@@ -0,0 +1,32 @@
+// @flow
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+import { bdlGray80 } 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 IconLogin = ({ className = '', color = bdlGray80, height = 16, title, width = 16 }: Props) => (
+    <AccessibleSVG
+        className={`bdl-IconLogin ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 16 16"
+        width={width}
+    >
+        <path
+            className="fill-color"
+            fill={color}
+            d="M12,3H4C3.4,3,3,3.4,3,4v8c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1V4C13,3.4,12.6,3,12,3z M12,2c1.1,0,2,0.9,2,2v8c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V4c0-1.1,0.9-2,2-2H12z M8.1,3.9l4.2,4.2l-4.2,4.2l-0.7-0.7l3-3l-6.6,0v-1l6.6,0l-3-3L8.1,3.9z"
+        />
+    </AccessibleSVG>
+);
+
+export default IconLogin;

src/icons/general/IconLogin.md

@@ -0,0 +1,3 @@
+```js
+<IconLogin />
+```

src/icons/general/IconStorage.js

@@ -0,0 +1,41 @@
+// @flow
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+import { bdlGreenLight } from '../../styles/variables';
+
+type Props = {
+    className?: string,
+    color?: string,
+    height?: number,
+    title?: string,
+    width?: number,
+};
+
+const IconStorage = ({ className = '', color = bdlGreenLight, height = 12, title, width = 16 }: Props) => (
+    <AccessibleSVG
+        className={`bdl-IconStorage ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 16 12"
+        width={width}
+    >
+        <rect
+            className="background-color"
+            clipRule="evenodd"
+            fill="#D8D8D8"
+            fillOpacity="0"
+            fillRule="evenodd"
+            height="16"
+            width="16"
+            y="-2"
+        />
+        <path
+            className="fill-color"
+            d="M12,1c0-0.6,0.4-1,1-1h2c0.6,0,1,0.4,1,1v10c0,0.6-0.4,1-1,1h-2c-0.6,0-1-0.4-1-1V1z M6,3c0-0.6,0.4-1,1-1h2c0.6,0,1,0.4,1,1v8c0,0.6-0.4,1-1,1H7c-0.6,0-1-0.4-1-1V3z M0,7c0-0.6,0.4-1,1-1h2c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V7z"
+            fill={color}
+        />
+    </AccessibleSVG>
+);
+
+export default IconStorage;

src/icons/general/IconStorage.md

@@ -0,0 +1,3 @@
+```js
+<IconStorage />
+```

src/icons/general/__tests__/IconLogin.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import IconLogin from '../IconLogin';
+
+describe('icons/general/IconLogin', () => {
+    test('should correctly render default icon', () => {
+        const wrapper = shallow(<IconLogin />);
+
+        expect(wrapper.is('AccessibleSVG')).toBe(true);
+        expect(wrapper.prop('height')).toEqual(16);
+        expect(wrapper.prop('width')).toEqual(16);
+        expect(wrapper.find('path').prop('fill')).toEqual('#4e4e4e');
+    });
+
+    test('should correctly render icon with specified class', () => {
+        const wrapper = shallow(<IconLogin className="test" />);
+
+        expect(wrapper.hasClass('bdl-IconLogin')).toBe(true);
+        expect(wrapper.hasClass('test')).toBe(true);
+    });
+
+    test('should correctly render icon with specified color', () => {
+        const color = 'green';
+        const wrapper = shallow(<IconLogin color={color} />);
+
+        expect(wrapper.find('path').prop('fill')).toEqual(color);
+    });
+
+    test('should correctly render icon with specified width and height', () => {
+        const width = 16;
+        const height = 17;
+        const wrapper = shallow(<IconLogin 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 = 'hello';
+        const wrapper = shallow(<IconLogin title={title} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('title')).toEqual(title);
+    });
+});

src/icons/general/__tests__/IconStorage.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import IconStorage from '../IconStorage';
+
+describe('icons/general/IconStorage', () => {
+    test('should correctly render default icon', () => {
+        const wrapper = shallow(<IconStorage />);
+
+        expect(wrapper.is('AccessibleSVG')).toBe(true);
+        expect(wrapper.prop('height')).toEqual(12);
+        expect(wrapper.prop('width')).toEqual(16);
+        expect(wrapper.find('path').prop('fill')).toEqual('#26c281');
+    });
+
+    test('should correctly render icon with specified class', () => {
+        const wrapper = shallow(<IconStorage className="test" />);
+
+        expect(wrapper.hasClass('bdl-IconStorage')).toBe(true);
+        expect(wrapper.hasClass('test')).toBe(true);
+    });
+
+    test('should correctly render icon with specified color', () => {
+        const color = 'green';
+        const wrapper = shallow(<IconStorage color={color} />);
+
+        expect(wrapper.find('path').prop('fill')).toEqual(color);
+    });
+
+    test('should correctly render icon with specified width and height', () => {
+        const width = 16;
+        const height = 17;
+        const wrapper = shallow(<IconStorage 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 = 'hello';
+        const wrapper = shallow(<IconStorage title={title} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('title')).toEqual(title);
+    });
+});