@dhasdk/simple-ui 1.0.65 → 1.0.67

package/README.md

@@ -53,6 +53,8 @@ Tooltip
 
 ## Changelog
 
+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** 
 handling logic to compensate (dev can enter **aria-label** manually, if not present and label is of 
 type string, will use **label** as the **aria-label**).
@@ -1437,6 +1439,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 |
+| 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** |
 | 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. |
@@ -1445,20 +1448,30 @@ Full list of props below
 
 - label:
   
-  **`flex items-center gap-1 cursor-pointer border border-black disabled ? opacity-50 cursor-not-allowed`**
+```tsx
+twMerge(
+    "flex items-center gap-1 cursor-pointer",
+    inline ? "mr-4 mb-1" : "mb-2",
+    disabled ? "opacity-50 cursor-not-allowed" : "",
+    classNameLabel
+  )
+```
 
 - input:
 
-  **`appearance-none w-4 h-4 rounded-[50%] border border-black bg-clip-content checked:bg-black checked:p-[2.5px] checked:border-black`**
+```tsx
+  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 = {
+    id: string;
     label: string;
     value: string;
-    id: string;
     disabled?: boolean;
   };
 ```
@@ -1471,12 +1484,12 @@ Basic RadioGroup
 ```jsx
   const radioOptions: RadioOption[] = [
     {
-      id: 0,
+      id: '0',
       label: 'Option One',
       value:'some-value'
     },
     {
-      id: 1,
+      id: '1',
       label: 'Option Two',
       value: 'some-value2'
     }
@@ -1495,27 +1508,27 @@ RadioGroup w/ 5 options
   
   const fiveRadioOptions: RadioOption[] = [
     {
-      id: 0,
+      id: '0',
       label: 'Option One',
       value: 'some-value'
     },
     {
-      id: 1,
+      id: '1',
       label: 'Option Two',
       value: 'some-value2'
     },
     {
-      id: 2,
+      id: '2',
       label: 'Option Three',
       value: 'some-value3'
     },
     {
-      id: 3,
+      id: '3',
       label: 'Option Four',
       value: 'some-value4'
     },
     {
-      id: 4,
+      id: '4',
       label: 'Option Five',
       value: 'some-value5'
     },