@roadtrip/components 2.27.0 → 2.29.0

package/dist/collection/components/badge/badge.css

@@ -3,7 +3,7 @@
  *
  * Index
  * - Badge
- * - Feedback
+ * - Status
  */
 
 
@@ -17,13 +17,11 @@
   justify-content: center;
   min-width: 1rem;
   min-height: 1rem;
-  padding: 0;
-  font-family: var(--font, sans-serif);
+  padding: 0 0.3125rem;
+  font-family: var(--road-font, sans-serif);
   font-size: 0.625rem;
   font-weight: 700;
-  color: var(--secondary-contrast);
   white-space: nowrap;
-  background-color: var(--secondary);
   border-radius: 1rem;
 }
 
@@ -32,11 +30,12 @@
  */
 
 :host(.badge-bubble) {
-  min-width: 0.5rem;
-  min-height: 0.5rem;
+  min-width: 0.25rem;
+  min-height: 0.25rem;
+  padding: 0;
 }
 
-/* FEEDBACK
+/* STATUS
  -------------------- */
 
 /**
@@ -44,8 +43,8 @@
  */
 
 :host(.badge-primary) {
-  color: var(--primary-contrast);
-  background-color: var(--primary);
+  color: var(--road-primary-contrast);
+  background-color: var(--road-primary-500);
 }
 
 /**
@@ -53,8 +52,8 @@
  */
 
 :host(.badge-secondary) {
-  color: var(--secondary-contrast);
-  background-color: var(--secondary);
+  color: var(--road-primary-contrast);
+  background-color: var(--road-primary-500);
 }
 
 /**
@@ -62,8 +61,8 @@
  */
 
 :host(.badge-accent) {
-  color: var(--accent-contrast);
-  background-color: var(--accent);
+  color: var(--road-secondary-contrast);
+  background-color: var(--road-secondary-500);
 }
 
 /**
@@ -71,8 +70,8 @@
  */
 
 :host(.badge-info) {
-  color: var(--info-contrast);
-  background-color: var(--info);
+  color: var(--road-info-contrast);
+  background-color: var(--road-info-default);
 }
 
 /**
@@ -80,8 +79,8 @@
  */
 
 :host(.badge-success) {
-  color: var(--success-contrast);
-  background-color: var(--success);
+  color: var(--road-success-contrast);
+  background-color: var(--road-success-default);
 }
 
 /**
@@ -89,8 +88,8 @@
  */
 
 :host(.badge-warning) {
-  color: var(--warning-contrast);
-  background-color: var(--warning);
+  color: var(--road-warning-contrast);
+  background-color: var(--road-warning-default);
 }
 
 /**
@@ -98,6 +97,6 @@
  */
 
 :host(.badge-danger) {
-  color: var(--danger-contrast);
-  background-color: var(--danger-text);
+  color: var(--road-danger-contrast);
+  background-color: var(--road-danger-default);
 }

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

