@papillonarts/components 0.39.0 → 0.41.0

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

@@ -0,0 +1,158 @@
+# Features
+
+> You can use flex utilities on the container and columns to create a flexbox grid.
+
+> This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts.
+
+```
+FlexGrid all props and variants
+```
+
+## Props
+
+```typescript
+export interface IFlexGrid {
+  className?: string
+  items: IFlexGridItem[]
+  idIndex?: number
+  isSelectedIndex?: number
+  selection?: string
+  sort: ISort
+  onChange?: (value) => void
+  onClick?: (value) => void
+  onDoubleClick?: (value) => void
+  iconColor?: IIconColor
+  state?: string
+}
+```
+
+## Variants
+
+```
+RadioWithSelection
+
+RadioWithSelectionInactive
+
+RadioWithoutSelection
+
+RadioWithoutSelectionInactive
+
+CheckboxWithSelection
+
+CheckboxWithSelectionInactive
+
+CheckboxWithoutSelection
+
+CheckboxWithoutSelectionInactive
+```
+
+### Radio With Selection
+
+> FlexGrid radio with selection variant
+
+```tsx
+<FlexGrid
+  items={radioItemsWithSelection}
+  idIndex={0}
+  isSelectedIndex={1}
+  selection={FlexGridSelection.Radio}
+  sort={SortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+/>
+```
+
+### Radio With Selection Inactive
+
+> FlexGrid radio with selection inactive variant
+
+```tsx
+<FlexGrid
+  items={radioItemsWithSelection}
+  idIndex={0}
+  isSelectedIndex={1}
+  selection={FlexGridSelection.Radio}
+  sort={SortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+  state={FlexGridState.Inactive}
+/>
+```
+
+### Radio Without Selection
+
+> FlexGrid radio without selection variant
+
+```tsx
+<FlexGrid idIndex={0} items={radioItemsWithoutSelection} sort={SortDefault} onChange={action('onChange')} />
+```
+
+### Radio Without Selection Inactive
+
+> FlexGrid radio without selection inactive variant
+
+```tsx
+<FlexGrid idIndex={0} items={radioItemsWithoutSelection} sort={SortDefault} onChange={action('onChange')} state={FlexGridState.Inactive} />
+```
+
+### Checkbox With Selection
+
+> FlexGrid checkbox with selection variant
+
+```tsx
+<FlexGrid
+  items={checkboxItemsWithSelection}
+  idIndex={0}
+  isSelectedIndex={1}
+  selection={FlexGridSelection.Checkbox}
+  sort={SortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+/>
+```
+
+### Checkbox With Selection Inactive
+
+> FlexGrid checkbox with selection inactive variant
+
+```tsx
+<FlexGrid
+  items={checkboxItemsWithSelection}
+  idIndex={0}
+  isSelectedIndex={1}
+  selection={FlexGridSelection.Checkbox}
+  sort={SortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+  state={FlexGridState.Inactive}
+/>
+```
+
+### Checkbox Without Selection
+
+> FlexGrid checkbox without selection variant
+
+```tsx
+<FlexGrid
+  idIndex={0}
+  items={checkboxItemsWithoutSelection}
+  sort={SortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+/>
+```
+
+### Checkbox Without Selection Inactive
+
+> FlexGrid checkbox without selection inactive variant
+
+```tsx
+<FlexGrid
+  idIndex={0}
+  items={checkboxItemsWithoutSelection}
+  sort={SortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+  state={FlexGridState.Inactive}
+/>
+```

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

@@ -0,0 +1,58 @@
+# Features
+
+> Generic icon component.
+
+```
+Icon all props and variants
+```
+
+## Props
+
+```typescript
+export interface IIcon {
+  className?: string
+  ariaLabel?: string
+  icon: string
+  height?: number
+  width?: number
+  size?: number
+  fill?: string
+  verticalAlign?: string
+}
+```
+
+## Variants
+
+```
+Default
+
+AllIcons
+```
+
+### Default
+
+> Icon default variant
+
+```tsx
+<Icon className={className} icon={icon} size={size} {...rest} />
+```
+
+### All Icons
+
+> Icon all icons variant
+
+```tsx
+<div
+  style={{
+    columns: '4',
+    width: '800px',
+  }}
+>
+  {IconNameKeys.map((icon) => (
+    <div key={icon} style={{ padding: '4px', fontSize: '14px', lineHeight: '21px' }}>
+      <Icon icon={icon} style={{ marginRight: '4px', verticalAlign: 'middle' }} />
+      <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>{icon}</span>
+    </div>
+  ))}
+</div>
+```

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

