@getflip/swirl-components 0.1.0

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

@@ -0,0 +1,30 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-action-list-item.mdx";
+export default {
+  component: "flip-action-list-item",
+  decorators: [
+    (story) => {
+      const container = document.createElement("div");
+      container.setAttribute("role", "menu");
+      container.append(story());
+      return container;
+    },
+  ],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipActionListItem",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-action-list-item", args);
+  return element;
+};
+export const FlipActionListItem = Template.bind({});
+FlipActionListItem.args = {
+  description: "Description of the action list item",
+  icon: `<flip-icon-mention></flip-icon-mention>`,
+  label: "This is an action",
+  suffix: `<flip-icon-chevron-right></flip-icon-chevron-right>`,
+};

package/dist/collection/components/flip-action-list-section/flip-action-list-section.css

@@ -0,0 +1,22 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.action-list-section {
+  background-color: var(--s-surface-overlay-default);
+}
+
+.action-list-section__label {
+  display: block;
+  width: 100%;
+  padding: var(--s-space-8) var(--s-space-16);
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  color: var(--s-text-subdued);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-base);
+  text-align: left;
+}

package/dist/collection/components/flip-action-list-section/flip-action-list-section.js

@@ -0,0 +1,40 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+/**
+ * @slot slot - The action list item components
+ */
+export class FlipActionListSection {
+  render() {
+    return (h(Host, null,
+      h("div", { "aria-labelledby": "label", class: "action-list-section", role: "group" },
+        h("span", { class: "action-list-section__label", id: "label" }, this.label),
+        h("div", { class: "action-list-section__items" },
+          h("slot", null)))));
+  }
+  static get is() { return "flip-action-list-section"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-action-list-section.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-action-list-section.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
+    }
+  }; }
+}

package/dist/collection/components/flip-action-list-section/flip-action-list-section.stories.js

@@ -0,0 +1,27 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-action-list-section.mdx";
+export default {
+  component: "flip-action-list-section",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipActionListSection",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  container.setAttribute("role", "menu");
+  const element = generateStoryElement("flip-action-list-section", args);
+  element.innerHTML = `
+    <flip-action-list-item label="This is an action"></flip-action-list-item>
+    <flip-action-list-item label="This is an action"></flip-action-list-item>
+    <flip-action-list-item label="This is an action"></flip-action-list-item>
+  `;
+  container.append("\n  ", element, "\n");
+  return container;
+};
+export const FlipActionListSection = Template.bind({});
+FlipActionListSection.args = {
+  label: "Section label",
+};

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

