From 865e06ba18907a17b38f4f261c8ee122b0458571 Mon Sep 17 00:00:00 2001 From: Matt Hippely Date: Fri, 9 Jul 2021 17:31:26 -0700 Subject: [PATCH] fix: realistic group demos Note: I'm changing the build workflow node version in the commit also to address the re-occuring and intermittent issues with builds failing b/c of playwright not being downloaded. Read more at these issues: https://github.com/microsoft/playwright/issues/1988 https://github.com/microsoft/playwright/issues/4033#issuecomment-702325569 Signed-off-by: Matt Hippely --- .github/workflows/build.yml | 3 +- .../src/navigation/navigation.element.scss | 4 + .../core/src/navigation/navigation.stories.ts | 654 ++++++++++-------- packages/core/web-dev-server.config.mjs | 5 + 4 files changed, 358 insertions(+), 308 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index deb94378c3..42dafb894c 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -11,7 +11,8 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: - node-version: '14.x' + node-version: '14' + check-latest: true - uses: microsoft/playwright-github-action@v1 - uses: actions/cache@v2 with: diff --git a/packages/core/src/navigation/navigation.element.scss b/packages/core/src/navigation/navigation.element.scss index ec5dabaa60..67984c1586 100644 --- a/packages/core/src/navigation/navigation.element.scss +++ b/packages/core/src/navigation/navigation.element.scss @@ -65,3 +65,7 @@ height: 100%; overflow: auto; } + +::slotted([slot='cds-navigation-substart']) { + width: 100%; +} diff --git a/packages/core/src/navigation/navigation.stories.ts b/packages/core/src/navigation/navigation.stories.ts index 77ea588912..04bbab96ba 100644 --- a/packages/core/src/navigation/navigation.stories.ts +++ b/packages/core/src/navigation/navigation.stories.ts @@ -10,7 +10,38 @@ import customElements from '../../dist/core/custom-elements.json'; import { html } from 'lit'; import { CdsNavigation } from '@cds/core/navigation'; import { CdsNavigationGroup } from '@cds/core/navigation'; + +import { ClarityIcons } from '@cds/core/icon/icon.service.js'; import { CdsIcon } from '@cds/core/icon/icon.element.js'; +import { applicationsIcon } from '@cds/core/icon/shapes/applications.js'; +import { cogIcon } from '@cds/core/icon/shapes/cog.js'; +import { dashboardIcon } from '@cds/core/icon/shapes/dashboard.js'; +import { dollarIcon } from '@cds/core/icon/shapes/dollar.js'; +import { eyeIcon } from '@cds/core/icon/shapes/eye.js'; +import { eyeHideIcon } from '@cds/core/icon/shapes/eye-hide.js'; +import { fileIcon } from '@cds/core/icon/shapes/file.js'; +import { helpInfoIcon } from '@cds/core/icon/shapes/help-info.js'; +import { lineChartIcon } from '@cds/core/icon/shapes/line-chart.js'; +import { userIcon } from '@cds/core/icon/shapes/user.js'; +import { imageIcon } from '@cds/core/icon/shapes/image.js'; +import { homeIcon } from '@cds/core/icon/shapes/home.js'; + +import '@cds/core/icon/register.js'; + +ClarityIcons.addIcons( + applicationsIcon, + cogIcon, + dashboardIcon, + dollarIcon, + eyeIcon, + eyeHideIcon, + fileIcon, + helpInfoIcon, + lineChartIcon, + imageIcon, + homeIcon, + userIcon +); export default { title: 'Stories/Navigation', @@ -51,85 +82,102 @@ export default { export function verticalBasic() { return html` -
- - - - Navigation One - - - - - Navigation Two - - - - - Navigation Active - - - - - Navigation Selected - - - - - Navigation Disabled - - - - - - Navigation Six - - - - - I'm tabbable content - +
+ + + Application Inc. + +
+ + + + Home + + + + + Account + + + + + People + + + + + Help + + + + + Service + + + + + Documentation + + + + + Application content link + +
`; } export function verticalIconLink() { return html` -
- - - - - Navigation One - - - - - - Navigation Two - - - - - - Navigation Active - - - - - - Navigation Selected - - - - - - Navigation Disabled - - - - - I'm tabbable content - +
+ + + Application Inc. + +
`; } @@ -148,34 +196,40 @@ export function collapsibleVerticalNavigation() {
- - - - Navigation One + + + + Home - - - Navigation Two + + + Account - - - - Navigation Active + + + + People - - - - Navigation Selected + + + + Help - - - Navigation Disabled + + + Service + + + + + + Documentation @@ -183,34 +237,40 @@ export function collapsibleVerticalNavigation() { Navigation toggle - - - - Navigation One + + + + Home - - - Navigation Two + + + Account - - - - Navigation Active + + + + People - - - - Navigation Selected + + + + Help - - - Navigation Disabled + + + Service + + + + + + Documentation @@ -219,34 +279,40 @@ export function collapsibleVerticalNavigation() { Custom toggle - - - - Navigation One + + + + Home - - - Navigation Two + + + Account - - - - Navigation Active + + + + People - - - - Navigation Selected + + + + Help - - - Navigation Disabled + + + Service + + + + + + Documentation @@ -256,112 +322,102 @@ export function collapsibleVerticalNavigation() { export function verticalBasicSubStart() { return html` -
- -
- `; } export function verticalAlignBottom() { return html` -
- -
-
-

- Sub-start slot -

-
- -
- - - Navigation One - - - - - Navigation Two - - - - - Navigation Active - - - - - Navigation Selected - - - - - Navigation Disabled - - - - - - Navigation Six - - - - - - Navigation align:bottom - - - - - I'm tabbable content - + `; } @@ -369,50 +425,45 @@ export function verticalAlignBottom() { export function verticalEnd() { return html` @@ -426,118 +477,107 @@ export function navigationGroups() { navigation.expanded = !navigation.expanded; }, }; - const onExpandGroupChange = { handleEvent(e: Event) { const group = e.target as CdsNavigationGroup; group.expanded = !group.expanded; }, }; - - return html` + const demo = html` `; + return demo; } /** @website */ diff --git a/packages/core/web-dev-server.config.mjs b/packages/core/web-dev-server.config.mjs index f6e03bb41c..22b78591b9 100644 --- a/packages/core/web-dev-server.config.mjs +++ b/packages/core/web-dev-server.config.mjs @@ -90,6 +90,11 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({ '@cds/core/icon/shapes/cog.js': '/dist/core/icon/shapes/cog.js', '@cds/core/icon/shapes/share.js': '/dist/core/icon/shapes/share.js', '@cds/core/icon/shapes/thumbs-up.js': '/dist/core/icon/shapes/thumbs-up.js', + '@cds/core/icon/shapes/dashboard.js': '/dist/core/icon/shapes/dashboard.js', + '@cds/core/icon/shapes/dollar.js': '/dist/core/icon/shapes/dollar.js', + '@cds/core/icon/shapes/help-info.js': '/dist/core/icon/shapes/help-info.js', + '@cds/core/icon/shapes/line-chart.js': '/dist/core/icon/shapes/line-chart.js', + '@cds/core/icon/shapes/file.js': '/dist/core/icon/shapes/file.js', '@cds/core/accordion': '/dist/core/accordion/index.js', '@cds/core/accordion/register.js': '/dist/core/accordion/register.js',