@getflip/swirl-components 0.1.0 → 0.3.0

package/dist/collection/components/flip-radio-group/flip-radio-group.js

@@ -20,6 +20,7 @@ export class FlipRadioGroup {
       radio.addEventListener("valueChange", () => {
         if (radio.checked === true || radio.checked === "true") {
           this.valueChange.emit(radio.value);
+          this.value = radio.value;
           this.radioButtons.forEach((r, k) => {
             if (String(k) === key) {
               return;
@@ -31,7 +32,7 @@ export class FlipRadioGroup {
     }
   }
   render() {
-    return (h(Host, { role: "radiogroup" },
+    return (h(Host, { "aria-describedby": this.flipAriaDescribedby, role: "radiogroup" },
       h("div", { class: "radio-group" },
         h("slot", null))));
   }
@@ -44,6 +45,23 @@ export class FlipRadioGroup {
     "$": ["flip-radio-group.css"]
   }; }
   static get properties() { return {
+    "flipAriaDescribedby": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "flip-aria-describedby",
+      "reflect": false
+    },
     "value": {
       "type": "string",
       "mutable": true,
@@ -59,7 +77,7 @@ export class FlipRadioGroup {
         "text": ""
       },
       "attribute": "value",
-      "reflect": false
+      "reflect": true
     }
   }; }
   static get events() { return [{
@@ -80,3 +98,4 @@ export class FlipRadioGroup {
     }]; }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=flip-radio-group.js.map

package/dist/collection/components/flip-radio-group/flip-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-radio-group.js","sourceRoot":"","sources":["../../../../src/components/flip-radio-group/flip-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAcvB,MAAM,OAAO,cAAc;EAUzB,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IACvE,IAAI,CAAC,SAAS,EAAE,CAAC;IACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAEO,SAAS;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,OAAO;KACR;IAED,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CACtC,CAAC;IAEF,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;MAC5B,OAAO;KACR;IAED,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;EAChC,CAAC;EAEO,kBAAkB;IACxB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;MAC5D,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE;QACzC,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;UACtD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;UACnC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;UAEzB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACjC,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;cACrB,OAAO;aACR;YAED,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC;UACpB,CAAC,CAAC,CAAC;SACJ;MACH,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,wBAAmB,IAAI,CAAC,mBAAmB,EAAE,IAAI,EAAC,YAAY;MACjE,WAAK,KAAK,EAAC,aAAa;QACtB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from \"@stencil/core\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-radio-group.css\",\n  tag: \"flip-radio-group\",\n})\nexport class FlipRadioGroup {\n  @Element() el: HTMLElement;\n\n  @Prop() flipAriaDescribedby?: string;\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  @Event() valueChange: EventEmitter<string>;\n\n  private radioButtons: HTMLFlipRadioElement[];\n\n  componentDidLoad() {\n    this.radioButtons = Array.from(this.el.querySelectorAll(\"flip-radio\"));\n    this.initValue();\n    this.handleValueChanges();\n  }\n\n  private initValue() {\n    if (this.value === undefined) {\n      return;\n    }\n\n    const radioWithValue = this.radioButtons.find(\n      (radio) => radio.value === this.value\n    );\n\n    if (!Boolean(radioWithValue)) {\n      return;\n    }\n\n    radioWithValue.checked = true;\n  }\n\n  private handleValueChanges() {\n    for (const [key, radio] of Object.entries(this.radioButtons)) {\n      radio.addEventListener(\"valueChange\", () => {\n        if (radio.checked === true || radio.checked === \"true\") {\n          this.valueChange.emit(radio.value);\n          this.value = radio.value;\n\n          this.radioButtons.forEach((r, k) => {\n            if (String(k) === key) {\n              return;\n            }\n\n            r.checked = false;\n          });\n        }\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host aria-describedby={this.flipAriaDescribedby} role=\"radiogroup\">\n        <div class=\"radio-group\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-radio-group/flip-radio-group.stories.js

@@ -23,3 +23,4 @@ FlipRadioGroup.args = {
   "aria-label": "Radio group",
   value: "2",
 };
+//# sourceMappingURL=flip-radio-group.stories.js.map

package/dist/collection/components/flip-radio-group/flip-radio-group.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-radio-group.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-radio-group/flip-radio-group.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,eAAe;EACb,SAAS,EAAE,kBAAkB;EAC7B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,2BAA2B;CACnC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;EAE/D,OAAO,CAAC,SAAS,GAAG;;;;GAInB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,cAAc,CAAC,IAAI,GAAG;EACpB,YAAY,EAAE,aAAa;EAC3B,KAAK,EAAE,GAAG;CACX,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-radio-group.mdx\";\n\nexport default {\n  component: \"flip-radio-group\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipRadioGroup\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-radio-group\", args);\n\n  element.innerHTML = `\n    <flip-radio input-id=\"radio-1\" input-name=\"radio\" label=\"Radio button #1\" value=\"1\"></flip-radio>\n    <flip-radio input-id=\"radio-2\" input-name=\"radio\" label=\"Radio button #2\" value=\"2\"></flip-radio>\n    <flip-radio input-id=\"radio-3\" input-name=\"radio\" label=\"Radio button #3\" value=\"3\"></flip-radio>\n  `;\n\n  return element;\n};\n\nexport const FlipRadioGroup = Template.bind({});\n\nFlipRadioGroup.args = {\n  \"aria-label\": \"Radio group\",\n  value: \"2\",\n};\n"]}

package/dist/collection/components/flip-resource-list/flip-resource-list.css

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }

package/dist/collection/components/flip-resource-list/flip-resource-list.js

@@ -0,0 +1,86 @@
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+export class FlipResourceList {
+  constructor() {
+    this.focusedIndex = 0;
+    this.onFocus = () => {
+      this.focusItemAtIndex(this.focusedIndex);
+    };
+    this.onKeyDown = (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+      }
+      else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const prevIndex = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
+        this.focusItemAtIndex(prevIndex);
+      }
+      else if (event.key === "Home") {
+        event.preventDefault();
+        this.focusItemAtIndex(0);
+      }
+      else if (event.key === "End") {
+        event.preventDefault();
+        this.focusItemAtIndex(this.items.length - 1);
+      }
+    };
+  }
+  componentDidLoad() {
+    this.collectItems();
+    this.removeItemsFromTabOrder();
+  }
+  collectItems() {
+    this.items = Array.from(this.el.querySelectorAll("flip-resource-list-item, flip-resource-list-file-item"));
+  }
+  removeItemsFromTabOrder() {
+    this.items.forEach((item) => {
+      var _a, _b;
+      return (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || _b === void 0 ? void 0 : _b.setAttribute("tabIndex", "-1");
+    });
+  }
+  focusItemAtIndex(index) {
+    this.removeItemsFromTabOrder();
+    const item = this.items[index];
+    if (!Boolean(item)) {
+      return;
+    }
+    const interactiveElement = item.shadowRoot.querySelector(".resource-list-item__content, .resource-list-file-item");
+    interactiveElement.setAttribute("tabIndex", "0");
+    interactiveElement.focus();
+    this.focusedIndex = index;
+  }
+  render() {
+    return (h(Host, { onKeyDown: this.onKeyDown },
+      h("flip-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 },
+        h("slot", null))));
+  }
+  static get is() { return "flip-resource-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-resource-list.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-resource-list.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=flip-resource-list.js.map

package/dist/collection/components/flip-resource-list/flip-resource-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-resource-list.js","sourceRoot":"","sources":["../../../../src/components/flip-resource-list/flip-resource-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,gBAAgB;EAL7B;IAUU,iBAAY,GAAG,CAAC,CAAC;IA6CjB,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC3C,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;OACpE;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;QAClC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,SAAS,GACb,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QAE1E,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;OAClC;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;OAC1B;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;OAC9C;IACH,CAAC,CAAC;GAgBH;EAlFC,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;EACjC,CAAC;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CACrB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CACtB,uDAAuD,CACxD,CACF,CAAC;EACJ,CAAC;EAEO,uBAAuB;IAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;;MAC1B,OAAA,MAAA,MAAA,IAAI,CAAC,UAAU,0CACX,aAAa,CACb,wDAAwD,CACzD,0CACC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;KAAA,CACnC,CAAC;EACJ,CAAC;EAEO,gBAAgB,CAAC,KAAa;IACpC,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAE/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;MAClB,OAAO;KACR;IAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACtD,wDAAwD,CACzD,CAAC;IAEF,kBAAkB,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACjD,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAE3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;EAC5B,CAAC;EA4BD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,SAAS;MAC7B,gCACc,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,CAAC;QAEX,eAAa,CACF,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-resource-list.css\",\n  tag: \"flip-resource-list\",\n})\nexport class FlipResourceList {\n  @Element() el: HTMLElement;\n\n  @Prop() label?: string;\n\n  private focusedIndex = 0;\n  private items: HTMLFlipResourceListItemElement[];\n\n  componentDidLoad() {\n    this.collectItems();\n    this.removeItemsFromTabOrder();\n  }\n\n  private collectItems() {\n    this.items = Array.from(\n      this.el.querySelectorAll(\n        \"flip-resource-list-item, flip-resource-list-file-item\"\n      )\n    );\n  }\n\n  private removeItemsFromTabOrder() {\n    this.items.forEach((item) =>\n      item.shadowRoot\n        ?.querySelector(\n          \".resource-list-item__content, .resource-list-file-item\"\n        )\n        ?.setAttribute(\"tabIndex\", \"-1\")\n    );\n  }\n\n  private focusItemAtIndex(index: number) {\n    this.removeItemsFromTabOrder();\n\n    const item = this.items[index];\n\n    if (!Boolean(item)) {\n      return;\n    }\n\n    const interactiveElement = item.shadowRoot.querySelector<HTMLElement>(\n      \".resource-list-item__content, .resource-list-file-item\"\n    );\n\n    interactiveElement.setAttribute(\"tabIndex\", \"0\");\n    interactiveElement.focus();\n\n    this.focusedIndex = index;\n  }\n\n  private onFocus = () => {\n    this.focusItemAtIndex(this.focusedIndex);\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n\n      const prevIndex =\n        this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;\n\n      this.focusItemAtIndex(prevIndex);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n\n      this.focusItemAtIndex(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n\n      this.focusItemAtIndex(this.items.length - 1);\n    }\n  };\n\n  render() {\n    return (\n      <Host onKeyDown={this.onKeyDown}>\n        <flip-stack\n          aria-label={this.label}\n          onFocus={this.onFocus}\n          role=\"grid\"\n          tabIndex={0}\n        >\n          <slot></slot>\n        </flip-stack>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-resource-list/flip-resource-list.stories.js

@@ -0,0 +1,37 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-resource-list.mdx";
+export default {
+  component: "flip-resource-list",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipResourceList",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-resource-list", args);
+  element.innerHTML = `
+    <flip-resource-list-item
+      description="With a description"
+      label="This is a resource item"
+      media="<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/433/144/144&quot;></flip-avatar>"
+    ></flip-resource-list-item>
+    <flip-resource-list-item
+      description="With a description"
+      label="This is a resource item"
+      media="<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/103/144/144&quot;></flip-avatar>"
+    ></flip-resource-list-item>
+    <flip-resource-list-item
+      description="With a description"
+      label="This is a resource item"
+      media="<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/1027/144/144&quot;></flip-avatar>"
+    ></flip-resource-list-item>
+  `;
+  return element;
+};
+export const FlipResourceList = Template.bind({});
+FlipResourceList.args = {
+  label: "A resource list",
+};
+//# sourceMappingURL=flip-resource-list.stories.js.map

package/dist/collection/components/flip-resource-list/flip-resource-list.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-resource-list.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-resource-list/flip-resource-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAE5C,eAAe;EACb,SAAS,EAAE,oBAAoB;EAC/B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,6BAA6B;CACrC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;EAEjE,OAAO,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;GAgBnB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAElD,gBAAgB,CAAC,IAAI,GAAG;EACtB,KAAK,EAAE,iBAAiB;CACzB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-resource-list.mdx\";\n\nexport default {\n  component: \"flip-resource-list\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipResourceList\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-resource-list\", args);\n\n  element.innerHTML = `\n    <flip-resource-list-item\n      description=\"With a description\"\n      label=\"This is a resource item\"\n      media=\"<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/433/144/144&quot;></flip-avatar>\"\n    ></flip-resource-list-item>\n    <flip-resource-list-item\n      description=\"With a description\"\n      label=\"This is a resource item\"\n      media=\"<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/103/144/144&quot;></flip-avatar>\"\n    ></flip-resource-list-item>\n    <flip-resource-list-item\n      description=\"With a description\"\n      label=\"This is a resource item\"\n      media=\"<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/1027/144/144&quot;></flip-avatar>\"\n    ></flip-resource-list-item>\n  `;\n\n  return element;\n};\n\nexport const FlipResourceList = Template.bind({});\n\nFlipResourceList.args = {\n  label: \"A resource list\",\n};\n"]}

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.css

@@ -0,0 +1,89 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.resource-list-file-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  padding: var(--s-space-12) var(--s-space-16);
+  align-items: center;
+  background-color: var(--s-background-default);
+  line-height: var(--s-line-height-base);
+  gap: var(--s-space-12);
+}
+
+.resource-list-file-item:focus {
+    background-color: var(--s-background-hovered);
+    outline: none;
+  }
+
+.resource-list-file-item--has-control .resource-list-file-item__label-container {
+    padding-right: calc(var(--s-space-12) + 2.5rem);
+  }
+
+.resource-list-file-item__icon {
+  color: var(--s-icon-highlight);
+}
+
+.resource-list-file-item__label-container {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 2.875rem;
+  flex-grow: 1;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.resource-list-file-item__label-container:after {
+    position: absolute;
+    right: 0;
+    bottom: calc(-1 * var(--s-space-12));
+    left: 0;
+    height: 0.0625rem;
+    background-color: var(--s-border-default);
+    content: "";
+  }
+
+.resource-list-file-item__label {
+  overflow: hidden;
+  font-weight: var(--s-font-weight-medium);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.resource-list-file-item__description {
+  overflow: hidden;
+  margin-top: var(--s-space-2);
+  color: var(--s-text-subdued);
+  font-size: var(--s-font-size-sm);
+  line-height: var(--s-line-height-sm);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.resource-list-file-item__error-message {
+  margin-top: var(--s-space-2);
+}
+
+.resource-list-file-item__remove-button {
+  position: absolute;
+  top: 50%;
+  right: var(--s-space-16);
+  display: inline-flex;
+  transform: translateY(-50%);
+}
+
+.resource-list-file-item__spinner {
+  position: absolute;
+  top: 50%;
+  right: var(--s-space-24);
+  display: inline-flex;
+  transform: translateY(-50%);
+}

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.js

@@ -0,0 +1,181 @@
+import { Component, Event, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipResourceListFileItem {
+  constructor() {
+    this.icon = "<flip-icon-file></flip-icon-file>";
+    this.removeButtonLabel = "Remove file";
+  }
+  render() {
+    const showError = Boolean(this.errorMessage);
+    const showDescription = !showError && Boolean(this.description);
+    const showSpinner = !showError && this.loading;
+    const showRemoveButton = this.removable && !showSpinner;
+    const className = classnames("resource-list-file-item", {
+      "resource-list-file-item--has-control": showSpinner || showRemoveButton,
+    });
+    return (h(Host, { role: "row" },
+      h("div", { class: className, role: "gridcell" },
+        h("span", { class: "resource-list-file-item__icon", innerHTML: this.icon }),
+        h("span", { class: "resource-list-file-item__label-container" },
+          h("span", { class: "resource-list-file-item__label", id: "label" }, this.label),
+          showDescription && (h("span", { class: "resource-list-file-item__description" }, this.description)),
+          showError && (h("span", { "aria-live": "polite", class: "resource-list-file-item__error-message" },
+            h("flip-inline-error", { message: this.errorMessage, size: "s" })))),
+        showSpinner && (h("span", { class: "resource-list-file-item__spinner" },
+          h("flip-spinner", { size: "s" }))),
+        showRemoveButton && (h("span", { class: "resource-list-file-item__remove-button" },
+          h("flip-button", { hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+  }
+  static get is() { return "flip-resource-list-file-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-resource-list-file-item.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-resource-list-file-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
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "\"<flip-icon-file></flip-icon-file>\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loading",
+      "reflect": false
+    },
+    "removable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "removable",
+      "reflect": false
+    },
+    "removeButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "remove-button-label",
+      "reflect": false,
+      "defaultValue": "\"Remove file\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "remove",
+      "name": "remove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+}
+//# sourceMappingURL=flip-resource-list-file-item.js.map

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-resource-list-file-item.js","sourceRoot":"","sources":["../../../../src/components/flip-resource-list-file-item/flip-resource-list-file-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,wBAAwB;EALrC;IAQU,SAAI,GAAY,mCAAmC,CAAC;IAIpD,sBAAiB,GAAY,aAAa,CAAC;GA6DpD;EAzDC,MAAM;IACJ,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,eAAe,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;IAC/C,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC;IAExD,MAAM,SAAS,GAAG,UAAU,CAAC,yBAAyB,EAAE;MACtD,sCAAsC,EAAE,WAAW,IAAI,gBAAgB;KACxE,CAAC,CAAC;IAEH,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,KAAK;MACd,WAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,UAAU;QACpC,YACE,KAAK,EAAC,+BAA+B,EACrC,SAAS,EAAE,IAAI,CAAC,IAAI,GACd;QACR,YAAM,KAAK,EAAC,0CAA0C;UACpD,YAAM,KAAK,EAAC,gCAAgC,EAAC,EAAE,EAAC,OAAO,IACpD,IAAI,CAAC,KAAK,CACN;UACN,eAAe,IAAI,CAClB,YAAM,KAAK,EAAC,sCAAsC,IAC/C,IAAI,CAAC,WAAW,CACZ,CACR;UACA,SAAS,IAAI,CACZ,yBACY,QAAQ,EAClB,KAAK,EAAC,wCAAwC;YAE9C,yBACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,GAAG,GACW,CAChB,CACR,CACI;QACN,WAAW,IAAI,CACd,YAAM,KAAK,EAAC,kCAAkC;UAC5C,oBAAc,IAAI,EAAC,GAAG,GAAgB,CACjC,CACR;QACA,gBAAgB,IAAI,CACnB,YAAM,KAAK,EAAC,wCAAwC;UAClD,mBACE,SAAS,QACT,IAAI,EAAC,qCAAqC,EAC1C,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,GACZ,CACV,CACR,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-resource-list-file-item.css\",\n  tag: \"flip-resource-list-file-item\",\n})\nexport class FlipResourceListFileItem {\n  @Prop() description?: string;\n  @Prop() errorMessage?: string;\n  @Prop() icon?: string = \"<flip-icon-file></flip-icon-file>\";\n  @Prop() label!: string;\n  @Prop() loading: boolean;\n  @Prop() removable?: boolean;\n  @Prop() removeButtonLabel?: string = \"Remove file\";\n\n  @Event() remove: EventEmitter<MouseEvent>;\n\n  render() {\n    const showError = Boolean(this.errorMessage);\n    const showDescription = !showError && Boolean(this.description);\n    const showSpinner = !showError && this.loading;\n    const showRemoveButton = this.removable && !showSpinner;\n\n    const className = classnames(\"resource-list-file-item\", {\n      \"resource-list-file-item--has-control\": showSpinner || showRemoveButton,\n    });\n\n    return (\n      <Host role=\"row\">\n        <div class={className} role=\"gridcell\">\n          <span\n            class=\"resource-list-file-item__icon\"\n            innerHTML={this.icon}\n          ></span>\n          <span class=\"resource-list-file-item__label-container\">\n            <span class=\"resource-list-file-item__label\" id=\"label\">\n              {this.label}\n            </span>\n            {showDescription && (\n              <span class=\"resource-list-file-item__description\">\n                {this.description}\n              </span>\n            )}\n            {showError && (\n              <span\n                aria-live=\"polite\"\n                class=\"resource-list-file-item__error-message\"\n              >\n                <flip-inline-error\n                  message={this.errorMessage}\n                  size=\"s\"\n                ></flip-inline-error>\n              </span>\n            )}\n          </span>\n          {showSpinner && (\n            <span class=\"resource-list-file-item__spinner\">\n              <flip-spinner size=\"s\"></flip-spinner>\n            </span>\n          )}\n          {showRemoveButton && (\n            <span class=\"resource-list-file-item__remove-button\">\n              <flip-button\n                hideLabel\n                icon=\"<flip-icon-close></flip-icon-close>\"\n                label={this.removeButtonLabel}\n                onClick={this.remove.emit}\n              ></flip-button>\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.stories.js

@@ -0,0 +1,36 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-resource-list-file-item.mdx";
+export default {
+  argTypes: {
+    icon: {
+      table: {
+        type: {
+          detail: "e.g. <flip-icon-file></flip-icon-file>",
+          summary: "flip-icon-*",
+        },
+      },
+    },
+  },
+  component: "flip-resource-list-file-item",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipResourceListFileItem",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  const element = generateStoryElement("flip-resource-list-file-item", args);
+  container.setAttribute("aria-label", "List");
+  container.setAttribute("role", "grid");
+  container.append("\n  ", element, "\n");
+  return container;
+};
+export const FlipResourceListFileItem = Template.bind({});
+FlipResourceListFileItem.args = {
+  description: "12MB",
+  label: "Design_final-final-12.png",
+  removable: true,
+};
+//# sourceMappingURL=flip-resource-list-file-item.stories.js.map

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-resource-list-file-item.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-resource-list-file-item/flip-resource-list-file-item.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,oCAAoC,CAAC;AAEtD,eAAe;EACb,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,MAAM,EAAE,wCAAwC;UAChD,OAAO,EAAE,aAAa;SACvB;OACF;KACF;GACF;EACD,SAAS,EAAE,8BAA8B;EACzC,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,qCAAqC;CAC7C,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAChD,MAAM,OAAO,GAAG,oBAAoB,CAAC,8BAA8B,EAAE,IAAI,CAAC,CAAC;EAE3E,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;EAC7C,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;EAEvC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;EAExC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1D,wBAAwB,CAAC,IAAI,GAAG;EAC9B,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,2BAA2B;EAClC,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-resource-list-file-item.mdx\";\n\nexport default {\n  argTypes: {\n    icon: {\n      table: {\n        type: {\n          detail: \"e.g. <flip-icon-file></flip-icon-file>\",\n          summary: \"flip-icon-*\",\n        },\n      },\n    },\n  },\n  component: \"flip-resource-list-file-item\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipResourceListFileItem\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"div\");\n  const element = generateStoryElement(\"flip-resource-list-file-item\", args);\n\n  container.setAttribute(\"aria-label\", \"List\");\n  container.setAttribute(\"role\", \"grid\");\n\n  container.append(\"\\n  \", element, \"\\n\");\n\n  return container;\n};\n\nexport const FlipResourceListFileItem = Template.bind({});\n\nFlipResourceListFileItem.args = {\n  description: \"12MB\",\n  label: \"Design_final-final-12.png\",\n  removable: true,\n};\n"]}