@dhasdk/simple-ui 0.0.31 → 0.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +449 -233
  2. package/index.d.ts +7 -0
  3. package/index.js +6 -6
  4. package/index.mjs +1699 -1460
  5. package/lib/Accordion.d.ts +8 -4
  6. package/lib/Badge.d.ts +5 -6
  7. package/lib/Button.d.ts +1 -0
  8. package/lib/ButtonGroup.d.ts +7 -0
  9. package/lib/Input.d.ts +5 -2
  10. package/lib/List.d.ts +4 -1
  11. package/lib/Modal.d.ts +2 -1
  12. package/lib/SectionHeader.d.ts +2 -0
  13. package/lib/Shield.d.ts +12 -0
  14. package/lib/SideBarNav.d.ts +2 -0
  15. package/lib/Skeleton.d.ts +0 -2
  16. package/lib/Slider.d.ts +14 -0
  17. package/lib/Tooltip.d.ts +14 -0
  18. package/package.json +8 -3
  19. package/style.css +1 -1
package/README.md CHANGED
@@ -2,14 +2,16 @@
2
2
 
3
3
  This library was generated with [Nx](https://nx.dev) on React 18.x.
4
4
 
5
- ## <span style="color: orange;">*This library is under active development and not ready for production use\*</span>
5
+ ## <span style="color: orange;">*This library is under active development and not ready for production use outside of DHA WMT\*</span>
6
+
7
+
6
8
 
7
9
  ## Table of Contents
8
10
 
9
11
  - [Installation](#installation-and-setup)
10
12
  - [Accordion](#accordion)
11
13
  - [Badge](#badge)
12
- - [Breadcrumbs](#breadcrumbs)
14
+ - [BreadCrumbs](#breadcrumbs)
13
15
  - [Button](#button)
14
16
  - [Card](#card)
15
17
  - [CharacterCounter](#charactercounter)
@@ -18,8 +20,9 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
18
20
  - [List](#list)
19
21
  - [Modal](#modal)
20
22
  - [Pill](#pill)
21
- - [Section Header](#sectionheader)
23
+ - [SectionHeader](#sectionheader)
22
24
  - [Select](#select)
25
+ - [SideBarNav](#sidebarnav)
23
26
  - [Skeleton](#skeleton)
24
27
  - [Status](#status)
25
28
  - [Tabs](#tabs)
@@ -27,7 +30,7 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
27
30
 
28
31
  ## Quick Notes:
29
32
 
30
- - Some of these components use what are called **variants** from the **class-variance-authority** library. This allows pre-defined styles to be set, or 'variants', and those variants to be called by name via a prop when using the specified component. An example is the **Button** component below, and calling it using the 'DHAActive' style variant of that component (example code below).
33
+ - Some of these components use what are called **variants**. This allows pre-defined styles to be set, or 'variants', and those variants to be called by name via a prop when using the specified component. An example is the **Button** component below, and calling it using the 'filled' style variant of that component.
31
34
 
32
35
  <!-- I N S T A L L A T I O N ----------------------------------------------------------------------------------- -->
33
36
 
@@ -75,10 +78,13 @@ Finally, if Accordion props are specified inside the parent component, those val
75
78
  | iconAccordionOpened & iconAccordionClosed | ReactNode | Yes | N/A | custom icons to display for opened and closed state. See usage example above for a demonstration. |
76
79
  | 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. |
77
80
  | 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. |
78
- | className | string | Yes | undefined | CSS classes applied to the container div for the **AccordionParent** component. |
81
+ | classNameContainer | string | Yes | undefined | CSS classes applied to the container div for the **AccordionParent** component. |
82
+ | 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. |
83
+ | 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. |
79
84
  | ...props | string | No | | takes additional props that are not specifically defined in the component, i.e. aria-label |
80
- | rounded | boolean | Yes | false | This boolean value indicates whether to display rounded corners or not. By using this prop vs custom classes, only the top of the heading is rounded in an opened state, and only the bottom of the content block is rounded also. |
85
+ <!-- | rounded | boolean | Yes | false | This boolean value indicates whether to display rounded corners or not. By using this prop vs custom classes, only the top of the heading is rounded in an opened state, and only the bottom of the content block is rounded also. | -->
81
86
  | 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. |
87
+ | 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. |
82
88
  | variant | string | Yes | 'default' | currently unused |
83
89
 
84
90
  ### Props for Accordion
@@ -88,16 +94,20 @@ Finally, if Accordion props are specified inside the parent component, those val
88
94
  | children | ReactNode | No | undefined | This contains the body of the **Accordion** content. |
89
95
  | chevron | boolean | Yes | undefined | If true, displays chevron icons for open/closed status, otherwise displays plus and minus icons. |
90
96
  | iconAccordionOpened & iconAccordionClosed | ReactNode | Yes | N/A | custom icons to display for opened and closed state. See usage example above for a demonstration. |
91
- | 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. |
92
- | 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. |
93
- | className | string | Yes | undefined | CSS classes applied to the container div for the **Accordion** component. |
97
+ | classNameContainer | string | Yes | undefined | CSS classes applied to the container div for the **Accordion** component. |
98
+ | classNameHeading | string | Yes | CSS classes to apply to the child Accordion component headings. |
99
+ | classNameContent | string | No | N/A | CSS classes to apply to the Accordion component content body. |
100
+ | 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. |
101
+ | 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. |
102
+ | index | number | yes | undefined | optional index value for a specific accordion in the stack. if not present, label is used. |
103
+ | onExpand | (setOpen: CallbackFunction) => void | Yes | undefined | Callback function that is executed when Accordin is expanded. |
94
104
  | ...props | string | No | | takes additional props that are not specifically defined in the component, i.e. aria-label |
95
- | rounded | boolean | Yes | false | This boolean value indicates whether to display rounded corners or not. By using this prop vs custom classes, only the top of the heading is rounded in an opened state, and only the bottom of the content block is rounded also. |
105
+ <!-- | rounded | boolean | Yes | false | This boolean value indicates whether to display rounded corners or not. By using this prop vs custom classes, only the top of the heading is rounded in an opened state, and only the bottom of the content block is rounded also. | -->
96
106
  | 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. |
107
+ | 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. |
97
108
  | variant | string | Yes | 'default' | currently unused |
98
109
 
99
110
 
100
-
101
111
  ### Example Usage
102
112
 
103
113
  ```jsx
@@ -132,7 +142,7 @@ Finally, if Accordion props are specified inside the parent component, those val
132
142
 
133
143
  The **badge** component takes three required props, **variant**, **subVariant**, and **child** content.
134
144
 
135
- Optional props are **className**, **classNameSvg**, **imagePath**, **imageAlt**, and **classNameImage**.
145
+ Optional props are **className**, **svgClasses**, **imagePath**, **imageAlt**, and **classNameImage**.
136
146
 
137
147
  As with the button component, this component also takes additional html attributes that when included are passed to the parent div.
138
148
 
@@ -142,28 +152,31 @@ This div is also styled using the tailwind **`twMerge()`** utility, so custom cl
142
152
 
143
153
  | Prop | Type | Optional | Default | Description |
144
154
  | ----------- | -------- | -------- | -------- | -------------------------------------------- |
145
- | children | ReactNode | No | | html and content that becomes the body of the Badge. |
146
- | subVariant | string | No | See **(1)** below | The predefined variant of Badge to display. |
147
- | variant | string | No | See **(1)** below | The predefined variant of Badge to display. UX designed variants are **go**, **hazard**, and **warning** |
148
- | 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 |
149
- | imageAlt | string | See Comment | undefined | When an imagePath is specified, please specify an imageAlt that can be used for accessibility purposes. |
150
- | classNameImage | string | Yes | undefined | Alternate CSS classes that are applied to the image for variant type media. |
151
- | imagePath | string | See Comment | undefined | When variant is of type "media", an imagePath has to be specified that the component can load and display. |
152
- | classNameSvg | string | Yes | (2) below | alternate classes to apply style to the svg icons used in the Badge component for type icon. Applied using twMerge, and will reliabily overwrite any default CSS classes. |
153
-
154
-
155
- 1. Variants --> subVariants
156
- - default --> default, gray, red, yellow, green, blue
157
- - warning **UX Variant** --> half, full
158
- - hazard **UX Variant** --> half, full,
159
- - go **UX Variant** --> half, full
160
- - icon --> default, gray, red, yellow, green, blue
161
- - media --> default, gray, green
162
-
163
- 2. classNames per variant default
164
- - default --> **`mx-2 inline-flex items-center rounded-md bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-400/20`**
165
- - icon --> **`inline-flex items-center gap-x-1.5 rounded-full bg-gray-500 px-2 py-1 text-xs font-medium text-gray-700`**
166
- - media --> **`w-[250px] mx-2 border-l-8 border-black grid grid-cols-6 rounded-md bg-gray-400/10 pr-2 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-400/20 overflow-hidden`**
155
+ | children | ReactNode | No | | html and content that becomes the body of the Badge. |
156
+ | variant | string | No | 'success ' | The predefined variant of Badge to display. UX designed variants are **success**, **caution**, **danger**, and **disabled** |
157
+ | 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 |
158
+ | 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. |
159
+ | classNameImage | string | Yes | See **(3)** below | Alternate CSS classes that are applied to the image for variant type media. |
160
+ | icon | ReactNode | Yes | undefined | An alternate icon to use for the instance of this Badge |
161
+ | iconAlt | string | Yes | undefined | When an imagePath is specified, please specify an imageAlt that can be used for accessibility purposes. |
162
+
163
+ 1. Variants
164
+ - success
165
+ - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#d6f4d5] rounded-[40px] outline outline-1 outline-offset-[-1px] 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`**
166
+ - classNameChildren: **`text-[#387740] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px`**
167
+ - 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`**
168
+ - caution
169
+ - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#fff1be] rounded-[40px] outline outline-1 outline-offset-[-1px] 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`**
170
+ - 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`**
171
+ - classNameChildren: **`text-[#966222] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px}`**
172
+ - danger
173
+ - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#f4c2c2] rounded-[40px] outline outline-1 outline-offset-[-1px] 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`**
174
+ - 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`**
175
+ - classNameChildren: **`text-[#A32C24] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px]`**
176
+ - disabled
177
+ - className: **`w-[79px] h-[26px] px-3 py-1 rounded-[40px] outline outline-1 outline-offset-[-1px] 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`**
178
+ - 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`**
179
+ - classNameChildren: **`text-[#394150] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px]`**
167
180
 
168
181
 
169
182
 
@@ -172,48 +185,31 @@ This div is also styled using the tailwind **`twMerge()`** utility, so custom cl
172
185
  Default Variant
173
186
 
174
187
  ```jsx
175
- <Badge ref={ref}
176
- variant="default"
177
- subVariant="blue"
188
+ <Badge
178
189
  aria-label="appropriate aria label here">
179
190
  Badge!
180
- </Badge>
191
+ </Badge>
181
192
  ```
182
193
 
183
- icon Variant
194
+ caution Variant
184
195
 
185
196
  ```jsx
186
- <Badge ref={ref}
187
- variant="icon"
188
- subVariant="blue"
197
+ <Badge
198
+ variant="caution"
189
199
  aria-label="appropriate aria label here">
190
200
  Badge!
191
- </Badge>
201
+ </Badge>
192
202
  ```
193
- media Variant
194
-
195
- ```jsx
196
- <Badge ref={ref} variant="media"
197
- subVariant="blue"
198
- imagePath="/src/assets/Doctor.png"
199
- aria-label="health professional icon">
200
- <h5 className='text-sm font-bold my-2'>Flu Season!</h5>
201
- <p className="mb-2">Don't be caught unprepared. </p>
202
- </Badge>
203
- ```
204
- go Variant
203
+ danger Variant
205
204
 
206
205
  ```jsx
207
206
  <Badge
208
- className="text-left "
209
- variant='go'
210
- subVariant='full
211
- >Lorem ipsum dolor sit amet, consectetur adipiscing
212
- elit, sed do eiusmod tempor incididunt ut labore
213
- et dolore magna aliqua</Badge>
207
+ variant="danger"
208
+ aria-label="appropriate aria label here">
209
+ Badge!
210
+ </Badge>
214
211
  ```
215
212
 
216
-
217
213
  ### Dependencies
218
214
 
219
215
  **_none_**
@@ -223,17 +219,17 @@ go Variant
223
219
 
224
220
  <!-- B R E A D C R U M B S ------------------------------------------------------------------------------ -->
225
221
 
226
- ## Breadcrumbs
222
+ ## BreadCrumbs
227
223
 
228
- 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.
224
+ 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.
229
225
 
230
- The Breadrcumbs component takes in various props (`className`, `containerClassName`, `variant`, `auto`, and `separator`), in addition to any other html attributes a normal NAV element would use.
226
+ The BreadCrumbs component takes in various props (`className`, `classNameContainer`, `variant`, `auto`, and `separator`), in addition to any other html attributes a normal NAV element would use.
231
227
 
232
228
  A `ref` can also be created and assigned to the button component, and the component will point the reference to the html nav element.
233
229
 
234
230
  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.
235
231
 
236
- The `containerClassName` takes a list of css classes that are applied to the enclosing `nav` element.
232
+ The `classNameContainer` takes a list of css classes that are applied to the enclosing `nav` element.
237
233
 
238
234
  Finally, the `separator` prop is a string value that represents the separator used between bread crumbs. The default value is a greater than sign, >.
239
235
 
@@ -250,14 +246,12 @@ Full list of props below
250
246
  | separator | string | Yes | > | A string separator value to place between the separate breadcrumbs. The default value is '>' |
251
247
  | variant | string | Yes | | Allows the user to enter a pre-defined variant that includes its own pre-defined styling. |
252
248
 
253
-
254
-
255
249
  ### Example Usage
256
250
 
257
251
  Default Variant
258
252
 
259
253
  ```jsx
260
- <Breadrcumbs />
254
+ <BreadCrumbs />
261
255
  ```
262
256
 
263
257
 
@@ -271,7 +265,7 @@ Default Variant
271
265
 
272
266
  ## Button
273
267
 
274
- The **button** component as built takes in three custom optional props (variant, size, className), in addition to any other html attributes a normal html button would use, for example an aria tag.
268
+ 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.
275
269
 
276
270
  A reference can also be created and passed to the button component, and the component will point the reference to the html button.
277
271
 
@@ -281,47 +275,138 @@ A reference can also be created and passed to the button component, and the comp
281
275
  | ----------- | -------- | -------- | -------- | ----------- |
282
276
  | children | ReactNode | Yes | | Content to display in the Button, overrides 'label' if both are present. |
283
277
  | className | string | Yes | **(1) below** | Class names to style component |
278
+ | classNameSelected | string | Yes | undefined | Class names to apply to the components if they are in the optional selected state, see **selected** below |
279
+ | icon | ReactNode | Yes | undefined | image, icon, etc. to use for left or right icon as defined by **`iconPosition`** |
280
+ | iconPosition | 'left', 'right', 'iconOnly', undefined | Yes | | indicates the location for icon if specified |
284
281
  | label | string | Yes | | Display text for button. If 'children' is present, that is used instead |
285
282
  | onClick | () => void | Yes | | A click handler for the Button |
286
283
  | ...props | string | Yes | undefined | additional props that are not specifically defined in the component, i.e. aria-label |
287
284
  | type | string | Yes | 'button' | specifies the button type, and is one of 'button', 'submit', or 'reset' |
285
+ | 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. |
288
286
  | variant | string | Yes | 'default' | CSS Button variant, available variants are 'default', 'filled', 'outline', and 'transparent' |
289
287
 
290
-
291
-
292
288
  **(1) classname defaults**
293
289
 
294
290
  - Base CSS Classes
295
291
 
296
- - **`inline-flex items-center justify-center whitespace-nowrap rounded-md ring-offset-background transition-colors focus-visible:outline-none font-[`Arial`] disabled:pointer-events-none text-sm md:text-base lg:text-lg disabled:opacity-50 px-6 py-[12px] md:py-[14px] lg:py-[16px]`**
292
+ - **`inline-flex items-center justify-center whitespace-nowrap rounded-md ring-offset-background transition-colors focus-visible:outline-none font-["Arial"] disabled:pointer-events-none text-sm md:text-base lg:text-lg disabled:opacity-50 px-6 py-[8px] md:py-[12px] lg:py-[16px] h-[40px] md:h-[48px] lg:h-[56px]`**
297
293
 
298
294
  - Additional Classes per variant
299
- - 'default' - **`rounded-md bg-gray-200 hover:bg-slate-400 text-black text-lg hover:text-white hover:border-slate-600 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1`**
300
- - 'filled' - **`rounded-md bg-[#092068] hover:bg-[#0c2c8e] text-white text-lg hover:text-white focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] active:bg-[#092068]/80 disabled:bg-[#e4e4e5] disabled:text-[#939194] disabled:border-[#e4e4e5] disabled:border-2 lg:h-14`**
301
- - 'outline' - **`rounded-md border-[#092068] bg-white border-2 text-[#092068] text-lg disabled:border-dha-mc-secondary-border disabled:text-[#939194] hover:bg-[#d1dbfb] active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] lg:h-14`**
302
- - 'transparent' - **`rounded-md text-lg text-[#092068] hover:bg-[#d1dbfb] active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] disabled:text-[#939194] w-[157px] md:w-[163px] lg:w-[169px] h-12 md:h-[52px] lg:h-14`**
295
+ - '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`**
296
+ - 'selected' - **`bg-gray-500 text-white`**
297
+ - '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]`**
298
+ - '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`**
299
+ - '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]`**
303
300
 
304
301
 
305
302
  ### Example Usage
306
303
 
307
- Basic example
304
+ filled variant example
308
305
 
309
306
  ```jsx
310
- <Button ref={ref} variant="MedCard"
311
- onClick={console.log('Clicked!')}
312
- label='Click Me!' />
307
+ <Button
308
+ disabled={disabledState}
309
+ label = {buttonName}
310
+ onClick={handleButtonClick}
311
+ variant='filled'
312
+ />
313
313
  ```
314
314
 
315
- Using an alternate varint, className, and aria-label
315
+ outline variant example
316
316
 
317
317
  ```jsx
318
+ <Button
319
+ disabled={disabledState}
320
+ label = {buttonName}
321
+ onClick={handleButtonClick}
322
+ variant='outline'
323
+ />
324
+ ```
318
325
 
319
- <Button ref={ref} variant="MedCard"
320
- onClick={console.log('Clicked!')}
321
- className='px-10 py-6'
322
- aria-label='Show example pop-up'
323
- >
324
- Click Me!</Button>
326
+ icon left on filled variant
327
+
328
+ ```jsx
329
+ <Button
330
+ disabled={disabledState}
331
+ label = {buttonName}
332
+ onClick={handleButtonClick}
333
+ variant='filled'
334
+ icon={<img src={filledIconLeft} alt='icon left' />}
335
+ iconPosition='left'
336
+ />
337
+ ```
338
+
339
+ using selected option w/ filled variant
340
+
341
+ ```jsx
342
+ <Button
343
+ disabled={disabledState}
344
+ label = {buttonName}
345
+ onClick={setOpenUsage(!openUsage)}
346
+ classNameSelected='bg-slate-200'
347
+ selected={openUsage}
348
+ variant='filled'
349
+ />
350
+ ```
351
+
352
+
353
+ ### Dependencies
354
+
355
+ **_none_**
356
+
357
+ <!-- B U T T O N G R O U P ------------------------------------------------------------------------------ -->
358
+
359
+ ## ButtonGroup
360
+
361
+ The **ButtonGroup** is a component that wraps a series of **Button** components, creating both a visual and functional grouping.
362
+
363
+ 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.
364
+
365
+ A reference can also be created and passed to the button component, and the component will point the reference to the html button.
366
+
367
+ ### Props
368
+
369
+ | Prop | Type | Optional | Default | Description |
370
+ | ----------- | -------- | -------- | -------- | ----------- |
371
+ | children | ReactNode | Yes | | This contains one or more Button components that comprise this ButtonGroup. |
372
+ | className | string | Yes |'' | This prop applies the given classNames to the DIV that wraps and comprises the ButtonGroup component. |
373
+ | 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. |
374
+
375
+
376
+ ### Example Usage
377
+
378
+ simple example
379
+
380
+ ```jsx
381
+ <ButtonGroup className='w-full'>
382
+ <Button>A</Button>
383
+ <Button>B</Button>
384
+ <Button>C</Button>
385
+ </ButtonGroup>
386
+ ```
387
+
388
+ use of common examples
389
+
390
+ ```jsx
391
+ <ButtonGroup
392
+ className='w-full'
393
+ classNameButtons="border-2 border-green-500 bg-green-200 font-black">
394
+ <Button>A</Button>
395
+ <Button>B</Button>
396
+ <Button>C</Button>
397
+ </ButtonGroup>
398
+ ```
399
+
400
+ use of custom class
401
+
402
+ ```jsx
403
+ <ButtonGroup className='w-full'>
404
+ <Button
405
+ className='border-2 border-green-500 bg-green-200 font-black'
406
+ >A</Button>
407
+ <Button>B</Button>
408
+ <Button>C</Button>
409
+ </ButtonGroup>
325
410
  ```
326
411
 
327
412
 
@@ -338,7 +423,7 @@ Using an alternate varint, className, and aria-label
338
423
 
339
424
  Cards contain content or information on a specific topic, often with a relevant image.
340
425
 
341
- The **Card** component as built takes in various props (variant, variantStyle, imagePath, imageClassname, imageInset, alt, ariaLabel, and children), in addition to any other html attributes a normal html button would use, for example an **`aria-label`** tag.
426
+ 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.
342
427
 
343
428
  A **`ref`** can also be created and assigned to the **Card** component, and the component will point the reference to the outer html DIV.
344
429
 
@@ -354,8 +439,8 @@ Full list of props below
354
439
  | children | ReactNode | No | | Content to display in the Card aside from the image |
355
440
  | ariaLabel | string | Yes | 'card component' | This is the aria-label applied to the parentDIV element in the Card component. |
356
441
  | className | string | Yes | (1) below | Class names to style component |
357
- | imageInset | string | Yes | | A boolean value indicating whether the image inside the card should be inset or not. See above for functional examples. |
358
442
  | 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. |
443
+ | imageInset | string | Yes | | A boolean value indicating whether the image inside the card should be inset or not. See above for functional examples. |
359
444
  | ...props | string | Yes | undefined | additional props that are not specifically defined in the component, i.e. aria-label |
360
445
  | 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. |
361
446
  | variantStyle | string | Yes | 'default' | Optoins are 'default' and 'outline' |
@@ -387,7 +472,7 @@ Using an alternate varint, custom css, etc.
387
472
  ```jsx
388
473
  <Card variant='imageLeft'
389
474
  imagePath={imagePath}
390
- imageClassname="rounded-lg"
475
+ classNameImage="rounded-lg"
391
476
  variantStyle="outline"
392
477
  alt="Doctor wearing face mask"
393
478
  imageInset>
@@ -397,6 +482,7 @@ Using an alternate varint, custom css, etc.
397
482
  </Card>
398
483
  ```
399
484
 
485
+
400
486
  ### Dependencies
401
487
 
402
488
  **_none_**
@@ -409,7 +495,7 @@ Using an alternate varint, custom css, etc.
409
495
 
410
496
  ## CharacterCounter
411
497
 
412
- The **CharacterCounter** component is one that you use to wrap an Input or TextArea component or element to inform a user of the number of characters they have typed. If the user goes over the specified limit the message style (further styling can be specified via the prop **overLimitMessageClassName**) and message will change to inform the visitor of this.
498
+ 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.
413
499
 
414
500
  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.
415
501
 
@@ -427,7 +513,7 @@ Full list of props below
427
513
  | classNameMessage | string | Yes | | CSS classes to apply to the message text prior to the user exceeding the specified limit |
428
514
  | classNameOverLimitMessage | string | Yes | | CSS classes to apply to the message text after the user has exceeded the specified limit. |
429
515
  | 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". |
430
- | altOverageMessageText | string | Yes | 'characters too many' | A string value containing an alternate message to display to the user they have exceeded the specified limit. If the user has typed 15 characters and is over the limit, the default reads "5 characters too many" in red text (with dfeault overLimitMessageClassName). |
516
+ | 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). |
431
517
 
432
518
 
433
519
  ### Example Usage
@@ -468,15 +554,15 @@ DatePicker is an input that can be set typing or clicking on the day of the week
468
554
 
469
555
  The DatePicker component as built takes in various props (id, label, value, onChange)
470
556
 
557
+
471
558
  ### Props
472
559
 
473
560
  | Prop | Type | Optional | Default | Description |
474
561
  | ----------- | -------- | -------- | -------- | -------------------------------------------- |
475
562
  | id | string | No | | An ID to differentiate/target the component. |
476
563
  | label | string | No | | A label for the component |
477
- | value | string | No | | The date the component is currently set to. |
478
- | onChange | (date: string) => void \| null | No | | Handler function to be fed to the component, executed when the date changes |
479
-
564
+ | onChange | (date: string) => void \| No | undefined | Handler function to be fed to the component, executed when the date changes |
565
+ | value | string | Yes | | The date the component is currently set to, if not supplied, it defaults to the current date. |
480
566
 
481
567
  ### Example Usage
482
568
 
@@ -504,7 +590,7 @@ Default Variant
504
590
 
505
591
  ## Input
506
592
 
507
- The **input** component as built takes seven optional props (className, labelClassName, 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.
593
+ 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.
508
594
 
509
595
  A reference can also be created and passed to the input component, and the component will point the reference to the input.
510
596
 
@@ -513,9 +599,13 @@ A reference can also be created and passed to the input component, and the compo
513
599
  | Prop | Type | Optional | Default | Description |
514
600
  | ----------- | -------- | -------- | -------- | ----------- |
515
601
  | className | string | Yes | **(1) below** | pass any css class names to add/change styling
516
- | label | string | Yes | '' | string value of label, blank for no label |
517
- | 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 |
518
602
  | classNameLabel | string | Yes | **(2) below** | pass any css class names to add/change styling for the input label |
603
+ | classNameRequired | string | Yes | | |
604
+ | insetLabel | boolean | Yes | false | indicates whether the label is inset into the border or resides above the input component |
605
+ | label | string | Yes | '' | string value of label, blank for no label |
606
+ | 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** |
607
+ | 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. |
608
+ | 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. |
519
609
  | placeHolder | string | Yes | Yes | | sets the placeholder text inside the input element |
520
610
  | ...props | string | Yes | | takes additional props that are not specifically defined in the component, i.e. aria-label |
521
611
  | required | boolean | Yes | | if specified, a red asterisk is prepended to the label, and the required attribute is set to true |
@@ -525,9 +615,23 @@ A reference can also be created and passed to the input component, and the compo
525
615
 
526
616
  **(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]`**
527
617
 
618
+ - **default**
619
+ - 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]`**
620
+ - label classes - **`ms-2.5 text-base`**
621
+ - insetLabelClasses - **`absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto`**
622
+ - **outline**
623
+ - 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]`**
624
+ - label classes - **`ms-2.5 text-base`**
625
+ - insetLabelClasses - **`absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto`**
626
+ - **nonHover**
627
+ - 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]`**
628
+ - label classes - **`ms-2.5 text-base`**
629
+ - insetLabelClasses - **`absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto`**
528
630
 
529
631
  **(2)** Default classes for the label are **`absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto`**
530
632
 
633
+ **(3)** Default classes for the required asterisk **`absolute text-red-500 ms-0.5 -mt-1`**
634
+
531
635
  ### Additional Properties & Attributes
532
636
 
533
637
  This component as mentioned also takes any other property or attribute that a normnal input form field would take, including the **required** property. Setting this property to true will not only requires this input field to have a value for form completion, but also adds an asterisk to the beginning of the label.
@@ -541,6 +645,7 @@ This component as mentioned also takes any other property or attribute that a no
541
645
  label="Default Input"
542
646
  placeholder="placeholder text here"
543
647
  labelBaseColor="#f5f5f5"
648
+ insetLabel={true}
544
649
  />
545
650
  ```
546
651
 
@@ -553,12 +658,25 @@ This component as mentioned also takes any other property or attribute that a no
553
658
  className="rounded-lg border-[#0256ab] bg-[#caecf5]"
554
659
  labelBaseColor="#f5f5f5"
555
660
  labelInputColor="#caecf5"
556
- labelClassName="text-[#0256ab]"
661
+ classNameLabel="text-[#0256ab]"
662
+ insetLabel={true}
557
663
  required
558
664
  textShadow={true}
559
665
  />
560
666
  ```
561
667
 
668
+ #### Mask example
669
+
670
+ ```jsx
671
+ <Input
672
+ label='Phone Number'
673
+ placeholder='(###) ###-####'
674
+ mask='(###) ###-####'
675
+ error={errorState}
676
+ disabled={disabledState}
677
+ className="mx-2 max-w-[15em] md:max-w-[20em] lg:max-w-[25em]"
678
+ />
679
+ ```
562
680
 
563
681
  ### Dependencies
564
682
 
@@ -571,7 +689,7 @@ This component as mentioned also takes any other property or attribute that a no
571
689
 
572
690
  ## List
573
691
 
574
- The **List** component is a component that creates a list of items, ordered or unordered based on the information the developer feeds to the component. Like other components, it takes in various props for configuration. Possible props are items, children, className, withDividers, dividerColorClass, itemClassName, variant, isDecimal and isDisc. These props are all optional and each will significantly change how the component looks. If the items prop is used, the component takes in an array of type ListItemProps, if the children prop is used, any react component can be fed to the List directly as a child. With respect to CSS, specified classnames are combined using **`twMerge`**/**`cn`**, so prior values are reliably overwritten.
692
+ The **List** component is a component that creates a list of items, ordered or unordered based on the information the developer feeds to the component. Like other components, it takes in various props for configuration. Possible props are items, children, className, withDividers, classNameDividerColor, classNameItem, variant, isDecimal and isDisc. These props are all optional and each will significantly change how the component looks. If the items prop is used, the component takes in an array of type ListItemProps, if the children prop is used, any react component can be fed to the List directly as a child. With respect to CSS, specified classnames are combined using **`twMerge`**/**`cn`**, so prior values are reliably overwritten.
575
693
 
576
694
  ### Props
577
695
 
@@ -586,10 +704,13 @@ The **List** component is a component that creates a list of items, ordered or u
586
704
  | classNameItem | string | Yes | undefined | takes additional classnames to add/change styling of the items within the list |
587
705
  | 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 |
588
706
  | isDisc | boolean | Yes | false | if true, this prob will change the list to be unordered, placing bullet points next to each item |
707
+ | 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'. |
708
+ | isRomanNumeral | boolean | false | if true, this prop will change the list indicators to be roman numerals, placing a numeral next to each item starting with 'i'. **note:** roman numbers are currently only supported up to the decimal value 12. |
709
+ | isInline | boolean | false | if true, this prop will change the list to be inline, placing each item next to each other horizontally instead of stacking them vertically. |
589
710
 
590
711
  ### Example Usage
591
712
 
592
- Usage can be viewed inside the storybook app (**`npm run storybook`**), and examples of array and children implementations are shown below.
713
+ Usage can be viewed inside the **sdk component demo app**, and examples of array and children implementations are shown below.
593
714
 
594
715
  #### Array fed to decimal list with dividers:
595
716
 
@@ -633,8 +754,43 @@ Usage can be viewed inside the storybook app (**`npm run storybook`**), and exam
633
754
  </List>
634
755
  ```
635
756
 
636
- <!-- M O D A L --------------------------------------------------------------------------- -->
637
757
 
758
+ #### Roman Numeral example
759
+
760
+ ```jsx
761
+ <List isRomanNumeral header="List with roman numeral indicators">
762
+ <ListItem>
763
+ <img
764
+ src='/mobile_apps/sdk-component-demo/src/assets/first-aid-kit.svg'
765
+ alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 pb-1 inline'
766
+ />
767
+ <p className='inline'>icon</p>
768
+ </ListItem>
769
+ <ListItem>
770
+ <img
771
+ src='/mobile_apps/sdk-component-demo/src/assets/heartbeat.svg'
772
+ alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 pb-1 inline'
773
+ />
774
+ <p className='inline'>icon</p>
775
+ </ListItem>
776
+ <ListItem>
777
+ <img
778
+ src='/mobile_apps/sdk-component-demo/src/assets/pill.svg'
779
+ alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 pb-1 inline'
780
+ />
781
+ <p className='inline'>icon</p>
782
+ </ListItem>
783
+ <ListItem>
784
+ <img
785
+ src='/mobile_apps/sdk-component-demo/src/assets/prescription.svg'
786
+ alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 pb-1 inline'
787
+ />
788
+ <p className='inline'>icon</p>
789
+ </ListItem>
790
+ </List>
791
+ ```
792
+
793
+ <!-- M O D A L --------------------------------------------------------------------------- -->
638
794
 
639
795
  [Top of Page](#table-of-contents)
640
796
 
@@ -660,14 +816,23 @@ Full list of props below
660
816
  | 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. |
661
817
  | onClose | () => void() | No | | This is the close handler for the Modal component. |
662
818
  | title | string | No | | This is the title to display in the Modal component. |
663
- | className | string | Yes | | Alternate CSS classnames to apply to the Modal component. twMerge is used to apply these classes, so they reliably overwrite existing styles. |
664
- | clickOutsideCloses | boolean | Yes | | When true, any mouse click outside of the Modal will close the Modal component. |
665
- | 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. |
666
- | closeButtonText | string | Yes | | The string value to display in the Close button |
667
- | continueButton | boolean | Yes | | When true, a 'Continue' button is displayed in the Modal along with a 'Close' button |
819
+ | blurLevel | 'sm', 'md', 'lg', 'xl', '2xl', '3xl' | Yes | undefined | sets backdrop blur behind the modal |
820
+ | 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. |
821
+ | clickOutsideCloses | boolean | Yes | false | When true, any mouse click outside of the Modal will close the Modal component. |
822
+ | closeButton | boolean | Yes | true | if true, a close button is presented in the modal |
823
+ | closeButtonText | string | Yes | | The string value to display in the Close button |
824
+ | 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. |
825
+ | continueButton | boolean | Yes | | When true, a 'Continue' button is displayed in the Modal along with a 'Close' button |
668
826
  | continueButtonText | string | Yes | | The string value to display in the Continue button |
669
827
  | continueButtonHandler | () => void | Yes | | The function handler to execute when the Continue button is clicked. |
828
+ | variant | string | Yes | 'default' - **see below** | indicates the modal variant classes to apply. |
829
+
670
830
 
831
+ #### Default classes per Variant
832
+
833
+ - default: **`bg-white rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none`**
834
+ - darker: **`bg-slate-600 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none text-slate-200`**
835
+ - dark: **`bg-zinc-800 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none text-slate-200`**
671
836
 
672
837
  ### Example Usage
673
838
 
@@ -695,8 +860,6 @@ Basic Modal
695
860
  [Top of Page](#table-of-contents)
696
861
 
697
862
 
698
-
699
-
700
863
  <!-- P I L L --------------------------------------------------------------------------- -->
701
864
 
702
865
  ## Pill
@@ -738,6 +901,7 @@ Basic Pill
738
901
  </Pill>
739
902
  ```
740
903
 
904
+
741
905
  ### Dependencies
742
906
 
743
907
  **_none_**
@@ -746,7 +910,7 @@ Basic Pill
746
910
  [Top of Page](#table-of-contents)
747
911
 
748
912
 
749
- <!-- S E C T I O N H E A D E R --------------------------------------------------------------------------- -->
913
+ <!-- S E C T I O N H E A D E R ------------------------------------------------------- -->
750
914
 
751
915
  ## SectionHeader
752
916
 
@@ -768,51 +932,47 @@ Full list of props below
768
932
  | 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. |
769
933
  | iconLeft | ReactNode | Yes | | This prop takes an image to display as its left icon. It takes this value as a ReactNode, see examples above. |
770
934
  | iconRight | ReactNode | Yes | | This prop takes an image to display as its right icon. It takes this value as a ReactNode, see examples above. |
771
- | underline | boolean | Yes | false | When true, an underline is displayed underneath the entire SubHeader. |
935
+ | underline | boolean | Yes | false | When true, an underline is displayed underneath the entire SubHeader, this is done by applying the classes **`border-b-2 border-black`** to the default classes. A custom underline can be applied via the **`className`** prop. |
772
936
  | subHeader | string | Yes | undefined | This prop takes a string value that is displayed as a SubHeader when present. If no subHeader is passed in, nothing is displayed in this location. |
937
+ | 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. |
938
+ | childButton | ReactNode &#124; undefined | Yes | | |
773
939
 
774
940
 
775
941
  1. Default classNames
776
942
 
777
- - **`px-2 justify-start items-start gap-4 inline-flex w-full`**
943
+ - **`pl-6 pr-2 pt-4 pb-2 justify-start items-start gap-4 inline-flex w-full`**
778
944
 
779
945
  2. children classNames
780
946
 
781
- - **`self-stretch text-[#07192d] text-[40px] font-normal font-['Arial'] leading-[48px] pb-1`**
947
+ - **`self-stretch text-[40px] font-normal font-["Arial"] leading-[48px] pb-1`**
782
948
 
783
949
  3. subHeader classNames
784
950
 
785
- - **`text-[#07192d] text-xl font-normal font-['Arial'] leading-[30px]`**
786
-
951
+ - **`text-xl font-normal font-["Arial"] leading-[30px]`**
787
952
 
788
953
  ### Example Usage
789
954
 
790
955
  ```jsx
791
- <SectionHeader
792
- iconLeft={
793
- <img src={frame}
794
- alt='left header icon' />}
795
- iconRight={
796
- <img src={important}
797
- alt='left header icon'
798
- className='size-8 mt-2' />}
799
- subHeader="1st things first though"
800
- underline
801
- >
802
- Prologue
803
- </SectionHeader>
956
+ <SectionHeader
957
+ iconLeft={<img src={frame} alt='left header icon' />}
958
+ iconRight={<img src={important} alt='left header icon' className='size-8 mt-2' />}
959
+ subHeader="1st things first though"
960
+ underline
961
+ childButton={<Button variant='transparent' className='h-10'
962
+ icon={<img src={chevronRight} alt='right chevron' />}
963
+ iconPosition='right' >Click Me</Button>}
964
+ >
965
+ Prologue
966
+ </SectionHeader>
804
967
  ```
805
968
 
806
969
 
807
-
808
970
  ### Dependencies
809
971
 
810
972
  **_none_**
811
973
 
812
-
813
974
  [Top of Page](#table-of-contents)
814
975
 
815
-
816
976
  <!-- S E L E C T ---------------------------------------------------------------------------- -->
817
977
 
818
978
  ## Select
@@ -821,6 +981,7 @@ The **Select** component or drop-down allow a user to make a single selection fr
821
981
 
822
982
  The **Select** component takes two required props (**options** and **setSelectedOption**) as well as seven optional props (**className**, **classNameContainer**, **error**, **label**, **optionsLabel**, **width**, and **variant**), in addition to any other html attributes a normal html element would use, for example an aria-tag.
823
983
 
984
+
824
985
  Full list of props below
825
986
 
826
987
  ### Props
@@ -836,24 +997,21 @@ Full list of props below
836
997
  | optionsLabel | string | Yes | undefined | appears as the label in the Select component, i.e. 'Choose a Color' above. Note, this is not the label above the component. |
837
998
  | setSelectedOption | (string) => void | Yes | undefined | calls the function passed in as **`setSelectedOption`** with the selected **value** if present, otherwise with **name** |
838
999
  | variant | string | Yes | undefined | The predefined variant of Select to display. Current options are 'default', 'MedCard', 'Outline', and 'nonHover' |
839
- | width | string | Yes | | This prop is intended to like **`className`** take in css class name values. These are
840
- intended though to only take class names relevant to the component width, as they will be applied to both the **button**
841
- and the **drop down** elements of the **`Select`** component. For instance, the **`width`** prop is a good way to ensure that
842
- the button and drop down are of the same width. Note the default classes below, i.e. widths specified on various break points. |
1000
+ | width | string | Yes | | This prop is intended to like **`className`** take in css class name values. These are intended though to only take class names relevant to the component width, as they will be applied to both the **button** and the **drop down** elements of the **`Select`** component. For instance, the **`width`** prop is a good way to ensure that the button and drop down are of the same width. Note the default classes below, i.e. widths specified on various break points. |
1001
+
843
1002
 
844
1003
  1. Base CSS Classes
845
1004
 
846
- - **`outline-none outline-offset-0 flex justify-between items-center w-[292px] md:w-[343px] lg:w-[600px] h-14 border focus:outline-4 focus:outline-[#fa89f1] shadow-sm px-4 py-2 bg-white text-lg font-medium text-gray-700 hover:bg-gray-50 border-[#b3b3b3]`**
1005
+ - **`outline-none outline-offset-0 flex justify-between items-center w-[292px] md:w-[343px] lg:w-[600px] h-14 border focus:outline-4 focus: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"] `**
847
1006
 
848
1007
  Separate Variant Styles
849
1008
 
850
1009
  - default:
851
- - **`hover:bg-gray-200 text-black hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive h-12 mt-1 disabled:border-dha-mc-secondary-border disabled:border-2`**
1010
+ - **`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`**
852
1011
  - fill:
853
- - **`hover:bg-[#0c2c8e] text-base text-white bg-[#092068] hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive h-12 mt-1 disabled:border-dha-mc-secondary-border disabled:border-2 py-3 pl-[15px] pr-[9px]`**
1012
+ - **`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`**
854
1013
  - outline:
855
- - **`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`**
856
-
1014
+ - **`bg-white text-[#808080] disabled:border-dha-mc-secondary-border disabled:text-dha-mc-checkbox-inactive`**
857
1015
 
858
1016
  ### Example Usage
859
1017
 
@@ -870,6 +1028,97 @@ Separate Variant Styles
870
1028
  ```
871
1029
 
872
1030
 
1031
+ ### Dependencies
1032
+
1033
+ **_none_**
1034
+
1035
+ [Top of Page](#table-of-contents)
1036
+
1037
+
1038
+ <!-- S H I E L D ----------------------------------------------------------------------------------- -->
1039
+
1040
+ ## Shield
1041
+
1042
+ The **shield** component takes three required props, **variant**, **subVariant**, and **child** content.
1043
+
1044
+ Optional props are **className**, **classNameSvg**, **imagePath**, **imageAlt**, and **classNameImage**.
1045
+
1046
+ As with the button component, this component also takes additional html attributes that when included are passed to the parent div.
1047
+
1048
+ This div is also styled using the tailwind **`twMerge()`** utility, so custom classes can be added via the classNames prop as well.
1049
+
1050
+ ### Props
1051
+
1052
+ | Prop | Type | Optional | Default | Description |
1053
+ | ----------- | -------- | -------- | -------- | -------------------------------------------- |
1054
+ | children | ReactNode | No | | html and content that becomes the body of the Badge. |
1055
+ | subVariant | string | No | See **(1)** below | The predefined variant of Badge to display. |
1056
+ | variant | string | No | See **(1)** below | The predefined variant of Badge to display. UX designed variants are **go**, **hazard**, and **warning** |
1057
+ | 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 |
1058
+ | imageAlt | string | See Comment | undefined | When an imagePath is specified, please specify an imageAlt that can be used for accessibility purposes. |
1059
+ | classNameImage | string | Yes | undefined | Alternate CSS classes that are applied to the image for variant type media. |
1060
+ | imagePath | string | See Comment | undefined | When variant is of type "media", an imagePath has to be specified that the component can load and display. |
1061
+ | classNameSvg | string | Yes | (2) below | alternate classes to apply style to the svg icons used in the Badge component for type icon. Applied using twMerge, and will reliabily overwrite any default CSS classes. |
1062
+
1063
+ 1. Variants --> subVariants
1064
+ - default --> default, gray, red, yellow, green, blue
1065
+ - warning **UX Variant** --> half, full
1066
+ - hazard **UX Variant** --> half, full,
1067
+ - go **UX Variant** --> half, full
1068
+ - icon --> default, gray, red, yellow, green, blue
1069
+ - media --> default, gray, green
1070
+
1071
+ 2. classNames per variant default
1072
+ - default --> **`mx-2 inline-flex items-center rounded-md bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-400/20`**
1073
+ - icon --> **`inline-flex items-center gap-x-1.5 rounded-full bg-gray-500 px-2 py-1 text-xs font-medium text-gray-700`**
1074
+ - media --> **`w-[250px] mx-2 border-l-8 border-black grid grid-cols-6 rounded-md bg-gray-400/10 pr-2 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-400/20 overflow-hidden`**
1075
+
1076
+ ### Example Usage
1077
+
1078
+ Default Variant
1079
+
1080
+ ```jsx
1081
+ <Shield ref={ref}
1082
+ variant="default"
1083
+ subVariant="blue"
1084
+ aria-label="appropriate aria label here">
1085
+ Shield!
1086
+ </Shield>
1087
+ ```
1088
+
1089
+ icon Variant
1090
+
1091
+ ```jsx
1092
+ <Shield ref={ref}
1093
+ variant="icon"
1094
+ subVariant="blue"
1095
+ aria-label="appropriate aria label here">
1096
+ Shield!
1097
+ </Shield>
1098
+ ```
1099
+ media Variant
1100
+
1101
+ ```jsx
1102
+ <Shield ref={ref} variant="media"
1103
+ subVariant="blue"
1104
+ imagePath="/src/assets/Doctor.png"
1105
+ aria-label="health professional icon">
1106
+ <h5 className='text-sm font-bold my-2'>Flu Season!</h5>
1107
+ <p className="mb-2">Don't be caught unprepared. </p>
1108
+ </Shield>
1109
+ ```
1110
+ go Variant
1111
+
1112
+ ```jsx
1113
+ <Shield
1114
+ className="text-left "
1115
+ variant='go'
1116
+ subVariant='full'
1117
+ >Lorem ipsum dolor sit amet, consectetur adipiscing
1118
+ elit, sed do eiusmod tempor incididunt ut labore
1119
+ et dolore magna aliqua</Shield>
1120
+ ```
1121
+
873
1122
 
874
1123
  ### Dependencies
875
1124
 
@@ -877,6 +1126,8 @@ Separate Variant Styles
877
1126
 
878
1127
  [Top of Page](#table-of-contents)
879
1128
 
1129
+
1130
+
880
1131
  <!-- S I D E B A R N A V ---------------------------------------------------------------------------- -->
881
1132
 
882
1133
  ## SideBarNav
@@ -900,12 +1151,13 @@ Full list of props below
900
1151
  | clickOutsideCloses | boolean | Yes | **`false`** | clicking or tapping elsewhere on the application will close the SideBarNav |
901
1152
  | image | string | No | undefined | string path to the application logo to display |
902
1153
  | classNameImage | string | Yes | (2) below | a group of alternate classes that can be specified for the logo image, and applied to the **`img`** element |
903
- | classNameImageContainer | string | Yes | (2) below | a group of alternate classes that can be specified for the logo image's
904
- container, and applied to the **`img`** element |
1154
+ | classNameImageContainer | string | Yes | (2) below | a group of alternate classes that can be specified for the logo image's container, and applied to the **`img`** element |
905
1155
  | menu | boolean | Yes | false | when **`true`**, the default in-component hamburger menu is displayed and used to display or hide the SideBarNav |
906
1156
  | classNameMenu | string | Yes | empty string | alternate css classes to apply to the element that makes up the hamburger menu |
907
1157
  | classNameMenuContainer | string | Yes | (3) below | alternate css classes to apply to the **`button`** element that wraps up the hamburger menu |
1158
+ | classNameMenuItem | string | Yes | 'pb-4' | allows the user to add alternate classes via **`twMerge`** to individual menu items |
908
1159
  | menuItems | ListItemProps[] | No | undefined, see (4) below | The menu items to display |
1160
+ | right | boolean | Yes | false | when true right-aligns the text inside the sidebarNav |
909
1161
  | version | string | No | undefined | The version number to display |
910
1162
 
911
1163
 
@@ -962,14 +1214,11 @@ const menuItems = [
962
1214
  />
963
1215
  ```
964
1216
 
965
-
966
-
967
1217
  ### Dependencies
968
1218
 
969
1219
  **_none_**
970
1220
 
971
1221
  [Top of Page](#table-of-contents)
972
-
973
1222
  <!-- S K E L E T O N ---------------------------------------------------------------------------- -->
974
1223
 
975
1224
  ## Skeleton
@@ -1052,6 +1301,18 @@ Usage example for Example 2 below
1052
1301
  <SkelSection />
1053
1302
  </Skeleton>
1054
1303
  ```
1304
+ Skeleton w/ Alternate Coloring
1305
+
1306
+ ```jsx
1307
+ import { Skeleton, SkelCircle, SkelLine, SkelRow, SkelSection } from '@dhasdk/simple-ui'
1308
+ // ...
1309
+ <Skeleton>
1310
+ <SkelLine className='grow-0 basis-2/12 bg-red-500/50' inline />
1311
+ <SkelLine className='grow-0 basis-2/12 bg-red-500/50' inline />
1312
+ <SkelLine className='bg-orange-500/50' />
1313
+ <SkelSection className='bg-yellow-500/50' />
1314
+ </Skeleton>,
1315
+ ```
1055
1316
 
1056
1317
  ### Dependencies
1057
1318
 
@@ -1070,7 +1331,7 @@ This component takes five optional props that allow for customization and/or the
1070
1331
 
1071
1332
  To create a custom iteration of Status, leave `variant` blank and utilize a combination of the remaining props. The `Status` component consists of three separate div elements, one serving as a container, and then one each for the image/icon and child data.
1072
1333
 
1073
- The `className` prop can be used to add alternate styling to the outer div, i.e. `border-blue-700 bg-blue-200`. Likewise, the `imageClasses` prop can be used to provide alternate styling to the div containing the image, and the `childClasses` prop can provide alternate styling for the child div that contains the text, i.e. `text-blue-700`
1334
+ The `className` prop can be used to add alternate styling to the outer div, i.e. `border-blue-700 bg-blue-200`. Likewise, the `classNameImage` prop can be used to provide alternate styling to the div containing the image, and the `classNameChild` prop can provide alternate styling for the child div that contains the text, i.e. `text-blue-700`
1074
1335
 
1075
1336
  `image` and `children` are the final two props, and are both of type `ReactNode`.
1076
1337
 
@@ -1081,21 +1342,21 @@ Full list of props below
1081
1342
  | Prop | Type | Optional | Default | Description |
1082
1343
  | ----------- | -------- | -------- | -------- | ----------- |
1083
1344
  | children | string | No | | This prop takes children content, i.e. html and content that becomes the body of the Status. |
1084
- | variant | string | No | 'available' | The predefined variant of Status to display. Predefined variants are `available`, `inProgress`, and `notAvailable` |
1085
1345
  | 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. |
1086
1346
  | classNameChild | string | Yes | (2) below | This prop takes in alternate classes to apply style to the `div` that contains the child content. |
1087
- | image | ReactNode | Yes | | This prop takes type `ReactNode`, and is used to display a custom user supplied image. See usage examples above for more. |
1088
1347
  | classNameImage | string | Yes | (3) below | Alternate CSS classes that are applied to the div containing the childe div that contains the Status component image. |
1348
+ | image | ReactNode | Yes | | This prop takes type `ReactNode`, and is used to display a custom user supplied image. See usage examples above for more. |
1349
+ | variant | string | No | 'available' | The predefined variant of Status to display. Predefined variants are `available`, `inProgress`, and `notAvailable` |
1089
1350
 
1090
1351
  1. className
1091
1352
 
1092
1353
  **`h-[45px] px-4 py-3 bg-green-50 rounded-[100px] border border-green-700 justify-center items-center gap-2 inline-flex`**
1093
1354
 
1094
- 2. childClasses
1355
+ 2. classNameChild
1095
1356
 
1096
1357
  **`text-green-900 text-lg font-normal font-['Arial']`**
1097
1358
 
1098
- 3. imageClasses
1359
+ 3. classNameImage
1099
1360
 
1100
1361
  **`w-5 h-5 relative overflow-hidden`**
1101
1362
 
@@ -1134,12 +1395,13 @@ Custom variant
1134
1395
  image={ <img src={tune}
1135
1396
  alt='information' /> }
1136
1397
  className='border-blue-700 bg-blue-200'
1137
- childClasses='text-blue-700'
1398
+ classNameChild='text-blue-700'
1138
1399
  >
1139
1400
  Custom
1140
1401
  </Status>
1141
1402
  ```
1142
1403
 
1404
+
1143
1405
  ### Dependencies
1144
1406
 
1145
1407
  **_none_**
@@ -1152,7 +1414,7 @@ Custom variant
1152
1414
 
1153
1415
  Tabs component lets the user split the UI into independent pieces, and view each piece in isolation.
1154
1416
 
1155
- This component has one required prop, **tabs**, which contains the content of the various tabs as type ReactNode. Optional props are **className**, **containerClassName**, and **variant**.
1417
+ This component has one required prop, **tabs**, which contains the content of the various tabs as type ReactNode. Optional props are **className**, **classNameContainer**, and **variant**.
1156
1418
 
1157
1419
  Full list of props below
1158
1420
 
@@ -1160,74 +1422,38 @@ Full list of props below
1160
1422
 
1161
1423
  | Prop | Type | Optional | Default | Description |
1162
1424
  | ----------- | -------- | -------- | -------- | ----------- |
1163
- | className | string | Yes | undefined | |
1164
- | classNameContainer | string | Yes | undefined | |
1165
- | tabs | {id: string; label: string; content: ReactNode;}[] | Yes | undefined | An array of |
1166
- | variant | string | Yes | 'default' | The predefined variant of Tabs to display. Current options are 'default', 'outline', and 'filled' |
1425
+ | className | string | Yes | undefined | 'flex border-b border-gray-200' | Additional css classes to apply to the div containing the individual tabs |
1426
+ | classNameContainer | string | Yes | 'w-full' | Additional css classes to apply to the containing div for the tabs component |
1427
+ | tabs | {id: string; label: string; content: ReactNode;}[] | Yes | undefined | An array of objects representing the individual tabs to display |
1428
+ | variant | string | Yes | 'default' | The predefined variant of Tabs to display. Current options are 'default', 'outline', and 'transparent' |
1167
1429
 
1168
1430
  ### Example Usage
1169
1431
 
1170
- Tabs - very simple example
1432
+ Tabs - a simple example
1171
1433
 
1172
1434
  ```jsx
1173
- <Tabs tabs={[
1174
- {id: 'tab1', label: 'Tab 1', content: <p>I am a tab!</p>},
1175
- {id: 'tab2', label: 'Tab 2', content: <p>I am a 2nd tab!</p>}
1176
- ]} />
1177
- ```
1178
-
1179
- Tabs - more complicated example
1180
-
1181
- ```jsx
1182
-
1183
- const TabsContent1 = () => {
1184
- return(
1185
- <>
1186
- <p>Test Data 1</p>
1187
- <ul className="list-disc mt-2 ms-4">
1188
- <li>Seattle</li>
1189
- <li>Tacoma</li>
1190
- <li>Olympia</li>
1191
- <li>Bellevue</li>
1192
- <li>Redmond</li>
1193
- </ul>
1194
- </>
1195
- )
1196
- };
1197
-
1198
- const TabsContent2 = () => {
1199
- return(
1200
- <>
1201
- <p>Test Data 2</p>
1202
- <ul className="list-disc mt-2 ms-4">
1203
- <li>Tokyo - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
1204
- <li>Paris - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
1205
- <li>London - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
1206
- <li>Sydney - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
1207
- <li>Honolulu - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
1208
- </ul>
1209
- </>
1210
- )
1211
- };
1212
-
1213
1435
  const tabExample = [
1214
- {
1215
- id: 'tab1',
1216
- label: 'Tab 1',
1217
- content: <TabsContent1/>,
1218
- },
1219
- {
1220
- id: 'tab2',
1221
- label: 'Tab 2',
1222
- content: <TabsContent2/>,
1223
- }
1436
+ {
1437
+ id: 'tab1',
1438
+ label: 'Tab 1',
1439
+ content: <TabsContent1/>,
1440
+ },
1441
+ {
1442
+ id: 'tab2',
1443
+ label: 'Tab 2',
1444
+ content: <TabsContent2/>,
1445
+ },
1446
+ {
1447
+ id: 'tab3',
1448
+ label: 'Tab 3',
1449
+ content: <TabsContent3/>,
1450
+ }
1224
1451
  ]
1225
- // ...
1226
- return {
1227
- ...
1228
- <Tabs tabs={tabExample} />
1229
- ...
1230
- }
1452
+
1453
+ <Tabs
1454
+ tabs={tabExample}
1455
+ variant='filled'
1456
+ />
1231
1457
  ```
1232
1458
 
1233
1459
  ### Dependencies
@@ -1255,7 +1481,7 @@ As with the button component, Toggle takes any other additional html attributes
1255
1481
  | className | string | Yes | (1) below | alternate css classes to add/change styling of button element inside component |
1256
1482
  | classNameButton | string | Yes | (1) below | alternate css classes to add/change styling of div used inside button/toggle |
1257
1483
  | defaultChecked | boolean | Yes | **`false`** | sets default state as checked or unchecked state when first displayed |
1258
- | disabled | boolean | Yes | **`false`** | sets disabled state of Toggle component |
1484
+ | 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. |
1259
1485
  | 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. |
1260
1486
  | ...props | string | Yes | undefined | takes additional props that are not specifically defined in the component, i.e. **`aria-label`** |
1261
1487
  | ref | string | Yes | undefined | ref is exposed as a prop, and can be assigned and used on this component as normal |
@@ -1271,25 +1497,15 @@ As with the button component, Toggle takes any other additional html attributes
1271
1497
  Separate Variant Styles
1272
1498
 
1273
1499
  - default:
1274
- - classes: 'bg-gray-300 hover:bg-gray-400'
1275
- - toggledClasses: 'bg-[#092068] hover:bg-blue-700'
1276
- - buttonClasses: 'translate-x-0'
1277
- - toggledButtonClasses: 'translate-x-8'
1278
- - Outline:
1279
- - classes: 'bg-slate-200 border-2 border-blue-700 hover:bg-slate-300'
1280
- - toggledClasses: 'bg-blue-500 border-2 border-blue-700 hover:bg-blue-400'
1281
- - buttonClasses: 'translate-x-0'
1282
- - toggledButtonClasses: 'translate-x-8'
1283
- - nonHover:
1284
- - classes: 'bg-gray-300'
1285
- - toggledClasses: 'bg-[#092068]'
1500
+ - classes: 'bg-[#d0cfd1] hover:bg-[#bbbabc]'
1501
+ - toggledClasses: 'bg-[#053ea6] hover:bg-[#0752dc]'
1286
1502
  - buttonClasses: 'translate-x-0'
1287
- - toggledButtonClasses: 'translate-x-8'
1288
- - MedCard:
1289
- - classes: 'bg-[#E3EBF3] border-2 border-[#0256AB]'
1290
- - toggledClasses: 'bg-[#0256AB] border-2 border-[#0256AB]'
1503
+ - toggledButtonClasses: 'translate-x-8 lg:translate-x-6'
1504
+ - outlined:
1505
+ - classes: 'bg-slate-300 border border-black hover:bg-[#abb5c2]'
1506
+ - toggledClasses: 'bg-blue-500/50 hover:bg-blue-400 border border-black'
1291
1507
  - buttonClasses: 'translate-x-0'
1292
- - toggledButtonClasses: 'translate-x-8'
1508
+ - toggledButtonClasses: 'translate-x-8 lg:translate-x-6'
1293
1509
 
1294
1510
  ### Example Usage
1295
1511
 
@@ -1300,7 +1516,7 @@ Separate Variant Styles
1300
1516
  'border-green-500' : 'border-gray-400');
1301
1517
  console.log(checked);}
1302
1518
  }
1303
- variant={badgeVariant} />
1519
+ variant={toggleVariant} />
1304
1520
  ```
1305
1521
 
1306
1522
  ### Dependencies