@roadtrip/components 2.21.0

package/dist/collection/components/select/select.js

@@ -0,0 +1,307 @@
+import { Component, Event, Host, Prop, Watch, h } from '@stencil/core';
+export class Select {
+  constructor() {
+    /**
+     * The id of select
+     */
+    this.selectId = `road-select-${selectIds++}`;
+    /**
+     * List of options of the select
+     */
+    this.options = [];
+    /**
+     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     */
+    this.autofocus = false;
+    /**
+     * If `true`, the user cannot interact with the select.
+     */
+    this.disabled = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.selectId;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    this.required = false;
+    /**
+     * If the control is presented as a scrolling list box (e.g. when multiple is specified),
+     * this attribute represents the number of rows in the list that should be visible at one time.
+     */
+    this.size = 0;
+    /**
+     * Label for the field
+     */
+    this.label = `${this.selectId}-label`;
+    this.onChange = (ev) => {
+      const select = ev.target;
+      if (select) {
+        this.value = select.value || '';
+      }
+    };
+    this.onBlur = () => {
+      this.roadBlur.emit();
+    };
+    this.onFocus = () => {
+      this.roadFocus.emit();
+    };
+  }
+  valueChanged() {
+    this.roadChange.emit({
+      value: this.value,
+    });
+  }
+  render() {
+    const labelId = this.selectId + '-label';
+    const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
+    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
+    return (h(Host, null,
+      h("select", { class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur },
+        h("option", { selected: true, disabled: true, hidden: true, style: { display: 'none' }, value: "" }),
+        this.options && this.options.map(option => (h("option", { value: option.value, selected: option.selected }, option.label)))),
+      h("label", { class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label),
+      this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error)));
+  }
+  static get is() { return "road-select"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["select.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["select.css"]
+  }; }
+  static get properties() { return {
+    "selectId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The id of select"
+      },
+      "attribute": "select-id",
+      "reflect": false,
+      "defaultValue": "`road-select-${selectIds++}`"
+    },
+    "options": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<{\n    value: string | number;\n    label: string;\n    selected?: boolean;\n  }>",
+        "resolved": "{ value: string | number; label: string; selected?: boolean | undefined; }[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "List of options of the select"
+      },
+      "defaultValue": "[]"
+    },
+    "autofocus": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
+      },
+      "attribute": "autofocus",
+      "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 select."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "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.selectId"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the user must fill in a value before submitting a form."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "size": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If the control is presented as a scrolling list box (e.g. when multiple is specified),\nthis attribute represents the number of rows in the list that should be visible at one time."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "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.selectId}-label`"
+    },
+    "error": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Error message for the field"
+      },
+      "attribute": "error",
+      "reflect": false
+    },
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any | null",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "the value of the select."
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "roadChange",
+      "name": "roadChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the value has changed."
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null\n  }",
+        "resolved": "{ value: string | null | undefined; }",
+        "references": {}
+      }
+    }, {
+      "method": "roadFocus",
+      "name": "roadFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select has focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadBlur",
+      "name": "roadBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select loses focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "valueChanged"
+    }]; }
+}
+let selectIds = 0;

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

@@ -0,0 +1,113 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+
+export default {
+  title: 'Forms/Select',
+  component: 'road-select',
+  parameters: {
+    actions: {
+      handles: ['roadBlur', 'roadFocus'],
+    },
+  },
+};
+
+export const Playground = (args) => {
+  const options = [
+    { value: 'link1', label: 'link1' },
+    { value: 'link2', label: 'link2' },
+    { value: 'link3', label: 'link3' }
+  ];
+
+  return html`
+    <road-select 
+      .options=${options} 
+      label="${args.label}"
+      disabled="${args.disabled}"
+      required="${args.required}"
+      autofocus="${args.autofocus}"
+      error="${ifDefined(args.error)}"
+      size="${ifDefined(args.size)}"
+      @roadChange=${event => args.roadChange(event.detail.value)}
+    ></road-select>
+  `;
+};
+Playground.args = {
+  disabled: false,
+  required: false,
+  label: 'Label',
+  autofocus: false,
+};
+Playground.argTypes = {
+  disabled: {
+    control: 'boolean',
+  },
+  required: {
+    control: 'boolean',
+  },
+  autofocus: {
+    control: 'boolean',
+  },
+  error: {
+    control: 'text',
+  },
+  label: {
+    control: 'text',
+  },
+  name: {
+    control: 'text',
+  },
+  size: {
+    control: 'number',
+  },
+  roadChange: {
+    action: 'roadChange',
+  },
+};
+
+export const Default = () => {
+  const options = [
+    { value: 'link1', label: 'link1' },
+    { value: 'link2', label: 'link2' },
+    { value: 'link3', label: 'link3' }
+  ];
+
+  return html`
+    <road-select .options=${options} label="Label" required></road-select>
+  `;
+};
+
+export const WithValue = () => {
+  const options = [
+    { value: 'link1', label: 'link1', selected: true },
+    { value: 'link2', label: 'link2' },
+    { value: 'link3', label: 'link3' }
+  ];
+
+  return html`
+    <road-select .options=${options} label="Label" required></road-select>
+  `;
+};
+
+export const Disabled = () => {
+  const options = [
+    { value: 'link1', label: 'link1' },
+    { value: 'link2', label: 'link2' },
+    { value: 'link3', label: 'link3' }
+  ];
+
+  return html`
+    <road-select .options=${options} label="Label" disabled></road-select>
+  `;
+};
+
+export const Error = () => {
+  const options = [
+    { value: 'link1', label: 'link1' },
+    { value: 'link2', label: 'link2' },
+    { value: 'link3', label: 'link3' }
+  ];
+
+  return html`
+    <road-select .options=${options} label="Label" required error="Select an item"></road-select>
+  `;
+};

