@getflip/swirl-components 0.1.0

package/dist/collection/components/flip-theme-provider/flip-theme-provider.js

@@ -0,0 +1,253 @@
+import { Component, h, Host, Method, Prop, Watch } from "@stencil/core";
+import { hsla, parseToHsla, toRgba } from "color2k";
+const preferredThemeStorageKey = "flip-preferred-theme";
+const tenantColorMapping = {
+  "--s-action-primary-default": "primary",
+  "--s-action-primary-hovered": "primaryHovered",
+  "--s-action-primary-pressed": "primaryPressed",
+  "--s-text-on-action-primary": "primaryContrast",
+  "--s-icon-on-action-primary": "primaryContrast",
+  "--s-surface-highlight-default": "secondary",
+  "--s-surface-highlight-hovered": "secondaryHovered",
+  "--s-surface-highlight-pressed": "secondaryPressed",
+  "--s-on-surface-highlight-default": "secondaryHovered",
+  "--s-text-on-surface-highlight": "secondaryContrast",
+  "--s-icon-on-surface-highlight": "secondaryContrast",
+  "--s-text-highlight": "text",
+  "--s-interactive-primary-default": "text",
+  "--s-interactive-primary-hovered": "textHovered",
+  "--s-interactive-primary-pressed": "textPressed",
+};
+export class FlipThemeProvider {
+  componentWillLoad() {
+    this.resolveConfig();
+    this.determineOSTheme();
+    this.updateAppTheme();
+  }
+  watchConfig() {
+    this.resolveConfig();
+    this.determineOSTheme();
+    this.updateAppTheme();
+  }
+  /**
+   * Returns the active app theme.
+   * @returns FlipTheme
+   */
+  async getActiveTheme() {
+    return this.appTheme;
+  }
+  /**
+   * Returns the user's preferred theme stored in local storage.
+   * @returns FlipTheme
+   */
+  async getPreferredTheme() {
+    if (!Boolean(this.resolvedConfig.storage)) {
+      return;
+    }
+    return this.resolvedConfig.storage.getItem(preferredThemeStorageKey);
+  }
+  /**
+   * Sets the user's preferred theme and stores it in local storage. Overrides
+   * the OS theme.
+   */
+  async setPreferredTheme(theme) {
+    if (!Boolean(this.resolvedConfig.storage)) {
+      return;
+    }
+    this.resolvedConfig.storage.setItem(preferredThemeStorageKey, theme);
+    this.updateAppTheme();
+  }
+  /**
+   * Resets the user's preferred theme, using the OS theme instead.
+   */
+  async resetPreferredTheme() {
+    if (!Boolean(this.resolvedConfig.storage)) {
+      return;
+    }
+    this.resolvedConfig.storage.removeItem(preferredThemeStorageKey);
+    this.updateAppTheme();
+  }
+  resolveConfig() {
+    var _a, _b;
+    this.resolvedConfig = Object.assign(Object.assign({}, (this.config || {})), { rootElement: ((_a = this.config) === null || _a === void 0 ? void 0 : _a.rootElement) || document.documentElement, storage: ((_b = this.config) === null || _b === void 0 ? void 0 : _b.storage) || (window === null || window === void 0 ? void 0 : window.localStorage) });
+  }
+  determineOSTheme() {
+    if (!Boolean(window.matchMedia)) {
+      this.osTheme = "light";
+      return;
+    }
+    const darkThemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    this.osTheme = darkThemeMediaQuery.matches ? "dark" : "light";
+    darkThemeMediaQuery.addEventListener("change", (e) => {
+      this.osTheme = e.matches ? "dark" : "light";
+      this.updateAppTheme();
+    });
+  }
+  async updateAppTheme() {
+    this.appTheme = (await this.getPreferredTheme()) || this.osTheme;
+    if (this.appTheme === "dark") {
+      document.documentElement.classList.remove("theme-light");
+      document.documentElement.classList.add("theme-dark");
+    }
+    else {
+      document.documentElement.classList.remove("theme-dark");
+      document.documentElement.classList.add("theme-light");
+    }
+    this.updateTenantVariables();
+  }
+  updateTenantVariables() {
+    var _a;
+    const tenantTheme = (_a = this.resolvedConfig) === null || _a === void 0 ? void 0 : _a.tenantColors;
+    if (!Boolean(tenantTheme)) {
+      this.resetTenantVariables();
+      return;
+    }
+    const rootElement = this.resolvedConfig.rootElement;
+    // generate state colors (hovered, pressed) from base colors
+    const primaryHsla = parseToHsla(tenantTheme.primary);
+    const secondaryHsla = parseToHsla(tenantTheme.secondary);
+    const textHsla = parseToHsla(tenantTheme.text);
+    const primaryHovered = toRgba(hsla(primaryHsla[0], primaryHsla[1] - 0.21, primaryHsla[2] + 0.09, 1));
+    const primaryPressed = toRgba(hsla(primaryHsla[0], primaryHsla[1] - 0.2, primaryHsla[2] + 0.17, 1));
+    const secondaryHovered = toRgba(hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.07, 1));
+    const secondaryPressed = toRgba(hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.15, 1));
+    const textHovered = toRgba(hsla(textHsla[0], textHsla[1] - 0.34, textHsla[2] + 0.1, 1));
+    const textPressed = toRgba(hsla(textHsla[0], textHsla[1] - 0.48, textHsla[2] + 0.2, 1));
+    const tenantThemeWithGeneratedStateColors = Object.assign(Object.assign({}, tenantTheme), { primaryHovered: primaryHovered, primaryPressed: primaryPressed, secondaryHovered: secondaryHovered, secondaryPressed: secondaryPressed, textHovered: textHovered, textPressed: textPressed });
+    // set custom properties for tenant theme colors
+    Object.entries(tenantColorMapping).forEach(([key, value]) => rootElement.style.setProperty(key, tenantThemeWithGeneratedStateColors[value]));
+  }
+  resetTenantVariables() {
+    const rootElement = this.resolvedConfig.rootElement;
+    [
+      ...Object.keys(tenantColorMapping),
+      "primaryHovered",
+      "primaryPressed",
+      "secondaryHovered",
+      "secondaryPressed",
+      "textHovered",
+      "textPressed",
+    ].forEach((key) => rootElement.style.removeProperty(key));
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "flip-theme-provider"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-theme-provider.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-theme-provider.css"]
+  }; }
+  static get properties() { return {
+    "config": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipThemeProviderConfig",
+        "resolved": "{ rootElement?: HTMLElement; storage?: FlipThemeProviderStorage; tenantColors?: FlipThemeProviderTenantColors; }",
+        "references": {
+          "FlipThemeProviderConfig": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get methods() { return {
+    "getActiveTheme": {
+      "complexType": {
+        "signature": "() => Promise<FlipTheme>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FlipTheme": {
+            "location": "local"
+          }
+        },
+        "return": "Promise<FlipTheme>"
+      },
+      "docs": {
+        "text": "Returns the active app theme.",
+        "tags": [{
+            "name": "returns",
+            "text": "FlipTheme"
+          }]
+      }
+    },
+    "getPreferredTheme": {
+      "complexType": {
+        "signature": "() => Promise<FlipTheme>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FlipTheme": {
+            "location": "local"
+          }
+        },
+        "return": "Promise<FlipTheme>"
+      },
+      "docs": {
+        "text": "Returns the user's preferred theme stored in local storage.",
+        "tags": [{
+            "name": "returns",
+            "text": "FlipTheme"
+          }]
+      }
+    },
+    "setPreferredTheme": {
+      "complexType": {
+        "signature": "(theme: FlipTheme) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FlipTheme": {
+            "location": "local"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets the user's preferred theme and stores it in local storage. Overrides\nthe OS theme.",
+        "tags": []
+      }
+    },
+    "resetPreferredTheme": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Resets the user's preferred theme, using the OS theme instead.",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "config",
+      "methodName": "watchConfig"
+    }]; }
+}

