@getflip/swirl-components 0.1.0 → 0.2.0

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

@@ -0,0 +1,195 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.resource-list-item {
+  position: relative;
+  width: 100%;
+}
+
+.resource-list-item--checked .resource-list-item__checkbox {
+    border-color: var(--s-icon-highlight);
+    color: var(--s-text-on-status);
+    background-color: var(--s-icon-highlight);
+  }
+
+.resource-list-item--has-menu .resource-list-item__label-container {
+    padding-right: calc(var(--s-space-16) + 2.5rem + var(--s-space-12));
+  }
+
+@media (--from-tablet) {
+
+.resource-list-item--selectable .resource-list-item__content {
+      padding-left: calc(var(--s-space-16) + 1.5rem + var(--s-space-12))
+  }
+    }
+
+.resource-list-item--selectable .resource-list-item__label-container {
+    padding-right: calc(var(--s-space-16) + 1.5rem + var(--s-space-12));
+  }
+
+@media (--from-tablet) {
+
+.resource-list-item--selectable .resource-list-item__label-container {
+      padding-right: var(--s-space-16)
+  }
+    }
+
+.resource-list-item--hide-divider .resource-list-item__label-container:after {
+    display: none;
+  }
+
+.resource-list-item__content {
+  --flip-avatar-group-border-color: var(--s-background-default);
+  --flip-badge-border-color: var(--s-background-default);
+
+  display: flex;
+  width: 100%;
+  padding-top: var(--s-space-12);
+  padding-right: 0;
+  padding-bottom: var(--s-space-12);
+  padding-left: var(--s-space-16);
+  align-items: center;
+  border: none;
+  color: var(--s-text-default);
+  background-color: var(--s-background-default);
+  font: inherit;
+  line-height: var(--s-line-height-base);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  gap: var(--s-space-12);
+}
+
+.resource-list-item__content:hover:not(:disabled) {
+    background-color: var(--s-background-hovered);
+  }
+
+.resource-list-item__content:hover:not(:disabled) .resource-list-item__media {
+      --flip-avatar-group-border-color: var(--s-background-hovered);
+      --flip-badge-border-color: var(--s-background-hovered);
+    }
+
+.resource-list-item__content:active:not(:disabled) {
+    background-color: var(--s-background-pressed);
+  }
+
+.resource-list-item__content:active:not(:disabled) .resource-list-item__media {
+      --flip-avatar-group-border-color: var(--s-background-pressed);
+      --flip-badge-border-color: var(--s-background-pressed);
+    }
+
+.resource-list-item__content:focus {
+    background-color: var(--s-background-hovered);
+    outline: none;
+  }
+
+.resource-list-item__content:focus .resource-list-item__media {
+      --flip-avatar-group-border-color: var(--s-background-hovered);
+      --flip-badge-border-color: var(--s-background-hovered);
+    }
+
+.resource-list-item__content:disabled {
+    color: var(--s-text-disabled);
+    background-color: var(--s-background-default);
+    cursor: default;
+  }
+
+.resource-list-item__content:disabled .resource-list-item__description {
+      color: var(--s-text-disabled);
+    }
+
+.resource-list-item__media {
+  display: inline-flex;
+}
+
+.resource-list-item__label-container {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 2.875rem;
+  padding-right: var(--s-space-16);
+  flex-grow: 1;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.resource-list-item__label-container:after {
+    position: absolute;
+    right: 0;
+    bottom: calc(-1 * var(--s-space-12) + 0.0625rem);
+    left: 0;
+    height: 0.0625rem;
+    background-color: var(--s-border-default);
+    content: "";
+  }
+
+.resource-list-item__label {
+  overflow: hidden;
+  font-weight: var(--s-font-weight-medium);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.resource-list-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-item__menu-trigger {
+  position: absolute;
+  top: 50%;
+  right: var(--s-space-16);
+  transform: translateY(-50%);
+}
+
+.resource-list-item__checkbox {
+  position: absolute;
+  top: 50%;
+  right: var(--s-space-16);
+  display: flex;
+  width: 1.25rem;
+  height: 1.25rem;
+  justify-content: center;
+  align-items: center;
+  border: 0.125rem solid var(--s-icon-default);
+  border-radius: var(--s-border-radius-s);
+  transform: translateY(-50%);
+}
+
+@media (--from-tablet) {
+
+.resource-list-item__checkbox {
+    right: auto;
+    left: var(--s-space-16)
+}
+  }
+
+.resource-list-item__checkbox-icon {
+  display: inline-flex;
+  width: 1.0625rem;
+  height: 1.0625rem;
+}
+
+.resource-list-item__checkbox-icon > *::part(icon) {
+    width: 1.0625rem;
+    height: 1.0625rem;
+  }
+
+.resource-list-item__meta {
+  position: absolute;
+  top: calc(var(--s-space-12) + var(--s-space-4));
+  right: var(--s-space-16);
+  color: var(--s-text-subdued);
+  font-size: var(--s-font-size-sm);
+}

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

@@ -0,0 +1,303 @@
+import { Component, Element, Event, h, Host, Prop, } from "@stencil/core";
+import classnames from "classnames";
+export class FlipResourceListItem {
+  constructor() {
+    this.checked = false;
+    this.menuTriggerLabel = "Options";
+    this.onClick = () => {
+      if (!this.selectable) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.valueChange.emit(this.checked);
+    };
+    this.onMenuTriggerClick = (event) => {
+      if (this.disabled && !Boolean(this.href)) {
+        event.stopPropagation();
+      }
+    };
+  }
+  componentDidLoad() {
+    this.forceAvatarProps();
+    this.forceThumbnailProps();
+  }
+  forceAvatarProps() {
+    const avatarEl = this.el.querySelector("flip-avatar");
+    if (!Boolean(avatarEl)) {
+      return;
+    }
+    avatarEl.removeAttribute("interactive");
+    avatarEl.removeAttribute("show-label");
+    avatarEl.removeAttribute("variant");
+    avatarEl.setAttribute("size", "l");
+  }
+  forceThumbnailProps() {
+    const thumbnailEl = this.el.querySelector("flip-thumbnail");
+    if (!Boolean(thumbnailEl)) {
+      return;
+    }
+    thumbnailEl.setAttribute("format", "landscape");
+    if (!["s", "m"].includes(thumbnailEl.getAttribute("size"))) {
+      thumbnailEl.setAttribute("size", "m");
+    }
+  }
+  render() {
+    const Tag = Boolean(this.href) && !this.selectable ? "a" : "button";
+    const disabled = this.disabled && !Boolean(this.href);
+    const hasMenu = Boolean(this.menuTriggerId);
+    const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;
+    const showMeta = Boolean(this.meta) && !this.selectable;
+    const ariaChecked = this.selectable ? String(this.checked) : undefined;
+    const role = this.selectable ? "checkbox" : undefined;
+    const className = classnames("resource-list-item", {
+      "resource-list-item--checked": this.checked,
+      "resource-list-item--has-menu": hasMenu,
+      "resource-list-item--hide-divider": this.hideDivider,
+      "resource-list-item--selectable": this.selectable,
+    });
+    return (h(Host, { role: "row" },
+      h("div", { class: className, role: "gridcell" },
+        h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: disabled, onClick: this.onClick, role: role, tabIndex: 0 },
+          Boolean(this.media) && (h("span", { class: "resource-list-item__media", innerHTML: this.media })),
+          h("span", { class: "resource-list-item__label-container" },
+            h("span", { class: "resource-list-item__label", id: "label" }, this.label),
+            this.description && (h("span", { class: "resource-list-item__description" }, this.description)))),
+        this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" },
+          h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("flip-icon-check-strong", null))))),
+        showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)),
+        showMenu && (h("flip-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<flip-icon-more-horizontal></flip-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))));
+  }
+  static get is() { return "flip-resource-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-resource-list-item.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-resource-list-item.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "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
+    },
+    "hideDivider": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-divider",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "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
+    },
+    "media": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "media",
+      "reflect": false
+    },
+    "menuTriggerId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "menu-trigger-id",
+      "reflect": false
+    },
+    "menuTriggerLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "menu-trigger-label",
+      "reflect": false,
+      "defaultValue": "\"Options\""
+    },
+    "meta": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "meta",
+      "reflect": false
+    },
+    "selectable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selectable",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,64 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-resource-list-item.mdx";
+export default {
+  component: "flip-resource-list-item",
+  parameters: {
+    docs: {
+      page: Docs,
+      source: {
+        code: `<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>"
+  menu-trigger-id="trigger"
+>
+</flip-resource-list-item>
+
+<flip-popover label="Popover" popover-id="popover" trigger="trigger">
+  <flip-action-list>
+    <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>
+</flip-popover>`,
+      },
+    },
+  },
+  title: "Components/FlipResourceListItem",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  const popover = document.createElement("flip-popover");
+  const element = generateStoryElement("flip-resource-list-item", args);
+  container.setAttribute("aria-label", "List");
+  container.setAttribute("role", "grid");
+  popover.label = "Options";
+  popover.popoverId = "popover";
+  popover.trigger = "trigger";
+  popover.innerHTML = `
+    <flip-action-list>
+      <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>
+  `;
+  container.append(element, popover);
+  return container;
+};
+export const FlipResourceListItem = Template.bind({});
+FlipResourceListItem.args = {
+  description: "With a description",
+  label: "This is a resource item",
+  media: `<flip-avatar label="Jane Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144" size="s"></flip-avatar>`,
+  menuTriggerId: "trigger",
+};

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

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.tab {
+  display: none;
+  width: 100%;
+  padding: var(--s-space-8);
+}
+
+.tab--active {
+  display: block;
+}

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

@@ -0,0 +1,71 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipTab {
+  render() {
+    const className = classnames("tab", { "tab--active": this.active });
+    return (h(Host, { "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1 },
+      h("div", { class: className },
+        h("slot", null))));
+  }
+  static get is() { return "flip-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-tab.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-tab.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "tabId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tab-id",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,22 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-tab.mdx";
+export default {
+  component: "flip-tab",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipTab",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-tab", args);
+  element.innerHTML = `Content`;
+  return element;
+};
+export const FlipTab = Template.bind({});
+FlipTab.args = {
+  active: true,
+  label: "Label",
+  tabId: "tab-id",
+};