@roadtrip/components 2.21.0 → 2.24.0

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

@@ -0,0 +1,138 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Forms/Select Filter',
+  component: 'road-select-filter',
+  parameters: {
+    actions: {
+      handles: ['roadBlur', 'roadFocus'],
+    },
+  },
+};
+
+export const Playground = (args) => {
+  const options = [
+    { value: 'audi', label: 'Audi' },
+    { value: 'bmw', label: 'BMW' },
+    { value: 'citroen', label: 'Citroën' },
+    { value: 'mercedes-benz', label: 'Mercedes-benz' },
+    { value: 'peugeot', label: 'Peugeot' },
+    { value: 'renault', label: 'Renault' }
+  ];
+
+  return html`
+  <road-select-filter .options=${options} @roadSelected=${event => args.roadSelected(event.detail)}>
+    <road-input-group>
+      <road-input input-id="brand" label="Brand" class="mb-0"></road-input>
+      <label slot="append" for="brand">
+        <road-icon name="arrow-drop" focusable="false"></road-icon>
+      </label>
+    </road-input-group>
+  </road-select-filter>
+
+  <!-- br are here only until we find how to add a margin only for Storybook docs block, do not copy them -->
+  <br><br><br><br><br><br><br><br><br><br><br><br><br>
+  `;
+};
+Playground.argTypes = {
+  roadSelected: {
+    action: 'roadSelected',
+  },
+};
+
+export const WithValue = () => {
+  const options = [
+    { value: 'audi', label: 'Audi' },
+    { value: 'bmw', label: 'BMW' },
+    { value: 'citroen', label: 'Citroën' },
+    { value: 'mercedes-benz', label: 'Mercedes-benz' },
+    { value: 'peugeot', label: 'Peugeot' },
+    { value: 'renault', label: 'Renault' }
+  ];
+
+  return html`
+  <road-select-filter .options=${options}>
+    <road-input-group>
+      <road-input input-id="brand2" label="Brand" value="Audi" class="mb-0"></road-input>
+      <label slot="append" for="brand2">
+        <road-icon name="arrow-drop" focusable="false"></road-icon>
+      </label>
+    </road-input-group>
+  </road-select-filter>
+  `;
+};
+
+export const Disabled = () => {
+  const options = [
+    { value: 'audi', label: 'Audi' },
+    { value: 'bmw', label: 'BMW' },
+    { value: 'citroen', label: 'Citroën' },
+    { value: 'mercedes-benz', label: 'Mercedes-benz' },
+    { value: 'peugeot', label: 'Peugeot' },
+    { value: 'renault', label: 'Renault' }
+  ];
+
+  return html`
+  <road-select-filter .options=${options}>
+    <road-input-group>
+      <road-input input-id="brand3" label="Brand" disabled class="mb-0"></road-input>
+      <label slot="append" for="brand3">
+        <road-icon name="arrow-drop" focusable="false"></road-icon>
+      </label>
+    </road-input-group>
+  </road-select-filter>
+  `;
+};
+
+export const Error = () => {
+  const options = [
+    { value: 'audi', label: 'Audi' },
+    { value: 'bmw', label: 'BMW' },
+    { value: 'citroen', label: 'Citroën' },
+    { value: 'mercedes-benz', label: 'Mercedes-benz' },
+    { value: 'peugeot', label: 'Peugeot' },
+    { value: 'renault', label: 'Renault' }
+  ];
+
+  return html`
+  <road-select-filter .options=${options}>
+    <road-input-group>
+      <road-input input-id="brand4" label="Brand" error="Select a Brand" class="mb-0"></road-input>
+      <label slot="append" for="brand4">
+        <road-icon name="arrow-drop" focusable="false"></road-icon>
+      </label>
+    </road-input-group>
+  </road-select-filter>
+  `;
+};
+
+export const withHTML = () => {
+  const options = [
+    {
+      "value": 31,
+      "label": "<b>Original equipment electronics</b> > Cleaning Injection",
+    },
+    {
+      "value": 4,
+      "label": "<b>Exhaust / Pollution</b> > Replacement EGR",
+    },
+    {
+      "value": 14,
+      "label": "<b>Drain and filter</b> > Oil filter + fuel filter",
+    }
+  ];
+
+  return html`
+    <road-select-filter .options=${options}>
+      <road-input-group>
+        <road-input input-id="controls" label="Controls" class="mb-0"></road-input>
+        <label slot="append" for="brand">
+          <road-icon name="arrow-drop" focusable="false"></road-icon>
+        </label>
+      </road-input-group>
+    </road-select-filter>
+
+    <!-- br are here only until we find how to add a margin only for Storybook docs block, do not copy them -->
+    <br><br><br><br><br><br><br><br><br><br><br><br><br>
+  `;
+};

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

