@papillonarts/components 0.10.0 → 0.11.0

package/build/primer/Icon/Icon.tsx

@@ -1,49 +0,0 @@
-import { IconProps, defaultProps, iconSize, iconAlign } from './Icon.prop'
-import { iconComponents } from './Icon.part'
-
-const defaultSize = [16, 16]
-
-export function Icon({
-  className = defaultProps.className,
-  ariaLabel = defaultProps.ariaLabel,
-  icon,
-  height = defaultProps.height,
-  width = defaultProps.width,
-  size = defaultProps.size,
-  fill = defaultProps.fill,
-  verticalAlign = defaultProps.verticalAlign,
-  ...otherProps
-}: IconProps) {
-  const widthHeight = defaultSize
-
-  const attrs = {
-    className,
-    'aria-hidden': ariaLabel ? 'false' : 'true',
-    'aria-label': ariaLabel,
-    height,
-    role: 'img',
-    viewBox: [0, 0, ...widthHeight].join(' '),
-    style: {},
-  }
-
-  if (width && height) {
-    Object.assign(attrs, { width, height })
-  } else {
-    const dims = { width: widthHeight[0], height: widthHeight[1] }
-    const given = width ? 'width' : 'height'
-    const computed = given === 'width' ? 'height' : 'width'
-    attrs[given] = width || height || iconSize[size] || size
-    attrs[computed] = attrs[given] * (dims[computed] / dims[given])
-  }
-
-  attrs.style = {
-    display: 'inline-block',
-    fill,
-    userSelect: 'none',
-    verticalAlign: iconAlign[verticalAlign] || verticalAlign,
-  }
-
-  const Element = iconComponents[icon]
-
-  return Element != null ? <Element className={className} {...attrs} {...otherProps} /> : null
-}

package/build/primer/Icon/__tests__/Icon.int.story.tsx

