@papillonarts/components 0.39.0 → 0.41.0

package/build/Legacy/Button/__tests__/Button.doc.md

@@ -0,0 +1,339 @@
+# Features
+
+> Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.
+
+```
+Button all props and variants
+```
+
+## Props
+
+```typescript
+export interface IButton {
+  dataTestId?: string
+  id?: string
+  className?: string
+  element?: string
+  href?: string
+  text: string
+  variant?: string
+  size?: string
+  state?: string
+  icon?: IIcon
+  onClick: (value?: string) => void
+  inputType?: string
+  autoFocus?: boolean
+}
+```
+
+## Variants
+
+```
+DefaultButton, DefaultSmallButton, DefaultLargeButton, DefaultInactiveButton, DefaultIconButtonLeftAligned, DefaultIconButtonRightAligned, DefaultLinkButton
+
+PrimaryButton, PrimarySmallButton, PrimaryLargeButton, PrimaryInactiveButton, PrimaryIconButtonLeftAligned, PrimaryIconButtonRightAligned
+
+DangerButton, DangerSmallButton, DangerLargeButton, DangerInactiveButton, DangerIconButtonLeftAligned, DangerIconButtonRightAligned
+
+OutlineButton, OutlineSmallButton, OutlineLargeButton, OutlineInactiveButton, OutlineIconButtonLeftAligned, OutlineIconButtonRightAligned
+
+BlueButton, BlueSmallButton, BlueLargeButton, BlueInactiveButton, BlueIconButtonLeftAligned, BlueIconButtonRightAligned
+
+OrangeButton, OrangeSmallButton, OrangeLargeButton, OrangeInactiveButton, OrangeIconButtonLeftAligned, OrangeIconButtonRightAligned
+```
+
+### Default Normal
+
+> Button default normal variant
+
+```tsx
+<Button text="Default normal button" onClick={action('onClick')} />
+```
+
+### Default Small
+
+> Button default small variant
+
+```tsx
+<Button text="Default small button" size={ButtonSize.Small} onClick={action('onClick')} />
+```
+
+### Default Large
+
+> Button default large variant
+
+```tsx
+<Button text="Default large button" size={ButtonSize.Large} onClick={action('onClick')} />
+```
+
+### Default Inactive
+
+> Button default inactive variant
+
+```tsx
+<Button text="Default inactive button" state={ButtonState.Inactive} onClick={action('onClick')} />
+```
+
+### Default Icon Left Aligned
+
+> Button default icon left aligned variant
+
+```tsx
+<Button text="Default icon button" icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+### Default Icon Right Aligned
+
+> Button default icon right aligned variant
+
+```tsx
+<Button text="Default icon button" icon={plusIconRightAligned} onClick={action('onClick')} />
+```
+
+### Default Link
+
+> Button default link variant
+
+```tsx
+<Button element={ButtonElement.A} href="#url" text="Default link button" onClick={action('onClick')} />
+```
+
+### Primary
+
+> Button primary variant
+
+```tsx
+<Button text="Primary button" variant={ButtonVariant.Primary} onClick={action('onClick')} />
+```
+
+### Primary Small
+
+> Button primary small variant
+
+```tsx
+<Button text="Primary small button" variant={ButtonVariant.Primary} size={ButtonSize.Small} onClick={action('onClick')} />
+```
+
+### Primary Large
+
+> Button primary large variant
+
+```tsx
+<Button text="Primary large button" variant={ButtonVariant.Primary} size={ButtonSize.Large} onClick={action('onClick')} />
+```
+
+### Primary Inactive
+
+> Button primary inactive variant
+
+```tsx
+<Button text="Primary inactive button" variant={ButtonVariant.Primary} state={ButtonState.Inactive} onClick={action('onClick')} />
+```
+
+### Primary Icon Left aligned
+
+> Button icon left aligned variant
+
+```tsx
+<Button text="Primary icon button" variant={ButtonVariant.Primary} icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+### Primary Icon right aligned
+
+> Button icon right aligned variant
+
+```tsx
+<Button text="Primary icon button" variant={ButtonVariant.Primary} icon={plusIconRightAligned} onClick={action('onClick')} />
+```
+
+### Danger
+
+> Button danger variant
+
+```tsx
+<Button text="Danger button" variant={ButtonVariant.Danger} onClick={action('onClick')} />
+```
+
+### Danger Small
+
+> Button danger small variant
+
+```tsx
+<Button text="Danger small button" variant={ButtonVariant.Danger} size={ButtonSize.Small} onClick={action('onClick')} />
+```
+
+### Danger Large
+
+> Button danger large variant
+
+```tsx
+<Button text="Danger large button" variant={ButtonVariant.Danger} size={ButtonSize.Large} onClick={action('onClick')} />
+```
+
+### Danger Inactive
+
+> Button danger inactive variant
+
+```tsx
+<Button text="Danger inactive button" variant={ButtonVariant.Danger} state={ButtonState.Inactive} onClick={action('onClick')} />
+```
+
+### Danger Icon Left Aligned
+
+> Button danger icon left aligned variant
+
+```tsx
+<Button text="Danger icon button" variant={ButtonVariant.Danger} icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+### Danger Icon Right Aligned
+
+> Button danger icon right aligned variant
+
+```tsx
+<Button text="Danger icon button" variant={ButtonVariant.Danger} icon={plusIconRightAligned} onClick={action('onClick')} />
+```
+
+### Outline
+
+> Button outline variant
+
+```tsx
+<Button text="Outline button" variant={ButtonVariant.Outline} onClick={action('onClick')} />
+```
+
+### Outline Small
+
+> Button outline small variant
+
+```tsx
+<Button text="Outline small button" variant={ButtonVariant.Outline} size={ButtonSize.Small} onClick={action('onClick')} />
+```
+
+### Outline Large
+
+> Button outline large variant
+
+```tsx
+<Button text="Outline large button" variant={ButtonVariant.Outline} size={ButtonSize.Large} onClick={action('onClick')} />
+```
+
+### Outline Inactive
+
+> Button outline inactive variant
+
+```tsx
+<Button text="Outline inactive button" variant={ButtonVariant.Outline} state={ButtonState.Inactive} onClick={action('onClick')} />
+```
+
+### Outline Icon Left Aligned
+
+> Button outline icon left aligned variant
+
+```tsx
+<Button text="Outline icon button" variant={ButtonVariant.Outline} icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+### Outline Icon Right Aligned
+
+> Button outline icon right aligned variant
+
+```tsx
+<Button text="Outline icon button" variant={ButtonVariant.Outline} icon={plusIconRightAligned} onClick={action('onClick')} />
+```
+
+### Blue
+
+> Button blue variant
+
+```tsx
+<Button text="Blue button" variant={ButtonVariant.Blue} onClick={action('onClick')} />
+```
+
+### Blue small
+
+> Button blue small variant
+
+```tsx
+<Button text="Blue small button" variant={ButtonVariant.Blue} size={ButtonSize.Small} onClick={action('onClick')} />
+```
+
+### Blue Large
+
+> Button blue large variant
+
+```tsx
+<Button text="Blue large button" variant={ButtonVariant.Blue} size={ButtonSize.Large} onClick={action('onClick')} />
+```
+
+### Blue Inactive
+
+> Button blue inactive variant
+
+```tsx
+<Button text="Blue inactive button" variant={ButtonVariant.Blue} state={ButtonState.Inactive} onClick={action('onClick')} />
+```
+
+### Blue Icon Left Aligned
+
+> Button blue icon left aligned variant
+
+```tsx
+<Button text="Blue icon button" variant={ButtonVariant.Blue} icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+### Blue Icon Right Aligned
+
+> Button blue icon right aligned variant
+
+```tsx
+<Button text="Blue icon button" variant={ButtonVariant.Blue} icon={plusIconRightAligned} onClick={action('onClick')} />
+```
+
+### Orange
+
+> Button orange variant
+
+```tsx
+<Button text="Orange button" variant={ButtonVariant.Orange} onClick={action('onClick')} />
+```
+
+### Orange Small
+
+> Button orange small variant
+
+```tsx
+<Button text="Orange small button" variant={ButtonVariant.Orange} size={ButtonSize.Small} onClick={action('onClick')} />
+```
+
+### Orange Large
+
+> Button orange large variant
+
+```tsx
+<Button text="Orange large button" variant={ButtonVariant.Orange} size={ButtonSize.Large} onClick={action('onClick')} />
+```
+
+### Orange Inactive
+
+> Button orange inactive variant
+
+```tsx
+<Button text="Orange inactive button" variant={ButtonVariant.Orange} state={ButtonState.Inactive} onClick={action('onClick')} />
+```
+
+### Orange Icon Left Aligned
+
+> Button orange icon left aligned variant
+
+```tsx
+<Button text="Orange icon button" variant={ButtonVariant.Orange} icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+### Orange Icon Right Aligned
+
+> Button orange icon right aligned variant
+
+```tsx
+<Button text="Orange icon button" variant={ButtonVariant.Orange} icon={plusIconRightAligned} onClick={action('onClick')} />
+```

