From 3c8336e8c1d6ff4f68c36919d476d4f8e423ced5 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Thu, 14 Mar 2019 13:38:01 +0900
Subject: [PATCH] chore(devenv): move ILN to shell (#2083)

* chore(devenv): move ILN to shell

This is for remove dev env's dependency to ILN which depends on v9
styles.

Refs #1501.

* chore(devenv): fix Rollup error

* chore(devenv): fix main content upon side nav state
---
 .../ComponentExample/component-overrides.scss |  18 -
 .../js/components/PageHeader/page-header.scss |  14 +-
 demo/js/components/RootPage.js                |  29 +-
 demo/js/components/SideNav.js                 |  35 +-
 .../components/SideNavToggle/SideNavToggle.js |  55 ---
 .../SideNavToggle/side-nav-toggle.scss        |  89 ----
 demo/scss/_interior-left-nav.scss             | 379 ------------------
 demo/scss/_layout.scss                        |  16 +-
 demo/scss/_markdown-page.scss                 |  50 ++-
 demo/scss/_page.scss                          |  34 +-
 demo/scss/demo.scss                           |  35 +-
 gulpfile.js                                   |   2 +-
 package.json                                  |   4 +-
 tools/rollup.config.dev.js                    |   2 +
 yarn.lock                                     |  57 ++-
 15 files changed, 170 insertions(+), 649 deletions(-)
 delete mode 100644 demo/js/components/SideNavToggle/SideNavToggle.js
 delete mode 100644 demo/js/components/SideNavToggle/side-nav-toggle.scss
 delete mode 100644 demo/scss/_interior-left-nav.scss

diff --git a/demo/js/components/ComponentExample/component-overrides.scss b/demo/js/components/ComponentExample/component-overrides.scss
index 1dfaef335411..2593bae7a37b 100644
--- a/demo/js/components/ComponentExample/component-overrides.scss
+++ b/demo/js/components/ComponentExample/component-overrides.scss
@@ -58,15 +58,6 @@
   & .tabs .bx--tabs__nav {
     z-index: 6000;
   }
-
-  & .interior-left-nav .bx--interior-left-nav {
-    top: 8.5rem;
-    max-height: 80vh;
-  }
-
-  & .interior-left-nav .bx--interior-left-nav--collapseable .bx--interior-left-nav-collapse {
-    margin-bottom: 0;
-  }
 }
 
 .component-example__live {
@@ -84,15 +75,6 @@
     color: inherit;
   }
 
-  & > .interior-left-nav .bx--interior-left-nav {
-    position: initial;
-    min-height: rem(400px);
-  }
-
-  & > .interior-left-nav .bx--interior-left-nav--collapseable .bx--interior-left-nav-collapse {
-    margin-bottom: 0;
-  }
-
   & .text-input .bx--text-input {
     min-width: 20rem;
   }
