@dhasdk/simple-ui 1.0.59 → 1.0.61

package/README.md

@@ -53,6 +53,10 @@ Tooltip
 
 ## Changelog
 
+1.0.61 - added **selectedId** prop to **`RadioGroup`** as well as updated documentation with the **RadioOptions** interface
+
+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
@@ -793,11 +797,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. |
@@ -812,9 +818,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. |
@@ -1046,7 +1054,7 @@ A reference can also be created and passed to the input component, and the compo
 
 ### Additional Properties & Attributes
 
-This component as mentioned also takes any other property or attribute that a normnal input form field would take, including the **required** property. Setting this property to true will not only requires this input field to have a value for form completion, but also adds an asterisk to the beginning of the label.
+This component as mentioned also takes any other property or attribute that a normal input form field would take, including the **required** property. Setting this property to true will not only requires this input field to have a value for form completion, but also adds an asterisk to the beginning of the label.
 
 ### Example Usage
 
@@ -1415,6 +1423,7 @@ Full list of props below
 | 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. | 
+| selectedId  | **`string`**  | Yes |  | A string value matching one of the passed in **`id`** values in the options array. This **`selectedId`** will be pre-selected. |
 
 1. Base CSS Classes
 
@@ -1427,6 +1436,18 @@ Full list of props below
   **`appearance-none w-4 h-4 rounded-[50%] border border-black bg-clip-content checked:bg-black checked:p-[2.5px] checked:border-black`**
 
 
+2. Options interface
+
+```ts
+  export type RadioOption = {
+    label: string;
+    value: string;
+    id: string;
+    disabled?: boolean;
+  };
+```
+
+
 ### Example Usage
 
 Basic RadioGroup