@dhasdk/simple-ui

v1.0.71

Published

14 days ago

This library was generated with [Nx](https://nx.dev) on React 19.1

Downloads

1,802

0High
0Medium
0Low

dha-sdk

simple-ui

This library was generated with Nx on React 19.1

This library is under active development and not ready for external production use

Changelog

1.0.71 - added the classNameIconContainer prop to allow for sizing of the icons used for the RadioGroup component.

1.0.70 - bug fix for onExpand handler in Accordion, added a separate onExpand handler to AccordionParent that is called with an index + boolean expanded.

1.0.69 - added a classNameIcon prop to RadioGroup to style the SVG icon used for radio input items. Also added the TextArea component and documentation.

1.0.68 - added a classNameLabelText prop to RadioGroup that styles the text only portion of the radio item

1.0.67 - corrected RadioGroup documentation re id type inside RadioOption

1.0.66 - added inline prop to RadioGroup, allows for a flex-row layout of RadioGroup items as opposed to the default flex-column layout

1.0.65 - changed label on Input component to a ReactNode type. Also updated aria-label handling logic to compensate (dev can enter aria-label manually, if not present and label is of type string, will use label as the aria-label).

1.0.64 - changed optionsLabel prop in Select to a ReactNode from string value

1.0.63 - added selected prop to the Select component

1.0.62 - fixed 'checked' and 'indeterminate' prop usage for CheckBox, updated documentation for CheckBox re their usage w/ CheckBox and CheckBoxGroup

1.0.61 - added selectedId prop to RadioGroup as well as updated documentation with the RadioOptions interface

1.0.60 - added classNameSvgLine and classNameIcon props to CheckBox the former to share duties with and more focus classNameSvg. The latter allows for positioning of the checkbox icon if needed.

1.0.59 - added method property to the RadioOption type for RadioGroup, allowing user to pass in a callback method for checked/unchecked state changes

1.0.58 - removed console.log statement from RadioGroup component

1.0.57 - added className prop to ProgressBar to style the outer div that is the container for the ProgressBar component.

1.0.56 - ProgressBar fix for z-level when showMarkers is false

1.0.55 - added classNameLabel to GroupCheckBox and CheckBox, added remaining className... props to ChecKBoxGroup, added customIcons prop to both CheckBox and CheckBoxGroup components.

1.0.54 - added showMarkers and classNameMarkerFalse to the ProgressBar component

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

1.0.49 - bug fix for Search layout

1.0.47/48 - bug fix for Search on dark backgrounds

1.0.46 - updated SideBarNav to allow option of back arrow or 'x' closing icons, plus added the props classNameBackIcon, classNameBackText, and classNameBackContainer

1.0.45 - updated BreadCrumbs to allow custom styling of separator icons + fix for additional icon styling

1.0.44 - updated BreadCrumbs to allow styling on last/current location of breadcrumb list

1.0.42/43 - updated Search component to include a variant prop with optional value of 'rounded'

1.0.41 - updated install instructions re Tailwind CSS usage, code cleanup on Search

1.0.40 - bug fix for Search component, extra border sometimes appearing on large breakpoint

1.0.39 - added onChange(status,string) => void prop to CheckBox & CheckBoxGroup

1.0.38 - changed Accordion index type to string | number

1.0.37 - bug fix on ellipsis / mobile view for Breadcrumbs

1.0.36 - bug fix on layout + classNameContainer prop for SideBarNav

1.0.35 - bug fix for animation on SideBarNav

1.0.34 - accessibility and layout fixes for SideBarNav

1.0.33 - update to Search & BreadCrumbs to fix a11y errors

1.0.32 - update to Search component such that results do not extend past bottom of viewable page

1.0.29/31 - allow children type in ExpandableText to be string | undefined

1.0.28 - added an ExpandabledText component

1.0.26 - bug fix for DatePicker component on Safari

1.0.25 - bug fix for Search component positioning

Back to Main Readme

Installation and Setup

From the terminal run the following command:

npm install @dhasdk/simple-ui

Integrate simple-ui into your local tailwind configuration

For tailwind-4
- Add @source '../../node_modules/@dhasdk/simple-ui'; (or similar) to your CSS file (tailwind-4 no longer has a tailwind.config.ts file)
For tailwind-3 (NOTE: This library is built with Tailwind 4, and may not work on a Tailwind 3 app)
- Add node_modules/@dhasdk/**/*.{js,jsx} (or similar) to the content block inside your tailwind.config.ts file.

Open the page that you are going to place the dhasdk/simple-ui component, and do the following:

At the top of the file, import your desired component from '@dhasdk', 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

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. | | classNameChildHeading | 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. | | 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. | | onExpand | (expand: boolean, index: number) => void | Yes | void | Calls the passed in handler with a boolean indicating whether this Child Accordion is expanded and the Child Accordions index value (0 based). Note: This handler uses a different interface than the one applied directly to Accordion. | | ...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. | | useBackground | boolean | Yes | true | This boolean value causes the accordion content block to use the same background as the accordion heading. When true, an hr is also present at the top of the content block to separate the heading from the content. This hr can be styled separately using the classNameHr prop. |

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. | | classNameContainer | string | Yes | undefined | CSS classes applied to the container div for the Accordion component. | | 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 | (expand: boolean) => void | Yes | void | Calls the passed in handler with a boolean indicating whether this Child Accordion is expanded. Note: This handler does not take or pass an index value like the AccordionParent component does. | | ...props | string | No | | takes additional props that are not specifically defined in the component, i.e. aria-label |

Example Usage

<AccordionParent 
    classNameChildHeading='bg-white' 
    classNameChildContent='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

Appointment Picker

The AppointmentPicker component allows a user to make a single selection from a list of multiple times.

This component takes multiple optional props in addition to any other html attributes a normal html element would use, for example an aria-tag.

Props for AppointmentPicker

| Prop | Type | Optional | Default | Description | | ----------- | -------- | -------- | -------- | -------------------------------------------- | | 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. | | label | string | Yes | undefined | text used as the label for the input, i.e. 'Pick a time (hourly)' above | | optionsLabel | string | Yes | 'Select a time' | appears as the label in the AppointmentPicker component, i.e. 'Select a time' above. Note, this is not the label above the component. | | setSelectedOption | (string) => void | No | undefined | calls the given function with the selected value if present, otherwise with name | | variant | string | Yes | undefined | The predefined variant of Select to display. Current options are 'default', 'fill', and 'outline' | | 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 AppointmentPicker component. For instance, the width prop is a good way to ensure that the button and drop down are of the same width. Pay attention to the default classes below. |

Base CSS Classes

outline-hidden outline-offset-0 flex justify-between items-center w-[292px] md:w-[343px] lg:w-[600px] h-14 border focus:outline-4 focus:mb-2 focus:outline-[#fa89f1] shadow-sm pl-4 pr-2 py-2 bg-white text-base md:text-lg font-medium text-gray-700 hover:bg-gray-50 border-[#b3b3b3] h-12 mt-1 font-["Arial"] 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 disabled:border-dha-mc-secondary-border disabled:border-2 fill: hover:bg-[#0c2c8e] text-white bg-[#092068] hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2 py-3 outline: bg-white text-[#808080] disabled:border-dha-mc-secondary-border disabled:text-dha-mc-checkbox-inactive

Example Usage

 <AppointmentPicker label="Pick a time (half-hour)" interval='half-hour' />

Dependencies

none

Top of Page

Badge

The badge component takes three required props, variant, subVariant, and child content.

Optional props are className, svgClasses, imagePath, imageAlt, and classNameImage.

As with the button component, this component also takes additional html attributes that when included are passed to the parent div.

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 | | ----------- | -------- | -------- | -------- | -------------------------------------------- | | children | ReactNode | No | | html and content that becomes the body of the Badge. | | variant | string | No | 'success ' | The predefined variant of Badge to display. UX designed variants are success, caution, danger, and disabled | | 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. |

Variants
- success
  - className: w-[79px] h-[26px] px-3 py-1 bg-[#d6f4d5] rounded-[40px] outline outline-1 -outline-offset-1 outline-[#387740] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0
  - classNameChildren: text-[#387740] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px
  - classNameImage: relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1
- caution
  - className: w-[79px] h-[26px] px-3 py-1 bg-[#fff1be] rounded-[40px] outline outline-1 -outline-offset-1 outline-[#966121] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0
  - classNameImage: relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1
  - classNameChildren: text-[#966222] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px}
- danger
  - className: w-[79px] h-[26px] px-3 py-1 bg-[#f4c2c2] rounded-[40px] outline outline-1 -outline-offset-1 outline-[#a22b23] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0
  - classNameImage: relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1
  - classNameChildren: text-[#A32C24] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px]
- disabled
  - className: w-[79px] h-[26px] px-3 py-1 rounded-[40px] outline outline-1 -outline-offset-1 outline-[#394150] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0
  - classNameImage: relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1
  - classNameChildren: text-[#394150] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px]

Example Usage

Default Variant

  <Badge
    aria-label="appropriate aria label here">
      Badge!
    </Badge>

caution Variant

  <Badge
    variant="caution"
    aria-label="appropriate aria label here">
      Badge!
    </Badge>

danger Variant

  <Badge
    variant="danger"
    aria-label="appropriate aria label here">
      Badge!
    </Badge>

Dependencies

none

Top of Page

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.

When the container or window is too narrow to display the full Breadcrumbs list, the middle items are truncated into an ellipsis.

The BreadCrumbs component takes in various props 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 classNameContainer takes a list of css classes that are applied to the enclosing nav element.

The routes prop when specified supplies the list of supplied paths + names that are used inside the BreadCrumbs component instead of the component attempting to auto-create a routes list.

If routes are not specified, the Breadcrumbs component will attempt to auto-generate and display its parent routes.

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. | | 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. |

| 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 | | variant | string | Yes | 'default' | Allows the user to enter a pre-defined variant that includes its own pre-defined styling, options are 'default' and 'bold'. |

Example Usage

With Auto Routes

  <BreadCrumbs />

Manually Specified Routes

  <Breadcrumbs 
    routes = 
      {[
        { name: 'Path 1', route: '/path1' },
        { name: 'Path 2', route: '/path2' },
        { name: 'Path 3', route: '/path3' },
      ]}
  />

Dependencies

none

Top of Page

Button

The button component as built takes in a number of optional props in addition to any other html attributes a normal html button would use, for example an aria tag.

A reference can also be created and passed to the button component, and the component will point the reference to the html button.

Props

| Prop | Type | Optional | Default | Description | | ----------- | -------- | -------- | -------- | ----------- | | children | ReactNode | Yes | | Content to display in the Button, overrides 'label' if both are present. | | className | string | Yes | (1) below | Class names to style component | | classNameIconLeft | string | Yes | mr-3 | Class names to style the span element that contains the left icon | | classNameIconRight | string | Yes | ml-3 | Class names to style the span element that contains the right icon | | classNameContent | string | Yes | grow-1 text-start | Class names to style the content block / body, i.e. the label | | classNameSelected | string | Yes | undefined | Class names to apply to the components if they are in the optional selected state, see selected below | | 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. | | iconPosition | 'left', 'right', 'both', 'iconOnly', undefined | Yes | undefined | Controls where the icon is positioned on the Button. Alternatively, iconLeft and iconRightcan be used above. | | label | string | Yes | | Display text for button. If 'children' is present, that is used instead | | onClick | () => void | Yes | | A click handler for the Button | | ...props | string | Yes | undefined | additional props that are not specifically defined in the component, i.e. aria-label | | type | string | Yes | 'button' | specifies the button type, and is one of 'button', 'submit', or 'reset' | | selected | boolean | Yes | false | when specified true, button will display selected state as described by classNameSelected. See example use in the SDK demo app with the 'Usage', 'Code', and 'Docs' buttons. | | variant | string | Yes | 'default' | CSS Button variant, available variants are 'default', 'filled', 'outline', and 'transparent' |

(1) classname defaults

Base CSS Classes
- inline-flex items-center justify-center whitespace-nowrap rounded-md ring-offset-background transition-colors focus-visible:outline-hidden font-["Arial"] disabled:pointer-events-none text-sm md:text-base lg:text-lg disabled:opacity-50 px-6 py-[8px] md:py-[12px] lg:py-[16px] h-[40px] md:h-[48px] lg:h-[56px]
Additional Classes per variant
- 'default' - border-2 border-gray-300 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 focus:border-black disabled:border-dha-mc-bottom-nav-background disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1
  - 'selected' - bg-gray-500 text-white
- 'filled' - rounded-md bg-[#092068] hover:bg-[#0c2c8e] text-white text-lg hover:text-white focus:shadow-[0px_0px_0px_3px_rgba(238,131,255,1.00)] active:bg-[#092068]/80 disabled:bg-[#e4e4e5] disabled:text-[#939194] disabled:border-[#e4e4e5]
- '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(238,131,255,1.00)] text-lg
- '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]

Example Usage

filled variant example

  <Button
    disabled={disabledState}
    label = {buttonName}
    onClick={handleButtonClick}
    variant='filled'
  />

outline variant example

  <Button
    disabled={disabledState}
    label = {buttonName}
    onClick={handleButtonClick}
    variant='outline'
  />

icon left on filled variant

  <Button
    disabled={disabledState}
    label = {buttonName}
    onClick={handleButtonClick}
    variant='filled'
    icon={<img src={filledIconLeft} alt='icon left' />}
    iconPosition='left'
  />

using selected option w/ filled variant

  <Button
    disabled={disabledState}
    label = {buttonName}
    onClick={setOpenUsage(!openUsage)}
    classNameSelected='bg-slate-200'
    selected={openUsage}
    variant='filled'
  />

two icons w/ custom css

  <Button
    className='justify-between w-[400px] px-3'
    onClick={handleClick}
    label='Two Icons w/ CSS'
    disabled={disabled}
    iconLeft={<img src={calendar} alt='calendar' className='size-[36px]' />}
    iconRight={<img src={chevronRight} alt='chevron' />}
  />

Dependencies

none

ButtonGroup

The ButtonGroup is a component that wraps a series of Button components, creating both a visual and functional grouping.

The ButtonGroup also allows the ability to pass common css classes to the individual Button components, while allowing individual Button components to still utilize their own custom/unique css classes.

The variants labeled default and column demonstrated in the examples below are UX defined variants.

Props

| Prop | Type | Optional | Default | Description | | ----------- | -------- | -------- | -------- | ----------- | | 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. |

Example Usage

default variant w/ 3 Buttons (ux styled)

  <ButtonGroup className='w-full'>
    <Button variant='outline' onClick={doSomething}>Secondary</Button>
    <Button variant='filled' onClick={doSomething}>Primary</Button>
    <Button variant='transparent' onClick={doSomething}>Tertiary</Button>
  </ButtonGroup>

default variant w/ 2 Buttons

  <ButtonGroup>
    <Button variant='outline' onClick={doSomething}>Secondary</Button>
    <Button variant='filled' onClick={doSomething}>Primary</Button>
  </ButtonGroup>

column variant w/ 3 Buttons

  <ButtonGroup variant='column'>
    <Button variant='outline' onClick={doSomething} >Secondary</Button>
    <Button variant='filled' onClick={doSomething} >Primary</Button>
    <Button variant='transparent' onClick={doSomething} >Tertiary</Button>
  </ButtonGroup>

column variant w/ 2 Buttons

  <ButtonGroup variant='column'>
    <Button variant='outline' onClick={doSomething}>Secondary</Button>
    <Button variant='filled' onClick={doSomething}>Primary</Button>
  </ButtonGroup>

use of common examples

  <ButtonGroup 
    className='w-full' 
    classNameButtons="border-2 border-green-500 bg-green-200 font-black"
    variant='custom'
    >
    <Button onClick={doSomething}>A</Button>
    <Button onClick={doSomething}>B</Button>
    <Button onClick={doSomething}>C</Button>
  </ButtonGroup>

use of custom class

  <ButtonGroup className='w-full' variant='custom'>
    <Button 
      className='border-2 border-green-500 bg-green-200 font-black'
       onClick={doSomething} 
      >A</Button>
    <Button onClick={doSomething}>B</Button>
    <Button onClick={doSomething}>C</Button>
  </ButtonGroup>

Dependencies

none

Top of Page

Card

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, classNameImage, 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 | | 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
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

  <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.

  <Card variant='imageLeft'
    imagePath={imagePath} 
    classNameImage="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

Top of Page

CharacterCounter

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 classNameOverLimitMessage) and message will change to inform the visitor of this.

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.

The children prop will be an input or textArea element, wrapped by CharacterCounter, and is what CharacterCounter will monitor.

Full list of props below

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. | | classNameMessage | string | Yes | | CSS classes to apply to the message text prior to the user exceeding the specified limit | | classNameOverLimitMessage | string | Yes | | CSS classes to apply to the message text after the user has exceeded the specified limit. | | altRemainingMessageText | string | Yes | 'remaining' | A string value containing an alternate message to display to the user as they type. If the user has typed 5 characters and is not over the limit, the default reads "5 remaining". | | altOverageMessageText | string | Yes | 'characters too many' | A string value containing an alternate message to display to the user they have exceeded the specified limit. If the user has typed 15 characters and is over the limit, the default reads "5 characters too many" in red text (with 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

Basic example

  <CharacterCounter 
      maxCharacters={15}>
    <Input size={10} />
  </CharacterCounter>

Using an altOverageMessageText and altRemainingMessageText

  <CharacterCounter 
      maxCharacters={15} 
      altOverageMessageText="CHARACTERS OVER THE LIMIT!"
      altRemainingMessageText="characters remaining, use them wisely!">
    <Input size={10} />
  </CharacterCounter>

Dependencies

none

Top of Page

CheckBox

A CheckBox is a component that can be either selected or de-selected allowing the user to control a value or selection. A group of CheckBox components can be used together to let the user select or deselect a series of related values.

CheckBoxGroup is a component that allows CheckBoxes to be placed in a hierarchical order with each individual CheckBox placed at a different "level". This allows a user to visually see the relationship between various checkbox items, in addition to seeing the state at various levels when different selections are made.

Note the use of the key attribute in the above examples. Without this, toggling between the various CheckBoxGroup examples would potential cause errors as the components could be sharing state. If you are having inconsistencies with these components and you are using more than one, try specifying a unique key attribute value.

The CheckBoxGroup component can be optionally used with any number of CheckBox components to control indented relationships between various individual CheckBoxes. This enables parent CheckBoxes being set to 'indeterminate' state when its various children are both checked and unchecked.

CheckBoxGroup also takes three props that are directly passed down to CheckBox, allowing you to specify any of these values in one place instead of in each instance of CheckBox. These three props are all boolean values, described below. They are fill, icon, and marker.

Note: Using checked or indeterminate on a CheckBox inside a CheckBoxGroup will only effect that CheckBox and will not have an effect on the child or parent CheckBoxes as is done when an individual CheckBox is manually clicked inside a CheckBoxGroup. This can for example place a CheckBox in a checked state leaving its children unchecked. If you wish to use checked or indeterminate on a CheckBox inside a CheckBoxGroup, it is up to the developer to manage the values for all CheckBoxes in that group on initial state.

Used by itself, CheckBox behaves as a normal checkbox component and can be used individually or in groups. It also takes the same attributes that a normal html input type="checkbox" would.

Props for CheckBoxGroup

| Prop | Type | Optional | Default | Description | | ----------- | -------- | -------- | -------- | ----------- | | bridgeParent | 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. | | className | string | Yes | 'flex items-center' | alternate css classes to add/change styling of the div that wraps the input element. Passed to all child CheckBox components.| | classNameIcon | string | Yes | '' | CSS classes that will be applied to the custom icon (non html default) that is the checkbox, indeterminate checkbox, or blank checkbox. Can be useful for positioning, etc. | | classNameInput | string | Yes | '' | alternate css classes to add/change styling of the input html element. Passed to all child CheckBox components.| | classNameLabel | string | Yes | 'inline-flex items-center gap-1 text-base md:text-lg' | alternate css classes to add/change styling of the label html element used by this CheckBox. Passed to all child CheckBox components.| | classNameSvg | string | Yes | 'w-4 h-7', if icon is true add ms-1 | This prop is applied to the global SVG itself, and is more appropriate for size and positioning | | classNameSvgLine | 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. Passed to all child CheckBox components. | | customIcons | map | Yes | default icons | A list of custom icons to use for checked, unchecked, and indeterminate states. See Custom Icons usage code example below. | | 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. | | showBranch | boolean | Yes | {true} | When true this will cause the normal relationship lines between CheckBoxes to appear. If it is false, the indentation will still exist between various levels, but the lines will be absent. In the above examples, compare 'Multi-Level' and 'showBranch false' to see the differences. |

Props for CheckBox

| Prop | Type | Optional | Default | Description | | ----------- | -------- | -------- | -------- | ----------- | | ariaLabel | string | Yes | 'CheckBox Component' | The aria-label to assign to this CheckBox | | checked | boolean | Yes | false | if present, checkbox is initially displayed in a 'checked' state. See above note for more information | | className | string | Yes | 'flex items-center' | alternate css classes to add/change styling of the div that wraps the input element. | | classNameIcon | string | Yes | '' | CSS classes that will be applied to the custom icon (non html default) that is the checkbox, indeterminate checkbox, or blank checkbox. Can be useful for positioning, etc. | | classNameInput | string | Yes | '' | alternate css classes to add/change styling of the input html element. | | classNameLabel | string | Yes | 'inline-flex items-center gap-1 text-base md:text-lg' | alternate css classes to add/change styling of the label html element used by this CheckBox. | | classNameSvg | string | Yes | 'w-4 h-7', if icon is true add ms-1 | This prop is applied to the global SVG itself, and is more appropriate for size and positioning | | classNameSvgLine | 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. | customIcons | map | Yes | default icons | A list of custom icons to use for checked, unchecked, and indeterminate states. See Custom Icons usage code example below. | | 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. | | indeterminate | boolean | Yes | false | if present, checkbox is initially displayed in an 'indeterminate' state. See above note for more information | | marker | boolean | Yes | {false} | When true this boolean will cause the normal checked checkbox to instead display an 'x' marker icon. | | ...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 | | value | string | Yes | 'on' | The value passed along if this CheckBox is checked. If checked, both the name and the value will be submitted as a name/value pair. |

Example Usage

Basic example

  <CheckBoxGroup key='1'>
    <CheckBox level={0} name='g1'>Group 1</CheckBox>
    <CheckBox level={1} name='g1i1'>group 1, item 1</CheckBox>
    <CheckBox level={1} name='g1i2'>group 1, item 2</CheckBox>
    <CheckBox level={2} name='h1i2i1'>group 1, item 2, item 1</CheckBox>
    <CheckBox level={2} name='g1i2i2'>group 1, item 2, item 2</CheckBox>
    <CheckBox level={1} name='h1i3'>group 1, item 3</CheckBox>
    <CheckBox level={0} name='g2'>Group 2</CheckBox>
    <CheckBox level={1} name='g2i1'>group 2, item 1</CheckBox>
    <CheckBox level={1} name='g2i2'>group 2, item 2</CheckBox>
    <CheckBox level={2} name='h2i2i1'>group 2, item 2, item 1</CheckBox>
  </CheckBoxGroup>

Using markers via the marker prop

  <CheckBoxGroup key='1' marker>
    <CheckBox level={0} name='g1'>Group 1</CheckBox>
    <CheckBox level={1} name='g1i1'>group 1, item 1</CheckBox>
    <CheckBox level={1} name='g1i2'>group 1, item 2</CheckBox>
    <CheckBox level={2} name='h1i2i1'>group 1, item 2, item 1</CheckBox>
    <CheckBox level={2} name='g1i2i2'>group 1, item 2, item 2</CheckBox>
    <CheckBox level={1} name='h1i3'>group 1, item 3</CheckBox>
    <CheckBox level={0} name='g2'>Group 2</CheckBox>
    <CheckBox level={1} name='g2i1'>group 2, item 1</CheckBox>
    <CheckBox level={1} name='g2i2'>group 2, item 2</CheckBox>
    <CheckBox level={2} name='h2i2i1'>group 2, item 2, item 1</CheckBox>
  </CheckBoxGroup>

Using with Custom Icons

  import checkedIcon from "../../assets/material-checked.svg";
  import blankIcon from "../../assets/material-blank.svg";
  import indeterminiteIcon from "../../assets/material-indeterminite.svg";

  <CheckBoxGroup key='1' 
    customIcons={{
      checked: checkedIcon,
      unchecked: blankIcon,
      indeterminate: indeterminiteIcon,
    }}
  >
    <CheckBox level={0} name='g1'>Group 1</CheckBox>
    <CheckBox level={1} name='g1i1'>group 1, item 1</CheckBox>
    <CheckBox level={1} name='g1i2'>group 1, item 2</CheckBox>
    <CheckBox level={2} name='h1i2i1'>group 1, item 2, item 1</CheckBox>
    <CheckBox level={2} name='g1i2i2'>group 1, item 2, item 2</CheckBox>
    <CheckBox level={1} name='h1i3'>group 1, item 3</CheckBox>
    <CheckBox level={0} name='g2'>Group 2</CheckBox>
    <CheckBox level={1} name='g2i1'>group 2, item 1</CheckBox>
    <CheckBox level={1} name='g2i2'>group 2, item 2</CheckBox>
    <CheckBox level={2} name='h2i2i1'>group 2, item 2, item 1</CheckBox>
  </CheckBoxGroup>

Dependencies

none

Top of Page

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 | | ----------- | -------- | -------- | -------- | -------------------------------------------- | | 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 | | value | string | Yes | | The date the component is currently set to, if not supplied, it defaults to the current date. |

Example Usage

Default Variant

  import dayjs from "dayjs";
  const [displayDate, setDisplayDate] = useState('');

  <DatePicker id={""} label={""} 
      value={dayjs().startOf("day").format("M-D-YYYY")} 
      onChange={setDisplayDate}/>

Dependencies

dayjs

Top of Page

ExpandableText

ExpandableText is a component with a div wrapper that takes in a children string value, and displays a default number of characters with a more button. When the button is clicked, the text is expanded, and an optional collapse button is then shown that can collapse the text back to its original sizing.

Props exist to style the container, the more button, the collapse button, to set the number of characters to display by default, as well as alternate text for each of the two buttons.

Props

| Prop | Type | Optional | Default | Description | | ----------- | -------- | -------- | -------- | -------------------------------------------- | | buttonText | string | Yes | 'more' | text label for the 'more' button | | children | string \| undefined | No | '' | text that this component truncates and displays | | className | string | Yes | '' | tailwind classes to style the component container with | | classNameCollapseButton | string | Yes | ml-2 text-blue-600 underline hover:text-blue-800 focus:outline-none | tailwind classes to style the collapse button | | classNameMoreButton | string | Yes | ml-2 text-blue-600 underline hover:text-blue-800 focus:outline-none | tailwind classes to style the more button | | 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

Default Variant

  <ExpandableText 
      collapseButton={true} 
      className='mt-4' 
      classNameCollapseButton='block mt-2 strong text-red-600'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </ExpandableText>

Dependencies

Top of Page

Input

The input component as built takes seven optional props (className, classNameLabel, required, label, labelBaseColor, labelInputcolor, and textShadow), in addition to any other html attributes a normal html form input would use, for example an aria tag.

A reference can also be created and passed to the input component, and the component will point the reference to the input.

Props

| Prop | Type | Optional | Default | Description | | ----------- | -------- | -------- | -------- | ----------- | | 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 | | 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 | ReactNode | Yes | '' | Can be a String or ReactNode, allows formatting inside the label. The aria-label value can be specified separately, or taken from label if of type string. aria-label is undefined otherwise. | | 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 | | error | boolean | Yes | false | boolean prop indicating if the current input is in an error state. if true, applies visual error formatting to the input component. | | mask | string | Yes | undefined | a text string used to define an input mask. using the provided mask, input will format the users input into the formatted mask. In the case that the user adds invalid input, it is ignored. Non letter/number characters are also automatically entered if a valid following character type is added instead. # represents an individual number character, and @ represents a letter. All other values are themselves. | | 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. Note, if aria-label is not specically set, will be derived from label if of type string | | 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) 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]

default
- base classes - hover:bg-dha-mc-pale-blue text-black hover:dha-mc-primary-text hover:border-dha-mc-secondary-border disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2 w-[90vw] lg:max-w-[25em]
- label classes - ms-2.5 text-base
- insetLabelClasses - absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto
outline
- base classes - 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 w-[35vw] min-w-min sm:max-w-[15em]
- label classes - ms-2.5 text-base
- insetLabelClasses - absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto
nonHover
- base classes - text-black disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2 w-[90vw] lg:max-w-[25em]
- label classes - ms-2.5 text-base
- insetLabelClasses - absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto

(2) Default classes for the label are absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

simple-ui

*This library is under active development and not ready for external production use*

Table of Contents

Changelog

Installation and Setup

Accordion

Props for AccordionParent

Props for Accordion

Example Usage

Dependencies

Appointment Picker

Props for AppointmentPicker

Example Usage

Dependencies

Badge

Props

Example Usage

Dependencies

BreadCrumbs

Props

Example Usage

Dependencies

Button

Props

Example Usage

Dependencies

ButtonGroup

Props

Example Usage

Dependencies

Card

Props

Example Usage

Dependencies

CharacterCounter

Props

Example Usage

Dependencies

CheckBox

Props for CheckBoxGroup

Props for CheckBox

Example Usage

Dependencies

DatePicker

Props

Example Usage

Dependencies

ExpandableText

Props

Example Usage

Dependencies

Input

Props

This library is under active development and not ready for external production use