diff --git a/demo/js/components/PageHeader/page-header.scss b/demo/js/components/PageHeader/page-header.scss
index 13bb4625603f..86cefead9233 100644
--- a/demo/js/components/PageHeader/page-header.scss
+++ b/demo/js/components/PageHeader/page-header.scss
@@ -19,7 +19,11 @@
 }
 
 .page-header__label {
-  @include typescale('zeta');
+  @if not feature-flag-enabled('components-x') {
+    @include typescale('zeta');
+  } @else {
+    @include type-style('label-01');
+  }
   color: $text-02;
   font-weight: 400;
   margin: 4rem 0 1rem;
@@ -33,8 +37,12 @@
 }
 
 .page-header__title {
-  @include typescale('mega');
-  @include letter-spacing;
+  @if not feature-flag-enabled('components-x') {
+    @include typescale('mega');
+    @include letter-spacing;
+  } @else {
+    @include type-style('display-01');
+  }
   color: $text-01;
   font-weight: 300;
   margin: -1.15rem 0 0 -3px;
diff --git a/demo/js/components/RootPage.js b/demo/js/components/RootPage.js
index 9ed8ab5f0137..25200f2a1f19 100644
--- a/demo/js/components/RootPage.js
+++ b/demo/js/components/RootPage.js
@@ -1,12 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
-import classnames from 'classnames';
 import { ToggleSmall } from 'carbon-components-react';
+import eventMatches from '../../../src/globals/js/misc/event-matches';
 import on from '../../../src/globals/js/misc/on';
 import CodePage from './CodePage/CodePage';
 import SideNav from './SideNav';
 import PageHeader from './PageHeader/PageHeader';
-import SideNavToggle from './SideNavToggle/SideNavToggle';
 
 const checkStatus = response => {
   if (response.status >= 200 && response.status < 400) {
@@ -236,21 +235,17 @@ class RootPage extends Component {
     }
   }
 
-  /**
-   * The handler for changing in the state of side nav's toggle button.
-   */
-  onSideNavToggle = evt => {
-    this.setState({ navClosed: evt.closed });
-  };
-
   /**
    * The handler for the `click` event on the side nav for changing selection.
    */
   onSideNavItemClick = evt => {
-    const { componentItems } = this.state;
-    const selectedNavItem = componentItems && componentItems.find(item => item.id === evt.target.dataset.navId);
-    if (selectedNavItem) {
-      this.switchTo(selectedNavItem.id);
+    const link = eventMatches(evt, '[data-nav-id]');
+    if (link) {
+      const { componentItems } = this.state;
+      const selectedNavItem = componentItems && componentItems.find(item => item.id === link.dataset.navId);
+      if (selectedNavItem) {
+        this.switchTo(selectedNavItem.id);
+      }
     }
   };
 
@@ -392,16 +387,12 @@ class RootPage extends Component {
 
   render() {
     const { portSassBuild, useStaticFullRenderPage } = this.props;
-    const { componentItems, isComponentsX, navClosed } = this.state;
+    const { componentItems, isComponentsX, selectedNavItemId } = this.state;
     const metadata = this.getCurrentComponentItem();
     const { name, label } = metadata || {};
-    const classNames = classnames({
-      'bx--interior-left-nav--collapsed': navClosed,
-    });
     return !metadata ? null : (
       <Fragment>
-        <SideNavToggle onChange={this.onSideNavToggle} />
-        <SideNav items={componentItems} className={classNames} onItemClick={this.onSideNavItemClick} />
+        <SideNav items={componentItems} activeItemId={selectedNavItemId} onItemClick={this.onSideNavItemClick} />
         <main role="main" id="maincontent" className="container" aria-labelledby="page-title" tabIndex="-1" data-page={name}>
           <PageHeader label="Component" title={label} />
           <CodePage metadata={metadata} useStaticFullRenderPage={useStaticFullRenderPage} />
diff --git a/demo/js/components/SideNav.js b/demo/js/components/SideNav.js
index d234f0c62308..a6c2c0a79a01 100644
--- a/demo/js/components/SideNav.js
+++ b/demo/js/components/SideNav.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { InteriorLeftNav, InteriorLeftNavItem } from 'carbon-addons-cloud';
+import { SideNav as UIShellSideNav, SideNavItems, SideNavLink } from 'carbon-components-react/es/components/UIShell';
 
 /**
  * The side nav.
@@ -36,23 +36,26 @@ class SideNav extends Component {
 
   render() {
     const { items, activeItemId, className } = this.props;
-    const activeItem = items && items.find(item => item.id === activeItemId);
-    const { activeName } = activeItem || {};
     return (
-      <InteriorLeftNav className={className} activeHref={activeName ? `/demo/${activeName}` : ''}>
-        {items
-          .filter(item => !item.isHidden)
-          .map(item => {
-            const { id, name, label } = item;
-            return (
-              <InteriorLeftNavItem key={id} href={`/demo/${name}`}>
-                <a href={`/demo/${name}`} data-nav-id={id} onClick={this.handleItemClick}>
+      <UIShellSideNav className={className}>
+        <SideNavItems>
+          {items
+            .filter(item => !item.isHidden)
+            .map(item => {
+              const { id, name, label } = item;
+              return (
+                <SideNavLink
+                  key={id}
+                  data-nav-id={id}
+                  isActive={id === activeItemId}
+                  href={`/demo/${name}`}
+                  onClick={this.handleItemClick}>
                   {label}
-                </a>
-              </InteriorLeftNavItem>
-            );
-          })}
-      </InteriorLeftNav>
+                </SideNavLink>
+              );
+            })}
+        </SideNavItems>
+      </UIShellSideNav>
     );
   }
 }
diff --git a/demo/js/components/SideNavToggle/SideNavToggle.js b/demo/js/components/SideNavToggle/SideNavToggle.js
deleted file mode 100644
index 65324fb69a46..000000000000
--- a/demo/js/components/SideNavToggle/SideNavToggle.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-/**
- * The toggle button of the side nav.
- */
-class SideNavToggle extends Component {
-  static propTypes = {
-    /**
-     * The handler for change in the toggle state.
-     */
-    onChange: PropTypes.func,
-  };
-
-  constructor() {
-    super();
-    this.state = {};
-  }
-
-  /**
-   * Toggles this side nav.
-   */
-  toggle = () => {
-    const { onChange } = this.props;
-    this.setState(
-      ({ closed }) => ({ closed: !closed }),
-      () => {
-        if (onChange) {
-          const { closed } = this.state;
-          onChange({ closed });
-        }
-      }
-    );
-  };
-
-  render() {
-    const { closed } = this.state;
-    const classNames = classnames('side-nav__toggle-btn', {
-      'side-nav__toggle-btn--closed': closed,
-    });
-
-    return (
-      <button type="button" aria-label="Toggle Side Navigation" className={classNames} onClick={this.toggle}>
-        <div>
-          <span className="line" />
-          <span className="line" />
-          <span className="line" />
-        </div>
-      </button>
-    );
-  }
-}
-
-export default SideNavToggle;
diff --git a/demo/js/components/SideNavToggle/side-nav-toggle.scss b/demo/js/components/SideNavToggle/side-nav-toggle.scss
deleted file mode 100644
index f2b3638ea3e9..000000000000
--- a/demo/js/components/SideNavToggle/side-nav-toggle.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-.side-nav__toggle-btn {
-  position: fixed;
-  top: 0;
-  left: calc(200px - 2.3rem);
-  width: 2.3rem;
-  height: 2.3rem;
-  background-color: white;
-  border: 1px solid transparent;
-  border-right: 2px solid $color__gray-3;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-  z-index: 8000;
-  border-radius: 0;
-  transition: $transition--base $bx--standard-easing;
-
-  &:focus {
-    outline: none;
-    border: 1px solid $brand-01, 0px solid $brand-01, 1px solid $brand-01, 1px solid $brand-01;
-  }
-
-  &:hover {
-    background: $brand-01;
-    border-right: none;
-
-    .line {
-      background: white;
-    }
-  }
-
-  @include breakpoint('620px') {
-    left: calc(200px - 2rem);
-    width: 2rem;
-    height: 2rem;
-  }
-
-  & > div {
-    @include reset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-
-    &:focus {
-      outline: none;
-    }
-
-    .line {
-      @include reset;
-      height: rem(1px);
-      width: 1.25rem;
-      cursor: pointer;
-      display: block;
-      margin: rem(2px) 0;
-      background: $brand-01;
-      will-change: all;
-    }
-
-    .line:nth-child(2) {
-      opacity: 0;
-    }
-
-    .line:nth-child(1) {
-      transform: translateY(5px) rotate(45deg);
-    }
-
-    .line:nth-child(3) {
-      transform: translateY(-5px) rotate(-45deg);
-    }
-  }
-
-  &--closed {
-    left: 0;
-    border-right: 0;
-
-    > div {
-      .line:nth-child(2) {
-        opacity: 1;
-      }
-
-      .line,
-      .line:nth-child(1),
-      .line:nth-child(3) {
-        transform: translateY(0) rotate(0);
-        transition: all $transition--base ease-in-out;
-      }
-    }
-  }
-}
diff --git a/demo/scss/_interior-left-nav.scss b/demo/scss/_interior-left-nav.scss
deleted file mode 100644
index 0311549b8d6d..000000000000
--- a/demo/scss/_interior-left-nav.scss
+++ /dev/null
@@ -1,379 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Interior Left Nav
-//-----------------------------
-
-@import '../../src/globals/scss/vars';
-@import '../../src/globals/scss/helper-mixins';
-@import '../../src/globals/scss/functions';
-@import '../../src/globals/scss/layer';
-@import '../../src/globals/scss/import-once';
-@import '../../src/globals/scss/css--reset';
-@import '../../src/globals/scss/css--typography';
-
-@mixin interior-left-nav {
-  .#{$prefix}--interior-left-nav {
-    @include reset;
-    @include font-family;
-    width: rem(250px);
-    position: fixed;
-    top: rem(90px);
-    height: 100%;
-    background-color: $color__white;
-    border-right: 1px solid $color__gray-1;
-
-    &--v6 {
-      top: rem(50px);
-    }
-
-    .left-nav-list {
-      list-style: none;
-      display: flex;
-      flex-direction: column;
-      background-color: $color__white;
-      padding-top: 1.5rem;
-      overflow: auto;
-
-      &__item {
-        cursor: pointer;
-        width: 100%;
-        padding: 0;
-
-        &:focus {
-          outline: 1px solid transparent;
-
-          &:not(.left-nav-list__item--has-children) {
-            background-color: $color__gray-2;
-          }
-
-          .left-nav-list__item-link {
-            color: $color__blue-51;
-            text-decoration: underline;
-          }
-
-          .left-nav-list--nested .left-nav-list__item-link {
-            color: $color__blue-90;
-            text-decoration: none;
-          }
-        }
-
-        &--active {
-          & > .left-nav-list__item-link {
-            background-color: $color__gray-2;
-            color: $color__blue-51;
-            font-weight: 600;
-          }
-        }
-
-        &-link {
-          @include typescale('zeta');
-          color: $color__blue-90;
-          font-weight: 400;
-          position: relative;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          text-decoration: none;
-          transition: background-color $transition--base;
-          padding: 0.75rem 1.5rem 0.75rem rem(59px);
-        }
-
-        &-icon {
-          display: flex;
-
-          .#{$prefix}--interior-left-nav__icon {
-            fill: $color__blue-51;
-            width: rem(8px);
-            height: rem(8px);
-            transition: $transition--base;
-          }
-        }
-
-        &--expanded {
-          .left-nav-list--nested {
-            max-height: 20rem;
-            transition: $transition--expansion $carbon--ease-in;
-            overflow: inherit;
-            opacity: 1;
-
-            .left-nav-list__item {
-              opacity: 1;
-            }
-          }
-
-          & > .left-nav-list__item-link {
-            color: $color__blue-51;
-          }
-
-          .left-nav-list__item-icon .#{$prefix}--interior-left-nav__icon {
-            transform: rotate(180deg);
-          }
-        }
-
-        &:not(.left-nav-list__item--has-children):hover {
-          & > .left-nav-list__item-link {
-            background-color: $color__gray-2;
-            color: $color__blue-51;
-          }
-        }
-      }
-
-      &__item--has-children {
-        .left-nav-list__item-link {
-          padding-right: 1.5rem;
-        }
-
-        &:hover {
-          > .left-nav-list__item-link {
-            color: $color__blue-51;
-          }
-        }
-      }
-    }
-
-    .left-nav-list--nested {
-      max-height: 0;
-      overflow: hidden;
-      transition: $transition--expansion $carbon--ease-out;
-      padding: 0;
-      opacity: 0;
-
-      .left-nav-list__item {
-        width: 100%;
-        position: relative;
-        padding: 0;
-        transition: $transition--base;
-        opacity: 0;
-
-        &-link {
-          @include typescale('zeta');
-          color: $color__blue-90;
-          padding: 0.75rem 1.35rem 0.75rem 4.5rem;
-          font-weight: 400;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-
-          &:focus {
-            outline: 1px solid transparent;
-            background-color: $color__gray-2;
-            color: $color__blue-51;
-            text-decoration: underline;
-          }
-        }
-
-        &:hover {
-          outline: none;
-        }
-
-        &--active {
-          color: $color__blue-51;
-          background-color: $color__gray-2;
-
-          & > .left-nav-list__item-link {
-            font-weight: 600;
-            color: $color__blue-51;
-          }
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--interior-left-nav--collapseable {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    width: rem(200px);
-    padding-top: rem(20px);
-    transition: background-color 300ms $carbon--standard-easing, width 300ms $carbon--standard-easing;
-
-    ul,
-    li,
-    hr,
-    .#{$prefix}--interior-left-nav-collapse__target {
-      opacity: 1;
-    }
-
-    .left-nav-list,
-    .left-nav-list__item-link {
-      background-color: inherit;
-    }
-
-    .left-nav-list__item--expanded > .left-nav-list {
-      padding-top: rem(6px);
-      padding-bottom: rem(6px);
-    }
-
-    .left-nav-list__item--expanded > .left-nav-list__item-link {
-      color: $color__blue-90;
-    }
-
-    .left-nav-line {
-      margin: rem(24px) rem(20px);
-      border: 1px solid $color__gray-1;
-    }
-
-    .left-nav-list {
-      padding-top: 0;
-
-      @include light-ui {
-        background-color: inherit;
-      }
-    }
-
-    .left-nav-list__item--active > .left-nav-list__item-link {
-      position: relative;
-      background-color: transparent;
-
-      &:before {
-        top: 0;
-        position: absolute;
-        background-color: $color__blue-51;
-        height: 100%;
-        left: 0;
-        width: 4px;
-        content: '';
-      }
-    }
-
-    .left-nav-list__item {
-      margin-bottom: rem(5px);
-    }
-
-    .left-nav-list__item-link,
-    .left-nav-list--nested .left-nav-list__item-link {
-      padding: rem(9px) rem(20px);
-    }
-
-    .left-nav-list--nested .left-nav-list__item-link {
-      @include typescale('omega');
-      padding-left: rem(40px);
-    }
-
-    .#{$prefix}--interior-left-nav-collapse {
-      cursor: pointer;
-      background-color: rgba($color__blue-51, 0.1);
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      margin-top: auto;
-      margin-bottom: rem(90px);
-      padding: rem(14px) rem(16px);
-
-      &--v6 {
-        margin-bottom: rem(50px);
-      }
-
-      &:hover,
-      &:focus {
-        background-color: rgba($color__blue-51, 0.3);
-      }
-    }
-
-    .#{$prefix}--interior-left-nav-collapse__target {
-      margin-left: rem(10px);
-      margin-right: rem(10px);
-    }
-
-    .#{$prefix}--interior-left-nav-collapse__link {
-      @include typescale('zeta');
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-      padding: 0.25rem;
-
-      &:focus {
-        @include focus-outline('border');
-      }
-    }
-
-    .#{$prefix}--interior-left-nav-collapse__arrow {
-      transform: rotate(0);
-      fill: $color__blue-51;
-      height: 12px;
-      width: 12px;
-    }
-  }
-
-  .#{$prefix}--interior-left-nav--collapsing,
-  .#{$prefix}--interior-left-nav--collapsed {
-    width: rem(48px);
-    transition: background-color 300ms $carbon--standard-easing, width 300ms $carbon--standard-easing;
-    cursor: pointer;
-    background-color: rgba($color__blue-51, 0.1);
-
-    &:hover,
-    &:focus {
-      background-color: rgba($color__blue-51, 0.3);
-    }
-
-    ul,
-    li,
-    hr,
-    .#{$prefix}--interior-left-nav-collapse__target {
-      opacity: 0;
-      transition: opacity 300ms $carbon--standard-easing;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .#{$prefix}--interior-left-nav-collapse {
-      background-color: transparent;
-
-      &:hover {
-        background-color: transparent;
-      }
-    }
-
-    .#{$prefix}--interior-left-nav-collapse__arrow {
-      transform: rotate(180deg);
-      transition: transform 300ms $carbon--standard-easing;
-    }
-  }
-
-  .#{$prefix}--interior-left-nav--collapsed {
-    ul,
-    li,
-    hr,
-    .#{$prefix}--interior-left-nav-collapse__target {
-      display: none;
-    }
-
-    .#{$prefix}--interior-left-nav-collapse {
-      justify-content: center;
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
-
-  .#{$prefix}--interior-left-nav--expanding {
-    width: rem(200px);
-    transition: width 300ms $carbon--standard-easing;
-    background-color: #fff;
-
-    ul,
-    li,
-    hr,
-    .#{$prefix}--interior-left-nav-collapse__target {
-      opacity: 1;
-      transition: opacity $transition--expansion $carbon--standard-easing;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .#{$prefix}--interior-left-nav-collapse__arrow {
-      transform: rotate(0deg);
-      transition: transform 300ms $carbon--standard-easing;
-    }
-  }
-}
-
-@include exports('interior-left-nav') {
-  @include interior-left-nav;
-}
diff --git a/demo/scss/_layout.scss b/demo/scss/_layout.scss
index d8f1c495d204..4d5cc6112050 100644
--- a/demo/scss/_layout.scss
+++ b/demo/scss/_layout.scss
@@ -50,6 +50,18 @@ body {
     width: calc(100% - 200px);
   }
 
