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

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;
   }

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;

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} />

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>
     );
   }
 }