feat(steps): add steps component

.vscode/settings.json

@@ -36,7 +36,6 @@
   },
   "html.customData": ["./dist/bee-q/custom-elements.json"],
   "less.validate": false,
-  "prettier.prettierPath": "node_modules/prettier",
   "scss.validate": false,
   "stylelint.configFile": ".stylelintrc.json",
   "stylelint.validate": [

config/theme/default/light.ts

@@ -120,8 +120,8 @@ export const DefaultLightTheme = {
   'bq-text--secondary-active': 'var(--bq-grey-700)',
   'bq-text--secondary-disabled': 'var(--bq-grey-400)',
   /** Inverse */
-  'bq-text--inverse': 'var(--bq-neutral-white)',
-  'bq-text--inverse-disabled': 'var(--bq-grey-50)',
+  'bq-text--inverse': 'var(--bq-grey-50)',
+  'bq-text--inverse-disabled': 'var(--bq-grey-100)',
   /** Brand */
   'bq-text--brand': 'var(--bq-iris-600)',
   'bq-text--brand-hover': 'var(--bq-iris-500)',

packages/beeq/src/components.d.ts

@@ -19,6 +19,8 @@ import { TSideMenuAppearance, TSideMenuSize } from "./components/side-menu/bq-si
 import { TSliderType } from "./components/slider/bq-slider.types";
 import { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spinner.types";
 import { TStatusType } from "./components/status/bq-status.types";
+import { TStepsSize, TStepsType } from "./components/steps/bq-steps.types";
+import { TStepItemStatus } from "./components/step-item/bq-step-item.types";
 import { TSwitchInnerLabel, TSwitchJustifyContent } from "./components/switch/bq-swithc.types";
 import { TTabSize } from "./components/tab/bq-tab.types";
 import { TTextareaAutoCapitalize, TTextareaWrap } from "./components/textarea/bq-textarea.types";
@@ -37,6 +39,8 @@ export { TSideMenuAppearance, TSideMenuSize } from "./components/side-menu/bq-si
 export { TSliderType } from "./components/slider/bq-slider.types";
 export { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spinner.types";
 export { TStatusType } from "./components/status/bq-status.types";
+export { TStepsSize, TStepsType } from "./components/steps/bq-steps.types";
+export { TStepItemStatus } from "./components/step-item/bq-step-item.types";
 export { TSwitchInnerLabel, TSwitchJustifyContent } from "./components/switch/bq-swithc.types";
 export { TTabSize } from "./components/tab/bq-tab.types";
 export { TTextareaAutoCapitalize, TTextareaWrap } from "./components/textarea/bq-textarea.types";
@@ -273,7 +277,7 @@ export namespace Components {
          */
         "strokeDashWidth"?: number;
         /**
-          * Set the lineap of the divider's stroke. This is applicable when the stroke is dashed
+          * Set the line of the divider's stroke. This is applicable when the stroke is dashed
          */
         "strokeLinecap"?: TDividerStrokeLinecap;
         /**
@@ -769,6 +773,34 @@ export namespace Components {
          */
         "type": TStatusType;
     }
+    interface BqStepItem {
+        /**
+          * It defines prefix size
+         */
+        "size"?: TStepsSize;
+        /**
+          * It defines step item appearance based on its status
+         */
+        "status"?: TStepItemStatus;
+        /**
+          * It defines the step item type used
+         */
+        "type"?: TStepsType;
+    }
+    interface BqSteps {
+        /**
+          * The color of the line that connects the steps. It should be a valid declarative color token.
+         */
+        "dividerColor": string;
+        /**
+          * The size of the steps
+         */
+        "size": TStepsSize;
+        /**
+          * The type of prefix element to use on the step items
+         */
+        "type": TStepsType;
+    }
     /**
      * Toggle switches are digital on/off switches.
      * They should provide immediate results, giving users the freedom to control their preferences as needed.
@@ -1096,6 +1128,10 @@ export interface BqSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBqSliderElement;
 }
+export interface BqStepItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBqStepItemElement;
+}
 export interface BqSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBqSwitchElement;
@@ -1270,6 +1306,18 @@ declare global {
         prototype: HTMLBqStatusElement;
         new (): HTMLBqStatusElement;
     };
+    interface HTMLBqStepItemElement extends Components.BqStepItem, HTMLStencilElement {
+    }
+    var HTMLBqStepItemElement: {
+        prototype: HTMLBqStepItemElement;
+        new (): HTMLBqStepItemElement;
+    };
+    interface HTMLBqStepsElement extends Components.BqSteps, HTMLStencilElement {
+    }
+    var HTMLBqStepsElement: {
+        prototype: HTMLBqStepsElement;
+        new (): HTMLBqStepsElement;
+    };
     /**
      * Toggle switches are digital on/off switches.
      * They should provide immediate results, giving users the freedom to control their preferences as needed.
@@ -1335,6 +1383,8 @@ declare global {
         "bq-slider": HTMLBqSliderElement;
         "bq-spinner": HTMLBqSpinnerElement;
         "bq-status": HTMLBqStatusElement;
+        "bq-step-item": HTMLBqStepItemElement;
+        "bq-steps": HTMLBqStepsElement;
         "bq-switch": HTMLBqSwitchElement;
         "bq-tab": HTMLBqTabElement;
         "bq-tab-group": HTMLBqTabGroupElement;
@@ -1619,7 +1669,7 @@ declare namespace LocalJSX {
          */
         "strokeDashWidth"?: number;
         /**
-          * Set the lineap of the divider's stroke. This is applicable when the stroke is dashed
+          * Set the line of the divider's stroke. This is applicable when the stroke is dashed
          */
         "strokeLinecap"?: TDividerStrokeLinecap;
         /**
@@ -2211,6 +2261,35 @@ declare namespace LocalJSX {
          */
         "type"?: TStatusType;
     }
+    interface BqStepItem {
+        "onBqClick"?: (event: BqStepItemCustomEvent<{ target: HTMLBqStepItemElement; value: string }>) => void;
+        /**
+          * It defines prefix size
+         */
+        "size"?: TStepsSize;
+        /**
+          * It defines step item appearance based on its status
+         */
+        "status"?: TStepItemStatus;
+        /**
+          * It defines the step item type used
+         */
+        "type"?: TStepsType;
+    }
+    interface BqSteps {
+        /**
+          * The color of the line that connects the steps. It should be a valid declarative color token.
+         */
+        "dividerColor"?: string;
+        /**
+          * The size of the steps
+         */
+        "size"?: TStepsSize;
+        /**
+          * The type of prefix element to use on the step items
+         */
+        "type"?: TStepsType;
+    }
     /**
      * Toggle switches are digital on/off switches.
      * They should provide immediate results, giving users the freedom to control their preferences as needed.
@@ -2506,6 +2585,8 @@ declare namespace LocalJSX {
         "bq-slider": BqSlider;
         "bq-spinner": BqSpinner;
         "bq-status": BqStatus;
+        "bq-step-item": BqStepItem;
+        "bq-steps": BqSteps;
         "bq-switch": BqSwitch;
         "bq-tab": BqTab;
         "bq-tab-group": BqTabGroup;
@@ -2551,6 +2632,8 @@ declare module "@stencil/core" {
              */
             "bq-spinner": LocalJSX.BqSpinner & JSXBase.HTMLAttributes<HTMLBqSpinnerElement>;
             "bq-status": LocalJSX.BqStatus & JSXBase.HTMLAttributes<HTMLBqStatusElement>;
+            "bq-step-item": LocalJSX.BqStepItem & JSXBase.HTMLAttributes<HTMLBqStepItemElement>;
+            "bq-steps": LocalJSX.BqSteps & JSXBase.HTMLAttributes<HTMLBqStepsElement>;
             /**
              * Toggle switches are digital on/off switches.
              * They should provide immediate results, giving users the freedom to control their preferences as needed.

packages/beeq/src/components/divider/bq-divider.tsx

@@ -23,7 +23,7 @@ const strokeDrawPositions = {
 /**
  * @part base - The component's internal wrapper.
  * @part dash-start - The component's internal svg wrapper for the start line of the divider's stroke
- * @part dash-end - The componet's internal svg wrapper for the end line of the divider's stroke
+ * @part dash-end - The component's internal svg wrapper for the end line of the divider's stroke
  * @part dash-start-line - The component's internal line component of the divider's stroke
  * @part dash-end-line - The component's internal line component of the divider's stroke
  */
@@ -76,7 +76,7 @@ export class BqDivider {
   /** Set the min width of the divider's stroke when text is not centered. Value expressed in px */
   @Prop({ reflect: true }) strokeBasis?: number = 20;
 
-  /** Set the lineap of the divider's stroke. This is applicable when the stroke is dashed */
+  /** Set the line of the divider's stroke. This is applicable when the stroke is dashed */
   @Prop({ reflect: true }) strokeLinecap?: TDividerStrokeLinecap = 'butt';
 
   // Prop lifecycle events

packages/beeq/src/components/divider/readme.md

@@ -13,7 +13,7 @@
 | `strokeColor`     | `stroke-color`      | Set the stroke color of the divider. The value should be a valid value of the palette color      | `string`                        | `'stroke--secondary'` |
 | `strokeDashGap`   | `stroke-dash-gap`   | Set the gap of the divider's stroke. This is applicable when the stroke is dashed                | `number`                        | `7`                   |
 | `strokeDashWidth` | `stroke-dash-width` | Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed | `number`                        | `12`                  |
-| `strokeLinecap`   | `stroke-linecap`    | Set the lineap of the divider's stroke. This is applicable when the stroke is dashed             | `"butt" \| "round" \| "square"` | `'butt'`              |
+| `strokeLinecap`   | `stroke-linecap`    | Set the line of the divider's stroke. This is applicable when the stroke is dashed               | `"butt" \| "round" \| "square"` | `'butt'`              |
 | `strokeThickness` | `stroke-thickness`  | Set the thickness of the divider's stroke. Value expressed in px                                 | `number`                        | `2`                   |
 | `titleAlignment`  | `title-alignment`   | Set the alignment of the title on the main axis of the divider (horizontal / vertical)           | `"end" \| "middle" \| "start"`  | `'middle'`            |
 
@@ -23,12 +23,25 @@
 | Part                | Description                                                                     |
 | ------------------- | ------------------------------------------------------------------------------- |
 | `"base"`            | The component's internal wrapper.                                               |
-| `"dash-end"`        | The componet's internal svg wrapper for the end line of the divider's stroke    |
+| `"dash-end"`        | The component's internal svg wrapper for the end line of the divider's stroke   |
 | `"dash-end-line"`   | The component's internal line component of the divider's stroke                 |
 | `"dash-start"`      | The component's internal svg wrapper for the start line of the divider's stroke |
 | `"dash-start-line"` | The component's internal line component of the divider's stroke                 |
 
 
+## Dependencies
+
+### Used by
+
+ - [bq-steps](../steps)
+
+### Graph
+```mermaid
+graph TD;
+  bq-steps --> bq-divider
+  style bq-divider fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/beeq/src/components/step-item/__tests__/bq-step-item.e2e.ts

@@ -0,0 +1,85 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('bq-step-item', () => {
+  it('should render', async () => {
+    const page = await newE2EPage({
+      html: `<bq-step-item></bq-step-item>`,
+    });
+
+    const element = await page.find('bq-step-item');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should have shadow root', async () => {
+    const page = await newE2EPage({
+      html: `<bq-step-item></bq-step-item>`,
+    });
+
+    const element = await page.find('bq-step-item');
+    expect(element.shadowRoot).not.toBeNull();
+  });
+
+  it('should display text title', async () => {
+    const title = 'Title';
+    const description = 'Description for step item';
+
+    const page = await newE2EPage({
+      html: `
+        <bq-step-item type="numeric" status="default">
+          <span>${title}</span>
+          <span slot="description">${description}</span>
+        </bq-step-item>
+      `,
+    });
+
+    const text = await page.$eval('bq-step-item', (element) => {
+      const slotElement = element.shadowRoot.querySelector('.bq-step-item__content--title').querySelector('slot');
+      const assignedElements = (slotElement as HTMLSlotElement).assignedElements({ flatten: true })[0];
+
+      return assignedElements.textContent;
+    });
+    expect(text).toEqualText(title);
+  });
+
+  it('should display description', async () => {
+    const title = 'Title';
+    const description = 'Description for step item';
+
+    const page = await newE2EPage({
+      html: `
+        <bq-step-item type="numeric" status="default">
+          <span>${title}</span>
+          <span slot="description">${description}</span>
+        </bq-step-item>
+      `,
+    });
+
+    const text = await page.$eval('bq-step-item', (element) => {
+      const slotElement = element.shadowRoot.querySelector('slot[name="description"]');
+      const assignedElements = (slotElement as HTMLSlotElement).assignedElements({ flatten: true })[0];
+
+      return assignedElements.textContent;
+    });
+    expect(text).toEqualText(description);
+  });
+
+  it('should display icon prefix', async () => {
+    const page = await newE2EPage({
+      html: `
+        <bq-step-item status="default">
+          <bq-icon slot="prefix" name="circle"></bq-icon>
+          <span>Title</span>
+          <span slot="description">Description</span>
+        </bq-step-item>
+      `,
+    });
+
+    const prefix = await page.$eval('bq-step-item', (element) => {
+      const slotElement = element.shadowRoot.querySelector('slot[name="prefix"]');
+      const assignedElements = (slotElement as HTMLSlotElement).assignedElements({ flatten: true })[0];
+
+      return assignedElements.tagName;
+    });
+    expect(prefix).toMatch(/bq-icon/i);
+  });
+});