@getflip/swirl-components 0.71.3 → 0.72.0

package/dist/collection/collection-manifest.json

@@ -192,6 +192,8 @@
     "./components/swirl-icon/icons/swirl-icon-visibility.js",
     "./components/swirl-icon/icons/swirl-icon-voice.js",
     "./components/swirl-icon/icons/swirl-icon-warning.js",
+    "./components/swirl-image-grid/swirl-image-grid.js",
+    "./components/swirl-image-grid-item/swirl-image-grid-item.js",
     "./components/swirl-lightbox/swirl-lightbox.js",
     "./components/swirl-list/swirl-list.js",
     "./components/swirl-menu-item/swirl-menu-item.js",

package/dist/collection/components/swirl-image-grid/swirl-image-grid.css

@@ -0,0 +1,44 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.image-grid {
+  display: grid;
+  overflow: hidden;
+  width: 100%;
+  min-height: 0;
+  border-radius: var(--s-border-radius-sm);
+  gap: var(--s-space-2);
+}
+
+.image-grid--item-count-1 {
+  grid-template-columns: 100%;
+  grid-template-rows: 100%;
+}
+
+.image-grid--item-count-2 {
+  grid-template-columns: repeat(2, 50%);
+}
+
+.image-grid--item-count-3 {
+  grid-template-columns: calc(100% / 3 * 2) calc(100% / 3);
+}
+
+.image-grid--item-count-3 ::slotted(*:nth-child(1)) {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: 3;
+  }
+
+.image-grid--item-count-3 ::slotted(*:nth-child(3)) {
+    grid-column-start: 2;
+  }
+
+.image-grid--item-count-4 {
+  grid-template-columns: repeat(2, 50%);
+  grid-template-rows: repeat(2, 50%);
+}

package/dist/collection/components/swirl-image-grid/swirl-image-grid.js

