@getflip/swirl-components 0.11.0 → 0.13.0

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

@@ -0,0 +1,49 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-list.mdx";
+export default {
+  component: "swirl-list",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlList",
+};
+const Template = (args) => {
+  const container = document.createElement("swirl-stack");
+  container.spacing = "24";
+  const unorderedList = generateStoryElement("swirl-list", args);
+  unorderedList.innerHTML = `
+    <ul>
+      <li>Level 1</li>
+      <li>Level 1
+        <ul>
+          <li>Level 2</li>
+          <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+              erat, sed diam voluptua. At vero eos et accusam et.</li>
+        </ul>
+      </li>
+      <li>Level 1</li>
+    </ul>
+  `;
+  const orderedList = generateStoryElement("swirl-list", args);
+  orderedList.innerHTML = `
+    <ol>
+      <li>Level 1</li>
+      <li>Level 1
+        <ol>
+          <li>Level 2</li>
+          <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+              erat, sed diam voluptua. At vero eos et accusam et.</li>
+        </ol>
+      </li>
+      <li>Level 1</li>
+    </ol>
+  `;
+  container.append("\n  ", unorderedList, "\n  ", orderedList, "\n");
+  return container;
+};
+export const SwirlList = Template.bind({});
+SwirlList.args = {};

package/dist/collection/components/swirl-modal/swirl-modal.css

