box-ui-elements 15.0.0-beta.7 → 15.0.0

package/src/icons/file-icon/FileIcon.js.flow

@@ -130,7 +130,7 @@ const EXTENSIONS = {
         'wabba',
         'yaml',
     ]),
-    IconFileDocument: mirror(['csv', 'dot', 'dotx', 'msg', 'odt', 'rtf', 'tsv', 'wpd', 'xhtml', 'xml', 'xsd', 'xsl']),
+    IconFileDocument: mirror(['dot', 'dotx', 'msg', 'odt', 'rtf', 'wpd', 'xhtml', 'xml', 'xsd', 'xsl']),
     IconFileDwg: mirror(['dwg', 'dwgzip']),
     IconFileExcelSpreadsheet: mirror(['xls', 'xlsx', 'xlsm', 'xlsb']),
     IconFileGoogleDocs: mirror(['gdoc']),
@@ -161,7 +161,7 @@ const EXTENSIONS = {
     IconFilePresentation: mirror(['odp', 'otp', 'pot', 'potx']),
     IconFilePowerpointPresentation: mirror(['ppt', 'pptx', 'pptm']),
     IconFilePhotoshop: mirror(['psd']),
-    IconFileSpreadsheet: mirror(['ods', 'xlt', 'xltx']),
+    IconFileSpreadsheet: mirror(['csv', 'ods', 'tsv', 'xlt', 'xltx']),
     IconFileText: mirror(['txt', 'vi', 'vim', 'webdoc']),
     IconFileThreeD: mirror(['3ds', 'dae', 'fbx', 'obj', 'ply', 'stl']),
     IconFileVideo: mirror([

package/src/icons/file-icon/FileIcon.tsx

@@ -27,6 +27,8 @@ import IconFileThreeD from '../../icon/content/FileThreeD32';
 import IconFileVector from '../../icon/content/FileVector32';
 import IconFileVideo from '../../icon/content/FileVideo32';
 import IconFileWordDocument from '../../icon/content/FileWord32';
+import IconFileXbd from '../../icon/content/FileXbd32';
+import IconFileXdw from '../../icon/content/FileXdw32';
 import IconFileZip from '../../icon/content/FileZip32';
 
 const Components: { [key: string]: (props: SVGProps) => JSX.Element } = {
@@ -56,6 +58,8 @@ const Components: { [key: string]: (props: SVGProps) => JSX.Element } = {
     IconFileVector,
     IconFileVideo,
     IconFileWordDocument,
+    IconFileXbd,
+    IconFileXdw,
     IconFileZip,
 };
 
@@ -131,7 +135,7 @@ const EXTENSIONS: { [key: string]: { [key: string]: string } } = {
         'wabba',
         'yaml',
     ]),
-    IconFileDocument: mirror(['csv', 'dot', 'dotx', 'msg', 'odt', 'rtf', 'tsv', 'wpd', 'xhtml', 'xml', 'xsd', 'xsl']),
+    IconFileDocument: mirror(['dot', 'dotx', 'msg', 'odt', 'rtf', 'wpd', 'xhtml', 'xml', 'xsd', 'xsl']),
     IconFileDwg: mirror(['dwg', 'dwgzip']),
     IconFileExcelSpreadsheet: mirror(['xls', 'xlsx', 'xlsm', 'xlsb']),
     IconFileGoogleDocs: mirror(['gdoc']),
@@ -162,7 +166,7 @@ const EXTENSIONS: { [key: string]: { [key: string]: string } } = {
     IconFilePresentation: mirror(['odp', 'otp', 'pot', 'potx']),
     IconFilePowerpointPresentation: mirror(['ppt', 'pptx', 'pptm']),
     IconFilePhotoshop: mirror(['psd']),
-    IconFileSpreadsheet: mirror(['ods', 'xlt', 'xltx']),
+    IconFileSpreadsheet: mirror(['csv', 'ods', 'tsv', 'xlt', 'xltx']),
     IconFileText: mirror(['txt', 'vi', 'vim', 'webdoc']),
     IconFileThreeD: mirror(['3ds', 'dae', 'fbx', 'obj', 'ply', 'stl']),
     IconFileVideo: mirror([
@@ -184,6 +188,8 @@ const EXTENSIONS: { [key: string]: { [key: string]: string } } = {
         'wmv',
     ]),
     IconFileWordDocument: mirror(['docx', 'doc', 'docm']),
+    IconFileXbd: mirror(['xbd']),
+    IconFileXdw: mirror(['xdw']),
     IconFileZip: mirror(['rar', 'tgz', 'zip']),
 };
 

package/src/icons/file-icon/__tests__/FileIcon.test.tsx

@@ -10,76 +10,35 @@ describe('icons/file-icon/FileIcon', () => {
 
         expect(wrapper).toMatchSnapshot();
     });
-    [
-        {
-            extension: 'doc',
-        },
-        {
-            extension: 'docx',
-        },
-        {
-            extension: 'docm',
-        },
-        {
-            extension: 'gdoc',
-        },
-        {
-            extension: 'gsheet',
-        },
-        {
-            extension: 'gslides',
-        },
-        {
-            extension: 'gslide',
-        },
-        {
-            extension: 'key',
-        },
-        {
-            extension: 'numbers',
-        },
-        {
-            extension: 'pages',
-        },
-        {
-            extension: 'ppt',
-        },
-        {
-            extension: 'pptx',
-        },
-        {
-            extension: 'pptm',
-        },
-        {
-            extension: 'xls',
-        },
-        {
-            extension: 'xlsm',
-        },
-        {
-            extension: 'xlsb',
-        },
-        {
-            extension: 'zip',
-        },
-        {
-            extension: 'heic',
-        },
-        {
-            extension: 'heif',
-        },
-        {
-            extension: 'HEIC',
-        },
-        {
-            extension: 'HEIF',
-        },
-    ].forEach(({ extension }) => {
-        test('should render the expected icon when extension is defined', () => {
-            const wrapper = getWrapper({ extension });
 
-            expect(wrapper).toMatchSnapshot();
-        });
+    test.each([
+        'doc',
+        'docx',
+        'docm',
+        'gdoc',
+        'gsheet',
+        'gslides',
+        'gslide',
+        'key',
+        'numbers',
+        'pages',
+        'ppt',
+        'pptx',
+        'pptm',
+        'xls',
+        'xlsm',
+        'xlsb',
+        'zip',
+        'heic',
+        'heif',
+        'HEIC',
+        'HEIF',
+        'xbd',
+        'xdw',
+    ])(`should render the expected icon when %s is defined`, extension => {
+        const wrapper = getWrapper({ extension });
+
+        expect(wrapper).toMatchSnapshot();
     });
 
     test('should render 64 icon when dimension is defined', () => {

package/src/icons/file-icon/__tests__/__snapshots__/FileIcon.test.tsx.snap

@@ -14,148 +14,162 @@ exports[`icons/file-icon/FileIcon should render default 32 icon when no extensio
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 1`] = `
+exports[`icons/file-icon/FileIcon should render the expected icon when HEIC is defined 1`] = `
+<FileImage32
+  height={32}
+  width={32}
+/>
+`;
+
+exports[`icons/file-icon/FileIcon should render the expected icon when HEIF is defined 1`] = `
+<FileImage32
+  height={32}
+  width={32}
+/>
+`;
+
+exports[`icons/file-icon/FileIcon should render the expected icon when doc is defined 1`] = `
 <FileWord32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 2`] = `
+exports[`icons/file-icon/FileIcon should render the expected icon when docm is defined 1`] = `
 <FileWord32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 3`] = `
+exports[`icons/file-icon/FileIcon should render the expected icon when docx is defined 1`] = `
 <FileWord32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 4`] = `
+exports[`icons/file-icon/FileIcon should render the expected icon when gdoc is defined 1`] = `
 <FileDocs32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 5`] = `
+exports[`icons/file-icon/FileIcon should render the expected icon when gsheet is defined 1`] = `
 <FileSheets32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 6`] = `
+exports[`icons/file-icon/FileIcon should render the expected icon when gslide is defined 1`] = `
 <FileSlides32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 7`] = `
+exports[`icons/file-icon/FileIcon should render the expected icon when gslides is defined 1`] = `
 <FileSlides32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 8`] = `
-<FileKeynote32
+exports[`icons/file-icon/FileIcon should render the expected icon when heic is defined 1`] = `
+<FileImage32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 9`] = `
-<FileNumbers32
+exports[`icons/file-icon/FileIcon should render the expected icon when heif is defined 1`] = `
+<FileImage32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 10`] = `
-<FilePages32
+exports[`icons/file-icon/FileIcon should render the expected icon when key is defined 1`] = `
+<FileKeynote32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 11`] = `
-<FilePowerpoint32
+exports[`icons/file-icon/FileIcon should render the expected icon when numbers is defined 1`] = `
+<FileNumbers32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 12`] = `
-<FilePowerpoint32
+exports[`icons/file-icon/FileIcon should render the expected icon when pages is defined 1`] = `
+<FilePages32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 13`] = `
+exports[`icons/file-icon/FileIcon should render the expected icon when ppt is defined 1`] = `
 <FilePowerpoint32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 14`] = `
-<FileExcel32
+exports[`icons/file-icon/FileIcon should render the expected icon when pptm is defined 1`] = `
+<FilePowerpoint32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 15`] = `
-<FileExcel32
+exports[`icons/file-icon/FileIcon should render the expected icon when pptx is defined 1`] = `
+<FilePowerpoint32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 16`] = `
-<FileExcel32
+exports[`icons/file-icon/FileIcon should render the expected icon when xbd is defined 1`] = `
+<FileXbd32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 17`] = `
-<FileZip32
+exports[`icons/file-icon/FileIcon should render the expected icon when xdw is defined 1`] = `
+<FileXdw32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 18`] = `
-<FileImage32
+exports[`icons/file-icon/FileIcon should render the expected icon when xls is defined 1`] = `
+<FileExcel32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 19`] = `
-<FileImage32
+exports[`icons/file-icon/FileIcon should render the expected icon when xlsb is defined 1`] = `
+<FileExcel32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 20`] = `
-<FileImage32
+exports[`icons/file-icon/FileIcon should render the expected icon when xlsm is defined 1`] = `
+<FileExcel32
   height={32}
   width={32}
 />
 `;
 
