@roadtrip/components 2.21.0

package/dist/collection/components/switch/switch.css

@@ -0,0 +1,206 @@
+/*
+ * Switch
+ *
+ * For accessibility, we provide a style for focus only on Tab,
+ * for that add the javascript polyfill for focus-visible
+ * (https://github.com/WICG/focus-visible).
+ *
+ * Index
+ * - Switch
+ * - Switch label
+ * - Switch lever
+ * - Switch feedback
+ * - Switch position
+ *
+ */
+
+/**
+ * @prop --switch-lever-width: width of the lever
+ */
+
+/* SWITCH
+ -------------------- */
+
+:host {
+  --switch-lever-width: 4.5rem;
+
+  position: relative;
+  display: block;
+  margin-bottom: 1rem;
+  font-family: var(--font, sans-serif);
+  font-size: 0.875rem;
+  color: var(--text);
+}
+
+/**
+ * Hide input
+ */
+
+.form-switch-input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+/* SWITCH LABEL
+ -------------------- */
+
+.form-switch-label {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+/* SWITCH LEVER
+ -------------------- */
+
+.form-switch-lever {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  width: var(--switch-lever-width);
+  height: 2rem;
+  padding: 0.5rem 0.625rem;
+  margin-right: 0.5rem;
+  font-size: 0.625rem;
+  font-weight: 700;
+  line-height: 1.6;
+  content: "";
+  background: var(--border);
+  border: 0.125rem solid transparent;
+  border-radius: 1.125rem;
+  transition: background 0.2s ease-in-out;
+}
+
+/**
+ * Text in the switch widget
+ */
+
+.form-switch-lever::before {
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: var(--white);
+  text-transform: uppercase;
+  content: attr(data-off);
+}
+
+/**
+ * Round lever in the widget
+ */
+
+.form-switch-lever::after {
+  position: absolute;
+  top: 0.0625rem;
+  left: 0.0625rem;
+  display: block;
+  width: 1.625rem;
+  height: 1.625rem;
+  content: "";
+  background: var(--white);
+  border-radius: 50%;
+  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease-in-out;
+}
+
+/**
+ * Checked state
+ */
+
+.form-switch-input:checked ~ .form-switch-label .form-switch-lever {
+  justify-content: flex-start;
+}
+
+.form-switch-input:checked ~ .form-switch-label .form-switch-lever::before {
+  content: attr(data-on);
+}
+
+.form-switch-input:checked ~ .form-switch-label .form-switch-lever::after {
+  transform: translateX(calc(var(--switch-lever-width) - 2rem));
+}
+
+/**
+ * Focus on Tab
+ */
+
+.form-switch-input.focus-visible ~ .form-switch-label .form-switch-lever {
+  box-shadow: 0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary);
+}
+
+/* SWITCH FEEDBACK
+ -------------------- */
+
+/**
+ * Secondary
+ */
+
+.form-switch-input:checked ~ .form-switch-secondary .form-switch-lever {
+  background: var(--secondary);
+}
+
+.form-switch-input:checked ~ .form-switch-secondary .form-switch-lever::before {
+  color: var(--secondary-contrast);
+}
+
+/**
+ * Information
+ */
+
+.form-switch-input:checked ~ .form-switch-info .form-switch-lever {
+  background: var(--info);
+}
+
+.form-switch-input:checked ~ .form-switch-info .form-switch-lever::before {
+  color: var(--info-contrast);
+}
+
+/**
+ * Success
+ */
+
+.form-switch-input:checked ~ .form-switch-success .form-switch-lever {
+  background: var(--success);
+}
+
+.form-switch-input:checked ~ .form-switch-success .form-switch-lever::before {
+  color: var(--success-contrast);
+}
+
+/**
+ * Warning
+ */
+
+.form-switch-input:checked ~ .form-switch-warning .form-switch-lever {
+  background: var(--warning);
+}
+
+.form-switch-input:checked ~ .form-switch-warning .form-switch-lever::before {
+  color: var(--warning-contrast);
+}
+
+/**
+ * Danger
+ */
+
+.form-switch-input:checked ~ .form-switch-danger .form-switch-lever {
+  background: var(--danger);
+}
+
+.form-switch-input:checked ~ .form-switch-danger .form-switch-lever::before {
+  color: var(--danger-contrast);
+}
+
+/* SWITCH POSITION
+ -------------------- */
+
+.form-switch-right {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+
+.form-switch-spaced {
+  display: flex;
+  justify-content: space-between;
+}

package/dist/collection/components/switch/switch.js

@@ -0,0 +1,342 @@
+import { Component, Event, Host, Prop, Watch, h } from '@stencil/core';
+import './../../utils/polyfill';
+export class Switch {
+  constructor() {
+    /**
+     * The id of input
+     */
+    this.switchId = `road-switch-${switchIds++}`;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.switchId;
+    /**
+     * If `true`, the toggle is selected.
+     */
+    this.checked = false;
+    /**
+     * If `true`, the user cannot interact with the toggle.
+     */
+    this.disabled = false;
+    /**
+     * Label for the field
+     */
+    this.label = `${this.switchId}-label`;
+    /**
+     * Set the color of alert. e.g. info, success, warning, danger
+     */
+    this.color = 'secondary';
+    /**
+     * If `true`, the label is at left of the switch
+     */
+    this.hasLeftLabel = false;
+    /**
+     * Add space between label and switch element
+     */
+    this.isSpaced = false;
+    /**
+     * Value the form will get
+     */
+    this.value = 'on';
+    /**
+     * Text display for "`on`" state in the switch lever
+     */
+    this.on = "yes";
+    /**
+     * Text display for "`off`" state in the switch lever
+     */
+    this.off = "no";
+    this.onClick = () => {
+      this.checked = !this.checked;
+    };
+    this.onFocus = () => {
+      this.roadFocus.emit();
+    };
+    this.onBlur = () => {
+      this.roadBlur.emit();
+    };
+  }
+  checkedChanged(isChecked) {
+    this.roadChange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
+  }
+  render() {
+    const labelId = this.switchId + '-label';
+    const textLabel = h("label", { class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+    const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
+    const isSpacedClass = this.isSpaced && 'form-switch-spaced';
+    const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
+    return (h(Host, null,
+      h("input", { class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }),
+      h("label", { class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId },
+        this.hasLeftLabel && textLabel,
+        h("div", { class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }),
+        this.hasLeftLabel ? '' : textLabel)));
+  }
+  static get is() { return "road-switch"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["switch.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["switch.css"]
+  }; }
+  static get properties() { return {
+    "switchId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The id of input"
+      },
+      "attribute": "switch-id",
+      "reflect": false,
+      "defaultValue": "`road-switch-${switchIds++}`"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the control, which is submitted with the form data."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "this.switchId"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the toggle is selected."
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the user cannot interact with the toggle."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label for the field"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "`${this.switchId}-label`"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'secondary' | FeedbackColors",
+        "resolved": "\"danger\" | \"info\" | \"secondary\" | \"success\" | \"warning\" | undefined",
+        "references": {
+          "FeedbackColors": {
+            "location": "import",
+            "path": "../../interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Set the color of alert. e.g. info, success, warning, danger"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'secondary'"
+    },
+    "hasLeftLabel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the label is at left of the switch"
+      },
+      "attribute": "has-left-label",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "isSpaced": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Add space between label and switch element"
+      },
+      "attribute": "is-spaced",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Value the form will get"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "'on'"
+    },
+    "on": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text display for \"`on`\" state in the switch lever"
+      },
+      "attribute": "on",
+      "reflect": false,
+      "defaultValue": "\"yes\""
+    },
+    "off": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text display for \"`off`\" state in the switch lever"
+      },
+      "attribute": "off",
+      "reflect": false,
+      "defaultValue": "\"no\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "roadChange",
+      "name": "roadChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the checked property has changed."
+      },
+      "complexType": {
+        "original": "{\n    checked: boolean;\n    value: string | undefined | null\n  }",
+        "resolved": "{ checked: boolean; value: string | null | undefined; }",
+        "references": {}
+      }
+    }, {
+      "method": "roadFocus",
+      "name": "roadFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the toggle has focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadBlur",
+      "name": "roadBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the toggle loses focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "checked",
+      "methodName": "checkedChanged"
+    }]; }
+}
+let switchIds = 0;

