@roadtrip/components 2.23.0 → 2.25.1

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

@@ -1,52 +1,50 @@
 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: 'Indicators/Badge',
   component: 'road-badge',
-};
-
-export const Playground = (args) => html`
-  <a class="text-content d-inline-flex">
-    <road-icon name="alert-notification-outline"></road-icon>
-    <sup>
-      <road-badge color="${args.color}" bubble="${args.bubble}">${args['']}</road-badge>
-    </sup>
-  </a>
-`;
-Playground.args = {
-  bubble: false,
-  color: 'accent',
-  '': '1',
-};
-Playground.argTypes = {
-  color: {
-    options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'danger'],
-    control: {
-      type: 'select',
+  argTypes: {
+    color: {
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'danger'],
+      control: {
+        type: 'select',
+      },
+    },
+    bubble: {
+      control: 'boolean',
+    },
+    ' ': {
+      control: 'text',
     },
   },
-  bubble: {
-    control: 'boolean',
-  },
-  '': {
-    control: 'number',
+  args: {
+    bubble: null,
+    ' ': `1`,
   },
 };
 
-export const Notification = () => html`
+const Template = (args) => html`
 <a class="text-content d-inline-flex">
   <road-icon name="alert-notification-outline"></road-icon>
   <sup>
-    <road-badge color="accent">1</road-badge>
+    <road-badge color="${ifDefined(args.color)}" bubble="${ifDefined(args.bubble)}">${unsafeHTML(args[' '])}</road-badge>
   </sup>
 </a>
 `;
 
-export const Bubble = () => html`
-<a class="text-content d-inline-flex">
-  <road-icon name="people-outline"></road-icon>
-  <sup class="badge-sup">
-    <road-badge color="accent" bubble></road-badge>
-  </sup>
-</a>
-`;
+export const Playground = Template.bind({});
+
+export const Notification = Template.bind({});
+Notification.args = {
+  color: 'accent',
+  ' ': `10`,
+};
+
+export const Bubble = Template.bind({});
+Bubble.args = {
+  color: 'accent',
+  bubble: true,
+  ' ': ``,
+};

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

@@ -1,26 +1,25 @@
 /*
- * Buttons
+ * Button
  *
  * Use custom button styles for actions in forms, dialogs, and more
  * with support for multiple sizes, states, and more.
  *
  * Index
  * - Button
- * - Plain buttons
- * - Outline buttons
- * - Disabled buttons
- * - Button sizes
- * - Notification badge
- *
+ * - Plain
+ * - Outline
+ * - Disabled
+ * - Sizes
+ * - Badge
  */
 
 
 /**
  * @prop --border-radius: Border radius of the button
+ * @prop --font-size: Font size of the text button
+ * @prop --margin-bottom: Bottom margin of the button
  * @prop --padding-start: Left padding  of the button
  * @prop --padding-end: Right padding of the button
- * @prop --margin-bottom: Bottom margin of the button
- * @prop --font-size: Font size of the text button
  */
 
 
@@ -28,11 +27,11 @@
  -------------------- */
 
 :host {
-  --margin-bottom: 1rem;
   --border-radius: 0.25rem;
+  --font-size: 1rem;
+  --margin-bottom: 1rem;
   --padding-start: 1rem;
   --padding-end: 1rem;
-  --font-size: 1rem;
 
   box-sizing: border-box;
   display: inline-flex;
@@ -103,11 +102,11 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-/* PLAIN BUTTONS
+/* PLAIN
  -------------------- */
 
 /**
- * Button primary
+ * Primary
  */
 
 :host(.btn-primary) {
@@ -125,7 +124,7 @@
 }
 
 /**
- * Button secondary
+ * Secondary
  */
 
 :host(.btn-secondary) {
@@ -143,7 +142,7 @@
 }
 
 /**
- * Button info
+ * Info
  */
 
 :host(.btn-info) {
@@ -161,7 +160,7 @@
 }
 
 /**
- * Button success
+ * Success
  */
 
 :host(.btn-success) {
@@ -179,7 +178,7 @@
 }
 
 /**
- * Button warning
+ * Warning
  */
 
 :host(.btn-warning) {
@@ -197,7 +196,7 @@
 }
 
 /**
- * Button danger
+ * Danger
  */
 
 :host(.btn-danger) {
@@ -215,7 +214,7 @@
 }
 
 /**
- * Button default
+ * Default
  */
 
 :host(.btn-default:not([disabled]).focus-visible) {
@@ -223,7 +222,7 @@
 }
 
 /**
- * Button link
+ * Link
  */
 
 :host(.btn-link) {
@@ -237,7 +236,7 @@
   color: var(--secondary-hover);
 }
 
-/* OUTLINE BUTTONS
+/* OUTLINE
  -------------------- */
 
 :host(.btn-outline-primary),
@@ -250,11 +249,12 @@
 }
 
 /**
- * Button outline default
+ * Outline default
  */
 
 :host(.btn-outline-default) {
   color: var(--text-second);
+  background: var(--white);
   border-color: var(--text-second);
 }
 
@@ -264,7 +264,7 @@
 }
 
 /**
- * Button outline primary
+ * Outline primary
  */
 
 :host(.btn-outline-primary) {
@@ -282,7 +282,7 @@
 }
 
 /**
- * Button outline secondary
+ * Outline secondary
  */
 
 :host(.btn-outline-secondary) {
@@ -300,7 +300,7 @@
 }
 
 /**
- * Button outline info
+ * Outline info
  */
 
 :host(.btn-outline-info) {
@@ -318,7 +318,7 @@
 }
 
 /**
- * Button outline success
+ * Outline success
  */
 
 :host(.btn-outline-success) {
@@ -336,7 +336,7 @@
 }
 
 /**
- * Button outline warning
+ * Outline warning
  */
 
 :host(.btn-outline-warning) {
@@ -354,7 +354,7 @@
 }
 
 /**
- * Button outline danger
+ * Outline danger
  */
 
 :host(.btn-outline-danger) {
@@ -371,7 +371,7 @@
   background: var(--danger-background);
 }
 
-/* DISABLED BUTTONS
+/* DISABLED
  -------------------- */
 
 :host([aria-disabled]) {
@@ -387,7 +387,7 @@
   background: var(--white);
 }
 
-/* BUTTON SIZES
+/* SIZES
  -------------------- */
 
 ::slotted([slot="start"]) {
@@ -399,7 +399,7 @@
 }
 
 /**
- * Medium button
+ * Medium
  */
 
 :host(.btn-md) {
@@ -414,7 +414,7 @@
 }
 
 /**
- * Small button
+ * Small
  */
 
 :host(.btn-sm) {
@@ -437,7 +437,7 @@
   width: 100%;
 }
 
-/* NOTIFICATION BADGE
+/* BADGE
  -------------------- */
 
 ::slotted(road-badge) {

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

@@ -13,6 +13,10 @@ export class Button {
      * The color to use from your application's color palette.
      */
     this.color = 'default';
+    /**
+      * The button size.
+      */
+    this.size = 'lg';
     /**
      * The type of the button.
      */
@@ -21,6 +25,10 @@ export class Button {
      * If `true`, the user cannot interact with the button.
      */
     this.disabled = false;
+    /**
+     * Set to `true` for a full-width button.
+     */
+    this.expand = false;
     /**
      * Set to `true` for a transparent button with a border
      */
@@ -105,8 +113,8 @@ export class Button {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'sm' | 'md'",
-        "resolved": "\"md\" | \"sm\" | undefined",
+        "original": "'sm' | 'md' | 'lg'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | undefined",
         "references": {}
       },
       "required": false,
@@ -116,7 +124,8 @@ export class Button {
         "text": "The button size."
       },
       "attribute": "size",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "'lg'"
     },
     "buttonType": {
       "type": "string",
@@ -159,17 +168,18 @@ export class Button {
       "mutable": false,
       "complexType": {
         "original": "boolean",
-        "resolved": "boolean | undefined",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Set to `true` for a full-width button."
       },
       "attribute": "expand",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "download": {
       "type": "string",

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

@@ -1,4 +1,6 @@
 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: 'Forms/Button',
@@ -8,85 +10,174 @@ export default {
       handles: ['roadBlur', 'roadFocus'],
     },
   },
-};
-
-export const Playground = (args) => html`
-  <road-button 
-    color="${args.color}"
-    button-type="${args['button-type']}"
-    .disabled="${args.disabled}"
-    expand="${args.expand}"
-    outline="${args.outline}"
-    size="${args.size}"
-  >
-    <road-icon slot="start" name="shopping-cart-add"></road-icon>
-    ${args['']}
-  </road-button>
-`;
-Playground.args = {
-  'button-type': 'button',
-  color: 'secondary',
-  disabled: false,
-  expand: false,
-  outline: false,
-  size: 'lg',
-  '': 'click me!',
-};
-Playground.argTypes = {
-  color: {
-    options: ['default', 'primary', 'secondary', 'info', 'success', 'warning', 'danger'],
-    control: {
-      type: 'select',
+  argTypes: {
+    color: {
+      options: ['default', 'primary', 'secondary', 'info', 'success', 'warning', 'danger'],
+      control: {
+        type: 'select',
+      },
     },
-  },
-  'button-type': {
-    options: ['button', 'reset', 'submit'],
-    control: {
-      type: 'select',
+    'button-type': {
+      options: ['button', 'reset', 'submit'],
+      control: {
+        type: 'select',
+      },
     },
-  },
-  disabled: {
-    control: 'boolean',
-  },
-  expand: {
-    control: 'boolean',
-  },
-  outline: {
-    control: 'boolean',
-  },
-  size: {
-    options: ['sm', 'md', 'lg'],
-    control: {
-      type: 'select',
+    disabled: {
+      control: 'boolean',
+    },
+    download: {
+      control: {
+        type: null,
+      },
+    },
+    expand: {
+      control: 'boolean',
+    },
+    href: {
+      control: {
+        type: null,
+      },
+    },
+    outline: {
+      control: 'boolean',
+    },
+    rel: {
+      control: {
+        type: null,
+      },
+    },
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: {
+        type: 'select',
+      },
+    },
+    target: {
+      control: {
+        type: null,
+      },
+    },
+    start: {
+      control: 'text',
+    },
+    ' ': {
+      control: 'text',
+    },
+    end: {
+      control: 'text',
+    },
+    roadBlur: {
+      control: {
+        type: null,
+      },
+    },
+    roadFocus: {
+      control: {
+        type: null,
+      },
+    },
+    '--border-radius': {
+      table: {
+        defaultValue: { summary: '0.25rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--font-size': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--margin-bottom': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--padding-start': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--padding-end': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    native: {
+      control: {
+        type: null,
+      },
     },
   },
-  '': {
-    control: 'text',
+  args: {
+    'button-type': null,
+    color: null,
+    disabled: null,
+    expand: null,
+    outline: null,
+    size: null,
+    start: ``,
+    ' ': `click me!`,
+    end: undefined,
   },
 };
 
-export const Solid = () => html`
-<road-button color="secondary">Click me!</road-button>
+const Template = (args) => html`
+<road-button 
+  button-type="${ifDefined(args['button-type'])}"
+  color="${ifDefined(args.color)}"
+  disabled="${ifDefined(args.disabled)}"
+  expand="${ifDefined(args.expand)}"
+  outline="${ifDefined(args.outline)}"
+  size="${ifDefined(args.size)}"
+>
+  ${unsafeHTML(args.start)}
+  ${unsafeHTML(args[' '])}
+  ${unsafeHTML(args.end)}
+</road-button>
 `;
 
-export const Outline = () => html`
-<road-button color="secondary" outline>Click me!</road-button>
-`;
+export const Playground = Template.bind({});
+Playground.args = {
+  color: 'secondary',
+  start: `<road-icon slot="start" name="shopping-cart-add"></road-icon>`,
+  ' ': `Add to cart`,
+};
 
-export const Disabled = () => html`
-<road-button color="secondary" disabled>Click me!</road-button>
-`;
+export const Outline = Template.bind({});
+Outline.args = {
+  color: 'secondary',
+  outline: true,
+};
 
-export const ButtonWithIcon = () => html`
-<road-button color="secondary">
-  <road-icon slot="start" name="shopping-cart-add"></road-icon>
-  Add to cart
-</road-button>
-`;
+export const OutlineDefault = Template.bind({});
+OutlineDefault.args = {
+  color: 'default',
+  outline: true,
+};
 
-export const BackButton = () => html`
-<road-button class="font-weight-normal">
-  <road-icon slot="start" name="navigation-chevron" color="warning" rotate="180"></road-icon>
-  Back
-</road-button>
-`;
+export const Disabled = Template.bind({});
+Disabled.args = {
+  color: 'secondary',
+  disabled: true,
+};
+
+export const BackButton = Template.bind({});
+BackButton.args = {
+  start: `<road-icon slot="start" name="navigation-chevron" color="warning" rotate="180"></road-icon>`,
+  ' ': `Back`,
+};

package/dist/collection/components/card/card.css

@@ -2,15 +2,14 @@
  * Card
  *
  * Index
- * - Native item
- * - Inner item
- * - Item input
- * - Item icons
- * - Item buttons
- * - Item lines
- *
+ * - Card
+ * - Native
+ * - Icon
  */
 
+/* CARD
+ -------------------- */
+
 :host {
   position: relative;
   box-sizing: border-box;
@@ -18,6 +17,9 @@
   margin-bottom: var(--margin-bottom, 1rem);
 }
 
+/* NATIVE
+ -------------------- */
+
 .card-native {
   box-sizing: border-box;
   display: block;
@@ -52,6 +54,9 @@ button {
   -webkit-user-drag: none;
 }
 
+/* ICON
+ -------------------- */
+
 ::slotted(road-icon) {
   text-align: center;
 }

package/dist/collection/components/card/card.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, Event, Element } from '@stencil/core';
+import { Component, h, Prop, Event, Element } from '@stencil/core';
 /**
  * @slot  - Content of the card.
  *
@@ -48,7 +48,7 @@ export class Card {
       h("slot", null)));
   }
   render() {
-    return (h(Host, null, this.renderCard()));
+    return (this.renderCard());
   }
   static get is() { return "road-card"; }
   static get encapsulation() { return "shadow"; }