@dhasdk/simple-ui 1.0.69 → 1.0.71

package/README.md

@@ -43,6 +43,7 @@ Tooltip
 - [Slider](#slider)
 - [Status](#status)
 - [Tabs](#tabs)
+- [TextArea](#textarea)
 - [Toggle](#toggle)
 - [Tooltip](#tooltip)
 
@@ -53,6 +54,10 @@ Tooltip
 
 ## Changelog
 
+1.0.71 - added the **`classNameIconContainer`** prop to allow for sizing of the icons used for the **`RadioGroup`** component.
+
+1.0.70 - bug fix for **`onExpand`** handler in **`Accordion`**, added a separate **`onExpand`** handler to **`AccordionParent`** that is called with an index + boolean expanded.
+
 1.0.69 - added a **`classNameIcon`** prop to **`RadioGroup`** to style the SVG icon used for radio input items. Also added the **`TextArea`** component and documentation.
 
 1.0.68 - added a **`classNameLabelText`** prop to **`RadioGroup`** that styles the text only portion of the radio item
@@ -188,6 +193,7 @@ Finally, if Accordion props are specified inside the parent component, those val
 | classNameHr   | string   | Yes      | CSS classes applied to the HR that sits between the accordion heading and content body when open and the prop useBackground is true. |
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element inside AccordionGroup that wraps individual Accordion components |
 | hr | boolean | Yes | true | This boolean value when true directs the display an hr element between the Accordion heading and body when in the open state. |
+| onExpand | **`(expand: boolean, index: number) => void`** | Yes | void | Calls the passed in handler with a boolean indicating whether this Child Accordion is expanded and the Child Accordions index value (0 based). Note: This handler uses a different interface than the one applied directly to **`Accordion`**. |
 | ...props	       | string   | No       |       | takes additional props that are not specifically defined in the component, i.e. aria-label |
 | singleOpen     | boolean   | Yes      | false | This boolean value directs the accordion to allow only one opened child content body at a time. Setting a value of false will allow multiple to be opened at once. |
 | useBackground | boolean | Yes | true | This boolean value causes the accordion content block to use the same background as the accordion heading. When true, an hr is also present at the top of the content block to separate the heading from the content. This hr can be styled separately using the classNameHr prop. |
@@ -210,7 +216,8 @@ Finally, if Accordion props are specified inside the parent component, those val
 | dataTestIdBody | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that that contains the body of the opened Accordion component. Only present when the Accordion is in the opened state, used for testing purposes |
 | hr | boolean | Yes | true | This boolean value when true directs the display an hr element between the Accordion heading and body when in the open state. |
 | index | number | string | yes | undefined | optional index value for a specific accordion in the stack. if not present, label is used. |
-| onExpand | (setOpen: CallbackFunction) => void | Yes | undefined | Callback function that is executed when Accordin is expanded. |
+| onExpand | **`(expand: boolean) => void`** | Yes | void | Calls the passed in handler with a boolean indicating whether this Child Accordion is expanded. Note: This handler does not take or pass an index value 
+like the **`AccordionParent`** component does. |
 | ...props	       | string   | No       |       | takes additional props that are not specifically defined in the component, i.e. aria-label |
 <!-- | rounded        | boolean   | Yes      | false | This boolean value indicates whether to display rounded corners or not. By using this prop vs custom classes, only the top of the heading is rounded in an opened state, and only the bottom of the content block is rounded also. | -->
 | singleOpen     | boolean   | Yes      | false | This boolean value directs the accordion to allow only one opened child content body at a time. Setting a value of false will allow multiple to be opened at once. |
@@ -1444,6 +1451,7 @@ Full list of props below
 | classNameContainer  | **`string`**  | Yes | **`undefined`**  | a group of alternate css classes that can be specified by the developer for use in the container (fieldset) element.  | 
 | 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.  | 
 | classNameIcon  | **`string`**  | Yes |   | TailwindCSS classes that can be applied to the SVG icon, affects the fill regon.  | 
+| classNameIconContainer  | **`string`**  | Yes | see below | TailwindCSS classes that can be applied to the **`span`** element that wraps the icon. This can be used to re-size the **SVG** icon. | 
 | 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.  | 
 | classNameLabelText  | **`string`**  | Yes | **`ml-1`** | a group of alternate css classes that can be specified by the developer for use in the text portion of label inside the component.  | 
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the fieldset element that wraps RadioGroup for testing purposes |
@@ -1472,6 +1480,12 @@ twMerge(
   checked:bg-black checked:p-[2.5px] checked:border-black
 ```
 
+- classNameIconContainer
+
+```tsx
+  rounded-full size-4 border border-black flex items-center justify-center
+```
+
 
 2. Options interface
 
@@ -2457,6 +2471,8 @@ In addition to the normal component props listed below, this component can also
 
 **_none_**
 
+[Top of Page](#table-of-contents)
+
 <!--  T O G G L E -------------------------------------------------------------------- -->
 
 ## Toggle