@dhasdk/simple-ui 0.0.24 → 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)
@@ -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,14 +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';
-export { SkipLink } from './lib/SkipLink';