@getflip/swirl-components 0.1.0

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

@@ -0,0 +1,120 @@
+:host {
+  display: inline-flex;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.radio {
+  display: inline-flex;
+  cursor: pointer;
+  line-height: var(--s-line-height-base);
+}
+
+.radio:focus-within .radio__box {
+    box-shadow: 0 0 0 0.0625rem var(--s-background-default),
+      0 0 0 0.1875rem var(--s-focus-default);
+  }
+
+.radio--checked .radio__control:hover .radio__box {
+        border-color: var(--s-interactive-primary-hovered);
+        background-color: var(--s-interactive-primary-hovered);
+      }
+
+.radio--checked .radio__box {
+    position: relative;
+    border-color: var(--s-icon-highlight);
+    background-color: var(--s-icon-highlight);
+  }
+
+.radio--checked .radio__box:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background-color: var(--s-background-default);
+      content: "";
+      transform: translate3d(-50%, -50%, 0);
+    }
+
+.radio--invalid.radio--checked .radio__box, .radio--invalid.radio--indeterminate .radio__box {
+      background-color: var(--s-icon-critical);
+    }
+
+.radio--invalid .radio__box {
+    border-color: var(--s-icon-critical);
+  }
+
+.radio--disabled {
+  cursor: default;
+}
+
+.radio--disabled.radio--checked .radio__control:hover .radio__box {
+          border-color: var(--s-icon-disabled);
+          background-color: transparent;
+        }
+
+.radio--disabled.radio--checked .radio__box {
+      border-color: var(--s-icon-disabled);
+      background-color: var(--s-background-default);
+    }
+
+.radio--disabled.radio--checked .radio__box:after {
+        background-color: var(--s-icon-disabled);
+      }
+
+.radio--disabled .radio__control:hover .radio__box {
+        background-color: transparent;
+      }
+
+.radio--disabled .radio__box {
+    border-color: var(--s-icon-disabled);
+    backround-color: var(--s-icon-disabled);
+  }
+
+.radio--disabled .radio__description,
+  .radio--disabled .radio__label {
+    color: var(--s-text-disabled);
+  }
+
+.radio__control {
+  position: relative;
+  display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--s-space-2);
+  flex-shrink: 0;
+}
+
+.radio__control:hover .radio__box {
+      background-color: var(--s-action-neutral-hovered);
+    }
+
+.radio__box {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  border: 0.125rem solid var(--s-icon-default);
+  border-radius: 50%;
+}
+
+.radio__label-container {
+  display: inline-flex;
+  margin-left: var(--s-space-12);
+  padding-top: var(--s-space-2);
+  flex-direction: column;
+}
+
+.radio__label {
+  font-weight: var(--s-font-weight-medium);
+}
+
+.radio__description {
+  color: var(--s-text-subdued);
+}

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

@@ -0,0 +1,201 @@
+import { Component, Event, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipRadio {
+  constructor() {
+    this.checked = false;
+    this.disabled = false;
+    this.onChange = () => {
+      this.checked = true;
+      this.valueChange.emit(this.value);
+    };
+  }
+  render() {
+    const unchecked = this.checked === false || this.checked === "false";
+    const checked = this.checked === true || this.checked === "true";
+    const ariaCheckedLabel = checked ? "true" : unchecked ? "false" : "mixed";
+    const ariaInvalid = this.invalid;
+    const className = classnames("radio", {
+      "radio--checked": checked,
+      "radio--disabled": this.disabled,
+      "radio--invalid": this.invalid,
+      "radio--unchecked": unchecked,
+    });
+    return (h(Host, null,
+      h("label", { class: className, htmlFor: this.inputId },
+        h("span", { class: "radio__control" },
+          h("flip-visually-hidden", null,
+            h("input", { "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })),
+          h("span", { "aria-hidden": "true", class: "radio__box" })),
+        h("span", { class: "radio__label-container" },
+          this.label && h("span", { class: "radio__label" }, this.label),
+          this.description && (h("span", { class: "radio__description" }, this.description))))));
+  }
+  static get is() { return "flip-radio"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-radio.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-radio.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "FlipRadioState",
+        "resolved": "\"false\" | \"true\" | boolean",
+        "references": {
+          "FlipRadioState": {
+            "location": "local"
+          }
+        }
+      },
+      "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,
+      "defaultValue": "false"
+    },
+    "inputId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-id",
+      "reflect": false
+    },
+    "inputName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-name",
+      "reflect": false
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "invalid",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "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": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,24 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-radio.mdx";
+export default {
+  component: "flip-radio",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipRadio",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-radio", args);
+  return element;
+};
+export const FlipRadio = Template.bind({});
+FlipRadio.args = {
+  checked: false,
+  description: "Optional description of the item",
+  inputId: "radio",
+  inputName: "radio",
+  label: "Radio button",
+  value: "Value",
+};

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

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-space-4);
+}

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