package/dist/collection/components/switch/switch.stories.js

@@ -0,0 +1,103 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+
+export default {
+  title: 'Forms/Switch',
+  component: 'road-switch',
+  parameters: {
+    actions: {
+      handles: ['roadBlur', 'roadFocus'],
+    },
+  },
+};
+
+export const Playground = (args) => html`
+  <road-switch 
+    checked="${args.checked}"
+    disabled="${args.disabled}"
+    color="${args.color}"
+    label="${args.label}"
+    name="${ifDefined(args.name)}"
+    value="${args.value}"
+    off="${args.off}"
+    on="${args.on}"
+    has-left-label="${args['has-left-label']}"
+    is-spaced="${args['is-spaced']}"
+    @roadChange=${event => args.roadChange(event.detail)}
+    style="--switch-lever-width: ${args['--switch-lever-width']}"
+  ></road-switch>
+`;
+Playground.args = {
+  checked: false,
+  color: 'secondary',
+  disabled: false,
+  'has-left-label': false,
+  'is-spaced': false,
+  label: 'Label',
+  value: 'on',
+  off: 'no',
+  on: 'yes',
+  '--switch-lever-width': '4.5rem',
+};
+Playground.argTypes = {
+  checked: {
+    control: 'boolean',
+  },
+  disabled: {
+    control: 'boolean',
+  },
+  label: {
+    control: 'text',
+  },
+  name: {
+    control: 'text',
+  },
+  value: {
+    control: 'text',
+  },
+  off: {
+    control: 'text',
+  },
+  on: {
+    control: 'text',
+  },
+  color: {
+    options: ['secondary', 'info', 'success', 'danger', 'warning'],
+    control: {
+      type: 'radio',
+    },
+  },
+  'has-left-label': {
+    control: 'boolean',
+  },
+  'is-spaced': {
+    control: 'boolean',
+  },
+  '--switch-lever-width': {
+    control: 'text',
+  },
+  roadChange: {
+    action: 'roadChange',
+  },
+};
+
+export const Default = () => html`
+  <road-switch label="Label"></road-switch>
+`;
+
+export const Checked = () => html`
+  <road-switch label="Label" checked></road-switch>
+`;
+
+export const Feedback = () => html`
+  <road-switch label="Label" color="info" checked></road-switch>
+<road-switch label="Label" color="success" checked></road-switch>
+<road-switch label="Label" color="warning" checked></road-switch>
+<road-switch label="Label" color="danger" checked></road-switch>
+`;
+
+export const Position = () => html`
+  <road-switch label="Label" has-left-label></road-switch>
+
+<road-switch label="Label" has-left-label is-spaced></road-switch>
+`;

package/dist/collection/components/tab/tab.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+:host(.tab-hidden) {
+  display: none;
+}