@roadtrip/components 2.25.0 → 2.25.1

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

@@ -9,7 +9,7 @@ export const Playground = ({ value, color }) => html`
   <road-progress value="${value}" color="${color}"></road-progress>
 `;
 Playground.args = {
-  value: '25',
+  value: 25,
   color: 'info',
 };
 Playground.argTypes = {
@@ -29,7 +29,7 @@ Playground.argTypes = {
 };
 
 export const Value = () => html`
-  <road-progress value="0"></road-progress>
+<road-progress value="0"></road-progress>
 
 <br>
 
@@ -49,7 +49,7 @@ export const Value = () => html`
 `;
 
 export const color = () => html`
-  <road-progress value="80" color="info"></road-progress>
+<road-progress value="80" color="info"></road-progress>
 
 <br>
 

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

@@ -5,7 +5,7 @@ export default {
   title: 'Forms/Radio',
   component: 'road-radio',
   subcomponents: {
-    RoadRadioGroup: 'road-radio-group'
+    'road-radio-group': 'road-radio-group',
   },
   parameters: {
     actions: {
@@ -13,38 +13,39 @@ export default {
     },
     docs: {
       description: {
-        component: 'A radio is used in a `radio-group`. It allows a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group.'
-      }
-    }
+        component: 'A radio is used in a `radio-group`. It allows a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group.',
+      },
+    },
   },
 };
 
 export const Playground = (args) => html`
-  <road-radio-group 
-    name="${ifDefined(args.name)}"
-    label="Label of radio group" 
-    error="${ifDefined(args.error)}" 
-    @roadChange=${event => args.roadChange(event.detail.value)}
-    asterisk="${args.asterisk}"
-  >
-    <road-radio
-      disabled="${args.disabled}"
-      required="${args.required}"
-      label="${args.label}"
-      inverse="${args.inverse}"
-      inline="${args.inline}"
-      value="${args.value}"
-    ></road-radio>
-  </road-radio-group>
+<road-radio-group 
+  name="${ifDefined(args.name)}"
+  label="Label of radio group" 
+  error="${ifDefined(args.error)}" 
+  @roadChange=${event => args.roadChange(event.detail.value)}
+  asterisk="${ifDefined(args.asterisk)}"
+>
+  <road-radio
+    disabled="${ifDefined(args.disabled)}"
+    required="${ifDefined(args.required)}"
+    label="${ifDefined(args.label)}"
+    inverse="${ifDefined(args.inverse)}"
+    inline="${ifDefined(args.inline)}"
+    value="${ifDefined(args.value)}"
+    radio-id="${ifDefined(args['radio-id'])}"
+  ></road-radio>
+</road-radio-group>
 `;
 Playground.args = {
-  disabled: false,
-  required: false,
-  inverse: false,
-  inline: false,
+  disabled: null,
+  required: null,
+  inverse: null,
+  inline: undefined,
   label: 'Label',
   value: 'on',
-  asterisk: false
+  asterisk: null,
 };
 Playground.argTypes = {
   disabled: {
@@ -74,13 +75,29 @@ Playground.argTypes = {
   value: {
     control: 'text',
   },
+  'radio-id': {
+    control: 'text',
+  },
+  roadBlur: {
+    control: {
+      type: null,
+    },
+  },
+  roadFocus: {
+    control: {
+      type: null,
+    },
+  },
   roadChange: {
     action: 'roadChange',
+    control: {
+      type: null,
+    },
   },
 };
 
 export const Inline = () => html`
-  <road-radio-group name="NameOfTheField" value="1">
+<road-radio-group name="NameOfTheField" value="1">
   <road-radio label="Label1" value="1"></road-radio>
   <road-radio label="Label2" value="2"></road-radio>
   <road-radio label="Label3" value="3"></road-radio>
@@ -88,7 +105,7 @@ export const Inline = () => html`
 `;
 
 export const Stacked = () => html`
-  <road-radio-group name="NameOfTheField">
+<road-radio-group name="NameOfTheField">
   <road-radio label="Label1" value="1" inline="false"></road-radio>
   <road-radio label="Label2" value="2" inline="false"></road-radio>
   <road-radio label="Label3" value="3" inline="false"></road-radio>
@@ -96,7 +113,7 @@ export const Stacked = () => html`
 `;
 
 export const Inverse = () => html`
-  <road-radio-group name="NameOfTheField">
+<road-radio-group name="NameOfTheField">
   <road-radio inverse label="Label1" value="1" inline="false"></road-radio>
   <road-radio inverse label="Label2" value="2" inline="false"></road-radio>
   <road-radio inverse label="Label3" value="3" inline="false"></road-radio>
@@ -104,7 +121,7 @@ export const Inverse = () => html`
 `;
 
 export const Disabled = () => html`
-  <road-radio-group name="NameOfTheField">
+<road-radio-group name="NameOfTheField">
   <road-radio label="Label1" value="1" disabled></road-radio>
   <road-radio label="Label2" value="2" disabled></road-radio>
   <road-radio label="Label3" value="3" disabled></road-radio>
@@ -112,7 +129,7 @@ export const Disabled = () => html`
 `;
 
 export const Error = () => html`
-  <road-radio-group name="NameOfTheField" error="Check the radio to continue">
+<road-radio-group name="NameOfTheField" error="Check the radio to continue">
   <road-radio label="Label1" value="1"></road-radio>
   <road-radio label="Label2" value="2"></road-radio>
   <road-radio label="Label3" value="3"></road-radio>

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

@@ -1,44 +1,51 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
   title: 'Forms/Range',
   component: 'road-range',
+  argTypes: {
+    min: {
+      control: 'number',
+    },
+    max: {
+      control: 'number',
+    },
+    step: {
+      control: 'number',
+    },
+    value: {
+      control: 'number',
+    },
+    'show-value': {
+      control: 'boolean',
+    },
+    'range-id': {
+      control: 'text',
+    },
+    roadChange: {
+      action: 'roadChange',
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    min: 0,
+    max: 10,
+    step: null,
+    value: 8,
+    'show-value': null,
+  },
 };
 
 export const Playground = (args) => html`
   <road-range
-    min="${args.min}" 
-    max="${args.max}"
-    step="${args.step}" 
-    value="${args.value}"
-    show-value="${args['show-value']}"
+    min="${ifDefined(args.min)}" 
+    max="${ifDefined(args.max)}"
+    step="${ifDefined(args.step)}" 
+    value="${ifDefined(args.value)}"
+    show-value="${ifDefined(args['show-value'])}"
     @roadChange=${event => args.roadChange(event.detail.value)}
   ></road-range>
 `;
-Playground.args = {
-  min: '0',
-  max: '10',
-  step: '1',
-  value: '8',
-  'show-value': false,
-};
-Playground.argTypes = {
-  min: {
-    control: 'number',
-  },
-  max: {
-    control: 'number',
-  },
-  step: {
-    control: 'number',
-  },
-  value: {
-    control: 'number',
-  },
-  'show-value': {
-    control: 'boolean',
-  },
-  roadChange: {
-    action: 'roadChange',
-  },
-};

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

@@ -1,45 +1,54 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
   title: 'Listing/Rating',
   component: 'road-rating',
+  argTypes: {
+    rate: {
+      control: {
+        type: 'number',
+        min: '0',
+        max: '5',
+      },
+    },
+    reviews: {
+      control: {
+        type: 'number',
+        min: '0',
+      },
+    },
+    'reviews-text': {
+      control: 'text',
+    },
+  },
 };
 
-export const Playground = (args) => html`
-  <road-rating rate="${args.rate}" reviews="${args.reviews}" reviews-text="${args['reviews-text']}"></road-rating>
+const Template = (args) => html`
+<road-rating 
+  rate="${ifDefined(args.rate)}" 
+  reviews="${ifDefined(args.reviews)}" 
+  reviews-text="${ifDefined(args['reviews-text'])}" 
+></road-rating>
 `;
+
+export const Playground = Template.bind({});
 Playground.args = {
-  rate: '3',
-  reviews: '5',
+  rate: 3,
+  reviews: 5,
   'reviews-text': 'reviews',
 };
-Playground.argTypes = {
-  rate: {
-    control: {
-      type: 'number',
-      min: '0',
-      max: '5',
-    },
-  },
-  reviews: {
-    control: {
-      type: 'number',
-      min: '0',
-    },
-  },
-  'reviews-text': {
-    control: 'text',
-  },
-};
 
-export const MinRating = () => html`
-  <road-rating></road-rating>
-`;
+export const MinRating = Template.bind({});
 
-export const Rating = () => html`
-  <road-rating rate="3.5" reviews="4"></road-rating>
-`;
+export const Rating = Template.bind({});
+Rating.args = {
+  rate: 3.5,
+  reviews: 4,
+};
 
-export const MaxRating = () => html`
-  <road-rating rate="5" reviews="50"></road-rating>
-`;
+export const MaxRating = Template.bind({});
+MaxRating.args = {
+  rate: 5,
+  reviews: 50,
+};

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

@@ -9,105 +9,97 @@ export default {
       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',
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    required: {
+      control: 'boolean',
+    },
+    autofocus: {
+      control: 'boolean',
+    },
+    error: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    size: {
+      control: 'number',
+    },
+    'select-id': {
+      control: 'text',
+    },
+    value: {
+      control: 'text',
+    },
+    roadBlur: {
+      control: {
+        type: null,
+      },
+    },
+    roadFocus: {
+      control: {
+        type: null,
+      },
+    },
+    roadChange: {
+      action: 'roadChange',
+      control: {
+        type: null,
+      },
+    },
   },
-  roadChange: {
-    action: 'roadChange',
+  args: {
+    options: [
+      { value: 'link1', label: 'link1' },
+      { value: 'link2', label: 'link2' },
+      { value: 'link3', label: 'link3' }
+    ],
+    disabled: null,
+    required: null,
+    label: 'Label',
+    autofocus: null,
   },
 };
 
-export const Default = () => {
-  const options = [
-    { value: 'link1', label: 'link1' },
-    { value: 'link2', label: 'link2' },
-    { value: 'link3', label: 'link3' }
-  ];
+const Template = (args) => html`
+  <road-select 
+    .options=${args.options}
+    label="${ifDefined(args.label)}"
+    disabled="${ifDefined(args.disabled)}"
+    required="${ifDefined(args.required)}"
+    autofocus="${ifDefined(args.autofocus)}"
+    error="${ifDefined(args.error)}"
+    size="${ifDefined(args.size)}"
+    select-id="${ifDefined(args['select-id'])}"
+    value="${ifDefined(args.value)}"
+    @roadChange=${event => args.roadChange(event.detail.value)}
+  ></road-select>
+`;
 
-  return html`
-    <road-select .options=${options} label="Label" required></road-select>
-  `;
-};
+export const Playground = Template.bind({});
 
-export const WithValue = () => {
-  const options = [
+export const WithValue = Template.bind({});
+WithValue.args = {
+  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>
-  `;
+  ],
+  value: 'link1',
 };
 
-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 Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
 };
 
-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>
-  `;
-};
+export const Error = Template.bind({});
+Error.args = {
+  error: 'Select an item',
+};