@papillonarts/components 0.8.0 → 0.9.0

package/build/primer/Navigation/TabNav/TabNav.tsx

@@ -0,0 +1,105 @@
+import { Fragment } from 'react'
+import cx from 'classnames'
+import { v1 as uuidv1 } from 'uuid'
+import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
+import { TabNavProps, defaultProps, tabNavState } from './TabNav.prop'
+import styles from './TabNav.scss'
+
+export function TabNav({
+  className = defaultProps.className,
+  ariaAttr,
+  items,
+  actions = defaultProps.actions,
+  onClick,
+  children = defaultProps.children,
+  state = defaultProps.state,
+}: TabNavProps) {
+  if (!items) {
+    return null
+  }
+
+  const { label, current } = ariaAttr
+  const indexItems = getIndexItems(items)
+
+  function renderActions() {
+    return <Fragment>{actions}</Fragment> // eslint-disable-line react/jsx-no-useless-fragment
+  }
+
+  return (
+    <div
+      className={cx(className, styles.tabnav, {
+        [styles['tabnav-inactive']]: state === tabNavState.inactive,
+      })}
+    >
+      {actions && renderActions()}
+      <nav className={styles['tabnav-tabs']} aria-label={label}>
+        {indexItems.map((indexItem) => {
+          const { href, text, link, isSelected, enabled, visible } = indexItem
+
+          const itemOtherProps = isSelected ? { ...{ 'aria-current': current } } : null
+
+          if (href && text) {
+            return (
+              <a
+                key={uuidv1()}
+                onClick={() => {
+                  if (!enabled) {
+                    return
+                  }
+
+                  const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
+                  onClick({
+                    ariaAttr,
+                    items: newIndexItems.map(
+                      (newIndexItem) => (({ href, text, isSelected }) => ({ href, text, isSelected, enabled, visible }))(newIndexItem), // eslint-disable-line
+                    ),
+                  })
+                }}
+                className={styles['tabnav-tab']}
+                href={href}
+                {...itemOtherProps}
+              >
+                {text}
+              </a>
+            )
+          }
+
+          if (link) {
+            const Link = link.component
+
+            return (
+              <Link
+                key={uuidv1()}
+                onClick={() => {
+                  if (!enabled) {
+                    return
+                  }
+
+                  const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
+                  onClick({
+                    ariaAttr,
+                    items: newIndexItems.map(
+                      (newIndexItem) =>
+                        (({ link, isSelected, enabled, visible }) => ({ link, isSelected, enabled, visible }))(newIndexItem), // eslint-disable-line
+                    ),
+                  })
+                }}
+                className={cx(className, styles['tabnav-tab'], {
+                  [styles['tabnav-tab-inactive']]: enabled === false,
+                  [styles['tabnav-tab-hidden']]: visible === false,
+                })}
+                {...itemOtherProps}
+                {...link.props}
+              >
+                {link.children}
+              </Link>
+            )
+          }
+
+          return null
+        })}
+      </nav>
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,168 @@
+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

@@ -0,0 +1,55 @@
+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

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

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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,140 @@
+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

@@ -0,0 +1,81 @@
+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()
+    })
+  })
+})