@bolttech/atoms-button 0.15.0 → 0.16.0

package/README.md

@@ -1,8 +1,72 @@
-# atoms-button
+# Button Component
 
-This library was generated with [Nx](https://nx.dev).
+A customizable React button component.
 
-## Running unit tests
+## Installation
 
+Use the package manager [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install the component.
 
-Run `nx test atoms-button` to execute the unit tests via [Jest](https://jestjs.io).
+```bash
+npm install @edirect/frontend-foundations @bolttech/atoms-button
+```
+
+or
+
+```bash
+yarn add @edirect/frontend-foundations @bolttech/atoms-button
+```
+
+## Props
+
+The `Button` component accepts the following properties:
+
+| Prop          | Type         | Description                                                                                                     |
+|---------------|--------------|-----------------------------------------------------------------------------------------------------------------|
+| dataTestId    | `string`     | The `data-testid` attribute for testing.                                                                         |
+| disabled      | `boolean`    | Disables the button when set to `true`.                                                                        |
+| title         | `string`     | The text content of the button.                                                                                |
+| variant       | `string`     | The variant style of the button (e.g., `'primary'`, `'secondary'`, `'alternative'`).                           |
+| size          | `string`     | The size of the button (e.g., `'sm'`, `'md'`, `'lg'`).                                                         |
+| iconRight     | `string`     | The name of the icon to be displayed on the right side of the button.                                          |
+| iconLeft      | `string`     | The name of the icon to be displayed on the left side of the button.                                           |
+| fullWidth     | `boolean`    | Sets the button width to 100% if `true`.                                                                       |
+| type          | `string`     | The type of the button (e.g., `'button'`, `'submit'`, `'reset'`).                                              |
+| onClick       | `function`   | Callback function to handle the button click event.                                                            |
+
+## Usage
+
+```jsx
+import React from 'react';
+import {Button} from '@bolttech/atoms-button';
+import {bolttechTheme, BolttechThemeProvider} from "@edirect/frontend-foundations";
+
+const ExampleComponent = () => {
+  const handleButtonClick = () => {
+    // Logic to handle the button click event
+  };
+
+  return (
+    <BolttechThemeProvider theme={bolttechTheme}>
+      <Button
+        dataTestId="custom-button"
+        disabled={false}
+        title="Click Me"
+        variant="primary"
+        size="md"
+        iconRight="arrow_forward"
+        fullWidth={false}
+        type="button"
+        onClick={handleButtonClick}
+      />
+    </BolttechThemeProvider>
+  );
+};
+
+export default ExampleComponent;
+```
+
+## Contributing
+
+Contributions are welcome! For any bug fixes, improvements, or new features, please open an [issue](link-to-issues) or submit a pull request.
+
+Please make sure to follow the code standards and test your changes before submitting.

package/index.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var atomsIcon = require('@bolttech/atoms-icon');
 var styled = require('styled-components');
 
@@ -131,28 +132,29 @@ const ButtonTitle = /*#__PURE__*/styled__default["default"].label.withConfig({
   sizeVariant
 }) => theme.components.button[size][sizeVariant].textLabel.textCase);
 
-function Button({
+const Button = /*#__PURE__*/react.forwardRef(({
   dataTestId,
-  disabled = false,
-  title = '',
+  disabled: _disabled = false,
+  title: _title = '',
   variant,
   size,
   iconRight,
   iconLeft,
-  fullWidth = false,
-  type = 'button',
+  fullWidth: _fullWidth = false,
+  type: _type = 'button',
   onClick
-}) {
+}, ref) => {
   return jsxRuntime.jsx(Button$1, {
     "data-testid": dataTestId,
     variant: variant,
     size: size,
     sizeVariant: SizeVariant[variant],
     inverseColors: variant === 'alternative',
-    disabled: disabled,
-    type: type,
-    fullWidth: fullWidth,
-    onClick: () => !disabled && onClick && onClick(),
+    disabled: _disabled,
+    type: _type,
+    fullWidth: _fullWidth,
+    onClick: () => !_disabled && onClick && onClick(),
+    ref: ref,
     children: jsxRuntime.jsxs(Container, {
       size: size,
       children: [iconLeft && jsxRuntime.jsx("div", {
@@ -162,10 +164,10 @@ function Button({
           dataTestId: `buttonIcon-${iconLeft}`,
           icon: iconLeft
         })
-      }), title && jsxRuntime.jsx(ButtonTitle, {
+      }), _title && jsxRuntime.jsx(ButtonTitle, {
         size: size,
         sizeVariant: SizeVariant[variant],
-        children: title
+        children: _title
       }), iconRight && jsxRuntime.jsx("div", {
         className: "right-img-btn",
         "data-testid": `left-img-btn-${iconRight}`,
@@ -176,6 +178,6 @@ function Button({
       })]
     })
   });
-}
+});
 
 exports.Button = Button;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@bolttech/atoms-button",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "dependencies": {
     "@bolttech/atoms-icon": "^0.1.14",
-    "@edirect/frontend-foundations": "0.0.58",
+    "@edirect/frontend-foundations": "0.0.67",
     "react": "18.2.0",
     "styled-components": "5.3.6"
   },

package/src/lib/atoms-button.d.ts

@@ -1,2 +1,4 @@
+import React from 'react';
 import { ButtonProps } from './atoms-button.type';
-export declare function Button({ dataTestId, disabled, title, variant, size, iconRight, iconLeft, fullWidth, type, onClick, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;