@getflip/swirl-components 0.1.0

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

@@ -0,0 +1,44 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+/**
+ * @slot slot - Your avatar components
+ */
+export class FlipAvatarGroup {
+  render() {
+    const className = classnames("avatar-group", {
+      "avatar-group--has-badge": Boolean(this.badge),
+    });
+    const badgeClassName = classnames("avatar-group__badge");
+    return (h(Host, null,
+      h("div", { class: className, role: "group" },
+        h("slot", null),
+        this.badge && (h("span", { class: badgeClassName, innerHTML: this.badge })))));
+  }
+  static get is() { return "flip-avatar-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-avatar-group.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-avatar-group.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
+    }
+  }; }
+}

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

@@ -0,0 +1,33 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-avatar-group.mdx";
+export default {
+  argTypes: {
+    badge: {
+      table: {
+        type: {
+          detail: 'e.g. <flip-badge aria-label="3 new messages" label="3" size="s"><flip-badge>',
+          summary: "flip-badge",
+        },
+      },
+    },
+  },
+  component: "flip-avatar-group",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipAvatarGroup",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-avatar-group", args);
+  element.innerHTML = `
+    <flip-avatar label="Jane Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144" size="s"></flip-avatar>
+    <flip-avatar label="John Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/b.svg?size=144" size="s"></flip-avatar>
+  `;
+  return element;
+};
+export const FlipAvatarGroup = Template.bind({});
+FlipAvatarGroup.args = {
+  badge: `<flip-badge aria-label="3 new messages" label="3"></flip-badge>`,
+};

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

