feat(classification): change icon for classify/classification action (#1520)

Author: feixuanli

src/features/classification/AddClassificationBadge.js

@@ -2,14 +2,14 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import IconAddTags from '../../icons/general/IconAddTags';
+import IconSecurityClassification from '../../icons/general/IconSecurityClassification';
 import { bdlGray62 } from '../../styles/variables';
 import messages from './messages';
 import './AddClassificationBadge.scss';
 
 const AddClassificationBadge = () => (
     <h1 className="bdl-AddClassificationBadge">
-        <IconAddTags color={bdlGray62} height={10} width={10} strokeWidth={3} />
+        <IconSecurityClassification color={bdlGray62} height={10} width={10} />
         <FormattedMessage {...messages.addClassification}>
             {value => <span className="bdl-AddClassificationBadge-name">{value}</span>}
         </FormattedMessage>

src/features/classification/ClassifiedBadge.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 import Tooltip from '../../components/tooltip';
-import IconAddTags from '../../icons/general/IconAddTags';
+import IconSecurityClassification from '../../icons/general/IconSecurityClassification';
 import { bdlYellorange } from '../../styles/variables';
 import type { Position } from '../../components/tooltip';
 import './ClassifiedBadge.scss';
@@ -16,7 +16,7 @@ type Props = {
 const ClassifiedBadge = ({ name, tooltipPosition = 'bottom-center', tooltipText }: Props) => (
     <Tooltip isDisabled={!tooltipText} position={tooltipPosition} text={tooltipText}>
         <h1 className="bdl-ClassifiedBadge">
-            <IconAddTags color={bdlYellorange} height={10} width={10} strokeWidth={3} />
+            <IconSecurityClassification color={bdlYellorange} height={10} width={10} />
             <span className="bdl-ClassifiedBadge-name">{name}</span>
         </h1>
     </Tooltip>

src/features/classification/__tests__/__snapshots__/AddClassificationBadge-test.js.snap

@@ -4,10 +4,9 @@ exports[`features/classification/AddClassificationBadge should render a classifi
 <h1
   className="bdl-AddClassificationBadge"
 >
-  <IconAddTags
+  <IconSecurityClassification
     color="#767676"
     height={10}
-    strokeWidth={3}
     width={10}
   />
   <FormattedMessage

src/features/classification/__tests__/__snapshots__/ClassifiedBadge-test.js.snap

@@ -12,10 +12,9 @@ exports[`features/classification/ClassifiedBadge should render a classified badg
   <h1
     className="bdl-ClassifiedBadge"
   >
-    <IconAddTags
+    <IconSecurityClassification
       color="#f5b31b"
       height={10}
-      strokeWidth={3}
       width={10}
     />
     <span
@@ -38,10 +37,9 @@ exports[`features/classification/ClassifiedBadge should render a classified badg
   <h1
     className="bdl-ClassifiedBadge"
   >
-    <IconAddTags
+    <IconSecurityClassification
       color="#f5b31b"
       height={10}
-      strokeWidth={3}
       width={10}
     />
     <span

src/icons/general/IconSecurityClassification.js

@@ -0,0 +1,48 @@
+// @flow
+import * as React from 'react';
+import classNames from 'classnames';
+
+import AccessibleSVG from '../accessible-svg';
+import { bdlGray } from '../../styles/variables';
+
+type Props = {
+    className?: string,
+    color?: string,
+    height?: number,
+    strokeWidth?: number,
+    /** A text-only string describing the icon if it's not purely decorative for accessibility */
+    title?: string | React.Element<any>,
+    width?: number,
+};
+
+const IconSecurityClassification = ({
+    className = '',
+    height = 32,
+    color = bdlGray,
+    title,
+    strokeWidth = 2,
+    width = 32,
+}: Props) => {
+    const classes = classNames('bdl-IconSecurityClassification', className);
+
+    return (
+        <AccessibleSVG className={classes} height={height} title={title} viewBox="0 0 32 32" width={width}>
+            <path
+                d="M17,2 L5,8 L5,15 C5,21.4214876 10.6933333,29.5421488 17,31 C23.3066667,29.5421488 29,21.4214876 29,15 L29,8 L17,2 Z"
+                stroke={color}
+                strokeWidth={strokeWidth}
+                fill="none"
+            />
+            <path
+                d="M23,11 L23,19"
+                stroke={color}
+                strokeWidth={strokeWidth}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+            />
+        </AccessibleSVG>
+    );
+};
+
+export default IconSecurityClassification;

src/icons/general/IconSecurityClassification.md

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import IconSecurityClassification from '../IconSecurityClassification';
+
+describe('icons/general/IconSecurityClassification', () => {
+    const getWrapper = (props = {}) => shallow(<IconSecurityClassification {...props} />);
+
+    test('should correctly render icon with default values', () => {
+        const wrapper = getWrapper();
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should correctly render icon with all props specified', () => {
+        const wrapper = getWrapper({
+            className: 'test',
+            color: '#987654',
+            height: 100,
+            strokeWidth: 1,
+            title: 'title',
+            width: 200,
+        });
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`icons/general/IconSecurityClassification should correctly render icon with all props specified 1`] = `
+<AccessibleSVG
+  className="bdl-IconSecurityClassification test"
+  height={100}
+  title="title"
+  viewBox="0 0 32 32"
+  width={200}
+>
+  <path
+    d="M17,2 L5,8 L5,15 C5,21.4214876 10.6933333,29.5421488 17,31 C23.3066667,29.5421488 29,21.4214876 29,15 L29,8 L17,2 Z"
+    fill="none"
+    stroke="#987654"
+    strokeWidth={1}
+  />
+  <path
+    d="M23,11 L23,19"
+    fill="none"
+    stroke="#987654"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={1}
+  />
+</AccessibleSVG>
+`;
+
+exports[`icons/general/IconSecurityClassification should correctly render icon with default values 1`] = `
+<AccessibleSVG
+  className="bdl-IconSecurityClassification"
+  height={32}
+  viewBox="0 0 32 32"
+  width={32}
+>
+  <path
+    d="M17,2 L5,8 L5,15 C5,21.4214876 10.6933333,29.5421488 17,31 C23.3066667,29.5421488 29,21.4214876 29,15 L29,8 L17,2 Z"
+    fill="none"
+    stroke="#222"
+    strokeWidth={2}
+  />
+  <path
+    d="M23,11 L23,19"
+    fill="none"
+    stroke="#222"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+  />
+</AccessibleSVG>
+`;