@bolttech/atoms-segmented-control 0.11.0 → 0.12.1

package/README.md

@@ -36,8 +36,8 @@ 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";
+import { SegmentedControl } from '@bolttech/atoms-segmented-control';
+import { bolttechTheme, BolttechThemeProvider } from '@edirect/frontend-foundations';
 
 function App() {
   return (
@@ -45,9 +45,10 @@ function App() {
       <SegmentedControl
         value="option1"
         options={[
-          {label: 'Option 1', value: 'option1'},
-          {label: 'Option 2', value: 'option2'},
+          { label: 'Option 1', value: 'option1' },
+          { label: 'Option 2', value: 'option2' },
         ]}
+        fullWidth={false}
         errorMessage="An error occurred"
         dataTestId="segmented-control-component"
         onChange={(selectedValue) => console.log(`Selected: ${selectedValue}`)}
@@ -63,16 +64,17 @@ export default App;
 
 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.     |
+| 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.        |
+| `fullWidth`    | boolean  | Boolean representing if should take full width.    |
+| `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
 
@@ -85,6 +87,7 @@ Here's an example of using the **SegmentedControl** component:
     { label: 'Option 1', value: 'option1' },
     { label: 'Option 2', value: 'option2' },
   ]}
+  fullWidth={false}
   errorMessage="An error occurred"
   dataTestId="segmented-control-component"
   onChange={(selectedValue) => console.log(`Selected: ${selectedValue}`)}

package/index.cjs

@@ -1128,9 +1128,11 @@ function __rest(s, e) {
 const SegmentedControlContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "atoms-segmented-controlstyles__SegmentedControlContainer",
   componentId: "sc-1lpqq2u-0"
-})(["display:flex;flex-direction:column;gap:", ";"], ({
+})(["display:flex;flex-direction:column;gap:", ";", ";"], ({
   theme
-}) => theme.tokens.padding.XS);
+}) => theme.tokens.padding.XS, ({
+  fullWidth
+}) => fullWidth && styled.css(["", "{flex:1;}"], Option));
 const SegmentedControlWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "atoms-segmented-controlstyles__SegmentedControlWrapper",
   componentId: "sc-1lpqq2u-1"
@@ -1148,7 +1150,7 @@ const SegmentedControlWrapper = /*#__PURE__*/styled__default["default"].div.with
 const Option = /*#__PURE__*/styled__default["default"].button.withConfig({
   displayName: "atoms-segmented-controlstyles__Option",
   componentId: "sc-1lpqq2u-2"
-})(["background-color:", ";border:1px solid ", ";padding:", ";:first-of-type{border-right:0;}:last-of-type{border-left:0;}:not(:first-of-type) +:not(:last-of-type){border-right:0;border-left:0;}"], ({
+})(["background-color:", ";border:1px solid ", ";padding:", ";cursor:pointer;:first-of-type{border-right:0;}:last-of-type{border-left:0;}:not(:first-of-type) +:not(:last-of-type){border-right:0;border-left:0;}*{cursor:pointer;}"], ({
   theme,
   pressed,
   hasError
@@ -1206,11 +1208,12 @@ const SegmentedControl = /*#__PURE__*/react.forwardRef((_a, ref) => {
       value,
       options,
       errorMessage,
+      fullWidth = false,
       onChange,
       onBlur,
       onFocus
     } = _a,
-    props = __rest(_a, ["id", "dataTestId", "value", "options", "errorMessage", "onChange", "onBlur", "onFocus"]);
+    props = __rest(_a, ["id", "dataTestId", "value", "options", "errorMessage", "fullWidth", "onChange", "onBlur", "onFocus"]);
   const onClick = valueSelected => {
     onChange && onChange(valueSelected);
   };
@@ -1235,6 +1238,7 @@ const SegmentedControl = /*#__PURE__*/react.forwardRef((_a, ref) => {
   return jsxRuntime.jsxs(SegmentedControlContainer, Object.assign({
     id: id,
     "data-testid": dataTestId,
+    fullWidth: fullWidth,
     ref: ref
   }, uiUtils.applyDataAttributes(props), {
     children: [jsxRuntime.jsx(SegmentedControlWrapper, {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/atoms-segmented-control",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
     "@bolttech/ui-utils": "0.1.1",
-    "@edirect/frontend-foundations": "0.0.69",
+    "@edirect/frontend-foundations": "0.0.70",
     "react": "18.2.0",
     "styled-components": "5.3.6"
   },

package/src/lib/atoms-segmented-control.d.ts

@@ -8,6 +8,7 @@ export declare const SegmentedControl: import("react").ForwardRefExoticComponent
         value: string | number;
     }[];
     errorMessage?: string | undefined;
+    fullWidth?: boolean | undefined;
     onChange?: ((value: string | number) => void) | undefined;
     onBlur?: ((value: unknown) => void) | ((evt: import("react").FocusEvent<HTMLElement, Element>) => void) | undefined;
     onFocus?: ((value: unknown) => void) | ((evt: import("react").FocusEvent<HTMLElement, Element>) => void) | undefined;

package/src/lib/atoms-segmented-control.styles.d.ts

@@ -1,4 +1,6 @@
-export declare const SegmentedControlContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SegmentedControlContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    fullWidth: boolean;
+}, never>;
 export declare const SegmentedControlWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Option: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     pressed: boolean;

package/src/lib/atoms-segmented-control.type.d.ts

@@ -9,6 +9,7 @@ export type SegmentedControlProps = DefaultProps & {
         value: string | number;
     }[];
     errorMessage?: string;
+    fullWidth?: boolean;
     onChange?: (value: string | number) => void;
     onBlur?: ((value: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
     onFocus?: ((value: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);