@dhasdk/simple-ui 1.0.58 → 1.0.60

package/README.md

@@ -53,6 +53,10 @@ Tooltip
 
 ## Changelog
 
+1.0.60 - added **classNameSvgLine** and **classNameIcon** props to **`CheckBox`** the former to share duties with and more focus **classNameSvg**. The latter allows for positioning of the checkbox icon if needed.
+
+1.0.59 - added **method** property to the **RadioOption** type for RadioGroup, allowing user to pass in a callback method for checked/unchecked state changes
+
 1.0.58 - removed console.log statement from **`RadioGroup`** component
 
 1.0.57 - added **`className`** prop to **`ProgressBar`** to style the outer div that is the container
@@ -791,11 +795,13 @@ 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. |
+| bridgeParent   | 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.|
+| classNameIcon | string | Yes | **`''`** | CSS classes that will be applied to the custom icon (non html default) that is the checkbox, indeterminate checkbox, or blank checkbox.  Can be useful for positioning, etc. |
 | 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. |
+| classNameSvg | string | Yes | **`'w-4 h-7'`**, if icon is true add **`ms-1`** | This prop is applied to the global SVG itself, and is more appropriate for size and positioning |
+| classNameSvgLine | 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. |
@@ -810,9 +816,11 @@ 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. |
+| classNameIcon | string | Yes | **`''`** | CSS classes that will be applied to the custom icon (non html default) that is the checkbox, indeterminate checkbox, or blank checkbox.  Can be useful for positioning, etc. |
 | classNameInput | string | Yes | **`''`** | alternate css classes to add/change styling of the **input** html element. |
 | 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. 
+| classNameSvg | string | Yes | **`'w-4 h-7'`**, if icon is true add **`ms-1`** | This prop is applied to the global SVG itself, and is more appropriate for size and positioning |
+| classNameSvgLine | 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. |
@@ -1398,6 +1406,7 @@ This component takes multiple optional props in addition to any other html attri
 
 See **example usage** below for an example of retrieving the selected radio item.
 
+The **method** prop allows for a callback method that is called for every change on a radio item in the group.  Example below.
 
 Full list of props below
 
@@ -1410,6 +1419,7 @@ Full list of props below
 | classNameInput  | **`string`**  | Yes | see below  | a group of alternate css classes that can be specified by the developer for use in the input element of the component.  | 
 | classNameLabel  | **`string`**  | Yes | see below | a group of alternate css classes that can be specified by the developer for use in the label element of the component.  | 
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the fieldset element that wraps RadioGroup for testing purposes |
+| method | (id: string, value: string) => void  | Yes | undefined | A callback method that is called anytime a radio item is clicked on. The value **`method={(id, value) => console.log("id/value: " + id + "/" + value)}`** might print something like **id/value: 2/value-2** |
 | options  | **`string`**  | No |  | Array of RadioOption objects that define the options available for selection. | 
 
 1. Base CSS Classes
@@ -1490,6 +1500,27 @@ Example checking radio items for checked state
   console.log(radio?.checked);
 ```
 
+Using a callback method
+
+```jsx
+const radioOptions: RadioOption[] = [
+  {
+    label: 'Option One',
+    value:'item-1',
+  },
+  {
+    label: 'Option Two',
+    value: 'item-2',
+  }
+]
+
+<RadioGroup title="Radio Title" 
+  options={radioOptions}
+  method={(id, value) => console.log("id/value: " + id + "/" + value)}
+  // would print "id/value 1/item-1" or "id/value 2/item-2"
+  />
+```
+
 ### Dependencies
 
 **_none_**