chore: convert disparate icons to single icon component

carbon-design-system · Aug 1, 2019 · 6b75208 · 6b75208
1 parent 92e1efd
commit 6b75208
Show file tree

Hide file tree

Showing 56 changed files with 257 additions and 216 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -3,5 +3,12 @@
   "rules": {
     "react/prop-types": 0,
     "react/forbid-prop-types": 0
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": "src"
+      }
+    }
   }
 }
diff --git a/src/components/ColorTokenTable/color-tokens.js b/src/components/ColorTokenTable/color-tokens.js
@@ -1144,4 +1144,3 @@ const colorTokens = {
 };
 
 export default colorTokens;
-
diff --git a/src/components/MdxIcon/MdxIcon.module.scss b/src/components/MdxIcon/MdxIcon.module.scss
@@ -0,0 +1,8 @@
+.mdx-icon {
+  width: 32px;
+  object-fit: contain;
+  position: relative;
+  display: inline-block;
+  user-select: none;
+  vertical-align: text-bottom;
+}
diff --git a/src/components/MdxIcon/icons/ase.png b/src/components/MdxIcon/icons/ase.png
diff --git a/src/components/MdxIcon/icons/ase.svg b/src/components/MdxIcon/icons/ase.svg
diff --git a/src/components/MdxIcon/icons/codesandbox.svg b/src/components/MdxIcon/icons/codesandbox.svg
diff --git a/src/components/MdxIcon/icons/sketch.svg b/src/components/MdxIcon/icons/sketch.svg
diff --git a/src/components/MdxIcon/index.js b/src/components/MdxIcon/index.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { LogoGithub32, Bee32 } from '@carbon/icons-react';
+import { mdxIcon } from './MdxIcon.module.scss';
+
+import sketch from './icons/sketch.svg';
+import ase from './icons/ase.png';
+import codesandbox from './icons/codesandbox.svg';
+
+const localIcons = {
+  sketch,
+  ase,
+  codesandbox,
+};
+
+const carbonIcons = {
+  github: LogoGithub32,
+  bee: Bee32,
+};
+
+const MdxIcon = ({ name }) => {
+  if (localIcons[name]) {
+    return (
+      <img className={mdxIcon} alt={`${name} icon`} src={localIcons[name]} />
+    );
+  }
+
+  if (carbonIcons[name]) {
+    const Icon = carbonIcons[name];
+    return <Icon className={mdxIcon} />;
+  }
+
+  return null;
+};
+
+export default MdxIcon;
diff --git a/src/gatsby-theme-carbon/components/MDXProvider/defaultComponents.js b/src/gatsby-theme-carbon/components/MDXProvider/defaultComponents.js
@@ -3,10 +3,12 @@ import defaultComponents from 'gatsby-theme-carbon/src/components/MDXProvider/de
 import ComponentDocs from '../../../components/ComponentDocs';
 import ComponentCode from '../../../components/ComponentCode';
 import ComponentReact from '../../../components/ComponentReact';
+import MdxIcon from '../../../components/MdxIcon';
 
 export default {
   ...defaultComponents,
   ComponentDocs,
   ComponentCode,
   ComponentReact,
+  MdxIcon,
 };
diff --git a/src/images/github-icon.png b/src/images/github-icon.png
diff --git a/src/pages/components/UI-shell-header/images/sketch-icon.png b/src/pages/components/UI-shell-header/images/sketch-icon.png
diff --git a/src/pages/components/UI-shell-header/usage.mdx b/src/pages/components/UI-shell-header/usage.mdx
@@ -19,16 +19,14 @@ tabs: ['Code', 'Usage', 'Style']
 ## Resources
 
 <Row className="tile--resource--no-margin tile--group">
-<Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
-  <ResourceCard
-    title="UI Shell template"
-    href="https://sketch.cloud/s/EjVmA"
-    type="resource">
-
-![](/images/sketch-icon.png)
-
-  </ResourceCard>
-</Column>
+  <Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
+    <ResourceCard
+      title="UI Shell template"
+      href="https://sketch.cloud/s/EjVmA"
+      type="resource">
+      <MdxIcon name="sketch" />
+    </ResourceCard>
+  </Column>
 </Row>
 
 ## General guidance

diff --git a/src/pages/components/UI-shell-left-panel/images/sketch-icon.png b/src/pages/components/UI-shell-left-panel/images/sketch-icon.png
diff --git a/src/pages/components/UI-shell-left-panel/usage.mdx b/src/pages/components/UI-shell-left-panel/usage.mdx
@@ -16,16 +16,14 @@ tabs: ['Code', 'Usage', 'Style']
 ## Resources
 
 <Row className="tile--resource--no-margin tile--group">
