@papillonarts/components 0.38.0 → 0.40.0

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/Form/form-control.scss

@@ -1,7 +1,7 @@
-@import '@papillonarts/css/build/primer/support/variables/typography.scss';
-@import '@papillonarts/css/build/primer/support/variables/misc.scss';
-@import '@papillonarts/css/build/primer/support/mixins/misc.scss';
-@import '@papillonarts/css/build/primer/support/mixins/layout.scss';
+@import '@papillonarts/css/support/variables/typography.scss';
+@import '@papillonarts/css/support/variables/misc.scss';
+@import '@papillonarts/css/support/mixins/misc.scss';
+@import '@papillonarts/css/support/mixins/layout.scss';
 
 // stylelint-disable custom-property-pattern
 // stylelint-disable no-descending-specificity

package/build/Legacy/Form/form-select.scss

@@ -1,7 +1,7 @@
-@import '@papillonarts/css/build/primer/support/variables/typography.scss';
-@import '@papillonarts/css/build/primer/support/variables/layout.scss';
-@import '@papillonarts/css/build/primer/support/mixins/layout.scss';
-@import '@papillonarts/css/build/primer/support/mixins/color-modes.scss';
+@import '@papillonarts/css/support/variables/typography.scss';
+@import '@papillonarts/css/support/variables/layout.scss';
+@import '@papillonarts/css/support/mixins/layout.scss';
+@import '@papillonarts/css/support/mixins/color-modes.scss';
 
 // stylelint-disable custom-property-pattern
 