@@ -0,0 +1,210 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.avatar {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
+
+.avatar--has-icon {
+  color: var(--s-icon-default);
+  background-color: var(--s-surface-raised-default);
+}
+
+.avatar--has-initials {
+  padding-right: 0;
+  padding-left: 0;
+  color: #fff;
+}
+
+.avatar--interactive {
+  cursor: pointer;
+}
+
+.avatar--interactive:focus {
+    outline-color: var(--s-focus-default);
+  }
+
+.avatar--size-xs {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.75rem;
+}
+
+.avatar--size-xs.avatar--has-icon {
+    padding-right: 0.4375rem;
+    padding-left: 0.4375rem;
+  }
+
+.avatar--size-xs.avatar--variant-square,
+  .avatar--size-xs.avatar--variant-square .avatar__image,
+  .avatar--size-xs.avatar--variant-square .avatar__initials {
+    border-radius: 0.5rem;
+  }
+
+.avatar--size-s {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.75rem;
+}
+
+.avatar--size-s.avatar--has-icon {
+    padding-right: var(--s-space-8);
+    padding-left: var(--s-space-8);
+  }
+
+.avatar--size-s.avatar--variant-square,
+  .avatar--size-s.avatar--variant-square .avatar__image,
+  .avatar--size-s.avatar--variant-square .avatar__initials {
+    border-radius: 0.5rem;
+  }
+
+.avatar--size-m {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: var(--s-font-size-base);
+}
+
+.avatar--size-m.avatar--has-icon {
+    padding-right: 0.625rem;
+    padding-left: 0.625rem;
+  }
+
+.avatar--size-m.avatar--variant-square,
+  .avatar--size-m.avatar--variant-square .avatar__image,
+  .avatar--size-m.avatar--variant-square .avatar__initials {
+    border-radius: 0.625rem;
+  }
+
+.avatar--size-l {
+  width: 3rem;
+  height: 3rem;
+  font-size: var(--s-font-size-lg);
+}
+
+.avatar--size-l.avatar--has-icon {
+    padding-right: var(--s-space-12);
+    padding-left: var(--s-space-12);
+  }
+
+.avatar--size-l.avatar--variant-square,
+  .avatar--size-l.avatar--variant-square .avatar__image,
+  .avatar--size-l.avatar--variant-square .avatar__initials {
+    border-radius: 0.75rem;
+  }
+
+.avatar--size-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: var(--s-font-size-xl);
+}
+
+.avatar--size-xl.avatar--has-icon {
+    padding-right: var(--s-space-16);
+    padding-left: var(--s-space-16);
+  }
+
+.avatar--size-xl.avatar--variant-square,
+  .avatar--size-xl.avatar--variant-square .avatar__image,
+  .avatar--size-xl.avatar--variant-square .avatar__initials {
+    border-radius: 1rem;
+  }
+
+.avatar--size-2xl {
+  width: 9rem;
+  height: 9rem;
+  font-size: 3.375rem;
+}
+
+.avatar--size-2xl.avatar--has-icon {
+    padding-right: var(--s-space-32);
+    padding-left: var(--s-space-32);
+  }
+
+.avatar--size-2xl.avatar--variant-square,
+  .avatar--size-2xl.avatar--variant-square .avatar__image,
+  .avatar--size-2xl.avatar--variant-square .avatar__initials {
+    border-radius: 2.25rem;
+  }
+
+.avatar__image {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.avatar__image > img {
+    width: 100%;
+    height: 100%;
+  }
+
+.avatar__icon {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+}
+
+.avatar__icon > * {
+    width: 100%;
+    height: 100%;
+  }
+
+.avatar__icon > *::part(icon) {
+    width: 100%;
+    height: 100%;
+  }
+
+.avatar__initials {
+  display: inline-flex;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding-right: 0.0625rem;
+  padding-left: 0.0625rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background-color: var(--s-decorative-6-default);
+}
+
+.avatar__initials > span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+.avatar__badge {
+  position: absolute;
+  bottom: 0;
+  left: 55%;
+  display: inline-flex;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  transform: translate3d(0, 25%, 0);
+}
+
+.avatar__badge--position-top {
+  top: 0;
+  bottom: auto;
+  transform: translate3d(0, -25%, 0);
+}
+
+.avatar__label {
+  margin-top: var(--s-space-4);
+  color: var(--s-icon-default);
+  font-size: var(--s-font-size-sm);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-sm);
+  text-align: center;
+}

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