@@ -0,0 +1,33 @@
+# Features
+
+> Labels add metadata or indicate status of items and navigational elements. Three different types of labels are available: Labels for adding metadata, States for indicating status, and Counters for showing the count for a number of items.
+
+```
+Label all props and variants
+```
+
+## Props
+
+```typescript
+export interface ILabel {
+  className?: string
+  text: string
+  variant?: string
+  backgroundColor?: string
+  textColor?: string
+}
+```
+
+## Variants
+
+```
+Default
+```
+
+### Default
+
+> Label default variant
+
+```tsx
+<Label text="default label" />
+```

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

@@ -0,0 +1,61 @@
+# Features
+
+> Loaders inform users that an action is still in progress and might take a while to complete.
+
+```
+Loader all props and variants
+```
+
+## Props
+
+```typescript
+export interface ILoader {
+  className?: string
+  variant: string
+  text: string
+}
+```
+
+## Variants
+
+```
+Heading
+
+Text
+
+Label
+
+Button
+```
+
+### Heading
+
+> Loader heading variant
+
+```tsx
+<Loader variant={LoaderVariant.Heading} text={textValue} />
+```
+
+### Text
+
+> Loader text variant
+
+```tsx
+<Loader variant={LoaderVariant.Text} text={textValue} />
+```
+
+### Label
+
+> Loader label variant
+
+```tsx
+<Loader variant={LoaderVariant.Label} text={textValue} />
+```
+
+### Button
+
+> Loader button variant
+
+```tsx
+<Loader variant={LoaderVariant.Button} text={textValue} />
+```

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

@@ -1,33 +1,48 @@
-# Markdown
+# Features
 
-> Markdown component all features
+```
+Markdown all props and variants
+```
 
+## Props
+
+```typescript
+export interface IMarkdown {
+  highlighter?: string
+  children?: string
+}
 ```
-# Features
 
-> Default
+## Variants
+
+```
+Default
+
+HLJS
+
+Prism
 ```
 
-## Default
+### Default
 
-> Markdown component default feature
+> Markdown default variant
 
-```jsx
+```tsx
 <Markdown>{MarkdownCode}</Markdown>
 ```
 
-## HLJS
+### HLJS
 
-> Markdown component hljs feature
+> Markdown hljs variant
 
-```jsx
+```tsx
 <Markdown highlighter={MarkdownHighlighter.HLJS}>{MarkdownCode}</Markdown>
 ```
 
-## Prism
+### Prism
 
-> Markdown component prism feature
+> Markdown prism variant
 
