From dee789c54722dd1316228cde68a4380f2e2769bf Mon Sep 17 00:00:00 2001 From: github-actions Date: Wed, 19 Oct 2022 10:43:02 -0400 Subject: [PATCH] feat(components): rearranging libs & cleanup --- .storybook/preview-head.html | 9 +- .storybook/preview.js | 14 +-- libs/components/src/app-shell/app-shell.scss | 8 +- .../src/app-shell/app-shell.stories.js | 80 ++++++++++---- libs/components/src/app-shell/app-shell.ts | 34 ++++-- libs/components/src/card/cards.stories.js | 2 +- .../src/data-table/data-table.stories.js | 12 +- .../src/data-table/data-table.stories.scss | 11 ++ libs/components/src/dialog/dialog.stories.js | 2 +- libs/components/src/grid/grid.stories.js | 2 +- libs/components/src/index.ts | 3 + libs/components/src/list/_list.scss | 103 ------------------ libs/components/src/list/list-expansion.ts | 40 ++++++- libs/components/src/list/nav-list-item.scss | 95 ++++++++++++++++ libs/components/src/list/nav-list-item.ts | 24 ++++ libs/components/src/menu/menu.stories.js | 4 +- .../src/skeleton/skeleton.stories.js | 6 +- .../src/top-app-bar/top-app-bar.stories.js | 2 +- .../stories}/Introduction.stories.mdx | 0 .../components/stories}/color-use.stories.mdx | 0 .../stories}/demos/dialog.component.html | 0 .../stories}/demos/dialog.component.js | 0 .../stories}/demos/grid.content.html | 0 .../stories}/demos/lorem-ipsum.content.html | 0 .../stories}/demos/material-web.content.html | 5 + .../stories}/demos/menu.component.html | 0 .../stories}/demos/menu.component.js | 0 .../demos/table-column-sorting.content.html | 0 .../demos/table-pagination.content.html | 22 ---- .../table-progress-indicator.content.html | 0 .../demos/table-row-selection.content.html | 0 .../stories}/demos/table.content.html | 0 .../stories}/demos/top-app-bar.component.js | 0 .../stories}/demos/typography.content.html | 2 +- .../guide-representing-state.stories.mdx | 0 .../stories}/info-and-help.stories.mdx | 0 .../stories}/kitchen-sink/chips.scss | 0 .../stories}/kitchen-sink/image-list.scss | 0 .../kitchen-sink/kitchen-sink.stories.js | 0 .../stories}/markdown-elements.stories.mdx | 0 .../stories}/writing-and-naming.stories.mdx | 0 libs/components/styles/styles.scss | 22 ---- .../_all-theme.scss => theme/_mixins.scss} | 34 +++--- libs/components/{styles => }/theme/theme.scss | 9 +- libs/components/webpack.config.js | 8 +- .../src/typography/typography.stories.js | 4 +- .../src/typography/typography.stories.scss | 1 + 47 files changed, 316 insertions(+), 242 deletions(-) create mode 100644 libs/components/src/data-table/data-table.stories.scss delete mode 100644 libs/components/src/list/_list.scss create mode 100644 libs/components/src/list/nav-list-item.scss create mode 100644 libs/components/src/list/nav-list-item.ts rename {stories => libs/components/stories}/Introduction.stories.mdx (100%) rename {stories => libs/components/stories}/color-use.stories.mdx (100%) rename {stories => libs/components/stories}/demos/dialog.component.html (100%) rename {stories => libs/components/stories}/demos/dialog.component.js (100%) rename {stories => libs/components/stories}/demos/grid.content.html (100%) rename {stories => libs/components/stories}/demos/lorem-ipsum.content.html (100%) rename {stories => libs/components/stories}/demos/material-web.content.html (99%) rename {stories => libs/components/stories}/demos/menu.component.html (100%) rename {stories => libs/components/stories}/demos/menu.component.js (100%) rename {stories => libs/components/stories}/demos/table-column-sorting.content.html (100%) rename {stories => libs/components/stories}/demos/table-pagination.content.html (86%) rename {stories => libs/components/stories}/demos/table-progress-indicator.content.html (100%) rename {stories => libs/components/stories}/demos/table-row-selection.content.html (100%) rename {stories => libs/components/stories}/demos/table.content.html (100%) rename {stories => libs/components/stories}/demos/top-app-bar.component.js (100%) rename {stories => libs/components/stories}/demos/typography.content.html (97%) rename {stories => libs/components/stories}/guide-representing-state.stories.mdx (100%) rename {stories => libs/components/stories}/info-and-help.stories.mdx (100%) rename {stories => libs/components/stories}/kitchen-sink/chips.scss (100%) rename {stories => libs/components/stories}/kitchen-sink/image-list.scss (100%) rename {stories => libs/components/stories}/kitchen-sink/kitchen-sink.stories.js (100%) rename {stories => libs/components/stories}/markdown-elements.stories.mdx (100%) rename {stories => libs/components/stories}/writing-and-naming.stories.mdx (100%) delete mode 100644 libs/components/styles/styles.scss rename libs/components/{styles/theme/_all-theme.scss => theme/_mixins.scss} (92%) rename libs/components/{styles => }/theme/theme.scss (55%) create mode 100644 libs/tokens/src/typography/typography.stories.scss diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 43ad9f99a..26326db1c 100644 --- a/.storybook/preview-head.html +++ b/.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" /> - - - - - + diff --git a/.storybook/preview.js b/.storybook/preview.js index 8ad03be60..8c92c1543 100644 --- a/.storybook/preview.js +++ b/.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, }, diff --git a/libs/components/src/app-shell/app-shell.scss b/libs/components/src/app-shell/app-shell.scss index c7e4d5522..63e645da7 100644 --- a/libs/components/src/app-shell/app-shell.scss +++ b/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(*) { diff --git a/libs/components/src/app-shell/app-shell.stories.js b/libs/components/src/app-shell/app-shell.stories.js index 67fcf5967..5c81fd2a8 100644 --- a/libs/components/src/app-shell/app-shell.stories.js +++ b/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 }) => { - - + + Vantage teradata teradata_nocircle home - + - + Editor product_editor - - Scripts + + Scripts Scripts Scripts Scripts Scripts - + Sites server - - + + Data Protections settings_backup_restore - - + + Identity contacts - + - + @@ -125,21 +146,36 @@ const Template = ({ navClick }) => { You're trying console beta Return to classic - - + + Notification notifications - - + + Help help - - + + Account person - + +
+ + + + +
+

