@dhasdk/simple-ui 1.0.52 → 1.0.53

package/README.md

@@ -53,6 +53,8 @@ Tooltip
 
 ## Changelog
 
+1.0.53 - added **`data-testid`** prop(s) to  **Accordion**, **AppointmentPicker**, **Badge**, **Breadcrumbs**, **ButtonGroup**, **Card**, **CharacterCounter**, **CheckBox** and **CheckBoxGroup**, **DatePicker**, **ExpandableText**, **Input**, **List**, **Modal**, **ProgressBar**, **RadioGroup**, **Search**, **SectionHeader**, **Select**, **Shield**, **SideBarNav**, **skeleton**, **slider**, **status**, **tabs**, **toggle**, **tooltip**. See docs for uses per component.
+
 1.0.51/52 - **`Search`** added iconLinkHandler prop + updates to documentation, **`ExpandableText`** added a **`clickHandler`** prop
 
 1.0.50 - fixes for **`Search`** results display on tailwindcss lg: breakpoint
@@ -149,6 +151,7 @@ Finally, if Accordion props are specified inside the parent component, those val
 | classNameChildContent     | 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. |
 | classNameContainer | string | Yes   | undefined | CSS classes applied to the container div for the **AccordionParent** component. | 
 | classNameHr   | string   | Yes      | CSS classes applied to the HR that sits between the accordion heading and content body when open and the prop useBackground is true. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element inside AccordionGroup that wraps individual Accordion components |
 | hr | boolean | Yes | true | This boolean value when true directs the display an hr element between the Accordion heading and body when in the open state. |
 | ...props	       | string   | No       |       | takes additional props that are not specifically defined in the component, i.e. aria-label |
 | 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. |
@@ -167,6 +170,9 @@ Finally, if Accordion props are specified inside the parent component, those val
 | classNameHeading   | string   | Yes      | CSS classes to apply to the child Accordion component headings. |
 | classNameContent     | string   | No       | N/A      | CSS classes to apply to the Accordion component content body. |
 | classNameHr   | string   | Yes      | CSS classes applied to the HR that sits between the accordion heading and content body when open and the prop useBackground is true. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the Accordion components, used for testing purposes |
+| dataTestIdLabel | string | Yes | undefined | A **'data-testid'** value that is applied to the span element that that contains the label inside the Accordion component, used for testing purposes |
+| dataTestIdBody | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that that contains the body of the opened Accordion component. Only present when the Accordion is in the opened state, used for testing purposes |
 | hr | boolean | Yes | true | This boolean value when true directs the display an hr element between the Accordion heading and body when in the open state. |
 | index | number | string | yes | undefined | optional index value for a specific accordion in the stack. if not present, label is used. |
 | onExpand | (setOpen: CallbackFunction) => void | Yes | undefined | Callback function that is executed when Accordin is expanded. |
@@ -219,6 +225,9 @@ This component takes multiple optional props in addition to any other html attri
 | ----------- | -------- | -------- | -------- | -------------------------------------------- |
 | className   | string | Yes | see below | a group of alternate css classes that can be specified by the developer for use in the dropdown button portion of the component. |
 | classNameContainer | string | Yes | '' | a group of alternate css classes that can be specified by the developer for use in the parent container of the component. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the select component used in AppointmentPicker, for testing purposes |
+| dataTestIdButton | string | Yes | undefined | A **'data-testid'** value that is applied to the button element that is the Select component for testing purposes |
+| dataTestIdList | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the drop down list for testing purposes |
 | interval | 'hour' \| 'half-hour' \| 'quarter-hour'	| Yes | **`'hour'`** | Controls the interval between times, for example 'hour' intervals would produce results like 01:00, 02:00 etc, while half hour and quarter hour would produce gaps of 30 and 15 minutes respectively. |
 | timeFormat | '12hr' \| '24hr' | Yes | **`'24hr'`** | Controls whether the times are listed as military or standard 12 hour, am/pm times. (13:00 vs 1:00pm & 03:00 vs 3:00am) |
 | hourRange | [number, number] | Yes | **`undefined`** | If specified, only hours within and including the range specified will be available for selection. |