-```jsx
+```tsx
 <Markdown highlighter={MarkdownHighlighter.PRISM}>{MarkdownCode}</Markdown>
 ```

package/build/Legacy/Navigation/Menu/__tests__/Menu.doc.md

@@ -0,0 +1,53 @@
+# Features
+
+> The menu is a vertical list of navigational links. A menu's width and placement must be set by you. If you like, just use our grid columns as a parent. Otherwise, apply a custom width.
+
+```
+Menu all props and variants
+```
+
+## Props
+
+```typescript
+export interface IMenu {
+  className?: string
+  heading?: string
+  ariaAttr: IAriaAttr
+  items: IItem[]
+  onClick: (value) => void
+}
+```
+
+## Variants
+
+```
+Default
+
+WithIcons
+
+WithHeading
+```
+
+### Default
+
+> Menu default variant
+
+```tsx
+<Menu ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} />
+```
+
+### With Icons
+
+> Menu with icons variant
+
+```tsx
+<Menu ariaAttr={ariaAttr} items={iconItems} onClick={action('onClick')} />
+```
+
+### With Heading
+
+> Menu with heading variant
+
+```tsx
+<Menu heading={heading} ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} />
+```

package/build/Legacy/Navigation/TabNav/__tests__/TabNav.doc.md

@@ -0,0 +1,99 @@
+# Features
+
+> When you need to toggle between different views, consider using a tabnav. It'll give you a left-aligned horizontal row of tabs.
+
+```
+TabNav all props and variants
+```
+
+## Props
+
+```typescript
+export interface ITabNav {
+  className?: string
+  ariaAttr: IAriaAttr
+  items: IItem[]
+  actions?: React.ReactNode[]
+  onClick: (value) => void
+  children?: React.ReactNode
+  state?: string
+}
+```
+
+## Variants
+
+```
+Default
+
+WithButtonActions
+
+WithTextActions
+
+WithLinkActions
+
+WithNavigation
+
+WithMixedEnabledVisibleItems
+
+Inactive
+```
+
+### Default
+
+> TabNav default variant
+
+```tsx
+<TabNav ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} />
+```
+
+### With Button Actions
+
+> TabNav with button actions variant
+
+```tsx
+<TabNav ariaAttr={ariaAttr} items={defaultItems} actions={buttonActions} onClick={action('onClick')} />
+```
+
+### With Text Actions
+
+> TabNav with text actions variant
+
+```tsx
+<TabNav ariaAttr={ariaAttr} items={defaultItems} actions={textActions} onClick={action('onClick')} />
+```
+
+### With Link Actions
+
+> TabNav with link actions variant
+
+```tsx
+<TabNav ariaAttr={ariaAttr} items={defaultItems} actions={linkActions} onClick={action('onClick')} />
+```
+
+### With Navigation
+
+> TabNav with navigation variant
+
+```tsx
+<BrowserRouter>
+  <TabNav ariaAttr={ariaAttr} items={navigationItems} onClick={action('onClick')} />
+</BrowserRouter>
+```
+
+### With Mixed Enabled Visible Items
+
+> TabNav with mixed enabled visible icons variant
+
+```tsx
+<BrowserRouter>
+  <TabNav ariaAttr={ariaAttr} items={mixedEnabledVisibleItems} onClick={action('onClick')} />
+</BrowserRouter>
+```
+
+### Inactive
+
+> TabNav inactive variant
+
+```tsx
+<TabNav ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} state={TabNavState.Inactive} />
+```

package/build/Legacy/Navigation/UnderlineNav/__tests__/UnderlineNav.doc.md

@@ -0,0 +1,106 @@
+# Features
+
+> Use UnderlineNav to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. This component comes with variations to accommodate icons, containers and other content.
+
+```
+UnderlineNav all props and variants
+```
+
+## Props
+
+```typescript
+export interface IUnderlineNav {
+  className?: string
+  ariaAttr: IAriaAttr
+  items: IItem[]
+  itemType: string
+  actions?: React.ReactNode[]
+  align?: string
+  fullContainer?: boolean
+  onClick: (value) => void
+}
+```
+
+## Variants
+
+```
+Default
+
+WithActions
+
+RightAligned
+
+RightAlignedWithActions
+
+WithIcons
+
+FullContainer
+```
+
+### Default
+
+> UnderlineNav default variant
+
+```tsx
+<UnderlineNav ariaAttr={ariaAttr} items={buttonItems} itemType={UnderlineNavItemType.Button} onClick={action('onClick')} />
+```
+
+### With Actions
+
+> UnderlineNav with actions variant
+
+```tsx
+<UnderlineNav ariaAttr={ariaAttr} items={anchorItems} itemType={UnderlineNavItemType.A} actions={actions} onClick={action('onClick')} />
+```
+
+### Right Aligned
+
+> UnderlineNav right aligned variant
+
+```tsx
+<UnderlineNav
+  ariaAttr={ariaAttr}
+  items={anchorItems}
+  itemType={UnderlineNavItemType.A}
+  align={UnderlineNavAlignmentType.Right}
+  onClick={action('onClick')}
+/>
+```
+
+### Right Aligned With Actions
+
+> UnderlineNav right aligned with actions variant
+
+```tsx
+<UnderlineNav
+  ariaAttr={ariaAttr}
+  items={anchorItems}
+  itemType={UnderlineNavItemType.A}
+  align={UnderlineNavAlignmentType.Right}
+  actions={actions}
+  onClick={action('onClick')}
+/>
+```
+
+### With Icons
+
+> UnderlineNav with icons variant
+
+```tsx
+<UnderlineNav ariaAttr={ariaAttr} items={iconItems} itemType={UnderlineNavItemType.A} onClick={action('onClick')} />
+```
+
+### Full Container
+
+> UnderlineNav full container variant
+
+```tsx
+<UnderlineNav
+  ariaAttr={ariaAttr}
+  items={fullContainerItems}
+  itemType={UnderlineNavItemType.A}
+  actions={actions}
+  fullContainer
+  onClick={action('onClick')}
+/>
+```

package/build/Legacy/Pagination/PreviousNext/__tests__/PreviousNext.doc.md

@@ -0,0 +1,57 @@
+# Features
+
+> Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
+
+> You can make a very simple pagination container with just the Previous and Next buttons. Add the aria-disabled="true" attribute to the Previous button if there isn't a preceding page, or to the Next button if there isn't a succeeding page.
+
+```
+PreviousNext all props and variants
+```
+
+## Props
+
+```typescript
+export interface IPreviousNext {
+  className?: string
+  ariaAttr: IAriaAttr
+  currentPage: ICurrentPageType
+  previous?: IPreviousNextType
+  next?: IPreviousNextType
+  onClick: (value) => void
+  state?: string
+}
+```
+
+## Variants
+
+```
+Default
+
+Active
+
+Inactive
+```
+
+### Default
+
+> PreviousNext default variant
+
+```tsx
+<PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={action('onClick')} />
+```
+
+### Active
+
+> PreviousNext active variant
+
+```tsx
+<PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={action('onClick')} state={PreviousNextState.Active} />
+```
+
+### Inactive
+
+> PreviousNext inactive variant
+
+```tsx
+<PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={action('onClick')} state={PreviousNextState.Inactive} />
+```