@spectrum-web-components/overlay 1.0.2 → 1.0.3

package/stories/overlay-directive.stories.js

@@ -0,0 +1,324 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  LitElement
+} from "@spectrum-web-components/base";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/dialog/sp-dialog-wrapper.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import {
+  trigger
+} from "@spectrum-web-components/overlay/src/overlay-trigger-directive.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/radio/sp-radio.js";
+import "@spectrum-web-components/radio/sp-radio-group.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import "@spectrum-web-components/accordion/sp-accordion.js";
+import "@spectrum-web-components/accordion/sp-accordion-item.js";
+import "../../../projects/story-decorator/src/types.js";
+import "./overlay-story-components.js";
+import { tooltip } from "@spectrum-web-components/tooltip/src/tooltip-directive.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { state } from "@spectrum-web-components/base/src/decorators.js";
+const storyStyles = html`
+    <style>
+        html,
+        body,
+        #root,
+        #root-inner,
+        sp-story-decorator {
+            height: 100%;
+            margin: 0;
+        }
+
+        sp-story-decorator::part(container) {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+        }
+
+        overlay-trigger {
+            flex: none;
+        }
+
+        #styled-div {
+            background-color: var(--styled-div-background-color, blue);
+            color: white;
+            padding: 4px 10px;
+            margin-bottom: 10px;
+        }
+
+        #inner-trigger {
+            display: inline-block;
+        }
+    </style>
+`;
+export default {
+  title: "Overlay Directive",
+  argTypes: {
+    offset: { control: "number" },
+    placement: {
+      control: {
+        type: "inline-radio",
+        options: [
+          "top",
+          "top-start",
+          "top-end",
+          "bottom",
+          "bottom-start",
+          "bottom-end",
+          "left",
+          "left-start",
+          "left-end",
+          "right",
+          "right-start",
+          "right-end",
+          "auto",
+          "auto-start",
+          "auto-end",
+          "none"
+        ]
+      }
+    },
+    type: {
+      control: {
+        type: "inline-radio",
+        options: ["modal", "replace", "inline"]
+      }
+    },
+    colorStop: {
+      control: {
+        type: "inline-radio",
+        options: ["light", "dark"]
+      }
+    },
+    open: {
+      name: "open",
+      type: { name: "boolean", required: false },
+      description: "Whether the second accordion item is open.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    }
+  },
+  args: {
+    placement: "bottom",
+    offset: 0,
+    colorStop: "light",
+    triggerOn: "click",
+    open: false
+  }
+};
+const template = ({
+  placement,
+  offset,
+  open,
+  triggerOn,
+  insertionOptions: insertionOptions2
+}) => {
+  const renderTooltip = () => html`
+        Click to open a popover.
+    `;
+  const renderPopover = () => html`
+        <sp-popover placement="${ifDefined(placement)}" tip>
+            <sp-dialog no-divider>
+                <div class="options-popover-content">
+                    <sp-slider
+                        value="5"
+                        step="0.5"
+                        min="0"
+                        max="20"
+                        label="Awesomeness"
+                    ></sp-slider>
+                    <div id="styled-div">
+                        The background of this div should be blue
+                    </div>
+                    <sp-button
+                        ${tooltip(
+    () => html`
+                                Click to open another popover.
+                            `
+  )}
+                        ${trigger(
+    () => html`
+                                <sp-popover placement="bottom" tip open>
+                                    <sp-dialog size="s" no-divider>
+                                        <div class="options-popover-content">
+                                            Another Popover
+                                        </div>
+                                    </sp-dialog>
+                                </sp-popover>
+                            `,
+    {
+      triggerInteraction: "click",
+      overlayOptions: {
+        placement: "bottom"
+      }
+    }
+  )}
+                    >
+                        Press Me
+                    </sp-button>
+                </div>
+            </sp-dialog>
+        </sp-popover>
+    `;
+  return html`
+        ${storyStyles}
+        <sp-button
+            variant="primary"
+            ${tooltip(renderTooltip)}
+            ${trigger(renderPopover, {
+    open,
+    triggerInteraction: triggerOn,
+    overlayOptions: {
+      placement,
+      offset
+    },
+    insertionOptions: insertionOptions2
+  })}
+        >
+            Show Popover
+        </sp-button>
+    `;
+};
+export const Default = ({ open } = {}) => {
+  const renderPopover = () => html`
+        <sp-popover>
+            <sp-dialog no-divider>Popover content goes here</sp-dialog>
+        </sp-popover>
+    `;
+  const options = typeof open !== "undefined" ? { open } : void 0;
+  return html`
+        <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>
+    `;
+};
+Default.swc_vrt = {
+  skip: true
+};
+export const configured = (args) => template(args);
+configured.swc_vrt = {
+  skip: true
+};
+export const insertionOptions = (args = {}) => html`
+    ${template(args)}
+    <div id="other-element"></div>
+`;
+insertionOptions.args = {
+  insertionOptions: {
+    el: () => document.querySelector("#other-element"),
+    where: "afterbegin"
+  }
+};
+insertionOptions.swc_vrt = {
+  skip: true
+};
+class ManagedOverlayTrigger extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.isRenderOverlay = false;
+    this.isOpenState = false;
+  }
+  render() {
+    return html`
+            <sp-button
+                @click=${() => {
+      this.isRenderOverlay = !this.isRenderOverlay;
+    }}
+            >
+                Toggle Overlay Render Button
+            </sp-button>
+
+            <sp-button
+                @click=${() => {
+      this.isRenderOverlay = true;
+      this.isOpenState = true;
+    }}
+            >
+                Create Overlay Render Button And Open Overlay
+            </sp-button>
+
+            ${this.isRenderOverlay ? this.renderOverlayButton() : html``}
+        `;
+  }
+  renderOverlayButton() {
+    return html`
+            <sp-button
+                ?selected=${this.isOpenState}
+                ${trigger(
+      () => html`
+                        <sp-popover
+                            @sp-opened=${(event) => {
+        if (event.target !== event.currentTarget) {
+          return;
+        }
+        console.log("sp-opened");
+        this.isOpenState = true;
+      }}
+                            @sp-closed=${(event) => {
+        if (event.target !== event.currentTarget) {
+          return;
+        }
+        console.log("sp-closed");
+        this.isOpenState = false;
+      }}
+                        >
+                            <h1>My Test Popover</h1>
+                        </sp-popover>
+                    `,
+      {
+        triggerInteraction: "click",
+        overlayOptions: { placement: "bottom-end" },
+        open: this.isOpenState
+      }
+    )}
+            >
+                Toggle Popover
+            </sp-button>
+        `;
+  }
+}
+__decorateClass([
+  state()
+], ManagedOverlayTrigger.prototype, "isRenderOverlay", 2);
+__decorateClass([
+  state()
+], ManagedOverlayTrigger.prototype, "isOpenState", 2);
+customElements.define("managed-overlay-trigger", ManagedOverlayTrigger);
+export const managedOverlayTrigger = () => html`
+    <managed-overlay-trigger></managed-overlay-trigger>
+`;
+managedOverlayTrigger.swc_vrt = {
+  skip: true
+};
+//# sourceMappingURL=overlay-directive.stories.js.map

