@dhasdk/simple-ui 1.0.53 → 1.0.55

package/README.md

@@ -53,6 +53,10 @@ Tooltip
 
 ## Changelog
 
+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.
 
 1.0.51/52 - **`Search`** added iconLinkHandler prop + updates to documentation, **`ExpandableText`** added a **`clickHandler`** prop
@@ -781,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. |
@@ -795,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. |
@@ -843,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_**
@@ -1300,9 +1337,11 @@ Full list of props below
 | isStep  | **`boolean`**  | Yes  | **`true`**  | Controls whether steps inside the circle are displayed as numbers, or if false, displayed as checkmarks/dashes.  |
 | classNameArrowColor  | **`string`**  | Yes  | **`fill-[#305B25]`**  | Controls the color of the arrow that points from last completed step to current step.  |
 | classNameBorderColor  | **`string`**  | Yes  | **`border-[#305B25]`**  | Controls the color of the border around each completed step's circle.  |
-| classNameFillColor | **`string`**  | Yes  | **`bg-green-500`**  | Controls the fill color of each completed step's circle.  |
+| classNameFillColor | **`string`**  | Yes  | **`bg-green-500`**, see notes for **showMarkers** below  | Controls the fill color of each completed step's circle.  |
 | classNameGradient  | **`string`**  | Yes  | **`from-[#305B25] to-[#5AAB46]`**  | Controls the colors used in the gradient for the bars between each completed step.  |
+| classNameMarkerFalse  | **`string`**  | Yes  | **`-z-10 -mx-[0.1em] w-full h-2 bg-gray-300 rounded-full`**  | The classNames applied to the base div that provides the background (shape and color) to the progress bar.  |
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps ProgressBar for testing purposes |
+| showMarkers | boolean | Yes | true | Sets whether progress markers or checkboxes are displayed. If set to false, a single long bar w/o individual steps is presented, with the progress indicated by a 2nd bar overlaying the 1st. The overlaying progress bar styling can be changed via the **`classNameFillColor`** prop. Default values for **classNameFillColor** in this use case are **`z-0 -mx-[0.1em] h-2 bg-blue-300 rounded-full`** |
 
 1. Base CSS Classes