@dhasdk/simple-ui 1.0.54 → 1.0.55

package/README.md

@@ -53,7 +53,9 @@ Tooltip
 
 ## Changelog
 
-1.0.54 - added **`showMarkers`** and **`clasNameMarkerFalse`** to the **ProgressBar** component
+1.0.55 - added **`classNameLabel`** to **GroupCheckBox** and **CheckBox**, added remaining **`className...`** props to **ChecKBoxGroup**, added **`customIcons`** prop to both **CheckBox** and **CheckBoxGroup** components.
+
+1.0.54 - added **`showMarkers`** and **`classNameMarkerFalse`** to the **ProgressBar** component
 
 1.0.53 - added **`data-testid`** prop(s) to  **Accordion**, **AppointmentPicker**, **Badge**, **Breadcrumbs**, **ButtonGroup**, **Card**, **CharacterCounter**, **CheckBox** and **CheckBoxGroup**, **DatePicker**, **ExpandableText**, **Input**, **List**, **Modal**, **ProgressBar**, **RadioGroup**, **Search**, **SectionHeader**, **Select**, **Shield**, **SideBarNav**, **skeleton**, **slider**, **status**, **tabs**, **toggle**, **tooltip**. See docs for uses per component.
 
@@ -783,6 +785,11 @@ Used by itself, **CheckBox** behaves as a normal checkbox component and can be u
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | bridgePraent   | boolean   | Yes      | {false} | When true, the lines that denote the relationships between parent CheckBoxes and their children are extended at the root level to match root level CheckBoxes to one another. In the above examples, compare 'Multi-Level' and 'bridgeParent' to see the differences. |
+| className | string | Yes | **`'flex items-center'`** | alternate css classes to add/change styling of the **div** that wraps the **input** element. Passed to all child CheckBox components.|
+| classNameInput | string | Yes | **`''`** | alternate css classes to add/change styling of the **input** html element. Passed to all child CheckBox components.|
+| classNameLabel | string | Yes | **`'inline-flex items-center gap-1 text-base md:text-lg'`** | alternate css classes to add/change styling of the **label** html element used by this **CheckBox**. Passed to all child CheckBox components.|
+| classNameSvg | string | Yes | **`'stroke-[#a1a6a8] h-full border'`** | This prop is applied to the lines that are drawn inside the SVGs that denote the relationships between separate **CheckBox** components. The easiest change to effect is the color of the lines by applying a different custom stroke value. Passed to all child CheckBox components. |
+| customIcons | map | Yes | default icons | A list of custom icons to use for checked, unchecked, and indeterminate states. See Custom Icons usage code example below. |
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the CheckBoxGroup component for testing purposes |
 | fill | boolean   | Yes      | {false}  | specifies using the **`fill`** variant or not. If used, the checkbox itself will have a darker solid background. |
 | icon  | boolean  | Yes  | {true} | When **`true`** (default value) this prop will utilize one of two UX created icons to represent a checked, indeterminate, and blank checkbox. When **marker** is true as well, a marker icon is used in place of the checked. |
@@ -797,7 +804,9 @@ Used by itself, **CheckBox** behaves as a normal checkbox component and can be u
 | ariaLabel   | string   | Yes  | 'CheckBox Component' | The **aria-label** to assign to this CheckBox |
 | className | string | Yes | **`'flex items-center'`** | alternate css classes to add/change styling of the **div** that wraps the **input** element. |
 | classNameInput | string | Yes | **`''`** | alternate css classes to add/change styling of the **input** html element. |
-| classNameSvg | string | Yes | **`'stroke-[#a1a6a8] h-full border'`** | This prop is applied to the lines that are drawn inside the SVGs that denote the relationships between separate **CheckBox** components. The easiest change to effect is the color of the lines by applying a different custom stroke value. |
+| classNameLabel | string | Yes | **`'inline-flex items-center gap-1 text-base md:text-lg'`** | alternate css classes to add/change styling of the **label** html element used by this **CheckBox**. |
+| classNameSvg | string | Yes | **`'stroke-[#a1a6a8] h-full border'`** | This prop is applied to the lines that are drawn inside the SVGs that denote the relationships between separate **CheckBox** components. The easiest change to effect is the color of the lines by applying a different custom stroke value. 
+| customIcons | map | Yes | default icons | A list of custom icons to use for checked, unchecked, and indeterminate states. See Custom Icons usage code example below. |
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the CheckBox component for testing purposes |
 | fill | boolean | Yes | {false} | specifies using the **fill** variant or not. If used, the checkbox itself will have a darker solid background. |
 | icon | boolean | Yes | {true} | When true (default value) this prop will utilize one of two UX created icons to represent a checked, indeterminate, and blank checkbox. When **marker** is true as well, a marker icon is used in place of the checked. |
@@ -845,6 +854,32 @@ Using markers via the marker prop
   </CheckBoxGroup>
 ```
 
+Using with Custom Icons
+
+```jsx
+  import checkedIcon from "../../assets/material-checked.svg";
+  import blankIcon from "../../assets/material-blank.svg";
+  import indeterminiteIcon from "../../assets/material-indeterminite.svg";
+
+  <CheckBoxGroup key='1' 
+    customIcons={{
+      checked: checkedIcon,
+      unchecked: blankIcon,
+      indeterminate: indeterminiteIcon,
+    }}
+  >
+    <CheckBox level={0} name='g1'>Group 1</CheckBox>
+    <CheckBox level={1} name='g1i1'>group 1, item 1</CheckBox>
+    <CheckBox level={1} name='g1i2'>group 1, item 2</CheckBox>
+    <CheckBox level={2} name='h1i2i1'>group 1, item 2, item 1</CheckBox>
+    <CheckBox level={2} name='g1i2i2'>group 1, item 2, item 2</CheckBox>
+    <CheckBox level={1} name='h1i3'>group 1, item 3</CheckBox>
+    <CheckBox level={0} name='g2'>Group 2</CheckBox>
+    <CheckBox level={1} name='g2i1'>group 2, item 1</CheckBox>
+    <CheckBox level={1} name='g2i2'>group 2, item 2</CheckBox>
+    <CheckBox level={2} name='h2i2i1'>group 2, item 2, item 1</CheckBox>
+  </CheckBoxGroup>
+```
 ### Dependencies
 
 **_none_**