@roadtrip/components 2.23.0 → 2.25.1

package/dist/collection/components/img/img.css

@@ -3,9 +3,8 @@
  *
  * Index
  * - Img
- * - Native-img
+ * - Native
  * - Placeholder
- *
  */
 
 
@@ -14,7 +13,7 @@
   object-fit: contain;
 }
 
-/* NATIVE IMG
+/* NATIVE
  -------------------- */
 
 .native-img {

package/dist/collection/components/input/input.css

@@ -4,24 +4,23 @@
  * Index
  * - Input
  * - Textarea
- * - Input label
- * - Input error
- *
+ * - Label
+ * - Error
  */
 
 /**
- * @prop --input-text-align: align the content of the field
  * @prop --border-radius: Border radius of the field
- * @prop --margin-bottom: Bottom margin of the field
  * @prop --height: height of the field
+ * @prop --input-text-align: align the content of the field
+ * @prop --margin-bottom: Bottom margin of the field
  */
 
 
 :host {
-  --input-text-align: left;
+  --height: 3rem;
   --border-radius: 0.25rem;
+  --input-text-align: left;
   --margin-bottom: 1rem;
-  --height: 3rem;
 
   position: relative;
   display: block;
@@ -129,7 +128,7 @@
   opacity: 1;
 }
 
-/* INPUT LABEL
+/* LABEL
  -------------------- */
 
 .form-label {
@@ -153,7 +152,7 @@
   padding-top: 0;
 }
 
-/* INPUT ERROR
+/* ERROR
  -------------------- */
 
 .invalid-feedback {

package/dist/collection/components/input/input.js

@@ -3,7 +3,7 @@ const debounceEvent = (event, wait) => {
   const original = event._original || event;
   return {
     _original: event,
-    emit: debounce(original.emit.bind(original), wait)
+    emit: debounce(original.emit.bind(original), wait),
   };
 };
 const debounce = (func, wait = 0) => {

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

@@ -9,14 +9,172 @@ export default {
       handles: ['roadBlur', 'roadFocus'],
     },
   },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    readonly: {
+      control: 'boolean',
+    },
+    required: {
+      control: 'boolean',
+    },
+    autofocus: {
+      control: 'boolean',
+    },
+    spellcheck: {
+      control: 'boolean',
+    },
+    error: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    size: {
+      control: 'number',
+    },
+    min: {
+      control: 'text',
+    },
+    minlength: {
+      control: 'number',
+    },
+    max: {
+      control: 'text',
+    },
+    maxlength: {
+      control: 'number',
+    },
+    step: {
+      control: 'number',
+    },
+    pattern: {
+      control: 'text',
+    },
+    value: {
+      control: 'number',
+    },
+    type: {
+      options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text', 'url', 'time'],
+      control: {
+        type: 'select',
+      },
+    },
+    autocapitalize: {
+      options: ['on', 'off'],
+      control: {
+        type: 'select',
+      },
+    },
+    autocomplete: {
+      options: ['on', 'off', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo'],
+      control: {
+        type: 'select',
+      },
+    },
+    autocorrect: {
+      options: ['on', 'off'],
+      control: {
+        type: 'select',
+      },
+    },
+    enterkeyhint: {
+      options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
+      control: {
+        type: 'select',
+      },
+    },
+    inputmode: {
+      options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
+      control: {
+        type: 'select',
+      },
+    },
+    debounce: {
+      control: 'number',
+    },
+    'input-id': {
+      control: 'text',
+    },
+    roadBlur: {
+      control: {
+        type: null,
+      },
+    },
+    roadFocus: {
+      control: {
+        type: null,
+      },
+    },
+    roadChange: {
+      action: 'roadChange',
+      control: {
+        type: null,
+      },
+    },
+    roadInput: {
+      action: 'roadInput',
+      control: {
+        type: null,
+      },
+    },
+    '--height': {
+      table: {
+        defaultValue: { summary: '3rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--border-radius': {
+      table: {
+        defaultValue: { summary: '0.25rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--input-text-align': {
+      table: {
+        defaultValue: { summary: 'left' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--margin-bottom': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    label: 'Label',
+    disabled: null,
+    readonly: null,
+    required: null,
+    autofocus: null,
+    spellcheck: null,
+  },
 };
 
-export const Playground = (args) => html`
+const Template = (args) => html`
   <road-input
-    label="${args.label}"
-    .disabled="${args.disabled}"
-    .required="${args.required}"
-    .autofocus="${args.autofocus}"
+    input-id="${ifDefined(args['input-id'])}"
+    label="${ifDefined(args.label)}"
+    disabled="${ifDefined(args.disabled)}"
+    required="${ifDefined(args.required)}"
+    autofocus="${ifDefined(args.autofocus)}"
     error="${ifDefined(args.error)}"
     size="${ifDefined(args.size)}"
     min="${ifDefined(args.min)}" 
@@ -25,136 +183,44 @@ export const Playground = (args) => html`
     minlength="${ifDefined(args.minlength)}"
     step="${ifDefined(args.step)}" 
     value="${ifDefined(args.value)}" 
-    .spellcheck="${args.spellcheck}"
+    pattern="${ifDefined(args.pattern)}"
+    spellcheck="${ifDefined(args.spellcheck)}"
     placeholder="${ifDefined(args.placeholder)}"
-    type="${args.type}"
-    autocapitalize="${args.autocapitalize}"
-    autocomplete="${args.autocomplete}"
-    autocorrect="${args.autocorrect}"
+    type="${ifDefined(args.type)}"
+    autocapitalize="${ifDefined(args.autocapitalize)}"
+    autocomplete="${ifDefined(args.autocomplete)}"
+    autocorrect="${ifDefined(args.autocorrect)}"
     enterkeyhint="${ifDefined(args.enterkeyhint)}"
     inputmode="${ifDefined(args.inputmode)}"
-    .readonly="${args.readonly}"
-    debounce="${args.debounce}"
+    readonly="${ifDefined(args.readonly)}"
+    debounce="${ifDefined(args.debounce)}"
     @roadChange=${event => args.roadChange(event.detail.value)}
     @roadInput=${event => args.roadInput(event.target.value)}
   ></road-input>
 `;
-Playground.args = {
-  label: 'Label',
-  type: 'text',
-};
-Playground.argTypes = {
-  disabled: {
-    control: 'boolean',
-  },
-  readonly: {
-    control: 'boolean',
-  },
-  required: {
-    control: 'boolean',
-  },
-  autofocus: {
-    control: 'boolean',
-  },
-  spellcheck: {
-    control: 'boolean',
-  },
-  error: {
-    control: 'text',
-  },
-  label: {
-    control: 'text',
-  },
-  name: {
-    control: 'text',
-  },
-  placeholder: {
-    control: 'text',
-  },
-  size: {
-    control: 'number',
-  },
-  min: {
-    control: 'number',
-  },
-  minlength: {
-    control: 'number',
-  },
-  max: {
-    control: 'number',
-  },
-  maxlength: {
-    control: 'number',
-  },
-  step: {
-    control: 'number',
-  },
-  value: {
-    control: 'number',
-  },
-  type: {
-    options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text', 'url', 'time'],
-    control: {
-      type: 'select',
-    },
-  },
-  autocapitalize: {
-    options: ['on', 'off'],
-    control: {
-      type: 'select',
-    },
-  },
-  autocomplete: {
-    options: ['on', 'off', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo'],
-    control: {
-      type: 'select',
-    },
-  },
-  autocorrect: {
-    options: ['on', 'off'],
-    control: {
-      type: 'select',
-    },
-  },
-  enterkeyhint: {
-    options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
-    control: {
-      type: 'select',
-    },
-  },
-  inputmode: {
-    options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
-    control: {
-      type: 'select',
-    },
-  },
-  debounce: {
-    control: 'number'
-  },
-  roadChange: {
-    action: 'roadChange',
-  },
-  roadInput: {
-    action: 'roadInput',
-  },
-};
 
-export const Default = () => html`
-  <road-input label="Label"></road-input>
-`;
+export const Playground = Template.bind({});
 
-export const WithValue = () => html`
-  <road-input label="Label" value="Value"></road-input>
-`;
+export const WithValue = Template.bind({});
+WithValue.args = {
+  value: 'Value',
+};
 
-export const Date = () => html`
-  <road-input label="Date" type="date" value="2021-04-21" min="2021-01-01" max="2021-12-31"></road-input>
-`;
+export const Date = Template.bind({});
+Date.args = {
+  label: 'Date',
+  type: 'date',
+  value: '2021-04-21',
+  min: '2021-01-01',
+  max: '2021-12-31',
+};
 
-export const Disabled = () => html`
-  <road-input label="Label" disabled></road-input>
-`;
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
 
-export const Error = () => html`
-  <road-input label="Label" error="This field is required"></road-input>
-`;
+export const Error = Template.bind({});
+Error.args = {
+  error: 'This field is required',
+};

package/dist/collection/components/input-group/input-group.css

@@ -12,7 +12,6 @@
  * - Round corners
  * - Error
  * - Disabled
- *
  */
 
 :host {
@@ -33,6 +32,7 @@
 
 ::slotted(road-input),
 ::slotted(input),
+::slotted(textarea),
 ::slotted(road-select) {
   position: relative;
   flex: 1 1 auto;
@@ -46,7 +46,7 @@
  */
 
 ::slotted([slot="prepend"]) {
-  margin-right: -1px;
+  margin-right: -3px;
   border-color: var(--border-form);
   border-right-color: transparent;
   border-top-right-radius: 0;
@@ -55,7 +55,6 @@
 
 ::slotted([slot="append"]) {
   margin-left: -0.25rem;
-  background: var(--white);
   border-color: var(--border-form);
   border-left-width: 0;
 }
@@ -137,11 +136,13 @@
 }
 
 .input-group-append ::slotted([slot="append"]) {
+  border-left: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.input-group-prepend ::slotted(road-button) {
+.input-group-prepend ::slotted([slot="prepend"]) {
+  border-right: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }

package/dist/collection/components/input-group/input-group.stories.js

@@ -1,49 +1,58 @@
 import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Forms/Input Group',
   component: 'road-input-group',
+  argTypes: {
+    prepend: {
+      control: 'text',
+    },
+    ' ': {
+      control: 'text',
+    },
+    append: {
+      control: 'text',
+    },
+  },
 };
 
-export const Icon = () => html`
+const Template = (args) => html`
 <road-input-group>
-  <road-input input-id="cardNumber" label="Card Number"></road-input>
-  <label slot="append" for="cardNumber">
-    <road-icon name="payment-card"></road-icon>
-  </label>
+  ${unsafeHTML(args[' '])}
+  ${unsafeHTML(args.prepend)}
+  ${unsafeHTML(args.append)}
 </road-input-group>
 `;
 
-export const Button = () => html`
-<road-input-group>
-  <road-input input-id="newsletter" label="Newsletter"></road-input>
-  <road-button slot="append" outline>
-    OK
-  </road-button>
-</road-input-group>
+export const Playground = Template.bind({});
+Playground.args = {
+  ' ': `<road-input input-id="cardNumber" label="Card Number"></road-input>`,
+  append: `<label slot="append" for="cardNumber">
+    <road-icon name="payment-card"></road-icon>
+  </label>`,
+};
 
-<road-input-group>
-  <road-input input-id="fieldWithHelp" label="Label"></road-input>
-  <road-button slot="append" outline>
-    <road-icon color="secondary" name="alert-info-outline"></road-icon>
-  </road-button>
-</road-input-group>
-`;
+export const Button = Template.bind({});
+Button.args = {
+  ' ': `<road-input input-id="newsletter" label="Newsletter"></road-input>`,
+  append: `<road-button slot="append" outline="true">
+  OK
+</road-button>`,
+};
 
-export const Disabled = () => html`
-<road-input-group>
-  <road-input input-id="inputGroupDisabled" label="Label" disabled></road-input>
-  <road-button slot="append" outline>
-    <road-icon color="secondary" name="alert-info-outline"></road-icon>
-  </road-button>
-</road-input-group>
-`;
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ' ': `<road-input input-id="inputGroupDisabled" label="Label" disabled></road-input>`,
+  append: `<road-button slot="append" outline="true">
+  <road-icon color="secondary" name="alert-info-outline"></road-icon>
+</road-button>`,
+};
 
-export const Error = () => html`
-<road-input-group>
-  <road-input input-id="inputGroupError" label="Label" error="error message here"></road-input>
-  <label slot="append" for="inputGroupError">
-    <road-icon name="payment-card"></road-icon>
-  </label>
-</road-input-group>
-`;
+export const Error = Template.bind({});
+Error.args = {
+  ' ': `<road-input input-id="inputGroupError" label="Label" error="error message here"></road-input>`,
+  append: `<label slot="append" for="inputGroupError">
+  <road-icon name="payment-card"></road-icon>
+</label>`,
+};

package/dist/collection/components/item/item.css

@@ -2,13 +2,12 @@
  * Item
  *
  * Index
- * - Native item
- * - Inner item
- * - Item input
- * - Item icons
- * - Item buttons
- * - Item lines
- *
+ * - Native
+ * - Inner
+ * - Input
+ * - Icons
+ * - Buttons
+ * - Lines
  */
 
 /**
@@ -23,10 +22,10 @@
 :host {
   --border-radius: 0.25rem;
   --background-color: transparent;
+  --detail-color: var(--icon);
+  --inner-padding: 1rem 0.5rem 1rem 0;
   --min-height: 3.5rem;
   --padding-left: 1rem;
-  --inner-padding: 1rem 0.5rem 1rem 0;
-  --detail-color: var(--icon);
 
   position: relative;
   box-sizing: border-box;
@@ -38,7 +37,7 @@
   outline: none;
 }
 
-/* NATIVE ITEM
+/* NATIVE
  -------------------- */
 
 .item-native {
@@ -100,7 +99,7 @@ a {
   -webkit-user-drag: none;
 }
 
-/* INNER ITEM
+/* INNER
  -------------------- */
 
 .item-inner {
@@ -123,7 +122,7 @@ a {
   outline: 0;
 }
 
-/* ITEM INPUT
+/* INPUT
  -------------------- */
 
 .input-wrapper {
@@ -137,7 +136,7 @@ a {
   text-overflow: ellipsis;
 }
 
-/* ITEM ICONS
+/* ICONS
  -------------------- */
 
 .item-detail-icon {
@@ -149,7 +148,7 @@ a {
   margin-right: 0.5rem;
 }
 
-/* ITEM IMG
+/* IMAGE
  -------------------- */
 
 ::slotted(road-img) {
@@ -161,7 +160,7 @@ a {
   margin-right: 1rem;
 }
 
-/* ITEM BUTTONS
+/* BUTTONS
  -------------------- */
 
 ::slotted(road-button) {
@@ -170,7 +169,7 @@ a {
   --margin-bottom: 0;
 }
 
-/* ITEM LINES
+/* LINES
  -------------------- */
 
 /**