-<Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
-  <ResourceCard
-    title="UI Shell template"
-    href="https://sketch.cloud/s/EjVmA"
-    type="resource">
-
-![](/images/sketch-icon.png)
-
-  </ResourceCard>
-</Column>
+  <Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
+    <ResourceCard
+      title="UI Shell template"
+      href="https://sketch.cloud/s/EjVmA"
+      type="resource">
+      <MdxIcon name="sketch" />
+    </ResourceCard>
+  </Column>
 </Row>
 
 ## General guidance

diff --git a/src/pages/components/UI-shell-right-panel/images/sketch-icon.png b/src/pages/components/UI-shell-right-panel/images/sketch-icon.png
diff --git a/src/pages/components/UI-shell-right-panel/usage.mdx b/src/pages/components/UI-shell-right-panel/usage.mdx
@@ -16,16 +16,14 @@ tabs: ['Code', 'Usage', 'Style']
 ## Resources
 
 <Row className="tile--resource--no-margin tile--group">
-<Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
-  <ResourceCard
-    title="UI Shell template"
-    href="https://sketch.cloud/s/EjVmA"
-    type="resource">
-
-![](/images/sketch-icon.png)
-
-  </ResourceCard>
-</Column>
+  <Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
+    <ResourceCard
+      title="UI Shell template"
+      href="https://sketch.cloud/s/EjVmA"
+      type="resource">
+      <MdxIcon name="sketch" />
+    </ResourceCard>
+  </Column>
 </Row>
 
 ## General guidance

