@dhasdk/simple-ui 1.0.11 → 1.0.13

package/README.md

@@ -98,10 +98,10 @@ 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. |
 | 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. |
 | ...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. |
 | 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. |
-| variant     | string   | Yes      | 'default' | currently unused | 
+
+
 
 ### Props for Accordion
 
@@ -360,10 +360,15 @@ A reference can also be created and passed to the button component, and the comp
 | ----------- | -------- | -------- | -------- | ----------- |
 | children   | ReactNode   | Yes      |  | Content to display in the Button, overrides 'label' if both are present. |
 | className | string | Yes  | **(1) below** | Class names to style component |
+| classNameIconLeft | string | Yes  | **`mr-3`** | Class names to style the span element that contains the left icon |
+| classNameIconRight | string | Yes  | **`ml-3`** | Class names to style the span element that contains the right icon |
+| classNameContent | string | Yes  | **`grow-1 text-start`** | Class names to style the content block / body, i.e. the label |
 | classNameSelected | string | Yes | undefined | Class names to apply to the components if they are in the optional selected state, see **selected** below |
 | icon | ReactNode | Yes | undefined | image, icon, etc. to use for left or right icon as defined by **`iconPosition`** |
-| iconPosition | 'left', 'right', 'iconOnly', undefined | Yes |  | indicates the location for icon if specified |
-| label  | string  | Yes  |  | Display text for button. If 'children' is present, that is used instead |
+| iconLeft | ReactNode | Yes | undefined | This contains the optional icon to display on the left side of the button. This prop does not require the use of the iconPosition prop below. |
+| iconRight | ReactNode | Yes | undefined | This contains the optional icon to display on the right side of the button. This prop does not require the use of the iconPosition prop below. |
+| iconPosition | 'left', 'right', 'both', 'iconOnly', undefined | Yes | undefined | Controls where the icon is positioned on the Button. Alternatively, iconLeft and iconRightcan be used above. |
+| label  | string  | Yes  |  | Display text for button. If **'children'** is present, that is used instead |
 | onClick | () => void | Yes  |  | A click handler for the Button |
 | ...props | string | Yes  | undefined | additional props that are not specifically defined in the component, i.e. aria-label |
 | type  | string  | Yes  | 'button' | specifies the button type, and is one of 'button', 'submit', or 'reset' |
@@ -434,6 +439,18 @@ using selected option w/ filled variant
   />
 ```
 
+two icons w/ custom css
+```jsx
+  <Button
+    className='justify-between w-[400px] px-3'
+    onClick={handleClick}
+    label='Two Icons w/ CSS'
+    disabled={disabled}
+    iconLeft={<img src={calendar} alt='calendar' className='size-[36px]' />}
+    iconRight={<img src={chevronRight} alt='chevron' />}
+  />
+```
+
 
 ### Dependencies