feat: add variant for footer dialog

Endava · Mar 16, 2023 · bf223ea · bf223ea
1 parent 877c0d1
commit bf223ea
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 26 deletions.
diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
@@ -8,7 +8,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { TAvatarShape, TAvatarSize } from "./components/avatar/bq-avatar.types";
 import { TBadgeSize } from "./components/badge/bq-badge.types";
 import { TButtonAppearance, TButtonSize, TButtonType, TButtonVariant } from "./components/button/bq-button.types";
-import { TDialogSize } from "./components/dialog/bq-dialog.types";
+import { TDialogFooterVariant, TDialogSize } from "./components/dialog/bq-dialog.types";
 import { TDividerOrientation, TDividerStrokeLinecap, TDividerTitleAlignment } from "./components/divider/bq-divider.types";
 import { TIconWeight } from "./components/icon/bq-icon.types";
 import { TRadioGroupOrientation } from "./components/radio-group/bq-radio-group.types";
@@ -20,7 +20,7 @@ import { FloatingUIPlacement } from "./services/interfaces";
 export { TAvatarShape, TAvatarSize } from "./components/avatar/bq-avatar.types";
 export { TBadgeSize } from "./components/badge/bq-badge.types";
 export { TButtonAppearance, TButtonSize, TButtonType, TButtonVariant } from "./components/button/bq-button.types";
-export { TDialogSize } from "./components/dialog/bq-dialog.types";
+export { TDialogFooterVariant, TDialogSize } from "./components/dialog/bq-dialog.types";
 export { TDividerOrientation, TDividerStrokeLinecap, TDividerTitleAlignment } from "./components/divider/bq-divider.types";
 export { TIconWeight } from "./components/icon/bq-icon.types";
 export { TRadioGroupOrientation } from "./components/radio-group/bq-radio-group.types";
@@ -166,6 +166,10 @@ export namespace Components {
           * The size of the dialog
          */
         "size": TDialogSize;
+        /**
+          * The variant of button to apply on top of the appearance
+         */
+        "variant": TDialogFooterVariant;
     }
     interface BqDivider {
         /**
@@ -740,6 +744,10 @@ declare namespace LocalJSX {
           * The size of the dialog
          */
         "size"?: TDialogSize;
+        /**
+          * The variant of button to apply on top of the appearance
+         */
+        "variant"?: TDialogFooterVariant;
     }
     interface BqDivider {
         /**

diff --git a/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx b/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx
@@ -1,6 +1,8 @@
 import { html } from 'lit-html';
 import mdx from './bq-dialog.mdx';
 
+import { DIALOG_FOOTER_VARIANT } from '../bq-dialog.types';
+
 export default {
   title: 'Components/Dialog',
   component: 'bq-dialog',
@@ -12,15 +14,17 @@ export default {
   argTypes: {
     text: { control: 'text', table: { disable: true } },
     size: { control: 'select', options: ['small', 'medium', 'large'] },
+    variant: { control: 'select', options: [...DIALOG_FOOTER_VARIANT] },
   },
   args: {
     text: 'text',
     size: 'medium',
+    variant: 'standard',
   },
 };
 
 const Template = (args) => {
-  return html`<bq-dialog size=${args.size}>${args.text}</bq-dialog>`;
+  return html`<bq-dialog size=${args.size} variant=${args.variant}>${args.text}</bq-dialog>`;
 };
 
 export const Default = (args) => Template(args);
diff --git a/packages/bee-q/src/components/dialog/bq-dialog.tsx b/packages/bee-q/src/components/dialog/bq-dialog.tsx
@@ -1,7 +1,7 @@
 import { h, Component, Prop, Element, Watch } from '@stencil/core';
 
 import { validatePropValue } from '../../shared/utils';
-import { DIALOG_SIZE, TDialogSize } from './bq-dialog.types';
+import { DIALOG_SIZE, DIALOG_FOOTER_VARIANT, TDialogSize, TDialogFooterVariant } from './bq-dialog.types';
 
 @Component({
   tag: 'bq-dialog',
@@ -28,13 +28,18 @@ export class BqDialog {
   /** The size of the dialog */
   @Prop({ reflect: true, mutable: true }) size: TDialogSize = 'medium';
 
+  /** The variant of button to apply on top of the appearance */
+  @Prop({ reflect: true }) variant: TDialogFooterVariant = 'standard';
+
   // Prop lifecycle events
   // =======================
   @Prop() isOpen = false;
 
   @Watch('size')
+  @Watch('variant')
   checkPropValues() {
     validatePropValue(DIALOG_SIZE, 'medium', this.el, 'size');
+    validatePropValue(DIALOG_FOOTER_VARIANT, 'standard', this.el, 'variant');
   }
 
   // Events section
@@ -92,20 +97,37 @@ export class BqDialog {
               [`size--${this.size}`]: true,
             }}
           >
