@dhasdk/simple-ui 0.0.23 → 0.0.25

package/README.md

@@ -17,6 +17,8 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
 - [Input](#input)
 - [List](#list)
 - [Modal](#modal)
+- [Pill](#pill)
+- [Section Header](#sectionheader)
 - [Select](#select)
 - [Skeleton](#skeleton)
 - [Status](#status)
@@ -71,8 +73,8 @@ Finally, if Accordion props are specified inside the parent component, those val
 | children         | ReactNode   |  No      | undefined | This is intended to contain the child **Accordion** components |
 | chevron | boolean | Yes      | undefined | If true, displays chevron icons for open/closed status, otherwise displays plus and minus icons. |
 | iconAccordionOpened & iconAccordionClosed    | ReactNode   | Yes       | N/A      | custom icons to display for opened and closed state. See usage example above for a demonstration. |
-| childHeadingClassName   | string   | Yes      | CSS classes to apply to the child Accordion component headings. These can be overridden on an individual basis using the same prop on the Accordion component. |
-| childContentClassName     | string   | No       | N/A      | CSS classes to apply to the child Accordion component content body. These can be overridden on an individual basis using the same prop on the Accordion component. |
+| 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. |
 | className | string | Yes   | undefined | CSS classes applied to the container div for the **AccordionParent** component. | 
 | ...props	       | string   | No       |       | takes additional props that are not specifically defined in the component, i.e. aria-label |
 | rounded        | boolean   | Yes      | false | This boolean value indicates whether to display rounded corners or not. By using this prop vs custom classes, only the top of the heading is rounded in an opened state, and only the bottom of the content block is rounded also. |
@@ -86,8 +88,8 @@ Finally, if Accordion props are specified inside the parent component, those val
 | children         | ReactNode   |  No      | undefined | This contains the body of the **Accordion** content. |
 | chevron | boolean | Yes      | undefined | If true, displays chevron icons for open/closed status, otherwise displays plus and minus icons. |
 | iconAccordionOpened & iconAccordionClosed    | ReactNode   | Yes       | N/A      | custom icons to display for opened and closed state. See usage example above for a demonstration. |
-| childHeadingClassName   | string   | Yes      | CSS classes to apply to the child Accordion component headings. These can be overridden on an individual basis using the same prop on the Accordion component. |
-| childContentClassName     | string   | No       | N/A      | CSS classes to apply to the child Accordion component content body. These can be overridden on an individual basis using the same prop on the Accordion component. |
+| 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. |
 | className | string | Yes   | undefined | CSS classes applied to the container div for the **Accordion** component. | 
 | ...props	       | string   | No       |       | takes additional props that are not specifically defined in the component, i.e. aria-label |
 | rounded        | boolean   | Yes      | false | This boolean value indicates whether to display rounded corners or not. By using this prop vs custom classes, only the top of the heading is rounded in an opened state, and only the bottom of the content block is rounded also. |
@@ -100,8 +102,8 @@ Finally, if Accordion props are specified inside the parent component, those val
 
 ```jsx
 <AccordionParent 
-    childHeadingClassName='bg-white' 
-    childContentClassName='bg-white'>
+    classNameChildHeading='bg-white' 
+    classNameChildContent='bg-white'>
     <Accordion label='First Example'>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
     </Accordion>
@@ -693,6 +695,124 @@ Basic Modal
 [Top of Page](#table-of-contents)
 
 
+
+
+<!-- P I L L  --------------------------------------------------------------------------- -->
+
+## Pill
+
+The **`Pill`** component displays a **`children`** prop as its primary content, with optional left and/or right icons. It also has the ability to display selected state via a **selected** prop, and can also take an **onClick** handler.
+
+Optional props are **className**, **iconLeft**, **iconLeftSelected**, **iconRight**, **iconRightSelected**, **onClick**, and **selected**. 
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children   | ReactNode   | No      |   | The primary content to display in this Pill, i.e. the word 'Pill' above.|
+| className | string | Yes   |   | Alternate CSS classnames to apply to the Pill component, which is itself built inside a Button. **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| iconLeft   | ReactNode   | Yes      |   | This prop takes an image to display as its left icon. It takes this value as a ReactNode.|
+| iconLeftSelected   | ReactNode   | Yes      |   | This prop takes an image to display as its left icon when the component is in its selected state. It takes this value as a ReactNode.|
+| iconRight   | ReactNode   | Yes      |   | This prop takes an image to display as its right icon. It takes this value as a ReactNode.|
+| iconRightSelected   | ReactNode   | Yes      |   | This prop takes an image to display as its right icon when the component is in its selected state. It takes this value as a ReactNode|
+| onClick   | () => void()   | Yes      |   | When included this serves as the **`onClick`** handler for the **`Pill`** component. |
+| selected   | boolean   | Yes      | false  | This prop is a boolean that can be used to indicate if thisPill component should be in a selected state or not. This value is controled in by the developer, and assigned via this prop. See the selected state example above for example usage. |
+
+1. Default classNames
+
+- **`relative inline-flex items-center justify-center whitespace-nowrap rounded-3xl transition-colors focus-visible:outline-none font-[`Arial`] disabled:pointer-events-none disabled:opacity-50 py-[10px] md:py-[14px] lg:py-[16px] border-2 border-[#092068] text-[#092068] text-lg bg-white hover:bg-[#D1DBFB] active:bg-[#9fc5f0] focus:bg-white disabled:bg-[#939194] disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive focus:border-black disabled:border-dha-mc-secondary-border disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1`**
+
+
+### Example Usage
+
+Basic Pill
+
+```jsx
+  <Pill
+    iconLeft={<img src={frame} alt='left header icon' />}
+    iconRight={<img src={frame} alt='right header icon' />}
+    >
+    Pill
+  </Pill>
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+
+<!-- S E C T I O N   H E A D E R  --------------------------------------------------------------------------- -->
+
+## SectionHeader
+
+The **`SectionHeader`** component displays a **`children`** prop as a heading, and uses various additional props to customize the remaining portion of the Header.
+
+Optional props are **`className`**, **`classNameChildren`**, **`classNameSubHeader`**, **`iconLeft`**, **`iconRight`**, **`subHeader`**, and **`underline`**.  Various examples and
+combinations of these props in use can be seen via the above drop down with 
+the **Usage** button
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children   | ReactNode   | No      |  | The primary content to display in this SectionHeader, i.e.the word 'Prologue' above. |
+| className   | string   | Yes  | (1) below | Alternate CSS classnames to apply to the SectionHeader component.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| classNameChildren   | string   | Yes  | (2) below  | Alternate CSS classnames to apply to the **`children`** component which contains the Header content.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| classNameSubHeader   | string   | Yes | (3) below | Alternate CSS classnames to apply to the subHeader portion when present.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| iconLeft   | ReactNode   | Yes  |  | This prop takes an image to display as its left icon. It takes this value as a ReactNode, see examples above. |
+| iconRight   | ReactNode   | Yes  |  | This prop takes an image to display as its right icon. It takes this value as a ReactNode, see examples above. |
+| underline   | boolean   | Yes  | false | When true, an underline is displayed underneath the entire SubHeader. |
+| subHeader | string   | Yes  | undefined | This prop takes a string value that is displayed as a SubHeader when present.  If no subHeader is passed in, nothing is displayed in this location. |
+
+
+1. Default classNames
+
+- **`px-2 justify-start items-start gap-4 inline-flex w-full`**
+
+2. children classNames
+
+- **`self-stretch text-[#07192d] text-[40px] font-normal font-['Arial'] leading-[48px] pb-1`**
+
+3. subHeader classNames
+
+- **`text-[#07192d] text-xl font-normal font-['Arial'] leading-[30px]`**
+
+
+### Example Usage
+
+```jsx
+  <SectionHeader 
+      iconLeft={
+        <img src={frame} 
+          alt='left header icon' />}
+      iconRight={
+        <img src={important} 
+          alt='left header icon' 
+          className='size-8 mt-2' />}
+      subHeader="1st things first though" 
+      underline
+      >
+        Prologue
+      </SectionHeader>
+```
+
+
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+
 <!-- S E L E C T ---------------------------------------------------------------------------- -->
 
 ## Select
@@ -860,6 +980,9 @@ The nested components inside of Skeleton are `SkelCircle`, `SkelLine`, `SkelSect
 
 When using the `className` prop on one of the internal props inside the `Skeleton` component to alter style or size, as the container uses flexbox, note the usage examples above. For instance, to make a bar partially expand across the line, you can for example use `className="grow-0 basis-2/12"`.
 
+In addition, you can apply a different color and opacity by using simple tailwindcss classes, i.e. to change the background color and opacity as above in the last example, applying **`bg-blue-500/50`** changes the color of the individual Skeleton sub-components to a shade of blue with 50% 
+opacity.
+
 - `SkelCircle` - a small circle (i.e. a badge or icon)
 - `SkelLine` - a line (i.e. text or content)
 - `SkelSection` - a larger section on a page, or paragraph

package/index.d.ts

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