@papillonarts/components 0.10.0 → 0.11.0

package/build/primer/Navigation/TabNav/__tests__/TabNav.int.story.tsx

@@ -1,168 +0,0 @@
-import cx from 'classnames'
-import { v1 as uuidv1 } from 'uuid'
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { BrowserRouter, Link } from 'react-router-dom'
-import layoutStyles from '@papillonarts/css/build/primer/utilities/layout.scss'
-import tabNavStyles from '../TabNav.scss'
-import buttonStyles from '../../../Button/Button.scss'
-import { tabNavState } from '../TabNav.prop'
-import results from '../../../../../../../.jest-test-results.json'
-
-const TabNav =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../../index').primer.Navigation.TabNav
-    : require('../../../../../build').primer.Navigation.TabNav
-
-export default {
-  title: 'Primer/Molecule/Navigation/TabNav',
-  component: TabNav,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['TabNav.int.test.js'] },
-  excludeStories: ['ariaAttr', 'defaultItems', 'navigationItems', 'mixedEnabledVisibleItems', 'custom'],
-}
-
-export const ariaAttr = {
-  label: 'Foo bar',
-  current: 'page',
-}
-
-export const defaultItems = [
-  {
-    href: '#url',
-    text: 'Foo tab',
-    isSelected: true,
-    enabled: true,
-    visible: true,
-  },
-  { href: '#url', text: 'Bar tab', isSelected: false, enabled: true, visible: true },
-]
-
-export const navigationItems = [
-  {
-    link: {
-      component: Link,
-      props: { ...{ to: '/foo' } },
-      children: 'Foo link',
-    },
-    isSelected: true,
-    enabled: true,
-    visible: true,
-  },
-  {
-    link: {
-      component: Link,
-      props: { ...{ to: '/bar' } },
-      children: 'Bar link',
-    },
-    isSelected: false,
-    enabled: true,
-    visible: true,
-  },
-]
-
-export const mixedEnabledVisibleItems = [
-  {
-    link: {
-      component: Link,
-      props: { ...{ to: '/foo' } },
-      children: 'Foo link',
-    },
-    isSelected: true,
-    enabled: true,
-    visible: true,
-  },
-  {
-    link: {
-      component: Link,
-      props: { ...{ to: '/bar' } },
-      children: 'Bar link',
-    },
-    isSelected: false,
-    enabled: false,
-    visible: true,
-  },
-  {
-    link: {
-      component: Link,
-      props: { ...{ to: '/disco' } },
-      children: 'Disco link',
-    },
-    isSelected: false,
-    enabled: false,
-    visible: false,
-  },
-]
-
-const actionButton = (
-  <a key={uuidv1()} className={cx(buttonStyles.btn, buttonStyles['btn-sm'], layoutStyles['float-right'])} href="#url" role="button">
-    Button
-  </a>
-)
-
-const buttonActions = [actionButton]
-
-const actionText = (
-  <div key={uuidv1()} className={cx(tabNavStyles['tabnav-extra'], layoutStyles['float-right'])}>
-    Tabnav widget text here.
-  </div>
-)
-
-const textActions = [actionText]
-
-const actionLink = (
-  <div key={uuidv1()} className={layoutStyles['float-right']}>
-    <a className={tabNavStyles['tabnav-extra']} href="#url">
-      Tabnav extra link
-    </a>
-    <a className={tabNavStyles['tabnav-extra']} href="#url">
-      Tabnav extra link
-    </a>
-  </div>
-)
-
-const linkActions = [actionLink]
-
-export function custom(items, onClick) {
-  return (
-    <BrowserRouter>
-      <TabNav ariaAttr={ariaAttr} items={items} onClick={onClick} />
-    </BrowserRouter>
-  )
-}
-
-export function regular() {
-  return <TabNav ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} />
-}
-
-export function withButtonActions() {
-  return <TabNav ariaAttr={ariaAttr} items={defaultItems} actions={buttonActions} onClick={action('onClick')} />
-}
-
-export function withTextActions() {
-  return <TabNav ariaAttr={ariaAttr} items={defaultItems} actions={textActions} onClick={action('onClick')} />
-}
-
-export function withLinkActions() {
-  return <TabNav ariaAttr={ariaAttr} items={defaultItems} actions={linkActions} onClick={action('onClick')} />
-}
-
-export function withNavigation() {
-  return (
-    <BrowserRouter>
-      <TabNav ariaAttr={ariaAttr} items={navigationItems} onClick={action('onClick')} />
-    </BrowserRouter>
-  )
-}
-
-export function withMixedEnabledVisibleItems() {
-  return (
-    <BrowserRouter>
-      <TabNav ariaAttr={ariaAttr} items={mixedEnabledVisibleItems} onClick={action('onClick')} />
-    </BrowserRouter>
-  )
-}
-
-export function inactive() {
-  return <TabNav ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} state={tabNavState.inactive} />
-}

