@roadtrip/components 2.21.0

package/dist/collection/components/collapse/collapse.js

@@ -0,0 +1,124 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+/**
+ * @slot  - Content visible when collapsed.
+ * @slot collapsed-content - content invisible when collapsed.
+ */
+export class Collapse {
+  constructor() {
+    /**
+     * Set open to true to show the accordion element and to false to hide it.
+     */
+    this.isOpen = false;
+    /**
+     * Text displayed in the button when the content is collapsed
+     */
+    this.showMore = 'show more';
+    /**
+     * Text displayed in the button when the content is collapsed
+     */
+    this.showLess = 'show less';
+    /**
+     * if "`true`" the button will be centered
+     */
+    this.centered = false;
+    /**
+     * Toggle the display when clicking header
+     */
+    this.onClick = () => {
+      this.isOpen = !this.isOpen;
+    };
+  }
+  render() {
+    const isOpenClass = this.isOpen ? 'collapse-open' : '';
+    const buttonText = this.isOpen ? this.showLess : this.showMore;
+    const centerClass = this.centered ? 'collapse-btn-centered' : '';
+    return (h(Host, null,
+      h("slot", null),
+      h("div", { class: `collapsed-content ${isOpenClass}` },
+        h("slot", { name: "collapsed-content" })),
+      h("div", { class: `collapse-btn-wrapper ${centerClass}` },
+        h("road-button", { onClick: this.onClick, class: "collapse-btn btn-link" }, buttonText))));
+  }
+  static get is() { return "road-collapse"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["collapse.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["collapse.css"]
+  }; }
+  static get properties() { return {
+    "isOpen": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set open to true to show the accordion element and to false to hide it."
+      },
+      "attribute": "is-open",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showMore": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text displayed in the button when the content is collapsed"
+      },
+      "attribute": "show-more",
+      "reflect": false,
+      "defaultValue": "'show more'"
+    },
+    "showLess": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text displayed in the button when the content is collapsed"
+      },
+      "attribute": "show-less",
+      "reflect": false,
+      "defaultValue": "'show less'"
+    },
+    "centered": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "if \"`true`\" the button will be centered"
+      },
+      "attribute": "centered",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -0,0 +1,157 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Expand/Collapse',
+  component: 'road-collapse',
+};
+
+export const Playground = (args) => html`
+  <road-collapse is-open="${args['is-open']}" show-more="${args['show-more']}" show-less="${args['show-less']}" centered="${args.centered}">
+    <ul class="m-0">
+      <li>Car tire 205/55 R16 91 V</li>
+      <li>Good traction on dry and wet soils.</li>
+      <li>Reduced risk of aquaplaning.</li>
+      <li>Reduced braking distances.</li>
+    </ul>
+    <div slot="collapsed-content">
+      <ul class="m-0">
+        <li>Specific Homologation : <b>non</b></li>
+        <li>XL : <b>non</b></li>
+        <li>Runflat : <b>non</b></li>
+        <li>Seal : <b>non</b></li>
+        <li>Various tire characteristics : <b>MFS</b></li>
+        <li>Tire profile : <b>Energy saver</b></li>
+      </ul>
+    </div>
+  </road-collapse>
+`;
+Playground.args = {
+  'is-open': false,
+  centered: false,
+  'show-less': 'show less',
+  'show-more': 'show more',
+};
+Playground.argTypes = {
+  'is-open': {
+    control: 'boolean',
+  },
+  centered: {
+    control: 'boolean',
+  },
+  'show-less': {
+    control: 'text',
+  },
+  'show-more': {
+    control: 'text',
+  },
+};
+
+export const Default = () => html`
+  <road-collapse show-more="show more" show-less="show less">
+    <ul class="m-0">
+      <li>Car tire 205/55 R16 91 V</li>
+      <li>Good traction on dry and wet soils.</li>
+      <li>Reduced risk of aquaplaning.</li>
+      <li>Reduced braking distances.</li>
+    </ul>
+    <div slot="collapsed-content">
+      <ul class="m-0">
+        <li>Specific Homologation : <b>non</b></li>
+        <li>XL : <b>non</b></li>
+        <li>Runflat : <b>non</b></li>
+        <li>Seal : <b>non</b></li>
+        <li>Various tire characteristics : <b>MFS</b></li>
+        <li>Tire profile : <b>Energy saver</b></li>
+      </ul>
+    </div>
+  </road-collapse>
+`;
+
+export const Open = () => html`
+  <road-collapse is-open showMore="show more" showLess="show less">
+    <ul class="m-0">
+      <li>Car tire 205/55 R16 91 V</li>
+      <li>Good traction on dry and wet soils.</li>
+      <li>Reduced risk of aquaplaning.</li>
+      <li>Reduced braking distances.</li>
+    </ul>
+    <div slot="collapsed-content">
+      <ul class="m-0">
+        <li>Specific Homologation : <b>non</b></li>
+        <li>XL : <b>non</b></li>
+        <li>Runflat : <b>non</b></li>
+        <li>Seal : <b>non</b></li>
+        <li>Various tire characteristics : <b>MFS</b></li>
+        <li>Tire profile : <b>Energy saver</b></li>
+      </ul>
+    </div>
+  </road-collapse>
+`;
+
+export const VehicleTypes = () => html`
+  <road-collapse centered showMore="show more" showLess="show less">
+    <road-grid>
+      <road-row>
+        <road-col class="col-6 col-md-4 col-lg-3">
+          <road-card button value="car">
+            <road-icon name="vehicle-car" size="3x"></road-icon>
+            <road-label>Car</road-label>
+          </road-card>
+        </road-col>
+        <road-col class="col-6 col-md-4 col-lg-3">
+          <road-card button value="4x4">
+            <road-icon name="vehicle-suv" size="3x"></road-icon>
+            <road-label>4x4</road-label>
+          </road-card>
+        </road-col>
+        <road-col class="col-6 col-md-4 col-lg-3">
+          <road-card button value="truck">
+            <road-icon name="vehicle-pickup-van" size="3x"></road-icon>
+            <road-label>Truck</road-label>
+          </road-card>
+        </road-col>
+        <road-col class="col-6 col-md-4 col-lg-3">
+          <road-card button value="bike">
+            <road-icon name="vehicle-moto" size="3x"></road-icon>
+            <road-label>Bike</road-label>
+          </road-card>
+        </road-col>
+      </road-row>
+    </road-grid>
+    <div slot="collapsed-content">
+      <road-grid>
+        <road-row>
+          <road-col class="col-6 col-md-4 col-lg-3">
+            <road-card button value="scooter">
+              <road-icon name="vehicle-scooter" size="3x"></road-icon>
+              <road-label>Scooter</road-label>
+            </road-card>
+          </road-col>
+          <road-col class="col-6 col-md-4 col-lg-3">
+            <road-card button value="competition">
+              <road-icon name="vehicle-rally" size="3x"></road-icon>
+              <road-label>Compétition</road-label>
+            </road-card>
+          </road-col>
+          <road-col class="col-6 col-md-4 col-lg-3">
+            <road-card button value="colletion">
+              <road-icon name="vehicle-collector" size="3x"></road-icon>
+              <road-label>Colletion</road-label>
+            </road-card>
+          </road-col>
+          <road-col class="col-6 col-md-4 col-lg-3">
+            <road-card button value="quad">
+              <road-icon name="vehicle-quad" size="3x"></road-icon>
+              <road-label>Quad</road-label>
+            </road-card>
+          </road-col>
+        </road-row>
+      </road-grid>
+    </div>
+  </road-collapse>
+`;
+VehicleTypes.parameters = {
+  backgrounds: {
+    default: 'grey',
+  },
+};