@@ -0,0 +1,82 @@
+import { Component, Element, Event, h, Host, Prop, } from "@stencil/core";
+export class FlipRadioGroup {
+  componentDidLoad() {
+    this.radioButtons = Array.from(this.el.querySelectorAll("flip-radio"));
+    this.initValue();
+    this.handleValueChanges();
+  }
+  initValue() {
+    if (this.value === undefined) {
+      return;
+    }
+    const radioWithValue = this.radioButtons.find((radio) => radio.value === this.value);
+    if (!Boolean(radioWithValue)) {
+      return;
+    }
+    radioWithValue.checked = true;
+  }
+  handleValueChanges() {
+    for (const [key, radio] of Object.entries(this.radioButtons)) {
+      radio.addEventListener("valueChange", () => {
+        if (radio.checked === true || radio.checked === "true") {
+          this.valueChange.emit(radio.value);
+          this.radioButtons.forEach((r, k) => {
+            if (String(k) === key) {
+              return;
+            }
+            r.checked = false;
+          });
+        }
+      });
+    }
+  }
+  render() {
+    return (h(Host, { role: "radiogroup" },
+      h("div", { class: "radio-group" },
+        h("slot", null))));
+  }
+  static get is() { return "flip-radio-group"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-radio-group.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-radio-group.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "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": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,25 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-radio-group.mdx";
+export default {
+  component: "flip-radio-group",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipRadioGroup",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-radio-group", args);
+  element.innerHTML = `
+    <flip-radio input-id="radio-1" input-name="radio" label="Radio button #1" value="1"></flip-radio>
+    <flip-radio input-id="radio-2" input-name="radio" label="Radio button #2" value="2"></flip-radio>
+    <flip-radio input-id="radio-3" input-name="radio" label="Radio button #3" value="3"></flip-radio>
+  `;
+  return element;
+};
+export const FlipRadioGroup = Template.bind({});
+FlipRadioGroup.args = {
+  "aria-label": "Radio group",
+  value: "2",
+};

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

@@ -0,0 +1,96 @@
+:host {
+  display: flex;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.search {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+.search--disabled .search__icon {
+    color: var(--s-icon-disabled);
+  }
+
+.search--disabled .search__input {
+    color: var(--s-text-disabled);
+  }
+
+.search--disabled .search__input::-moz-placeholder {
+      color: var(--s-text-disabled);
+    }
+
+.search--disabled .search__input::placeholder {
+      color: var(--s-text-disabled);
+    }
+
+.search__icon {
+  position: absolute;
+  top: 50%;
+  left: var(--s-space-12);
+  display: inline-flex;
+  color: var(--s-icon-default);
+  transform: translateY(-50%);
+}
+
+.search__input {
+  width: 100%;
+  height: 2.5rem;
+  padding-top: var(--s-space-8);
+  padding-right: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));
+  padding-bottom: var(--s-space-8);
+  padding-left: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));
+  border: none;
+  border-radius: var(--s-border-radius-base);
+  color: var(--s-text-default);
+  background-color: var(--s-surface-raised-default);
+  font: inherit;
+  line-height: var(--s-line-height-base);
+  caret-color: var(--s-border-highlight);
+}
+
+.search__input:focus {
+    outline-color: var(--s-focus-default);
+  }
+
+.search__input::-moz-placeholder {
+    color: var(--s-text-subdued);
+  }
+
+.search__input::placeholder {
+    color: var(--s-text-subdued);
+  }
+
+.search__input::-webkit-search-decoration,
+  .search__input::-webkit-search-cancel-button,
+  .search__input::-webkit-search-results-button,
+  .search__input::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+            appearance: none;
+  }
+
+.search__input:not(:-moz-placeholder-shown) + .search__clear-button {
+      display: inline-flex;
+    }
+
+.search__input:not(:placeholder-shown) + .search__clear-button {
+      display: inline-flex;
+    }
+
+.search__clear-button {
+  position: absolute;
+  top: 50%;
+  right: var(--s-space-12);
+  display: none;
+  padding: 0;
+  border: none;
+  color: var(--s-icon-default);
+  background-color: transparent;
+  cursor: pointer;
+  transform: translateY(-50%);
+}