package/dist/collection/components/skeleton/skeleton.css

@@ -0,0 +1,36 @@
+/*
+ * Skeleton Screen
+ *
+ * Index
+ * - Skeleton
+ * - Skeleton animation
+ *
+ */
+
+
+/* SKELETON
+ -------------------- */
+
+:host {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-height: 1rem;
+  background: linear-gradient(to right, var(--background-second) 8%, var(--background) 18%, var(--background-second) 33%);
+  background-size: 800px 104px;
+  animation: roadSkeletonAnimation 1s linear infinite;
+}
+
+/* SKELETON ANIMATION
+-------------------- */
+
+@keyframes roadSkeletonAnimation {
+
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+}

package/dist/collection/components/skeleton/skeleton.js

@@ -0,0 +1,15 @@
+import { Component, Host, h } from '@stencil/core';
+export class Skeleton {
+  render() {
+    return (h(Host, null,
+      h("span", null, "\u00A0")));
+  }
+  static get is() { return "road-skeleton"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["skeleton.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["skeleton.css"]
+  }; }
+}

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

@@ -0,0 +1,90 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Indicators/Skeleton',
+  component: 'road-skeleton',
+};
+
+export const List = () => html`
+  <road-grid>
+  <road-row>
+    <road-col class="col-sm-3">
+      <road-skeleton style="height: 160px"></road-skeleton>
+    </road-col>
+    <road-col class="col-sm-9">
+      <p class="h2 mt-8">
+        <road-skeleton style="width: 60%; height: 1.5rem"></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+    </road-col>
+  </road-row>
+
+  <road-row class="mt-16">
+    <road-col class="col-sm-3">
+      <road-skeleton style="height: 160px"></road-skeleton>
+    </road-col>
+    <road-col class="col-sm-9">
+      <p class="h2 mt-8">
+        <road-skeleton style="width: 60%; height: 1.5rem"></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+    </road-col>
+  </road-row>
+
+  <road-row class="mt-16">
+    <road-col class="col-sm-3">
+      <road-skeleton style="height: 160px"></road-skeleton>
+    </road-col>
+    <road-col class="col-sm-9">
+      <p class="h2 mt-8">
+        <road-skeleton style="width: 60%; height: 1.5rem"></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+    </road-col>
+  </road-row>
+
+  <road-row class="mt-16">
+    <road-col class="col-sm-3">
+      <road-skeleton style="height: 160px"></road-skeleton>
+    </road-col>
+    <road-col class="col-sm-9">
+      <p class="h2 mt-8">
+        <road-skeleton style="width: 60%; height: 1.5rem"></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+      <p class="text-content">
+        <road-skeleton></road-skeleton>
+      </p>
+    </road-col>
+  </road-row>
+</road-grid>
+`;

package/dist/collection/components/spinner/spinner.css

@@ -0,0 +1,63 @@
+/*
+ * Spinner
+ *
+ * Index
+ * - Spinner
+ * - Spinner circle
+ * - Spinner animation
+ *
+ */
+
+:host {
+  display: block;
+}
+
+/* SPINNER
+ -------------------- */
+
+.spinner {
+  width: 3rem;
+  height: 3rem;
+  transform-origin: center;
+  animation: roadRotate 2s linear infinite;
+}
+
+/* SPINNER CIRCLE
+ -------------------- */
+
+.spinner-circle {
+  animation: roadDash 1.5s ease-in-out infinite;
+  fill: none;
+  stroke: var(--secondary);
+  stroke-width: 3;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+}
+
+/* SPINNER ANIMATION
+ -------------------- */
+
+@keyframes roadRotate {
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes roadDash {
+
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -35px;
+  }
+
+  100% {
+    stroke-dashoffset: -125px;
+  }
+}

package/dist/collection/components/spinner/spinner.js

@@ -0,0 +1,16 @@
+import { Component, Host, h } from '@stencil/core';
+export class Spinner {
+  render() {
+    return (h(Host, null,
+      h("svg", { class: "spinner", viewBox: "25 25 50 50" },
+        h("circle", { class: "spinner-circle", cx: "50", cy: "50", r: "20" }))));
+  }
+  static get is() { return "road-spinner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["spinner.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["spinner.css"]
+  }; }
+}

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

@@ -0,0 +1,10 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Indicators/Spinner',
+  component: 'road-spinner',
+};
+
+export const Default = () => html`
+  <road-spinner></road-spinner>
+`;