@@ -4,6 +4,10 @@ import { Component, Host, h, Prop } from '@stencil/core';
  */
 export class Badge {
   constructor() {
+    /**
+     * Color of the badge
+     */
+    this.color = 'secondary';
     /**
      * if `true` the badge will be displayed has a little bubble
      */
@@ -44,7 +48,8 @@ export class Badge {
         "text": "Color of the badge"
       },
       "attribute": "color",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "'secondary'"
     },
     "bubble": {
       "type": "boolean",

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

@@ -20,6 +20,7 @@ export default {
     },
   },
   args: {
+    color: 'accent',
     bubble: null,
     ' ': `1`,
   },
@@ -28,7 +29,7 @@ export default {
 const Template = (args) => html`
 <a class="text-content d-inline-flex">
   <road-icon name="alert-notification-outline"></road-icon>
-  <sup>
+  <sup style="margin-left: -1.125rem;margin-top: 0.25rem;">
     <road-badge color="${ifDefined(args.color)}" bubble="${ifDefined(args.bubble)}">${unsafeHTML(args[' '])}</road-badge>
   </sup>
 </a>
@@ -38,13 +39,18 @@ export const Playground = Template.bind({});
 
 export const Notification = Template.bind({});
 Notification.args = {
-  color: 'accent',
   ' ': `10`,
 };
 
-export const Bubble = Template.bind({});
-Bubble.args = {
-  color: 'accent',
+export const Status = (args) => html`
+<a class="text-content d-inline-flex">
+  <road-icon name="people-outline"></road-icon>
+  <sup style="margin-left: -0.25rem;margin-top: 0.375rem;">
+    <road-badge color="${ifDefined(args.color)}" bubble="${ifDefined(args.bubble)}">${unsafeHTML(args[' '])}</road-badge>
+  </sup>
+</a>
+`;
+Status.args = {
   bubble: true,
   ' ': ``,
 };

package/dist/collection/components/banner/banner.css

@@ -0,0 +1,48 @@
+/* BANNER
+ -------------------- */
+
+:host{
+  display: none;
+}
+
+:host(.banner-open) {
+  position: relative;
+  display: block;
+  padding: 1rem 2rem;
+  font-size: 1rem;
+  text-align: center;
+  background-color: var(--road-secondary-500);
+}
+
+.banner-close{
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.25rem;
+  cursor: pointer;
+  background: none;
+  border: 0;
+}
+
+.banner-open-label{
+  font-weight: 700;
+}
+
+.banner-open-link{
+  display: block;
+  margin: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--road-grey-900);
+}
+
+@media (min-width: 992px) {
+
+  .banner-close{
+    right: 0.25rem;
+    bottom: 0;
+  }
+
+  .banner-open-link{
+    display: initial;
+  }
+}

package/dist/collection/components/banner/banner.js

@@ -0,0 +1,152 @@
+import { Component, Host, h, Prop, Method, Event } from '@stencil/core';
+import { navigationClose } from '../../../icons';
+export class Banner {
+  constructor() {
+    /**
+     * Set `open` property to `true` to open the banner
+     */
+    this.isOpen = true;
+    /**
+     * Text display in the banner
+     */
+    this.label = '';
+    /**
+     * Close the dialog when clicking on the cross or layer
+     */
+    this.onClick = (ev) => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      this.close();
+    };
+  }
+  /**
+   * Close the banner
+   */
+  async close() {
+    this.isOpen = false;
+    this.onClose.emit();
+  }
+  render() {
+    const bannerIsOpenClass = this.isOpen ? 'banner-open' : '';
+    return (h(Host, { class: bannerIsOpenClass },
+      h("div", null,
+        h("span", { class: "banner-open-label" }, this.label),
+        this.link && h("a", { href: this.url, class: "banner-open-link" }, this.link),
+        h("button", { type: "button", class: "banner-close", onClick: this.onClick },
+          h("road-icon", { icon: navigationClose, size: "md" })))));
+  }
+  static get is() { return "road-banner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["banner.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["banner.css"]
+  }; }
+  static get properties() { return {
+    "isOpen": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set `open` property to `true` to open the banner"
+      },
+      "attribute": "is-open",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text display in the banner"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "link": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Text Link display in the banner"
+      },
+      "attribute": "link",
+      "reflect": false
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Text Link display in the banner"
+      },
+      "attribute": "url",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "onClose",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Indicate when closing the banner"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Close the banner",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,39 @@
+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/Banner',
+  component: 'road-banner',
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    link: {
+      control: 'text',
+    },
+    url: {
+      control: 'text',
+    },
+    'is-open': {
+      control: 'boolean',
+    },
+    close: {
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    link: 'See more',
+    url: '#',
+    'is-open': true,
+  },
+};
+
+const Template = (args) => html`
+  <road-banner label="${args.label}" link="${args.link}" url="${args.url} is-open=${args['is-open']}"></road-banner>
+`;
+
+export const Playground = Template.bind({});