Merge pull request #32 from alisonjoseph/component-page-cleanup

feat: update component images & captions

src/components/ComponentCode/ComponentCode.js

@@ -39,7 +39,7 @@ export default class ComponentCode extends React.Component {
 
     return (
       <div className="component-variation bx--row">
-        <div className="bx--col-lg-8 bx--no-gutter">
+        <div className="bx--col-lg-12 bx--no-gutter">
           <ComponentExample
             codepenSlug={codepen}
             component={component}

src/components/ComponentOverview/ComponentOverview.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
 import React from 'react';
 import { Link } from 'gatsby';
 import componentList from '../../data/components.json';
@@ -7,17 +9,20 @@ class ComponentOverview extends React.Component {
     const component = currentItem.component;
     let componentUrl;
     if (component === 'Multiselect') {
-      componentUrl = '/components/dropdown';
+      componentUrl = '/components/dropdown/code';
     } else if (component === 'UI shell') {
-      componentUrl = '/experimental/ui-shell';
+      componentUrl = '/components/UI-shell-header/code';
     } else {
-      componentUrl = `/components/${component.toLowerCase().replace(' ', '-')}`;
+      componentUrl = `/components/${component
+        .toLowerCase()
+        .replace(' ', '-')}/code`;
     }
 
     let componentImg;
     try {
       componentImg = require(`./images/${component}.svg`);
     } catch (e) {
+      // eslint-disable-next-line global-require
       componentImg = require('./images/NoImage.svg');
     }
 

src/data/nav-items.yaml

@@ -118,18 +118,6 @@
       path: /components/UI-shell-left-panel/code
     - title: UI shell right panel
       path: /components/UI-shell-right-panel/code
-- title: Experimental
-  pages:
-    - title: About
-      path: /experimental/about/overview
-    - title: Chatbots
-      path: /experimental/chatbot/overview
-    - title: Export pattern
-      path: /experimental/export-pattern
-    - title: Navigation pattern
-      path: /experimental/navigation-pattern
-    - title: Deleting pattern
-      path: /experimental/deleting-pattern
 - title: Patterns
   pages:
     - title: Overview
@@ -142,6 +130,18 @@
       path: /patterns/filtering
     - title: Overflow content
       path: /patterns/overflow-content
+- title: Experimental
+  pages:
+    - title: About
+      path: /experimental/about/overview
+    - title: Chatbots
+      path: /experimental/chatbot/overview
+    - title: Export pattern
+      path: /experimental/export-pattern
+    - title: Navigation pattern
+      path: /experimental/navigation-pattern
+    - title: Deleting pattern
+      path: /experimental/deleting-pattern
 - title: Resources
   pages:
     - path: /resources

src/gatsby-theme-carbon/styles/_global.scss

@@ -0,0 +1,46 @@
+//---------------------------------------
+// Carbon components
+//---------------------------------------
+@import '~carbon-components/scss/components/button/button';
+@import '~carbon-components/scss/components/copy-button/copy-button';
+@import '~carbon-components/scss/components/file-uploader/file-uploader';
+@import '~carbon-components/scss/components/checkbox/checkbox';
+@import '~carbon-components/scss/components/combo-box/combo-box';
+@import '~carbon-components/scss/components/radio-button/radio-button';
+@import '~carbon-components/scss/components/toggle/toggle';
+@import '~carbon-components/scss/components/search/search';
+@import '~carbon-components/scss/components/select/select';
+@import '~carbon-components/scss/components/text-input/text-input';
+@import '~carbon-components/scss/components/text-area/text-area';
+@import '~carbon-components/scss/components/number-input/number-input';
+@import '~carbon-components/scss/components/form/form';
+@import '~carbon-components/scss/components/link/link';
+@import '~carbon-components/scss/components/list-box/list-box';
+@import '~carbon-components/scss/components/list/list';
+@import '~carbon-components/scss/components/data-table/data-table';
+@import '~carbon-components/scss/components/structured-list/structured-list';
+@import '~carbon-components/scss/components/code-snippet/code-snippet';
+@import '~carbon-components/scss/components/overflow-menu/overflow-menu';
+@import '~carbon-components/scss/components/content-switcher/content-switcher';
+@import '~carbon-components/scss/components/date-picker/date-picker';
+@import '~carbon-components/scss/components/dropdown/dropdown';
+@import '~carbon-components/scss/components/loading/loading';
+@import '~carbon-components/scss/components/modal/modal';
+@import '~carbon-components/scss/components/multi-select/multi-select';
+@import '~carbon-components/scss/components/notification/inline-notification';
+@import '~carbon-components/scss/components/notification/toast-notification';
+@import '~carbon-components/scss/components/tooltip/tooltip';
+@import '~carbon-components/scss/components/tabs/tabs';
+@import '~carbon-components/scss/components/tag/tag';
+@import '~carbon-components/scss/components/pagination/pagination';
+@import '~carbon-components/scss/components/accordion/accordion';
+@import '~carbon-components/scss/components/progress-indicator/progress-indicator';
+@import '~carbon-components/scss/components/breadcrumb/breadcrumb';
+@import '~carbon-components/scss/components/toolbar/toolbar';
+@import '~carbon-components/scss/components/time-picker/time-picker';
+@import '~carbon-components/scss/components/slider/slider';
+@import '~carbon-components/scss/components/tile/tile';
+@import '~carbon-components/scss/components/skeleton/skeleton';
+@import '~carbon-components/scss/components/inline-loading/inline-loading';
+@import '~carbon-components/scss/components/pagination-nav/pagination-nav';
+@import '~carbon-components/scss/components/ui-shell/ui-shell';

src/pages/components/UI-shell-header/style.mdx

@@ -26,8 +26,16 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti
 | `.bx--header__menu-trigger:focus`  | border           | White          |
 | `.bx--header__menu-trigger:active` | background color | Gray 80        |
 
+<Row>
+<Column colLg={8}>
+
 ![Menu trigger interactive states](images/header-style-5.png)
 
+<Caption>Menu-trigger interactive states</Caption>
+
+</Column>
+</Row>
+
 ### Menu-item
 
 | Class                           | Property         | Color value    |
@@ -42,8 +50,16 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti
 | `.bx--header__menu-item:active` | text color       | Gray 10        |
 | `.bx--header__menu-item:active` | svg              | Gray 10        |
 
+<Row>
+<Column colLg={8}>
+
 ![Menu item interactive states](images/header-style-6.png)
 
+<Caption>Sub-menu interactive states</Caption>
+
+</Column>
+</Row>
+
 ### Sub-menu
 
 | Class                         | Property         | Color value   |
@@ -58,6 +74,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti
 
 ![Sub-menu interactive states](images/header-style-7.png)
 
+<Caption></Caption>
+
 ### Action
 
 | Class                        | Property         | Color value    |
@@ -69,8 +87,16 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti
 | `.bx--header__action:active` | background color | Gray 80        |
 | `.bx--header__action:active` | fill             | Gray 10        |
 
+<Row>
+<Column colLg={8}>
+
 ![Header action interactive states](images/header-style-8.png)
 
+<Caption>Header action interactive states</Caption>
+
+</Column>
+</Row>
+
 ## Typography
 
 Menu labels and text should be set in sentence case.
@@ -81,13 +107,6 @@ Menu labels and text should be set in sentence case.
 | `.bx--header__name--prefix` | 14 / 0.875         | SemiBold / 600 | `$heading-01`    |
 | `.bx--header__menu-item`    | 14 / 0.875         | Regular / 400  | `$body-short-01` |
 
-<!--
-### Text overflow
-
-[Guidance for text overflow and wrapping for platform name or labels]
-
--->
-
 ## Structure
 
 The header should span the full width of the browser window. The header can either stay sticky to the top of the browser or scroll away.
@@ -106,10 +125,20 @@ The header should span the full width of the browser window. The header can eith
 
 ![ui shell header spec](images/header-style-2.png)
 
+<Caption>
+  Structure and spacing measurements for UI shell header | px | rem
+</Caption>
+
 ![ui shell header submenu spec](images/header-style-3.png)
 
+<Caption>
+  Structure and spacing measurements for header submenu | px | rem
+</Caption>
+
 ### Responsive behavior
 
 In smaller broswer windows, `menu items` in the header should collapse into the left side nav menu. Items that were once in the header should stack at the top of the side nav panel if other items were already present in the panel.
 
 ![responsive behavior example](images/header-style-4.png)
+
+<Caption>Responsive behavior for UI shell header</Caption>

src/pages/components/UI-shell-header/usage.mdx

@@ -16,6 +16,8 @@ tabs: ['Code', 'Usage', 'Style']
 
 ![UI shell header](images/zones-platform.png)
 
+<Caption>UI shell header</Caption>
+
 ## Resources
 
 <Row className="resource-card-group">
@@ -40,13 +42,17 @@ The UI shell is made up of three components: The header, the [left panel](/compo
 
 ![UI shell components.](images/shell-usage-1.png)
 
+<Caption>UI shell components</Caption>
+
 For each UI shell component, left-to-right translates to product-to-global. The left side of the header contains items relevant at the product level. Moving to the right along the header, the functions become more global. Elements in the middle of the header should represent system-level controls. Elements on the right side of the header, such as the switcher, are the most global in their scope and span multiple products.
 
 ## Anatomy
 
 The header spans the full width of the viewport and is the topmost element in the browser window. Header elements are persistent throughout the product experience.
 
-![UI shell system zone.](images/header-usage-2.png)
+![Primary header](images/header-usage-2.png)
+
+<Caption>Primary header</Caption>
 
 ### Header elements
 
@@ -101,8 +107,14 @@ Icons are not a required element of the header and a product may choose to use a
 
 The example below shows a header with a switcher, three core icons, a product icon, and search.
 
+<Row>
+<Column colLg={8}>
+
 ![icon placement.](images/header-usage-4.png)
 
+</Column>
+</Row>
+
 | Icon          | Position                               |                                                                                                                                                                                                              |
 | ------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Search        | Left                                   | Search should always be positioned as the furthest left icon. This is to allow for a expanding search field that does not disrupt other icon positions.                                                      |
@@ -119,3 +131,5 @@ As a header scales down to fit smaller screen sizes, header links and menus shou
 If your UI includes a left panel, the header links should be added above the left panel items, pushing them down accordingly.
 
 ![An example of the header responding to different screen sizes.](images/header-usage-3.png)
+
+<Caption>Header responsive behavior</Caption>

src/pages/components/UI-shell-left-panel/style.mdx

@@ -16,8 +16,16 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti
 | `.bx--side-nav__menu-item`       | text color       | Gray 70     |
 | `.bx--side-nav__icon`            | fill             | Gray 70     |
 
+<Row>
+<Column colLg={8}>
+
 ![UI shell side-nav example.](images/left-nav-style-1.png)
 
+<Caption>UI shell side-nav example.</Caption>
+
+</Column>
+</Row>
+
 ### Link
 
 | Class                          | Property         | Color value   |
@@ -33,6 +41,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti
 
 ![Link states](images/left-nav-style-4.png)
 
+<Caption>Link states</Caption>
+
 ### Sub-menu
 
 | Class                               | Property         | Color value   |
@@ -53,6 +63,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti
 
 ![Sub-menu states](images/left-nav-style-4.png)
 
+<Caption>Sub-menu states</Caption>
+
 ### Icon
 
 | Class                          | Property | Color value |
@@ -97,8 +109,16 @@ The panel spans the full height of the browser and is fixed to the left edge of
 
 ![ui shell side-nav](images/left-nav-style-2.png)
 
+<Caption>
+  Structure and spacing measurements for the side-nav | px | rem.
+</Caption>
+
 ![ui shell side-nav with icons](images/left-nav-style-3.png)
 
+<Caption>
+  Structure and spacing measurements for side-nav with icons | px | rem.
+</Caption>
+
 <!--
 ### Responsive behavior
 -->

src/pages/components/UI-shell-left-panel/usage.mdx

@@ -35,14 +35,30 @@ The UI shell is made up of three components: The [header](/components/UI-shell-h
 | Left panel         | An optional panel that is used for a product's navigation.                                                                              |
 | Right panel        | An optional panel that shows additional system level actions or content associated with a system icon in the header.                    |
 
+<Row>
+<Column colLg={8}>
+
 ![UI shell components.](images/shell-usage-1.png)
 
+<Caption>UI shell components</Caption>
+
+</Column>
+</Row>
+
 ## Anatomy
 
 The left panel contains secondary navigation and is positioned below the header and fixed to the left. Both links and sub-menus can be used in the side-nav and may be mixed together.
 
+<Row>
+<Column colLg={8}>
+
 ![Left panel with nested sub-menus.](images/left-panel-usage-1.png)
 
+<Caption>Left panel with nested sub-menus.</Caption>
+
+</Column>
+</Row>
+
 ## Behavior
 
 Use the left panel if there are more than five secondary navigation items, or if you expect a user to switch between secondary items frequently. Sub-menus are denoted with a chevron and expand when clicked, pushing the other items down in the panel. To collapse the sub-menu, the user must again click the menu header in the left panel.

src/pages/components/UI-shell-right-panel/style.mdx

@@ -13,8 +13,16 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti
 | `.bx--header-panel`           | border-left               | Gray 80     |
 | `.bx--header__action--active` | border-left, border-right | Gray 80     |
 
+<Row>
+<Column colLg={8}>
+
 ![UI shell right panel example.](images/right-panel-style-1.png)
 
+<Caption>UI shell switcher example</Caption>
+
+</Column>
+</Row>
+
 ### Context switcher
 
 | Class                                | Property         | Color value    |
@@ -48,3 +56,7 @@ The panel spans the full height of the browser and is fixed to the right edge of
 | `.bx--header__action` | svg                         | 20 / 1.25 | –             |
 
 ![UI shell right panel example.](images/right-panel-style-2.png)
+
+<Caption>
+  Structure and spacing measurements for right panel | px | rem.
+</Caption>