package/dist/collection/components/counter/counter.css

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+}
+
+road-input {
+  --input-text-align: center;
+  --border-radius: 0;
+}
+
+road-button {
+  font-size: 1.125rem;
+  background: var(--background-second);
+  border-color: var(--border-form);
+}
+
+road-button:hover {
+  background: var(--background);
+}

package/dist/collection/components/counter/counter.js

@@ -0,0 +1,158 @@
+import { Component, Host, h, Prop, Element, Event } from '@stencil/core';
+export class Counter {
+  constructor() {
+    /**
+     * The id of input
+     */
+    this.inputId = `road-counter-${counterIds++}`;
+    /**
+     * The value of the input.
+     */
+    this.value = 1;
+    this.increase = () => {
+      this.el.querySelector('input').stepUp();
+      this.roadIncrease.emit();
+    };
+    this.decrease = () => {
+      this.el.querySelector('input').stepDown();
+      this.roadDecrease.emit();
+    };
+  }
+  render() {
+    return (h(Host, null,
+      h("road-input-group", null,
+        h("road-button", { slot: "prepend", onClick: this.decrease }, "-"),
+        h("road-input", { type: "number", min: this.min, max: this.max, step: this.step, value: this.value }),
+        h("road-button", { slot: "append", onClick: this.increase }, "+"))));
+  }
+  static get is() { return "road-counter"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["counter.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["counter.css"]
+  }; }
+  static get properties() { return {
+    "inputId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The id of input"
+      },
+      "attribute": "input-id",
+      "reflect": false,
+      "defaultValue": "`road-counter-${counterIds++}`"
+    },
+    "min": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The minimum value, which must not be greater than its maximum (max attribute) value."
+      },
+      "attribute": "min",
+      "reflect": false
+    },
+    "max": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The maximum value, which must not be less than its minimum (min attribute) value."
+      },
+      "attribute": "max",
+      "reflect": false
+    },
+    "step": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number."
+      },
+      "attribute": "step",
+      "reflect": false
+    },
+    "value": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value of the input."
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "1"
+    }
+  }; }
+  static get events() { return [{
+      "method": "roadIncrease",
+      "name": "roadIncrease",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadDecrease",
+      "name": "roadDecrease",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}
+let counterIds = 0;

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

@@ -0,0 +1,40 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Forms/Counter',
+  component: 'road-counter',
+  parameters: {
+    actions: {
+      handles: ['roadChange', 'roadInput', 'roadBlur', 'roadFocus', 'roadIncrease', 'roadDecrease'],
+    },
+  },
+};
+
+export const Playground = ({min, max, step, value}) => html`
+  <road-counter 
+    min="${min}" 
+    max="${max}" 
+    step="${step}" 
+    value="${value}" 
+    ></road-counter>
+`;
+Playground.args = {
+  min: 1,
+  max: 20,
+  step: 1,
+  value: 1,
+};
+Playground.argTypes = {
+  min: {
+    control: 'number',
+  },
+  max: {
+    control: 'number',
+  },
+  step: {
+    control: 'number',
+  },
+  value: {
+    control: 'number',
+  },
+};

package/dist/collection/components/dialog/dialog.css

@@ -0,0 +1,195 @@
+/*
+ * Dialog
+ *
+ * Index
+ * - Overlay
+ * - Dialog
+ * - Dialog content
+ * - Dialog header
+ * - Dialog close
+ * - Dialog body
+ * - Dialog title
+ * - Dialog description
+ * - Dialog footer
+ *
+ */
+
+/**
+ * @prop --z-index: The z-index of the Dialog.
+ */
+
+:host {
+  --z-index: 3;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: var(--font, sans-serif);
+  line-height: 1.5;
+  color: var(--text);
+  visibility: hidden !important;
+  opacity: 0;
+  transition: opacity 0.15s linear, visibility 0.15s;
+}
+
+/* OVERLAY
+ -------------------- */
+
+.dialog-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  touch-action: none;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+:host(.dialog-has-close) .dialog-overlay {
+  cursor: pointer;
+}
+
+/* DIALOG
+ -------------------- */
+
+.dialog-modal {
+  position: relative;
+  width: auto;
+  margin: 1rem;
+  pointer-events: none;
+  transition: transform 0.3s ease-out;
+  transform: translateY(50px);
+}
+
+/**
+ * Open state
+ */
+
+:host(.dialog-open) {
+  visibility: visible !important;
+  opacity: 1;
+}
+
+:host(.dialog-open) .dialog-modal {
+  transform: none;
+}
+
+/* DIALOG CONTENT
+ -------------------- */
+
+.dialog-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 0 2rem;
+  pointer-events: auto;
+  background: var(--white);
+  background-clip: padding-box;
+  border-radius: 0.25rem;
+  outline: 0;
+  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
+}
+
+@media (min-width: 576px) {
+
+  .dialog-content {
+    max-width: 464px;
+  }
+}
+
+/* DIALOG HEADER
+ -------------------- */
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 3.5rem;
+}
+
+/* DIALOG CLOSE
+ -------------------- */
+
+.dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.dialog-icon {
+  display: inline-block;
+  width: 3rem;
+  height: 3rem;
+  font-size: 3rem;
+}
+
+/* DIALOG BODY
+ -------------------- */
+
+.dialog-body {
+  padding: 0 1.5rem;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+
+  .dialog-body {
+    padding: 0 3rem;
+  }
+}
+
+/* DIALOG TITLE
+ -------------------- */
+
+.dialog-title {
+  padding: 0;
+  margin: 0 0 1rem;
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+/* DIALOG DESCRIPTION
+ -------------------- */
+
+.dialog-description {
+  margin: 0 0 1.5rem;
+  font-size: 0.875rem;
+}
+
+/* DIALOG FOOTER
+ -------------------- */
+
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  padding: 0 1.5rem;
+}
+
+/**
+ * Footer buttons
+ */
+
+.dialog-footer .btn {
+  min-width: 130px;
+  max-width: calc(50% - 0.5rem);
+}