@papillonarts/components 0.38.0 → 0.40.0

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

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../../../src/Legacy/Navigation/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAuB,aAAa,EAAkD,MAAM,qBAAqB,CAAA;AAExH,wBAAgB,YAAY,CAAC,EAC3B,SAAyC,EACzC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAqC,EACrC,KAAiC,EACjC,aAAiD,EACjD,OAAO,GACR,EAAE,aAAa,2CAsFf"}
+{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../../../src/Legacy/Navigation/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAuB,aAAa,EAAkD,MAAM,qBAAqB,CAAA;AAExH,wBAAgB,YAAY,CAAC,EAC3B,SAAyC,EACzC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAqC,EACrC,KAAiC,EACjC,aAAiD,EACjD,OAAO,GACR,EAAE,aAAa,2CAsFf"}

package/build/Legacy/Navigation/UnderlineNav/UnderlineNav.js

@@ -8,7 +8,6 @@ exports.UnderlineNav = UnderlineNav;
 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");
@@ -32,7 +31,7 @@ function UnderlineNav(_ref) {
     _ref$fullContainer = _ref.fullContainer,
     fullContainer = _ref$fullContainer === void 0 ? _UnderlineNav2.UnderlineNavDefault.FullContainer : _ref$fullContainer,
     _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];

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PreviousNext = PreviousNext;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _visibilityDisplay = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/visibility-display.scss"));
+var _visibilityDisplay = _interopRequireDefault(require("@papillonarts/css/utilities/visibility-display.scss"));
 var _pagination = require("@papillonarts/library/pagination");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _PreviousNext = _interopRequireDefault(require("./PreviousNext.scss"));

package/build/Legacy/Pagination/PreviousNext/PreviousNext.scss

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

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} />
+```

package/build/Legacy/Popover/Popover.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Popover = Popover;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _boxShadow = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/box-shadow.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 _boxShadow = _interopRequireDefault(require("@papillonarts/css/utilities/box-shadow.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 _classnames = _interopRequireDefault(require("classnames"));
 var _box = _interopRequireDefault(require("../Box/box.scss"));
 var _Button = require("../Button");

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Progress = Progress;
 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 _Progress = _interopRequireDefault(require("./Progress.scss"));
 var _Progress2 = require("./Progress.type");

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Select = Select;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _layout = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/layout.scss"));
+var _layout = _interopRequireDefault(require("@papillonarts/css/utilities/layout.scss"));
 var _array = require("@papillonarts/library/array");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _uuid = require("uuid");