diff --git a/src/pages/contributions/component/images/github-icon.png b/src/pages/contributions/component/images/github-icon.png
diff --git a/src/pages/contributions/component/index.mdx b/src/pages/contributions/component/index.mdx
@@ -57,7 +57,7 @@ The component or enhancement must be built in one of our supported frameworks (V
       href="https://github.com/carbon-design-system/carbon/blob/master/.github/CONTRIBUTING.md"
       type="resource">
 
-![](/images/github-icon.png)
+<MdxIcon name="github" />
 
   </ResourceCard>
 </Column>
@@ -67,7 +67,7 @@ The component or enhancement must be built in one of our supported frameworks (V
     href="https://github.com/IBM/carbon-components-angular/blob/master/README.md#contributing"
     type="resource">
 
-![](/images/github-icon.png)
+<MdxIcon name="github" />
 
   </ResourceCard>
 
@@ -79,7 +79,7 @@ The component or enhancement must be built in one of our supported frameworks (V
       href="https://github.com/carbon-design-system/carbon-components-vue/blob/master/.github/CONTRIBUTING.md"
       type="resource">
 
-![](/images/github-icon.png)
+<MdxIcon name="github" />
 
   </ResourceCard>
 </Column>

diff --git a/src/pages/experimental/chatbot/content.mdx b/src/pages/experimental/chatbot/content.mdx
@@ -8,16 +8,14 @@ tabs: ['Overview', 'Usage', 'Content']
 ## Resources
 
 <Row className="tile--resource--no-margin tile--group">
-<Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
-  <ResourceCard
-    title="IBM Design for AI: Conversation"
-    href="http://ai-design.eu-de.mybluemix.net/design/ai/conversation/planning"
-    type="resource">
-
-![](images/bee.svg)
-
-  </ResourceCard>
-</Column>
+  <Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
+    <ResourceCard
+      title="IBM Design for AI: Conversation"
+      href="http://ai-design.eu-de.mybluemix.net/design/ai/conversation/planning"
+      type="resource">
+      <MdxIcon name="bee" />
+    </ResourceCard>
+  </Column>
 </Row>
 
 ## Conversational writing

diff --git a/src/pages/experimental/chatbot/images/sketch-icon.png b/src/pages/experimental/chatbot/images/sketch-icon.png
diff --git a/src/pages/experimental/chatbot/overview.mdx b/src/pages/experimental/chatbot/overview.mdx
@@ -82,14 +82,12 @@ While conversational interfaces may contain many different kinds of components,
 ### Chatbot add-on library
 
 <Row className="tile--resource--no-margin tile--group">
-<Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
-  <ResourceCard
-    title="Chatbot Sketch library"
-    href="https://ibm.box.com/s/7vauj3l8o88wukv6p80lddwhjlonoipd"
-    type="resource">
-
-![](/images/sketch-icon.png)
-
-  </ResourceCard>
-</Column>
+  <Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
+    <ResourceCard
+      title="Chatbot Sketch library"
+      href="https://ibm.box.com/s/7vauj3l8o88wukv6p80lddwhjlonoipd"
+      type="resource">
+      <MdxIcon name="sketch" />
+    </ResourceCard>
+  </Column>
 </Row>
diff --git a/src/pages/getting-started/designers/images/github-icon.png b/src/pages/getting-started/designers/images/github-icon.png
diff --git a/src/pages/getting-started/designers/images/sketch-icon.png b/src/pages/getting-started/designers/images/sketch-icon.png
diff --git a/src/pages/getting-started/designers/index.mdx b/src/pages/getting-started/designers/index.mdx
@@ -24,45 +24,37 @@ To design with Carbon you must have the **most recent version** of [Sketch](http
 There are [four Carbon themes](/guidelines/color/overview#themes), two light (White and Gray 10) and two dark (Gray 90 and Gray 100). Each theme lives in its own Sketch library. You can subscribe to as many libraries as you'd like.
 
 <Row className="tile--group">
-<Column offsetLg="4" colMd="4" colLg="4" noGutterSm>
+  <Column offsetLg="4" colMd="4" colLg="4" noGutterSm>
     <ResourceCard
       title="Get the White theme"
       href="sketch://add-library/cloud/JaVzz"
       type="resource">
-
-![](/images/sketch-icon.png)
-
-  </ResourceCard>
-</Column>
-<Column colLg="4" noGutterSm>
+      <MdxIcon name="sketch" />
+    </ResourceCard>
+  </Column>
+  <Column colLg="4" noGutterSm>
     <ResourceCard
       title="Get the Gray 10 theme"
       href="sketch://add-library/cloud/Onwv2"
       type="resource">
-
-![](/images/sketch-icon.png)
-
-  </ResourceCard>
+      <MdxIcon name="sketch" />
+    </ResourceCard>
   </Column>
-<Column offsetLg="4" colLg="4" noGutterSm>
-  <ResourceCard
-    title="Get the Gray 90 theme"
-    href="sketch://add-library/cloud/eo37p"
-    type="resource">
-
-![](/images/sketch-icon.png)
-
-  </ResourceCard>
-</Column>
-<Column colLg="4" noGutterSm>
+  <Column offsetLg="4" colLg="4" noGutterSm>
+    <ResourceCard
+      title="Get the Gray 90 theme"
+      href="sketch://add-library/cloud/eo37p"
+      type="resource">
+      <MdxIcon name="sketch" />
+    </ResourceCard>
+  </Column>
+  <Column colLg="4" noGutterSm>
     <ResourceCard
       title="Get the Gray 100 theme"
       href="sketch://add-library/cloud/d13Ll"
       type="resource">
-
-![](/images/sketch-icon.png)
-
-  </ResourceCard>
+      <MdxIcon name="sketch" />
+    </ResourceCard>
   </Column>
 </Row>
 
@@ -74,16 +66,14 @@ There are [four Carbon themes](/guidelines/color/overview#themes), two light (Wh
 The full icon library and additional color collections live in the IBM Design Language library.
 
 <Row className="tile--group">
-<Column offsetLg="4" colMd="4" colLg="4" noGutterSm>
+  <Column offsetLg="4" colMd="4" colLg="4" noGutterSm>
     <ResourceCard
       title="Get the IBM Design Language library"
       href="sketch://add-library/cloud/75VZZ"
       type="resource">
-
-![](/images/sketch-icon.png)
-
-  </ResourceCard>
-</Column>
+      <MdxIcon name="sketch" />
+    </ResourceCard>
+  </Column>
 </Row>
 
 <br />
@@ -94,27 +84,22 @@ The full icon library and additional color collections live in the IBM Design La
 Visit the [Sketch library](https://sketch.cloud/s/ngV7z) page and choose `Download Document` from the right-side panel.
 
 <Row className="tile--resource--no-margin tile--group">
-<Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
-  <ResourceCard
-    title="Download the IBM Grid template"
-    href="https://sketch.cloud/s/ngV7z"
-    type="resource">
-
-![](/images/sketch-icon.png)
-
-  </ResourceCard>
-</Column>
-<Column colLg="4" colMd="4" noGutterSm>
-  <ResourceCard
+  <Column offsetLg="4" colLg="4" colMd="4" noGutterSm>
+    <ResourceCard
+      title="Download the IBM Grid template"
+      href="https://sketch.cloud/s/ngV7z"
+      type="resource">
+      <MdxIcon name="sketch" />
+    </ResourceCard>
+  </Column>
+  <Column colLg="4" colMd="4" noGutterSm>
+    <ResourceCard
       title="Download the UI Shell template"
       href="https://sketch.cloud/s/EjVmA"
-      type="resource"
-      >
-
-![](/images/sketch-icon.png)
-
-  </ResourceCard>
-</Column>
+      type="resource">
+      <MdxIcon name="sketch" />
+    </ResourceCard>
+  </Column>
 </Row>
 
 <br />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1144,4 +1144,3 @@ const colorTokens = {
		};

		export default colorTokens;