@@ -1,58 +0,0 @@
-import { withTests } from '@storybook/addon-jest'
-import { iconNameKeys, iconNameKeysDefault, iconSizeKeys, iconSizeKeysDefault } from '../Icon.prop'
-import results from '../../../../../../.jest-test-results.json'
-
-const Icon =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Icon.Icon
-    : require('../../../../build').primer.Icon.Icon
-
-export default {
-  title: 'Primer/Atom/Icon',
-  component: Icon,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Icon.int.test.js'] },
-  argTypes: {
-    className: {
-      control: { type: 'text' },
-      defaultValue: '',
-    },
-    icon: {
-      control: {
-        type: 'select',
-        options: iconNameKeys,
-      },
-      defaultValue: iconNameKeysDefault,
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: iconSizeKeys,
-      },
-      defaultValue: iconSizeKeysDefault,
-    },
-  },
-  excludeStories: ['custom'],
-}
-
-export function regular({ className = '', icon = iconNameKeysDefault, size = iconSizeKeysDefault, ...rest }) {
-  return <Icon className={className} icon={icon} size={size} {...rest} />
-}
-
-export function allIcons() {
-  return (
-    <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/primer/Icon/__tests__/Icon.int.test.ts

@@ -1,13 +0,0 @@
-import { regular, allIcons } from './Icon.int.story'
-
-describe('<Icon />', () => {
-  describe('Render', () => {
-    test('must match regular()', () => {
-      expect(global.renderToJSON(regular({}))).toMatchSnapshot()
-    })
-
-    test('must match allIcons()', () => {
-      expect(global.renderToJSON(allIcons())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Icon/index.ts

@@ -1,2 +0,0 @@
-export { Icon } from './Icon'
-export { iconName, iconSize } from './Icon.prop'

package/build/primer/Label/Label.prop.ts

@@ -1,31 +0,0 @@
-export const labelVariant = {
-  regular: 'regular',
-  state: 'state',
-  counter: 'counter',
-  issue: 'issue',
-}
-
-export const labelBackgroundColor = {
-  blue: 'blue',
-  red: 'red',
-  green: 'green',
-}
-
-export const labelTextColor = {
-  white: 'white',
-}
-
-export const defaultProps = {
-  className: null,
-  variant: labelVariant.issue,
-  backgroundColor: labelBackgroundColor.blue,
-  textColor: labelTextColor.white,
-}
-
-export interface LabelProps {
-  className?: string
-  text: string
-  variant?: typeof labelVariant.regular | typeof labelVariant.state | typeof labelVariant.counter | typeof labelVariant.issue
-  backgroundColor?: typeof labelBackgroundColor.blue | typeof labelBackgroundColor.red | typeof labelBackgroundColor.green
-  textColor?: typeof labelTextColor.white
-}

package/build/primer/Label/Label.tsx

@@ -1,27 +0,0 @@
-import cx from 'classnames'
-import colorStyles from '@papillonarts/css/build/primer/utilities/colors.scss'
-import { LabelProps, defaultProps, labelVariant, labelBackgroundColor, labelTextColor } from './Label.prop'
-import labelsStyles from './labels.scss'
-import issueLabelsStyles from './issue-labels.scss'
-
-export function Label({
-  className = defaultProps.className,
-  text,
-  variant = defaultProps.variant,
-  backgroundColor = defaultProps.backgroundColor,
-  textColor = defaultProps.textColor,
-}: LabelProps) {
-  return (
-    <span
-      title={`Label: ${text}`}
-      className={cx(className, {
-        [labelsStyles.Label]: variant === labelVariant.regular,
-        [issueLabelsStyles.IssueLabel]: variant === labelVariant.issue,
-        [colorStyles['bg-blue']]: backgroundColor === labelBackgroundColor.blue,
-        [colorStyles['text-white']]: textColor === labelTextColor.white,
-      })}
-    >
-      {text}
-    </span>
-  )
-}

package/build/primer/Label/__tests__/Label.int.story.tsx

@@ -1,19 +0,0 @@
-import { withTests } from '@storybook/addon-jest'
-import results from '../../../../../../.jest-test-results.json'
-
-const Label =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Label
-    : require('../../../../build').primer.Label
-
-export default {
-  title: 'Primer/Atom/Label',
-  component: Label,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Label.int.test.js'] },
-  excludeStories: ['custom'],
-}
-
-export function regular() {
-  return <Label text="default label" />
-}

package/build/primer/Label/__tests__/Label.int.test.ts

@@ -1,9 +0,0 @@
-import { regular } from './Label.int.story'
-
-describe('<Label />', () => {
-  describe('Render', () => {
-    test('must match regular()', () => {
-      expect(global.renderToJSON(regular())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Label/index.ts

@@ -1 +0,0 @@
-export { Label } from './Label'

package/build/primer/Loader/Loader.prop.ts

@@ -1,16 +0,0 @@
-export const loaderVariant = {
-  heading: 'heading',
-  text: 'text',
-  label: 'label',
-  button: 'button',
-}
-
-export const defaultProps = {
-  className: null,
-}
-
-export interface LoaderProps {
-  className?: string
-  variant: typeof loaderVariant.heading | typeof loaderVariant.text | typeof loaderVariant.label | typeof loaderVariant.button
-  text: string
-}

package/build/primer/Loader/Loader.tsx

@@ -1,43 +0,0 @@
-import cx from 'classnames'
-import colorStyles from '@papillonarts/css/build/primer/utilities/colors.scss'
-import marginStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
-import { LoaderProps, defaultProps, loaderVariant } from './Loader.prop'
-import styles from './Loader.scss'
-import branchNameStyles from '../BranchName/branch-name.scss'
-import buttonStyles from '../Button/Button.scss'
-import labelStyles from '../Label/labels.scss'
-
-export function Loader({ className = defaultProps.className, variant, text }: LoaderProps) {
-  switch (variant) {
-    case loaderVariant.heading:
-      return (
-        <h2 className={className}>
-          <span>{text}</span>
-          <span className={styles.AnimatedEllipsis} />
-        </h2>
-      )
-    case loaderVariant.text:
-      return (
-        <span className={cx(branchNameStyles['branch-name'], marginStyles['mt-2'])}>
-          <span>{text}</span>
-          <span className={styles.AnimatedEllipsis} />
-        </span>
-      )
-    case loaderVariant.label:
-      return (
-        <span className={cx(labelStyles.Label, colorStyles['bg-blue'], marginStyles['mt-3'])}>
-          <span>{text}</span>
-          <span className={styles.AnimatedEllipsis} />
-        </span>
-      )
-    case loaderVariant.button:
-      return (
-        <button type="button" className={cx(buttonStyles.btn, marginStyles['mt-3'])} aria-disabled="true">
-          <span>{text}</span>
-          <span className={styles.AnimatedEllipsis} />
-        </button>
-      )
-    default:
-      return null
-  }
-}

package/build/primer/Loader/__tests__/Loader.int.story.tsx

@@ -1,34 +0,0 @@
-import { withTests } from '@storybook/addon-jest'
-import { loaderVariant } from '../Loader.prop'
-import results from '../../../../../../.jest-test-results.json'
-
-const Loader =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Loader.Loader
-    : require('../../../../build').primer.Loader.Loader
-
-export default {
-  title: 'Primer/Atom/Loader',
-  component: Loader,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Loader.int.test.js'] },
-  excludeStories: ['textValue', 'custom'],
-}
-
-const textValue = 'Loading'
-
-export function heading() {
-  return <Loader variant={loaderVariant.heading} text={textValue} />
-}
-
-export function text() {
-  return <Loader variant={loaderVariant.text} text={textValue} />
-}
-
-export function label() {
-  return <Loader variant={loaderVariant.label} text={textValue} />
-}
-
-export function button() {
-  return <Loader variant={loaderVariant.button} text={textValue} />
-}

package/build/primer/Loader/__tests__/Loader.int.test.ts

@@ -1,21 +0,0 @@
-import { heading, text, label, button } from './Loader.int.story'
-
-describe('<Loader />', () => {
-  describe('Render', () => {
-    test('must match heading()', () => {
-      expect(global.renderToJSON(heading())).toMatchSnapshot()
-    })
-
-    test('must match text()', () => {
-      expect(global.renderToJSON(text())).toMatchSnapshot()
-    })
-
-    test('must match label()', () => {
-      expect(global.renderToJSON(label())).toMatchSnapshot()
-    })
-
-    test('must match button()', () => {
-      expect(global.renderToJSON(button())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Loader/index.ts

@@ -1,2 +0,0 @@
-export { Loader } from './Loader'
-export { loaderVariant } from './Loader.prop'

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

@@ -1,26 +0,0 @@
-export const defaultProps = {
-  className: null,
-  heading: null,
-}
-
-export interface AriaAttrType {
-  label: string
-  labelledBy: 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 MenuProps {
-  className?: string
-  heading?: string
-  ariaAttr: AriaAttrType
-  items: ItemType[]
-  onClick: (value) => void
-}

package/build/primer/Navigation/Menu/Menu.tsx

@@ -1,42 +0,0 @@
-import cx from 'classnames'
-import { v1 as uuidv1 } from 'uuid'
-import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
-import { useState } from '@papillonarts/library/hooks'
-import { MenuProps, defaultProps } from './Menu.prop'
-import styles from './Menu.scss'
-import { Icon, iconSize } from '../../Icon'
-
-export function Menu({ className = defaultProps.className, heading = defaultProps.heading, ariaAttr, items, onClick }: MenuProps) {
-  const [indexItems, setIndexItems] = useState(getIndexItems(items))
-  const { label, labelledBy, current } = ariaAttr
-
-  return (
-    <nav className={cx(className, styles.menu)} aria-label={label} aria-labelledby={labelledBy}>
-      {heading && <span className={styles['menu-heading']}>{heading}</span>}
-      {indexItems.map((indexItem) => {
-        const { href, icon, text, html, isSelected } = indexItem
-
-        const itemOtherProps = isSelected ? { ...{ 'aria-current': current } } : null
-
-        return (
-          <a
-            key={uuidv1()}
-            onClick={(e) => {
-              e.preventDefault()
-              const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
-              setIndexItems(newIndexItems)
-              onClick(newIndexItems)
-            }}
-            className={styles['menu-item']}
-            href={href}
-            {...itemOtherProps}
-          >
-            {icon && <Icon className={styles.octicon} icon={icon} size={iconSize.small} />}
-            {html || null}
-            {text}
-          </a>
-        )
-      })}
-    </nav>
-  )
-}

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

@@ -1,55 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { iconName } from '../../../Icon/Icon.prop'
-import results from '../../../../../../../.jest-test-results.json'
-
-const Menu =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../../index').primer.Navigation.Menu
-    : require('../../../../../build').primer.Navigation.Menu
-
-export default {
-  title: 'Primer/Molecule/Navigation/Menu',
-  component: Menu,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Menu.int.test.js'] },
-  excludeStories: ['heading', 'ariaAttr', 'defaultItems', 'iconItems', 'custom'],
-}
-
-export const heading = 'Menu heading'
-
-export const ariaAttr = {
-  label: 'Person settings',
-  labelledBy: 'menu-heading',
-  current: 'page',
-}
-
-export const defaultItems = [
-  { href: '#url', text: 'Account', isSelected: true },
-  { href: '#url', text: 'Profile', isSelected: false },
-  { href: '#url', text: 'Emails', isSelected: false },
-  { href: '#url', text: 'Notifications', isSelected: false },
-]
-
-export const iconItems = [
-  { href: '#url', icon: iconName.Tools16, text: 'Account', isSelected: true },
-  { href: '#url', icon: iconName.Person16, text: 'Profile', isSelected: false },
-  { href: '#url', icon: iconName.Mail16, text: 'Emails', isSelected: false },
-  { href: '#url', icon: iconName.Broadcast16, text: 'Notifications', isSelected: false },
-]
-
-export function custom(onClick) {
-  return <Menu ariaAttr={ariaAttr} items={defaultItems} onClick={onClick} />
-}
-
-export function regular() {
-  return <Menu ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} />
-}
-
-export function withIcons() {
-  return <Menu ariaAttr={ariaAttr} items={iconItems} onClick={action('onClick')} />
-}
-
-export function withHeading() {
-  return <Menu heading={heading} ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} />
-}

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

@@ -1,57 +0,0 @@
-import { defaultItems as items, regular, withIcons, withHeading } from './Menu.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('<Menu />', () => {
-  let indexItemsDataObject = [
-    { ...items[0], index: 0 },
-    { ...items[1], index: 1 },
-    { ...items[2], index: 2 },
-    { ...items[3], index: 3 },
-  ]
-
-  const newIndexItemsWithSelectedDataObject = [
-    { ...items[0], index: 0, isSelected: true },
-    { ...items[1], index: 1, isSelected: false },
-    { ...items[2], index: 2, isSelected: false },
-    { ...items[3], index: 3, isSelected: false },
-  ]
-
-  const setIndexItemsMockFn = jest.fn((indexItems) => {
-    indexItemsDataObject = indexItems
-  })
-
-  beforeEach(() => {
-    jest.spyOn(libraryArrayMockObject, 'getIndexItems').mockReturnValue(indexItemsDataObject)
-
-    jest.spyOn(libraryArrayMockObject, 'getIndexItemsWithSelected').mockReturnValue(newIndexItemsWithSelectedDataObject)
-
-    jest.spyOn(libraryHooksMockObject, 'useState').mockImplementation(() => [indexItemsDataObject, setIndexItemsMockFn])
-  })
-
-  afterEach(() => jest.clearAllMocks())
-
-  describe('Render', () => {
-    test('must match regular()', () => {
-      expect(global.renderToJSON(regular())).toMatchSnapshot()
-    })
-
-    test('must match withIcons()', () => {
-      expect(global.renderToJSON(withIcons())).toMatchSnapshot()
-    })
-
-    test('must match withHeading()', () => {
-      expect(global.renderToJSON(withHeading())).toMatchSnapshot()
-    })
-  })
-})

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

@@ -1 +0,0 @@
-export { Menu } from './Menu'

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

@@ -1,39 +0,0 @@
-export const tabNavState = {
-  active: 'active',
-  inactive: 'inactive',
-}
-
-export const defaultProps = {
-  className: null,
-  actions: null,
-  children: null,
-  state: tabNavState.active,
-}
-
-export interface AriaAttrType {
-  label: string
-  current: boolean | false | true | 'page' | 'step' | 'location' | 'date' | 'time'
-}
-
-export interface LinkType {
-  component: React.ReactNode
-}
-
-export interface ItemType {
-  href: string
-  text: string
-  link: LinkType
-  isSelected: boolean
-  enabled: boolean
-  visible: boolean
-}
-
-export interface TabNavProps {
-  className?: string
-  ariaAttr: AriaAttrType
-  items: ItemType[]
-  actions?: React.ReactNode[]
-  onClick: (value) => void
-  children?: React.ReactNode
-  state?: typeof tabNavState.active | typeof tabNavState.inactive
-}

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

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