@@ -3,8 +3,7 @@
  *
  * Index
  * - Skeleton
- * - Skeleton animation
- *
+ * - Animation
  */
 
 
@@ -18,13 +17,13 @@
   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;
+  animation: road-skeleton-animation 1s linear infinite;
 }
 
-/* SKELETON ANIMATION
+/* ANIMATION
 -------------------- */
 
-@keyframes roadSkeletonAnimation {
+@keyframes road-skeleton-animation {
 
   0% {
     background-position: -468px 0;

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

@@ -3,9 +3,8 @@
  *
  * Index
  * - Spinner
- * - Spinner circle
- * - Spinner animation
- *
+ * - Circle
+ * - Animation
  */
 
 :host {
@@ -19,14 +18,14 @@
   width: 3rem;
   height: 3rem;
   transform-origin: center;
-  animation: roadRotate 2s linear infinite;
+  animation: road-rotate 2s linear infinite;
 }
 
-/* SPINNER CIRCLE
+/* CIRCLE
  -------------------- */
 
 .spinner-circle {
-  animation: roadDash 1.5s ease-in-out infinite;
+  animation: road-dash 1.5s ease-in-out infinite;
   fill: none;
   stroke: var(--secondary);
   stroke-width: 3;
@@ -35,17 +34,17 @@
   stroke-linecap: round;
 }
 
-/* SPINNER ANIMATION
+/* ANIMATION
  -------------------- */
 
-@keyframes roadRotate {
+@keyframes road-rotate {
 
   100% {
     transform: rotate(360deg);
   }
 }
 
-@keyframes roadDash {
+@keyframes road-dash {
 
   0% {
     stroke-dasharray: 1, 200;

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

@@ -7,11 +7,10 @@
  *
  * Index
  * - Switch
- * - Switch label
- * - Switch lever
- * - Switch feedback
- * - Switch position
- *
+ * - Label
+ * - Lever
+ * - Feedback
+ * - Position
  */
 
 /**
@@ -42,16 +41,17 @@
   opacity: 0;
 }
 
-/* SWITCH LABEL
+/* LABEL
  -------------------- */
 
 .form-switch-label {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-/* SWITCH LEVER
+/* LEVER
  -------------------- */
 
 .form-switch-lever {
@@ -129,7 +129,7 @@
   box-shadow: 0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary);
 }
 
-/* SWITCH FEEDBACK
+/* FEEDBACK
  -------------------- */
 
 /**
@@ -145,7 +145,7 @@
 }
 
 /**
- * Information
+ * Info
  */
 
 .form-switch-input:checked ~ .form-switch-info .form-switch-lever {
@@ -192,7 +192,7 @@
   color: var(--danger-contrast);
 }
 
-/* SWITCH POSITION
+/* POSITION
  -------------------- */
 
 .form-switch-right {

package/dist/collection/components/tab/tab.js

@@ -44,8 +44,8 @@ export class Tab {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/tab-bar/tab-bar.js

@@ -103,8 +103,8 @@ export class TabBar {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -2,11 +2,12 @@
  * Tab button
  *
  * Index
- * - Tab button
- * - Tab item
- * - Tab link
- * - Tab icon
- * - Active state
+ * - Button
+ * - Native
+ * - Underline
+ * - Inner
+ * - Icon
+ * - Label
  *
  */
 
@@ -21,7 +22,7 @@
  */
 
 
-/* TAB BUTTON
+/* BUTTON
  -------------------- */
 
 :host {
@@ -68,7 +69,7 @@
 }
 
 
-/* TAB NATIVE BUTTON
+/* NATIVE
  -------------------- */
 
 .button-native {
@@ -81,10 +82,7 @@
   width: 100%;
   height: 100%;
   min-height: 3.5rem;
-  padding-top: 0.75rem;
-  padding-right: var(--padding-end, 1.5rem);
-  padding-bottom: 0.75rem;
-  padding-left: var(--padding-start, 1.5rem);
+  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);
   margin: 0;
   overflow: hidden;
   font-family: inherit;
@@ -108,9 +106,10 @@
   border-radius: inherit;
   border-image: initial;
   outline: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-/* TAB BUTTON UNDERLINE INDICATOR
+/* UNDERLINE
  -------------------- */
 
 .button-native::after {
@@ -127,7 +126,7 @@
   transform-origin: center;
 }
 
-/* TAB BUTTON INNER
+/* INNER
  -------------------- */
 
 .button-inner {
@@ -141,7 +140,7 @@
   height: 100%;
 }
 
-/* TAB ICON
+/* ICON
  -------------------- */
 
 :host ::slotted(road-icon) {
@@ -156,7 +155,7 @@
   flex-direction: column;
 }
 
-/* TAB LABEL
+/* LABEL
  -------------------- */
 
 :host(.tab-layout-icon-top) ::slotted(road-label) {

package/dist/collection/components/tab-button/tab-button.js

@@ -213,8 +213,8 @@ export class TabButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when the tab bar is clicked"
       },

package/dist/collection/components/table/table.css

@@ -1,5 +1,6 @@
 /*
  * Table
+ *
  */
 
 :host {

package/dist/collection/components/tabs/tabs.css

@@ -1,3 +1,8 @@
+/*
+ * Tabs
+ *
+ */
+
 :host {
   position: relative;
   display: block;

package/dist/collection/components/tabs/tabs.js

@@ -139,8 +139,8 @@ export class Tabs {
         "signature": "(tab: string | HTMLRoadTabElement) => Promise<boolean>",
         "parameters": [{
             "tags": [{
-                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.",
-                "name": "param"
+                "name": "param",
+                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
               }],
             "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
           }],
@@ -167,8 +167,8 @@ export class Tabs {
         "signature": "(tab: string | HTMLRoadTabElement) => Promise<HTMLRoadTabElement | undefined>",
         "parameters": [{
             "tags": [{
-                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.",
-                "name": "param"
+                "name": "param",
+                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
               }],
             "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
           }],

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

@@ -1,8 +1,13 @@
 import { html } from 'lit-html';
 
 export default {
-  title: 'Navigation/Tabs/road-tabs',
+  title: 'Navigation/Tabs',
   component: 'road-tabs',
+  subcomponents: {
+    RoadTabBar: 'road-tab-bar',
+    RoadTabButton: 'road-tab-button',
+    RoadTab: 'road-tab',
+  },
   parameters: {
     actions: {
       handles: ['roadTabButtonClick'],
@@ -15,7 +20,7 @@ export default {
 };
 
 export const Default = () => html`
-  <road-tabs>
+<road-tabs>
   <road-tab-bar slot="top" selected-tab="tab-description">
     <road-tab-button tab="tab-description">
       <road-label>Description</road-label>
@@ -37,7 +42,7 @@ export const Default = () => html`
 `;
 
 export const Scrollable = () => html`
-  <road-tabs>
+<road-tabs>
   <road-tab-bar slot="top" selected-tab="tab-description">
     <road-tab-button tab="tab-description">
       <road-label>Description</road-label>
@@ -75,7 +80,7 @@ export const Scrollable = () => html`
 `;
 
 export const Center = () => html`
-  <road-tabs>
+<road-tabs>
   <road-tab-bar slot="top" center>
     <road-tab-button tab="tab-list">
       <road-label>List</road-label>
@@ -97,7 +102,7 @@ export const Center = () => html`
 `;
 
 export const Expand = () => html`
-  <road-tabs>
+<road-tabs>
   <road-tab-bar slot="top" expand>
     <road-tab-button tab="tab-list">
       <road-label>List</road-label>
@@ -119,7 +124,7 @@ export const Expand = () => html`
 `;
 
 export const LeadingIcon = () => html`
-  <road-tabs>
+<road-tabs>
   <road-tab-bar slot="top" expand>
     <road-tab-button tab="tab-list">
       <road-icon name="garage"></road-icon>
@@ -143,7 +148,7 @@ export const LeadingIcon = () => html`
 `;
 
 export const TopIcon = () => html`
-  <road-tabs>
+<road-tabs>
   <road-tab-bar slot="top" expand>
     <road-tab-button tab="tab-shops" layout="icon-top">
       <road-icon name="shop"></road-icon>

package/dist/collection/components/text/text.css

@@ -1,46 +1,97 @@
-/* TEXT COLORS
+/*
+ * Text
+ *
+ * Index
+ * - Colors
+ */
+
+/* COLORS
  -------------------- */
 
+/**
+ * Primary
+ */
+
 :host(.text-primary) {
   color: var(--primary);
 }
 
+/**
+ * Secondary
+ */
+
 :host(.text-secondary) {
   color: var(--secondary);
 }
 
+/**
+ * Accent
+ */
+
 :host(.text-accent) {
   color: var(--accent);
 }
 
+/**
+ * Info
+ */
+
 :host(.text-info) {
   color: var(--info);
 }
 
+/**
+ * Success
+ */
+
 :host(.text-success) {
   color: var(--success);
 }
 
+/**
+ * Warning
+ */
+
 :host(.text-warning) {
   color: var(--warning);
 }
 
+/**
+ * Danger
+ */
+
 :host(.text-danger) {
   color: var(--danger);
 }
 
+/**
+ * Default
+ */
+
 :host(.text-default) {
   color: var(--text);
 }
 
+/**
+ * Default second
+ */
+
 :host(.text-default-second) {
   color: var(--text-second);
 }
 
+/**
+ * Disabled
+ */
+
 :host(.text-disabled) {
   color: var(--text-disabled);
 }
 
+/**
+ * White
+ */
+
 :host(.text-white) {
   color: var(--white);
 }

package/dist/collection/components/textarea/textarea.css

@@ -1,12 +1,11 @@
 /*
- * Input
+ * Textarea
  *
  * Index
  * - Input
  * - Textarea
- * - Input label
- * - Input error
- *
+ * - Label
+ * - Error
  */
 
 
@@ -43,10 +42,6 @@
  * Placeholder
  */
 
-.form-control:-ms-input-placeholder {
-  color: var(--text-second);
-}
-
 .form-control::placeholder {
   color: var(--text-second);
 }
@@ -61,10 +56,6 @@
   transform: scale(0.7) translateY(-0.75rem);
 }
 
-.form-control:-ms-input-placeholder ~ .form-label {
-  transform: scale(0.7) translateY(-0.75rem);
-}
-
 .form-control:placeholder-shown ~ .form-label {
   transform: scale(0.7) translateY(-0.75rem);
 }
@@ -104,7 +95,7 @@
 }
 
 
-/* INPUT LABEL
+/* LABEL
  -------------------- */
 
 .form-label {
@@ -120,7 +111,7 @@
   transform-origin: 0 0;
 }
 
-/* INPUT ERROR
+/* ERROR
  -------------------- */
 
 .invalid-feedback {