@roadtrip/components 2.26.0 → 2.28.0

package/dist/collection/components/toggle/toggle.css

@@ -0,0 +1,206 @@
+/*
+ * Toggle
+ *
+ * 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
+ * - Toggle
+ * - Label
+ * - Lever
+ * - Feedback
+ * - Position
+ */
+
+/**
+ * @prop --toggle-lever-width: width of the lever
+ */
+
+/* toggle
+ -------------------- */
+
+:host {
+  --toggle-lever-width: 4.5rem;
+
+  position: relative;
+  display: block;
+  margin-bottom: 1rem;
+  font-family: var(--road-font, sans-serif);
+  font-size: 1rem;
+  color: var(--road-grey-900);
+}
+
+/**
+ * Hide input
+ */
+
+.form-toggle-input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+/* LABEL
+ -------------------- */
+
+.form-toggle-label {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* LEVER
+ -------------------- */
+
+.form-toggle-lever {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  width: var(--toggle-lever-width);
+  height: 2rem;
+  padding: 0.5rem 0.625rem;
+  margin-right: 0.75rem;
+  font-size: 0.625rem;
+  font-weight: 700;
+  line-height: 1.6;
+  content: "";
+  background: var(--road-grey-400);
+  border: 0.125rem solid transparent;
+  border-radius: 1.125rem;
+  transition: background 0.2s ease-in-out;
+}
+
+/**
+ * Text in the toggle widget
+ */
+
+.form-toggle-lever::before {
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: var(--road-grey-000);
+  text-transform: uppercase;
+  content: attr(data-off);
+}
+
+/**
+ * Round lever in the widget
+ */
+
+.form-toggle-lever::after {
+  position: absolute;
+  top: 0.0625rem;
+  left: 0.0625rem;
+  display: block;
+  width: 1.625rem;
+  height: 1.625rem;
+  content: "";
+  background: var(--road-grey-000);
+  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-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {
+  justify-content: flex-start;
+}
+
+.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {
+  content: attr(data-on);
+}
+
+.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {
+  transform: translateX(calc(var(--toggle-lever-width) - 2rem));
+}
+
+/**
+ * Focus on Tab
+ */
+
+.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {
+  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);
+}
+
+/* FEEDBACK
+ -------------------- */
+
+/**
+ * Secondary
+ */
+
+.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {
+  background: var(--road-primary-500);
+}
+
+.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {
+  color: var(--road-primary-contrast);
+}
+
+/**
+ * Info
+ */
+
+.form-toggle-input:checked ~ .form-toggle-info .form-toggle-lever {
+  background: var(--road-info-default);
+}
+
+.form-toggle-input:checked ~ .form-toggle-info .form-toggle-lever::before {
+  color: var(--road-info-contrast);
+}
+
+/**
+ * Success
+ */
+
+.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {
+  background: var(--road-success-default);
+}
+
+.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {
+  color: var(--road-success-contrast);
+}
+
+/**
+ * Warning
+ */
+
+.form-toggle-input:checked ~ .form-toggle-warning .form-toggle-lever {
+  background: var(--road-warning-default);
+}
+
+.form-toggle-input:checked ~ .form-toggle-warning .form-toggle-lever::before {
+  color: var(--road-warning-contrast);
+}
+
+/**
+ * Danger
+ */
+
+.form-toggle-input:checked ~ .form-toggle-danger .form-toggle-lever {
+  background: var(--road-danger-default);
+}
+
+.form-toggle-input:checked ~ .form-toggle-danger .form-toggle-lever::before {
+  color: var(--road-danger-contrast);
+}
+
+/* POSITION
+ -------------------- */
+
+.form-toggle-right {
+  margin-right: 0;
+  margin-left: 0.75rem;
+}
+
+.form-toggle-spaced {
+  display: flex;
+  justify-content: space-between;
+}

package/dist/collection/components/toggle/toggle.js

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

package/dist/collection/components/{switch/switch.stories.js → toggle/toggle.stories.js}

@@ -2,8 +2,8 @@ import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
-  title: 'Forms/Switch',
-  component: 'road-switch',
+  title: 'Forms/Toggle',
+  component: 'road-toggle',
   parameters: {
     actions: {
       handles: ['roadblur', 'roadfocus'],
@@ -22,7 +22,7 @@ export default {
     name: {
       control: 'text',
     },
-    'switch-id': {
+    'toggle-id': {
       control: 'text',
     },
     value: {
@@ -62,7 +62,7 @@ export default {
         type: null,
       },
     },
-    '--switch-lever-width': {
+    '--toggle-lever-width': {
       table: {
         defaultValue: { summary: '4.5rem' },
       },
@@ -85,7 +85,7 @@ export default {
 };
 
 const Template = (args) => html`
-  <road-switch 
+  <road-toggle 
     checked="${ifDefined(args.checked)}"
     disabled="${ifDefined(args.disabled)}"
     color="${ifDefined(args.color)}"
@@ -96,9 +96,9 @@ const Template = (args) => html`
     on="${ifDefined(args.on)}"
     has-left-label="${ifDefined(args['has-left-label'])}"
     is-spaced="${ifDefined(args['is-spaced'])}"
-    switch-id="${ifDefined(args['switch-id'])}"
+    toggle-id="${ifDefined(args['toggle-id'])}"
     @roadchange=${event => args.roadchange(event.detail)}
-  ></road-switch>
+  ></road-toggle>
 `;
 
 export const Playground = Template.bind({});

package/dist/collection/components/toolbar/toolbar.css

@@ -14,9 +14,9 @@
   display: block;
   width: 100%;
   contain: content;
-  color: var(--text);
-  background: var(--white);
-  border-bottom: 1px solid var(--border);
+  color: var(--road-grey-900);
+  background: var(--road-grey-000);
+  border-bottom: 1px solid var(--road-grey-300);
 }
 
 /* CONTAINER
@@ -61,11 +61,11 @@
  -------------------- */
 
 :host(.toolbar-primary) {
-  color: var(--primary-contrast);
-  background: var(--primary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-900);
 }
 
 :host(.toolbar-secondary) {
-  color: var(--primary-contrast);
-  background: var(--secondary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-500);
 }

package/dist/collection/components/tooltip/tooltip.css

@@ -32,13 +32,13 @@
   width: var(--width);
   max-width: var(--max-width);
   padding: 0.5rem;
-  font-family: var(--font);
+  font-family: var(--road-font);
   font-size: 0.75rem;
-  color: var(--text);
+  color: var(--road-grey-900);
   text-align: center;
   pointer-events: none;
-  background: var(--white);
-  border: 1px solid var(--border);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-grey-300);
   border-radius: 0.25rem;
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
   opacity: 0;