feat(preview): use @box/item-icon markdown icon for loading screen

package.json

@@ -136,7 +136,7 @@
         "@box/content-field": "^1.40.23",
         "@box/copy-input": "^1.42.16",
         "@box/frontend": "^11.0.1",
-        "@box/item-icon": "^2.37.5",
+        "@box/item-icon": "^3.2.0",
         "@box/languages": "^1.0.0",
         "@box/metadata-editor": "^1.73.4",
         "@box/metadata-filter": "^1.80.23",
@@ -305,7 +305,7 @@
         "@box/combobox-with-api": "^1.42.22",
         "@box/content-field": "^1.40.23",
         "@box/copy-input": "^1.42.16",
-        "@box/item-icon": "^2.37.5",
+        "@box/item-icon": "^3.2.0",
         "@box/metadata-editor": "^1.73.4",
         "@box/metadata-filter": "^1.80.23",
         "@box/metadata-template-browser": "^1.24.11",

src/components/preview/__tests__/PreviewLoading.test.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { itemIconTable } from '@box/item-icon';
 import { shallow } from 'enzyme';
 import { PreviewLoading, PreviewLoadingRing, getIcon } from '..';
+import IconFileCode from '../../../icon/content/FileCode32';
 import { bdlBoxBlue } from '../../../styles/variables';
 
 const getWrapper = (props = {}) => shallow(<PreviewLoading {...props} />);
@@ -15,6 +17,20 @@ describe('components/preview/PreviewLoading', () => {
             expect(wrapper.find(PreviewLoadingRing).prop('color')).toEqual('#D0021B');
         });
 
+        test.each(['md', 'markdown', 'mdown'])('should use the Markdown icon for %s files', extension => {
+            const wrapper = getWrapper({ extension });
+
+            expect(getIcon(extension)).toEqual(itemIconTable.markdown);
+            expect(wrapper.children().type()).toEqual(itemIconTable.markdown);
+        });
+
+        test('should keep using the code icon for HTML files', () => {
+            const wrapper = getWrapper({ extension: 'html' });
+
+            expect(getIcon('html')).toEqual(IconFileCode);
+            expect(wrapper.children().type()).toEqual(IconFileCode);
+        });
+
         test('should get a default color and icon if no extension is provided', () => {
             const DefaultIcon = getIcon();
             const wrapper = getWrapper();

src/components/preview/previewIcons.ts

@@ -3,6 +3,9 @@
  * file-specific loading icons for file types that can be previewed. Unsupported files show a default
  * icon, even if they have a relevant thumbnail/icon that is displayed within the item list, for example.
  */
+import { itemIconTable } from '@box/item-icon';
+import type { ComponentType } from 'react';
+
 import * as vars from '../../styles/variables';
 import IconFileAudio from '../../icon/content/FileAudio32';
 import IconFileBoxCanvas from '../../icon/content/FileCanvas32';
@@ -33,11 +36,10 @@ import IconFileWord from '../../icon/content/FileWord32';
 import IconFileXbd from '../../icon/content/FileXbd32';
 import IconFileXdw from '../../icon/content/FileXdw32';
 import IconFileZip from '../../icon/content/FileZip32';
-import { SVGProps } from '../accessible-svg/AccessibleSVG';
 
 type Config = { color: string; icon: Icon };
 type Configs = { [key: string]: Config }; // { docx: { color: '#333', icon: IconFileWord }
-type Icon = (props: SVGProps) => JSX.Element;
+type Icon = ComponentType<{ className?: string }>;
 
 const configs: Configs = {};
 const register = (icon: Icon, color: string, extensions: string[]): void => {
@@ -88,7 +90,6 @@ register(IconFileCode, '#E33D55', [
     'less',
     'm',
     'make',
-    'md',
     'ml',
     'mm',
     'php',
@@ -142,6 +143,7 @@ register(IconFileImage, '#3FB87F', [
 ]);
 register(IconFileIndesign, '#FF57A1', ['idml', 'indd', 'indt', 'inx']);
 register(IconFileKeynote, '#007AFF', ['key']);
+register(itemIconTable.markdown, vars.bdlBoxBlue, ['md', 'markdown', 'mdown']);
 register(IconFileNumbers, '#00A650', ['numbers']);
 register(IconFilePDF, '#D0021B', ['pdf']);
 register(IconFilePages, '#FF9500', ['pages']);

yarn.lock

@@ -1169,10 +1169,10 @@
     rimraf "^3.0.0"
     semver "^7.4.0"
 
-"@box/item-icon@^2.37.5":
-  version "2.37.5"
-  resolved "https://registry.yarnpkg.com/@box/item-icon/-/item-icon-2.37.5.tgz#887b58a66dee13f494d38709d7d6c0f7bdcc995f"
-  integrity sha512-GNcFK2Ehq0RFHxq8lbZD4J9UZZyxf/Y9l4PdoLQsfQWi/phWw27+v5dQBdfTBNHZGmfs4hNe+M2mUxqnOlG+Ng==
+"@box/item-icon@^3.2.0":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@box/item-icon/-/item-icon-3.2.2.tgz#7afa9ddbbd0d519e780c532ad7ec75b037cfc88f"
+  integrity sha512-By6AT/TbrVIgK9dC0YiTh3xmq8NPwQwg1/Wup1VDBKOOYGGlxvxJFyHI6rDDtFEU/cGIiaTKlp+3bbrWeHv3Hg==
 
 "@box/languages@^1.0.0":
   version "1.1.2"