@@ -0,0 +1,249 @@
+:host {
+  --swirl-ghost-button-background-default: var(--s-surface-overlay-default);
+  --swirl-ghost-button-background-hovered: var(--s-surface-overlay-hovered);
+  --swirl-ghost-button-background-pressed: var(--s-surface-overlay-pressed);
+
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.modal {
+  position: fixed;
+  z-index: var(--s-z-40);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  inset: 0;
+}
+
+.modal[aria-hidden="true"] {
+    display: none;
+  }
+
+.modal:not(.modal--closing) .modal__backdrop {
+    -webkit-animation: 0.15s modal-backdrop-fade-in;
+            animation: 0.15s modal-backdrop-fade-in;
+  }
+
+@media (prefers-reduced-motion) {
+
+.modal:not(.modal--closing) .modal__backdrop {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.modal:not(.modal--closing) .modal__body {
+    -webkit-animation: 0.15s modal-scale-in;
+            animation: 0.15s modal-scale-in;
+  }
+
+@media (prefers-reduced-motion) {
+
+.modal:not(.modal--closing) .modal__body {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.modal--closing {
+  -webkit-animation: 0.15s modal-fade-out;
+          animation: 0.15s modal-fade-out;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+@media (prefers-reduced-motion) {
+
+.modal--closing {
+    -webkit-animation: none;
+            animation: none
+}
+  }
+
+@media (min-width: 768px) {
+
+.modal--scrollable .modal__content {
+      padding-bottom: 0
+  }
+    }
+
+.modal--scrollable:not(.modal--scrolled-down) .modal__controls {
+      border-top: var(--s-border-width-default) solid var(--s-border-default);
+    }
+
+@media (min-width: 768px) {
+    .modal--scrolled .modal__header {
+      border-bottom-color: var(--s-border-default);
+    }
+  }
+
+.modal__backdrop {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.2);
+  inset: 0;
+}
+
+.modal__body {
+  position: relative;
+  z-index: var(--s-z-40);
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--s-surface-overlay-default);
+  flex-direction: column;
+}
+
+@media (min-width: 768px) {
+
+.modal__body {
+    width: 90vw;
+    max-width: 33.75rem;
+    height: auto;
+    max-height: 90vh;
+    border-radius: var(--s-border-radius-base);
+    box-shadow: var(--s-shadow-level-3)
+}
+  }
+
+.modal__close-button {
+  position: absolute;
+  top: var(--s-space-8);
+  left: var(--s-space-8);
+}
+
+@media (min-width: 768px) {
+
+.modal__close-button {
+    top: var(--s-space-16);
+    right: var(--s-space-16);
+    left: auto
+}
+  }
+
+.modal__header {
+  display: flex;
+  height: 3.5rem;
+  padding-top: var(--s-space-8);
+  padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-8);
+  padding-left: calc(var(--s-space-8) + 2.5rem + var(--s-space-8));
+  flex-shrink: 0;
+  align-items: center;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  gap: var(--s-space-16);
+}
+
+@media (min-width: 768px) {
+
+.modal__header {
+    height: 4.125rem;
+    padding-top: var(--s-space-24);
+    padding-right: calc(var(--s-space-16) + 2.5rem + var(--s-space-8));
+    padding-bottom: var(--s-space-16);
+    padding-left: var(--s-space-24);
+    border-bottom: var(--s-border-width-default) solid transparent
+}
+  }
+
+.modal__heading {
+  overflow: hidden;
+}
+
+.modal__heading .heading {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+.modal__content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-top: var(--s-space-24);
+  padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-24);
+  padding-left: var(--s-space-16);
+  flex-grow: 1;
+  line-height: var(--s-line-height-base);
+}
+
+.modal__content ::slotted(*) {
+    margin: 0;
+  }
+
+@media (min-width: 768px) {
+
+.modal__content {
+    padding-top: 0;
+    padding-right: var(--s-space-24);
+    padding-bottom: var(--s-space-16);
+    padding-left: var(--s-space-24)
+}
+  }
+
+.modal__controls {
+  display: flex;
+  padding-top: var(--s-space-16);
+  padding-right: var(--s-space-24);
+  padding-bottom: var(--s-space-16);
+  padding-left: var(--s-space-24);
+  flex-shrink: 0;
+  justify-content: flex-end;
+}
+
+@-webkit-keyframes modal-scale-in {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes modal-scale-in {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@-webkit-keyframes modal-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes modal-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes modal-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/dist/collection/components/swirl-modal/swirl-modal.js

@@ -0,0 +1,303 @@
+import { Component, Event, h, Host, Listen, Method, Prop, State, } from "@stencil/core";
+import A11yDialog from "a11y-dialog";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import classnames from "classnames";
+export class SwirlModal {
+  constructor() {
+    this.closeButtonLabel = "Close modal";
+    this.closing = false;
+    this.scrollable = false;
+    this.scrolled = false;
+    this.scrolledDown = false;
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+    };
+    this.onBackdropClick = () => {
+      this.close();
+    };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+    this.onPrimaryAction = (event) => {
+      this.primaryAction.emit(event);
+    };
+    this.onSecondaryAction = (event) => {
+      this.secondaryAction.emit(event);
+    };
+    this.determineScrollStatus = () => {
+      var _a, _b, _c, _d, _e, _f;
+      const scrolled = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) > 0;
+      const scrolledDown = Math.ceil(((_b = this.scrollContainer) === null || _b === void 0 ? void 0 : _b.scrollTop) + ((_c = this.scrollContainer) === null || _c === void 0 ? void 0 : _c.offsetHeight)) >= ((_d = this.scrollContainer) === null || _d === void 0 ? void 0 : _d.scrollHeight);
+      const scrollable = ((_e = this.scrollContainer) === null || _e === void 0 ? void 0 : _e.scrollHeight) > ((_f = this.scrollContainer) === null || _f === void 0 ? void 0 : _f.offsetHeight);
+      if (scrolled !== this.scrolled) {
+        this.scrolled = scrolled;
+      }
+      if (scrolledDown !== this.scrolledDown) {
+        this.scrolledDown = scrolledDown;
+      }
+      if (scrollable !== this.scrollable) {
+        this.scrollable = scrollable;
+      }
+    };
+  }
+  componentDidLoad() {
+    this.modal = new A11yDialog(this.modalEl);
+    this.determineScrollStatus();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.unlockBodyScroll();
+  }
+  onWindowResize() {
+    this.determineScrollStatus();
+  }
+  /**
+   * Open the modal.
+   */
+  async open() {
+    this.modal.show();
+    this.modalOpen.emit();
+    this.lockBodyScroll();
+    this.determineScrollStatus();
+  }
+  /**
+   * Close the modal.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    this.unlockBodyScroll();
+    setTimeout(() => {
+      this.modal.hide();
+      this.modalClose.emit();
+      this.closing = false;
+    }, 150);
+  }
+  lockBodyScroll() {
+    disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    const className = classnames("modal", {
+      "modal--closing": this.closing,
+      "modal--scrollable": this.scrollable,
+      "modal--scrolled": this.scrolled,
+      "modal--scrolled-down": this.scrolledDown,
+    });
+    return (h(Host, null,
+      h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) },
+        h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }),
+        h("div", { class: "modal__body", role: "document" },
+          h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }),
+          h("header", { class: "modal__header" },
+            h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })),
+          h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) },
+            h("slot", null)),
+          h("footer", { class: "modal__controls" },
+            h("swirl-button-group", { wrap: true },
+              this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })),
+              this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))));
+  }
+  static get is() { return "swirl-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["swirl-modal.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["swirl-modal.css"]
+  }; }
+  static get properties() { return {
+    "closeButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "close-button-label",
+      "reflect": false,
+      "defaultValue": "\"Close modal\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "primaryActionLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "primary-action-label",
+      "reflect": false
+    },
+    "secondaryActionLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "secondary-action-label",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "closing": {},
+    "scrollable": {},
+    "scrolled": {},
+    "scrolledDown": {}
+  }; }
+  static get events() { return [{
+      "method": "modalClose",
+      "name": "modalClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "modalOpen",
+      "name": "modalOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "primaryAction",
+      "name": "primaryAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "secondaryAction",
+      "name": "secondaryAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Open the modal.",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Close the modal.",
+        "tags": []
+      }
+    }
+  }; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "onWindowResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

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

@@ -0,0 +1,59 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-modal.mdx";
+export default {
+  component: "swirl-modal",
+  parameters: {
+    docs: {
+      page: Docs,
+      source: {
+        code: `<swirl-modal id="modal" label="Dialog" primary-action-label="Primary" secondary-action-label="Cancel">
+  <swirl-text>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+    sit amet.
+  </swirl-text>
+</swirl-modal>
+
+<script>
+  const modal = document.body.querySelector('#modal');
+  modal.open();
+</script>`,
+      },
+    },
+  },
+  title: "Components/SwirlModal",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  const trigger = document.createElement("swirl-button");
+  const element = generateStoryElement("swirl-modal", args);
+  trigger.label = "Open modal";
+  trigger.addEventListener("click", () => element.open());
+  element.innerHTML = `
+    <swirl-text>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </swirl-text>
+  `;
+  container.append(trigger, element);
+  return container;
+};
+export const SwirlModal = Template.bind({});
+SwirlModal.args = {
+  label: "Label",
+  primaryActionLabel: "Primary",
+  secondaryActionLabel: "Secondary",
+};