@@ -278,6 +287,9 @@ This div is also styled using the tailwind **`twMerge()`** utility, so custom cl
 | className   | string   | Yes      | See **(1)** below | Alternate CSS classnames to apply to the Badge component.twMerge is used to apply these styles, so they reliably overwrite existing styles |
 | classNameChildren | string | Yes | See **(2)** below | Alternate CSS classnames to apply to the Children content inside the Badge component.twMerge is used to apply these styles, so they reliably overwrite existing styles. | 
 | classNameImage         | string   | Yes | See **(3)** below | Alternate CSS classes that are applied to the image for variant type media. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the **`div`** element that wraps the Badge component, used for testing purposes |
+| dataTestIdContent | string | Yes | undefined | A **'data-testid'** value that is applied to the **`div`** element that contains the child content inside the Badge component |
+| dataTestIdIcon | string | Yes | undefined | A **'data-testid'** value that is applied to the **`span`** element in the case that a custom icon is used in the Badge, or the **`img`** element if an included icon is used |
 | icon | ReactNode | Yes | undefined | An alternate icon to use for the instance of this Badge |
 | iconAlt | string | Yes | undefined | When an imagePath is specified, please specify an imageAlt that can be used for accessibility purposes. |
 
@@ -368,9 +380,10 @@ Full list of props below
 | 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. |
 | classNameContainer | string   | Yes   |   | This is used to apply user supplied styling to the container `nav` element. |
 | classNameFinal | string   | Yes   |   | Applies styling to the name of the current page in the breadcrumbs list. |
-| classNameIcon | string   | Yes   |   | This is used to apply user supplied styling to the separator icons in the list, i.e. with **`stroke-[some-color] fill-[some-color]`**. |
+<!-- | classNameIcon | string   | Yes   |   | This is used to apply user supplied styling to the separator icons in the list, i.e. with **`stroke-[some-color] fill-[some-color]`**. | -->
 | classNameIconHome | string   | Yes   |   | This is used to apply user supplied styling to the separator home icon in the list, i.e. with **`stroke-[some-color] fill-[some-color]`**. |
 | classNameIconSeparator | string   | Yes   |   | This is used to apply user supplied styling to 'Separator' icons inside the element between path names. These by default only use 'stroke' values, so an example would be 'stroke-[#FFF]'. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the **`nav`** element that wraps the Breadcrumbs component, used for testing purposes |
 | routes | []{ name: string, route: string} | Yes | undefined | When present the Breadcrumbs component will use this list of supplied routes + names instead of attempting to auto-create a routes list. |
 | ...props    | string   | Yes | undefined | takes additional props that are not specifically defined in the component, i.e. aria-label |
 | separator  | string   | Yes       |  | A string value providing the path name to an alternate separator |
@@ -421,6 +434,7 @@ A reference can also be created and passed to the button component, and the comp
 | classNameIconRight | string | Yes  | **`ml-3`** | Class names to style the span element that contains the right icon |
 | classNameContent | string | Yes  | **`grow-1 text-start`** | Class names to style the content block / body, i.e. the label |
 | classNameSelected | string | Yes | undefined | Class names to apply to the components if they are in the optional selected state, see **selected** below |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the button element that is the Button component, used for testing purposes |
 | icon | ReactNode | Yes | undefined | image, icon, etc. to use for left or right icon as defined by **`iconPosition`** |
 | iconLeft | ReactNode | Yes | undefined | This contains the optional icon to display on the left side of the button. This prop does not require the use of the iconPosition prop below. |
 | iconRight | ReactNode | Yes | undefined | This contains the optional icon to display on the right side of the button. This prop does not require the use of the iconPosition prop below. |
@@ -531,6 +545,7 @@ The variants labeled **default** and **column** demonstrated in the examples bel
 | children   | ReactNode   | Yes      |  | This contains one or more Button components that comprise this ButtonGroup. |
 | className | string | Yes  |'' | This prop applies the given classNames to the DIV that wraps and comprises the ButtonGroup component. |
 | classNameButtons | string | Yes | undefined | These are common classes that are applied to each of the children Button components. These classes can be overridden on a one by one basis by using an individual Button components own className prop. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the ButtonGroup component, used for testing purposes |
 | variant | string | Yes | 'default' | One of three possible variants that can be specified, **'default'** and **'column'** are UX defined variants that pre-layout up to three buttons for each variant. A **'custom'** variant is also present that leaves all layout and styling to the developer. |
 
 
@@ -633,12 +648,14 @@ 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 |
 | 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. |