-            <bq-icon
-              class="h-5 w-5 pl-1 pt-1"
-              name="info"
-              color="text--accent"
-              role="img"
-              title="Info"
-              part="icon-on"
-            />
-            <h3>
-              <slot name="title"></slot>
-            </h3>
+            <header>
+              <bq-icon
+                class="h-5 w-5 pl-1 pt-1"
+                name="info"
+                color="text--accent"
+                role="img"
+                title="Info"
+                part="icon-on"
+              />
+              <h3>
+                <slot name="title" />
+              </h3>
+              <bq-icon
+                class="float-right pl-1 pt-1"
+                name="x"
+                role="img"
+                title="Close"
+                part="icon-on"
+                onClick={() => this.closeDialog()}
+              />
+            </header>
             <div class="content">
-              <slot></slot>
+              <slot name="content" />
             </div>
+            <footer
+              class={{
+                [`${this.variant}`]: true,
+              }}
+            >
+              <slot name="buttons" />
+            </footer>
           </div>
         </div>
       </div>

diff --git a/packages/bee-q/src/components/dialog/bq-dialog.types.ts b/packages/bee-q/src/components/dialog/bq-dialog.types.ts
@@ -1,2 +1,5 @@
 export const DIALOG_SIZE = ['small', 'medium', 'large'] as const;
 export type TDialogSize = (typeof DIALOG_SIZE)[number];
+
+export const DIALOG_FOOTER_VARIANT = ['standard', 'light'] as const;
+export type TDialogFooterVariant = (typeof DIALOG_FOOTER_VARIANT)[number];
diff --git a/packages/bee-q/src/components/dialog/readme.md b/packages/bee-q/src/components/dialog/readme.md
@@ -7,10 +7,11 @@
 
 ## Properties
 
-| Property | Attribute | Description            | Type                             | Default    |
-| -------- | --------- | ---------------------- | -------------------------------- | ---------- |
-| `isOpen` | `is-open` |                        | `boolean`                        | `false`    |
-| `size`   | `size`    | The size of the dialog | `"large" \| "medium" \| "small"` | `'medium'` |
+| Property  | Attribute | Description                                             | Type                             | Default      |
+| --------- | --------- | ------------------------------------------------------- | -------------------------------- | ------------ |
+| `isOpen`  | `is-open` |                                                         | `boolean`                        | `false`      |
+| `size`    | `size`    | The size of the dialog                                  | `"large" \| "medium" \| "small"` | `'medium'`   |
+| `variant` | `variant` | The variant of button to apply on top of the appearance | `"light" \| "standard"`          | `'standard'` |
 
 
 ## Shadow Parts

diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
@@ -14,7 +14,6 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 24px;
   position: relative;
   left: 46px;
   top: 45px;
@@ -23,18 +22,26 @@
   border-radius: 8px;
 }
 
+footer {
+  @apply flex h-[72px] w-full items-center justify-end py-3 px-6;
+
+  &.light {
+    background-color: #f8f8f9;
+  }
+}
+
 // Size
 
 .size {
   &--small {
-    @apply w-[var(--bq-dialog--small-width)];
+    @apply h-full w-[var(--bq-dialog--small-width)];
   }
 
   &--medium {
-    @apply w-[var(--bq-dialog--medium-width)];
+    @apply h-full w-[var(--bq-dialog--medium-width)];
   }
 
   &--large {
-    @apply w-[var(--bq-dialog--large-width)];
+    @apply h-full w-[var(--bq-dialog--large-width)];
   }
 }
diff --git a/packages/bee-q/src/index.html b/packages/bee-q/src/index.html
@@ -10,7 +10,6 @@
     <script nomodule src="/build/bee-q.js"></script>
   </head>
   <body>
-    <!-- <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component> -->
-    <bq-dialog></bq-dialog>
+    <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
   </body>
 </html>