@getflip/swirl-components 0.1.0

package/dist/collection/components/flip-link/flip-link.js

@@ -0,0 +1,72 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+export class FlipLink {
+  render() {
+    return (h(Host, null,
+      h("a", { class: "link", href: this.href, target: this.target }, this.label)));
+  }
+  static get is() { return "flip-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-link.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-link.css"]
+  }; }
+  static get properties() { return {
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipLinkTarget",
+        "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+        "references": {
+          "FlipLinkTarget": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "target",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/flip-link/flip-link.stories.js

@@ -0,0 +1,20 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-link.mdx";
+export default {
+  component: "flip-link",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipLink",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-link", args);
+  return element;
+};
+export const FlipLink = Template.bind({});
+FlipLink.args = {
+  href: "/?path=/docs/components-fliplink--flip-link",
+  label: "Label",
+};

package/dist/collection/components/flip-popover/flip-popover.css

@@ -0,0 +1,267 @@
+:host {
+  position: relative;
+  z-index: var(--s-z-40);
+  display: inline-flex;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.popover--active:not(.popover--closing) .popover__backdrop {
+    -webkit-animation: 0.15s popover-fade-in;
+            animation: 0.15s popover-fade-in;
+  }
+
+@media (prefers-reduced-motion) {
+
+.popover--active:not(.popover--closing) .popover__backdrop {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.popover--active:not(.popover--closing) .popover__content {
+    -webkit-animation: 0.15s popover-slide-in;
+            animation: 0.15s popover-slide-in;
+  }
+
+@media (min-width: 768px) {
+
+.popover--active:not(.popover--closing) .popover__content {
+      transform-origin: top left;
+      -webkit-animation: 0.15s popover-fade-scale-in;
+              animation: 0.15s popover-fade-scale-in
+  }
+    }
+
+@media (prefers-reduced-motion) {
+
+.popover--active:not(.popover--closing) .popover__content {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.popover--closing .popover__backdrop {
+    -webkit-animation: 0.15s popover-fade-out;
+            animation: 0.15s popover-fade-out;
+    -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+  }
+
+@media (prefers-reduced-motion) {
+
+.popover--closing .popover__backdrop {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.popover--closing .popover__content {
+    -webkit-animation: 0.15s popover-slide-out;
+            animation: 0.15s popover-slide-out;
+    -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+  }
+
+@media (min-width: 768px) {
+
+.popover--closing .popover__content {
+      -webkit-animation: 0.15s popover-fade-out;
+              animation: 0.15s popover-fade-out
+  }
+    }
+
+@media (prefers-reduced-motion) {
+
+.popover--closing .popover__content {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.popover--inactive .popover__content {
+    display: none;
+  }
+
+.popover__backdrop {
+  position: fixed;
+  z-index: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+  -webkit-animation: 0.15s popover-backdrop-fade-in;
+          animation: 0.15s popover-backdrop-fade-in;
+  inset: 0;
+}
+
+@media (prefers-reduced-motion) {
+
+.popover__backdrop {
+    -webkit-animation: none;
+            animation: none
+}
+  }
+
+@media (min-width: 768px) {
+
+.popover__backdrop {
+    display: none
+}
+  }
+
+.popover__content {
+  position: fixed;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  border-top-left-radius: var(--s-border-radius-xl);
+  border-top-right-radius: var(--s-border-radius-xl);
+  background-color: var(--s-surface-overlay-default);
+}
+
+@media (min-width: 768px) {
+
+.popover__content {
+    right: unset;
+    bottom: unset;
+    left: unset;
+    max-width: 22.5rem;
+    border-radius: var(--s-border-radius-xl);
+    -webkit-animation: none;
+            animation: none;
+    box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)
+}
+  }
+
+.popover__scroll-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  max-height: 90vh;
+  padding-top: var(--s-space-24);
+  padding-bottom: var(--s-space-24);
+  overscroll-behavior: contain;
+}
+
+@media (min-width: 768px) {
+
+.popover__scroll-container {
+    max-height: 19rem;
+    padding-top: var(--s-space-8);
+    padding-bottom: var(--s-space-8)
+}
+  }
+
+.popover__handle {
+  position: absolute;
+  top: var(--s-space-8);
+  left: 50%;
+  width: 2.5rem;
+  height: 0.375rem;
+  border-radius: 0.1875rem;
+  background-color: var(--s-border-default);
+  transform: translatex(-50%);
+}
+
+@media (min-width: 768px) {
+
+.popover__handle {
+    display: none
+}
+  }
+
+@-webkit-keyframes popover-slide-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-slide-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@-webkit-keyframes popover-slide-out {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes popover-slide-out {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@-webkit-keyframes popover-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes popover-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes popover-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes popover-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes popover-fade-scale-in {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes popover-fade-scale-in {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/dist/collection/components/flip-popover/flip-popover.js

@@ -0,0 +1,229 @@
+import { autoUpdate, computePosition, flip, shift, } from "@floating-ui/dom";
+import { Component, Element, h, Host, Listen, Prop, State, } from "@stencil/core";
+import classnames from "classnames";
+import { querySelectorAllDeep } from "../../utils";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+/**
+ * @slot slot - The popover content.
+ */
+export class FlipPopover {
+  constructor() {
+    this.active = false;
+    this.closing = false;
+    this.close = () => {
+      var _a;
+      if (this.closing) {
+        return;
+      }
+      if (this.disableAutoUpdate) {
+        this.disableAutoUpdate();
+      }
+      this.closing = true;
+      setTimeout(() => {
+        this.active = false;
+        this.closing = false;
+        this.updateTriggerAttributes();
+      }, 150);
+      this.unlockBodyScroll();
+      (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    this.open = () => {
+      this.active = true;
+      this.updateChildMenuItems();
+      this.updateTriggerAttributes();
+      requestAnimationFrame(async () => {
+        await this.reposition();
+        if (this.childMenuItems.length > 0) {
+          this.childMenuItems[0].focus();
+        }
+        else {
+          this.contentContainer.focus();
+        }
+        if (this.disableAutoUpdate) {
+          this.disableAutoUpdate();
+        }
+        this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
+        this.scrollContainer.scrollTop = 0;
+        this.lockBodyScroll();
+      });
+    };
+    this.toggle = () => {
+      if (this.active) {
+        this.close();
+      }
+      else {
+        this.open();
+      }
+    };
+    this.onKeydown = (event) => {
+      if (event.code === "Escape" && this.active) {
+        this.close();
+      }
+    };
+    this.onContentClick = () => {
+      if (!this.active) {
+        return;
+      }
+      this.close();
+    };
+    this.reposition = async () => {
+      const mobile = !window.matchMedia("(min-width: 768px)").matches;
+      if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {
+        return;
+      }
+      if (mobile) {
+        this.position = undefined;
+        return;
+      }
+      this.position = await computePosition(this.triggerEl, this.contentContainer, {
+        middleware: [shift(), flip()],
+        placement: "bottom-start",
+        strategy: "fixed",
+      });
+    };
+  }
+  componentDidLoad() {
+    this.connectTrigger();
+    this.updateChildMenuItems();
+    this.updateTriggerAttributes();
+  }
+  disconnectedCallback() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  onWindowFocusout(event) {
+    if (!this.active) {
+      return;
+    }
+    const target = event.relatedTarget;
+    const popoverLostFocus = target === null ||
+      (!this.el.contains(target) &&
+        !this.childMenuItems.some((item) => { var _a; return (_a = target.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(item); }));
+    if (popoverLostFocus) {
+      this.close();
+    }
+  }
+  connectTrigger() {
+    var _a;
+    const triggerComponent = document.querySelector(`#${this.trigger}`);
+    this.triggerEl = ((triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.children[0]) ||
+      ((_a = triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.children[0]) ||
+      triggerComponent);
+    if (!Boolean(this.triggerEl)) {
+      return;
+    }
+    this.triggerEl.addEventListener("click", this.toggle);
+  }
+  updateTriggerAttributes() {
+    if (!Boolean(this.triggerEl)) {
+      return;
+    }
+    this.triggerEl.setAttribute("aria-controls", this.popoverId);
+    this.triggerEl.setAttribute("aria-expanded", String(this.active));
+    this.triggerEl.setAttribute("aria-haspopup", "dialog");
+  }
+  updateChildMenuItems() {
+    this.childMenuItems = querySelectorAllDeep(this.el, '[role="menuitem"]');
+  }
+  lockBodyScroll() {
+    const mobile = !window.matchMedia("(min-width: 768px)").matches;
+    if (!mobile) {
+      return;
+    }
+    disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    var _a, _b;
+    const className = classnames("popover", {
+      "popover--closing": this.closing,
+      "popover--active": this.active,
+      "popover--inactive": !this.active,
+    });
+    return (h(Host, { id: this.popoverId },
+      h("div", { class: className, onKeyDown: this.onKeydown },
+        h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", onClick: this.onContentClick, role: "dialog", tabindex: "-1", ref: (el) => (this.contentContainer = el), style: {
+            top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
+            left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
+          } },
+          h("span", { class: "popover__handle" }),
+          h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) },
+            h("slot", null))),
+        this.active && (h("div", { class: "popover__backdrop", onClick: this.close })))));
+  }
+  static get is() { return "flip-popover"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-popover.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-popover.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "popoverId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "popover-id",
+      "reflect": false
+    },
+    "trigger": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "trigger",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "active": {},
+    "closing": {},
+    "position": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "focusout",
+      "method": "onWindowFocusout",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/flip-popover/flip-popover.stories.js

@@ -0,0 +1,63 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-popover.mdx";
+export default {
+  argTypes: {
+    trigger: {
+      description: "ID of the trigger element.",
+    },
+  },
+  component: "flip-popover",
+  parameters: {
+    docs: {
+      page: Docs,
+      source: {
+        code: `<flip-button id="trigger" label="Trigger"></flip-button>
+
+<flip-popover label="Popover" popover-id="popover" trigger="trigger">
+  <flip-action-list>
+    <flip-action-list-section label="Section 1">
+      <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 1"></flip-action-list-item>
+      <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 2"></flip-action-list-item>
+      <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 3"></flip-action-list-item>
+    </flip-action-list-section>
+    <flip-action-list-section label="Section 2">
+      <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 1"></flip-action-list-item>
+      <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 2"></flip-action-list-item>
+      <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 3"></flip-action-list-item>
+    </flip-action-list-section>
+  </flip-action-list>
+</flip-popover>`,
+      },
+    },
+  },
+  title: "Components/FlipPopover",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  const trigger = document.createElement("flip-button");
+  const element = generateStoryElement("flip-popover", args);
+  trigger.id = "trigger";
+  trigger.label = "Trigger popover";
+  element.innerHTML = `
+    <flip-action-list>
+      <flip-action-list-section label="Section 1">
+        <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 1"></flip-action-list-item>
+        <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 2"></flip-action-list-item>
+        <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 3"></flip-action-list-item>
+      </flip-action-list-section>
+      <flip-action-list-section label="Section 2">
+        <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 1"></flip-action-list-item>
+        <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 2"></flip-action-list-item>
+        <flip-action-list-item icon="<flip-icon-mention></flip-icon-mention>" label="Action item 3"></flip-action-list-item>
+      </flip-action-list-section>
+    </flip-action-list>
+  `;
+  container.append(trigger, element);
+  return container;
+};
+export const FlipPopover = Template.bind({});
+FlipPopover.args = {
+  label: "Popover",
+  popoverId: "popover",
+  trigger: "trigger",
+};