@getflip/swirl-components 0.85.0 → 0.86.0

package/dist/collection/collection-manifest.json

@@ -60,6 +60,13 @@
     "./components/swirl-date-input/swirl-date-input.js",
     "./components/swirl-date-picker/swirl-date-picker.js",
     "./components/swirl-description-list/swirl-description-list.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-clap.js",
+    "./components/swirl-emoji/swirl-emoji.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-happy.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-idea.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-love.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-sad.js",
+    "./components/swirl-emoji/emojis/swirl-emoji-thumbs-up.js",
     "./components/swirl-empty-state/swirl-empty-state.js",
     "./components/swirl-file-uploader/swirl-file-uploader.js",
     "./components/swirl-file-viewer/swirl-file-viewer.js",

package/dist/collection/components/swirl-button/swirl-button.css

@@ -39,7 +39,7 @@
 
 .button:disabled {
     color: var(--s-text-disabled);
-    background-color: var(--swirl-ghost-button-background-default);
+    background-color: var(--swirl-ghost-button-background-disabled);
     cursor: default;
   }
 
@@ -100,19 +100,19 @@
 
 .button--variant-flat {
   color: var(--s-text-default);
-  background-color: var(--s-action-neutral-default);
+  background-color: var(--swirl-flat-button-background-default);
 }
 
 .button--variant-flat:hover {
-    background-color: var(--s-action-neutral-hovered);
+    background-color: var(--swirl-flat-button-background-hovered);
   }
 
 .button--variant-flat:active {
-    background-color: var(--s-action-neutral-pressed);
+    background-color: var(--swirl-flat-button-background-pressed);
   }
 
 .button--variant-flat:disabled {
-    background-color: var(--s-action-neutral-disabled);
+    background-color: var(--swirl-flat-button-background-disabled);
   }
 
 .button--variant-flat.button--intent-primary:not(:disabled) {

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-clap.js

@@ -0,0 +1,70 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlEmojiClap {
+  constructor() {
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = classnames("emoji", `emoji--size-${this.size}`);
+    return (h(Fragment, null, this.size === 16 && (h("img", { alt: this.label, class: className, height: "16", src: "/emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { alt: this.label, class: className, height: "20", src: "/emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { alt: this.label, class: className, height: "24", src: "/emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { alt: this.label, class: className, height: "32", src: "/emojis/Clap32.png", width: "32" }))));
+  }
+  static get is() { return "swirl-emoji-clap"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-emoji.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-emoji.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,
+        "defaultValue": "\"\""
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlEmojiSize",
+          "resolved": "16 | 20 | 24 | 32",
+          "references": {
+            "SwirlEmojiSize": {
+              "location": "import",
+              "path": "../swirl-emoji.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-happy.js

@@ -0,0 +1,70 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlEmojiHappy {
+  constructor() {
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = classnames("emoji", `emoji--size-${this.size}`);
+    return (h(Fragment, null, this.size === 16 && (h("img", { alt: this.label, class: className, height: "16", src: "/emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { alt: this.label, class: className, height: "20", src: "/emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { alt: this.label, class: className, height: "24", src: "/emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { alt: this.label, class: className, height: "32", src: "/emojis/Happy32.png", width: "32" }))));
+  }
+  static get is() { return "swirl-emoji-happy"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-emoji.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-emoji.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,
+        "defaultValue": "\"\""
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlEmojiSize",
+          "resolved": "16 | 20 | 24 | 32",
+          "references": {
+            "SwirlEmojiSize": {
+              "location": "import",
+              "path": "../swirl-emoji.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-idea.js

@@ -0,0 +1,70 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlEmojiIdea {
+  constructor() {
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = classnames("emoji", `emoji--size-${this.size}`);
+    return (h(Fragment, null, this.size === 16 && (h("img", { alt: this.label, class: className, height: "16", src: "/emojis/Idea16.png", width: "16" })), this.size === 20 && (h("img", { alt: this.label, class: className, height: "20", src: "/emojis/Idea20.png", width: "20" })), this.size === 24 && (h("img", { alt: this.label, class: className, height: "24", src: "/emojis/Idea24.png", width: "24" })), this.size === 32 && (h("img", { alt: this.label, class: className, height: "32", src: "/emojis/Idea32.png", width: "32" }))));
+  }
+  static get is() { return "swirl-emoji-idea"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-emoji.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-emoji.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,
+        "defaultValue": "\"\""
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlEmojiSize",
+          "resolved": "16 | 20 | 24 | 32",
+          "references": {
+            "SwirlEmojiSize": {
+              "location": "import",
+              "path": "../swirl-emoji.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-love.js

@@ -0,0 +1,70 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlEmojiLove {
+  constructor() {
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = classnames("emoji", `emoji--size-${this.size}`);
+    return (h(Fragment, null, this.size === 16 && (h("img", { alt: this.label, class: className, height: "16", src: "/emojis/Love16.png", width: "16" })), this.size === 20 && (h("img", { alt: this.label, class: className, height: "20", src: "/emojis/Love20.png", width: "20" })), this.size === 24 && (h("img", { alt: this.label, class: className, height: "24", src: "/emojis/Love24.png", width: "24" })), this.size === 32 && (h("img", { alt: this.label, class: className, height: "32", src: "/emojis/Love32.png", width: "32" }))));
+  }
+  static get is() { return "swirl-emoji-love"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-emoji.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-emoji.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,
+        "defaultValue": "\"\""
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlEmojiSize",
+          "resolved": "16 | 20 | 24 | 32",
+          "references": {
+            "SwirlEmojiSize": {
+              "location": "import",
+              "path": "../swirl-emoji.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-sad.js

@@ -0,0 +1,70 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlEmojiSad {
+  constructor() {
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = classnames("emoji", `emoji--size-${this.size}`);
+    return (h(Fragment, null, this.size === 16 && (h("img", { alt: this.label, class: className, height: "16", src: "/emojis/Sad16.png", width: "16" })), this.size === 20 && (h("img", { alt: this.label, class: className, height: "20", src: "/emojis/Sad20.png", width: "20" })), this.size === 24 && (h("img", { alt: this.label, class: className, height: "24", src: "/emojis/Sad24.png", width: "24" })), this.size === 32 && (h("img", { alt: this.label, class: className, height: "32", src: "/emojis/Sad32.png", width: "32" }))));
+  }
+  static get is() { return "swirl-emoji-sad"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-emoji.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-emoji.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,
+        "defaultValue": "\"\""
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlEmojiSize",
+          "resolved": "16 | 20 | 24 | 32",
+          "references": {
+            "SwirlEmojiSize": {
+              "location": "import",
+              "path": "../swirl-emoji.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-emoji/emojis/swirl-emoji-thumbs-up.js

@@ -0,0 +1,70 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlEmojiThumbsUp {
+  constructor() {
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = classnames("emoji", `emoji--size-${this.size}`);
+    return (h(Fragment, null, this.size === 16 && (h("img", { alt: this.label, class: className, height: "16", src: "/emojis/ThumbsUp16.png", width: "16" })), this.size === 20 && (h("img", { alt: this.label, class: className, height: "20", src: "/emojis/ThumbsUp20.png", width: "20" })), this.size === 24 && (h("img", { alt: this.label, class: className, height: "24", src: "/emojis/ThumbsUp24.png", width: "24" })), this.size === 32 && (h("img", { alt: this.label, class: className, height: "32", src: "/emojis/ThumbsUp32.png", width: "32" }))));
+  }
+  static get is() { return "swirl-emoji-thumbs-up"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-emoji.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-emoji.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,
+        "defaultValue": "\"\""
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlEmojiSize",
+          "resolved": "16 | 20 | 24 | 32",
+          "references": {
+            "SwirlEmojiSize": {
+              "location": "import",
+              "path": "../swirl-emoji.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-emoji/swirl-emoji.css

@@ -0,0 +1,3 @@
+:host {
+  display: inline-flex;
+}

package/dist/collection/components/swirl-emoji/swirl-emoji.js

@@ -0,0 +1,86 @@
+import { h, Host } from "@stencil/core";
+export class SwirlEmoji {
+  constructor() {
+    this.label = "";
+    this.name = undefined;
+    this.size = 24;
+  }
+  render() {
+    const Tag = `swirl-emoji-${this.name}`;
+    return (h(Host, null, h(Tag, { label: this.label, size: this.size })));
+  }
+  static get is() { return "swirl-emoji"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-emoji.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-emoji.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,
+        "defaultValue": "\"\""
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlEmojiSize",
+          "resolved": "16 | 20 | 24 | 32",
+          "references": {
+            "SwirlEmojiSize": {
+              "location": "import",
+              "path": "./swirl-emoji.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-emoji/swirl-emoji.spec.js

@@ -0,0 +1,17 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlEmojiClap } from "./emojis/swirl-emoji-clap";
+describe("swirl-emoji", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [SwirlEmojiClap],
+      html: `<swirl-emoji-clap></swirl-emoji-clap>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-emoji-clap>
+        <mock:shadow-root>
+          <img class="emoji emoji--size-24" height="24" width="24" src="/emojis/Clap24.png" alt="">
+        </mock:shadow-root>
+      </swirl-emoji-clap>
+    `);
+  });
+});

package/dist/collection/components/swirl-emoji/swirl-emoji.stories.js

@@ -0,0 +1,28 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-emoji.mdx";
+import EmojisJSON from "../../../emojis.json";
+export default {
+  argTypes: {
+    name: {
+      control: "select",
+      options: Object.values(EmojisJSON).map((emoji) => emoji.name),
+    },
+  },
+  component: "swirl-emoji",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlEmoji",
+};
+const Template = (args) => {
+  const element = generateStoryElement(`swirl-emoji`, args);
+  return element;
+};
+export const SwirlEmoji = Template.bind({});
+SwirlEmoji.args = {
+  name: "clap",
+  size: "24",
+};

package/dist/collection/components/swirl-emoji/swirl-emoji.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/swirl-icon/swirl-icon.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-export class SwirlHeading {
+export class SwirlIcon {
   constructor() {
     this.glyph = undefined;
     this.size = 24;