@bolttech/atoms-checkbox 0.10.0 → 0.12.0

package/README.md

@@ -1,8 +1,70 @@
-# atoms-checkbox
+# Checkbox Component
 
-This library was generated with [Nx](https://nx.dev).
+A simple React checkbox 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-checkbox` to execute the unit tests via [Jest](https://jestjs.io).
+```bash
+npm install @edirect/frontend-foundations @bolttech/atoms-checkbox
+```
+
+or
+
+```bash
+yarn add @edirect/frontend-foundations @bolttech/atoms-checkbox
+```
+
+## Props
+
+The `Checkbox` component accepts the following properties:
+
+| Prop         | Type          | Description                                                                                       |
+|--------------|---------------|---------------------------------------------------------------------------------------------------|
+| id           | `string`      | The ID attribute for the checkbox element.                                                         |
+| label        | `string`      | The label text for the checkbox.                                                                  |
+| disabled     | `boolean`     | Disables the checkbox when set to `true`.                                                         |
+| errorMessage | `string`      | An optional error message to be displayed.                                                        |
+| ref          | `object`      | A reference object for the checkbox element.                                                       |
+| checked      | `boolean`     | Determines whether the checkbox is checked or not.                                                 |
+| onChange     | `function`    | Callback function to handle the checkbox change event.                                            |
+| onBlur       | `function`    | Callback function to handle the checkbox blur event.                                              |
+| onFocus      | `function`    | Callback function to handle the checkbox focus event.                                             |
+
+## Usage
+
+```jsx
+import React, {useState} from 'react';
+import {Checkbox} from '@bolttech/atoms-checkbox';
+import {bolttechTheme, BolttechThemeProvider} from "@edirect/frontend-foundations";
+
+const ExampleComponent = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleCheckboxChange = (event) => {
+    setIsChecked(event.target.checked);
+  };
+
+  return (
+    <BolttechThemeProvider theme={bolttechTheme}>
+      <Checkbox
+        id="custom-checkbox"
+        label="Check me"
+        disabled={false}
+        errorMessage="This field is required"
+        checked={isChecked}
+        onChange={handleCheckboxChange}
+      />
+    </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,7 +4,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var styled = require('styled-components');
+var frontendFoundations = require('@edirect/frontend-foundations');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -47,7 +49,7 @@ const Input = /*#__PURE__*/styled__default["default"].input.attrs({
 }) => theme.components.checkbox.innerSquare.color.disableSelected, ({
   theme
 }) => theme.components.checkbox.checkmark.color.selectedDisable);
-const Label = /*#__PURE__*/styled__default["default"].label.withConfig({
+const Label = /*#__PURE__*/styled__default["default"](frontendFoundations.Typography).withConfig({
   displayName: "atoms-checkboxstyles__Label",
   componentId: "sc-1gq944z-2"
 })(["color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";"], ({
@@ -81,33 +83,34 @@ const LabelError = /*#__PURE__*/styled__default["default"].label.withConfig({
   theme
 }) => theme.components.checkbox.errorLabel.letterSpacing);
 
-function Checkbox({
+const Checkbox = /*#__PURE__*/react.forwardRef(({
   id,
   label,
-  disabled = false,
+  disabled: _disabled = false,
   errorMessage,
-  ref = null,
   checked,
   onChange,
   onBlur,
   onFocus
-}) {
+}, ref) => {
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs(CheckboxContainer, {
+      ref: ref,
       children: [jsxRuntime.jsx(Input, {
         id: id,
-        disabled: disabled,
+        disabled: _disabled,
         error: errorMessage,
         checked: checked,
-        ref: ref,
         type: "checkbox",
         "data-testid": `${id}-test`,
         onChange: onChange,
         onBlur: onBlur,
         onFocus: onFocus
       }), jsxRuntime.jsx(Label, {
+        disabled: _disabled,
+        variant: "primary",
+        type: "label",
         htmlFor: id,
-        disabled: disabled,
         children: label
       })]
     }), errorMessage && jsxRuntime.jsx(CheckboxContainerError, {
@@ -116,6 +119,6 @@ function Checkbox({
       })
     })]
   });
-}
+});
 
 exports.Checkbox = Checkbox;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@bolttech/atoms-checkbox",
-  "version": "0.10.0",
+  "version": "0.12.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-checkbox.d.ts

@@ -1,2 +1,4 @@
+import React from 'react';
 import { CheckboxProps } from './atoms-checkbox.type';
-export declare function Checkbox({ id, label, disabled, errorMessage, ref, checked, onChange, onBlur, onFocus, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/src/lib/atoms-checkbox.styles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface LabelProps {
     disabled?: boolean;
 }
@@ -8,7 +9,7 @@ declare const CheckboxContainer: import("styled-components").StyledComponent<"se
 declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
     type: "checkbox";
 } & InputProps, "type">;
-declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, LabelProps, never>;
+declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@edirect/frontend-foundations/dist/src/shared/types/typography.type").TypographyPropsType & import("react").RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, LabelProps, never>;
 declare const CheckboxContainerError: import("styled-components").StyledComponent<"section", import("styled-components").DefaultTheme, {}, never>;
 declare const LabelError: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
 export { CheckboxContainer, Input, Label, CheckboxContainerError, LabelError };

package/src/lib/atoms-checkbox.type.d.ts

@@ -5,7 +5,6 @@ export interface CheckboxProps {
     disabled?: boolean;
     errorMessage?: string;
     checked?: boolean;
-    ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
     onChange?: ChangeEventHandler<HTMLInputElement>;
     onBlur?: ChangeEventHandler<HTMLInputElement>;
     onFocus?: ChangeEventHandler<HTMLInputElement>;