package/dist/collection/components/flip-theme-provider/flip-theme-provider.stories.js

@@ -0,0 +1,80 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-theme-provider.mdx";
+export default {
+  component: "flip-theme-provider",
+  parameters: {
+    docs: {
+      inlineStories: false,
+      page: Docs,
+      source: {
+        code: `<flip-theme-provider>
+  <!-- Your app components … -->
+</flip-theme-provider>
+
+<script>
+  const provider = document.querySelector('flip-theme-provider');
+
+  provider.config = {
+    tenantColors: {
+      primary: "rgba(184, 42, 32, 1)",
+      primaryContrast: "rgba(255, 255, 255, 1)",
+      secondary: "rgba(184, 42, 32, 1)",
+      secondaryContrast: "rgba(255, 255, 255, 1)",
+      text: "rgba(218, 31, 61, 1)",
+    }
+  };
+
+  provider.setPreferredTheme('dark');
+</script>`,
+      },
+    },
+  },
+  title: "Components/FlipThemeProvider",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-theme-provider", args);
+  const config = {
+    tenantColors: {
+      primary: "rgba(184, 42, 32, 1)",
+      primaryContrast: "rgba(255, 255, 255, 1)",
+      secondary: "rgba(184, 42, 32, 1)",
+      secondaryContrast: "rgba(255, 255, 255, 1)",
+      text: "rgba(218, 31, 61, 1)",
+    },
+  };
+  const lightModeButton = document.createElement("flip-button");
+  lightModeButton.intent = "primary";
+  lightModeButton.variant = "flat";
+  lightModeButton.label = "Set light mode";
+  lightModeButton.style.marginRight = "1rem";
+  lightModeButton.addEventListener("click", () => {
+    element.setPreferredTheme("light");
+  });
+  const darkModeButton = document.createElement("flip-button");
+  darkModeButton.intent = "primary";
+  darkModeButton.variant = "flat";
+  darkModeButton.label = "Set dark mode";
+  darkModeButton.style.marginRight = "1rem";
+  darkModeButton.addEventListener("click", () => {
+    element.setPreferredTheme("dark");
+  });
+  const tenantButton = document.createElement("flip-button");
+  tenantButton.intent = "primary";
+  tenantButton.variant = "flat";
+  tenantButton.label = "Set tenant theme";
+  tenantButton.style.marginRight = "1rem";
+  tenantButton.addEventListener("click", () => {
+    element.config = config;
+  });
+  const resetButton = document.createElement("flip-button");
+  resetButton.label = "Reset";
+  resetButton.style.marginRight = "1rem";
+  resetButton.addEventListener("click", () => {
+    element.config = { tenantColors: undefined };
+    element.resetPreferredTheme();
+  });
+  element.append(lightModeButton, darkModeButton, tenantButton, resetButton);
+  return element;
+};
+export const FlipThemeProvider = Template.bind({});
+FlipThemeProvider.args = {};

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