@@ -0,0 +1,121 @@
+:host {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.badge {
+  display: inline-flex;
+  max-width: 100%;
+  justify-content: center;
+  align-items: center;
+  border: 0.25rem solid var(--s-background-default);
+  border-radius: 2rem;
+  color: var(--s-text-on-status);
+  font-size: var(--s-font-size-sm);
+  font-weight: var(--s-font-weight-medium);
+}
+
+.badge--size-s {
+  min-width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.75rem;
+}
+
+.badge--size-s .badge__label {
+    padding-right: 0.1875rem;
+    padding-left: 0.1875rem;
+  }
+
+.badge--size-s .badge__icon > *::part(icon) {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+
+.badge--size-m {
+  min-width: 2rem;
+  height: 2rem;
+}
+
+.badge--size-m .badge__label {
+    padding-right: 0.375rem;
+    padding-left: 0.375rem;
+  }
+
+.badge--has-icon {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.badge--intent-critical {
+  background-color: var(--s-surface-critical-default);
+}
+
+.badge--intent-decorative-1 {
+  background-color: var(--s-decorative-1-default);
+}
+
+.badge--intent-decorative-2 {
+  background-color: var(--s-decorative-2-default);
+}
+
+.badge--intent-decorative-3 {
+  color: var(--s-text-default);
+  background-color: var(--s-decorative-3-default);
+}
+
+.badge--intent-decorative-4 {
+  color: var(--s-text-default);
+  background-color: var(--s-decorative-4-default);
+}
+
+.badge--intent-decorative-5 {
+  background-color: var(--s-decorative-5-default);
+}
+
+.badge--intent-decorative-6 {
+  background-color: var(--s-decorative-6-default);
+}
+
+.badge--intent-decorative-7 {
+  background-color: var(--s-decorative-7-default);
+}
+
+.badge--variant-dot {
+  width: 1.25rem;
+  min-width: 0;
+  height: 1.25rem;
+}
+
+.badge--variant-dot .badge__label {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+.badge--variant-dot .badge__label,
+  .badge--variant-dot .badge__icon {
+    display: none;
+  }
+
+.badge__icon {
+  display: inline-flex;
+}
+
+.badge__icon > *::part(icon) {
+    width: 1rem;
+    height: 1rem;
+  }
+
+.badge__label {
+  display: inline-flex;
+  overflow: hidden;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,128 @@
+import classnames from "classnames";
+import { Component, h, Host, Prop } from "@stencil/core";
+export class FlipBadge {
+  constructor() {
+    this.intent = "critical";
+    this.size = "m";
+    this.variant = "default";
+  }
+  render() {
+    const className = classnames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
+      "badge--has-icon": this.icon,
+    });
+    return (h(Host, { role: "status" },
+      h("span", { class: className },
+        this.icon && h("span", { class: "badge__icon", innerHTML: this.icon }),
+        this.icon === undefined && (h("span", { class: "badge__label" }, this.label)))));
+  }
+  static get is() { return "flip-badge"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-badge.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-badge.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "intent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipBadgeIntent",
+        "resolved": "\"critical\" | \"decorative-1\" | \"decorative-2\" | \"decorative-3\" | \"decorative-4\" | \"decorative-5\" | \"decorative-6\" | \"decorative-7\"",
+        "references": {
+          "FlipBadgeIntent": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "intent",
+      "reflect": false,
+      "defaultValue": "\"critical\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipBadgeSize",
+        "resolved": "\"m\" | \"s\"",
+        "references": {
+          "FlipBadgeSize": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"m\""
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipBadgeVariant",
+        "resolved": "\"default\" | \"dot\"",
+        "references": {
+          "FlipBadgeVariant": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    }
+  }; }
+}

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

@@ -0,0 +1,31 @@
+import { generateStoryElement } from "../../utils";
+// @ts-ignore
+import Docs from "./flip-badge.mdx";
+export default {
+  argTypes: {
+    icon: {
+      table: {
+        type: {
+          detail: "e.g. <flip-icon-close></flip-icon-close>",
+          summary: "flip-icon-*",
+        },
+      },
+    },
+  },
+  component: "flip-badge",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipBadge",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-badge", args);
+  return element;
+};
+export const FlipBadge = Template.bind({});
+FlipBadge.args = {
+  "aria-label": "3 new messages",
+  label: "3",
+};

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

@@ -0,0 +1,146 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.banner {
+  display: flex;
+  max-width: 100%;
+  padding: var(--s-space-12);
+  align-items: flex-start;
+}
+
+.banner:focus {
+    outline-color: var(--s-focus-default);
+  }
+
+@media (min-width: 768px) {
+
+.banner {
+    padding: var(--s-space-16)
+}
+  }
+
+.banner--intent-default .banner__icon,
+  .banner--intent-default .banner__content,
+  .banner--intent-default .banner__action-button,
+  .banner--intent-default .banner__dismiss-button,
+  .banner--intent-critical .banner__icon,
+  .banner--intent-critical .banner__content,
+  .banner--intent-critical .banner__action-button,
+  .banner--intent-critical .banner__dismiss-button,
+  .banner--intent-success .banner__icon,
+  .banner--intent-success .banner__content,
+  .banner--intent-success .banner__action-button,
+  .banner--intent-success .banner__dismiss-button,
+  .banner--intent-info .banner__icon,
+  .banner--intent-info .banner__content,
+  .banner--intent-info .banner__action-button,
+  .banner--intent-info .banner__dismiss-button {
+    color: var(--s-text-on-status);
+  }
+
+.banner--intent-default {
+  background-color: var(--s-surface-neutral-default);
+}
+
+.banner--intent-critical {
+  background-color: var(--s-surface-critical-default);
+}
+
+.banner--intent-success {
+  background-color: var(--s-surface-success-default);
+}
+
+.banner--intent-info {
+  background-color: var(--s-surface-info-default);
+}
+
+.banner--intent-warning {
+  background-color: var(--s-surface-warning-default);
+}
+
+.banner--intent-warning .banner__icon {
+    color: var(--s-icon-strong);
+  }
+
+.banner--intent-warning .banner__content,
+  .banner--intent-warning .banner__action-button,
+  .banner--intent-warning .banner__dismiss-button {
+    color: var(--s-text-default);
+  }
+
+@media (min-width: 375px) {
+
+.banner--has-icon .banner__content {
+      padding-top: var(--s-space-2)
+  }
+    }
+
+.banner__icon {
+  display: none;
+  margin-right: var(--s-space-8);
+  color: var(--s-icon-on-status);
+}
+
+@media (min-width: 375px) {
+
+.banner__icon {
+    display: inline-flex
+}
+  }
+
+.banner__content {
+  min-height: 1.5rem;
+  margin-right: var(--s-space-12);
+  flex-grow: 1;
+  line-height: var(--s-line-height-base);
+}
+
+.banner__controls {
+  display: inline-flex;
+  margin-left: var(--s-space-16);
+  align-items: center;
+  gap: var(--s-space-16);
+  line-height: var(--s-line-height-base);
+}
+
+@media (min-width: 768px) {
+
+.banner__controls {
+    gap: var(--s-space-24)
+}
+  }
+
+.banner__action-button,
+.banner__dismiss-button {
+  display: inline-flex;
+  overflow: hidden;
+  max-width: 7rem;
+  height: 1.5rem;
+  padding: 0;
+  flex-shrink: 0;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  font: inherit;
+  font-weight: var(--s-font-weight-semibold);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.banner__action-button:focus, .banner__dismiss-button:focus {
+    outline-color: var(--s-focus-default);
+  }
+
+@media (min-width: 768px) {
+
+.banner__action-button,
+.banner__dismiss-button {
+    max-width: 12rem
+}
+  }