@getflip/swirl-components 0.97.0 → 0.98.0

package/dist/collection/components/swirl-accordion/swirl-accordion.stories.js

@@ -0,0 +1,64 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-accordion.mdx";
+export default {
+  component: "swirl-accordion",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlAccordion",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-accordion", args);
+  element.innerHTML = `
+  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." heading="Accordion item 1" initially-open>
+    <swirl-stack spacing="16">
+      <swirl-text size="sm">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod
+        euismod libero, nec sollicitudin diam ultricies ut. Donec eget
+        consectetur libero. Donec et mi non mauris fermentum dictum. Sed
+        scelerisque, sapien vitae fringilla aliquam, quam sapien aliquet.
+      </swirl-text>
+      <swirl-button label="A button" variant="flat"></swirl-button>
+    </swirl-stack>
+  </swirl-accordion-item>
+  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." heading="Accordion item 2">
+    <swirl-stack spacing="16">
+      <swirl-text size="sm">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod
+        euismod libero, nec sollicitudin diam ultricies ut. Donec eget
+        consectetur libero. Donec et mi non mauris fermentum dictum. Sed
+        scelerisque, sapien vitae fringilla aliquam, quam sapien aliquet.
+      </swirl-text>
+      <swirl-button label="A button" variant="flat"></swirl-button>
+    </swirl-stack>
+  </swirl-accordion-item>
+  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." heading="Accordion item 3">
+    <swirl-stack spacing="16">
+      <swirl-text size="sm">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod
+        euismod libero, nec sollicitudin diam ultricies ut. Donec eget
+        consectetur libero. Donec et mi non mauris fermentum dictum. Sed
+        scelerisque, sapien vitae fringilla aliquam, quam sapien aliquet.
+      </swirl-text>
+      <swirl-button label="A button" variant="flat"></swirl-button>
+    </swirl-stack>
+  </swirl-accordion-item>
+  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." disabled heading="Accordion item 4">
+    <swirl-stack spacing="16">
+      <swirl-text size="sm">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod
+        euismod libero, nec sollicitudin diam ultricies ut. Donec eget
+        consectetur libero. Donec et mi non mauris fermentum dictum. Sed
+        scelerisque, sapien vitae fringilla aliquam, quam sapien aliquet.
+      </swirl-text>
+      <swirl-button label="A button" variant="flat"></swirl-button>
+    </swirl-stack>
+  </swirl-accordion-item>
+`;
+  return element;
+};
+export const SwirlAccordion = Template.bind({});
+SwirlAccordion.args = {};

package/dist/collection/components/swirl-accordion-item/swirl-accordion-item.css

@@ -0,0 +1,155 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+  :host(:last-child) .accordion-item {
+    border-bottom: 0.0625rem solid var(--s-border-default);
+  }
+
+.accordion-item {
+  display: grid;
+  align-content: start;
+  border-top: 0.0625rem solid var(--s-border-default);
+  transition: grid-template-rows 0.15s;
+  grid-template-rows: auto 0fr;
+  will-change: grid-template-rows;
+}
+
+@media (prefers-reduced-motion) {
+
+.accordion-item {
+    transition: none
+}
+  }
+
+.accordion-item--expanded {
+  grid-template-rows: auto 1fr;
+}
+
+.accordion-item--expanded .accordion-item__content {
+    padding-top: var(--s-space-16);
+    padding-bottom: var(--s-space-16);
+    animation: accordion-overflow 0.01s;
+    animation-delay: 0.15s;
+    animation-fill-mode: forwards;
+  }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.accordion-item--expanded .accordion-item__content {
+      padding-top: var(--s-space-8)
+  }
+    }
+
+.accordion-item__heading {
+  margin: 0;
+  padding: 0;
+  font-size: var(--s-font-size-base);
+  font-weight: var(--s-font-weight-semibold);
+}
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.accordion-item__heading {
+    font-size: var(--s-font-size-sm)
+}
+  }
+
+.accordion-item__toggle {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  padding-top: var(--s-space-16);
+  padding-bottom: var(--s-space-16);
+  align-items: center;
+  border: none;
+  color: var(--s-text-default);
+  background-color: var(--s-surface-default);
+  font: inherit;
+  line-height: var(--s-line-height-lg);
+  text-align: start;
+  cursor: pointer;
+  gap: var(--s-space-16);
+}
+
+.accordion-item__toggle:hover {
+    background-color: var(--s-surface-hovered);
+  }
+
+.accordion-item__toggle:active {
+    background-color: var(--s-surface-pressed);
+  }
+
+.accordion-item__toggle:disabled {
+    color: var(--s-text-disabled);
+    background-color: var(--s-surface-default);
+    cursor: default;
+  }
+
+.accordion-item__toggle:disabled .text {
+      color: var(--s-text-disabled);
+    }
+
+.accordion-item__toggle:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.accordion-item__toggle:focus-visible {
+    outline-color: var(--s-focus-default);
+  }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.accordion-item__toggle {
+    line-height: var(--s-line-height-sm)
+}
+  }
+
+.accordion-item__toggle-text {
+  flex-grow: 1;
+}
+
+.accordion-item__icon {
+  display: inline-flex;
+  padding-right: var(--s-space-8);
+  flex-shrink: 0;
+}
+
+.accordion-item__content {
+  overflow: hidden;
+  padding-top: 0;
+  padding-bottom: 0;
+  transition: padding-top 0.15s, padding-bottom 0.15s;
+  animation: accordion-display 0.01s;
+  animation-delay: 0.15s;
+  animation-fill-mode: forwards;
+}
+
+@media (prefers-reduced-motion) {
+
+.accordion-item__content {
+    transition: none
+}
+  }
+
+@keyframes accordion-overflow {
+  from {
+    overflow: hidden;
+  }
+  to {
+    overflow: visible;
+  }
+}
+
+@keyframes accordion-display {
+  from {
+    display: block;
+  }
+  to {
+    display: none;
+  }
+}

