@roadtrip/components 2.23.0 → 2.25.1

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

@@ -1,59 +1,103 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { list } from '../../../.storybook/list';
 
 export default {
   title: 'Modals/Dialog',
   component: 'road-dialog',
   parameters: {
-    docs: {
-      inlineStories: false,
-      iframeHeight: '400px',
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'grey',
     },
     actions: {
       handles: ['close'],
     },
   },
+  argTypes: {
+    'is-open': {
+      control: 'boolean',
+    },
+    'has-close-icon': {
+      control: 'boolean',
+    },
+    color: {
+      options: ['info', 'success', 'warning', 'danger'],
+      control: {
+        type: 'radio',
+      },
+    },
+    icon: {
+      options: list,
+      control: {
+        type: 'select',
+      },
+    },
+    label: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    close: {
+      control: {
+        type: null,
+      },
+    },
+    ' ': {
+      control: 'text',
+    },
+    '--z-index': {
+      table: {
+        defaultValue: { summary: '3' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    'dialog-icon': {
+      control: {
+        type: null,
+      },
+    },
+  },
 };
 
-export const Playground = (args) => html`
-  <road-dialog is-open="${args['is-open']}" color="${args.color}" .icon="${args.icon}" label="${args.label}" description="${args.description}" has-close-icon="${args['has-close-icon']}"></road-dialog>
+const Template = (args) => html`
+<road-dialog 
+  is-open="${ifDefined(args['is-open'])}" 
+  color="${ifDefined(args.color)}" 
+  .icon="${ifDefined(args.icon)}" 
+  label="${ifDefined(args.label)}" 
+  description="${ifDefined(args.description)}" 
+  has-close-icon="${ifDefined(args['has-close-icon'])}"
+>
+  ${unsafeHTML(args[' '])}
+</road-dialog>
 `;
+
+export const Playground = Template.bind({});
 Playground.args = {
   'is-open': true,
   color: 'info',
   label: 'Information',
   description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };
-Playground.argTypes = {
-  'is-open': {
-    control: 'boolean',
-  },
-  'has-close-icon': {
-    control: 'boolean',
-  },
-  color: {
-    options: ['info', 'success', 'warning', 'danger'],
-    control: {
-      type: 'radio',
-    },
-  },
-  icon: {
-    control: 'text',
-  },
-  label: {
-    control: 'text',
-  },
-  description: {
-    control: 'text',
-  },
-};
 
-export const Information = () => html`
-  <road-dialog is-open color="info" label="Information" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor."></road-dialog>
-`;
+export const Error = Template.bind({});
+Error.args = {
+  'is-open': true,
+  color: 'danger',
+  label: 'Error',
+  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
+};
 
-export const SideActions = () => html`
-  <road-dialog is-open label="Are you sure ?" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.">
-  <road-button class="mb-0" outline expand style="width: 130px" data-dismiss="modal">Cancel</road-button>
-  <road-button class="mb-0" color="secondary" expand style="width: 130px;margin-left: 1rem;">Done</road-button>
-</road-dialog>
-`;
+export const SideActions = Template.bind({});
+SideActions.args = {
+  'is-open': true,
+  label: 'Are you sure ?',
+  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
+  ' ': `<road-button class="mb-0" outline expand style="width: 130px" data-dismiss="modal">Cancel</road-button>
+  <road-button class="mb-0" color="secondary" expand style="width: 130px;margin-left: 1rem;">Done</road-button>`,
+};

package/dist/collection/components/drawer/drawer.dark.css

@@ -4,14 +4,13 @@
  * Index
  * - Overlay
  * - Drawer
- * - Drawer position
- * - Drawer content
- * - Drawer header
- * - Drawer actions
- * - Drawer title
- * - Drawer body
- * - Drawer open state
- *
+ * - Position
+ * - Content
+ * - Header
+ * - Actions
+ * - Title
+ * - Body
+ * - Open state
  */
 
 /**
@@ -20,7 +19,9 @@
  * @prop --header-icon: color of the header icons.
  * @prop --header-color: color of the header text.
  * @prop --header-background: color of the header background.
+ * @prop --header-delimiter: size of the border delimiter (in px) at the bottom of the header
  * @prop --back-chevron-color: color of back chevron
+ * @prop --max-height: max-height of the drawer for bottom position
  * @prop --z-index: The z-index of the Drawer.
  */
 
@@ -30,11 +31,13 @@
 :host {
   --background: var(--white);
   --color: var(--text);
-  --z-index: 10;
   --header-icon: var(--icon);
   --header-color: var(--text);
   --header-background: var(--white);
+  --header-delimiter: 0;
   --back-chevron-color: var(--icon);
+  --max-height: auto;
+  --z-index: 10;
 
   position: fixed;
   top: 0;
@@ -79,7 +82,7 @@
   transform: translateX(-100%);
 }
 
-/* DRAWER POSITION
+/* POSITION
  -------------------- */
 
 :host(.drawer-right) {
@@ -100,15 +103,15 @@
 
 :host(.drawer-bottom) .drawer-dialog {
   width: 100%;
+  max-height: var(--max-height);
   transform: translateY(100%);
 }
 
 :host(.drawer-bottom) .drawer-content {
   height: auto;
-  min-height: 6.25rem;
 }
 
-/* DRAWER CONTENT
+/* CONTENT
  -------------------- */
 
 .drawer-content {
@@ -123,7 +126,7 @@
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
 }
 
-/* DRAWER HEADER
+/* HEADER
  -------------------- */
 
 .drawer-header {
@@ -134,6 +137,9 @@
   height: 3.5rem;
   color: var(--header-color);
   background: var(--header-background);
+  border-color: var(--border);
+  border-style: solid;
+  border-width: var(--header-delimiter);
 }
 
 .drawer-header road-icon {
@@ -141,14 +147,6 @@
   color: var(--header-icon);
 }
 
-/**
- * Delimiter when needed
- */
-
-.drawer-header-delimiter {
-  border-bottom: 1px solid var(--border);
-}
-
 /**
  * Header inverse colors
  */
@@ -161,7 +159,7 @@
   margin-bottom: 2.5rem;
 }
 
-/* DRAWER ACTIONS
+/* ACTIONS
  -------------------- */
 
 .drawer-action,
@@ -197,7 +195,7 @@
   margin-right: auto;
 }
 
-/* DRAWER TITLE
+/* TITLE
  -------------------- */
 
 .drawer-title {
@@ -212,14 +210,18 @@
   font-weight: 400;
 }
 
-/* DRAWER BODY
+/* BODY
  -------------------- */
 
 .drawer-body {
-  height: calc(100vh - 3.5rem);
   overflow-y: auto;
 }
 
+:host(.drawer-right) .drawer-body,
+:host(.drawer-left) .drawer-body {
+  height: calc(100vh - 3.5rem);
+}
+
 .drawer-inner {
   padding: 0 1rem 2.5rem;
 }
@@ -231,7 +233,7 @@
   }
 }
 
-/* DRAWER OPEN STATE
+/* OPEN STATE
  -------------------- */
 
 :host(.drawer-open) {

package/dist/collection/components/drawer/drawer.light.css

@@ -4,14 +4,13 @@
  * Index
  * - Overlay
  * - Drawer
- * - Drawer position
- * - Drawer content
- * - Drawer header
- * - Drawer actions
- * - Drawer title
- * - Drawer body
- * - Drawer open state
- *
+ * - Position
+ * - Content
+ * - Header
+ * - Actions
+ * - Title
+ * - Body
+ * - Open state
  */
 
 /**
@@ -20,7 +19,9 @@
  * @prop --header-icon: color of the header icons.
  * @prop --header-color: color of the header text.
  * @prop --header-background: color of the header background.
+ * @prop --header-delimiter: size of the border delimiter (in px) at the bottom of the header
  * @prop --back-chevron-color: color of back chevron
+ * @prop --max-height: max-height of the drawer for bottom position
  * @prop --z-index: The z-index of the Drawer.
  */
 
@@ -30,11 +31,13 @@
 :host {
   --background: var(--white);
   --color: var(--text);
-  --z-index: 10;
   --header-icon: var(--icon);
   --header-color: var(--text);
   --header-background: var(--white);
+  --header-delimiter: 0;
   --back-chevron-color: var(--icon);
+  --max-height: auto;
+  --z-index: 10;
 
   position: fixed;
   top: 0;
@@ -79,7 +82,7 @@
   transform: translateX(-100%);
 }
 
-/* DRAWER POSITION
+/* POSITION
  -------------------- */
 
 :host(.drawer-right) {
@@ -100,15 +103,15 @@
 
 :host(.drawer-bottom) .drawer-dialog {
   width: 100%;
+  max-height: var(--max-height);
   transform: translateY(100%);
 }
 
 :host(.drawer-bottom) .drawer-content {
   height: auto;
-  min-height: 6.25rem;
 }
 
-/* DRAWER CONTENT
+/* CONTENT
  -------------------- */
 
 .drawer-content {
@@ -123,7 +126,7 @@
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
 }
 
-/* DRAWER HEADER
+/* HEADER
  -------------------- */
 
 .drawer-header {
@@ -134,6 +137,9 @@
   height: 3.5rem;
   color: var(--header-color);
   background: var(--header-background);
+  border-color: var(--border);
+  border-style: solid;
+  border-width: var(--header-delimiter);
 }
 
 .drawer-header road-icon {
@@ -141,14 +147,6 @@
   color: var(--header-icon);
 }
 
-/**
- * Delimiter when needed
- */
-
-.drawer-header-delimiter {
-  border-bottom: 1px solid var(--border);
-}
-
 /**
  * Header inverse colors
  */
@@ -161,7 +159,7 @@
   margin-bottom: 2.5rem;
 }
 
-/* DRAWER ACTIONS
+/* ACTIONS
  -------------------- */
 
 .drawer-action,
@@ -197,7 +195,7 @@
   margin-right: auto;
 }
 
-/* DRAWER TITLE
+/* TITLE
  -------------------- */
 
 .drawer-title {
@@ -212,14 +210,18 @@
   font-weight: 400;
 }
 
-/* DRAWER BODY
+/* BODY
  -------------------- */
 
 .drawer-body {
-  height: calc(100vh - 3.5rem);
   overflow-y: auto;
 }
 
+:host(.drawer-right) .drawer-body,
+:host(.drawer-left) .drawer-body {
+  height: calc(100vh - 3.5rem);
+}
+
 .drawer-inner {
   padding: 0 1rem 2.5rem;
 }
@@ -231,7 +233,7 @@
   }
 }
 
-/* DRAWER OPEN STATE
+/* OPEN STATE
  -------------------- */
 
 :host(.drawer-open) {