@dhasdk/simple-ui 1.0.67 → 1.0.69

package/README.md

@@ -53,6 +53,12 @@ Tooltip
 
 ## Changelog
 
+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`**
+
 1.0.66 - added **`inline`** prop to **`RadioGroup`**, allows for a flex-row layout of RadioGroup items as opposed to the default flex-column layout
 
 1.0.65 - changed **label** on **`Input`** component to a **`ReactNode`** type. Also updated **aria-label** 
@@ -1437,7 +1443,9 @@ 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 |
 | inline | boolean | Yes | false | If **`true`**, the radio group is layed out in a flex-row instead of a flex-column. |
 | 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** |
@@ -2392,6 +2400,63 @@ 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_**
+
 <!--  T O G G L E -------------------------------------------------------------------- -->
 
 ## Toggle