@papillonarts/components 0.39.0 → 0.41.0

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

@@ -0,0 +1,260 @@
+# Features
+
+> Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
+
+```
+Popover all props and variants
+```
+
+## Props
+
+```typescript
+export interface IPopover {
+  className?: string
+  variant?: string
+  size?: string
+  intro: string
+  heading: string
+  message: string
+  acknowledge: string
+  introOnClick: (value) => void
+  acknowledgeOnClick: (value) => void
+}
+```
+
+## Variants
+
+```
+Default
+
+DefaultLarge
+
+Bottom
+
+BottomRight
+
+BottomLeft
+
+Left
+
+LeftBottom
+
+LeftTop
+
+Right
+
+RightBottom
+
+RightTop
+
+TopLeft
+
+TopRight
+```
+
+### Default
+
+> Popover default variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Default Large
+
+> Popover default large variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  size={PopoverSize.Large}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Bottom
+
+> Popover bottom variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={PopoverVariant.Bottom}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Bottom Right
+
+> Popover bottom right variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={PopoverVariant.BottomRight}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Bottom Left
+
+> Popover bottom left variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={PopoverVariant.BottomLeft}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Left
+
+> Popover left variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={PopoverVariant.Left}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Left Bottom
+
+> Popover left bottom variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={PopoverVariant.LeftBottom}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Left Top
+
+> Popover left top variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={PopoverVariant.LeftTop}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Right
+
+> Popover right variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={PopoverVariant.Right}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Right Bottom
+
+> Popover right bottom variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={PopoverVariant.RightBottom}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Right Top
+
+> Popover right top variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={PopoverVariant.RightTop}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Top Left
+
+> Popover top left variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={PopoverVariant.TopLeft}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+### Top Right
+
+> Popover top right variant
+
+```tsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={PopoverVariant.TopRight}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```

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

@@ -0,0 +1,51 @@
+# Features
+
+> Use progress components to visualize task completion. The Progress class adds a background color and aligns its children horizontally with flexbox. The children (Progress-item) should be individually colored with background utilities and sized with inline width styles in percentages. Overflow is hidden, so children that overflow will be clipped.
+
+```
+Progress all props and variants
+```
+
+## Props
+
+```typescript
+export interface IProgress {
+  className?: string
+  variant?: string
+  percentage: number
+}
+```
+
+## Variants
+
+```
+Normal
+
+Large
+
+Small
+```
+
+### Normal
+
+> Progress normal variant
+
+```tsx
+<Progress variant={ProgressVariant.Normal} percentage={50} />
+```
+
+### Large
+
+> Progress large variant
+
+```tsx
+<Progress variant={ProgressVariant.Large} percentage={50} />
+```
+
+### Small
+
+> Progress small variant
+
+```tsx
+<Progress variant={ProgressVariant.Small} percentage={50} />
+```

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

@@ -0,0 +1,54 @@
+# Features
+
+> Selects 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.
+
+```
+Select all props and variants
+```
+
+## Props
+
+```typescript
+export interface ISelect {
+  id?: string
+  className?: string
+  selectedText: string
+  items: IItem[]
+  onChange: (value) => void
+  state?: string
+}
+```
+
+## Variants
+
+```
+Default
+
+Active
+
+Inactive
+```
+
+### Default
+
+> Select default variant
+
+```tsx
+<Select selectedText={selectedText} items={items} onChange={action('onChange')} />
+```
+
+### Active
+
+> Select active variant
+
+```tsx
+<Select selectedText={selectedText} items={items} onChange={action('onChange')} state={SelectState.Active} />
+```
+
+### Inactive
+
+> Select inactive variant
+
+```tsx
+<Select selectedText={selectedText} items={items} onChange={action('onChange')} state={SelectState.Inactive} />
+```

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

@@ -0,0 +1,35 @@
+# Features
+
+> The SelectMenu component provides advanced support for navigation, filtering, and more. Any menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
+
+```
+SelectMenu all props and variants
+```
+
+## Props
+
+```typescript
+export interface ISelectMenu {
+  className?: string
+  summary: string
+  icon: string
+  title?: string
+  ariaAttr: IAriaAttr
+  items: IItem[]
+  onClick: (value) => void
+}
+```
+
+## Variants
+
+```
+Default
+```
+
+### Default
+
+> SelectMenu default variant
+
+```tsx
+<SelectMenu summary={summary} icon={IconName.ChevronDown16} title={title} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} />
+```

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

