From 3a0c71e6aaea23f75f709130df086cd117525edc Mon Sep 17 00:00:00 2001 From: qa46hx Date: Thu, 23 Jan 2020 15:48:52 +0100 Subject: [PATCH] chore(overlays): improve overlay-system storybook demo --- .../overlays/stories/20-index.stories.mdx | 90 +++++++-------- .../40-system-configuration.stories.mdx | 104 +++++++++--------- .../stories/applyDemoOverlayStyles.js | 2 +- ...demo-overlay.js => demo-overlay-system.js} | 4 +- 4 files changed, 100 insertions(+), 100 deletions(-) rename packages/overlays/stories/{lion-demo-overlay.js => demo-overlay-system.js} (86%) diff --git a/packages/overlays/stories/20-index.stories.mdx b/packages/overlays/stories/20-index.stories.mdx index 207f980d7..13a1e6c51 100644 --- a/packages/overlays/stories/20-index.stories.mdx +++ b/packages/overlays/stories/20-index.stories.mdx @@ -6,11 +6,11 @@ import { withModalDialogConfig, } from '../index.js'; -import './lion-demo-overlay.js'; +import './demo-overlay-system.js'; import './applyDemoOverlayStyles.js';1 import { ref as r } from './directives/ref.js'; - + # Overlay System @@ -23,24 +23,24 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa {html` - + -
- Hello! You can close this notification here: - +
+ Hello! You can close this notification here: +
- + `} ```html - + -
+
Hello! You can close this notification here:
- + ``` ## Features @@ -132,9 +132,9 @@ _defineOverlayConfig() { or declaratively in your template with the `.config` property ```html - + -
+
Hello! You can close this notification here:
- + ``` ### Responsive switching @@ -157,7 +157,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo {html` - { if (window.innerWidth >= 600) { @@ -176,12 +176,12 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo ⨯
- + `} ```html - { if (window.innerWidth >= 600) { @@ -192,7 +192,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo }} > -
+
Hello! You can close this notification here:
- + ``` Alternative ways to do it is by setting the event listener manually on the `OverlayController` instance. @@ -262,7 +262,7 @@ Below is another demo where you can toggle between configurations using buttons. Dropdown
- +
Hello! You can close this notification here: @@ -272,7 +272,7 @@ Below is another demo where you can toggle between configurations using buttons. ⨯
- + `} @@ -293,9 +293,9 @@ Change config to: Dropdown
- + -
+
Hello! You can close this notification here:
- + ``` ## Opened state @@ -326,7 +326,7 @@ This can be useful e.g. if somewhere in your application you need to rely on thi } return html` appState.opened: ${appState.opened} - +
Hello! You can close this notification here: @@ -336,7 +336,7 @@ This can be useful e.g. if somewhere in your application you need to rely on thi ⨯
- + `; }} @@ -357,9 +357,9 @@ function onOpenClosed(ev) {
appState.opened: ${openedStateNode}
- + -
+
Hello! You can close this notification here:
- + ``` ## Intercepting open/close @@ -391,13 +391,13 @@ the `before-close` or `before-open` events. blockOverlay = !blockOverlay; refs.statusButton.textContent = blockOverlay; }}">${blockOverlay} - +
Hello! You can close this notification here:
- + `; }} @@ -413,13 +413,13 @@ the `before-close` or `before-open` events. ``` ```html - +
Hello! You can close this notification here:
- + ``` @@ -495,7 +495,7 @@ Below an example is shown with the `isBlocking` option, which makes use of the O {html` - +
Hello! You can close this notification here: @@ -508,8 +508,8 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
- - + +
Hello! You can close this notification here:
- + `} ```html - + -
+
Hello! You can close this notification here:
- + - +
Hello! You can close this notification here:
- + ``` diff --git a/packages/overlays/stories/40-system-configuration.stories.mdx b/packages/overlays/stories/40-system-configuration.stories.mdx index ad3699137..0e7827da3 100644 --- a/packages/overlays/stories/40-system-configuration.stories.mdx +++ b/packages/overlays/stories/40-system-configuration.stories.mdx @@ -1,9 +1,9 @@ import { Story, Meta, html } from '@open-wc/demoing-storybook'; -import './lion-demo-overlay.js'; +import './demo-overlay-system.js'; import './applyDemoOverlayStyles.js'; - + # Overlay System - Configuration @@ -21,7 +21,7 @@ or in the `global-overlays` container at the bottom of the ``. Local: {html` - +
Hello! You can close this notification here: @@ -32,12 +32,12 @@ Local: ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -48,13 +48,13 @@ Local: ⨯
- + ``` Global: {html` - +
Hello! You can close this notification here: @@ -65,12 +65,12 @@ Global: ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -81,7 +81,7 @@ Global: ⨯
- + ``` ## trapsKeyboardFocus @@ -95,7 +95,7 @@ You use the feature on any type of overlay. {html` - +
@@ -108,12 +108,12 @@ You use the feature on any type of overlay. ⨯
- + `} ```html - +
@@ -126,7 +126,7 @@ You use the feature on any type of overlay. ⨯
- + ``` ## hidesOnEsc @@ -137,7 +137,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled. {html` - +
Hello! You can close this notification here: @@ -148,12 +148,12 @@ Boolean property. Will allow closing the overlay on ESC key when enabled. ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -164,7 +164,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled. ⨯
- + ``` ## hidesOnOutsideClick @@ -173,7 +173,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten {html` - +
Hello! You can close this notification here: @@ -184,12 +184,12 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -200,7 +200,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten ⨯
- + ``` ## elementToFocusAfterHide @@ -211,7 +211,7 @@ In the example, we focus the body instead of the `invokerNode`. {html` - +
Hello! You can close this notification here: @@ -222,12 +222,12 @@ In the example, we focus the body instead of the `invokerNode`. ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -238,7 +238,7 @@ In the example, we focus the body instead of the `invokerNode`. ⨯
- + ``` ## hasBackdrop @@ -258,7 +258,7 @@ This currently only supports CSS Animations, because it relies on the `animation {html` - +
Hello! You can close this notification here: @@ -269,12 +269,12 @@ This currently only supports CSS Animations, because it relies on the `animation ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -285,7 +285,7 @@ This currently only supports CSS Animations, because it relies on the `animation ⨯
- + ``` ## isBlocking @@ -305,13 +305,13 @@ This currently only supports CSS Animations, because it relies on the `animation {html` - +
- + -
+
Hello! You can close this notification here:
- +
Hello! You can close this notification here:
- + `} ```html - +
- + -
+
Hello! You can close this notification here:
- +
Hello! You can close this notification here:
- + ``` This example shows nested overlays, but they don't have to be. For example, they could be siblings, or completely unrelated. @@ -372,7 +372,7 @@ Boolean property. When true, prevents scrolling content that is outside of the ` {html` - +
Hello! You can close this notification here: @@ -383,12 +383,12 @@ Boolean property. When true, prevents scrolling content that is outside of the ` ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -399,7 +399,7 @@ Boolean property. When true, prevents scrolling content that is outside of the ` ⨯
- + ``` ## viewportConfig @@ -420,7 +420,7 @@ Options: {html` - +
Hello! You can close this notification here: @@ -431,12 +431,12 @@ Options: ⨯
- + `} ```html - +
Hello! You can close this notification here: @@ -447,7 +447,7 @@ Options: ⨯
- + ``` @@ -471,7 +471,7 @@ Here's a succinct overview of some often used popper properties: {html` -
- + `} ```js -
- + ``` > Note: popperConfig reflects Popper.js API diff --git a/packages/overlays/stories/applyDemoOverlayStyles.js b/packages/overlays/stories/applyDemoOverlayStyles.js index 4abcba59c..8d31eec47 100644 --- a/packages/overlays/stories/applyDemoOverlayStyles.js +++ b/packages/overlays/stories/applyDemoOverlayStyles.js @@ -7,7 +7,7 @@ const applyDemoOverlayStyles = () => { padding: 10px; } - .demo-overlay--second { + .demo-overlay--blocking { background-color: pink; } `; diff --git a/packages/overlays/stories/lion-demo-overlay.js b/packages/overlays/stories/demo-overlay-system.js similarity index 86% rename from packages/overlays/stories/lion-demo-overlay.js rename to packages/overlays/stories/demo-overlay-system.js index 003e0dec1..14c52cb49 100644 --- a/packages/overlays/stories/lion-demo-overlay.js +++ b/packages/overlays/stories/demo-overlay-system.js @@ -1,7 +1,7 @@ import { html, LitElement } from '@lion/core'; import { OverlayMixin } from '../src/OverlayMixin.js'; -class LionDemoOverlay extends OverlayMixin(LitElement) { +class DemoOverlaySystem extends OverlayMixin(LitElement) { _defineOverlayConfig() { return { placementMode: 'global', @@ -35,4 +35,4 @@ class LionDemoOverlay extends OverlayMixin(LitElement) { `; } } -customElements.define('lion-demo-overlay', LionDemoOverlay); +customElements.define('demo-overlay-system', DemoOverlaySystem);