Ultricies nunc massa, id ut felis sed varius accumsan platea.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lectus risus, id aliquet mi congue sed.

+

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pouere cubilia curae; Phasellus tincidunt eros arcu, sollicitudin laoreet urna aliquet eget.

+

Phasellus porta sed libero vel vulputate. Quisque non nisl sem. Pellentesque nec pretium magna, et vestibulum neque. Mauris molestie eros quis nisi pretium,

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lectus risus, id aliquet mi congue sed.

+

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pouere cubilia curae; Phasellus tincidunt eros arcu, sollicitudin laoreet urna aliquet eget.

+

Phasellus porta sed libero vel vulputate. Quisque non nisl sem. Pellentesque nec pretium magna, et vestibulum neque. Mauris molestie eros quis nisi pretium,

+
+
diff --git a/libs/components/src/app-shell/app-shell.ts b/libs/components/src/app-shell/app-shell.ts index 534ae8f39..0a588db43 100644 --- a/libs/components/src/app-shell/app-shell.ts +++ b/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,6 +29,9 @@ export class CovalentAppShell extends DrawerBase { @property() appName = ''; + @property({ type: Boolean }) + helpOpen = false; + constructor() { super(); @@ -36,7 +39,14 @@ export class CovalentAppShell extends DrawerBase { } 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`
` + : nothing; return html`
@@ -96,15 +115,12 @@ export class CovalentAppShell extends DrawerBase {
- ${modal - ? html`
` - : ''} + ${scrim}
- +
+ +
`; } diff --git a/libs/components/src/card/cards.stories.js b/libs/components/src/card/cards.stories.js index 8452770c1..3a1849831 100644 --- a/libs/components/src/card/cards.stories.js +++ b/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', diff --git a/libs/components/src/data-table/data-table.stories.js b/libs/components/src/data-table/data-table.stories.js index 8778d3560..4cae140ad 100644 --- a/libs/components/src/data-table/data-table.stories.js +++ b/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', diff --git a/libs/components/src/data-table/data-table.stories.scss b/libs/components/src/data-table/data-table.stories.scss new file mode 100644 index 000000000..58f71d291 --- /dev/null +++ b/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; diff --git a/libs/components/src/dialog/dialog.stories.js b/libs/components/src/dialog/dialog.stories.js index 79658cf63..9ca6dc4cc 100644 --- a/libs/components/src/dialog/dialog.stories.js +++ b/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', diff --git a/libs/components/src/grid/grid.stories.js b/libs/components/src/grid/grid.stories.js index 2a3354d0c..2fedad442 100644 --- a/libs/components/src/grid/grid.stories.js +++ b/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', diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts index f6ce064e6..f3f1ce710 100644 --- a/libs/components/src/index.ts +++ b/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'; diff --git a/libs/components/src/list/_list.scss b/libs/components/src/list/_list.scss deleted file mode 100644 index 1091cccdd..000000000 --- a/libs/components/src/list/_list.scss +++ /dev/null @@ -1,103 +0,0 @@ -@mixin core-styles() { - td-list { - .beta-list-item { - --mdc-list-item-meta-size: 20px; - --mdc-list-item-graphic-size: 40px; - --mdc-list-item-graphic-margin: 15px; - --mdc-typography-subtitle1-font-size: var( - --mdc-typography-subtitle2-font-size - ); - --mdc-typography-body2-font-size: var(--mdc-typography-caption-font-size); - margin-bottom: 8px; - font-size: var(--mdc-typography-subtitle1-font-size); - - .beta-icon { - height: 20px; - line-height: 20px; - width: 40px; - } - } - - &.navigation-rail { - td-list-item:not(.beta-list-item) { - border-radius: 0 28px 28px 0; - margin-right: 16px; - } - - td-list-item[graphic='avatar']:not(.beta-list-item) - td-icon[slot='graphic'] { - background: transparent; - } - - .home-item .covalent-icon:not(.teradata-circle) { - --mdc-list-item-graphic-size: 40px; - --mdc-icon-size: 40px; - } - - .home-item .home-icon { - display: none; - } - .home-item .teradata-circle { - display: none; - } - .home-item .teradata-no-circle { - display: block; - } - .home-item:hover .home-icon { - display: block; - } - .home-item:hover .covalent-icon { - display: none; - } - - td-app-shell:not([open]) & { - td-list-item:not(.beta-list-item) { - border-radius: 100%; - margin: 0 auto 8px; - padding: 0; - width: 48px; - height: 48px; - } - - td-list-item [slot='graphic'], - td-list-item td-icon { - margin-left: 8px; - } - - td-expansion-list { - --td-list-item-text-icon-on-background: transparent; - --td-list-menu-height: 0; - } - - .beta-list-item { - --mdc-list-item-graphic-margin: 0px; - --mdc-typography-subtitle1-font-size: 0; - --mdc-typography-body2-font-size: 0; - height: 48px; - font-size: 0; - padding: 0; - justify-content: center; - align-content: center; - } - - .home-item { - background-color: #f3753f; - --mdc-ripple-color: #fff; - --mdc-theme-text-icon-on-background: #fff; - } - } - - td-app-shell[open] & { - .home-item .covalent-icon { - display: none; - } - .home-item .covalent-icon.teradata-circle { - display: block; - } - .home-item:hover .covalent-icon.teradata-circle { - display: none; - } - } - } - } -} diff --git a/libs/components/src/list/list-expansion.ts b/libs/components/src/list/list-expansion.ts index f12b3f00f..1f4b32453 100644 --- a/libs/components/src/list/list-expansion.ts +++ b/libs/components/src/list/list-expansion.ts @@ -2,10 +2,11 @@ import { ListBase } from '@material/mwc-list/mwc-list-base'; import { observer } from '@material/mwc-base/observer'; import { styles as listBaseStyles } from '@material/mwc-list/mwc-list.css'; import styles from './list-expansion.scss'; -import { html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { html, nothing } from 'lit'; +import { customElement, property, query } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { classMap } from 'lit/directives/class-map.js'; +import { CovalentMenuBase } from '../menu/menu'; declare global { interface HTMLElementTagNameMap { @@ -27,15 +28,38 @@ export class CovalentExpansionList extends ListBase { @property({ type: Boolean, reflect: true }) open = false; + @property({ type: Boolean, reflect: true }) + navOpen = false; + + @query('td-menu') + menuEl!: CovalentMenuBase; + + @query('.expansion-header') + expansionHeader!: HTMLElement; + constructor() { super(); } private _toggleOpen() { this.open = !this.open; + + if (!this.navOpen) { + this.menuEl.anchor = this.expansionHeader; + this.menuEl.open = !this.menuEl.open; + } } override render() { + return html` +
+ +
+ ${this.navOpen ? this.renderList() : nothing} ${this.renderMenu()} + `; + } + + renderList() { const role = this.innerRole === null ? undefined : this.innerRole; const ariaLabel = this.innerAriaLabel === null ? undefined : this.innerAriaLabel; @@ -43,10 +67,7 @@ export class CovalentExpansionList extends ListBase { const classes = { 'td-expansion-list--open': this.open, }; - return html` - -
    `; } + + renderMenu() { + return html` + + + ${this.renderPlaceholder()} + + `; + } } diff --git a/libs/components/src/list/nav-list-item.scss b/libs/components/src/list/nav-list-item.scss new file mode 100644 index 000000000..f0fd19b73 --- /dev/null +++ b/libs/components/src/list/nav-list-item.scss @@ -0,0 +1,95 @@ +:host { + font-family: var(--mdc-typography-font-family); + font-size: var(--mdc-typography-body1-font-size); + font-weight: var(--mdc-typography-body1-font-weight); + line-height: var(--mdc-typography-body1-line-height); +} + +:host([navopen]) { + border-radius: 0 28px 28px 0; + transition: border-radius 100ms ease-out; + margin-right: 16px; +} + +:host([graphic='avatar']:not([navopen])) { + border-radius: 100%; + margin: 0 auto 8px; + padding: 0; + width: 48px; + height: 48px; + + ::slotted(td-icon[slot='graphic']) { + margin-left: 8px; + background: transparent; + } +} + +:host(.home-item) { + ::slotted(.teradata-no-circle) { + --mdc-list-item-graphic-size: 40px; + --mdc-icon-size: 40px; + display: none; + } + + ::slotted(.home-icon) { + display: none; + + &:hover .covalent-icon { + display: none; + } + } +} +:host(.home-item:hover) { + ::slotted(.home-icon) { + display: block; + } + ::slotted(.teradata-circle) { + display: none; + } + ::slotted(.teradata-no-circle) { + display: none; + } +} +:host(.home-item:not([navopen])) { + background-color: #f3753f; + --mdc-ripple-color: #fff; + --mdc-theme-text-icon-on-background: #fff; + + ::slotted(.teradata-circle) { + display: none; + } + ::slotted(.teradata-no-circle) { + display: block; + } +} +:host(.home-item:hover:not([navopen])) { + ::slotted(.teradata-no-circle) { + display: none; + } +} + +:host(.beta-list-item) { + --mdc-theme-primary: var(--mdc-theme-surface-caution); + --mdc-list-item-meta-size: 20px; + --mdc-list-item-graphic-size: 40px; + --mdc-list-item-graphic-margin: 15px; + --mdc-typography-subtitle1-font-size: var( + --mdc-typography-subtitle2-font-size + ); + --mdc-typography-body2-font-size: var(--mdc-typography-caption-font-size); + margin-bottom: 8px; + font-size: var(--mdc-typography-subtitle1-font-size); + margin-right: 0; + border-radius: 0; +} + +:host(.beta-list-item:not([navopen])) { + --mdc-list-item-graphic-margin: 0px; + --mdc-typography-subtitle1-font-size: 0; + --mdc-typography-body2-font-size: 0; + height: 48px; + font-size: 0; + padding: 0; + justify-content: center; + align-content: center; +} diff --git a/libs/components/src/list/nav-list-item.ts b/libs/components/src/list/nav-list-item.ts new file mode 100644 index 000000000..6649de79a --- /dev/null +++ b/libs/components/src/list/nav-list-item.ts @@ -0,0 +1,24 @@ +import { customElement, property } from 'lit/decorators.js'; +import { CovalentListItemBase } from './list-item'; +import { styles as controlStyle } from '@material/mwc-list/mwc-control-list-item.css'; +import { styles as listItemStyle } from '@material/mwc-list/mwc-list-item.css'; +import styles from './list-item.scss'; +import navListStyles from './nav-list-item.scss'; + +declare global { + interface HTMLElementTagNameMap { + 'td-nav-list-item': CovalentNavRailListItem; + } +} + +@customElement('td-nav-list-item') +export class CovalentNavRailListItem extends CovalentListItemBase { + static override styles = [listItemStyle, controlStyle, styles, navListStyles]; + + @property({ type: Boolean, reflect: true }) + navOpen = false; + + constructor() { + super(); + } +} diff --git a/libs/components/src/menu/menu.stories.js b/libs/components/src/menu/menu.stories.js index e3b52a371..58c0c26a4 100644 --- a/libs/components/src/menu/menu.stories.js +++ b/libs/components/src/menu/menu.stories.js @@ -1,4 +1,6 @@ -import menuComponent from '../../../../stories/demos/menu.component'; +import './menu'; + +import menuComponent from '../../stories/demos/menu.component'; export default { title: 'Components/Menu', diff --git a/libs/components/src/skeleton/skeleton.stories.js b/libs/components/src/skeleton/skeleton.stories.js index d09b55927..53047a5e8 100644 --- a/libs/components/src/skeleton/skeleton.stories.js +++ b/libs/components/src/skeleton/skeleton.stories.js @@ -1,9 +1,9 @@ import '../checkbox/checkbox'; import '../formfield/formfield'; -import * as typographyContent from '../../../../stories/demos/typography.content.html'; -import * as loremIpsumContent from '../../../../stories/demos/lorem-ipsum.content.html'; -import * as tableProgressContent from '../../../../stories/demos/table-progress-indicator.content.html'; +import * as typographyContent from '../../stories/demos/typography.content.html'; +import * as loremIpsumContent from '../../stories/demos/lorem-ipsum.content.html'; +import * as tableProgressContent from '../../stories/demos/table-progress-indicator.content.html'; import '!style-loader!css-loader!sass-loader!skeleton-elements/skeleton-elements.scss'; diff --git a/libs/components/src/top-app-bar/top-app-bar.stories.js b/libs/components/src/top-app-bar/top-app-bar.stories.js index 6e161fa17..a998b81cc 100644 --- a/libs/components/src/top-app-bar/top-app-bar.stories.js +++ b/libs/components/src/top-app-bar/top-app-bar.stories.js @@ -1,4 +1,4 @@ -import topAppBarComponent from '../../../../stories/demos/top-app-bar.component'; +import topAppBarComponent from '../../stories/demos/top-app-bar.component'; export default { title: 'Components/Top App Bar', diff --git a/stories/Introduction.stories.mdx b/libs/components/stories/Introduction.stories.mdx similarity index 100% rename from stories/Introduction.stories.mdx rename to libs/components/stories/Introduction.stories.mdx diff --git a/stories/color-use.stories.mdx b/libs/components/stories/color-use.stories.mdx similarity index 100% rename from stories/color-use.stories.mdx rename to libs/components/stories/color-use.stories.mdx diff --git a/stories/demos/dialog.component.html b/libs/components/stories/demos/dialog.component.html similarity index 100% rename from stories/demos/dialog.component.html rename to libs/components/stories/demos/dialog.component.html diff --git a/stories/demos/dialog.component.js b/libs/components/stories/demos/dialog.component.js similarity index 100% rename from stories/demos/dialog.component.js rename to libs/components/stories/demos/dialog.component.js diff --git a/stories/demos/grid.content.html b/libs/components/stories/demos/grid.content.html similarity index 100% rename from stories/demos/grid.content.html rename to libs/components/stories/demos/grid.content.html diff --git a/stories/demos/lorem-ipsum.content.html b/libs/components/stories/demos/lorem-ipsum.content.html similarity index 100% rename from stories/demos/lorem-ipsum.content.html rename to libs/components/stories/demos/lorem-ipsum.content.html diff --git a/stories/demos/material-web.content.html b/libs/components/stories/demos/material-web.content.html similarity index 99% rename from stories/demos/material-web.content.html rename to libs/components/stories/demos/material-web.content.html index 868897fb6..285c693a3 100644 --- a/stories/demos/material-web.content.html +++ b/libs/components/stories/demos/material-web.content.html @@ -1,3 +1,8 @@ + +