@@ -0,0 +1,43 @@
+# Features
+
+> The basic Subhead consists of a .Subhead container, which has a light gray bottom border. Use .Subhead-heading for the heading itself. It's an <h2> sized heading with normal font-weight.
+
+> Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.
+
+```
+Subhead all props and variants
+```
+
+## Props
+
+```typescript
+export interface ISubhead {
+  className?: string
+  heading: string
+  isSpacious?: boolean
+}
+```
+
+## Variants
+
+```
+Plain
+
+Spacious
+```
+
+### Plain
+
+> Subhead plain variant
+
+```tsx
+<Subhead heading="Plain subhead" />
+```
+
+### Spacious
+
+> Subhead spacious variant
+
+```tsx
+<Subhead heading="Spacious subhead" isSpacious={true} />
+```

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

@@ -1,26 +1,50 @@
-# SyntaxHighlighter
+# Features
+
+```
+SyntaxHighlighter all props and variants
+```
+
+## Props
 
-> SyntaxHighlighter component all features
+```typescript
+export interface ISyntaxHighlighter extends ISyntaxHighlighterBase {
+  highlighter?: string
+}
 
+export interface ISyntaxHighlighterBase {
+  language?: string
+  style?: string
+  children?: string
+}
 ```
-# Features
 
-> Default
+## Variants
+
+```
+Default
+
+HLJSTypeScript
+
+HLJSMarkdown
+
+PrismTypeScript
+
+PrismMarkdown
 ```
 
-## Default
+### Default
 
-> Markdown component default feature
+> SyntaxHighlighter default variant
 
-```jsx
+```tsx
 <SyntaxHighlighter>{TypeScriptCode}</SyntaxHighlighter>
 ```
 
-## HLJS TypeScript
+### HLJS TypeScript
 
-> Markdown component hljs typescript feature
+> SyntaxHighlighter hljs typeScript variant
 
-```jsx
+```tsx
 <SyntaxHighlighter
   highlighter={SyntaxHighlighterHighlighter.HLJS}
   language={SyntaxHighlighterLanguage.TypeScript}
@@ -30,19 +54,19 @@
 </SyntaxHighlighter>
 ```
 
-## HLJS Markdown
+### HLJS Markdown
 
-> Markdown component hljs markdown feature
+> SyntaxHighlighter hljs markdown variant
 
-```jsx
-<Markdown highlighter={MarkdownHighlighter.HLJS}>{SyntaxHighlighterMarkdown}</Markdown>
+```tsx
+<Markdown highlighter={MarkdownHighlighter.HLJS}>{SyntaxHighlighterDoc}</Markdown>
 ```
 
-## Prism TypeScript
+### Prism TypeScript
 
-> Markdown component prism typescript feature
+> SyntaxHighlighter prism typeScript variant
 
-```jsx
+```tsx
 <SyntaxHighlighter
   highlighter={SyntaxHighlighterHighlighter.PRISM}
   language={SyntaxHighlighterLanguage.TypeScript}
@@ -52,10 +76,10 @@
 </SyntaxHighlighter>
 ```
 
-## Prism Markdown
+### Prism Markdown
 
-> Markdown component prism markdown feature
+> SyntaxHighlighter prism markdown variant
 
-```jsx
-<Markdown highlighter={MarkdownHighlighter.PRISM}>{SyntaxHighlighterMarkdown}</Markdown>
+```tsx
+<Markdown highlighter={MarkdownHighlighter.PRISM}>{SyntaxHighlighterDoc}</Markdown>
 ```

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

@@ -0,0 +1,73 @@
+# Features
+
+> Toasts are used to show live, time-sensitive feedback to users.
+
+```
+Toast all props and variants
+```
+
+## Props
+
+```typescript
+export interface IToast {
+  className?: string
+  variant?: string
+  text: string
+  isDismissable?: boolean
+  onClick?: (value) => void
+}
+```
+
+## Variants
+
+```
+Info
+
+Success
+
+Warning
+
+Error
+
+Dismissible
+```
+
+### Info
+
+> Toast info variant
+
+```tsx
+<Toast variant={ToastVariant.Info} text={text.info} />
+```
+
+### Success
+
+> Toast success variant
+
+```tsx
+<Toast variant={ToastVariant.Success} text={text.success} />
+```
+
+### Warning
+
+> Toast warning variant
+
+```tsx
+<Toast variant={ToastVariant.Warning} text={text.warning} />
+```
+
+### Error
+
+> Toast error variant
+
+```tsx
+<Toast variant={ToastVariant.Error} text={text.error} />
+```
+
+### Dismissible
+
+> Toast dismissible variant
+
+```tsx
+<Toast variant={ToastVariant.Info} text={text.dismissible} isdismissible={true} onClick={action('onClick')} />
+```