package/stories/overlay-directive.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["overlay-directive.stories.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    OverlayContentTypes,\n    OverlayOpenCloseDetail,\n    Placement,\n    TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {\n    InsertionOptions,\n    trigger,\n} from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js';\n\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\n\nconst storyStyles = html`\n    <style>\n        html,\n        body,\n        #root,\n        #root-inner,\n        sp-story-decorator {\n            height: 100%;\n            margin: 0;\n        }\n\n        sp-story-decorator::part(container) {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n        }\n\n        overlay-trigger {\n            flex: none;\n        }\n\n        #styled-div {\n            background-color: var(--styled-div-background-color, blue);\n            color: white;\n            padding: 4px 10px;\n            margin-bottom: 10px;\n        }\n\n        #inner-trigger {\n            display: inline-block;\n        }\n    </style>\n`;\n\nexport default {\n    title: 'Overlay Directive',\n    argTypes: {\n        offset: { control: 'number' },\n        placement: {\n            control: {\n                type: 'inline-radio',\n                options: [\n                    'top',\n                    'top-start',\n                    'top-end',\n                    'bottom',\n                    'bottom-start',\n                    'bottom-end',\n                    'left',\n                    'left-start',\n                    'left-end',\n                    'right',\n                    'right-start',\n                    'right-end',\n                    'auto',\n                    'auto-start',\n                    'auto-end',\n                    'none',\n                ],\n            },\n        },\n        type: {\n            control: {\n                type: 'inline-radio',\n                options: ['modal', 'replace', 'inline'],\n            },\n        },\n        colorStop: {\n            control: {\n                type: 'inline-radio',\n                options: ['light', 'dark'],\n            },\n        },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the second accordion item is open.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n    args: {\n        placement: 'bottom',\n        offset: 0,\n        colorStop: 'light',\n        triggerOn: 'click',\n        open: false,\n    },\n};\n\ninterface Properties {\n    placement?: Placement;\n    offset?: number;\n    triggerOn?: OverlayContentTypes;\n    type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n    insertionOptions?: InsertionOptions;\n    open?: boolean;\n}\n\nconst template = ({\n    placement,\n    offset,\n    open,\n    triggerOn,\n    insertionOptions,\n}: Properties): TemplateResult => {\n    const renderTooltip = (): TemplateResult => html`\n        Click to open a popover.\n    `;\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover placement=\"${ifDefined(placement)}\" tip>\n            <sp-dialog no-divider>\n                <div class=\"options-popover-content\">\n                    <sp-slider\n                        value=\"5\"\n                        step=\"0.5\"\n                        min=\"0\"\n                        max=\"20\"\n                        label=\"Awesomeness\"\n                    ></sp-slider>\n                    <div id=\"styled-div\">\n                        The background of this div should be blue\n                    </div>\n                    <sp-button\n                        ${tooltip(\n                            () => html`\n                                Click to open another popover.\n                            `\n                        )}\n                        ${trigger(\n                            () => html`\n                                <sp-popover placement=\"bottom\" tip open>\n                                    <sp-dialog size=\"s\" no-divider>\n                                        <div class=\"options-popover-content\">\n                                            Another Popover\n                                        </div>\n                                    </sp-dialog>\n                                </sp-popover>\n                            `,\n                            {\n                                triggerInteraction: 'click',\n                                overlayOptions: {\n                                    placement: 'bottom',\n                                },\n                            }\n                        )}\n                    >\n                        Press Me\n                    </sp-button>\n                </div>\n            </sp-dialog>\n        </sp-popover>\n    `;\n    return html`\n        ${storyStyles}\n        <sp-button\n            variant=\"primary\"\n            ${tooltip(renderTooltip)}\n            ${trigger(renderPopover, {\n                open,\n                triggerInteraction: triggerOn,\n                overlayOptions: {\n                    placement,\n                    offset,\n                },\n                insertionOptions: insertionOptions,\n            })}\n        >\n            Show Popover\n        </sp-button>\n    `;\n};\n\nexport const Default = ({ open }: Properties = {}): TemplateResult => {\n    const renderPopover = (): TemplateResult => html`\n        <sp-popover>\n            <sp-dialog no-divider>Popover content goes here</sp-dialog>\n        </sp-popover>\n    `;\n    const options = typeof open !== 'undefined' ? { open } : undefined;\n    return html`\n        <sp-button ${trigger(renderPopover, options)}>Open Popover</sp-button>\n    `;\n};\n\nDefault.swc_vrt = {\n    skip: true,\n};\n\nexport const configured = (args: Properties): TemplateResult => template(args);\n\nconfigured.swc_vrt = {\n    skip: true,\n};\n\nexport const insertionOptions = (args: Properties = {}): TemplateResult => html`\n    ${template(args)}\n    <div id=\"other-element\"></div>\n`;\n\ninsertionOptions.args = {\n    insertionOptions: {\n        el: () => document.querySelector('#other-element'),\n        where: 'afterbegin',\n    },\n} as Properties;\n\ninsertionOptions.swc_vrt = {\n    skip: true,\n};\n\nclass ManagedOverlayTrigger extends LitElement {\n    @state()\n    private isRenderOverlay = false;\n\n    @state()\n    private isOpenState = false;\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = !this.isRenderOverlay;\n                }}\n            >\n                Toggle Overlay Render Button\n            </sp-button>\n\n            <sp-button\n                @click=${() => {\n                    this.isRenderOverlay = true;\n                    this.isOpenState = true;\n                }}\n            >\n                Create Overlay Render Button And Open Overlay\n            </sp-button>\n\n            ${this.isRenderOverlay ? this.renderOverlayButton() : html``}\n        `;\n    }\n\n    private renderOverlayButton(): TemplateResult {\n        return html`\n            <sp-button\n                ?selected=${this.isOpenState}\n                ${trigger(\n                    () => html`\n                        <sp-popover\n                            @sp-opened=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-opened');\n                                this.isOpenState = true;\n                            }}\n                            @sp-closed=${(\n                                event: CustomEvent<OverlayOpenCloseDetail>\n                            ) => {\n                                if (event.target !== event.currentTarget) {\n                                    return;\n                                }\n                                console.log('sp-closed');\n                                this.isOpenState = false;\n                            }}\n                        >\n                            <h1>My Test Popover</h1>\n                        </sp-popover>\n                    `,\n                    {\n                        triggerInteraction: 'click',\n                        overlayOptions: { placement: 'bottom-end' },\n                        open: this.isOpenState,\n                    }\n                )}\n            >\n                Toggle Popover\n            </sp-button>\n        `;\n    }\n}\n\ncustomElements.define('managed-overlay-trigger', ManagedOverlayTrigger);\n\nexport const managedOverlayTrigger = (): TemplateResult => html`\n    <managed-overlay-trigger></managed-overlay-trigger>\n`;\n\nmanagedOverlayTrigger.swc_vrt = {\n    skip: true,\n};\n"],
+  "mappings": "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",
+  "names": ["insertionOptions"]
+}