@dhasdk/simple-ui 1.0.68 → 1.0.70

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.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
 
 1.0.67 - corrected RadioGroup documentation re id type inside **`RadioOption`**
@@ -186,6 +191,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. |
@@ -208,7 +214,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. |
@@ -1441,6 +1448,7 @@ Full list of props below
 | title  | **`string`**  | Yes | **`undefined`**  | A title for the radio group component. Will be displayed above the radio group. | 
 | 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.  | 
 | 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 |
@@ -2397,6 +2405,65 @@ Tabs - a simple example
 [Top of Page](#table-of-contents)
 
 
+<!--  T E X T A R E A -------------------------------------------------------------------- -->
+
+## TextArea
+
+The **`TextArea`** component provides an HTML **`TextArea`** that includes default styling plus the option of a counter. className props are provided separately for the base component, the label, and the counter.
+
+In addition to the normal component props listed below, this component can also take the standard html attributes usable with a normal html TextArea element.
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| className   | **`string`**   | Yes      | (1) below	| classNames to apply to the base TextArea element. |
+| classNameCounter   | **`string`**   | Yes | (2) below	| A group of alternate css classes that can be specified by the developer and applied to the div that contains the character counter. |
+| classNameLabel   | **`string`**   | Yes | (3) below	| A group of alternate css classes that can be specified by the developer and applied to the label element for the **`TextArea`**. |
+| counter | **`boolean`** | Yes | **`false`** | If true, a character counter is include that corresponds to characters typed inside the **`TextArea`** component.|
+| label | **`string`**   | Yes      | undefined | The label text for the **`TextArea`** component (optional) |
+| maxLength | **`number`**   | Yes | undefined | The number of characters to limit the **`TextArea`** to. |
+| onValueChange | (value: string) => void    | Yes | undefined  | A callback method that is called for every new character typed inside the TextArea element. |
+| value         | string   | Yes      | undefined | The default value to set the TextArea element content to |
+| ...props | string   | Yes   | undefined | takes additional props that are not specifically defined in the component, i.e. **`aria-label`**  | 
+
+
+(1) Base CSS Classes (**`className`**)
+   - w-16 h-8 flex items-center p-1 rounded-full cursor-pointer transition-colors duration-300
+   Toggle portion Base CSS Classes
+   - bg-white w-6 h-6 rounded-full shadow-md transform transition-transform duration-300
+
+(1) Counter CSS Classes (**`classNameCounter`**)
+   - w-16 h-8 flex items-center p-1 rounded-full cursor-pointer transition-colors duration-300
+   Toggle portion Base CSS Classes
+   - bg-white w-6 h-6 rounded-full shadow-md transform transition-transform duration-300
+
+(1) Label CSS Classes (**`classNameLabel`**)
+   - w-16 h-8 flex items-center p-1 rounded-full cursor-pointer transition-colors duration-300
+   Toggle portion Base CSS Classes
+   - bg-white w-6 h-6 rounded-full shadow-md transform transition-transform duration-300
+
+
+### Example Usage
+
+```jsx
+  const [textAreaValue, setTextAreaValue] = useState('');
+  // ...
+  <TextArea className="w-full h-18" counter
+      onValueChange={(v) => setTextAreaValue(v)} 
+      placeholder="...the next great American novel"
+      counter
+      />
+  <p className=""><span className="font-bold">Results of callback: </span> {textAreaValue}</p>
+      
+```
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
 <!--  T O G G L E -------------------------------------------------------------------- -->
 
 ## Toggle