feat(components): rearranging libs & cleanup

.storybook/preview-head.html

@@ -6,14 +6,7 @@
   href="https://fonts.googleapis.com/css?family=Material+Icons|Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
   rel="stylesheet"
 />
-<!-- Required styles for Material Web -->
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/material-components-web@13.0.0/dist/material-components-web.min.css"
-/>
 <!-- Required styles for Covalent icons -->
 <link href="libs/components/icons/covalent-icons.css" rel="stylesheet" />
-<!-- Required styles for Covalent Themes -->
-<link href="libs/components/styles.css" rel="stylesheet" />
-<!-- Required styles for Covalent Themes -->
+<!-- Required styles for Covalent themes -->
 <link href="libs/components/theme.css" rel="stylesheet" />

.storybook/preview.js

@@ -1,9 +1,10 @@
+import anysort from 'anysort';
+
 import darkTheme from './theme/covalent.dark.theme';
 import lightTheme from './theme/covalent.light.theme';
 
 import '!style-loader!css-loader!sass-loader!./theme/markdown-elements.scss';
 
-import anysort from 'anysort';
 
 export const parameters = {
   options: {
@@ -28,17 +29,6 @@ export const parameters = {
     },
   },
   backgrounds: {
-    default: 'twitter',
-    values: [
-      {
-        name: 'twitter',
-        value: '#00aced',
-      },
-      {
-        name: 'facebook',
-        value: '#3b5998',
-      },
-    ],
     grid: {
       disable: true,
     },

libs/components/src/app-shell/app-shell.scss

@@ -38,11 +38,17 @@
   border-color: var(--mdc-theme-border, rgba(black, 0.12));
 }
 
-[name='help']::slotted(*) {
+.help {
   grid-area: help;
   width: 320px;
   height: 100vh;
   overflow-y: auto;
+  border-left: 1px solid;
+  border-color: var(--mdc-theme-border, rgba(black, 0.12));
+
+  &.help--closed {
+    width: 0;
+  }
 }
 
 [name='mini-list']::slotted(*) {

libs/components/src/app-shell/app-shell.stories.js

@@ -1,11 +1,12 @@
 import { withDesign } from 'storybook-addon-designs';
-// import topAppBarComponent from "../../../../stories/demos/top-app-bar.component";
-import * as tableRowSelectionContent from '../../../../stories/demos/table-row-selection.content.html';
+// import topAppBarComponent from "../../stories/demos/top-app-bar.component";
+import * as tableRowSelectionContent from '../../stories/demos/table-row-selection.content.html';
 
 import './app-shell';
 import '../action-ribbon/action-ribbon';
 import '../list/list-expansion';
 import '../list/list-item';
+import '../list/nav-list-item';
 import '../toolbar/toolbar';
 import '../button/button';
 
@@ -26,8 +27,10 @@ export default {
   },
 };
 
+let appShell;
 let banner;
 let dataTable;
+let navItems;
 
 const updateActionRibbon = () => {
   const selectedRowNum = dataTable.getSelectedRowIds().length;
@@ -46,14 +49,32 @@ const Template = ({ navClick }) => {
     'DOMContentLoaded',
     () => {
       const dataTableEl = document.querySelector('.mdc-data-table');
+      appShell = document.querySelector('td-app-shell');
+      navItems = document.querySelectorAll(
+        'td-nav-list-item, td-expansion-list'
+      );
       banner = document.querySelector('td-action-ribbon');
       dataTable = new MDCDataTable(dataTableEl);
 
+      document.querySelector('.help-item').addEventListener('click', () => {
+        appShell.helpOpen = !appShell.helpOpen;
+      });
+
+      document.querySelector('.help-close').addEventListener('click', () => {
+        appShell.helpOpen = false;
+      });
+
       setTimeout(updateActionRibbon, 150);
     },
     { once: true }
   );
 
+  document.addEventListener('CovalentAppShell:toggle', () => {
+    navItems.forEach((item) => {
+      item.navOpen = !item.navOpen;
+    });
+  });
+
   document.addEventListener(events.SELECTED_ALL, updateActionRibbon);
   document.addEventListener(events.UNSELECTED_ALL, updateActionRibbon);
   document.addEventListener(events.ROW_SELECTION_CHANGED, updateActionRibbon);
@@ -81,42 +102,42 @@ const Template = ({ navClick }) => {
       <path class="logo-dot" fill="#e46c42" d="M695.029 116.028c0 8.825-6.772 15.596-16.212 15.596s-16.212-6.771-16.212-15.596c0-8.413 6.772-15.801 16.212-15.801s16.212 7.388 16.212 15.801"></path>
     </svg>
 
-    <td-list class="navigation-rail" slot="navigation" activatable>
-        <td-list-item class="home-item" graphic="avatar" >
+    <td-list class="navigation-rail" slot="navigation" activatable listitemtagname="td-nav-list-item">
+        <td-nav-list-item class="home-item" graphic="avatar">
             <span>Vantage</span>
             <td-icon class="covalent-icon teradata-circle" slot="graphic">teradata</td-icon>
             <td-icon class="covalent-icon teradata-no-circle" slot="graphic">teradata_nocircle</td-icon>
             <td-icon class="home-icon" slot="graphic">home</td-icon>
-        </td-list-item>
+        </td-nav-list-item>
 
         <td-expansion-list activatable>
-            <td-list-item slot="expansionHeader" graphic="avatar" hasChildren>
+            <td-nav-list-item slot="expansionHeader" graphic="avatar" hasChildren>
                Editor
                <td-icon class="covalent-icon" slot="graphic">product_editor</td-icon>
-            </td-list-item>
-            <td-list-item c>Scripts</td-list-item>
+            </td-nav-list-item>
+            <td-list-item>Scripts</td-list-item>
             <td-list-item>Scripts</td-list-item>
             <td-list-item>Scripts</td-list-item>
             <td-list-item>Scripts</td-list-item>
             <td-list-item>Scripts</td-list-item>
         </td-expansion-list>
 
-        <td-list-item graphic="avatar">
+        <td-nav-list-item graphic="avatar">
             <span>Sites</span>
             <td-icon class="covalent-icon" slot="graphic">server</td-icon>
-        </td-list-item>
-        <td-list-item graphic="avatar">
+        </td-nav-list-item>
+        <td-nav-list-item graphic="avatar">
             <span>Data Protections</span>
             <td-icon slot="graphic">settings_backup_restore</td-icon>
-        </td-list-item>
-        <td-list-item graphic="avatar">
+        </td-nav-list-item>
+        <td-nav-list-item graphic="avatar">
             <span>Identity</span>
             <td-icon slot="graphic">contacts</td-icon>
-        </td-list-item>
+        </td-nav-list-item>
     </td-list>
 
     <td-list class="navigation-rail" slot="user-menu" activatable>
-            <td-list-item class="beta-list-item" graphic="icon" twoline activated>
+            <td-nav-list-item class="beta-list-item" graphic="icon" twoline activated>
                 <svg slot="graphic" style="fill:orange; height:20px;" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" focusable="false">
                 <g>
                     <path d="M0 2C0 0.895431 0.895431 0 2 0H40L34.9206 20H2C0.895429 20 0 19.1046 0 18V2Z"></path>
@@ -125,21 +146,36 @@ const Template = ({ navClick }) => {
                 </svg>
                <span>You're trying console beta</span>
                <span slot="secondary">Return to classic</span>
-           </td-list-item>
-           <td-list-item graphic="avatar">
+           </td-nav-list-item>
+           <td-nav-list-item graphic="avatar">
                <span>Notification</span>
                <td-icon slot="graphic">notifications</td-icon>
-           </td-list-item>
-           <td-list-item graphic="avatar">
+           </td-nav-list-item>
+           <td-nav-list-item graphic="avatar" class="help-item" >
                <span>Help</span>
                <td-icon slot="graphic">help</td-icon>
-           </td-list-item>
-           <td-list-item graphic="avatar">
+           </td-nav-list-item>
+           <td-nav-list-item graphic="avatar">
                <span>Account</span>
                <td-icon slot="graphic">person</td-icon>
-           </td-list-item>
+           </td-nav-list-item>
     </td-list>
 
+    <div slot="help" class="mdc-typography">
+        <td-toolbar label="Help" >
+          <td-icon-button slot="iconActions" icon="open_in_browser"></td-icon-button>
+          <td-icon-button slot="iconActions" icon="close" class="help-close"></td-icon-button>
+        </td-toolbar>
+        <div style="padding:16px">
+          <h3 class="mdc-typography--subtitle2">Ultricies nunc massa, id ut felis sed varius accumsan platea.</h3>
+          <p class="mdc-typography--body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lectus risus, id aliquet mi congue sed.</p>
+          <p class="mdc-typography--body1">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pouere cubilia curae; Phasellus tincidunt eros arcu, sollicitudin laoreet urna aliquet eget.</p>
+          <p class="mdc-typography--body1">Phasellus porta sed libero vel vulputate. Quisque non nisl sem. Pellentesque nec pretium magna, et vestibulum neque. Mauris molestie eros quis nisi pretium, </p>
+          <p class="mdc-typography--body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lectus risus, id aliquet mi congue sed.</p>
+          <p class="mdc-typography--body1">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pouere cubilia curae; Phasellus tincidunt eros arcu, sollicitudin laoreet urna aliquet eget.</p>
+          <p class="mdc-typography--body1">Phasellus porta sed libero vel vulputate. Quisque non nisl sem. Pellentesque nec pretium magna, et vestibulum neque. Mauris molestie eros quis nisi pretium, </p>
+        </div>
+    </div>
     <div slot="mini-list">
             <td-toolbar label="[Page name]" mini>
                 <td-icon-button slot="iconActions" icon="filter_list"></td-icon-button>

libs/components/src/app-shell/app-shell.ts

@@ -1,5 +1,5 @@
 import { DrawerBase } from '@material/mwc-drawer/mwc-drawer-base';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
@@ -29,14 +29,24 @@ export class CovalentAppShell extends DrawerBase {
   @property()
   appName = '';
 
+  @property({ type: Boolean })
+  helpOpen = false;
+
   constructor() {
     super();
 
     this.resizeEvent();
   }
 
   private _toggleOpen() {
+    if (this.mdcFoundation.isOpening() || this.mdcFoundation.isClosing()) {
+      return;
+    }
+
     this.open = !this.open;
+    this.dispatchEvent(
+      new Event('CovalentAppShell:toggle', { bubbles: true, composed: true })
+    );
   }
 
   resizeEvent() {
@@ -52,7 +62,6 @@ export class CovalentAppShell extends DrawerBase {
 
   override connectedCallback() {
     super.connectedCallback();
-
     window.addEventListener('resize', () => this.resizeEvent());
   }
 
@@ -68,6 +77,16 @@ export class CovalentAppShell extends DrawerBase {
       'mdc-drawer--dismissible': dismissible,
       'mdc-drawer--modal': modal,
     };
+    const helpPanelClasses = {
+      'help--closed': !this.helpOpen,
+    };
+
+    const scrim = modal
+      ? html`<div
+          class="mdc-drawer-scrim"
+          @click="${this._handleScrimClick}"
+        ></div>`
+      : nothing;
 
     return html`
       <div class="app-shell">
@@ -96,15 +115,12 @@ export class CovalentAppShell extends DrawerBase {
           <div divider></div>
           <slot name="user-menu"></slot>
         </nav>
-        ${modal
-          ? html`<div
-              class="mdc-drawer-scrim"
-              @click="${this._handleScrimClick}"
-            ></div>`
-          : ''}
+        ${scrim}
         <slot name="mini-list"></slot>
         <div class="main mdc-drawer-app-content"><slot></slot></div>
-        <slot name="help"></slot>
+        <div class="help ${classMap(helpPanelClasses)}">
+          <slot name="help"></slot>
+        </div>
       </div>
     `;
   }

libs/components/src/card/cards.stories.js

@@ -1,5 +1,5 @@
 import './card';
-import * as tableContent from '../../../../stories/demos/table.content.html';
+import * as tableContent from '../../stories/demos/table.content.html';
 
 export default {
   title: 'Components/Cards',

libs/components/src/data-table/data-table.stories.js

@@ -1,9 +1,11 @@
 // Example Content
-import * as tableContent from '../../../../stories/demos/table.content.html';
-import * as tableRowSelectionContent from '../../../../stories/demos/table-row-selection.content.html';
-import * as tablePagination from '../../../../stories/demos/table-pagination.content.html';
-import * as tableProgressIndicator from '../../../../stories/demos/table-progress-indicator.content.html';
-import * as tableColumnSorting from '../../../../stories/demos/table-column-sorting.content.html';
+import * as tableContent from '../../stories/demos/table.content.html';
+import * as tableRowSelectionContent from '../../stories/demos/table-row-selection.content.html';
+import * as tablePagination from '../../stories/demos/table-pagination.content.html';
+import * as tableProgressIndicator from '../../stories/demos/table-progress-indicator.content.html';
+import * as tableColumnSorting from '../../stories/demos/table-column-sorting.content.html';
+
+import '!style-loader!css-loader!sass-loader!./data-table.stories.scss';
 
 export default {
   title: 'Components/Data Table',

libs/components/src/data-table/data-table.stories.scss

@@ -0,0 +1,11 @@
+@use '@material/checkbox'; // Required only for data table with row selection.
+@use '@material/icon-button/icon-button'; // Required only for data table with column sorting.
+@use '@material/linear-progress'; // Required only for data table with linear progress
+@use '@material/select/styles'; // Required only for data table with pagination
+@use '@material/data-table/data-table';
+
+@include checkbox.core-styles;
+@include linear-progress.core-styles;
+@include icon-button.core-styles;
+@include data-table.core-styles;
+@include data-table.theme-baseline;

libs/components/src/dialog/dialog.stories.js

@@ -1,4 +1,4 @@
-import dialogComponent from '../../../../stories/demos/dialog.component';
+import dialogComponent from '../../stories/demos/dialog.component';
 
 export default {
   title: 'Components/Dialog',

libs/components/src/grid/grid.stories.js

@@ -1,4 +1,4 @@
-import * as gridContent from '../../../../stories/demos/grid.content.html';
+import * as gridContent from '../../stories/demos/grid.content.html';
 
 export default {
   title: 'Components/Grid',

libs/components/src/index.ts

@@ -12,9 +12,12 @@ export * from './icon-button/icon-button';
 export * from './icon-checkbox/icon-check-toggle';
 export * from './icon-radio/icon-radio-toggle';
 export * from './linear-progress/linear-progress';
+export * from './list/check-list-item';
 export * from './list/list';
 export * from './list/list-expansion';
 export * from './list/list-item';
+export * from './list/nav-list-item';
+export * from './list/radio-list-item';
 export * from './menu/menu';
 export * from './radio/radio';
 export * from './select/select';