-exports[`icons/file-icon/FileIcon should render the expected icon when extension is defined 21`] = `
-<FileImage32
+exports[`icons/file-icon/FileIcon should render the expected icon when zip is defined 1`] = `
+<FileZip32
   height={32}
   width={32}
 />

package/src/icons/general/IconSearch.js.flow

@@ -6,7 +6,7 @@ import { bdlGray40 } from '../../styles/variables';
 
 import type { Icon } from '../flowTypes';
 
-const IconSearch = ({ className = 'icon-search', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
+const IconSearch = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
     <AccessibleSVG
         className={`icon-search ${className}`}
         height={height}

package/src/icons/general/IconSearch.tsx

@@ -5,7 +5,7 @@ import { bdlGray40 } from '../../styles/variables';
 
 import { Icon } from '../iconTypes';
 
-const IconSearch = ({ className = 'icon-search', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
+const IconSearch = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
     <AccessibleSVG
         className={`icon-search ${className}`}
         height={height}

package/src/icons/general/IconSearchJuicy.js.flow

@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+import { bdlGray40 } from '../../styles/variables';
+
+import type { Icon } from '../flowTypes';
+
+const IconSearchJuicy = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
+    <AccessibleSVG
+        className={`icon-search-juicy ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 24 24"
+        width={width}
+    >
+        <path
+            className="fill-color"
+            d="M10.491 1.5a8.99 8.99 0 0 1 7.359 14.157l4.21 4.21a1.5 1.5 0 0 1 0 2.123l-.07.07a1.5 1.5 0 0 1-2.122 0l-4.211-4.21A8.99 8.99 0 1 1 10.491 1.5zm0 2.997a5.994 5.994 0 1 0 0 11.988 5.994 5.994 0 0 0 0-11.988z"
+            fill={color}
+            fillRule="evenodd"
+        />
+    </AccessibleSVG>
+);
+
+export default IconSearchJuicy;

package/src/icons/general/IconSearchJuicy.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+import { bdlGray40 } from '../../styles/variables';
+
+import { Icon } from '../iconTypes';
+
+const IconSearchJuicy = ({ className = '', color = bdlGray40, height = 14, title, width = 14 }: Icon) => (
+    <AccessibleSVG
+        className={`icon-search-juicy ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 24 24"
+        width={width}
+    >
+        <path
+            className="fill-color"
+            d="M10.491 1.5a8.99 8.99 0 0 1 7.359 14.157l4.21 4.21a1.5 1.5 0 0 1 0 2.123l-.07.07a1.5 1.5 0 0 1-2.122 0l-4.211-4.21A8.99 8.99 0 1 1 10.491 1.5zm0 2.997a5.994 5.994 0 1 0 0 11.988 5.994 5.994 0 0 0 0-11.988z"
+            fill={color}
+            fillRule="evenodd"
+        />
+    </AccessibleSVG>
+);
+
+export default IconSearchJuicy;

package/src/icons/general/README.md

@@ -901,6 +901,11 @@ width?: number,
         component: require('./IconSearch').default,
         propsDocumentation: iconPropsDocumentation,
     },
+    {
+        name: 'IconSearchJuicy',
+        component: require('./IconSearchJuicy').default,
+        propsDocumentation: iconPropsDocumentation,
+    },
     {
         name: 'IconSecurityClassification',
         component: require('./IconSecurityClassification').default,

package/src/icons/general/__tests__/IconSearchJuicy.test.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import IconSearchJuicy from '../IconSearchJuicy';
+import { bdlGray40 } from '../../../styles/variables';
+
+describe('icons/general/IconSearchJuicy', () => {
+    test('should correctly render default icon with default color', () => {
+        const dimension = 14;
+        const wrapper = shallow(<IconSearchJuicy />);
+
+        expect(wrapper.hasClass('icon-search-juicy')).toEqual(true);
+        expect(wrapper.find('path').prop('fill')).toEqual(bdlGray40);
+        expect(wrapper.find('AccessibleSVG').prop('width')).toEqual(dimension);
+        expect(wrapper.find('AccessibleSVG').prop('height')).toEqual(dimension);
+    });
+
+    test('should correctly render icon with specified color', () => {
+        const color = '#fcfcfc';
+        const wrapper = shallow(<IconSearchJuicy color={color} />);
+
+        expect(wrapper.find('path').prop('fill')).toEqual(color);
+    });
+
+    test('should correctly render icon with specified width and height', () => {
+        const dimension = 16;
+        const wrapper = shallow(<IconSearchJuicy height={dimension} width={dimension} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('width')).toEqual(dimension);
+        expect(wrapper.find('AccessibleSVG').prop('height')).toEqual(dimension);
+    });
+
+    test('should correctly render icon with title', () => {
+        const title = 'abcde';
+        const wrapper = shallow(<IconSearchJuicy title={title} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('title')).toEqual(title);
+    });
+});

package/src/icons/google-docs/IconGoogle.js.flow

@@ -0,0 +1,57 @@
+// @flow
+import * as React from 'react';
+import uniqueId from 'lodash/uniqueId';
+
+import AccessibleSVG from '../accessible-svg';
+
+const ICON_CLASS = 'icon-google';
+
+type Props = {
+    className: 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,
+};
+
+class IconGoogleDefault extends React.Component<Props> {
+    static defaultProps = {
+        className: '',
+        height: 30,
+        width: 30,
+    };
+
+    idPrefix = `${uniqueId(ICON_CLASS)}-`;
+
+    render() {
+        const { className, height, title, width } = this.props;
+        return (
+            <AccessibleSVG
+                className={`${ICON_CLASS} ${className}`}
+                height={height}
+                title={title}
+                viewBox="0 0 14 14"
+                width={width}
+            >
+                <path
+                    d="M13.3684 7.12062C13.3684 6.59531 13.3258 6.21198 13.2336 5.81445H7.23511V8.18542H10.7561C10.6851 8.77463 10.3018 9.66198 9.44991 10.2582L9.43797 10.3376L11.3346 11.8069L11.466 11.82C12.6727 10.7055 13.3684 9.06567 13.3684 7.12062Z"
+                    fill="#4285F4"
+                />
+                <path
+                    d="M7.23502 13.3675C8.95999 13.3675 10.4081 12.7996 11.4659 11.82L9.44982 10.2582C8.91032 10.6344 8.18623 10.8971 7.23502 10.8971C5.54552 10.8971 4.11158 9.78262 3.60042 8.24219L3.52549 8.24855L1.55338 9.77479L1.52759 9.84648C2.5782 11.9335 4.73623 13.3675 7.23502 13.3675Z"
+                    fill="#34A853"
+                />
+                <path
+                    d="M3.60049 8.24224C3.46561 7.84472 3.38756 7.41876 3.38756 6.97866C3.38756 6.53851 3.46561 6.1126 3.59339 5.71507L3.58982 5.63041L1.59299 4.07965L1.52766 4.11073C1.09465 4.97679 0.846191 5.94934 0.846191 6.97866C0.846191 8.00798 1.09465 8.98048 1.52766 9.84654L3.60049 8.24224Z"
+                    fill="#FBBC05"
+                />
+                <path
+                    d="M7.23502 3.06008C8.43469 3.06008 9.24394 3.57829 9.70537 4.01134L11.5085 2.25083C10.4011 1.22152 8.96 0.589722 7.23502 0.589722C4.73623 0.589722 2.5782 2.02366 1.52759 4.11069L3.59332 5.71503C4.11158 4.1746 5.54552 3.06008 7.23502 3.06008Z"
+                    fill="#EB4335"
+                />
+            </AccessibleSVG>
+        );
+    }
+}
+
+export default IconGoogleDefault;

package/src/icons/google-docs/IconGoogle.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import uniqueId from 'lodash/uniqueId';
+
+import AccessibleSVG from '../accessible-svg';
+
+import { TwoTonedIcon } from '../iconTypes';
+
+const ICON_CLASS = 'icon-google';
+
+class IconGoogle extends React.Component<TwoTonedIcon> {
+    static defaultProps = {
+        className: '',
+        height: 30,
+        width: 30,
+    };
+
+    idPrefix = `${uniqueId(ICON_CLASS)}-`;
+
+    render() {
+        const { className, height, title, width } = this.props;
+        return (
+            <AccessibleSVG
+                className={`${ICON_CLASS} ${className}`}
+                height={height}
+                title={title}
+                viewBox="0 0 14 14"
+                width={width}
+            >
+                <path
+                    d="M13.3684 7.12062C13.3684 6.59531 13.3258 6.21198 13.2336 5.81445H7.23511V8.18542H10.7561C10.6851 8.77463 10.3018 9.66198 9.44991 10.2582L9.43797 10.3376L11.3346 11.8069L11.466 11.82C12.6727 10.7055 13.3684 9.06567 13.3684 7.12062Z"
+                    fill="#4285F4"
+                />
+                <path
+                    d="M7.23502 13.3675C8.95999 13.3675 10.4081 12.7996 11.4659 11.82L9.44982 10.2582C8.91032 10.6344 8.18623 10.8971 7.23502 10.8971C5.54552 10.8971 4.11158 9.78262 3.60042 8.24219L3.52549 8.24855L1.55338 9.77479L1.52759 9.84648C2.5782 11.9335 4.73623 13.3675 7.23502 13.3675Z"
+                    fill="#34A853"
+                />
+                <path
+                    d="M3.60049 8.24224C3.46561 7.84472 3.38756 7.41876 3.38756 6.97866C3.38756 6.53851 3.46561 6.1126 3.59339 5.71507L3.58982 5.63041L1.59299 4.07965L1.52766 4.11073C1.09465 4.97679 0.846191 5.94934 0.846191 6.97866C0.846191 8.00798 1.09465 8.98048 1.52766 9.84654L3.60049 8.24224Z"
+                    fill="#FBBC05"
+                />
+                <path
+                    d="M7.23502 3.06008C8.43469 3.06008 9.24394 3.57829 9.70537 4.01134L11.5085 2.25083C10.4011 1.22152 8.96 0.589722 7.23502 0.589722C4.73623 0.589722 2.5782 2.02366 1.52759 4.11069L3.59332 5.71503C4.11158 4.1746 5.54552 3.06008 7.23502 3.06008Z"
+                    fill="#EB4335"
+                />
+            </AccessibleSVG>
+        );
+    }
+}
+
+export default IconGoogle;

package/src/icons/google-docs/__tests__/IconGoogle.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import IconGoogle from '../IconGoogle';
+
+describe('icons/google-docs/IconGoogle', () => {
+    const getWrapper = (props = {}) => shallow(<IconGoogle {...props} />);
+
+    test('should correctly render default icon', () => {
+        const wrapper = getWrapper();
+
+        expect(wrapper.is('AccessibleSVG')).toBe(true);
+        expect(wrapper.hasClass('icon-google')).toBe(true);
+        expect(wrapper.prop('height')).toEqual(30);
+        expect(wrapper.prop('width')).toEqual(30);
+    });
+
+    test('should correctly render icon with specified class', () => {
+        const className = 'test';
+        const wrapper = getWrapper({ className });
+
+        expect(wrapper.hasClass(className)).toBe(true);
+    });
+
+    test('should correctly render icon with specified height', () => {
+        const height = 17;
+        const wrapper = getWrapper({ height });
+
+        expect(wrapper.prop('height')).toEqual(height);
+    });
+
+    test('should correctly render icon with specified title', () => {
+        const title = 'fool';
+        const wrapper = getWrapper({ title });
+
+        expect(wrapper.prop('title')).toEqual(title);
+    });
+
+    test('should correctly render icon with specified width', () => {
+        const width = 17;
+        const wrapper = getWrapper({ width });
+
+        expect(wrapper.prop('width')).toEqual(width);
+    });
+});

package/src/icons/item-icon/ItemIcon.tsx

@@ -26,6 +26,8 @@ import IconFileThreeD from '../../icon/content/FileThreeD32';
 import IconFileVector from '../../icon/content/FileVector32';
 import IconFileVideo from '../../icon/content/FileVideo32';
 import IconFileWordDocument from '../../icon/content/FileWord32';
+import IconFileXbd from '../../icon/content/FileXbd32';
+import IconFileXdw from '../../icon/content/FileXdw32';
 import IconFileZip from '../../icon/content/FileZip32';
 
 import BookmarkIcon from '../../icon/content/FileBookmark32';
@@ -41,6 +43,8 @@ const itemIconTable = {
     code: IconFileCode,
     default: IconFileDefault,
     document: IconFileText,
+    'docuworks-binder': IconFileXbd,
+    'docuworks-file': IconFileXdw,
     dwg: IconFileDwg,
     'excel-spreadsheet': IconFileExcelSpreadsheet,
     'folder-collab': IconFolderCollab,