@@ -0,0 +1,278 @@
+import { Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
+import classnames from "classnames";
+const flipAvatarSizeMappings = {
+  xs: 28,
+  s: 32,
+  m: 40,
+  l: 48,
+  xl: 64,
+  "2xl": 144,
+};
+export class FlipAvatar {
+  constructor() {
+    this.badgePosition = "bottom";
+    this.interactive = false;
+    this.showLabel = false;
+    this.size = "m";
+    this.variant = "round";
+    this.setImageAvailable = () => {
+      this.imageAvailable = true;
+    };
+    this.setImageUnavailable = () => {
+      this.imageAvailable = false;
+    };
+    this.onKeydown = (event) => {
+      // The interactive avatar is activated by the space key on the keyup event,
+      // but the default action for space is already triggered on keydown. It
+      // needs to be prevented to stop scrolling the page before activating the
+      // avatar.
+      if (event.code === "Space") {
+        event.preventDefault();
+      }
+      else if (event.code === "Enter") {
+        event.preventDefault();
+        this.element.click();
+      }
+    };
+    this.onKeyup = (event) => {
+      if (event.code === "Space") {
+        event.preventDefault();
+        this.element.click();
+      }
+    };
+  }
+  watchSrcProp() {
+    this.imageAvailable = undefined;
+  }
+  render() {
+    const showImage = Boolean(this.src) &&
+      (this.imageAvailable || this.imageAvailable === undefined);
+    const showInitials = !showImage && Boolean(this.initials);
+    const showIcon = !showImage && !showInitials && Boolean(this.icon);
+    const showFallbackIcon = !showImage && !showInitials && !showIcon;
+    const showBadge = Boolean(this.badge) && this.size === "m";
+    const role = this.interactive ? "button" : "img";
+    const className = classnames("avatar", `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+      "avatar--has-icon": showIcon || showFallbackIcon,
+      "avatar--has-initials": showInitials,
+      "avatar--interactive": this.interactive,
+    });
+    const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
+    return (h(Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined },
+      h("span", { class: className, part: "avatar" },
+        showImage && (h("span", { class: "avatar__image" },
+          h("img", { alt: "", height: flipAvatarSizeMappings[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: flipAvatarSizeMappings[this.size] }))),
+        showInitials && (h("span", { class: "avatar__initials" },
+          h("span", null, this.initials))),
+        showIcon && h("span", { class: "avatar__icon", innerHTML: this.icon }),
+        showFallbackIcon && (h("span", { class: "avatar__icon" },
+          h("flip-icon-person", null))),
+        showBadge && (h("span", { class: badgeClassName, innerHTML: this.badge }))),
+      this.showLabel && (h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
+  }
+  static get is() { return "flip-avatar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-avatar.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-avatar.css"]
+  }; }
+  static get properties() { return {
+    "badge": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "badge",
+      "reflect": false
+    },
+    "badgePosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipAvatarBadgePosition",
+        "resolved": "\"bottom\" | \"top\"",
+        "references": {
+          "FlipAvatarBadgePosition": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "badge-position",
+      "reflect": false,
+      "defaultValue": "\"bottom\""
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "initials": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "initials",
+      "reflect": false
+    },
+    "interactive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "interactive",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "showLabel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-label",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipAvatarSize",
+        "resolved": "\"2xl\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+        "references": {
+          "FlipAvatarSize": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"m\""
+    },
+    "src": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "src",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipAvatarVariant",
+        "resolved": "\"round\" | \"square\"",
+        "references": {
+          "FlipAvatarVariant": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"round\""
+    }
+  }; }
+  static get states() { return {
+    "imageAvailable": {}
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "src",
+      "methodName": "watchSrcProp"
+    }]; }
+}

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

@@ -0,0 +1,40 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-avatar.mdx";
+export default {
+  argTypes: {
+    badge: {
+      description: 'Visible with default size "m".',
+      table: {
+        type: {
+          detail: 'e.g. <flip-badge aria-label="3 new messages" label="3" size="s"></flip-badge>',
+          summary: "flip-badge",
+        },
+      },
+    },
+    icon: {
+      table: {
+        type: {
+          detail: "e.g. <flip-icon-close></flip-icon-close>",
+          summary: "flip-icon-*",
+        },
+      },
+    },
+  },
+  component: "flip-avatar",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipAvatar",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-avatar", args);
+  return element;
+};
+export const FlipAvatar = Template.bind({});
+FlipAvatar.args = {
+  badge: '<flip-badge aria-label="3 new messages" label="3" size="s"></flip-badge>',
+  label: "John Doe",
+  src: "https://picsum.photos/id/433/144/144",
+};

package/dist/collection/components/flip-avatar-group/flip-avatar-group.css

@@ -0,0 +1,46 @@
+:host {
+  display: inline-flex;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.avatar-group {
+  position: relative;
+  display: inline-grid;
+  grid-template-rows: repeat(8, 1fr);
+  grid-template-columns: repeat(8, 1fr);
+}
+
+.avatar-group ::slotted(*:first-of-type) {
+    z-index: 1;
+    display: inline-flex;
+    border: 0.25rem solid var(--s-background-default);
+    border-radius: 50%;
+    grid-column-start: 1;
+    grid-column-end: 7;
+    grid-row-start: 3;
+    grid-row-end: 9;
+  }
+
+.avatar-group ::slotted(*:nth-of-type(2)) {
+    z-index: 0;
+    display: inline-flex;
+    border: 0.25rem solid var(--s-background-default);
+    border-radius: 50%;
+    grid-column-start: 3;
+    grid-column-end: 9;
+    grid-row-start: 1;
+    grid-row-end: 7;
+  }
+
+.avatar-group__badge {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
+}