+  .bx--side-nav ~ & {
+    margin-left: 3rem;
+    width: calc(100% - 3rem);
+  }
+
+  .bx--side-nav.bx--side-nav--expanded ~ & {
+    @include breakpoint('bp--md--major') {
+      margin-left: 16rem;
+      width: calc(100% - 16rem);
+    }
+  }
+
   &--expanded {
     width: 100%;
     margin-left: 0;
@@ -63,7 +75,9 @@ body {
 }
 
 a {
-  @include font-smoothing;
+  @if not feature-flag-enabled('components-x') {
+    @include font-smoothing;
+  }
   color: $color__blue-51;
   font-weight: 600;
 
diff --git a/demo/scss/_markdown-page.scss b/demo/scss/_markdown-page.scss
index 88fa65223651..5f53c8341909 100644
--- a/demo/scss/_markdown-page.scss
+++ b/demo/scss/_markdown-page.scss
@@ -4,7 +4,9 @@
   }
 
   h3 {
-    @include font-smoothing;
+    @if not feature-flag-enabled('components-x') {
+      @include font-smoothing;
+    }
   }
 
   video {
@@ -58,7 +60,9 @@
     margin-bottom: 4rem;
 
     strong {
-      @include letter-spacing;
+      @if not feature-flag-enabled('components-x') {
+        @include letter-spacing;
+      }
       font-size: 1.125rem;
       line-height: 1.5;
       font-weight: 600;
@@ -87,7 +91,11 @@
   }
 
   p em {
-    @include typescale('zeta');
+    @if not feature-flag-enabled('components-x') {
+      @include typescale('zeta');
+    } @else {
+      @include type-style('body-short-01');
+    }
     color: $text-02;
     font-style: normal;
   }
@@ -167,7 +175,11 @@
 
     thead {
       th {
-        @include typescale('zeta');
+        @if not feature-flag-enabled('components-x') {
+          @include typescale('zeta');
+        } @else {
+          @include type-style('body-short-01');
+        }
         font-weight: 600;
         text-align: left;
         line-height: 1.25;
@@ -182,12 +194,18 @@
         border-bottom: 1px solid $ui-04;
 
         td {
-          @include typescale('zeta');
+          @if not feature-flag-enabled('components-x') {
+            @include typescale('zeta');
+          } @else {
+            @include type-style('body-short-01');
+          }
           padding: 1rem 3rem 1rem 0;
           line-height: 1.25;
 
           strong {
-            @include letter-spacing;
+            @if not feature-flag-enabled('components-x') {
+              @include letter-spacing;
+            }
           }
 
           &:first-child {
@@ -231,8 +249,14 @@
 
   ul,
   ol {
-    @include typescale('epsilon');
-    @include font-smoothing;
+    @if not feature-flag-enabled('components-x') {
+      @include typescale('epsilon');
+    } @else {
+      @include type-style('heading-01');
+    }
+    @if not feature-flag-enabled('components-x') {
+      @include font-smoothing;
+    }
     margin-left: 1.5rem;
     margin-bottom: 1rem;
     line-height: 1.75;
@@ -334,7 +358,11 @@
   }
 
   blockquote + p strong {
-    @include typescale('epsilon');
+    @if not feature-flag-enabled('components-x') {
+      @include typescale('epsilon');
+    } @else {
+      @include type-style('heading-01');
+    }
     color: $brand-01;
   }
 
@@ -449,7 +477,9 @@
       margin-bottom: 3rem;
 
       strong {
-        @include letter-spacing;
+        @if not feature-flag-enabled('components-x') {
+          @include letter-spacing;
+        }
         position: absolute;
         top: 0;
         left: 0;
diff --git a/demo/scss/_page.scss b/demo/scss/_page.scss
index 3c4de6665625..1ed6142ad1d2 100644
--- a/demo/scss/_page.scss
+++ b/demo/scss/_page.scss
@@ -60,8 +60,10 @@ td {
   }
 
   .page__desc {
-    @include font-smoothing;
-    @include letter-spacing;
+    @if not feature-flag-enabled('components-x') {
+      @include font-smoothing;
+      @include letter-spacing;
+    }
     max-width: 38rem;
     color: $text-01;
     word-wrap: break-word;
@@ -82,7 +84,11 @@ td {
     }
 
     .page__divider-heading {
-      @include typescale('zeta');
+      @if not feature-flag-enabled('components-x') {
+        @include typescale('zeta');
+      } @else {
+        @include type-style('body-short-01');
+      }
       font-weight: 600;
       width: 100%;
       padding-bottom: 1rem;
@@ -94,8 +100,12 @@ td {
     }
 
     h1 {
-      @include typescale('mega');
-      @include letter-spacing;
+      @if not feature-flag-enabled('components-x') {
+        @include typescale('mega');
+        @include letter-spacing;
+      } @else {
+        @include type-style('heading-01');
+      }
       font-weight: 300;
       line-height: 1.25;
 
@@ -105,7 +115,11 @@ td {
     }
 
     h2 {
-      @include typescale('beta');
+      @if not feature-flag-enabled('components-x') {
+        @include typescale('beta');
+      } @else {
+        @include type-style('heading-02');
+      }
       position: relative;
       display: flex;
       align-items: center;
@@ -169,8 +183,12 @@ td {
     }
 
     h3 {
-      @include typescale('delta');
-      @include letter-spacing;
+      @if not feature-flag-enabled('components-x') {
+        @include typescale('delta');
+        @include letter-spacing;
+      } @else {
+        @include type-style('heading-02');
+      }
       color: $brand-01;
       padding: 4rem 0 1rem;
       font-weight: 600;
diff --git a/demo/scss/demo.scss b/demo/scss/demo.scss
index 4c7530dc743c..fd94a0bcb529 100644
--- a/demo/scss/demo.scss
+++ b/demo/scss/demo.scss
@@ -1,5 +1,4 @@
 // Used for sidebar in dev environment
-@import 'interior-left-nav';
 @import '../../src/globals/scss/styles';
 
 $deprecations--entry: true;
@@ -20,7 +19,6 @@ $deprecations--message: 'Deprecated code was found, this code will be removed be
 @import '../js/components/ComponentExample/component-example.scss';
 @import '../js/components/ComponentExample/component-overrides.scss';
 @import '../js/components/PageHeader/page-header.scss';
-@import '../js/components/SideNavToggle/side-nav-toggle.scss';
 
 // Cycle through all the deprecation reasons, if any exist, that have been
 // accumulated through the @import process.
@@ -44,31 +42,6 @@ REASON: #{$reason}';
       height: 100%;
     }
   }
-
-  .bx--interior-left-nav--collapseable .bx--interior-left-nav-collapse {
-    display: none;
-  }
-
-  .bx--interior-left-nav {
-    top: 0;
-    overflow: auto;
-    border-right: none;
-    z-index: 7000;
-
-    &.bx--interior-left-nav--collapsed {
-      width: 0;
-    }
-  }
-
-  .component-example__live--rendered {
-    .bx--interior-left-nav--collapseable .bx--interior-left-nav-collapse {
-      display: flex;
-    }
-
-    .bx--interior-left-nav.bx--interior-left-nav--collapsed {
-      width: 3rem;
-    }
-  }
 }
 
 .demo--container {
@@ -254,6 +227,14 @@ REASON: #{$reason}';
   }
 }
 
+.bx--side-nav__icon--small {
+  display: none;
+}
+
+a.bx--side-nav__link {
+  padding-left: 2rem;
+}
+
 .component-example__live .bx--form-item,
 .demo--container__panel .bx--form-item {
   margin-bottom: 2rem;
diff --git a/gulpfile.js b/gulpfile.js
index 2139d6709267..7c8fa7eb6166 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -352,7 +352,7 @@ gulp.task('sass:dev', () =>
           components-x: ${useExperimentalFeatures},
           breaking-changes-x: ${useBreakingChanges},
           grid: ${useExperimentalFeatures},
-          ui-shell: ${useExperimentalFeatures},
+          ui-shell: true,
         );
       `)
     )
diff --git a/package.json b/package.json
index 88009ec55e6a..4fe7a16bf4ed 100644
--- a/package.json
+++ b/package.json
@@ -63,8 +63,8 @@
     "babel-plugin-rewire": "^1.1.0",
     "bluebird": "~3.1.1",
     "browser-sync": "^2.26.3",
-    "carbon-addons-cloud": "^1.8.0",
-    "carbon-components-react": "^5.8.0",
+    "carbon-components": "^9.0.0",
+    "carbon-components-react": "^6.0.0",
     "chokidar": "^2.0.0",
     "classnames": "^2.2.0",
     "commander": "^2.13.0",
diff --git a/tools/rollup.config.dev.js b/tools/rollup.config.dev.js
index 13ae65795192..c0dc15fe47d8 100644
--- a/tools/rollup.config.dev.js
+++ b/tools/rollup.config.dev.js
@@ -37,6 +37,7 @@ module.exports = {
       include: ['node_modules/**', 'src/globals/js/settings.js', 'demo/feature-flags.js'],
       sourceMap: true,
       namedExports: {
+        'node_modules/prop-types/index.js': ['oneOf'],
         'node_modules/react/index.js': [
           'Children',
           'Component',
@@ -47,6 +48,7 @@ module.exports = {
           'isValidElement',
         ],
         'node_modules/react-dom/index.js': ['render'],
+        'node_modules/react-is/index.js': ['isForwardRef'],
       },
     }),
     babel({
diff --git a/yarn.lock b/yarn.lock
index ee6c794b45c5..96ae0d0019cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -644,6 +644,14 @@
     "@carbon/icon-helpers" "0.0.1-beta.0"
     "@carbon/icons" "0.0.1-beta.0"
 
+"@carbon/icons-react@^0.0.1-alpha.32":
+  version "0.0.1-beta.0"
+  resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-0.0.1-beta.0.tgz#0dd2a3723e6ef14c075bd39eab702153b485384b"
+  integrity sha512-SBpDmHB8b2zQ56aTfJF9hAc/H/rmULVSu237jgCnFC5m5IJybc19hSNb9En9i49QxgAT/KRTWOBcqTMiXFX9BQ==
+  dependencies:
+    "@carbon/icon-helpers" "0.0.1-beta.0"
+    prop-types "^15.6.2"
+
 "@carbon/icons@0.0.1-beta.0":
   version "0.0.1-beta.0"
   resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-0.0.1-beta.0.tgz#7105a24a54c8ba43845fe3b560db6d5235d8591b"
@@ -2664,28 +2672,33 @@ capture-stack-trace@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
 
-carbon-addons-cloud@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/carbon-addons-cloud/-/carbon-addons-cloud-1.8.0.tgz#4a2a3b98f2c7989a8e21ad57a601248dbd9d7ce5"
-  dependencies:
-    classnames "^2.2.5"
-    prop-types "^15.6.0"
-    window-or-global "^1.0.1"
-
-carbon-components-react@^5.8.0:
-  version "5.52.4"
-  resolved "https://registry.yarnpkg.com/carbon-components-react/-/carbon-components-react-5.52.4.tgz#3182ce178bc246f0c0730e691535a907e975a464"
+carbon-components-react@^6.0.0:
+  version "6.106.3"
+  resolved "https://registry.yarnpkg.com/carbon-components-react/-/carbon-components-react-6.106.3.tgz#25b3b027b44822d04b8f17660bccec686d16d80c"
+  integrity sha512-6E1O8ces8dVZaOamtffDK0MBT99iy226/z2jjn/Wt7n5X/gJJhqmZ3vka+u1+KIW7ww3AKzoPf+Zb//jU3+Eww==
   dependencies:
-    classnames "2.2.5"
+    "@carbon/icons-react" "^0.0.1-alpha.32"
+    classnames "2.2.6"
     downshift "^1.31.14"
-    flatpickr "4.5.0"
+    flatpickr "4.5.5"
     invariant "^2.2.3"
     lodash.debounce "^4.0.8"
     lodash.isequal "^4.5.0"
     lodash.omit "^4.5.0"
+    react-is "^16.8.2"
     warning "^3.0.0"
     window-or-global "^1.0.1"
 
+carbon-components@^9.0.0:
+  version "9.84.3"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-9.84.3.tgz#9a534f636e33d1df790d2e18a43b815e96809d61"
+  integrity sha512-4P7pUVcV3p6Zzrhc8R1uLiEl+tZdySM1EhU1ghKMg0MhB2TI/i2WVvDgJuXlzsIOe5GkK6UlVPv/uqMBE4WMsQ==
+  dependencies:
+    carbon-icons "^7.0.7"
+    flatpickr "4.5.7"
+    lodash.debounce "^4.0.8"
+    warning "^3.0.0"
+
 carbon-icons@^7.0.7:
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/carbon-icons/-/carbon-icons-7.0.7.tgz#ebafe3e9fa25df973796a8eca06d8a7c501cc610"
@@ -2854,11 +2867,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
-
-classnames@^2.2.0, classnames@^2.2.5:
+classnames@2.2.6, classnames@^2.2.0:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
 
@@ -5114,9 +5123,10 @@ flat-cache@^1.2.1:
     rimraf "~2.6.2"
     write "^0.2.1"
 
-flatpickr@4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.5.0.tgz#f72c7164a1c24e3ad419e3b2209d1a2d3604724a"
+flatpickr@4.5.5:
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.5.5.tgz#b138050654932f4cf667897d00b51bb930bf392e"
+  integrity sha512-KgAJxBN1BWiOAkwvFSM/nS9YFESOh1yI7uQEd/HQqcTGev84ADO2Mx8C3bUKgIULscb+LireiSDe5D9fh3PFtQ==
 
 flatpickr@4.5.7:
   version "4.5.7"
@@ -10712,6 +10722,11 @@ react-ga@^2.4.0:
   version "2.5.6"
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.5.6.tgz#5a2e2fa78ae298e5b0a4498210eeec631ef1b562"
 
+react-is@^16.8.2:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
+  integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
+
 react@^16.2.0:
   version "16.6.3"
   resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"