@@ -0,0 +1,61 @@
+:host {
+  display: inline-flex;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.thumbnail {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  border-radius: var(--s-border-radius-s);
+  box-shadow: inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1);
+}
+
+.thumbnail--size-s {
+  --flip-thumbnail-size: 2.5rem;
+}
+
+.thumbnail--size-m {
+  --flip-thumbnail-size: 3rem;
+}
+
+.thumbnail--size-l {
+  --flip-thumbnail-size: 4rem;
+}
+
+.thumbnail--format-landscape {
+  width: var(--flip-thumbnail-size);
+  aspect-ratio: 4 / 3;
+}
+
+.thumbnail--format-landscape .thumbnail__image {
+    width: 100%;
+  }
+
+.thumbnail--format-portrait {
+  height: var(--flip-thumbnail-size);
+  aspect-ratio: 3 / 4;
+}
+
+.thumbnail--format-portrait .thumbnail__image {
+    height: 100%;
+  }
+
+.thumbnail--format-square {
+  width: var(--flip-thumbnail-size);
+  height: var(--flip-thumbnail-size);
+}
+
+.thumbnail--format-square .thumbnail__image {
+    width: 100%;
+  }
+
+.thumbnail__image {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}

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

@@ -0,0 +1,102 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipThumbnail {
+  constructor() {
+    this.format = "landscape";
+    this.size = "m";
+  }
+  render() {
+    const className = classnames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`);
+    return (h(Host, null,
+      h("span", { class: className },
+        h("img", { alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src }))));
+  }
+  static get is() { return "flip-thumbnail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-thumbnail.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-thumbnail.css"]
+  }; }
+  static get properties() { return {
+    "alt": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "alt",
+      "reflect": false
+    },
+    "format": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipThumbnailFormat",
+        "resolved": "\"landscape\" | \"portrait\" | \"square\"",
+        "references": {
+          "FlipThumbnailFormat": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "format",
+      "reflect": false,
+      "defaultValue": "\"landscape\""
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipThumbnailSize",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "FlipThumbnailSize": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"m\""
+    },
+    "src": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "src",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,20 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-thumbnail.mdx";
+export default {
+  component: "flip-thumbnail",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipThumbnail",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-thumbnail", args);
+  return element;
+};
+export const FlipThumbnail = Template.bind({});
+FlipThumbnail.args = {
+  alt: "Brief description of the image.",
+  src: "https://picsum.photos/id/433/400/400",
+};

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

@@ -0,0 +1,64 @@
+:host {
+  display: flex;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.toast {
+  display: flex;
+  width: 100%;
+  max-width: 28rem;
+  padding: var(--s-space-16);
+  border-radius: 0.75rem;
+  color: var(--s-text-on-status);
+  background-color: var(--s-surface-neutral-default);
+}
+
+.toast--intent-critical {
+  background-color: var(--s-surface-critical-default);
+}
+
+.toast--intent-success {
+  background-color: var(--s-surface-success-default);
+}
+
+.toast__icon {
+  display: inline-flex;
+  margin-top: calc(-1 * var(--s-space-2));
+  margin-right: 0.625rem;
+  flex-shrink: 0;
+}
+
+.toast__icon ::part(icon) {
+    color: var(--s-icon-on-status);
+  }
+
+.toast__content {
+  flex-grow: 1;
+  line-height: var(--s-line-height-base);
+  text-align: left;
+}
+
+.toast__dismiss-button {
+  display: inline-flex;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  margin-top: calc(-1 * var(--s-space-2));
+  margin-left: var(--s-space-16);
+  padding: 0;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  color: var(--s-text-on-status);
+  background-color: transparent;
+  font: inherit;
+  font-weight: var(--s-font-weight-semibold);
+  cursor: pointer;
+}
+
+.toast__dismiss-button ::part(icon) {
+    color: var(--s-icon-on-status);
+  }