@spectrum-web-components/action-group 1.1.0 → 1.1.2

package/stories/action-group-tooltip.stories.js

@@ -0,0 +1,388 @@
+"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,
+  nothing,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import { state } from "@spectrum-web-components/base/src/decorators.js";
+import { spreadProps } from "../../../test/lit-helpers.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js";
+export default {
+  title: "Action Group/Tooltips",
+  component: "sp-action-group",
+  args: {
+    compact: false,
+    emphasized: false,
+    justified: false,
+    quiet: false,
+    vertical: false,
+    selects: "none",
+    size: "m"
+  },
+  argTypes: {
+    compact: {
+      name: "compact",
+      description: "Visually joins the buttons together to clarify their relationship to one another.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    emphasized: {
+      name: "emphasized",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    justified: {
+      name: "justified",
+      description: "Aligns the action group items to use all the available space on that line.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    quiet: {
+      name: "quiet",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    vertical: {
+      name: "vertical",
+      description: "Changes the orientation of the action group.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    selects: {
+      name: "selects",
+      description: "Whether the elements selects its children and how many it can select at a time.",
+      table: {
+        defaultValue: { summary: "" }
+      },
+      control: {
+        type: "inline-radio",
+        options: ["none", "single", "multiple"]
+      }
+    },
+    size: {
+      name: "size",
+      description: "The size at which to display the action group.",
+      type: { name: "string", required: true },
+      table: {
+        type: { summary: '"s" | "m" | "l" | "xl"' },
+        defaultValue: { summary: "m" }
+      },
+      control: {
+        type: "select",
+        options: ["s", "m", "l", "xl"]
+      }
+    }
+  }
+};
+const template = (args) => {
+  requestAnimationFrame(() => {
+    const group = document.querySelector("sp-action-group");
+    const selectedDiv = group.nextElementSibling;
+    if (selectedDiv) {
+      selectedDiv.textContent = `Selected: ${JSON.stringify(
+        group.selected
+      )}`;
+    }
+  });
+  return html`
+        <sp-action-group
+            label="Favorite Color"
+            ...=${spreadProps(args)}
+            @change=${({ target }) => {
+    const next = target.nextElementSibling;
+    next.textContent = `Selected: ${JSON.stringify(
+      target.selected
+    )}`;
+  }}
+        >
+            <overlay-trigger>
+                <sp-action-button slot="trigger">Red</sp-action-button>
+                <sp-tooltip slot="hover-content">
+                    This is a cool color.
+                </sp-tooltip>
+            </overlay-trigger>
+            <overlay-trigger>
+                <sp-action-button slot="trigger">Green</sp-action-button>
+                <sp-tooltip slot="hover-content">
+                    You wouldn't be wrong.
+                </sp-tooltip>
+            </overlay-trigger>
+            <overlay-trigger>
+                <sp-action-button slot="trigger" value="blue" selected>
+                    Blue
+                </sp-action-button>
+                <sp-tooltip slot="hover-content">The sky in spring.</sp-tooltip>
+            </overlay-trigger>
+            <overlay-trigger>
+                <sp-action-button slot="trigger">Yellow</sp-action-button>
+                <sp-tooltip slot="hover-content">The sun at noon.</sp-tooltip>
+            </overlay-trigger>
+        </sp-action-group>
+        ${!!args.selects ? html`
+                  <div>Selected:</div>
+              ` : nothing}
+    `;
+};
+export const selectsSingle = (args) => template(args);
+selectsSingle.args = {
+  compact: true,
+  emphasized: true,
+  selects: "single"
+};
+export const selectsMultiple = (args) => template(args);
+selectsMultiple.args = {
+  compact: true,
+  emphasized: true,
+  selects: "multiple"
+};
+export const justified = (args) => template(args);
+justified.args = {
+  compact: true,
+  emphasized: true,
+  justified: true,
+  selects: void 0
+};
+export const vertical = (args) => template(args);
+vertical.args = {
+  compact: true,
+  emphasized: true,
+  vertical: true,
+  selects: void 0
+};
+class ActionGroupTooltips extends SpectrumElement {
+  constructor() {
+    super(...arguments);
+    this.alignment = "left";
+  }
+  render() {
+    return html`
+            <sp-action-group quiet>
+                <sp-action-button
+                    quiet
+                    value="left"
+                    ?selected=${this.alignment === "left"}
+                    @click=${() => {
+      this.alignment = "left";
+    }}
+                >
+                    <sp-icon slot="icon">
+                        <svg
+                            role="img"
+                            fill="currentColor"
+                            viewBox="0 0 18 18"
+                            id="STextAlignLeft18N-icon"
+                            width="18"
+                            height="18"
+                            aria-hidden="true"
+                            focusable="false"
+                        >
+                            <rect
+                                fill-rule="evenodd"
+                                x="2"
+                                y="14"
+                                width="12"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                            <rect
+                                fill-rule="evenodd"
+                                x="2"
+                                y="2"
+                                width="15"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                            <rect
+                                fill-rule="evenodd"
+                                x="2"
+                                y="6"
+                                width="12"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                            <rect
+                                fill-rule="evenodd"
+                                x="2"
+                                y="10"
+                                width="15"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                        </svg>
+                    </sp-icon>
+                    <sp-tooltip self-managed placement="bottom">
+                        Left align
+                    </sp-tooltip>
+                </sp-action-button>
+                <sp-action-button
+                    quiet
+                    value="center"
+                    ?selected=${this.alignment === "center"}
+                    @click=${() => {
+      this.alignment = "center";
+    }}
+                >
+                    <sp-icon slot="icon">
+                        <svg
+                            role="img"
+                            fill="currentColor"
+                            viewBox="0 0 18 18"
+                            id="STextAlignCenter18N-icon"
+                            width="18"
+                            height="18"
+                            aria-hidden="true"
+                            focusable="false"
+                        >
+                            <rect
+                                fill-rule="evenodd"
+                                x="4"
+                                y="14"
+                                width="10"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                            <rect
+                                fill-rule="evenodd"
+                                x="1"
+                                y="10"
+                                width="16"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                            <rect
+                                fill-rule="evenodd"
+                                x="1"
+                                y="2"
+                                width="16"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                            <rect
+                                fill-rule="evenodd"
+                                x="4"
+                                y="6"
+                                width="10"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                        </svg>
+                    </sp-icon>
+                    <sp-tooltip self-managed placement="bottom">
+                        Center align
+                    </sp-tooltip>
+                </sp-action-button>
+                <sp-action-button
+                    quiet
+                    value="right"
+                    ?selected=${this.alignment === "right"}
+                    @click=${() => {
+      this.alignment = "right";
+    }}
+                >
+                    <sp-icon slot="icon">
+                        <svg
+                            role="img"
+                            fill="currentColor"
+                            viewBox="0 0 18 18"
+                            id="STextAlignRight18N-icon"
+                            width="18"
+                            height="18"
+                            aria-hidden="true"
+                            focusable="false"
+                        >
+                            <rect
+                                fill-rule="evenodd"
+                                x="4"
+                                y="14"
+                                width="12"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                            <rect
+                                fill-rule="evenodd"
+                                x="1"
+                                y="2"
+                                width="15"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                            <rect
+                                fill-rule="evenodd"
+                                x="4"
+                                y="6"
+                                width="12"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                            <rect
+                                fill-rule="evenodd"
+                                x="1"
+                                y="10"
+                                width="15"
+                                height="2"
+                                rx="0.5"
+                            ></rect>
+                        </svg>
+                    </sp-icon>
+                    <sp-tooltip self-managed placement="bottom">
+                        Right align
+                    </sp-tooltip>
+                </sp-action-button>
+            </sp-action-group>
+        `;
+  }
+}
+__decorateClass([
+  state()
+], ActionGroupTooltips.prototype, "alignment", 2);
+customElements.define("action-group-tooltips", ActionGroupTooltips);
+export const controlled = () => html`
+    <action-group-tooltips></action-group-tooltips>
+`;
+//# sourceMappingURL=action-group-tooltip.stories.js.map

package/stories/action-group-tooltip.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["action-group-tooltip.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\n\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*/\n\nimport {\n    html,\n    nothing,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '@spectrum-web-components/action-group/src/ActionGroup.js';\n\nexport default {\n    title: 'Action Group/Tooltips',\n    component: 'sp-action-group',\n    args: {\n        compact: false,\n        emphasized: false,\n        justified: false,\n        quiet: false,\n        vertical: false,\n        selects: 'none',\n        size: 'm',\n    },\n    argTypes: {\n        compact: {\n            name: 'compact',\n            description:\n                'Visually joins the buttons together to clarify their relationship to one another.',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        emphasized: {\n            name: 'emphasized',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        justified: {\n            name: 'justified',\n            description:\n                'Aligns the action group items to use all the available space on that line.',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        quiet: {\n            name: 'quiet',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        vertical: {\n            name: 'vertical',\n            description: 'Changes the orientation of the action group.',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        selects: {\n            name: 'selects',\n            description:\n                'Whether the elements selects its children and how many it can select at a time.',\n            table: {\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'inline-radio',\n                options: ['none', 'single', 'multiple'],\n            },\n        },\n        size: {\n            name: 'size',\n            description: 'The size at which to display the action group.',\n            type: { name: 'string', required: true },\n            table: {\n                type: { summary: '\"s\" | \"m\" | \"l\" | \"xl\"' },\n                defaultValue: { summary: 'm' },\n            },\n            control: {\n                type: 'select',\n                options: ['s', 'm', 'l', 'xl'],\n            },\n        },\n    },\n};\n\ninterface Properties {\n    compact?: boolean;\n    emphasized?: boolean;\n    justified?: boolean;\n    quiet?: boolean;\n    vertical?: boolean;\n    selects?: 'none' | 'single' | 'multiple';\n    size?: 's' | 'm' | 'l' | 'xl';\n    [prop: string]: unknown;\n}\n\nconst template = (args: Properties): TemplateResult => {\n    requestAnimationFrame(() => {\n        const group = document.querySelector('sp-action-group') as ActionGroup;\n        const selectedDiv = group.nextElementSibling;\n        if (selectedDiv) {\n            selectedDiv.textContent = `Selected: ${JSON.stringify(\n                group.selected\n            )}`;\n        }\n    });\n    return html`\n        <sp-action-group\n            label=\"Favorite Color\"\n            ...=${spreadProps(args)}\n            @change=${({ target }: Event & { target: ActionGroup }) => {\n                const next = target.nextElementSibling as HTMLDivElement;\n                next.textContent = `Selected: ${JSON.stringify(\n                    target.selected\n                )}`;\n            }}\n        >\n            <overlay-trigger>\n                <sp-action-button slot=\"trigger\">Red</sp-action-button>\n                <sp-tooltip slot=\"hover-content\">\n                    This is a cool color.\n                </sp-tooltip>\n            </overlay-trigger>\n            <overlay-trigger>\n                <sp-action-button slot=\"trigger\">Green</sp-action-button>\n                <sp-tooltip slot=\"hover-content\">\n                    You wouldn't be wrong.\n                </sp-tooltip>\n            </overlay-trigger>\n            <overlay-trigger>\n                <sp-action-button slot=\"trigger\" value=\"blue\" selected>\n                    Blue\n                </sp-action-button>\n                <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n            </overlay-trigger>\n            <overlay-trigger>\n                <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n                <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n            </overlay-trigger>\n        </sp-action-group>\n        ${!!args.selects\n            ? html`\n                  <div>Selected:</div>\n              `\n            : nothing}\n    `;\n};\n\nexport const selectsSingle = (args: Properties): TemplateResult =>\n    template(args);\nselectsSingle.args = {\n    compact: true,\n    emphasized: true,\n    selects: 'single',\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n    template(args);\nselectsMultiple.args = {\n    compact: true,\n    emphasized: true,\n    selects: 'multiple',\n};\n\nexport const justified = (args: Properties): TemplateResult => template(args);\njustified.args = {\n    compact: true,\n    emphasized: true,\n    justified: true,\n    selects: undefined,\n};\n\nexport const vertical = (args: Properties): TemplateResult => template(args);\nvertical.args = {\n    compact: true,\n    emphasized: true,\n    vertical: true,\n    selects: undefined,\n};\n\nclass ActionGroupTooltips extends SpectrumElement {\n    @state()\n    alignment = 'left';\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-action-group quiet>\n                <sp-action-button\n                    quiet\n                    value=\"left\"\n                    ?selected=${this.alignment === 'left'}\n                    @click=${() => {\n                        this.alignment = 'left';\n                    }}\n                >\n                    <sp-icon slot=\"icon\">\n                        <svg\n                            role=\"img\"\n                            fill=\"currentColor\"\n                            viewBox=\"0 0 18 18\"\n                            id=\"STextAlignLeft18N-icon\"\n                            width=\"18\"\n                            height=\"18\"\n                            aria-hidden=\"true\"\n                            focusable=\"false\"\n                        >\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"2\"\n                                y=\"14\"\n                                width=\"12\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"2\"\n                                y=\"2\"\n                                width=\"15\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"2\"\n                                y=\"6\"\n                                width=\"12\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"2\"\n                                y=\"10\"\n                                width=\"15\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                        </svg>\n                    </sp-icon>\n                    <sp-tooltip self-managed placement=\"bottom\">\n                        Left align\n                    </sp-tooltip>\n                </sp-action-button>\n                <sp-action-button\n                    quiet\n                    value=\"center\"\n                    ?selected=${this.alignment === 'center'}\n                    @click=${() => {\n                        this.alignment = 'center';\n                    }}\n                >\n                    <sp-icon slot=\"icon\">\n                        <svg\n                            role=\"img\"\n                            fill=\"currentColor\"\n                            viewBox=\"0 0 18 18\"\n                            id=\"STextAlignCenter18N-icon\"\n                            width=\"18\"\n                            height=\"18\"\n                            aria-hidden=\"true\"\n                            focusable=\"false\"\n                        >\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"4\"\n                                y=\"14\"\n                                width=\"10\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"1\"\n                                y=\"10\"\n                                width=\"16\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"1\"\n                                y=\"2\"\n                                width=\"16\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"4\"\n                                y=\"6\"\n                                width=\"10\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                        </svg>\n                    </sp-icon>\n                    <sp-tooltip self-managed placement=\"bottom\">\n                        Center align\n                    </sp-tooltip>\n                </sp-action-button>\n                <sp-action-button\n                    quiet\n                    value=\"right\"\n                    ?selected=${this.alignment === 'right'}\n                    @click=${() => {\n                        this.alignment = 'right';\n                    }}\n                >\n                    <sp-icon slot=\"icon\">\n                        <svg\n                            role=\"img\"\n                            fill=\"currentColor\"\n                            viewBox=\"0 0 18 18\"\n                            id=\"STextAlignRight18N-icon\"\n                            width=\"18\"\n                            height=\"18\"\n                            aria-hidden=\"true\"\n                            focusable=\"false\"\n                        >\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"4\"\n                                y=\"14\"\n                                width=\"12\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"1\"\n                                y=\"2\"\n                                width=\"15\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"4\"\n                                y=\"6\"\n                                width=\"12\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                            <rect\n                                fill-rule=\"evenodd\"\n                                x=\"1\"\n                                y=\"10\"\n                                width=\"15\"\n                                height=\"2\"\n                                rx=\"0.5\"\n                            ></rect>\n                        </svg>\n                    </sp-icon>\n                    <sp-tooltip self-managed placement=\"bottom\">\n                        Right align\n                    </sp-tooltip>\n                </sp-action-button>\n            </sp-action-group>\n        `;\n    }\n}\n\ncustomElements.define('action-group-tooltips', ActionGroupTooltips);\n\nexport const controlled = (): TemplateResult => html`\n    <action-group-tooltips></action-group-tooltips>\n`;\n"],
+  "mappings": "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",
+  "names": []
+}