package/build/primer/Navigation/TabNav/__tests__/TabNav.int.test.ts

@@ -1,55 +0,0 @@
-import { defaultItems as items, regular, withButtonActions, withTextActions, withLinkActions, inactive } from './TabNav.int.story'
-
-jest.mock('@papillonarts/library/array', () => ({
-  getIndexItems: () => {},
-  getIndexItemsWithSelected: () => {},
-}))
-
-const libraryArrayMockObject = require('@papillonarts/library/array')
-
-describe('<TabNav />', () => {
-  const indexItemsDataObject = [
-    { ...items[0], index: 0 },
-    { ...items[1], index: 1 },
-  ]
-
-  const newIndexItemsWithSelectedDataObject = [
-    { ...items[0], index: 0, isSelected: true, enabled: true, visible: true },
-    { ...items[1], index: 1, isSelected: false, enabled: true, visible: true },
-  ]
-
-  function mockLibraryForRegularItems() {
-    jest.spyOn(libraryArrayMockObject, 'getIndexItems').mockReturnValue(indexItemsDataObject)
-
-    jest.spyOn(libraryArrayMockObject, 'getIndexItemsWithSelected').mockReturnValue(newIndexItemsWithSelectedDataObject)
-  }
-
-  afterEach(() => jest.clearAllMocks())
-
-  describe('Render', () => {
-    test('must match regular()', () => {
-      mockLibraryForRegularItems()
-      expect(global.renderToJSON(regular())).toMatchSnapshot()
-    })
-
-    test('must match withButtonActions()', () => {
-      mockLibraryForRegularItems()
-      expect(global.renderToJSON(withButtonActions())).toMatchSnapshot()
-    })
-
-    test('must match withTextActions()', () => {
-      mockLibraryForRegularItems()
-      expect(global.renderToJSON(withTextActions())).toMatchSnapshot()
-    })
-
-    test('must match withLinkActions()', () => {
-      mockLibraryForRegularItems()
-      expect(global.renderToJSON(withLinkActions())).toMatchSnapshot()
-    })
-
-    test('must match inactive()', () => {
-      mockLibraryForRegularItems()
-      expect(global.renderToJSON(inactive())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Navigation/TabNav/index.ts

@@ -1,2 +0,0 @@
-export { TabNav } from './TabNav'
-export { tabNavState } from './TabNav.prop'

package/build/primer/Navigation/UnderlineNav/UnderlineNav.prop.ts

@@ -1,41 +0,0 @@
-export const underlineNavItemType = {
-  a: 'a',
-  button: 'button',
-}
-
-export const underlineNavAlignmentType = {
-  right: 'right',
-  left: 'left',
-}
-
-export const defaultProps = {
-  className: null,
-  actions: null,
-  align: 'left',
-  fullContainer: false,
-}
-
-export interface AriaAttrType {
-  label: string
-  selected: string
-  current: boolean | false | true | 'page' | 'step' | 'location' | 'date' | 'time'
-}
-
-export interface ItemType {
-  href: string
-  icon: string
-  text: string
-  html: React.ReactNode
-  isSelected: boolean
-}
-
-export interface UnderlineNavProps {
-  className?: string
-  ariaAttr: AriaAttrType
-  items: ItemType
-  itemType: typeof underlineNavItemType.a | typeof underlineNavItemType.button
-  actions?: React.ReactNode[]
-  align?: typeof underlineNavAlignmentType.right | typeof underlineNavAlignmentType.left
-  fullContainer?: boolean
-  onClick: (value) => void
-}

package/build/primer/Navigation/UnderlineNav/UnderlineNav.tsx

@@ -1,106 +0,0 @@
-import { Fragment } from 'react'
-import cx from 'classnames'
-import { v1 as uuidv1 } from 'uuid'
-import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
-import { useState } from '@papillonarts/library/hooks'
-import { UnderlineNavProps, defaultProps, underlineNavAlignmentType } from './UnderlineNav.prop'
-import styles from './UnderlineNav.scss'
-import containerStyles from '../../Layout/container.scss'
-import { Icon, iconSize } from '../../Icon'
-
-export function UnderlineNav({
-  className = defaultProps.className,
-  ariaAttr,
-  items,
-  itemType,
-  actions = defaultProps.actions,
-  align = defaultProps.align,
-  fullContainer = defaultProps.fullContainer,
-  onClick,
-}: UnderlineNavProps) {
-  const [indexItems, setIndexItems] = useState(getIndexItems(items))
-  const { label, selected, current } = ariaAttr
-
-  function renderActions() {
-    return <div className={styles['UnderlineNav-actions']}>{actions}</div>
-  }
-
-  function renderBody() {
-    return (
-      <Fragment>
-        {align === underlineNavAlignmentType.right && actions && renderActions()}
-        <div className={styles['UnderlineNav-body']} role="tablist">
-          {indexItems.map((indexItem) => {
-            const { href, icon, text, html, isSelected } = indexItem
-            const anchorOtherProps = isSelected ? { ...{ 'aria-selected': selected } } : null
-            const buttonOtherProps = isSelected ? { ...{ 'aria-current': current } } : null
-
-            switch (itemType) {
-              case 'button':
-                return (
-                  <button
-                    key={uuidv1()}
-                    onClick={(e) => {
-                      e.preventDefault()
-                      const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
-                      setIndexItems(newIndexItems)
-                      onClick(newIndexItems)
-                    }}
-                    className={styles['UnderlineNav-item']}
-                    role="tab"
-                    type="button"
-                    // @ts-ignore
-                    href={href}
-                    {...anchorOtherProps}
-                  >
-                    {icon && <Icon className={styles['UnderlineNav-octicon']} icon={icon} size={iconSize.small} />}
-                    {html || null}
-                    {text}
-                  </button>
-                )
-              case 'a':
-                return (
-                  <a
-                    key={uuidv1()}
-                    onClick={(e) => {
-                      e.preventDefault()
-                      const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
-                      setIndexItems(newIndexItems)
-                      onClick(newIndexItems)
-                    }}
-                    className={styles['UnderlineNav-item']}
-                    href={href}
-                    {...buttonOtherProps}
-                  >
-                    {icon && <Icon className={styles['UnderlineNav-octicon']} icon={icon} size={iconSize.small} />}
-                    {html || null}
-                    {text}
-                  </a>
-                )
-              default:
-                return null
-            }
-          })}
-        </div>
-        {align === underlineNavAlignmentType.left && actions && renderActions()}
-      </Fragment>
-    )
-  }
-
-  function renderBodyFullContainer() {
-    return <div className={cx(containerStyles['container-lg'], styles['UnderlineNav-container'])}>{renderBody()}</div>
-  }
-
-  return (
-    <nav
-      className={cx(className, styles.UnderlineNav, {
-        [styles['UnderlineNav--right']]: align === underlineNavAlignmentType.right,
-        [styles['UnderlineNav--full']]: fullContainer === true,
-      })}
-      aria-label={label}
-    >
-      {fullContainer === false && renderBody()}
-      {fullContainer === true && renderBodyFullContainer()}
-    </nav>
-  )
-}

package/build/primer/Navigation/UnderlineNav/__tests__/UnderlineNav.int.story.tsx

@@ -1,140 +0,0 @@
-import { Fragment } from 'react'
-import { v1 as uuidv1 } from 'uuid'
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import buttonStyles from '../../../Button/Button.scss'
-import counterStyles from '../../../Label/counters.scss'
-import { underlineNavItemType, underlineNavAlignmentType } from '../UnderlineNav.prop'
-import { iconName } from '../../../Icon/Icon.prop'
-import results from '../../../../../../../.jest-test-results.json'
-
-const UnderlineNav =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../../index').primer.Navigation.UnderlineNav
-    : require('../../../../../build').primer.Navigation.UnderlineNav
-
-export default {
-  title: 'Primer/Molecule/Navigation/UnderlineNav',
-  component: UnderlineNav,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['UnderlineNav.int.test.js'] },
-  excludeStories: ['ariaAttr', 'buttonItems', 'anchorItems', 'iconItems', 'fullContainerItems', 'custom'],
-}
-
-export const ariaAttr = {
-  label: 'Foo bar',
-  selected: 'true',
-  current: 'page',
-}
-
-export const buttonItems = [
-  { text: 'Item 1', isSelected: true },
-  { text: 'Item 2', isSelected: false },
-  { text: 'Item 3', isSelected: false },
-  { text: 'Item 4', isSelected: false },
-]
-
-export const anchorItems = [
-  { href: '#url', text: 'Item 1', isSelected: true },
-  { href: '#url', text: 'Item 2', isSelected: false },
-  { href: '#url', text: 'Item 3', isSelected: false },
-  { href: '#url', text: 'Item 4', isSelected: false },
-]
-
-export const iconItems = [
-  { href: '#url', icon: iconName.Tools16, html: <span>Item 1</span>, isSelected: true },
-  {
-    href: '#url',
-    icon: iconName.Tools16,
-    html: (
-      <Fragment>
-        <span>Item 2</span>
-        <span className={counterStyles.Counter}>10</span>
-      </Fragment>
-    ),
-    isSelected: false,
-  },
-  { href: '#url', icon: iconName.Tools16, html: <span>Item 3</span>, isSelected: false },
-  { href: '#url', icon: iconName.Tools16, html: <span>Item 4</span>, isSelected: false },
-]
-
-export const fullContainerItems = [
-  { href: '#url', icon: iconName.Tools16, html: <span>Item 1</span>, isSelected: true },
-  {
-    href: '#url',
-    icon: iconName.Tools16,
-    html: (
-      <Fragment>
-        <span>Item 2</span>
-        <span className={counterStyles.Counter}>10</span>
-      </Fragment>
-    ),
-    isSelected: false,
-  },
-  { href: '#url', icon: iconName.Tools16, html: <span>Item 3</span>, isSelected: false },
-  { href: '#url', icon: iconName.Tools16, html: <span>Item 4</span>, isSelected: false },
-]
-
-const actionButton = (
-  <a key={uuidv1()} href="#url" className={buttonStyles.btn}>
-    Button
-  </a>
-)
-
-const actions = [actionButton]
-
-export function custom(items, itemType, onClick) {
-  return <UnderlineNav ariaAttr={ariaAttr} items={items} itemType={itemType} onClick={onClick} />
-}
-
-export function regular() {
-  return <UnderlineNav ariaAttr={ariaAttr} items={buttonItems} itemType={underlineNavItemType.button} onClick={action('onClick')} />
-}
-
-export function withActions() {
-  return (
-    <UnderlineNav ariaAttr={ariaAttr} items={anchorItems} itemType={underlineNavItemType.a} actions={actions} onClick={action('onClick')} />
-  )
-}
-
-export function rightAligned() {
-  return (
-    <UnderlineNav
-      ariaAttr={ariaAttr}
-      items={anchorItems}
-      itemType={underlineNavItemType.a}
-      align={underlineNavAlignmentType.right}
-      onClick={action('onClick')}
-    />
-  )
-}
-
-export function rightAlignedWithActions() {
-  return (
-    <UnderlineNav
-      ariaAttr={ariaAttr}
-      items={anchorItems}
-      itemType={underlineNavItemType.a}
-      align={underlineNavAlignmentType.right}
-      actions={actions}
-      onClick={action('onClick')}
-    />
-  )
-}
-
-export function withIcons() {
-  return <UnderlineNav ariaAttr={ariaAttr} items={iconItems} itemType={underlineNavItemType.a} onClick={action('onClick')} />
-}
-
-export function fullContainer() {
-  return (
-    <UnderlineNav
-      ariaAttr={ariaAttr}
-      items={fullContainerItems}
-      itemType={underlineNavItemType.a}
-      actions={actions}
-      fullContainer
-      onClick={action('onClick')}
-    />
-  )
-}

package/build/primer/Navigation/UnderlineNav/__tests__/UnderlineNav.int.test.ts

@@ -1,81 +0,0 @@
-import {
-  buttonItems,
-  regular,
-  withActions,
-  rightAligned,
-  rightAlignedWithActions,
-  withIcons,
-  fullContainer,
-} from './UnderlineNav.int.story'
-
-jest.mock('@papillonarts/library/array', () => ({
-  getIndexItems: () => {},
-  getIndexItemsWithSelected: () => {},
-}))
-
-jest.mock('@papillonarts/library/hooks', () => ({
-  useState: () => {},
-}))
-
-const libraryArrayMockObject = require('@papillonarts/library/array')
-const libraryHooksMockObject = require('@papillonarts/library/hooks')
-
-describe('<UnderlineNav />', () => {
-  let indexButtonItemsDataObject = [
-    { ...buttonItems[0], index: 0 },
-    { ...buttonItems[1], index: 1 },
-    { ...buttonItems[2], index: 2 },
-    { ...buttonItems[3], index: 3 },
-  ]
-
-  const newIndexButtonItemsWithSelectedDataObject = [
-    { ...buttonItems[0], index: 0, isSelected: true },
-    { ...buttonItems[1], index: 1, isSelected: false },
-    { ...buttonItems[2], index: 2, isSelected: false },
-    { ...buttonItems[3], index: 3, isSelected: false },
-  ]
-
-  const setIndexButtonItemsMockFn = jest.fn((indexButtonItems) => {
-    indexButtonItemsDataObject = indexButtonItems
-  })
-
-  function mockLibraryForButtonItems() {
-    jest.spyOn(libraryArrayMockObject, 'getIndexItems').mockReturnValue(indexButtonItemsDataObject)
-
-    jest.spyOn(libraryArrayMockObject, 'getIndexItemsWithSelected').mockReturnValue(newIndexButtonItemsWithSelectedDataObject)
-
-    jest.spyOn(libraryHooksMockObject, 'useState').mockImplementation(() => [indexButtonItemsDataObject, setIndexButtonItemsMockFn])
-  }
-
-  describe('Render', () => {
-    test('must match regular()', () => {
-      mockLibraryForButtonItems()
-      expect(global.renderToJSON(regular())).toMatchSnapshot()
-    })
-
-    test('must match withActions()', () => {
-      mockLibraryForButtonItems()
-      expect(global.renderToJSON(withActions())).toMatchSnapshot()
-    })
-
-    test('must match rightAligned()', () => {
-      mockLibraryForButtonItems()
-      expect(global.renderToJSON(rightAligned())).toMatchSnapshot()
-    })
-
-    test('must match rightAlignedWithActions()', () => {
-      mockLibraryForButtonItems()
-      expect(global.renderToJSON(rightAlignedWithActions())).toMatchSnapshot()
-    })
-
-    test('must match withIcons()', () => {
-      mockLibraryForButtonItems()
-      expect(global.renderToJSON(withIcons())).toMatchSnapshot()
-    })
-
-    test('must match fullContainer()', () => {
-      mockLibraryForButtonItems()
-      expect(global.renderToJSON(fullContainer())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Navigation/UnderlineNav/index.ts

@@ -1,2 +0,0 @@
-export { UnderlineNav } from './UnderlineNav'
-export { underlineNavItemType, underlineNavAlignmentType } from './UnderlineNav.prop'

package/build/primer/Navigation/index.ts

@@ -1,12 +0,0 @@
-import { Menu } from './Menu'
-import { TabNav, tabNavState } from './TabNav'
-import { UnderlineNav, underlineNavItemType, underlineNavAlignmentType } from './UnderlineNav'
-
-export const Navigation = {
-  Menu,
-  TabNav,
-  tabNavState,
-  UnderlineNav,
-  underlineNavItemType,
-  underlineNavAlignmentType,
-}

package/build/primer/Pagination/PreviousNext/PreviousNext.prop.ts

@@ -1,53 +0,0 @@
-export const previousNextState = {
-  active: 'active',
-  inactive: 'inactive',
-}
-
-export const defaultProps = {
-  className: null,
-  previous: {
-    rel: 'previous',
-    href: '#url',
-    ariaAttr: {
-      label: 'Previous',
-    },
-    text: '<',
-  },
-  next: {
-    rel: 'next',
-    href: '#url',
-    ariaAttr: {
-      label: 'Next',
-    },
-    text: '>',
-  },
-  state: previousNextState.active,
-}
-
-export interface AriaAttrType {
-  label: string
-}
-
-export interface PreviousNextType {
-  rel: string
-  href: string
-  ariaAttr: AriaAttrType
-  text: string
-}
-
-export interface currentPageType {
-  indexItems: React.ReactNode[]
-  currentIndex: number
-  canMoveBackwards: boolean
-  canMoveForward: boolean
-}
-
-export interface PreviousNextProps {
-  className?: string
-  ariaAttr: AriaAttrType
-  currentPage: currentPageType
-  previous?: PreviousNextType
-  next?: PreviousNextType
-  onClick: (value) => void
-  state?: typeof previousNextState.active | typeof previousNextState.inactive
-}