@roadtrip/components 2.27.0 → 2.29.0

package/dist/collection/components/textarea/textarea.js

@@ -21,6 +21,10 @@ export class Textarea {
      * The name of the control, which is submitted with the form data.
      */
     this.name = this.textareaId;
+    /**
+     * The sizes of the input.
+     */
+    this.sizes = 'lg';
     /**
      * If `true`, the user cannot modify the value.
      */
@@ -73,10 +77,11 @@ export class Textarea {
     const labelId = this.textareaId + '-label';
     const hasValueClass = this.value !== '' ? 'has-value' : '';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null },
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` },
       h("textarea", { class: `form-control textarea-control ${hasValueClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }),
       h("label", { class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label),
-      this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error)));
+      this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error),
+      this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper)));
   }
   static get is() { return "road-textarea"; }
   static get encapsulation() { return "scoped"; }
@@ -262,6 +267,24 @@ export class Textarea {
       "attribute": "placeholder",
       "reflect": false
     },
+    "sizes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'lg' | 'xl'",
+        "resolved": "\"lg\" | \"xl\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The sizes of the input."
+      },
+      "attribute": "sizes",
+      "reflect": false,
+      "defaultValue": "'lg'"
+    },
     "readonly": {
       "type": "boolean",
       "mutable": false,
@@ -419,6 +442,23 @@ export class Textarea {
       },
       "attribute": "error",
       "reflect": false
+    },
+    "helper": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Helper message for the field"
+      },
+      "attribute": "helper",
+      "reflect": false
     }
   }; }
   static get events() { return [{

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

@@ -28,6 +28,9 @@ export default {
     error: {
       control: 'text',
     },
+    helper: {
+      control: 'text',
+    },
     label: {
       control: 'text',
     },
@@ -46,6 +49,12 @@ export default {
     value: {
       control: 'text',
     },
+    sizes: {
+      options: ['lg', 'xl'],
+      control: {
+        type: 'select',
+      },
+    },
     autocapitalize: {
       options: ['on', 'off'],
       control: {
@@ -110,12 +119,13 @@ export default {
   },
   args: {
     label: 'Label',
+    sizes: 'xl',
     disabled: null,
     readonly: null,
     required: null,
     autofocus: null,
     spellcheck: null,
-    rows: 5,
+    rows: 3,
   },
 };
 
@@ -127,9 +137,11 @@ const Template = (args) => html`
     required="${ifDefined(args.required)}"
     autofocus="${ifDefined(args.autofocus)}"
     error="${ifDefined(args.error)}"
+    helper="${ifDefined(args.helper)}"
     maxlength="${ifDefined(args.maxlength)}"
     minlength="${ifDefined(args.minlength)}"
-    value="${ifDefined(args.value)}" 
+    sizes="${ifDefined(args.sizes)}"
+    value="${ifDefined(args.value)}"
     spellcheck="${ifDefined(args.spellcheck)}"
     placeholder="${ifDefined(args.placeholder)}"
     autocapitalize="${ifDefined(args.autocapitalize)}"
@@ -161,3 +173,8 @@ Error.args = {
   error: 'This field is required',
   required: true,
 };
+
+export const Helper = Template.bind({});
+Helper.args = {
+  helper: 'This field is required',
+};

package/dist/collection/components/toast/toast.css

@@ -70,7 +70,7 @@
   padding: 1.5rem 2rem 1.5rem 3rem;
   margin-right: 0.5rem;
   margin-left: 0.5rem;
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
   font-size: 0.875rem;
   line-height: 1.4;
   text-align: left;
@@ -104,12 +104,12 @@
  */
 
 .toast-danger {
-  color: var(--danger-contrast);
-  background: var(--danger);
+  color: var(--road-danger-contrast);
+  background: var(--road-danger-default);
 }
 
 .toast-danger road-icon {
-  color: var(--danger-contrast);
+  color: var(--road-danger-contrast);
 }
 
 /**
@@ -117,12 +117,12 @@
  */
 
 .toast-warning {
-  color: var(--warning-contrast);
-  background: var(--warning);
+  color: var(--road-warning-contrast);
+  background: var(--road-warning-default);
 }
 
 .toast-warning road-icon {
-  color: var(--white);
+  color: var(--road-grey-000);
 }
 
 /**
@@ -130,12 +130,12 @@
  */
 
 .toast-success {
-  color: var(--success-contrast);
-  background: var(--success);
+  color: var(--road-success-contrast);
+  background: var(--road-success-default);
 }
 
 .toast-success road-icon {
-  color: var(--success-contrast);
+  color: var(--road-success-contrast);
 }
 
 /**
@@ -143,12 +143,12 @@
  */
 
 .toast-info {
-  color: var(--info-contrast);
-  background: var(--info);
+  color: var(--road-info-contrast);
+  background: var(--road-info-default);
 }
 
 .toast-info road-icon {
-  color: var(--info-contrast);
+  color: var(--road-info-contrast);
 }
 
 /* FEEDBACK ICON
@@ -192,6 +192,6 @@
  */
 
 .toast-close:focus {
-  border-color: var(--info);
+  border-color: var(--road-info-default);
   outline: none;
 }

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;
+}