@dhasdk/simple-ui 0.0.24 → 0.0.26

package/README.md

@@ -17,6 +17,8 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
 - [Input](#input)
 - [List](#list)
 - [Modal](#modal)
+- [Pill](#pill)
+- [Section Header](#sectionheader)
 - [Select](#select)
 - [Skeleton](#skeleton)
 - [Status](#status)
@@ -130,7 +132,7 @@ Finally, if Accordion props are specified inside the parent component, those val
 
 The **badge** component takes three required props, **variant**, **subVariant**, and **child** content.
 
-Optional props are **className**, **svgClasses**, **imagePath**, **imageAlt**, and **imageClasses**.
+Optional props are **className**, **classNameSvg**, **imagePath**, **imageAlt**, and **classNameImage**.
 
 As with the button component, this component also takes additional html attributes that when included are passed to the parent div.
 
@@ -145,9 +147,9 @@ This div is also styled using the tailwind **`twMerge()`** utility, so custom cl
 | variant    | string   | No       | See **(1)** below | The predefined variant of Badge to display. UX designed variants are **go**, **hazard**, and **warning** |
 | className   | string   | Yes      | See **(2)** below | Alternate CSS classnames to apply to the Badge component.twMerge is used to apply these styles, so they reliably overwrite existing styles |
 | imageAlt         | string   | See Comment  | undefined | When an imagePath is specified, please specify an imageAlt that can be used for accessibility purposes. |
-| imageClasses         | string   | Yes      | undefined | Alternate CSS classes that are applied to the image for variant type media. |
+| classNameImage         | string   | Yes      | undefined | Alternate CSS classes that are applied to the image for variant type media. |
 | imagePath        | string   | See Comment  | undefined | When variant is of type "media", an imagePath has to be specified that the component can load and display. |
-| svgClasses        | string   | Yes  | (2) below | alternate classes to apply style to the svg icons used in the Badge component for type icon. Applied using twMerge, and will reliabily overwrite any default CSS classes. |
+| classNameSvg        | string   | Yes  | (2) below | alternate classes to apply style to the svg icons used in the Badge component for type icon. Applied using twMerge, and will reliabily overwrite any default CSS classes. |
 
 
 1. Variants --> subVariants
@@ -243,7 +245,7 @@ Full list of props below
 | Prop        | Type     | Optional | Default  | Description                                  |
 | ----------- | -------- | -------- | -------- | -------------------------------------------- |
 | className   | string   | Yes      |   | This is used to apply user supplied styling to the `Link` components. Note that words are capitalized using CSS, and can be made using the prop. |
-| containerClassName | string   | Yes   |   | This is used to apply user supplied styling to the container `nav` element. |
+| classNameContainer | string   | Yes   |   | This is used to apply user supplied styling to the container `nav` element. |
 | ...props    | string   | Yes | undefined | takes additional props that are not specifically defined in the component, i.e. aria-label |
 | separator  | string   | Yes       | > | A string separator value to place between the separate breadcrumbs. The default value is '>' |
 | variant    | string   | Yes       |  | Allows the user to enter a pre-defined variant that includes its own pre-defined styling. |
@@ -353,7 +355,7 @@ Full list of props below
 | ariaLabel | string | Yes  | 'card component' | This is the aria-label applied to the parentDIV element in the Card component. |
 | className  | string  | Yes  | (1) below | Class names to style component |
 | imageInset | string | Yes  |   | A boolean value indicating whether the image inside the card should be inset or not. See above for functional examples. |
-| imageClassName | string | Yes  |   | CSS Classes to apply to the **img** element inside the Card component. These classes are applied using **`twMerge()`** and will safely override any conflicting tailwind css classes. |
+| classNameImage | string | Yes  |   | CSS Classes to apply to the **img** element inside the Card component. These classes are applied using **`twMerge()`** and will safely override any conflicting tailwind css classes. |
 | ...props | string | Yes  | undefined | additional props that are not specifically defined in the component, i.e. aria-label |
 | variant | string | Yes | 'default' | valid Card variant choices are 'default', 'imageLeft', 'imageBottom', and 'imageRight'. The default variant has its image on the top of the Card. |
 | variantStyle  | string  | Yes  | 'default' | Optoins are 'default' and 'outline' |
@@ -422,8 +424,8 @@ Full list of props below
 | children   | ReactNode   | No      |   | the child Input or TextArea component |
 | maxCharacters | number   | No      |   | the number of characters allowed by CharacterCounter prior to it changing the displayed message and warning the user they are over the limit. |
 | className  | string  | Yes  | (1) below | This is used to apply user supplied styling to the CharacterCounter div element. |
-| messageClassName | string | Yes  |   | CSS classes to apply to the message text prior to the user exceeding the specified limit |
-| overLimitMessageClassName | string | Yes  |   | CSS classes to apply to the message text after the user has exceeded the specified limit. |
+| classNameMessage | string | Yes  |   | CSS classes to apply to the message text prior to the user exceeding the specified limit |
+| classNameOverLimitMessage | string | Yes  |   | CSS classes to apply to the message text after the user has exceeded the specified limit. |
 | altRemainingMessageText | string | Yes  | 'remaining' | A string value containing an alternate message to display to the user as they type. If the user has typed 5 characters and is not over the limit, the default reads "5 remaining". |
 | altOverageMessageText | string | Yes | 'characters too many' | A string value containing an alternate message to display to the user they have exceeded the specified limit. If the user has typed 15 characters and is over the limit, the default reads "5 characters too many" in red text (with dfeault overLimitMessageClassName). |
 
@@ -513,7 +515,7 @@ A reference can also be created and passed to the input component, and the compo
 | className  | string  | Yes  | **(1) below**  | pass any css class names to add/change styling
 | label | string | Yes  | '' | string value of label, blank for no label  |
 | labelBaseColor  | string | Yes  |  | Use if the page or input color is not white, this will help to blend the label background to the surrounding area |
-| labelClassName | string | Yes  | **(2) below** | pass any css class names to add/change styling for the input label  |
+| classNameLabel | string | Yes  | **(2) below** | pass any css class names to add/change styling for the input label  |
 | placeHolder  | string | Yes  | Yes  |  | sets the placeholder text inside the input element |
 | ...props | string | Yes |  | takes additional props that are not specifically defined in the component, i.e. aria-label |
 | required  | boolean | Yes  |  | if specified, a red asterisk is prepended to the label, and the required attribute is set to true |
@@ -580,8 +582,8 @@ The **List** component is a component that creates a list of items, ordered or u
 | children | React.ReactNode   | Yes      | undefined | this allows the component to receive any number of react components as children |
 | className | string    | Yes | undefined  | takes additional classnames to add/change styling |
 | withDividers | boolean   | Yes   | false | if true, this prop will display a divider to separate each item within the list | 
-| dividerColorClass  | string   | Yes  | undefined | this prop is used to change the color of dividers when used, for example 'red-400' |
-| itemClassName | string   | Yes   | undefined | takes additional classnames to add/change styling of the items within the list |
+| classNameDividerColor  | string   | Yes  | undefined | this prop is used to change the color of dividers when used, for example 'red-400' |
+| classNameItem | string   | Yes   | undefined | takes additional classnames to add/change styling of the items within the list |
 | isDecimal | boolean   | Yes   | false | if true, this prop will change the component to be ordered as a decimal list, placing a number next toe each item | 
 | isDisc | boolean   | Yes   | false | if true, this prob will change the list to be unordered, placing bullet points next to each item | 
 
@@ -693,13 +695,131 @@ Basic Modal
 [Top of Page](#table-of-contents)
 
 
+
+
+<!-- P I L L  --------------------------------------------------------------------------- -->
+
+## Pill
+
+The **`Pill`** component displays a **`children`** prop as its primary content, with optional left and/or right icons. It also has the ability to display selected state via a **selected** prop, and can also take an **onClick** handler.
+
+Optional props are **className**, **iconLeft**, **iconLeftSelected**, **iconRight**, **iconRightSelected**, **onClick**, and **selected**. 
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children   | ReactNode   | No      |   | The primary content to display in this Pill, i.e. the word 'Pill' above.|
+| className | string | Yes   |   | Alternate CSS classnames to apply to the Pill component, which is itself built inside a Button. **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| iconLeft   | ReactNode   | Yes      |   | This prop takes an image to display as its left icon. It takes this value as a ReactNode.|
+| iconLeftSelected   | ReactNode   | Yes      |   | This prop takes an image to display as its left icon when the component is in its selected state. It takes this value as a ReactNode.|
+| iconRight   | ReactNode   | Yes      |   | This prop takes an image to display as its right icon. It takes this value as a ReactNode.|
+| iconRightSelected   | ReactNode   | Yes      |   | This prop takes an image to display as its right icon when the component is in its selected state. It takes this value as a ReactNode|
+| onClick   | () => void()   | Yes      |   | When included this serves as the **`onClick`** handler for the **`Pill`** component. |
+| selected   | boolean   | Yes      | false  | This prop is a boolean that can be used to indicate if thisPill component should be in a selected state or not. This value is controled in by the developer, and assigned via this prop. See the selected state example above for example usage. |
+
+1. Default classNames
+
+- **`relative inline-flex items-center justify-center whitespace-nowrap rounded-3xl transition-colors focus-visible:outline-none font-[`Arial`] disabled:pointer-events-none disabled:opacity-50 py-[10px] md:py-[14px] lg:py-[16px] border-2 border-[#092068] text-[#092068] text-lg bg-white hover:bg-[#D1DBFB] active:bg-[#9fc5f0] focus:bg-white disabled:bg-[#939194] disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive focus:border-black disabled:border-dha-mc-secondary-border disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1`**
+
+
+### Example Usage
+
+Basic Pill
+
+```jsx
+  <Pill
+    iconLeft={<img src={frame} alt='left header icon' />}
+    iconRight={<img src={frame} alt='right header icon' />}
+    >
+    Pill
+  </Pill>
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+
+<!-- S E C T I O N   H E A D E R  --------------------------------------------------------------------------- -->
+
+## SectionHeader
+
+The **`SectionHeader`** component displays a **`children`** prop as a heading, and uses various additional props to customize the remaining portion of the Header.
+
+Optional props are **`className`**, **`classNameChildren`**, **`classNameSubHeader`**, **`iconLeft`**, **`iconRight`**, **`subHeader`**, and **`underline`**.  Various examples and
+combinations of these props in use can be seen via the above drop down with 
+the **Usage** button
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children   | ReactNode   | No      |  | The primary content to display in this SectionHeader, i.e.the word 'Prologue' above. |
+| className   | string   | Yes  | (1) below | Alternate CSS classnames to apply to the SectionHeader component.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| classNameChildren   | string   | Yes  | (2) below  | Alternate CSS classnames to apply to the **`children`** component which contains the Header content.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| classNameSubHeader   | string   | Yes | (3) below | Alternate CSS classnames to apply to the subHeader portion when present.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| iconLeft   | ReactNode   | Yes  |  | This prop takes an image to display as its left icon. It takes this value as a ReactNode, see examples above. |
+| iconRight   | ReactNode   | Yes  |  | This prop takes an image to display as its right icon. It takes this value as a ReactNode, see examples above. |
+| underline   | boolean   | Yes  | false | When true, an underline is displayed underneath the entire SubHeader. |
+| subHeader | string   | Yes  | undefined | This prop takes a string value that is displayed as a SubHeader when present.  If no subHeader is passed in, nothing is displayed in this location. |
+
+
+1. Default classNames
+
+- **`px-2 justify-start items-start gap-4 inline-flex w-full`**
+
+2. children classNames
+
+- **`self-stretch text-[#07192d] text-[40px] font-normal font-['Arial'] leading-[48px] pb-1`**
+
+3. subHeader classNames
+
+- **`text-[#07192d] text-xl font-normal font-['Arial'] leading-[30px]`**
+
+
+### Example Usage
+
+```jsx
+  <SectionHeader 
+      iconLeft={
+        <img src={frame} 
+          alt='left header icon' />}
+      iconRight={
+        <img src={important} 
+          alt='left header icon' 
+          className='size-8 mt-2' />}
+      subHeader="1st things first though" 
+      underline
+      >
+        Prologue
+      </SectionHeader>
+```
+
+
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+
 <!-- S E L E C T ---------------------------------------------------------------------------- -->
 
 ## Select
 
 The **Select** component or drop-down allow a user to make a single selection from multiple choices while preserving space on the form. Our Select component comes with several variants: default, fill, and outline.
 
-The **Select** component takes two required props (**options** and **setSelectedOption**) as well as four optional props (**className**, **error**, **label**, **optionsLabel**, and **variant**), in addition to any other html attributes a normal html element would use, for example an aria-tag.
+The **Select** component takes two required props (**options** and **setSelectedOption**) as well as seven optional props (**className**, **classNameContainer**, **error**, **label**, **optionsLabel**, **width**, and **variant**), in addition to any other html attributes a normal html element would use, for example an aria-tag.
 
 Full list of props below
 
@@ -708,6 +828,7 @@ Full list of props below
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | className   | string   | Yes      | (1) below | a group of alternate css classes that can be specified by the developer for use in the input element. |
+| classNameContainer   | string   | Yes      | undefined | a group of alternate css classes that can be specified by the developer for use in the parent container of the component. |
 | disabled   | boolean   | Yes      | undefined | if true the Select component is placed in a disabled state |
 | error   | boolean   | Yes      | false | if true a red border is applied to the outside of the select component indicating an error state. |
 | label | string   | Yes      | undefined | text used as the label for the input, i.e. 'Border Color' above |
@@ -778,9 +899,11 @@ Full list of props below
 | className   | string   | Yes      | (1) below | a group of alternate css classes that can be specified by the developer and applied to the outer **`div`** element. |
 | clickOutsideCloses   | boolean   | Yes  | **`false`** | clicking or tapping elsewhere on the application will close the SideBarNav |
 | image | string   | No      | undefined | string path to the application logo to display |
-| imageClassname | string   | Yes      | (2) below | a group of alternate classes that can be specified for the logo image, and applied to the **`img`** element |
+| classNameImage | string   | Yes      | (2) below | a group of alternate classes that can be specified for the logo image, and applied to the **`img`** element |
+| classNameImageContainer | string   | Yes      | (2) below | a group of alternate classes that can be specified for the logo image's
+container, and applied to the **`img`** element |
 | menu | boolean   | Yes      | false | when **`true`**, the default in-component hamburger menu is displayed and used to display or hide the SideBarNav |
-| menuClassName | string   | Yes      | (3) below | alternate css classes to apply to the **`button`** element that makes up the hamburger menu |
+| classNameMenu | string   | Yes      | (3) below | alternate css classes to apply to the **`button`** element that makes up the hamburger menu |
 | menuItems | ListItemProps[]  | No  | undefined, see (4) below | The menu items to display |
 | version | string   | No  | undefined | The version number to display |
 
@@ -860,6 +983,9 @@ The nested components inside of Skeleton are `SkelCircle`, `SkelLine`, `SkelSect
 
 When using the `className` prop on one of the internal props inside the `Skeleton` component to alter style or size, as the container uses flexbox, note the usage examples above. For instance, to make a bar partially expand across the line, you can for example use `className="grow-0 basis-2/12"`.
 
+In addition, you can apply a different color and opacity by using simple tailwindcss classes, i.e. to change the background color and opacity as above in the last example, applying **`bg-blue-500/50`** changes the color of the individual Skeleton sub-components to a shade of blue with 50% 
+opacity.
+
 - `SkelCircle` - a small circle (i.e. a badge or icon)
 - `SkelLine` - a line (i.e. text or content)
 - `SkelSection` - a larger section on a page, or paragraph
@@ -956,9 +1082,9 @@ Full list of props below
 | children   | string   | No      | | This prop takes children content, i.e. html and content that becomes the body of the Status. |
 | variant | string | No | 'available' | The predefined variant of Status to display. Predefined variants are `available`, `inProgress`, and `notAvailable` |
 | className   | string   | Yes      | (1) below | Alternate CSS classnames to apply to the Status component. `twMerge` is used to apply these styles, so they reliably overwrite existing styles. |
-| childClasses   | string   | Yes      | (2) below | This prop takes in alternate classes to apply style to the `div` that contains the child content. |
+| classNameChild   | string   | Yes      | (2) below | This prop takes in alternate classes to apply style to the `div` that contains the child content. |
 | image   | ReactNode   | Yes      |  | This prop takes type `ReactNode`, and is used to display a custom user supplied image. See usage examples above for more. |
-| imageClasses | string   | Yes      | (3) below | Alternate CSS classes that are applied to the div containing the childe div that contains the Status component image. |
+| classNameImage | string   | Yes      | (3) below | Alternate CSS classes that are applied to the div containing the childe div that contains the Status component image. |
 
 1. className
 
@@ -1034,7 +1160,7 @@ Full list of props below
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | className | string | Yes | undefined |  |
-| containerClassName | string | Yes | undefined |  |
+| classNameContainer | string | Yes | undefined |  |
 | tabs | {id: string; label: string; content: ReactNode;}[] | Yes | undefined | An array of  |
 | variant | string | Yes | 'default' | The predefined variant of Tabs to display. Current options are 'default', 'outline', and 'filled' |
 

package/index.d.ts

@@ -9,6 +9,7 @@ export { CharacterCounter } from './lib/CharacterCounter';
 export type { CharacterCounterProps } from './lib/CharacterCounter';
 export { DatePicker } from './lib/DatePicker';
 export type { DatePickerProps } from './lib/DatePicker';
+export { IconPosition } from './lib/Tabs';
 export { Input } from './lib/Input';
 export { List, ListItem } from './lib/List';
 export { Modal } from './lib/Modal';
@@ -18,14 +19,13 @@ export { SectionHeader } from './lib/SectionHeader';
 export type { SectionHeaderProps } from './lib/SectionHeader';
 export { Select } from './lib/Select';
 export type { SelectProps } from './lib/Select';
+export { SideBarNav } from './lib/SideBarNav';
 export { Skeleton, SkelCircle, SkelLine, SkelRow, SkelSection } from './lib/Skeleton';
 export type { SkeletonProps, SkelProps } from './lib/Skeleton';
+export { SkipLink } from './lib/SkipLink';
 export { Status } from './lib/Status';
 export type { StatusProps } from './lib/Status';
 export { Tabs } from './lib/Tabs';
 export type { TabsProps } from './lib/Tabs';
-export { IconPosition } from './lib/Tabs';
 export { Toggle } from './lib/Toggle';
 export type { ToggleProps } from './lib/Toggle';
-export { SideBarNav } from './lib/SideBarNav';
-export { SkipLink } from './lib/SkipLink';