@bolttech/atoms-segmented-control 0.9.0 → 0.10.0

package/README.md

@@ -1,8 +1,98 @@
-# atoms-segmented-control
+# SegmentedControl Component
 
-This library was generated with [Nx](https://nx.dev).
+The **SegmentedControl** component is a React component designed to provide a segmented control input for selecting options. This component allows users to choose from a set of options using a visually distinct set of buttons.
 
-## Running unit tests
+## Table of Contents
 
+- [Installation](#installation)
+- [Usage](#usage)
+- [Props](#props)
+- [Example](#example)
+- [Contributing](#contributing)
 
-Run `nx test atoms-segmented-control` to execute the unit tests via [Jest](https://jestjs.io).
+## Installation
+
+To use the **SegmentedControl** component in your React application, follow these steps:
+
+### Installation
+
+```bash
+npm install @edirect/frontend-foundations @bolttech/atoms-segmented-control
+```
+
+or
+
+```bash
+yarn add @edirect/frontend-foundations @bolttech/atoms-segmented-control
+```
+
+Once you have the required dependencies installed, you can start using the `SegmentedControl` component in your React application.
+
+## Usage
+
+The **SegmentedControl** component provides a set of visually distinct buttons that allow users to select from a predefined set of options. It supports customization through various props.
+
+To use the component, import it and include it in your JSX:
+
+```jsx
+import React from 'react';
+import {SegmentedControl} from '@bolttech/atoms-segmented-control';
+import {bolttechTheme, BolttechThemeProvider} from "@edirect/frontend-foundations";
+
+function App() {
+  return (
+    <BolttechThemeProvider theme={bolttechTheme}>
+      <SegmentedControl
+        value="option1"
+        options={[
+          {label: 'Option 1', value: 'option1'},
+          {label: 'Option 2', value: 'option2'},
+        ]}
+        errorMessage="An error occurred"
+        dataTestId="segmented-control-component"
+        onChange={(selectedValue) => console.log(`Selected: ${selectedValue}`)}
+      />
+    </BolttechThemeProvider>
+  );
+}
+
+export default App;
+```
+
+## Props
+
+The **SegmentedControl** component accepts the following props:
+
+| Prop         | Type          | Description                                       |
+|--------------|---------------|---------------------------------------------------|
+| `id`         | string        | The HTML `id` attribute for the segmented control.|
+| `dataTestId` | string        | The data-testid attribute for testing purposes.   |
+| `value`      | string        | The currently selected option value.              |
+| `options`    | Option[]      | An array of option objects to be displayed.       |
+| `errorMessage` | string      | An optional error message to display.            |
+| `onChange`   | function      | A callback function triggered on option change.   |
+| `onBlur`     | function      | A callback function triggered on blur event.      |
+| `onFocus`    | function      | A callback function triggered on focus event.     |
+
+## Example
+
+Here's an example of using the **SegmentedControl** component:
+
+```jsx
+<SegmentedControl
+  value="option1"
+  options={[
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+  ]}
+  errorMessage="An error occurred"
+  dataTestId="segmented-control-component"
+  onChange={(selectedValue) => console.log(`Selected: ${selectedValue}`)}
+/>
+```
+
+This will render a **SegmentedControl** component with two options, the first option selected, and an error message displayed.
+
+## Contributing
+
+Contributions to the **SegmentedControl** 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.

package/index.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -84,16 +85,16 @@ const LabelError = /*#__PURE__*/styled__default["default"].label.withConfig({
   theme
 }) => theme.typography.desktop.input.secondary.textCase);
 
-function SegmentedControl({
-  id = 'segmented-control-id',
-  dataTestId = 'segmented-control-date-testid',
+const SegmentedControl = /*#__PURE__*/react.forwardRef(({
+  id: _id = 'segmented-control-id',
+  dataTestId: _dataTestId = 'segmented-control-date-testid',
   value,
   options,
   errorMessage,
   onChange,
   onBlur,
   onFocus
-}) {
+}, ref) => {
   const onClick = valueSelected => {
     onChange && onChange(valueSelected);
   };
@@ -114,17 +115,18 @@ function SegmentedControl({
     }, `segmentedcontrol-option-${option.value}`));
   };
   return jsxRuntime.jsxs(SegmentedControlContainer, {
-    id: id,
-    "data-testid": dataTestId,
+    id: _id,
+    "data-testid": _dataTestId,
+    ref: ref,
     children: [jsxRuntime.jsx(SegmentedControlWrapper, {
       onBlur: onBlur,
       onFocus: onFocus,
       children: renderOptions()
     }), errorMessage && jsxRuntime.jsx(LabelError, {
-      "data-testid": `${dataTestId}-error`,
+      "data-testid": `${_dataTestId}-error`,
       children: errorMessage
     })]
   });
-}
+});
 
 exports.SegmentedControl = SegmentedControl;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@bolttech/atoms-segmented-control",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@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-segmented-control.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SegmentedControlProps } from './atoms-segmented-control.type';
-export declare function SegmentedControl({ id, dataTestId, value, options, errorMessage, onChange, onBlur, onFocus, }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;
 export default SegmentedControl;