@@ -0,0 +1,61 @@
+import { h, Host } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlImageGrid {
+  constructor() {
+    this.updateItems = () => {
+      this.items = Array.from(this.el.children);
+      if (this.items.length > 4) {
+        this.items[3].overlay = `+${this.items.length - 4}`;
+      }
+    };
+    this.aspectRatio = "1/1";
+    this.items = [];
+  }
+  componentWillLoad() {
+    this.updateItems();
+  }
+  render() {
+    const className = classnames("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
+    return (h(Host, null, h("div", { class: className, role: "list", style: { aspectRatio: this.aspectRatio } }, h("slot", { onSlotchange: this.updateItems }))));
+  }
+  static get is() { return "swirl-image-grid"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-image-grid.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-image-grid.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "aspectRatio": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aspect-ratio",
+        "reflect": false,
+        "defaultValue": "\"1/1\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "items": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/swirl-image-grid/swirl-image-grid.spec.js

@@ -0,0 +1,92 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlImageGrid } from "./swirl-image-grid";
+import { SwirlImageGridItem } from "../swirl-image-grid-item/swirl-image-grid-item";
+describe("swirl-image-grid", () => {
+  it("renders a single item", async () => {
+    const page = await newSpecPage({
+      components: [SwirlImageGrid, SwirlImageGridItem],
+      html: `
+        <swirl-image-grid aspect-ratio="4 / 3">
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+        </swirl-image-grid>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-image-grid aspect-ratio="4 / 3">
+        <mock:shadow-root>
+          <div class="image-grid image-grid--item-count-1" role="list" style="aspect-ratio: 4 / 3;">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+        <swirl-image-grid-item alt="Cute dog in a blanket" interactive="" role="listitem" src="/sample.jpg">
+          <mock:shadow-root>
+            <button class="image-grid-item" type="button">
+              <div class="image-grid-item__background" style="background-image: url(/sample.jpg);"></div>
+              <img alt="Cute dog in a blanket" class="image-grid-item__image" src="/sample.jpg">
+            </button>
+          </mock:shadow-root>
+        </swirl-image-grid-item>
+      </swirl-image-grid>
+    `);
+  });
+  it("renders a two items correctly", async () => {
+    const page = await newSpecPage({
+      components: [SwirlImageGrid, SwirlImageGridItem],
+      html: `
+        <swirl-image-grid aspect-ratio="4 / 3">
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+        </swirl-image-grid>
+      `,
+    });
+    expect(page.root.shadowRoot.children[0].classList.contains("image-grid--item-count-2")).toBe(true);
+  });
+  it("renders a two items correctly", async () => {
+    const page = await newSpecPage({
+      components: [SwirlImageGrid, SwirlImageGridItem],
+      html: `
+        <swirl-image-grid aspect-ratio="4 / 3">
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+        </swirl-image-grid>
+      `,
+    });
+    expect(page.root.shadowRoot.children[0].classList.contains("image-grid--item-count-2")).toBe(true);
+  });
+  it("renders a three items correctly", async () => {
+    const page = await newSpecPage({
+      components: [SwirlImageGrid, SwirlImageGridItem],
+      html: `
+        <swirl-image-grid aspect-ratio="4 / 3">
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+        </swirl-image-grid>
+      `,
+    });
+    expect(page.root.shadowRoot.children[0].classList.contains("image-grid--item-count-3")).toBe(true);
+  });
+  it("renders overflowing items correctly", async () => {
+    const page = await newSpecPage({
+      components: [SwirlImageGrid, SwirlImageGridItem],
+      html: `
+        <swirl-image-grid aspect-ratio="4 / 3">
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+          <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+        </swirl-image-grid>
+      `,
+    });
+    const el = page.root.shadowRoot.children[0];
+    const items = Array.from(page.root.querySelectorAll("swirl-image-grid-item"));
+    expect(el.classList.contains("image-grid--item-count-4")).toBe(true);
+    expect(items[3].shadowRoot
+      .querySelector(".image-grid-item")
+      .classList.contains("image-grid-item--has-overlay")).toBe(true);
+    expect(items[3].shadowRoot.querySelector(".image-grid-item")
+      .innerText).toEqual("+2");
+  });
+});

package/dist/collection/components/swirl-image-grid/swirl-image-grid.stories.js

@@ -0,0 +1,24 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-image-grid.mdx";
+export default {
+  component: "swirl-image-grid",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlImageGrid",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-image-grid", args);
+  element.innerHTML = args.slot;
+  return element;
+};
+export const SwirlImageGrid = Template.bind({});
+SwirlImageGrid.args = {
+  aspectRatio: "16 / 9",
+  slot: `<swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+<swirl-image-grid-item alt="Another cute dog in a blanket" interactive src="/sample-2.jpg"></swirl-image-grid-item>
+<swirl-image-grid-item alt="Third cute dog in a blanket" interactive src="/sample-3.jpg"></swirl-image-grid-item>`,
+};

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.css

@@ -0,0 +1,82 @@
+:host {
+  display: block;
+  width: 100%;
+  min-height: 0;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+  :host(:not(:only-child)) .image-grid-item__background {
+      display: none;
+    }
+
+  :host(:not(:only-child)) .image-grid-item__image {
+      -o-object-fit: cover;
+         object-fit: cover;
+    }
+
+  :host(:nth-child(n+5)) {
+    display: none;
+  }
+
+.image-grid-item {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+button.image-grid-item {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+button.image-grid-item:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+button.image-grid-item:focus-visible {
+    z-index: 1;
+    outline-color: var(--s-focus-default);
+    outline-offset: var(--s-space-2);
+  }
+
+.image-grid-item--has-overlay .image-grid-item__image {
+    scale: 1.1;
+    filter: blur(5px);
+  }
+
+.image-grid-item__background {
+  position: absolute;
+  background-size: cover;
+  inset: -40px;
+  filter: blur(20px);
+}
+
+.image-grid-item__image {
+  z-index: 1;
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+  -o-object-position: center;
+     object-position: center;
+}
+
+.image-grid-item__overlay {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.4);
+  color: var(--s-text-on-image);
+  font-size: var(--s-font-size-2xl);
+}

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js

@@ -0,0 +1,101 @@
+import { h, Host } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlImageGridItem {
+  constructor() {
+    this.alt = undefined;
+    this.interactive = undefined;
+    this.overlay = undefined;
+    this.src = undefined;
+  }
+  render() {
+    const Tag = this.interactive ? "button" : "div";
+    const className = classnames("image-grid-item", {
+      "image-grid-item--has-overlay": this.overlay,
+    });
+    return (h(Host, { role: "listitem" }, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, h("div", { class: "image-grid-item__background", style: { backgroundImage: `url(${this.src})` } }), h("img", { alt: this.alt, class: "image-grid-item__image", src: this.src }), this.overlay && (h("div", { class: "image-grid-item__overlay" }, this.overlay)))));
+  }
+  static get is() { return "swirl-image-grid-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-image-grid-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-image-grid-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "alt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "alt",
+        "reflect": false
+      },
+      "interactive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "interactive",
+        "reflect": false
+      },
+      "overlay": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "overlay",
+        "reflect": false
+      },
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "src",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.spec.js

@@ -0,0 +1,20 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlImageGridItem } from "./swirl-image-grid-item";
+describe("swirl-image-grid-item", () => {
+  it("renders its image", async () => {
+    const page = await newSpecPage({
+      components: [SwirlImageGridItem],
+      html: `<swirl-image-grid-item alt="Dog in a blanket" src="/image.jpg"></swirl-image-grid-item>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-image-grid-item alt="Dog in a blanket" role="listitem" src="/image.jpg">
+        <mock:shadow-root>
+          <div class="image-grid-item">
+            <div class="image-grid-item__background" style="background-image: url(/image.jpg);"></div>
+            <img alt="Dog in a blanket" class="image-grid-item__image" src="/image.jpg">
+          </div>
+        </mock:shadow-root>
+      </swirl-image-grid-item>
+    `);
+  });
+});

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.stories.js

@@ -0,0 +1,23 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-image-grid-item.mdx";
+export default {
+  component: "swirl-image-grid-item",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlImageGridItem",
+};
+const Template = (args) => {
+  const container = document.createElement("swirl-image-grid");
+  const element = generateStoryElement("swirl-image-grid-item", args);
+  container.append(element);
+  return container;
+};
+export const SwirlImageGridItem = Template.bind({});
+SwirlImageGridItem.args = {
+  alt: "Dog in a blanket",
+  src: "/sample.jpg",
+};

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css

@@ -103,9 +103,14 @@
     background-color: var(--s-surface-overlay-pressed);
   }
 
+.resource-list-item--disabled.resource-list-item--checked .resource-list-item__checkbox {
+      border-color: var(--s-icon-disabled);
+      background-color: var(--s-icon-disabled);
+    }
+
 .resource-list-item--disabled .resource-list-item__checkbox {
     border-color: var(--s-icon-disabled);
-    background-color: var(--s-icon-disabled);
+    background-color: transparent;
   }
 
 .resource-list-item--disabled .resource-list-item__checkbox-icon {

package/dist/collection/utils.js

@@ -84,7 +84,10 @@ export function fullscreenStoryDecorator(padded = true) {
 export function generateStoryElement(tag, args, content) {
   const element = document.createElement(tag);
   Object.entries(args)
-    .filter((arg) => arg[1] !== undefined && arg[1] !== null && arg[1] !== "")
+    .filter((arg) => arg[1] !== undefined &&
+    arg[1] !== null &&
+    arg[1] !== "" &&
+    arg[0] !== "slot")
     .forEach(([attr, value]) => {
     if (typeof value === "object") {
       element[attr] = value;