feat(dialog): add new <bq-dialog> component

config/tailwind.primitve.colors.ts

@@ -64,16 +64,16 @@ export const PRIMITIVE_COLORS = {
     1000: 'var(--bq-green-1000)',
   },
   grey: {
-    50: 'var(--bq-neutral-50)',
-    100: 'var(--bq-neutral-100)',
-    200: 'var(--bq-neutral-200)',
-    300: 'var(--bq-neutral-300)',
-    400: 'var(--bq-neutral-400)',
-    500: 'var(--bq-neutral-500)',
-    600: 'var(--bq-neutral-600)',
-    700: 'var(--bq-neutral-700)',
-    800: 'var(--bq-neutral-800)',
-    900: 'var(--bq-neutral-900)',
+    50: 'var(--bq-grey-50)',
+    100: 'var(--bq-grey-100)',
+    200: 'var(--bq-grey-200)',
+    300: 'var(--bq-grey-300)',
+    400: 'var(--bq-grey-400)',
+    500: 'var(--bq-grey-500)',
+    600: 'var(--bq-grey-600)',
+    700: 'var(--bq-grey-700)',
+    800: 'var(--bq-grey-800)',
+    900: 'var(--bq-grey-900)',
   },
   indigo: {
     100: 'var(--bq-indigo-100)',

packages/bee-q/src/components.d.ts

@@ -8,6 +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 { TDialogFooterAppearance, 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 { TNotificationType } from "./components/notification/bq-notification.types";
@@ -22,6 +23,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 { TDialogFooterAppearance, 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 { TNotificationType } from "./components/notification/bq-notification.types";
@@ -172,6 +174,44 @@ export namespace Components {
          */
         "value": string;
     }
+    interface BqDialog {
+        /**
+          * Dismiss or cancel the dialog
+         */
+        "cancel": () => Promise<void>;
+        /**
+          * If true, the dialog will not close when clicking on the backdrop overlay
+         */
+        "disableCloseClickOutside": boolean;
+        /**
+          * If true, the dialog will not close when the [Esc] key is press
+         */
+        "disableCloseEscKeydown": boolean;
+        /**
+          * The appearance of footer
+         */
+        "footerApperance": TDialogFooterAppearance;
+        /**
+          * Closes the dialog
+         */
+        "hide": () => Promise<void>;
+        /**
+          * If true, it hides the close button
+         */
+        "hideCloseButton": boolean;
+        /**
+          * If true, the dialog will be shown as open
+         */
+        "open": boolean;
+        /**
+          * Open the dialog
+         */
+        "show": () => Promise<void>;
+        /**
+          * The size of the dialog
+         */
+        "size": TDialogSize;
+    }
     interface BqDivider {
         /**
           * If true, the divider has a dashed pattern
@@ -592,6 +632,10 @@ export interface BqCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBqCheckboxElement;
 }
+export interface BqDialogCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBqDialogElement;
+}
 export interface BqIconCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBqIconElement;
@@ -663,6 +707,12 @@ declare global {
         prototype: HTMLBqCheckboxElement;
         new (): HTMLBqCheckboxElement;
     };
+    interface HTMLBqDialogElement extends Components.BqDialog, HTMLStencilElement {
+    }
+    var HTMLBqDialogElement: {
+        prototype: HTMLBqDialogElement;
+        new (): HTMLBqDialogElement;
+    };
     interface HTMLBqDividerElement extends Components.BqDivider, HTMLStencilElement {
     }
     var HTMLBqDividerElement: {
@@ -762,6 +812,7 @@ declare global {
         "bq-badge": HTMLBqBadgeElement;
         "bq-button": HTMLBqButtonElement;
         "bq-checkbox": HTMLBqCheckboxElement;
+        "bq-dialog": HTMLBqDialogElement;
         "bq-divider": HTMLBqDividerElement;
         "bq-icon": HTMLBqIconElement;
         "bq-notification": HTMLBqNotificationElement;
@@ -929,6 +980,44 @@ declare namespace LocalJSX {
          */
         "value": string;
     }
+    interface BqDialog {
+        /**
+          * If true, the dialog will not close when clicking on the backdrop overlay
+         */
+        "disableCloseClickOutside"?: boolean;
+        /**
+          * If true, the dialog will not close when the [Esc] key is press
+         */
+        "disableCloseEscKeydown"?: boolean;
+        /**
+          * The appearance of footer
+         */
+        "footerApperance"?: TDialogFooterAppearance;
+        /**
+          * If true, it hides the close button
+         */
+        "hideCloseButton"?: boolean;
+        /**
+          * Callback handler emitted when the dialog has been canceled or dismissed
+         */
+        "onBqCancel"?: (event: BqDialogCustomEvent<void>) => void;
+        /**
+          * Callback handler emitted when the dialog will close
+         */
+        "onBqClose"?: (event: BqDialogCustomEvent<void>) => void;
+        /**
+          * Callback handler emitted when the dialog will open
+         */
+        "onBqOpen"?: (event: BqDialogCustomEvent<void>) => void;
+        /**
+          * If true, the dialog will be shown as open
+         */
+        "open"?: boolean;
+        /**
+          * The size of the dialog
+         */
+        "size"?: TDialogSize;
+    }
     interface BqDivider {
         /**
           * If true, the divider has a dashed pattern
@@ -1377,6 +1466,7 @@ declare namespace LocalJSX {
         "bq-badge": BqBadge;
         "bq-button": BqButton;
         "bq-checkbox": BqCheckbox;
+        "bq-dialog": BqDialog;
         "bq-divider": BqDivider;
         "bq-icon": BqIcon;
         "bq-notification": BqNotification;
@@ -1407,6 +1497,7 @@ declare module "@stencil/core" {
              */
             "bq-button": LocalJSX.BqButton & JSXBase.HTMLAttributes<HTMLBqButtonElement>;
             "bq-checkbox": LocalJSX.BqCheckbox & JSXBase.HTMLAttributes<HTMLBqCheckboxElement>;
+            "bq-dialog": LocalJSX.BqDialog & JSXBase.HTMLAttributes<HTMLBqDialogElement>;
             "bq-divider": LocalJSX.BqDivider & JSXBase.HTMLAttributes<HTMLBqDividerElement>;
             /**
              * Icons are simplified images that graphically explain the meaning of an object on the screen.

packages/bee-q/src/components/button/readme.md

@@ -49,6 +49,7 @@ Buttons are designed for users to take action on a page or a screen.
 
 ### Used by
 
+ - [bq-dialog](../dialog)
  - [bq-notification](../notification)
 
 ### Depends on
@@ -59,6 +60,7 @@ Buttons are designed for users to take action on a page or a screen.
 ```mermaid
 graph TD;
   bq-button --> bq-icon
+  bq-dialog --> bq-button
   bq-notification --> bq-button
   style bq-button fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/bee-q/src/components/dialog/__tests__/bq-dialog.e2e.ts

@@ -0,0 +1,41 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('bq-dialog', () => {
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-dialog></bq-dialog>');
+
+    const element = await page.find('bq-dialog');
+
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should have shadow root', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-dialog></bq-dialog>');
+
+    const element = await page.find('bq-dialog');
+
+    expect(element.shadowRoot).not.toBeNull();
+  });
+
+  it('should display title', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-dialog><h3 slot="title">Dialog Title</h3></bq-dialog>');
+
+    const element = await page.find('bq-dialog');
+
+    expect(element).toEqualText('Dialog Title');
+  });
+
+  it('should display content', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      '<bq-dialog><p slot="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></bq-dialog>',
+    );
+
+    const element = await page.find('bq-dialog');
+
+    expect(element).toEqualText('Lorem Ipsum is simply dummy text of the printing and typesetting industry.');
+  });
+});

packages/bee-q/src/components/dialog/_storybook/bq-dialog.mdx

@@ -0,0 +1,24 @@
+import { ArgTypes, Stories, Title, Subtitle } from '@storybook/addon-docs';
+
+<Title>Dialog</Title>
+
+Description A Dialog is a UI component used to display additional content or prompt a user for action.
+It provides a way to display additional information, options, or controls in a separate, non-obstructive interface element.
+
+<Subtitle>Usage</Subtitle>
+
+To ensure a seamless user experience and maximize the effectiveness of the Dialog Modal component, it is recommended to follow these best practices:
+
+- Keep it simple: Avoid overwhelming the user with excessive content within the Dialog Modal. Strive for simplicity and present only the essential information or options necessary to complete the intended action or convey the message.
+- Use a clear and concise title: Provide a descriptive title that clearly communicates the purpose or content of the Dialog Modal. This helps users quickly understand the context and relevance of the dialog.
+- Prioritize actions: If there are multiple actions within the Dialog Modal, make sure to present them in an order that helps users easily identify and choose the appropriate action. Consider using clear call-to-action buttons with descriptive labels to guide the user.
+
+<Subtitle>👍 When to use</Subtitle>
+
+- Displaying additional information, options, or controls that are relevant to a specific task or action.
+- Prompting a user for confirmation or input, such as when performing a potentially destructive action or making changes to a critical setting.
+- Providing a way for users to access related content or features without navigating away from the current interface.
+
+<Title>Properties</Title>
+
+<ArgTypes of="bq-dialog" />