@bolttech/atoms-stepper - npm Package Compare versions

Comparing version 0.10.1 to 0.11.0

package.json

 {
   "name": "@bolttech/atoms-stepper",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "main": "./index.cjs",
@@ -8,4 +8,4 @@ "type": "commonjs",
   "dependencies": {
-    "@bolttech/atoms-icon": "0.18.0",
-    "@edirect/frontend-foundations": "0.0.58",
+    "@bolttech/atoms-icon": "0.19.0",
+    "@edirect/frontend-foundations": "0.0.67",
     "react": "18.2.0",
@@ -12,0 +12,0 @@ "styled-components": "5.3.6"

README.md

@@ -1,7 +0,121 @@
-# atoms-stepper
+# Stepper Component
 
-This library was generated with [Nx](https://nx.dev).
+The **Stepper** component is a React component designed to provide a customizable step-by-step navigation experience. This component allows users to visualize and navigate through a sequence of steps, each represented by a title and optional content.
 
-## Running unit tests
+## Table of Contents
 
-Run `nx test atoms-stepper` to execute the unit tests via [Jest](https://jestjs.io).
+- [Installation](#installation)
+- [Usage](#usage)
+- [Props](#props)
+- [Example](#example)
+- [Contributing](#contributing)
+
+## Installation
+
+To use the **Stepper** component in your React application, follow these steps:
+
+### Installation
+
+```bash
+npm install @edirect/frontend-foundations @bolttech/atoms-stepper
+```
+
+or
+
+```bash
+yarn add @edirect/frontend-foundations @bolttech/atoms-stepper
+```
+
+Once you have the required dependencies installed, you can start using the `Stepper` component in your React application.
+
+## Usage
+
+The **Stepper** component provides a visual representation of a step-by-step process. It supports customization through various props.
+
+To use the component, import it and include it in your JSX:
+
+```jsx
+import React from 'react';
+import {Stepper} from '@bolttech/atoms-stepper';
+import {bolttechTheme, BolttechThemeProvider} from "@edirect/frontend-foundations";
+
+function App() {
+  const stepperArray = [
+    {
+      title: 'Step 1',
+      statusIndicator: 'completed',
+      componentContent: <p>Step 1 content</p>,
+    },
+    {
+      title: 'Step 2',
+      statusIndicator: 'default',
+      componentContent: <p>Step 2 content</p>,
+    },
+    {
+      title: 'Step 3',
+      statusIndicator: 'error',
+      componentContent: <p>Step 3 content</p>,
+    },
+  ];
+
+  return (
+    <BolttechThemeProvider theme={bolttechTheme}>
+      <Stepper stepperArray={stepperArray} dataTestId="my-stepper"/>
+    </BolttechThemeProvider>
+  );
+}
+
+export default App;
+```
+
+## Props
+
+The **Stepper** component accepts the following props:
+
+| Prop         | Type          | Description                                       |
+|--------------|---------------|---------------------------------------------------|
+| `stepperArray` | StepperItem[] | An array of step objects to be displayed.       |
+| `dataTestId` | string        | The data-testid attribute for testing purposes.  |
+
+Each `StepperItem` object should have the following structure:
+
+```jsx
+{
+  title: 'Step Title',
+  statusIndicator: 'completed' | 'default' | 'error',
+  componentContent: JSX.Element,
+}
+```
+
+## Example
+
+Here's an example of using the **Stepper** component:
+
+```jsx
+<Stepper
+  stepperArray={[
+    {
+      title: 'Step 1',
+      statusIndicator: 'completed',
+      componentContent: <p>Step 1 content</p>,
+    },
+    {
+      title: 'Step 2',
+      statusIndicator: 'default',
+      componentContent: <p>Step 2 content</p>,
+    },
+    {
+      title: 'Step 3',
+      statusIndicator: 'error',
+      componentContent: <p>Step 3 content</p>,
+    },
+  ]}
+  dataTestId="my-stepper"
+/>
+```
+
+This will render a **Stepper** component with three steps, each with a different status indicator and content.
+
+## Contributing
+
+Contributions to the **Stepper** component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.

src/lib/atoms-stepper-item.d.ts

@@ -1,2 +0,7 @@
-import { StepperItemProps } from './atoms-stepper.type';
-export declare function StepperItem({ title, children, status, icon, }: StepperItemProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const StepperItem: React.ForwardRefExoticComponent<{
+    title: string;
+    icon?: string | React.ReactElement<HTMLImageElement, string | React.JSXElementConstructor<any>> | undefined;
+    children: React.ReactNode;
+} & Omit<import("./atoms-stepper.type").StepperStyleProps, "textVariation"> & React.RefAttributes<HTMLDivElement>>;
+export default StepperItem;

src/lib/atoms-stepper.d.ts

@@ -0,2 +1,4 @@
+import React from 'react';
 import { StepperProps } from './atoms-stepper.type';
-export declare function Stepper({ children, dataTestId }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLElement>>;
+export default Stepper;

src/lib/atoms-stepper.stories.d.ts

@@ -1,10 +0,11 @@
-import type { ComponentMeta } from '@storybook/react';
+/// <reference types="react" />
+import type { Meta } from '@storybook/react';
 import { Stepper } from './atoms-stepper';
-declare const Story: ComponentMeta<typeof Stepper>;
+declare const Story: Meta<typeof Stepper>;
 export default Story;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps>;
-export declare const Selected: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps>;
-export declare const Completed: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps>;
-export declare const Error: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps>;
-export declare const Group: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps>;
-export declare const Group2: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Selected: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Completed: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Error: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Group: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Group2: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./atoms-stepper.type").StepperProps & import("react").RefAttributes<HTMLElement>>;

No alert changes

Improved metrics

Total package byte prevSize

13241

increased by39.03%

Lines of code

231

increased by5%

Number of lines in readme file

122

increased by1425%

Dependency changes

• + Added@bolttech/atoms-icon@0.19.0(transitive)

• + Added@edirect/frontend-foundations@0.0.67(transitive)

• - Removed@bolttech/atoms-icon@0.18.0(transitive)

• - Removed@edirect/frontend-foundations@0.0.58(transitive)

• Updated@bolttech/atoms-icon@0.19.0

• Updated@edirect/frontend-foundations@0.0.67