package/build/Legacy/Dropdown/__tests__/Dropdown.doc.md

@@ -0,0 +1,54 @@
+# Features
+
+> Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
+
+```
+Dropdown all props and variants
+```
+
+## Props
+
+```typescript
+export interface IDropdown {
+  className?: string
+  summary: string
+  ariaAttr?: IAriaAttr
+  items: IItem[]
+  onClick: (value) => void
+  state?: string
+}
+```
+
+## Variants
+
+```
+Default
+
+Active
+
+Inactive
+```
+
+### Default
+
+> Dropdown default variant
+
+```tsx
+<Dropdown summary={summary} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} />
+```
+
+### Active
+
+> Dropdown active variant
+
+```tsx
+<Dropdown summary={summary} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} state={DropdownState.Active} />
+```
+
+### Inactive
+
+> Dropdown inactive variant
+
+```tsx
+<Dropdown summary={summary} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} state={DropdownState.Inactive} />
+```

package/build/Legacy/ErrorBoundary/ErrorBoundary.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.type.d.ts","sourceRoot":"","sources":["../../../src/Legacy/ErrorBoundary/ErrorBoundary.type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B"}
+{"version":3,"file":"ErrorBoundary.type.d.ts","sourceRoot":"","sources":["../../../src/Legacy/ErrorBoundary/ErrorBoundary.type.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B"}

package/build/Legacy/ErrorBoundary/__tests__/ErrorBoundary.doc.md

@@ -0,0 +1,33 @@
+# Features
+
+> By default, if your application throws an error during rendering, React will remove its UI from the screen. To prevent this, you can wrap a part of your UI into an Error Boundary. An Error Boundary is a special component that lets you display some fallback UI instead of the part that crashed. For example, an error message.
+
+> [Catching rendering errors with an error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)
+
+```
+ErrorBoundary all props and variants
+```
+
+## Props
+
+```typescript
+export interface IErrorBoundary {
+  children: React.ReactNode
+}
+```
+
+## Variants
+
+```
+Default
+```
+
+### Default
+
+> ErrorBoundary default variant
+
+```tsx
+<ErrorBoundary>
+  <div />
+</ErrorBoundary>
+```

package/build/Legacy/Form/Checkbox/__tests__/Checkbox.doc.md

@@ -0,0 +1,87 @@
+# Features
+
+> Style individual form checkbox controls and utilize common layouts.
+
+```
+Checkbox all props and variants
+```
+
+## Props
+
+```typescript
+export interface ICheckbox {
+  dataTest?: string
+  className?: string
+  htmlFor?: string
+  ariaAttr: IAriaAttr
+  inputType?: string
+  isChecked?: boolean
+  text?: string
+  onChange: (value) => void
+  state?: string
+}
+```
+
+## Variants
+
+```
+IsChecked
+
+IsCheckedActive
+
+IsCheckedInactive
+
+IsNotChecked
+
+IsNotCheckedActive
+
+IsNotCheckedInactive
+```
+
+### Is Checked
+
+> Checkbox is checked variant
+
+```tsx
+<Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} />
+```
+
+### Is Checked Active
+
+> Checkbox is checked active variant
+
+```tsx
+<Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} state={CheckboxState.Active} />
+```
+
+### Is Checked Inactive
+
+> Checkbox is checked inactive variant
+
+```tsx
+<Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} state={CheckboxState.Inactive} />
+```
+
+### Is Not Checked
+
+> Checkbox is not checked variant
+
+```tsx
+<Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} />
+```
+
+### Is Not Checked Active
+
+> Checkbox is not checked active variant
+
+```tsx
+<Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} state={CheckboxState.Active} />
+```
+
+### Is Not Checked Inactive
+
+> Checkbox is not checked inactive variant
+
+```tsx
+<Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} state={CheckboxState.Inactive} />
+```

package/build/Legacy/Form/Input/__tests__/Input.doc.md

@@ -0,0 +1,84 @@
+# Features
+
+> Style individual form input controls and utilize common layouts.
+
+```
+Input all props and variants
+```
+
+## Props
+
+```typescript
+export interface IInput {
+  dataTestId?: string
+  id?: string
+  className?: string
+  placeholder?: string
+  ariaAttr?: IAriaAttr
+  inputType?: string
+  value: string
+  onChange?: (value) => void
+  onKeyUp?: (value) => void
+  onFocus?: (value) => void
+  onBlur?: (value) => void
+  autoFocus?: boolean
+  state?: string
+}
+```
+
+## Variants
+
+```
+Default
+
+Active
+
+Inactive
+```
+
+### Default
+
+> Input default variant
+
+```tsx
+<Input
+  placeholder={placeholder}
+  ariaAttr={ariaAttr}
+  onChange={action('onChange')}
+  onKeyUp={action('onKeyUp')}
+  onFocus={action('onFocus')}
+  onBlur={action('onBlur')}
+/>
+```
+
+### Active
+
+> Input active variant
+
+```tsx
+<Input
+  placeholder={placeholder}
+  ariaAttr={ariaAttr}
+  onChange={action('onChange')}
+  onKeyUp={action('onKeyUp')}
+  onFocus={action('onFocus')}
+  onBlur={action('onBlur')}
+  state={InputState.Active}
+/>
+```
+
+### Inactive
+
+> Input inactive variant
+
+```tsx
+<Input
+  placeholder={placeholder}
+  ariaAttr={ariaAttr}
+  onChange={action('onChange')}
+  onKeyUp={action('onKeyUp')}
+  onFocus={action('onFocus')}
+  onBlur={action('onBlur')}
+  state={InputState.Inactive}
+/>
+```

package/build/Legacy/Form/Radio/__tests__/Radio.doc.md

@@ -0,0 +1,66 @@
+# Features
+
+> Style individual form radio controls and utilize common layouts.
+
+```
+Radio all props and variants
+```
+
+## Props
+
+```typescript
+export interface IRadio {
+  dataTest?: string
+  className?: string
+  htmlFor?: string
+  inputType?: string
+  name: string
+  isChecked?: boolean
+  text?: string
+  onChange: (value) => void
+  state?: string
+}
+```
+
+## Variants
+
+```
+Default
+
+Active
+
+Inactive
+```
+
+### Default
+
+> Radio default variant
+
+```tsx
+<Fragment>
+  <Radio name={name} onChange={action('onChange-white')} text="White" />
+  <Radio name={name} isChecked={true} onChange={action('onChange-black')} text="Black" />
+</Fragment>
+```
+
+### Active
+
+> Radio active variant
+
+```tsx
+<Fragment>
+  <Radio name={name} onChange={action('onChange-white')} text="White" state={RadioState.Active} />
+  <Radio name={name} isChecked={true} onChange={action('onChange-black')} text="Black" state={RadioState.Active} />
+</Fragment>
+```
+
+### Inactive
+
+> Radio inactive variant
+
+```tsx
+<Fragment>
+  <Radio name={name} onChange={action('onChange-white')} text="White" state={RadioState.Inactive} />
+  <Radio name={name} isChecked={true} onChange={action('onChange-black')} text="Black" state={RadioState.Inactive} />
+</Fragment>
+```

package/build/Legacy/Grid/DisplayTable/__tests__/DisplayTable.doc.md

@@ -0,0 +1,34 @@
+# Features
+
+> Using display table utilities with columns gives you some alternative layout options.
+
+> A useful example is being able to keep the height of the container equal across a row when the length of content may differ.
+
+```
+DisplayTable all props and variants
+```
+
+## Props
+
+```typescript
+export interface IDisplayTable {
+  className: string
+  items: IItem[]
+  idIndex: number
+  isSelectedIndex: number
+}
+```
+
+## Variants
+
+```
+Default
+```
+
+### Default
+
+> DisplayTable default variant
+
+```tsx
+<DisplayTable items={items} idIndex={0} isSelectedIndex={1} />
+```

package/build/Legacy/Grid/FlexGrid/FlexGrid.js

@@ -119,8 +119,8 @@ function FlexGrid(_ref) {
               className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-justify-between'], _layout["default"]['width-full']),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow']),
-                children: (0, _string.getCapizalizedString)({
-                  string: name.toString(),
+                children: (0, _string.getCapitalizedString)({
+                  input: name.toString(),
                   separator: '-'
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {