@dhasdk/simple-ui 0.0.11 → 0.0.19

package/README.md

@@ -1,68 +1,266 @@
 # simple-ui
 
-This library was generated with [Nx](https://nx.dev).
+This library was generated with [Nx](https://nx.dev) on React 18.x.
 
+## <span style="color: orange;">*This library is under active development and not ready for production use\*</span>
 
-## Dependencies
+## Table of Contents
 
-To use the simple-ui library with its available variant types, tailwindcss must be installed and setup inside your project.
+- [Installation](#installation-and-setup)
+- [Accordion](#accordion)
+- [Badge](#badge)
+- [BreadCrumbs](#breadcrumbs)
+- [Button](#button)
+- [Card](#card)
+- [CharacterCounter](#charactercounter)
+- [DatePicker](#datepicker)
+- [Input](#input)
+- [List](#list)
+- [Modal](#modal)
+- [Select](#select)
+- [Skeleton](#skeleton)
+- [Status](#status)
+- [Tabs](#tabs)
+- [Toggle](#toggle)
 
-## Installation
+## Quick Notes:
 
-Install the simple-ui library with **`npm i @dhasdk/simple-ui`**
+- Some of these components use what are called **variants** from the **class-variance-authority** library. This allows pre-defined styles to be set, or 'variants', and those variants to be called by name via a prop when using the specified component. An example is the **Button** component below, and calling it using the 'DHAActive' style variant of that component (example code below).
 
-## Usage
+<!-- I N S T A L L A T I O N ----------------------------------------------------------------------------------- -->
 
-To use any of the available components, import the desired component into your source code:
+[Back to Main Readme](./README.md)
 
-**`import { Badge } from '@dhasdk/simple-ui`**
+## Installation and Setup
 
-Then use the component from simple-ui as described below
+1. From the terminal run the following command:
 
+**`npm install @dha-sdk/simple-ui`**
 
+2. Open the page that you are going to place the **dha-sdk/simple-ui** component, and do the following:
+
+- At the top of the file, import your desired component from **'@dha-sdk'**, i.e. if you are using the **Badge** component, then:
+  - **`import { Badge } from '@dhasdk/simple-ui';`**
+- Elsewhere in your file, use the component as documented below
+
+
+<!--  A C C O R D I O N ----------------------------------------------------------------------------------- -->
+
+## Accordion
+
+The **Accordion** and **AccordionParent** components take a number of props, and work together to display a group of Accordions. The AccordionParent component is really only required for two purposes:
+
+- Multiple accordions are displayed, and it is desired that only one can be opened at a time. This requires state management between the various accordions listed, and the parent Accordion helps with this.
+
+- You have multiple accordions, and there are one or more identical prop values that you would like to pass to each of the Accordion components. Passing these props to the parent component instead, **AccordionParent**, will simplify **Accordion** component usage. These various props that are specified on the AccordionParent level will be automatically passed down to the children Accordion components.
+
+A **ref** can also be created and assigned to the Accordion component, and the component will point the reference to the outer html DIV.
+
+Separately below is the Props listing both the **AccordionParent** and **Accordion** components. All of the props listed for Accordion can be passed as values to the AccordionParent, and they will be safely passed to the child Accordion components so that they do not have to be individually specified.
+
+Finally, if Accordion props are specified inside the parent component, those values can be overridden on an individual basis by specifying alternate values for the individual Accordion component you wish to indepentently control.
+
+### Props for AccordionParent
+
+| Prop        | Type     | Optional | Default  | Description                                  |
+| ----------- | -------- | -------- | -------- | -------------------------------------------- |
+| children         | ReactNode   |  No      | undefined | This is intended to contain the child **Accordion** components |
+| chevron | boolean | Yes      | undefined | If true, displays chevron icons for open/closed status, otherwise displays plus and minus icons. |
+| iconAccordionOpened & iconAccordionClosed    | ReactNode   | Yes       | N/A      | custom icons to display for opened and closed state. See usage example above for a demonstration. |
+| childHeadingClassName   | string   | Yes      | CSS classes to apply to the child Accordion component headings. These can be overridden on an individual basis using the same prop on the Accordion component. |
+| childContentClassName     | string   | No       | N/A      | CSS classes to apply to the child Accordion component content body. These can be overridden on an individual basis using the same prop on the Accordion component. |
+| className | string | Yes   | undefined | CSS classes applied to the container div for the **AccordionParent** component. | 
+| ...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. |
+| variant     | string   | Yes      | 'default' | currently unused | 
+
+### Props for Accordion
+
+| Prop        | Type     | Optional | Default  | Description                                  |
+| ----------- | -------- | -------- | -------- | -------------------------------------------- |
+| children         | ReactNode   |  No      | undefined | This contains the body of the **Accordion** content. |
+| chevron | boolean | Yes      | undefined | If true, displays chevron icons for open/closed status, otherwise displays plus and minus icons. |
+| iconAccordionOpened & iconAccordionClosed    | ReactNode   | Yes       | N/A      | custom icons to display for opened and closed state. See usage example above for a demonstration. |
+| childHeadingClassName   | string   | Yes      | CSS classes to apply to the child Accordion component headings. These can be overridden on an individual basis using the same prop on the Accordion component. |
+| childContentClassName     | string   | No       | N/A      | CSS classes to apply to the child Accordion component content body. These can be overridden on an individual basis using the same prop on the Accordion component. |
+| className | string | Yes   | undefined | CSS classes applied to the container div for the **Accordion** component. | 
+| ...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. |
+| variant     | string   | Yes      | 'default' | currently unused | 
+
+
+
+### Example Usage
+
+```jsx
+<AccordionParent 
+    childHeadingClassName='bg-white' 
+    childContentClassName='bg-white'>
+    <Accordion label='First Example'>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
+    </Accordion>
+    <Accordion label='Second Example'>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
+    </Accordion>
+    <Accordion label='Third Example'>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
+    </Accordion>
+</AccordionParent>
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+<!-- E N D   A C C O R D I O N -->
+
+
+<!-- B A D G E ----------------------------------------------------------------------------------- -->
 
 ## Badge
 
-The **badge** component takes three custom props plus child content, and uses that to display a badge. The custom props are an **image** URL, an **alt** tag for the icon, a **heading**, and as child data, the text content of the badge.
+The **badge** component takes three required props, **variant**, **subVariant**, and **child** content.
+
+Optional props are **className**, **svgClasses**, **imagePath**, **imageAlt**, and **imageClasses**.
+
+As with the button component, this component also takes additional html attributes that when included are passed to the parent div.
 
-As with the **button** component, this one also takes additional html attributes that will be passed to the parent div. This div is also styled using the tailwind **`twMerge()`** utility, so custom classes can be added via the **classNames** prop as well.
+This div is also styled using the tailwind **`twMerge()`** utility, so custom classes can be added via the classNames prop as well.
 
 ### Props
 
 | Prop        | Type     | Optional | Default  | Description                                  |
 | ----------- | -------- | -------- | -------- | -------------------------------------------- |
-| alt         | string   | Yes      | undefined | Alt tag for icon/image |
-| bodyClassName | string | Yes      | undefined | CSS classes to apply to the body of the badge |
-| children    | string   | No       | N/A      | text for badge content |
-| className   | string   | Yes      | See **(1)** below | alternate css classes to apply to component |
-| heading     | string   | No       | N/A      | title/heading of the badge |
-| headingClassName | string | Yes   | undefined | CSS classes to apply to Badge heading | 
-| image       | string   | No       | N/A      | path of image to display inside image |
-| size        | string   | Yes      | 'default' | CSS Badge variant sizing, avialable options are 'default' |
-| variant     | string   | Yes      | 'default' | CSS Badge variant, available variants are 'default' and 'MedCard' | 
+| children    | ReactNode   | No       |       | html and content that becomes the body of the Badge. |
+| subVariant    | string   | No       | See **(1)** below | The predefined variant of Badge to display. |
+| 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. |
+| 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. |
+
+
+1. Variants --> subVariants
+     - default --> default, gray, red, yellow, green, blue
+     - warning **UX Variant** --> half, full
+     - hazard **UX Variant** --> half, full,
+     - go **UX Variant** --> half, full
+     - icon --> default, gray, red, yellow, green, blue
+     - media --> default, gray, green
 
+2. classNames per variant default
+     - default --> **`mx-2 inline-flex items-center rounded-md bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-400/20`**
+     - icon --> **`inline-flex items-center gap-x-1.5 rounded-full bg-gray-500 px-2 py-1 text-xs font-medium text-gray-700`**
+     - media --> **`w-[250px] mx-2 border-l-8 border-black grid grid-cols-6 rounded-md bg-gray-400/10 pr-2 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-400/20 overflow-hidden`**
 
- **(1)** default values applied are **`flex flex-nowrap box-border rounded-md border-t-[1px] border-r-[1px] border-b-[1px] border-dha-mc-secondary-border border-l-[1em] border-l-dha-mc-true-blue bg-white
- drop-shadow-md w-[90vw] lg:max-w-[25em] mx-auto py-1 min-h-20 items-center`**
 
 
 ### Example Usage
 
+Default Variant
+
+```jsx
+  <Badge ref={ref}
+    variant="default"
+    subVariant="blue"
+    aria-label="appropriate aria label here">
+      Badge!
+  </Badge>
+```
+
+icon Variant
+
 ```jsx
-<Badge
-  image="../assets/img/svg/medical-bag.svg"
-  alt="A medical bag"
-  heading="Patient Information"
-  className="w-[90%] md:w-[25em]"
->
-  Fill out the patient information form to ensure appropriate care can be provided.
-</Badge>
+  <Badge ref={ref}
+    variant="icon"
+    subVariant="blue"
+    aria-label="appropriate aria label here">
+      Badge!
+  </Badge>
 ```
+media Variant
+
+```jsx
+  <Badge ref={ref} variant="media"
+    subVariant="blue"
+    imagePath="/src/assets/Doctor.png"
+    aria-label="health professional icon">
+      <h5 className='text-sm font-bold my-2'>Flu Season!</h5>
+      <p className="mb-2">Don't be caught unprepared. </p>
+  </Badge>
+```
+go Variant
+
+```jsx
+  <Badge
+      className="text-left "
+      variant='go'
+      subVariant='full
+      >Lorem ipsum dolor sit amet, consectetur adipiscing 
+      elit, sed do eiusmod tempor incididunt ut labore 
+      et dolore magna aliqua</Badge>
+```
+
 
 ### Dependencies
 
 **_none_**
 
+[Top of Page](#table-of-contents)
+
+
+<!-- B R E A D C R U M B S ------------------------------------------------------------------------------ -->
+
+## BreadCrumbs
+
+BreadCrumbs allow users to quickly and easily see their current location in an app or sites heirarchy, as well as quickly navigate to previous levels, enabling quick navigation back to those sections.
+
+The BreadCrumbs component takes in various props (`className`, `containerClassName`, `variant`, `auto`, and `separator`), in addition to any other html attributes a normal NAV element would use.
+
+A `ref` can also be created and assigned to the button component, and the component will point the reference to the html nav element.
+
+The `className` prop takes a list of alternate CSS classes the developer would like applied to the component. These are applied using the tailwind `twMerge` function, and will safely overwrite any conflicting classes ensuring proper styling. These classes are applied to the individual links.
+
+The `containerClassName` takes a list of css classes that are applied to the enclosing `nav` element.
+
+Finally, the `separator` prop is a string value that represents the separator used between bread crumbs. The default value is a greater than sign, >.
+
+Full list of props below
+
+
+### Props
+
+| 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. |
+| ...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. |
+
+
+
+### Example Usage
+
+Default Variant
+
+```jsx
+  <BreadCrumbs />
+```
+
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
 <!-- B U T T O N  ------------------------------------------------------------------------------ -->
 
 ## Button
@@ -75,84 +273,225 @@ A reference can also be created and passed to the button component, and the comp
 
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
-| className   | string   | Yes      | 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'  | Class names to style component **(1) below** |
-| handler | **`() => void`** | Yes  | N/A | A click handler for the Button |
-| size  | string  | Yes  | 'default'  | CSS Button variant sizing, avialable options are 'default', 'sm', 'lg', and 'icon'  **(2) below**  |
-| variant | string | Yes  | 'default'  | CSS Button variant, available variants are 'default', 'nonHover', 'Medcard', 'Outline' |
+| 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 |
+| 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' |
+| variant | string | Yes | 'default' | CSS Button variant, available variants are 'default', 'filled', 'outline', and 'transparent' |
+
 
 
 **(1) classname defaults**
-  - inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
 
-**(2) size**
-  - 'default'
-    - CSS: **`h-10 px-4 py-2`**
-  - 'sm'
-    - CSS: **`h-9 rounded-md px-3`**
-  - 'lg'
-    - CSS: **`h-11 rounded-md px-8`**
-  - 'icon'
-    - CSS: **`h-10 px-1`**
+- Base CSS Classes
+
+     - **`inline-flex items-center justify-center whitespace-nowrap rounded-md ring-offset-background transition-colors focus-visible:outline-none font-[`Arial`] disabled:pointer-events-none text-sm md:text-base lg:text-lg disabled:opacity-50 px-6 py-[12px] md:py-[14px] lg:py-[16px]`**
+
+- Additional Classes per variant
+    - 'default' - **`rounded-md bg-gray-200 hover:bg-slate-400 text-black text-lg hover:text-white hover:border-slate-600 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1`**
+    - 'filled' - **`rounded-md bg-[#092068] hover:bg-[#0c2c8e] text-white text-lg hover:text-white focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] active:bg-[#092068]/80 disabled:bg-[#e4e4e5] disabled:text-[#939194] disabled:border-[#e4e4e5] disabled:border-2 lg:h-14`**
+    - 'outline' - **`rounded-md border-[#092068] bg-white border-2 text-[#092068] text-lg disabled:border-dha-mc-secondary-border disabled:text-[#939194] hover:bg-[#d1dbfb] active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] lg:h-14`**
+    - 'transparent' - **`rounded-md text-lg text-[#092068] hover:bg-[#d1dbfb] active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] disabled:text-[#939194] w-[157px] md:w-[163px] lg:w-[169px] h-12 md:h-[52px] lg:h-14`**
 
 
 ### Example Usage
 
+Basic example
+
+```jsx
+  <Button ref={ref} variant="MedCard" 
+        onClick={console.log('Clicked!')}
+    label='Click Me!'  />
+```
+
+Using an alternate varint, className, and aria-label
+
 ```jsx
-<Button ref={ref} size="sm" variant="Outline" onClick={console.log('Clicked!')}>
-  Click Me!
-</Button>
+
+  <Button ref={ref} variant="MedCard" 
+    onClick={console.log('Clicked!')}
+    className='px-10 py-6'
+    aria-label='Show example pop-up'
+    >
+    Click Me!</Button>
 ```
 
+
 ### Dependencies
 
 **_none_**
 
-<!-- C A R D  ------------------------------------------------------------------------------ -->
+<!-- C A R D  -------------------------------------------------------------------------------- -->
+
+
+[Top of Page](#table-of-contents)
 
 ## Card
 
-The Card component as built takes in various props (`variant`, `variantStyle`, `imagePath`, `imageClassname`, `imageInset`, `alt`, `ariaLabel`, and `children`), in addition to any other HTML attributes a normal HTML button would use, for example, an `aria-label` tag.
+Cards contain content or information on a specific topic, often with a relevant image.
+
+The **Card** component as built takes in various props (variant, variantStyle, imagePath, imageClassname, imageInset, alt, ariaLabel, and children), in addition to any other html attributes a normal html button would use, for example an **`aria-label`** tag.
+
+A **`ref`** can also be created and assigned to the **Card** component, and the component will point the reference to the outer html DIV.
+
+The **className** prop takes a list of alternate CSS classes the developer would like applied to the component. These are applied using the tailwind **`twMerge`** function, and will safely overwrite any conflicting classes ensuring proper styling.
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| alt   | string   | No      |   | Alt tag to use inside the image displayed inside the Card component. |
+| children   | ReactNode   | No      |   | Content to display in the Card aside from the image |
+| 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. |
+| ...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' |
+
+
+**(1) classnames for different variants**
+
+- default --> **`flex flex-col w-64 max-w-64`**
+- imageBottom --> **`flex flex-col-reverse w-64 mx-w-64`**
+- imageLeft --> **`flex flex-row h-auto max-w-lg min-w-96`**
+- imageRight --> **`flex flex-row-reverse h-auto max-w-lg min-w-96`**
+
+
+### Example Usage
+
+Basic example
+
+```jsx
+  <Card 
+    imagePath={imagePath}>
+    <h1 className="text-lg font-bold">Flu Season</h1>
+    <p>Flu season is approaching, and flu vaccines are 
+      available now.</p>
+  </Card>
+```
+
+Using an alternate varint, custom css, etc.
+
+```jsx
+  <Card variant='imageLeft'
+    imagePath={imagePath} 
+    imageClassname="rounded-lg" 
+    variantStyle="outline" 
+    alt="Doctor wearing face mask"
+    imageInset>
+    <h1 className="text-lg font-bold">Flu Season</h1>
+    <p>Flu season is approaching, and flu vaccines are 
+      available now.</p>
+  </Card>
+```
+
+### Dependencies
+
+**_none_**
+
+
+<!-- C H A R A C T E R  C O U N T E R -------------------------------------------------------- -->
+
+
+[Top of Page](#table-of-contents)
+
+## CharacterCounter
 
-A `ref` can also be created and assigned to the Card component, and the component will point the reference to the outer HTML `DIV`.
+The **CharacterCounter** component is one that you use to wrap an Input or TextArea component or element to inform a user of the number of characters they have typed. If the user goes over the specified limit the message style (further styling can be specified via the prop **overLimitMessageClassName**) and message will change to inform the visitor of this.
 
-The `className` prop takes a list of alternate CSS classes the developer would like applied to the component. These are applied using the Tailwind `twMerge` function and will safely overwrite any conflicting classes ensuring proper styling.
+The **CharacterCounter** component takes two required prop values, **children**, and **maxCharacters**, and informs the user of the number of characters they have typed or the number of characters they are over the limit for an Input or TextArea component.
 
-Full list of props below:
+The children prop will be an **input** or **textArea** element, wrapped by CharacterCounter, and is what CharacterCounter will monitor.
 
-### Props for the Button Component
+Full list of props below
 
-| Name            | Type          | Required | Default Value | Description                                                                                                         |
-|------------------|---------------|----------|---------------|---------------------------------------------------------------------------------------------------------------------|
-| `alt`           | string        | No       |               | Alt tag to use inside the image displayed inside the Card component.                                               |
-| `children`      | ReactNode     | No       |               | Content to display in the Card aside from the image.                                                               |
-| `ariaLabel`     | string        | Yes      | `'card component'` | This is the `aria-label` applied to the parent `DIV` element in the Card component.                                 |
-| `className`     | string        | Yes      | See (1) below | Class names to style the component.                                                                                |
-| `imageInset`    | string        | Yes      |               | A boolean value indicating whether the image inside the card should be inset or not. See above for functional examples. |
-| `imagePath`     | string        | Yes      |               | A path to an image to import and use inside the component. Can be constructed via `new URL('/src/assets/Doctor.png', import.meta.url).href;`. |
-| `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. |
-| `...props`      | string        | Yes      | `undefined`   | Takes 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'`   | Options are `default` and `outline`.                                                                               |
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| 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. |
+| 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). |
+
+
+### Example Usage
+
+Basic example
+
+```jsx
+  <CharacterCounter 
+      maxCharacters={15}>
+    <Input size={10} />
+  </CharacterCounter>      
+```
+
+Using an altOverageMessageText and altRemainingMessageText
+
+```jsx
+  <CharacterCounter 
+      maxCharacters={15} 
+      altOverageMessageText="CHARACTERS OVER THE LIMIT!"
+      altRemainingMessageText="characters remaining, use them wisely!">
+    <Input size={10} />
+  </CharacterCounter>
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
 
----
 
-### (1) Separate Variant CSS Style Definitions
+<!-- D A T E P I C K E R ------------------------------------------------------------------------------- -->
+
+## DatePicker
+
+DatePicker is an input that can be set typing or clicking on the day of the week displayed.
+
+The DatePicker component as built takes in various props (id, label, value, onChange)
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description                                  |
+| ----------- | -------- | -------- | -------- | -------------------------------------------- |
+| id    | string   | No       |       | An ID to differentiate/target the component. |
+| label    | string   | No    |  | A label for the component |
+| value    | string   | No    |  | The date the component is currently set to. |
+| onChange   | (date: string) => void \| null | No |  | Handler function to be fed to the component, executed when the date changes |
+
+
+### Example Usage
+
+Default Variant
+
+```jsx
+  import dayjs from "dayjs";
+  const [displayDate, setDisplayDate] = useState('');
+
+  <DatePicker id={""} label={""} 
+      value={dayjs().startOf("day").format("MM-DD-YYYY")} 
+      onChange={setDisplayDate}/>
+```
+
+
+### Dependencies
+
+**dayjs**
+
+[Top of Page](#table-of-contents)
 
-1. **default:**
-   ```css
-   flex flex-col w-64 max-w-64
-   ```
-2. **imageBottom:**
-    ```css
-    flex flex-col-reverse w-64 mx-w-64
-3. **imageLeft:**
-    ```css
-    flex flex-row h-auto max-w-lg min-w-96
-    ```
-4. **imageRight:**
-    ```css
-    flex flex-row-reverse h-auto max-w-lg min-w-96
-    ```
 
 
 <!-- I N P U T  ------------------------------------------------------------------------------ -->
@@ -168,15 +507,20 @@ A reference can also be created and passed to the input component, and the compo
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | className  | string  | Yes  | **(1) below**  | pass any css class names to add/change styling
-| labelClassName | string | Yes  | **(2) below** | pass any css class names to add/change styling for the input label  |
 | label | string | Yes  | '' | string value of label, blank for no label  |
-| labelInputColor  | string | Yes  | Yes  | '#fff'  | 2nd half of the **labelBaseColor** above - use if the input background is not white. If the background applied to the page and the input are different, specify the page input with this prop. This will split the background color behind the label to create a more seamless look. This is a simple css color value, e.g. **`white`**, **`#fff`**, etc.
-| textShadow  | boolean | Yes  | false  | indicates whether you wish to apply a drop shadow to the label text, and if used, utilizes the **labelBaseColor** above. |
+| 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  |
+| 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 |
+| textShadow  | boolean | Yes  | false  | indicates whether a drop shadow should be applied or not to the label text, and if used, utilizes the **labelBaseColor** above. |
+| variant  | string | Yes  |   | The predefined variant of Badge to display. Current options are 'default', 'MedCard', 'Outline', and 'nonHover' |
 
-**(1)** **`'arial rounded-sm border-2 border-[#c6c6c6] p-1 ps-2 mx-2
-  bg-white hover:outline-[#c6c6c6] focus:outline-[#0256ab] active:outline-[#0256ab]`**
 
-**(2)** **`absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto`**
+**(1)** Default classes are different for each variant, but the base classes are **`h-10 px-4 py-2 arial rounded-sm border-2 border-[#c6c6c6] p-1 ps-2 mx-2 bg-white hover:outline-[#c6c6c6] focus:outline-[#0256ab] active:outline-[#0256ab]`**
+
+
+**(2)** Default classes for the label are **`absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto`**
 
 ### Additional Properties & Attributes
 
@@ -187,7 +531,11 @@ This component as mentioned also takes any other property or attribute that a no
 #### Simple version
 
 ```jsx
-<Input label="Default Input" placeholder="placeholder text here" labelBaseColor="#f5f5f5" />
+  <Input 
+    label="Default Input" 
+    placeholder="placeholder text here" 
+    labelBaseColor="#f5f5f5" 
+    />
 ```
 
 #### More complex
@@ -210,6 +558,9 @@ This component as mentioned also takes any other property or attribute that a no
 
 **_none_**
 
+
+[Top of Page](#table-of-contents)
+
 <!-- L I S T ----------------------------------------------------------------------------------- -->
 
 ## List
@@ -221,12 +572,12 @@ The **List** component is a component that creates a list of items, ordered or u
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | items   | ListItemProps[]   | Yes      | undefined | takes an array of objects of type ListItemProps, anything can be fed to the children prop of the objects in the array |
+| header | string   | Yes      | undefined | takes in a string of text to be displayed above the list of items |
 | 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 | 
-| variant | string   | Yes   | undefined | variants can be used to change the theme of the component, for example DHA MedCard | 
+| itemClassName | 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 | 
 
@@ -276,194 +627,554 @@ Usage can be viewed inside the storybook app (**`npm run storybook`**), and exam
   </List>
 ```
 
+<!-- M O D A L  --------------------------------------------------------------------------- -->
+
 
-<!-- M O D A L ---------------------------------------------------------------------------- 
--->
+[Top of Page](#table-of-contents)
 
 ## Modal
 
-The Modal component takes four required props: **`isOpen`**, **`onClose`**, **`title`**, and child content.
+The **Modal** component is intended to be a re-usable component that developers can include in an app that provides alert dialog functionality to users.
 
-Optional props are **`className`**, **`clickOutsideCloses`**, **`displayClosingX`**, **`closeButtonText`**, **`continueButton`**, **`continueButtonText`**, and **`continueButtonHandler`**.
+The Modal component takes four required props, **isOpen**, **onClose**, **title**, and **child** content.
 
-As with the Button component, this component can also take additional HTML attributes that, when included, are passed to the parent `div`.
+Optional props are **className**, **clickOutsideCloses**, **displayClosingX**, **closeButtonText**,**continueButton**, **continueButtonText**, and **continueButtonHandler**.
 
-This `div` is also styled using the Tailwind `twMerge()` utility and is used to apply custom CSS classes via the `className` prop.
+As with the Button component, this component can also take additional html attributes that when included are passed to the parent div.
 
-### Props for the Modal Component
+This div is also styled using the tailwind **`twMerge()`** utility, and is used to apply custom css classes via the className prop.
 
-| Name                    | Type            | Required | Default Value       | Description                                                                                                                                          |
-|-------------------------|-----------------|----------|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `children`              | ReactNode      | No       |                     | This prop takes children content, i.e., HTML and content that becomes the body of the Modal.                                                        |
-| `isOpen`                | boolean        | No       |                     | Indicates whether the Modal is displayed or not. This value also controls the `overflow: hidden` CSS property and enables/disables keyboard listeners for accessibility. |
-| `onClose`               | () => void     | No       |                     | This is the close handler for the Modal component.                                                                                                  |
-| `title`                 | string         | No       |                     | This is the title to display in the Modal component.                                                                                                |
-| `className`             | string         | Yes      | See (1) below       | Alternate CSS class names to apply to the Modal component. `twMerge` is used to apply these classes, so they reliably overwrite existing styles.     |
-| `clickOutsideCloses`    | boolean        | Yes      | `false`             | When `true`, any mouse click outside of the Modal will close the Modal component.                                                                   |
-| `displayClosingX`       | boolean        | Yes      | `true`              | When `true`, an "x" icon is displayed in the upper right of the Modal component that, when clicked, will close the component.                        |
-| `closeButtonText`       | string         | Yes      | `'Close'`           | The string value to display in the `Close` button.                                                                                                  |
-| `continueButton`        | boolean        | Yes      | `false`             | When `true`, a "Continue" button is displayed in the Modal along with a "Close" button.                                                             |
-| `continueButtonText`    | string         | Yes      | `'Continue'`        | The string value to display in the `Continue` button.                                                                                               |
-| `continueButtonHandler` | () => void     | Yes      |                     | The function handler to execute when the `Continue` button is clicked.                                                                              |
+Full list of props below
 
----
+### Props
 
-### (1) Variants
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children   | ReactNode   | No      |   | This prop takes children content, i.e. html and content that becomes the body of the Modal. |
+| isOpen   | boolean   | No      |   | indicates whether the Modal is displayed or not. This value also controls the overflow: hidden css property, as well as enabling/disabling keyboard event listeners for accessibility purposes. |
+| onClose   | () => void()   | No      |   | This is the close handler for the Modal component. |
+| title   | string   | No      |   | This is the title to display in the Modal component. |
+| className | string | Yes   |   | Alternate CSS classnames to apply to the Modal component. twMerge is used to apply these classes, so they reliably overwrite existing styles. |
+| clickOutsideCloses | boolean | Yes      |   | When true, any mouse click outside of the Modal will close the Modal component. |
+| displayClosingX | boolean | Yes      |   | When true, an 'x' icon is displayed in the upper right of the Modal component that when clicked will close the component. |
+| closeButtonText | string | Yes      |   | The string value to display in the Close button |
+| continueButton | boolean | Yes      |   | When true, a 'Continue' button is displayed in the Modal along with a 'Close' button |
+| continueButtonText | string | Yes      |   | The string value to display in the Continue button |
+| continueButtonHandler | () => void | Yes      |   | The function handler to execute when the Continue button is clicked. |
 
-1. **`default`**: 
-   ```css
-   bg-white rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none
-    ```
 
-2. **`darker`**: 
-   ```css
-   bg-slate-600 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none text-slate-200
-    ```
+### Example Usage
+
+Basic Modal
+
+```jsx
+  <Modal 
+    isOpen={isOpen} 
+    onClose={() => setIsOpen(false)} 
+    title="Test Modal" 
+    clickOutsideCloses
+    >
+    <p>This is a Modal dialog that can be used for many varying 
+      purposes, from informational messages to taking user input, 
+      ideal for required quick tasks on a page.
+    </p>
+  </Modal>
+```
 
-3. **`dark`**: 
-   ```css
-   bg-zinc-800 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none text-slate-200
-    ```
+### Dependencies
+
+**_none_**
 
 
+[Top of Page](#table-of-contents)
+
 
 <!-- S E L E C T ---------------------------------------------------------------------------- -->
 
 ## Select
 
-<!--
-<div style="color: red;"><strong>TODO:</strong>
-<ul><li>smaller vertical space (or larger list) results on pop-up off screen w/o auto-scroll being visible
-</li></ul>
-</div>-->
+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.
+
+Full list of props below
+
+### Props
+
+| 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. |
+| 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 |
+| options  | {{name: ..., value:...}, ...}   | Yes  | undefined | options is an array of objects, each with a **name** and an optional **value** property. If value is not present, name is used in the handler function. |
+| optionsLabel   | string   | Yes | undefined | appears as the label in the Select component, i.e. 'Choose a Color' above. Note, this is not the label above the component. |
+| setSelectedOption | (string) => void | Yes  | undefined | calls the function passed in as **`setSelectedOption`** with the selected **value** if present, otherwise with **name** |
+| variant | string | Yes | undefined | The predefined variant of Select to display. Current options are 'default', 'MedCard', 'Outline', and 'nonHover' |
+| width | string | Yes |  | This prop is intended to like **`className`** take in css class name values. These are 
+intended though to only take class names relevant to the component width, as they will be applied to both the **button**
+and the **drop down** elements of the **`Select`** component.  For instance, the **`width`** prop is a good way to ensure that
+the button and drop down are of the same width. Note the default classes below, i.e. widths specified on various break points. |
+
+1. Base CSS Classes
+
+- **`outline-none outline-offset-0  flex justify-between items-center w-[292px] md:w-[343px] lg:w-[600px] h-14 border focus:outline-4 focus:outline-[#fa89f1] shadow-sm px-4 py-2 bg-white text-lg font-medium text-gray-700 hover:bg-gray-50 border-[#b3b3b3]`**
+
+Separate Variant Styles
+
+- default:
+  - **`hover:bg-gray-200 text-black hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive h-12 mt-1 disabled:border-dha-mc-secondary-border disabled:border-2`**
+- fill:
+  - **`hover:bg-[#0c2c8e] text-base text-white bg-[#092068] hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive h-12 mt-1 disabled:border-dha-mc-secondary-border disabled:border-2 py-3 pl-[15px] pr-[9px]`**
+- outline:
+  - **`border-dha-mc-true-blue bg-white border-2 text-dha-mc-true-blue disabled:border-dha-mc-secondary-border disabled:text-dha-mc-checkbox-inactive`**
+
+
+### Example Usage
+
+```jsx
+  <Select 
+    label='Border Color' 
+    optionsLabel='Choose a Color' 
+    variant='MedCard' 
+    options={[
+      {name: 'gray', value: 'border-gray-500'}, 
+      {name: 'Blue', value: 'border-blue-500'}
+      ]} 
+    setSelectedOption={setSelectedBorder} />
+```
+
+
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+<!-- S I D E B A R N A V ---------------------------------------------------------------------------- -->
+
+## SideBarNav
+
+The **SideBarNav** component provides a navigation component that slides in from the side of the display when activated. It includes an application logo, the application name, a list of links, and the version number of the application displayed at the bottom of the navbar.  
 
-The **select** component is actually a compound component made up of multiple smaller components and a Provider combined together to create a select dropdown. If matching width between the select component and drop-down is not important or desired, the Provider does not have to be used.
+Future versions should include search functionality.
 
-Additional styling can be applied to this compound component via the **`<SelectTrigger>`**, **`<SelectContent>`**, and **`<SelectItem>`** components using their respective **`className`** props. Applying className styles to **`<SelectTrigger>`** will style the component as it sits in its default state on the page, and applying className styles to **`<SelectContent>`** will style the expanded portion of the component when selected. As above, className styling is applied using the **`cn()`** utility function, and intelligently overrides existing style types with those passed in.
+  version: string;
+  appName: string;
+  menuItems: ListItemProps[];
 
-To set the component **width**, use the **`widthClass`** prop on the **`Select`** component. This width value will be applied to not just in its closed state, but in its opened state as well. If width values are set in **Select**, **SelectTrigger**, and **SelectContent**, only the value set inside of the **Select** component will apply.
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| appName | string   | No  | undefined | The application name to dispilay |
+| 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 |
+| 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 |
+| menuItems | ListItemProps[]  | No  | undefined, see (4) below | The menu items to display |
+| version | string   | No  | undefined | The version number to display |
 
-If no width value is specified then the component will determine its own best width, though most likely the Select component and the drop-down width will be different.
 
-Note that as in the example below, select items can be divided into groups with their own respective labels if desired. See the example for more information.
+1. Default Classes outer **`div`**
+
+- w/o menu **`relative w-56 h-screen flex flex-col px-4 pb-4 pt-10 bg-white overflow-y-auto`**
+- w/ menu, include also **`fixed z-20 right-0 top-0 translate-x-full transition-transform duration-300`**
+
+2. Default classes applied to **`img`** - **`border border-[#bbbabc] w-16 h-16 bg-[#eeeeef] ring-1`**
+
+3. Default classes applied to **`button`** - **`size-8 mb-4`**
+
+
+### Example Usage
+
+```jsx
+import doctor from '../../assets/Doctor.png';
+// ...
+
+const menuItems = [
+{
+  children: <>
+    <img className='max-h-[2em] max-w-[2em] pr-1 inline' src={arrowRight} alt='home link icon' />
+    <p className='inline hover:underline'>Accordion</p>
+  </>,
+  target: '/accordion'
+},
+{
+  children: <>
+    <img className='max-h-[2em] max-w-[2em] pr-1 inline' src={arrowRight} alt='home link icon' />
+    <p className='inline hover:underline'>Badge</p>
+  </>,
+  target: '/badge'
+},
+{
+  children: <>
+    <img className='max-h-[2em] max-w-[2em] pr-1 inline' src={arrowRight} alt='home link icon' />
+    <p className='inline hover:underline'>Breadcrumbs</p>
+  </>,
+  target: '/libraries/simple-ui/bread-crumbs-page'
+},
+....
+}
+
+// in the return JSX
+<SideBarNav
+  appName='A.C.M.E. Tools'
+  version="0.0.0"
+  menuItems={menuItems}
+  image={doctor}
+  clickOutsideCloses
+  menu
+  className='bg-slate-200 border border-slate-400 rounded-l-md h-full'
+  />
+```
+
+
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+<!-- S K E L E T O N ---------------------------------------------------------------------------- -->
+
+## Skeleton
+
+A Skeleton is used as a placeholder, showing a basic graphic representation of a page or resource while content is loading.
+
+The `Skeleton` component serves as a container for the Skeleton content, which consists of SkelCircle, SkelLine, SkelSection, and SkelRow. Skeleton takes two optional prop values, className and variant.
+
+Note that the `Skeleton` component uses `Flexbox`, and you can in theory use your own custom elements inside it, or change the layout on child components with this in mind.
+
+The nested components inside of Skeleton are `SkelCircle`, `SkelLine`, `SkelSection`, and `SkelRow`. These small components serve to display shaded shapes that represent larger content on the page representation.
+
+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"`.
+
+- `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
+- `SkelRow` - non graphical, used to force following items to a new row after using inline variants above. Usually not required.
+
+Full list of props below
+
+### Props for Skeleton
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| className   | string   | Yes      |  | This is used to apply user supplied styling to the `Skeleton` component. |
+| variant | string | Yes |  | Allows the user to enter a pre-defined variant that includes its own pre-defined styling |
+
+### Props for SkelCircle & SkelLine components
 
-Note: The **`<SelectContent>..</SelectContent>`** component contains a CSS class of **` mt-[-6px]`** inside of it that controls the spacing between the drop-down and the primary select menu. This value may have to be adjusted, for example applying **`className='mt-[-10px]'`** to the component to remove this spacing if it is present on your build platform.
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| className   | string   | Yes      |  | This is used to apply user supplied styling to the `SkelCircle` and `SkelLine` components. |
+| inline | boolean | Yes | false | if specified or true this component will be layed out inline. The `className` prop can be used to set a width, and if desired, additional inline components can be placed on the same line inside the Skeleton. |
 
-### Props common to &lt;Select&gt;, &lt;SelectContent&gt;, &lt;SelectItem&gt;, and &lt;SelectTrigger&gt;
+### Props for SkelCircle & SkelLine components
 
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
-| className   | string   | Yes      | undefined | used to apply new/additional styling to the component  |
+| className   | string   | Yes      |  | This is used to apply user supplied styling to the `SkelSection` and `SkelRow` components. |
+
+Tailwind CSS Classes used for Skeleton components
+
+- Skeleton
+  - **`flex flex-row flex-wrap animate-pulse h-48 w-56 pt-2`**
+- SkelCircle & SkelLine
+  - **`rounded-lg bg-slate-300 h-6 inline-block mx-2 my-1 grow`**
+- SkelSection
+  - **`rounded-lg bg-slate-300 grow h-24 my-1 mx-2`**
+- SkelRow
+  - **`basis-full h-0`**
+
+
+### Example Usage
+
+Usage example for Example 1 below
+
+```jsx
+  import { Skeleton, SkelCircle, SkelLine, SkelRow, SkelSection } from '@dhasdk/simple-ui'
+  // ... 
+  <Skeleton>
+    <SkelCircle inline /><SkelLine inline />
+    <SkelLine />
+    <SkelSection />
+  </Skeleton>
+```
+
+Usage example for Example 2 below
+
+```jsx
+  import { Skeleton, SkelCircle, SkelLine, SkelRow, SkelSection } from '@dhasdk/simple-ui'
+  // ... 
+  <Skeleton>
+    <SkelLine className="grow-0 basis-2/12" inline />
+    <SkelLine className="grow-0 basis-2/12" inline />
+    <SkelLine />
+    <SkelSection />
+  </Skeleton>
+```
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
 
-### Props for &lt;Select&gt;
+
+<!-- S T A T U S ---------------------------------------------------------------------------- -->
+
+## Status
+
+The `Status` component comes with three default variants, and the ability for the developer to create their own. Status is used to display in a small graphical format the status of content or a short message, accompanied by an icon - similar to a Badge.
+
+This component takes five optional props that allow for customization and/or the use of pre-defined variants. The three predefined variants, specified via the `variant` prop, are `available`, `inProgress`, and `notAvailable`. If `variant` is left blank, `available` is used.
+
+To create a custom iteration of Status, leave `variant` blank and utilize a combination of the remaining props. The `Status` component consists of three separate div elements, one serving as a container, and then one each for the image/icon and child data.
+
+The `className` prop can be used to add alternate styling to the outer div, i.e. `border-blue-700 bg-blue-200`. Likewise, the `imageClasses` prop can be used to provide alternate styling to the div containing the image, and the `childClasses` prop can provide alternate styling for the child div that contains the text, i.e. `text-blue-700`
+
+`image` and `children` are the final two props, and are both of type `ReactNode`.
+
+Full list of props below
+
+### Props
 
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
-| name        | string   | Yes      | undefined | prop to set the name of the component. This has not been tested, and its usefulness is not known.  |
-| onValueChange | (value) => void | Yes      | undefined | a function to handle the value change event |
-| widthClass  | string   | Yes      | undefined | take and apply width to the component. This takes classes applying to width only as it is applied in more than one place, and if additional non-width classes are added, the results are unpredictable  |
+| 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. |
+| 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. |
+
+1. className
+
+   **`h-[45px] px-4 py-3 bg-green-50 rounded-[100px] border border-green-700 justify-center items-center gap-2 inline-flex`**
+
+2. childClasses
+
+   **`text-green-900 text-lg font-normal font-['Arial']`**
+
+3. imageClasses
+
+   **`w-5 h-5 relative overflow-hidden`**
+
+### Example Usage
+
+Available variant
+
+```jsx
+  <Status 
+    className='me-4'>
+    Available</Status>
+```
+
+inProgress variant
+
+```jsx
+  <Status 
+    className='me-4' 
+    variant='inProgress'>
+    In Progress</Status>
+```
+
+notAvailable variant
+
+```jsx
+  <Status 
+    className='me-4' 
+    variant='inProgress'>
+    In Progress</Status>
+```
+
+Custom variant
+
+```jsx
+  <Status 
+    image={ <img src={tune} 
+        alt='information' /> }
+    className='border-blue-700 bg-blue-200'
+    childClasses='text-blue-700'
+    >
+    Custom
+  </Status>
+```
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+<!-- T A B S  --------------------------------------------------------------------------------- -->
+
+## Tabs
 
-### Props for &lt;SelectItem&gt;
+Tabs component lets the user split the UI into independent pieces, and view each piece in isolation.
+
+This component has one required prop, **tabs**, which contains the content of the various tabs as type ReactNode.  Optional props are **className**, **containerClassName**, and **variant**.
+
+Full list of props below
+
+### Props
 
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
-| value       | string   | Yes      | undefined | used to set the value of for this item that is submitted to the **`onValueChange`** function. This is not the value displayed to the user.  |
+| className | string | Yes | undefined |  |
+| containerClassName | 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' |
 
 ### Example Usage
 
-<details>
-  <summary><span style="color: green;">Click to view example source code</span></summary>
+Tabs - very simple example
 
 ```jsx
-import {
-  Select,
-  SelectTrigger,
-  SelectGroup,
-  SelectLabel,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-  ComponentWidthProvider,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-} from '../components/ui/select';
-
-<ComponentWidthProvider>
-  <Select
-    widthClass="w-[180px]"
-    onValueChange={(value) => console.log('Clicked! Value: ', value)}
-    name="TestSelect"
-  >
-    <SelectTrigger className="">
-      <SelectValue placeholder="Theme" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectGroup>
-        <SelectLabel>Words</SelectLabel>
-        <SelectItem value="light">Light</SelectItem>
-        <SelectItem value="dark">Dark</SelectItem>
-        <SelectItem value="system">System</SelectItem>
-      </SelectGroup>
-      <SelectGroup>
-        <SelectLabel>Numbers</SelectLabel>
-        <SelectItem value="1">One</SelectItem>
-        <SelectItem value="2">Two</SelectItem>
-        <SelectItem value="3">Three</SelectItem>
-        <SelectItem value="4">Four</SelectItem>
-        <SelectItem value="5">Five</SelectItem>
-        <SelectItem value="42">Answer to Life</SelectItem>
-      </SelectGroup>
-      <SelectGroup>
-        <SelectLabel>Colors</SelectLabel>
-        <SelectItem value="red">Red</SelectItem>
-        <SelectItem value="yellow">Yellow</SelectItem>
-        <SelectItem value="blue">Blue</SelectItem>
-        <SelectItem value="brown">Brown</SelectItem>
-        <SelectItem value="green">Green</SelectItem>
-        <SelectItem value="orange">Orange</SelectItem>
-        <SelectItem value="purple">Purple</SelectItem>
-      </SelectGroup>
-    </SelectContent>
-  </Select>
-</ComponentWidthProvider>;
+  <Tabs tabs={[
+    {id: 'tab1', label: 'Tab 1', content: <p>I am a tab!</p>}, 
+    {id: 'tab2', label: 'Tab 2', content: <p>I am a 2nd tab!</p>}
+    ]} />
 ```
 
-</details>
+Tabs - more complicated example
+
+```jsx
+
+  const TabsContent1 = () => {
+      return(
+          <>
+              <p>Test Data 1</p>
+              <ul className="list-disc mt-2 ms-4">
+                  <li>Seattle</li>
+                  <li>Tacoma</li>
+                  <li>Olympia</li>
+                  <li>Bellevue</li>
+                  <li>Redmond</li>
+              </ul>
+          </>
+      )
+  }; 
+
+  const TabsContent2 = () => {
+      return(
+          <>
+              <p>Test Data 2</p>
+              <ul className="list-disc mt-2 ms-4">
+                  <li>Tokyo - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
+                  <li>Paris - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
+                  <li>London - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
+                  <li>Sydney - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
+                  <li>Honolulu - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
+              </ul>
+          </>
+      )
+  }; 
+
+  const tabExample = [
+      {
+          id: 'tab1',
+          label: 'Tab 1',
+          content: <TabsContent1/>,
+      },
+      {
+          id: 'tab2',
+          label: 'Tab 2',
+          content: <TabsContent2/>,
+      }
+  ]
+  // ...
+  return { 
+      ...
+      <Tabs tabs={tabExample} />
+      ...
+  }
+```
 
 ### Dependencies
 
-**`@radix-ui/react-select`**
+**_none_**
+
+
+
+[Top of Page](#table-of-contents)
 
 <!--  T O G G L E -------------------------------------------------------------------- -->
 
 ## Toggle
 
-className, defaultChecked = false, onCheckedChange, ...props }, ref
+A Toggle is an element that allows the user to make a choice between two mutually exclusive states. Our Toggle comes with several variants: default, outlined, and text.
 
-The **Toggle** component is a toggle component that allows users to select/de-select an item or value. Like other components, it takes in various props for configuration, including a default boolean value for checked/unchecked, and a handler function that is called when the value is changed or toggled. In addition, a **`ref`** can be assigned to this component also.  With respect to CSS, specified classnames are combined using **`twMerge`**/**`cn`**, so prior values are reliably overwritten.
+The Toggle component takes a "variant" prop used to indicate pre-defined styles, an optional click handler, and various other optional props described below and uses those to display a Toggle button. The variant prop currently takes one of four values, those possible values currently being 'default', 'Outline', 'nonHover', and 'MedCard'.
+
+As with the button component, Toggle takes any other additional html attributes and passes them to the parent **`<button>`** tag. This div is styled using the tailwind twMerge() utility, so custom classes can be added via the classNames prop as and applied as well.
 
 ### Props
 
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
-| className   | string   | Yes      | undefined | takes additional classnames to add/change styling |
-| defaultChecked | boolean   | Yes      | false | indicates whether the toggle is in a checked or unchecked state when first displayed |
-| onCheckedChange | (checked: boolean) => void    | Yes | undefined  | callback function that is called with the new value of `checked` whenever it changes. |
+| className   | string   | Yes      | (1) below	| alternate css classes to add/change styling of button element inside component |
+| classNameButton   | string   | Yes      | (1) below	| alternate css classes to add/change styling of div used inside button/toggle |
+| defaultChecked | boolean   | Yes      | **`false`** | sets default state as checked or unchecked state when first displayed |
+| disabled | boolean | Yes | **`false`** | sets disabled state of Toggle component |
+| onCheckedChange | (checked: boolean) => void    | Yes | undefined  | callback function that is called with the new value of `checked` whenever it changes. To capture the correct state, it is recommended that you use an arrow function here. |
 | ...props | string   | Yes   | undefined | takes additional props that are not specifically defined in the component, i.e. **`aria-label`**  | 
 | ref         | string   | Yes      | undefined | ref is exposed as a prop, and can be assigned and used on this component as normal |
-
+| variant | string | Yes | 'default' | The predefined variant of Badge to display. Options are: 'default', 'Outline', 'nonHover', and 'MedCard'. |
+
+
+(1) Base CSS Classes
+   - 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
+
+
+Separate Variant Styles
+
+- default:
+  - classes: 'bg-gray-300 hover:bg-gray-400'
+  - toggledClasses: 'bg-[#092068] hover:bg-blue-700'
+  - buttonClasses: 'translate-x-0'
+  - toggledButtonClasses: 'translate-x-8'
+- Outline:
+  - classes: 'bg-slate-200 border-2 border-blue-700 hover:bg-slate-300'
+  - toggledClasses: 'bg-blue-500 border-2 border-blue-700 hover:bg-blue-400'
+  - buttonClasses: 'translate-x-0'
+  - toggledButtonClasses: 'translate-x-8'
+- nonHover:
+  - classes: 'bg-gray-300'
+  - toggledClasses: 'bg-[#092068]'
+  - buttonClasses: 'translate-x-0'
+  - toggledButtonClasses: 'translate-x-8'
+- MedCard:
+  - classes: 'bg-[#E3EBF3] border-2 border-[#0256AB]'
+  - toggledClasses: 'bg-[#0256AB] border-2 border-[#0256AB]'
+  - buttonClasses: 'translate-x-0'
+  - toggledButtonClasses: 'translate-x-8'
 
 ### Example Usage
 
-Usage can be viewed inside the storybook app (**`npm run storybook`**), and an example is below. The following logs the checked state value (true or false) to the console when toggled.
-
 ```jsx
-  <Toggle
-    defaultChecked={false}
-    onCheckedChange={(checked: boolean) => console.log('checked: ', checked)}
-  />
+  <Toggle 
+    onCheckedChange={(checked: boolean) => {
+      setColor(checked ? 
+        'border-green-500' : 'border-gray-400'); 
+      console.log(checked);}
+    } 
+    variant={badgeVariant} />
 ```
 
 ### Dependencies
 
-**`@radix-ui/react-switch`**
+**_none_**
+
+
+[Top of Page](#table-of-contents)