package/dist/collection/components/swirl-accordion-item/swirl-accordion-item.js

@@ -0,0 +1,246 @@
+import { h, Host, } from "@stencil/core";
+import { v4 as uuid } from "uuid";
+import classnames from "classnames";
+export class SwirlAccordionItem {
+  constructor() {
+    this.id = `accordion-item-${uuid()}`;
+    this.headingId = `${this.id}-heading`;
+    this.onHeadingClick = () => {
+      this.toggle();
+    };
+    this.description = undefined;
+    this.disabled = undefined;
+    this.heading = undefined;
+    this.headingLevel = 2;
+    this.initiallyOpen = undefined;
+    this.expanded = false;
+  }
+  componentWillLoad() {
+    this.accordion = this.el.closest("swirl-accordion");
+    this.expanded = (this.initiallyOpen && !this.disabled) || false;
+    if (!Boolean(this.accordion)) {
+      throw new Error("[Swirl] swirl-accordion-item must be a child of a swirl-accordion.");
+    }
+  }
+  /**
+   * Collapsed the accordion item.
+   */
+  async collapse() {
+    if (!this.expanded || this.disabled) {
+      return;
+    }
+    this.expanded = false;
+    this.expansionChange.emit(this.expanded);
+  }
+  /**
+   * Expands the accordion item.
+   */
+  async expand() {
+    if (this.expanded || this.disabled) {
+      return;
+    }
+    this.expanded = true;
+    this.expansionChange.emit(this.expanded);
+  }
+  /**
+   * Toggles the accordion item.
+   */
+  async toggle() {
+    if (this.expanded) {
+      this.collapse();
+    }
+    else {
+      this.expand();
+    }
+  }
+  render() {
+    const HeadingTag = `h${this.headingLevel}`;
+    const className = classnames("accordion-item", {
+      "accordion-item--expanded": this.expanded,
+    });
+    return (h(Host, null, h("div", { class: className }, h(HeadingTag, { class: "accordion-item__heading" }, h("button", { "aria-controls": this.id, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { glyph: "expand-more", size: 20 }))))), h("div", { "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.id, role: "region" }, h("slot", null)))));
+  }
+  static get is() { return "swirl-accordion-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-accordion-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-accordion-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "headingLevel": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlHeadingLevel",
+          "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+          "references": {
+            "SwirlHeadingLevel": {
+              "location": "import",
+              "path": "../swirl-heading/swirl-heading"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading-level",
+        "reflect": false,
+        "defaultValue": "2"
+      },
+      "initiallyOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "initially-open",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "expanded": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "expansionChange",
+        "name": "expansionChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "collapse": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Collapsed the accordion item.",
+          "tags": []
+        }
+      },
+      "expand": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Expands the accordion item.",
+          "tags": []
+        }
+      },
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggles the accordion item.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/swirl-accordion-item/swirl-accordion-item.spec.js

@@ -0,0 +1,87 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlAccordionItem } from "./swirl-accordion-item";
+describe("swirl-accordion-item", () => {
+  it("renders heading and description", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAccordionItem],
+      html: `
+        <swirl-accordion>
+          <swirl-accordion-item description="Description" heading="heading">
+            Content
+          </swirl-accordion-item>
+        </swirl-accordion>
+      `,
+    });
+    const id = page.root.shadowRoot.querySelector(".accordion-item__content").id;
+    expect(page.root).toEqualHtml(`
+      <swirl-accordion-item description="Description" heading="heading">
+        <mock:shadow-root>
+          <div class="accordion-item">
+            <h2 class="accordion-item__heading">
+              <button aria-controls="${id}" aria-expanded="false" class="accordion-item__toggle" id="${id}-heading" type="button">
+                <span class="accordion-item__toggle-text">
+                  heading
+                  <swirl-text as="span" color="subdued" size="sm">
+                    Description
+                  </swirl-text>
+                </span>
+                <span class="accordion-item__icon">
+                  <swirl-icon glyph="chevron-right" size="20"></swirl-icon>
+                </span>
+              </button>
+            </h2>
+            <div aria-labelledby="${id}-heading" class="accordion-item__content" id="${id}" role="region">
+              <slot></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        Content
+      </swirl-accordion-item>
+    `);
+  });
+  it("can be toggled", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAccordionItem],
+      html: `
+        <swirl-accordion>
+          <swirl-accordion-item description="Description" heading="heading">
+            Content
+          </swirl-accordion-item>
+        </swirl-accordion>
+      `,
+    });
+    expect(page.root.shadowRoot
+      .querySelector(".accordion-item")
+      .classList.contains("accordion-item--expanded")).toBe(false);
+    const toggle = page.root.shadowRoot.querySelector(".accordion-item__toggle");
+    toggle.click();
+    await page.waitForChanges();
+    expect(page.root.shadowRoot
+      .querySelector(".accordion-item")
+      .classList.contains("accordion-item--expanded")).toBe(true);
+    toggle.click();
+    await page.waitForChanges();
+    expect(page.root.shadowRoot
+      .querySelector(".accordion-item")
+      .classList.contains("accordion-item--expanded")).toBe(false);
+  });
+  it("fires expansionChange events", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAccordionItem],
+      html: `
+        <swirl-accordion>
+          <swirl-accordion-item description="Description" heading="heading">
+            Content
+          </swirl-accordion-item>
+        </swirl-accordion>
+      `,
+    });
+    const spy = jest.fn();
+    page.root.addEventListener("expansionChange", spy);
+    const toggle = page.root.shadowRoot.querySelector(".accordion-item__toggle");
+    toggle.click();
+    expect(spy.mock.calls[0][0].detail).toBe(true);
+    toggle.click();
+    expect(spy.mock.calls[1][0].detail).toBe(false);
+  });
+});