package/build/Legacy/Grid/DisplayTable/DisplayTable.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DisplayTable = DisplayTable;
-var _borders = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/borders.scss"));
-var _colors = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/colors.scss"));
-var _padding = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/padding.scss"));
-var _typography = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/typography.scss"));
-var _visibilityDisplay = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/visibility-display.scss"));
+var _borders = _interopRequireDefault(require("@papillonarts/css/utilities/borders.scss"));
+var _colors = _interopRequireDefault(require("@papillonarts/css/utilities/colors.scss"));
+var _padding = _interopRequireDefault(require("@papillonarts/css/utilities/padding.scss"));
+var _typography = _interopRequireDefault(require("@papillonarts/css/utilities/typography.scss"));
+var _visibilityDisplay = _interopRequireDefault(require("@papillonarts/css/utilities/visibility-display.scss"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _uuid = require("uuid");

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlexGrid.d.ts","sourceRoot":"","sources":["../../../../src/Legacy/Grid/FlexGrid/FlexGrid.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAqD,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE9F,wBAAgB,QAAQ,CAAC,EACvB,SAAqC,EACrC,KAAK,EACL,OAAiC,EACjC,eAAiD,EACjD,SAAqC,EACrC,IAAI,EACJ,QAAmC,EACnC,OAAiC,EACjC,aAA6C,EAC7C,SAAqC,EACrC,KAA6B,GAC9B,EAAE,SAAS,2CAgPX"}
+{"version":3,"file":"FlexGrid.d.ts","sourceRoot":"","sources":["../../../../src/Legacy/Grid/FlexGrid/FlexGrid.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAqD,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE9F,wBAAgB,QAAQ,CAAC,EACvB,SAAqC,EACrC,KAAK,EACL,OAAiC,EACjC,eAAiD,EACjD,SAAqC,EACrC,IAAI,EACJ,QAAmC,EACnC,OAAiC,EACjC,aAA6C,EAC7C,SAAqC,EACrC,KAA6B,GAC9B,EAAE,SAAS,2CA8OX"}

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

@@ -7,17 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.FlexGrid = FlexGrid;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _index = _interopRequireDefault(require("@papillonarts/css/build/primer/truncate/index.scss"));
-var _borders = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/borders.scss"));
-var _colors = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/colors.scss"));
-var _flexbox = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/flexbox.scss"));
-var _layout = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/layout.scss"));
-var _margin = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/margin.scss"));
-var _padding = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/padding.scss"));
-var _typography = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/typography.scss"));
-var _visibilityDisplay = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/visibility-display.scss"));
+var _index = _interopRequireDefault(require("@papillonarts/css/truncate/index.scss"));
+var _borders = _interopRequireDefault(require("@papillonarts/css/utilities/borders.scss"));
+var _colors = _interopRequireDefault(require("@papillonarts/css/utilities/colors.scss"));
+var _flexbox = _interopRequireDefault(require("@papillonarts/css/utilities/flexbox.scss"));
+var _layout = _interopRequireDefault(require("@papillonarts/css/utilities/layout.scss"));
+var _margin = _interopRequireDefault(require("@papillonarts/css/utilities/margin.scss"));
+var _padding = _interopRequireDefault(require("@papillonarts/css/utilities/padding.scss"));
+var _typography = _interopRequireDefault(require("@papillonarts/css/utilities/typography.scss"));
+var _visibilityDisplay = _interopRequireDefault(require("@papillonarts/css/utilities/visibility-display.scss"));
 var _sort = require("@papillonarts/library/sort");
-var _string = require("@papillonarts/library/string");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _uuid = require("uuid");
@@ -28,6 +27,8 @@ var _grid = _interopRequireDefault(require("../../Layout/grid.scss"));
 var _FlexGrid = _interopRequireDefault(require("./FlexGrid.scss"));
 var _FlexGrid2 = require("./FlexGrid.type");
 var _jsxRuntime = require("react/jsx-runtime");
+// import { getCapitalizedString } from '@papillonarts/library/string'
+
 function FlexGrid(_ref) {
   var _items$;
   var _ref$className = _ref.className,
@@ -118,11 +119,7 @@ function FlexGrid(_ref) {
             children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               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(),
-                  separator: '-'
-                })
+                className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow'])
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-items-start'], _margin["default"]['ml-1']),
                 children: [sortComponent, nameIndex < (items === null || items === void 0 || (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.names.length) - 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

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/Label.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Label = Label;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _colors = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/colors.scss"));
+var _colors = _interopRequireDefault(require("@papillonarts/css/utilities/colors.scss"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Label = require("./Label.type");
 var _issueLabels = _interopRequireDefault(require("./issue-labels.scss"));

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/Label/mixins.scss

@@ -1,6 +1,6 @@
-@import '@papillonarts/css/build/primer/support/variables/typography.scss';
-@import '@papillonarts/css/build/primer/support/variables/layout.scss';
-@import '@papillonarts/css/build/primer/support/variables/misc.scss';
+@import '@papillonarts/css/support/variables/typography.scss';
+@import '@papillonarts/css/support/variables/layout.scss';
+@import '@papillonarts/css/support/variables/misc.scss';
 
 // Label mixins
 

package/build/Legacy/Layout/container.scss

@@ -1,4 +1,4 @@
-@import '@papillonarts/css/build/primer/support/variables/layout.scss';
+@import '@papillonarts/css/support/variables/layout.scss';
 
 // Fixed-width, centered column for site content.
 // Handy container styles that match our breakpoints

package/build/Legacy/Layout/grid-offset.scss

@@ -1,6 +1,6 @@
 // stylelint-disable number-max-precision
 
-@import '@papillonarts/css/build/primer/support/variables/layout.scss';
+@import '@papillonarts/css/support/variables/layout.scss';
 
 // Optional offset options to work with grid.scss
 

package/build/Legacy/Layout/grid.scss

@@ -1,5 +1,5 @@
-@import '@papillonarts/css/build/primer/support/variables/layout.scss';
-@import '@papillonarts/css/build/primer/support/mixins/layout.scss';
+@import '@papillonarts/css/support/variables/layout.scss';
+@import '@papillonarts/css/support/mixins/layout.scss';
 
 // stylelint-disable number-max-precision
 // stylelint-disable declaration-property-value-no-unknown

package/build/Legacy/Loader/Loader.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Loader = Loader;
-var _colors = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/colors.scss"));
-var _margin = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/margin.scss"));
+var _colors = _interopRequireDefault(require("@papillonarts/css/utilities/colors.scss"));
+var _margin = _interopRequireDefault(require("@papillonarts/css/utilities/margin.scss"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _branchName = _interopRequireDefault(require("../BranchName/branch-name.scss"));
 var _Button = _interopRequireDefault(require("../Button/Button.scss"));

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/Menu.js

@@ -8,8 +8,8 @@ exports.Menu = Menu;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _array = require("@papillonarts/library/array");
-var _hooks = require("@papillonarts/library/hooks");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _uuid = require("uuid");
 var _Icon = require("../../Icon");
 var _Menu = _interopRequireDefault(require("./Menu.scss"));
@@ -25,7 +25,7 @@ function Menu(_ref) {
     ariaAttr = _ref.ariaAttr,
     items = _ref.items,
     _onClick = _ref.onClick;
-  var _useState = (0, _hooks.useState)((0, _array.getIndexItems)(items)),
+  var _useState = (0, _react.useState)((0, _array.getIndexItems)(items)),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     indexItems = _useState2[0],
     setIndexItems = _useState2[1];