@roadtrip/components 2.25.0 → 2.25.1

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

@@ -1,8 +1,13 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
-  title: 'Listing/Carousel/road-carousel',
+  title: 'Listing/Carousel',
   component: 'road-carousel',
+  subcomponents: {
+    'road-carousel-item': 'road-carousel-item',
+  },
   parameters: {
     actions: {
       handles: [
@@ -21,96 +26,335 @@ export default {
         'roadSlideReachStart',
         'roadSlideReachEnd',
         'roadSlideTouchStart',
-        'roadSlideTouchEnd',
+        'roadSlideTouchEnd'
       ],
     },
+    docs: {
+      description: {
+        component: `The Carousel component is using child components named \`carousel-item\` to create different slides, so the content of each slide need to be in a \`carousel-item\` component.`,
+      },
+    },
   },
-};
-
-export const Playground = ({pager, arrows}) => html`
-  <road-carousel pager="${pager}" arrows="${arrows}">
-    <road-carousel-item>
-      <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-1.jpg" alt="roof bar diagram"></road-img>
-    </road-carousel-item>
-
-    <road-carousel-item>
-      <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-2.jpg" alt="roof bar on car"></road-img>
-    </road-carousel-item>
-
-    <road-carousel-item>
-      <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-4.jpg" alt="roof bar diagram mounting first step"></road-img>
-    </road-carousel-item>
-
-    <road-carousel-item>
-      <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-6.jpg" alt="roof bar diagram mounting second step"></road-img>
-    </road-carousel-item>
-
-    <road-carousel-item>
-      <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-8.jpg" alt="roof bar example"></road-img>
-    </road-carousel-item>
-  </road-carousel>
-`;
-Playground.args = {
-  pager: true,
-  arrows: false,
-};
-Playground.argTypes = {
-  pager: {
-    control: 'boolean',
-  },
-  arrows: {
-    control: 'boolean',
+  argTypes: {
+    pager: {
+      control: 'boolean',
+    },
+    arrows: {
+      control: 'boolean',
+    },
+    options: {
+      control: 'object',
+    },
+    ' ': {
+      control: 'text',
+    },
+    getActiveIndex : {
+      description: 'Get the index of the active slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'getActiveIndex() => Promise<number>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    getPreviousIndex : {
+      description: 'Get the index of the previous slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'etPreviousIndex() => Promise<number>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    getSwiper : {
+      description: 'Get the Swiper instance.\nUse this to access the full Swiper API.\nSee https://idangero.us/swiper/api/ for all API options.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'getSwiper() => Promise<any>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    isBeginning : {
+      description: 'Get whether or not the current slide is the first slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'isBeginning() => Promise<boolean>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    isEnd : {
+      description: 'Get whether or not the current slide is the last slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'isEnd() => Promise<boolean>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    length : {
+      description: 'Get the total number of slides.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'length() => Promise<number>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    lockSwipeToNext : {
+      description: 'Lock or unlock the ability to slide to the next slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'lockSwipeToNext(lock: boolean) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    lockSwipeToPrev : {
+      description: 'Lock or unlock the ability to slide to the previous slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'lockSwipeToPrev(lock: boolean) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    lockSwipes : {
+      description: 'Lock or unlock the ability to slide to the next or previous slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'lockSwipes(lock: boolean) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    slideNext : {
+      description: 'Transition to the next slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    slidePrev : {
+      description: 'Transition to the previous slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    slideTo : {
+      description: 'Transition to the specified slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    startAutoplay : {
+      description: 'Start auto play.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'startAutoplay() => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    stopAutoplay : {
+      description: 'Stop auto play.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'stopAutoplay() => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    update : {
+      description: 'Update the underlying slider implementation. Call this if you\'ve added or removed\nchild slides.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'update() => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    updateAutoHeight : {
+      description: 'Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to \'speed\' parameter.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'updateAutoHeight(speed?: number | undefined) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    roadSlidesDidLoad: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideTap: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideDoubleTap: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideWillChange: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideDidChange: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideNextStart: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlidePrevStart: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideNextEnd: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlidePrevEnd: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideTransitionStart: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideTransitionEnd: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideDrag: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideReachStart: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideReachEnd: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideTouchStart: {
+      control: {
+        type: null,
+      },
+    },
+    roadSlideTouchEnd: {
+      control: {
+        type: null,
+      },
+    },
   },
-};
-
-export const Default = () => html`
-  <road-carousel>
-
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-1.jpg"></road-img>
+  args: {
+    pager: undefined,
+    arrows: null,
+    ' ': `<road-carousel-item>
+    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-1.jpg" alt="roof bar diagram"></road-img>
   </road-carousel-item>
 
   <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-2.jpg"></road-img>
+    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-2.jpg" alt="roof bar on car"></road-img>
   </road-carousel-item>
 
   <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-4.jpg"></road-img>
+    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-4.jpg" alt="roof bar diagram mounting first step"></road-img>
   </road-carousel-item>
 
   <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-6.jpg"></road-img>
+    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-6.jpg" alt="roof bar diagram mounting second step"></road-img>
   </road-carousel-item>
 
   <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-8.jpg"></road-img>
-  </road-carousel-item>
+    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-8.jpg" alt="roof bar example"></road-img>
+  </road-carousel-item>`,
+  },
+};
 
+const Template = (args) => html`
+<road-carousel pager="${ifDefined(args.pager)}" arrows="${ifDefined(args.arrows)}" .options="${ifDefined(args.options)}">
+  ${unsafeHTML(args[' '])}
 </road-carousel>
 `;
 
-export const Arrows = () => html`
-  <road-carousel arrows>
+export const Playground = Template.bind({});
 
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-1.jpg"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-2.jpg"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-4.jpg"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-6.jpg"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-8.jpg"></road-img>
-  </road-carousel-item>
-
-</road-carousel>
-`;
+export const Arrows = Template.bind({});
+Arrows.args = {
+  arrows: true,
+};

package/dist/collection/components/checkbox/checkbox.js

@@ -18,7 +18,7 @@ export class Checkbox {
      */
     this.required = false;
     /**
-     * If `true`, the checkbox is selected.
+     * If `true`, the checkbox is checked.
      */
     this.checked = false;
     /**
@@ -142,7 +142,7 @@ export class Checkbox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "If `true`, the checkbox is selected."
+        "text": "If `true`, the checkbox is checked."
       },
       "attribute": "checked",
       "reflect": false,
@@ -261,7 +261,7 @@ export class Checkbox {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the toggle has focus."
+        "text": "Emitted when the checkbox has focus."
       },
       "complexType": {
         "original": "void",
@@ -276,7 +276,7 @@ export class Checkbox {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the toggle loses focus."
+        "text": "Emitted when the checkbox loses focus."
       },
       "complexType": {
         "original": "void",

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

@@ -9,75 +9,100 @@ export default {
       handles: ['roadBlur', 'roadFocus'],
     },
   },
-};
-
-export const Playground = (args) => html`
-  <road-checkbox 
-    checked="${args.checked}"
-    disabled="${args.disabled}"
-    required="${args.required}"
-    inverse="${args.inverse}"
-    error="${ifDefined(args.error)}"
-    label="${args.label}"
-    name="${ifDefined(args.name)}"
-    value="${args.value}"
-    @roadChange=${event => args.roadChange(event.detail)}
-  ></road-checkbox>
-`;
-Playground.args = {
-  checked: false,
-  disabled: false,
-  required: false,
-  inverse: false,
-  label: 'Label',
-  value: 'on',
-};
-Playground.argTypes = {
-  checked: {
-    control: 'boolean',
-  },
-  disabled: {
-    control: 'boolean',
-  },
-  required: {
-    control: 'boolean',
-  },
-  inverse: {
-    control: 'boolean',
-  },
-  error: {
-    control: 'text',
-  },
-  label: {
-    control: 'text',
-  },
-  name: {
-    control: 'text',
-  },
-  value: {
-    control: 'text',
+  argTypes: {
+    checked: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    required: {
+      control: 'boolean',
+    },
+    inverse: {
+      control: 'boolean',
+    },
+    error: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    'checkbox-id': {
+      control: 'text',
+    },
+    value: {
+      control: 'text',
+    },
+    ' ': {
+      control: {
+        type: null,
+      },
+    },
+    roadBlur: {
+      control: {
+        type: null,
+      },
+    },
+    roadFocus: {
+      control: {
+        type: null,
+      },
+    },
+    roadChange: {
+      action: 'roadChange',
+      control: {
+        type: null,
+      },
+    },
   },
-  roadChange: {
-    action: 'roadChange',
+  args: {
+    checked: null,
+    disabled: null,
+    inverse: null,
+    label: 'Label',
+    required: null,
+    value: 'on',
   },
 };
 
-export const Default = () => html`
-  <road-checkbox label="Label" value="on"></road-checkbox>
+const Template = (args) => html`
+<road-checkbox 
+  checked="${ifDefined(args.checked)}"
+  disabled="${ifDefined(args.disabled)}"
+  error="${ifDefined(args.error)}"
+  inverse="${ifDefined(args.inverse)}"
+  label="${ifDefined(args.label)}"
+  name="${ifDefined(args.name)}"
+  required="${ifDefined(args.required)}"
+  value="${ifDefined(args.value)}"
+  checkbox-id="${ifDefined(args['checkbox-id'])}"
+  @roadChange=${event => args.roadChange(event.detail)}
+></road-checkbox>
 `;
 
-export const Inverse = () => html`
-  <road-checkbox label="Label" inverse value="on"></road-checkbox>
-`;
+export const Playground  = Template.bind({});
 
-export const Checked = () => html`
-  <road-checkbox label="Label" checked value="on"></road-checkbox>
-`;
+export const Checked = Template.bind({});
+Checked.args = {
+  checked: true,
+};
 
-export const Disabled = () => html`
-  <road-checkbox label="Label" disabled value="on"></road-checkbox>
-`;
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
 
-export const Error = () => html`
-  <road-checkbox label="Label" value="on" required error="Check the checkbox to continue"></road-checkbox>
-`;
+export const Error = Template.bind({});
+Error.args = {
+  required: true,
+  error: 'Check the checkbox to continue',
+};
+
+export const Inverse = Template.bind({});
+Inverse.args = {
+  inverse: true,
+};

package/dist/collection/components/chip/chip.js

@@ -11,15 +11,15 @@ export class Chip {
      */
     this.color = 'default';
     /**
-     * Display an outline style button.
+     * Display an outline style chip.
      */
     this.outline = false;
     /**
-     * Display an outline style button.
+     * The chip size.
      */
     this.size = 'md';
     /**
-     * Display close icon
+     * Display a close icon
      */
     this.hasCloseIcon = false;
   }
@@ -68,7 +68,7 @@ export class Chip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display an outline style button."
+        "text": "Display an outline style chip."
       },
       "attribute": "outline",
       "reflect": false,
@@ -86,7 +86,7 @@ export class Chip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display an outline style button."
+        "text": "The chip size."
       },
       "attribute": "size",
       "reflect": false,
@@ -104,7 +104,7 @@ export class Chip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display close icon"
+        "text": "Display a close icon"
       },
       "attribute": "has-close-icon",
       "reflect": false,