+| dataTestIdContainer | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the Card component, used for testing purposes |
+| dataTestIdImage | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that contains the image inside the Card component, used for testing purposes |
+| dataTestIdChildren | string | Yes | undefined | A **'data-testid'** value that is applied to the div element inside the Card component that contains the child content, used for testing purposes |
 | imageInset | string | Yes  |   | A boolean value indicating whether the image inside the card should be inset or not. See above for functional examples. |
 | ...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`**
@@ -707,6 +724,8 @@ Full list of props below
 | 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 default classNameOverLimitMessage). |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the content being counted by the CharacterCounter component, used for testing purposes |
+| dataTestIdMessage | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that contains the message printed by the CharacterCounter component |
 
 
 ### Example Usage
@@ -762,6 +781,7 @@ Used by itself, **CheckBox** behaves as a normal checkbox component and can be u
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | bridgePraent   | boolean   | Yes      | {false} | When true, the lines that denote the relationships between parent CheckBoxes and their children are extended at the root level to match root level CheckBoxes to one another. In the above examples, compare 'Multi-Level' and 'bridgeParent' to see the differences. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the CheckBoxGroup component for testing purposes |
 | fill | boolean   | Yes      | {false}  | specifies using the **`fill`** variant or not. If used, the checkbox itself will have a darker solid background. |
 | icon  | boolean  | Yes  | {true} | When **`true`** (default value) this prop will utilize one of two UX created icons to represent a checked, indeterminate, and blank checkbox. When **marker** is true as well, a marker icon is used in place of the checked. |
 | marker | boolean | Yes  | {false} | When true this boolean will cause the normal checked checkbox to instead display an 'x' marker icon. |
@@ -776,6 +796,7 @@ Used by itself, **CheckBox** behaves as a normal checkbox component and can be u
 | className | string | Yes | **`'flex items-center'`** | alternate css classes to add/change styling of the **div** that wraps the **input** element. |
 | classNameInput | string | Yes | **`''`** | alternate css classes to add/change styling of the **input** html element. |
 | classNameSvg | string | Yes | **`'stroke-[#a1a6a8] h-full border'`** | This prop is applied to the lines that are drawn inside the SVGs that denote the relationships between separate **CheckBox** components. The easiest change to effect is the color of the lines by applying a different custom stroke value. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the CheckBox component for testing purposes |
 | fill | boolean | Yes | {false} | specifies using the **fill** variant or not. If used, the checkbox itself will have a darker solid background. |
 | icon | boolean | Yes | {true} | When true (default value) this prop will utilize one of two UX created icons to represent a checked, indeterminate, and blank checkbox. When **marker** is true as well, a marker icon is used in place of the checked. |
 | marker | boolean | Yes | {false} | When true this boolean will cause the normal checked checkbox to instead display an 'x' marker icon. |
@@ -843,6 +864,9 @@ The DatePicker component as built takes in various props (id, label, value, onCh
 
 | Prop        | Type     | Optional | Default  | Description                                  |
 | ----------- | -------- | -------- | -------- | -------------------------------------------- |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the DatePicker component for testing purposes |
+| dataTestIdInput | string | Yes | undefined | A **'data-testid'** value that is applied to the input element that of a DatePicker for testing purposes |
+| dataTestIdExpanded | string | Yes | undefined | A **'data-testid'** value that is applied to the div element of the expanded portion of the DatePicker component for testing purposes |
 | id    | string   | No       |       | An ID to differentiate/target the component. |
 | label    | string   | No    |  | A label for the component |
 | onChange   | (date: string) => void \| No | undefined | Handler function to be fed to the component, executed when the date changes |
@@ -903,6 +927,8 @@ buttons.
 | clickHandler | **`(expanded: boolean) => void`** | Yes | **`undefined`** | Takes a user-defined function that accepts a boolean value indicating whether the text is expanded or not (true or false). |
 | collapseButton | **`boolean`** | Yes | **`false`** | to display a collapse button or not |
 | collapseText | **`string`** | Yes | **`'collapse'`** | text label for 'collapse' button |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the ExpandableText component for testing purposes |
+| dataTestIdButton | string | Yes | undefined | A **'data-testid'** value that is applied to the button element that either expands or shrinks the ExpandaleText component for testing purposes |
 | initialChars | **`number`** | Yes | 40 | number of characters to display by default in collapsed state |
 
 ### Example Usage
@@ -938,7 +964,9 @@ 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
 | classNameLabel | string | Yes  | **(2) below** | pass any css class names to add/change styling for the input label  |
-| classNameRequired | string | Yes |  |   |
+| classNameRequired | string | Yes |  |  a group of alternate css classes that can be specified by the developer styling and placement of the askterisk used to indicate an input value is required. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the input element for testing purposes |
+| dataTestIdLabel | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that contains the Label value for testing purposes |
 | insetLabel | boolean | Yes | false | indicates whether the label is inset into the border or resides above the input component |
 | 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, color is a string hex value, i.e. **#fefefe** |
@@ -1040,6 +1068,7 @@ The **List** component is a component that creates a list of items, ordered or u
 | withDividers | boolean   | Yes   | false | if true, this prop will display a divider to separate each item 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 |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the List component for testing purposes |
 | 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 | 
 | isAlphabetical | boolean | false | if true, this prop will change the list indicators to be alphabetical, placing a letter next to each item starting with 'a'. |
@@ -1150,19 +1179,22 @@ Full list of props below
 
 | 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. |
 | blurLevel | 'sm', 'md', 'lg', 'xl', '2xl', '3xl' | Yes | undefined | sets backdrop blur behind the modal |
+| children   | ReactNode   | No      |   | This prop takes children content, i.e. html and content that becomes the body of the Modal. |
 | className | string | Yes   | **see below** | 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   | false | When true, any mouse click outside of the Modal will close the Modal component. |
 | closeButton | boolean | Yes | true | if true, a close button is presented in the modal |
 | closeButtonText | string | Yes   |   | The string value to display in the Close button |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the Modal component for testing purposes |
+| dataTestIdBody | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that contains the model content for testing purposes |
+| dataTestIdTitle | string | Yes | undefined | A **'data-testid'** value that is applied to the heading element that contains the title for testing purposes |
 | 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. |
 | 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. |
+| 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. |
 | variant | string | Yes | 'default' - **see below** | indicates the modal variant classes to apply.  |
 
 
@@ -1214,6 +1246,7 @@ Full list of props below
 | ----------- | -------- | -------- | -------- | ----------- |
 | 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. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the button element that wraps the Pill component for testing purposes |
 | 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.|
@@ -1269,6 +1302,7 @@ Full list of props below
 | classNameBorderColor  | **`string`**  | Yes  | **`border-[#305B25]`**  | Controls the color of the border around each completed step's circle.  |
 | classNameFillColor | **`string`**  | Yes  | **`bg-green-500`**  | Controls the fill color of each completed step's circle.  |
 | classNameGradient  | **`string`**  | Yes  | **`from-[#305B25] to-[#5AAB46]`**  | Controls the colors used in the gradient for the bars between each completed step.  |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps ProgressBar for testing purposes |
 
 1. Base CSS Classes
 
@@ -1328,6 +1362,7 @@ Full list of props below
 | classNameContainer  | **`string`**  | Yes | **`undefined`**  | a group of alternate css classes that can be specified by the developer for use in the container (fieldset) element.  | 
 | classNameInput  | **`string`**  | Yes | see below  | a group of alternate css classes that can be specified by the developer for use in the input element of the component.  | 
 | classNameLabel  | **`string`**  | Yes | see below | a group of alternate css classes that can be specified by the developer for use in the label element of the component.  | 
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the fieldset element that wraps RadioGroup for testing purposes |
 | options  | **`string`**  | No |  | Array of RadioOption objects that define the options available for selection. | 
 
 1. Base CSS Classes
@@ -1441,12 +1476,15 @@ Full list of props below
 | classNameContainer | **`string`** | Yes | **`h-12 md:h-[50px] lg:h-14 flex items-center max-w-full relative`** | alternate css classes to add/change styling of the span tag that wraps the search component. |
 | classNameInputContainer | **`string`** | Yes | **`border-[#6a686b] w-[309px] md:w-[334px] lg:w-[350px] inline-flex bg-white items-center lg:bg-transparent pe-2`** | alternate css classes to add/change styling of the span tag that wraps the search component. |
 | classNameListOutput | **`string`** | Yes | see (2) below | alternate css classes to add/change styling of the output list or search results box. |
+| dataTestIdInput | string | Yes | undefined | A **'data-testid'** value that is applied to the input element inside the Search component |
+| dataTestIdResults | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that is the container for the Search results list, applied for testing purposes |
 | iconLink | **`boolean`** | Yes | **`{false}`** | If set to true, a search icon is displayed that when clicked will expand into a wider Search component. |
 | iconLinkHandler | **`() => void`** | Yes | **undefined** | If **iconLink** is true, this handler will fire when the user clicks the icon to expand the Search bar. This can be used in case the parent container should be notified the Search component is expanded. |
 | searchableData | **`SearchDataItem[]`** | No | undefined | The data that the search component uses as its data source. This data must conform to the SearchDataItem interface. An example data file is shown above. |
 | setSearchResults | **`(DataSearchResults) => return void`** | Yes |undefined | If the use case entails sending the user to a separate results page, provide a function here that takes those search and performs the desired action. See (2) below for the DataSearchResults definition. |
 | variant | **`string`** | Yes | undefined | There is one non-default optional variant type, and that is 'rounded'. This variant type will cause the ends of the **`Search`** component to be full rounded in appearance. |
 
+
 1. Default className
   
   **`grow shrink-1 appearance-none h-8 md:h-[32px] my-2 lg:h-14 py-2 lg:ps-[19px] rounded-tl rounded-bl rounded-br-none rounded-tr-none lg:border border-[#07192d] font-['Arial'] bg-white text-[#333234] text-base lg:text-lg hover:border-[#5992fa] focus:border-[#5992fa] outline-hidden`**
@@ -1558,6 +1596,7 @@ Full list of props below
 | 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. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that is the container for testing purposes |
 | fill | boolean | Yes | false | if true, the background on the sectionHeader is filled. Fill is applied by applying **`bg-[#092068] text-[#f0f0f0]`** to the default classes. A custom fill can be applied by applying your own classList via the **`className`** prop and leaving **`fill`** at its default false setting. |
 | button | boolean | Yes | false | Boolean value specifying whether to display a button or not on the right side of the SectionHeader. |
 | buttonOnClick | () => void | Yes | undefined | An onClick handler for the optional button. |
@@ -1623,6 +1662,9 @@ Full list of props below
 | ----------- | -------- | -------- | -------- | ----------- |
 | 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. |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the select component for testing purposes |
+| dataTestIdButton | string | Yes | undefined | A **'data-testid'** value that is applied to the button element that is the select component for testing purposes |
+| dataTestIdList | string | Yes | undefined | A **'data-testid'** value that is applied div element that wraps the drop down list for testing purposes |
 | 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 |
@@ -1688,6 +1730,7 @@ This div is also styled using the tailwind **`twMerge()`** utility, so custom cl
 | 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 |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the shield for testing purposes |
 | imageAlt         | string   | See Comment  | undefined | When an imagePath is specified, please specify an imageAlt that can be used for accessibility purposes. |
 | 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. |
@@ -1795,6 +1838,8 @@ Full list of props below
 | classNameMenu | string   | Yes      | empty string | alternate css classes to apply to the element that makes up the hamburger menu |
 | classNameMenuContainer | string   | Yes      | (3) below | alternate css classes to apply to the **`button`** element that wraps up the hamburger menu |
 | classNameMenuItem | string | Yes | 'pb-4' | allows the user to add alternate classes via **`twMerge`** to individual menu items |
+| dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the dialog element that wraps the menu for testing purposes |
+| dataTestIdHamburger | string | Yes | 'hamburgerMenu' | A **'data-testid'** value that is applied to the button that is the hamburger menu for testing purposes. |
 | backgroundShadow | boolean | Yes | false | When true (or present) this sets a background shadow that covers the page with the SideBarNav on top when activated. See also **`classNameBackgroundShadow`** to apply custom styling. |
 | clickOutsideCloses   | boolean   | Yes  | **`false`** | clicking or tapping elsewhere on the application will close the SideBarNav |
 | customButton | boolean | Yes | false | When present (or true) this sets the SideBarNav to respond to the custom event handler **`toggleSideBarNav`**. This allows the developer to utilize their own button that simply executes the above custom event handler to toggle the SideBarNav open & closed state. |
@@ -1917,6 +1962,7 @@ Full list of props below
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | className   | string   | Yes      |  | This is used to apply user supplied styling to the `Skeleton` component. |
+| dataTestId | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to a component div element for testing purposes |
 | variant | string | Yes |  | Allows the user to enter a pre-defined variant that includes its own pre-defined styling |
 
 ### Props for SkelCircle & SkelLine components
@@ -1924,6 +1970,7 @@ Full list of props below
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | className   | string   | Yes      |  | This is used to apply user supplied styling to the `SkelCircle` and `SkelLine` components. |
+| dataTestId | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to a component div element for testing purposes |
 | 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 for SkelCircle & SkelLine components
@@ -1931,6 +1978,9 @@ Full list of props below
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | className   | string   | Yes      |  | This is used to apply user supplied styling to the `SkelSection` and `SkelRow` components. |
+| dataTestId | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to a component div element for testing purposes |
+
+
 
 Tailwind CSS Classes used for Skeleton components
 
@@ -2014,9 +2064,10 @@ Full list of props below
 | className   | string   | Yes      |  | This is used to apply user supplied styling to the **input** element that makes up the **Slider** component. |
 | classNameLabel | string | Yes |  | A string value of tailwind classes used to apply styling to the **label** inside the **Slider** component. |
 | changeHandler | **`(value: number) => void;`** | Yes |  | A **callback** function can be used to pass values back to the parent. Example in the usage display of the callback example above. |
+| dataTestIdInput | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to the components input element for testing purposes |
+| dataTestIdLabel | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to the components label element for testing purposes |
 | id | string | Yes |  | The **id** value used to link the **label** and **input** elements together. If an **id** is not provided, the **label** is not displayed. |
 
-
 Tailwind CSS Classes used for Slider components
 
 - className defaults
@@ -2093,9 +2144,12 @@ Full list of props below
 | 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. |
 | classNameChild   | string   | Yes      | (2) below | This prop takes in alternate classes to apply style to the `div` that contains the child content. |
 | classNameImage | string   | Yes      | (3) below | Alternate CSS classes that are applied to the div containing the childe div that contains the Status component image. |
+| dataTestIdContent | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to the components containing div for testing purposes |
+| dataTestIdContainer | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to the component for testing purposes |
 | image   | ReactNode   | Yes      |  | This prop takes type `ReactNode`, and is used to display a custom user supplied image. See usage examples above for more. |
 | variant | string | No | 'available' | The predefined variant of Status to display. Predefined variants are `available`, `inProgress`, and `notAvailable` |
 
+
 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`**
@@ -2172,6 +2226,8 @@ Full list of props below
 | ----------- | -------- | -------- | -------- | ----------- |
 | className | string | Yes | undefined | 'flex border-b border-gray-200' | Additional css classes to apply to the div containing the individual tabs |
 | classNameContainer | string | Yes | 'w-full' | Additional css classes to apply to the containing div for the tabs component |
+| dataTestIdTabButton | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to the component for testing purposes |
+| dataTestIdContainer | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to the component for testing purposes |
 | tabs | {id: string; label: string; content: ReactNode;}[] | Yes | undefined | An array of objects representing the individual tabs to display |
 | variant | string | Yes | 'default' | The predefined variant of Tabs to display. Current options are 'default', 'outline', and 'transparent' |
 
@@ -2229,6 +2285,7 @@ As with the button component, Toggle takes any other additional html attributes
 | ----------- | -------- | -------- | -------- | ----------- |
 | 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 |
+| dataTestId | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to the component for testing purposes |
 | 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 || label | string | Yes | 'Toggle on/off' | The **label** prop denotes the aria label to set for the 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. |
@@ -2299,6 +2356,7 @@ For accessibility purposes the **`TooltipContent`** component also takes an **`i
 | children | **`ReactNode`** | No |  | This contains the wrapped content that when hovered will cause the tooltip to display. |
 | className | **`string`** | Yes | **`relative inline-block`** | alternate css classes to add/change styling of the Tooltip (Not the TooltipContent) component. There is very little here wrt CSS classes, so will probably not be touched. |
 | delay | **`number`** | Yes | **`0`** | Sets a numeric value that delays the tooltip displaying by this number of milliseconds. Default value is 0, or no delay. |
+| dataTestId | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to the component for testing purposes |
 
 ### Props for the TooltipContent component
 
@@ -2307,6 +2365,7 @@ For accessibility purposes the **`TooltipContent`** component also takes an **`i
 | children | **`ReactNode	`** | No | | This contains the content to display inside the tooltip. |
 | className | **`string`** | Yes | See (1) below | Alternate CSS styling to change (or alter) the display position and/or style of the tooltip. See below for current css class values. |
 | position | **`string`** | Yes | **`undefined`** | Determines the position of the tooltip when displayed relative to the wrapped component. Default positioning is on the bottom-left, or southwest location. Other options are 'w', 'nw', 'n', 'ne', 'e', 'se', 's', and 'c' (center) |
+| dataTestId | **`string`** | Yes | undefined | A **'data-testid'** value that is applied to the component for testing purposes |
 
 
 1. Base CSS Classes