package/dist/collection/components/swirl-accordion-item/swirl-accordion-item.stories.js

@@ -0,0 +1,34 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-accordion-item.mdx";
+export default {
+  component: "swirl-accordion-item",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlAccordionItem",
+};
+const Template = (args) => {
+  const container = document.createElement("swirl-accordion");
+  const element = generateStoryElement("swirl-accordion-item", args);
+  element.innerHTML = `
+    <swirl-stack spacing="16">
+      <swirl-text size="sm">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod
+        euismod libero, nec sollicitudin diam ultricies ut. Donec eget
+        consectetur libero. Donec et mi non mauris fermentum dictum. Sed
+        scelerisque, sapien vitae fringilla aliquam, quam sapien aliquet.
+      </swirl-text>
+      <swirl-button label="A button" variant="flat"></swirl-button>
+    </swirl-stack>
+  `;
+  container.append("\n  ", element, "\n");
+  return container;
+};
+export const SwirlAccordionItem = Template.bind({});
+SwirlAccordionItem.args = {
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  heading: "Accordion item",
+};

package/dist/collection/components/swirl-color-input/swirl-color-input.css

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.color-input {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  color: var(--s-text-default);
+  font: inherit;
+  line-height: var(--s-line-height-sm);
+  cursor: text;
+}
+
+.color-input--inline .color-input__preview {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-top: -0.125rem;
+    margin-bottom: -0.125rem;
+    margin-right: -0.25rem;
+  }
+
+.color-input__input {
+  display: inline-flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  flex-grow: 1;
+  border: none;
+  color: var(--s-text-default);
+  background-color: transparent;
+  font: inherit;
+  font-size: var(--s-font-size-base);
+  line-height: var(--s-line-height-base);
+  caret-color: var(--s-border-highlight);
+}
+
+.color-input__input:focus {
+    outline: none;
+  }
+
+.color-input__input:disabled {
+    color: var(--s-text-disabled);
+    background-color: transparent;
+  }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.color-input__input {
+    font-size: var(--s-font-size-sm);
+    line-height: var(--s-line-height-sm)
+}
+  }
+
+.color-input__preview {
+  width: 2.75rem;
+  height: 2.75rem;
+  margin-top: -1.25rem;
+  flex-shrink: 0;
+  border: 0.0625rem solid var(--s-border-default);
+  border-radius: var(--s-border-radius-s);
+}