@papillonarts/components 0.9.0 → 0.11.0

package/build/primer/Breadcrumb/Breadcrumb.tsx

@@ -1,57 +0,0 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import cx from 'classnames'
-import { v1 as uuidv1 } from 'uuid'
-import utilityStyles from '@papillonarts/css/build/primer/utilities/typography.scss'
-import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
-import { BreadcrumbProps, defaultProps, breadcrumbState } from './Breadcrumb.prop'
-import styles from './Breadcrumb.scss'
-
-export function Breadcrumb({ className = defaultProps.className, ariaAttr, items, onClick, state = defaultProps.state }: BreadcrumbProps) {
-  const indexItems = getIndexItems(items)
-  const { label, current } = ariaAttr
-
-  return (
-    <nav
-      className={cx(className, {
-        [styles['breadcrumb-inactive']]: state === breadcrumbState.inactive,
-      })}
-      aria-label={label}
-    >
-      <ol>
-        {indexItems.map((indexItem) => {
-          const { href, text, isSelected } = indexItem
-
-          const itemOtherProps = isSelected ? { ...{ 'aria-current': current } } : null
-
-          return (
-            <li
-              key={uuidv1()}
-              onClick={(e) => {
-                e.preventDefault()
-                const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
-                onClick({
-                  active: text,
-                  ariaAttr,
-                  items: newIndexItems.map(
-                    (newIndexItem) => (({ href, text, isSelected }) => ({ href, text, isSelected }))(newIndexItem), // eslint-disable-line
-                  ),
-                })
-              }}
-              className={
-                !isSelected
-                  ? cx(styles['breadcrumb-item'])
-                  : cx(styles['breadcrumb-item'], styles['breadcrumb-item-selected'], utilityStyles['text-gray'])
-              }
-              // @ts-ignore
-              href={href}
-              {...itemOtherProps}
-            >
-              {isSelected ? text : <a href={href}>{text}</a>}
-            </li>
-          )
-        })}
-      </ol>
-    </nav>
-  )
-}

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

@@ -1,40 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { breadcrumbState } from '../Breadcrumb.prop'
-import results from '../../../../../../.jest-test-results.json'
-
-const Breadcrumb =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Breadcrumb.Breadcrumb
-    : require('../../../../build').primer.Breadcrumb.Breadcrumb
-
-export default {
-  title: 'Primer/Atom/Breadcrumb',
-  component: Breadcrumb,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Breadcrumb.int.test.js'] },
-  excludeStories: ['ariaAttr', 'items', 'custom'],
-}
-
-export const ariaAttr = {
-  label: 'Breadcrumb',
-  current: 'page',
-}
-
-export const items = [
-  { href: '/fantastic-folder', text: 'Fantastic Folder', isSelected: false },
-  { href: '/fantastic-folder/another-fantastic-folder', text: 'Another Fantastic folder', isSelected: false },
-  { href: '', text: 'One More Fantastic Folder', isSelected: true },
-]
-
-export function custom(onClick) {
-  return <Breadcrumb ariaAttr={ariaAttr} items={items} onClick={onClick} />
-}
-
-export function regular() {
-  return <Breadcrumb ariaAttr={ariaAttr} items={items} onClick={action('onClick')} />
-}
-
-export function inactive() {
-  return <Breadcrumb ariaAttr={ariaAttr} items={items} onClick={action('onClick')} state={breadcrumbState.inactive} />
-}

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

@@ -1,40 +0,0 @@
-import { items, regular, inactive } from './Breadcrumb.int.story'
-
-jest.mock('@papillonarts/library/array', () => ({
-  getIndexItems: () => {},
-  getIndexItemsWithSelected: () => {},
-}))
-
-const libraryArrayMockObject = require('@papillonarts/library/array')
-
-describe('<Breadcrumb />', () => {
-  const indexItemsDataObject = [
-    { ...items[0], index: 0 },
-    { ...items[1], index: 1 },
-    { ...items[2], index: 2 },
-  ]
-
-  const newIndexItemsWithSelectedDataObject = [
-    { ...items[0], index: 0, isSelected: true },
-    { ...items[1], index: 1, isSelected: false },
-    { ...items[2], index: 2, isSelected: false },
-  ]
-
-  beforeEach(() => {
-    jest.spyOn(libraryArrayMockObject, 'getIndexItems').mockReturnValue(indexItemsDataObject)
-
-    jest.spyOn(libraryArrayMockObject, 'getIndexItemsWithSelected').mockReturnValue(newIndexItemsWithSelectedDataObject)
-  })
-
-  afterEach(() => jest.clearAllMocks())
-
-  describe('Render', () => {
-    test('must match regular()', () => {
-      expect(global.renderToJSON(regular())).toMatchSnapshot()
-    })
-
-    test('must match inactive()', () => {
-      expect(global.renderToJSON(inactive())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Breadcrumb/index.ts

@@ -1,2 +0,0 @@
-export { Breadcrumb } from './Breadcrumb'
-export { breadcrumbState } from './Breadcrumb.prop'

package/build/primer/Button/Button.prop.ts

@@ -1,77 +0,0 @@
-import { IconNameType } from '../Icon/Icon.prop'
-
-export const buttonElement = {
-  button: 'button',
-  a: 'a',
-}
-
-export const buttonVariant = {
-  default: 'default',
-  primary: 'primary',
-  danger: 'danger',
-  outline: 'outline',
-  blue: 'blue',
-  orange: 'orange',
-}
-
-export const buttonSize = {
-  small: 'small',
-  normal: 'normal',
-  large: 'large',
-}
-
-export const buttonState = {
-  active: 'active',
-  inactive: 'inactive',
-}
-
-export const iconAlignment = {
-  left: 'left',
-  right: 'right',
-}
-
-export const buttonInputType = {
-  file: 'file',
-  submit: 'submit',
-}
-
-export const defaultProps = {
-  dataTest: null,
-  id: null,
-  className: null,
-  element: buttonElement.button,
-  href: null,
-  variant: buttonVariant.default,
-  size: buttonSize.normal,
-  state: buttonState.active,
-  icon: null,
-  inputType: null,
-  autoFocus: false,
-}
-
-export interface IconType {
-  name?: IconNameType
-  alignment?: typeof iconAlignment.left | typeof iconAlignment.right
-}
-
-export interface ButtonProps {
-  dataTest?: string
-  id?: string
-  className?: string
-  element?: typeof buttonElement.button | typeof buttonElement.a
-  href?: string
-  text: string
-  variant?:
-    | typeof buttonVariant.default
-    | typeof buttonVariant.primary
-    | typeof buttonVariant.danger
-    | typeof buttonVariant.outline
-    | typeof buttonVariant.blue
-    | typeof buttonVariant.orange
-  size?: typeof buttonSize.small | typeof buttonSize.normal | typeof buttonSize.large
-  state?: typeof buttonState.active | typeof buttonState.inactive
-  icon?: IconType
-  onClick: (value?: string) => void
-  inputType?: typeof buttonInputType.file | typeof buttonInputType.submit
-  autoFocus?: boolean
-}

package/build/primer/Button/Button.tsx

@@ -1,91 +0,0 @@
-import cx from 'classnames'
-import { useRef } from '@papillonarts/library/hooks'
-import utilityStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
-import {
-  ButtonProps,
-  defaultProps,
-  buttonElement,
-  buttonVariant,
-  buttonSize,
-  buttonState,
-  iconAlignment,
-  buttonInputType,
-} from './Button.prop'
-import styles from './Button.scss'
-import { Icon, iconSize } from '../Icon'
-
-export function Button({
-  dataTest = defaultProps.dataTest,
-  id = defaultProps.id,
-  className = defaultProps.className,
-  element = defaultProps.element,
-  href = defaultProps.href,
-  text,
-  variant = defaultProps.variant,
-  size = defaultProps.size,
-  state = defaultProps.state,
-  icon = defaultProps.icon,
-  onClick,
-  inputType = defaultProps.inputType,
-  autoFocus = defaultProps.autoFocus,
-}: ButtonProps) {
-  const stateProps = state === buttonState.inactive ? { ...{ disabled: 'true', 'aria-disabled': 'true' } } : null
-  const fileInputRef = useRef(null)
-
-  if (element === buttonElement.button) {
-    return (
-      // @ts-ignore
-      <button
-        data-test={dataTest}
-        id={id}
-        className={cx(className, styles.btn, {
-          [styles['btn-sm']]: size === buttonSize.small,
-          [styles['btn-large']]: size === buttonSize.large,
-          [styles['btn-primary']]: variant === buttonVariant.primary,
-          [styles['btn-danger']]: variant === buttonVariant.danger,
-          [styles['btn-outline']]: variant === buttonVariant.outline,
-          [styles['btn-blue']]: variant === buttonVariant.blue,
-          [styles['btn-orange']]: variant === buttonVariant.orange,
-          [styles['button-inactive']]: state === buttonState.inactive,
-        })}
-        type="button"
-        autoFocus={autoFocus} // eslint-disable-line
-        onClick={() => {
-          if (inputType === buttonInputType.file) {
-            fileInputRef.current.click()
-          }
-          if (!inputType) {
-            onClick()
-          }
-        }}
-        {...stateProps}
-      >
-        {icon?.alignment === iconAlignment.left && <Icon className={utilityStyles['mr-2']} icon={icon.name} size={iconSize.small} />}
-        {text}
-        {icon?.alignment === iconAlignment.right && <Icon className={utilityStyles['ml-2']} icon={icon.name} size={iconSize.small} />}
-        {inputType && inputType === buttonInputType.file && (
-          <input
-            onChange={() => {
-              onClick(fileInputRef.current.files)
-            }}
-            ref={fileInputRef}
-            type="file"
-            autoFocus={autoFocus} // eslint-disable-line
-            multiple
-            style={{ display: 'none' }}
-          />
-        )}
-      </button>
-    )
-  }
-
-  // @ts-ignore
-  if (element === buttonElement.a) {
-    return (
-      // @ts-ignore
-      <a className={cx(className, styles.btn)} href={href} role="button" onClick={onClick} {...stateProps}>
-        {text}
-      </a>
-    )
-  }
-}

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

@@ -1,173 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { buttonElement, buttonVariant, buttonSize, buttonState, iconAlignment } from '../Button.prop'
-import { iconName } from '../../Icon/Icon.prop'
-import results from '../../../../../../.jest-test-results.json'
-
-const Button =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Button.Button
-    : require('../../../../build').primer.Button.Button
-
-const plusIconLeftAligned = { name: iconName.Plus16, alignment: iconAlignment.left }
-const plusIconRightAligned = { name: iconName.Plus16, alignment: iconAlignment.right }
-
-export default {
-  title: 'Primer/Atom/Button',
-  component: Button,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Button.int.test.js'] },
-  excludeStories: ['custom'],
-}
-
-export function custom(element, onClick) {
-  return <Button text="Custom button" element={element} onClick={onClick} />
-}
-
-export function defaultNormal() {
-  return <Button text="Default normal button" onClick={action('onClick')} />
-}
-
-export function defaultSmall() {
-  return <Button text="Default small button" size={buttonSize.small} onClick={action('onClick')} />
-}
-
-export function defaultLarge() {
-  return <Button text="Default large button" size={buttonSize.large} onClick={action('onClick')} />
-}
-
-export function defaultInactive() {
-  return <Button text="Default inactive button" state={buttonState.inactive} onClick={action('onClick')} />
-}
-
-export function defaultIconLeftAligned() {
-  return <Button text="Default icon button" icon={plusIconLeftAligned} onClick={action('onClick')} />
-}
-
-export function defaultIconRightAligned() {
-  return <Button text="Default icon button" icon={plusIconRightAligned} onClick={action('onClick')} />
-}
-
-export function defaultLink() {
-  return <Button element={buttonElement.a} href="#url" text="Default link button" onClick={action('onClick')} />
-}
-
-export function primary() {
-  return <Button text="Primary button" variant={buttonVariant.primary} onClick={action('onClick')} />
-}
-
-export function primarySmall() {
-  return <Button text="Primary small button" variant={buttonVariant.primary} size={buttonSize.small} onClick={action('onClick')} />
-}
-
-export function primaryLarge() {
-  return <Button text="Primary large button" variant={buttonVariant.primary} size={buttonSize.large} onClick={action('onClick')} />
-}
-
-export function primaryInactive() {
-  return <Button text="Primary inactive button" variant={buttonVariant.primary} state={buttonState.inactive} onClick={action('onClick')} />
-}
-
-export function primaryIconLeftAligned() {
-  return <Button text="Primary icon button" variant={buttonVariant.primary} icon={plusIconLeftAligned} onClick={action('onClick')} />
-}
-
-export function primaryIconRightAligned() {
-  return <Button text="Primary icon button" variant={buttonVariant.primary} icon={plusIconRightAligned} onClick={action('onClick')} />
-}
-
-export function danger() {
-  return <Button text="Danger button" variant={buttonVariant.danger} onClick={action('onClick')} />
-}
-
-export function dangerSmall() {
-  return <Button text="Danger small button" variant={buttonVariant.danger} size={buttonSize.small} onClick={action('onClick')} />
-}
-
-export function dangerLarge() {
-  return <Button text="Danger large button" variant={buttonVariant.danger} size={buttonSize.large} onClick={action('onClick')} />
-}
-
-export function dangerInactive() {
-  return <Button text="Danger inactive button" variant={buttonVariant.danger} state={buttonState.inactive} onClick={action('onClick')} />
-}
-
-export function dangerIconLeftAligned() {
-  return <Button text="Danger icon button" variant={buttonVariant.danger} icon={plusIconLeftAligned} onClick={action('onClick')} />
-}
-
-export function dangerIconRightAligned() {
-  return <Button text="Danger icon button" variant={buttonVariant.danger} icon={plusIconRightAligned} onClick={action('onClick')} />
-}
-
-export function outline() {
-  return <Button text="Outline button" variant={buttonVariant.outline} onClick={action('onClick')} />
-}
-
-export function outlineSmall() {
-  return <Button text="Outline small button" variant={buttonVariant.outline} size={buttonSize.small} onClick={action('onClick')} />
-}
-
-export function outlineLarge() {
-  return <Button text="Outline large button" variant={buttonVariant.outline} size={buttonSize.large} onClick={action('onClick')} />
-}
-
-export function outlineInactive() {
-  return <Button text="Outline inactive button" variant={buttonVariant.outline} state={buttonState.inactive} onClick={action('onClick')} />
-}
-
-export function outlineIconLeftAligned() {
-  return <Button text="Outline icon button" variant={buttonVariant.outline} icon={plusIconLeftAligned} onClick={action('onClick')} />
-}
-
-export function outlineIconRightAligned() {
-  return <Button text="Outline icon button" variant={buttonVariant.outline} icon={plusIconRightAligned} onClick={action('onClick')} />
-}
-
-export function blue() {
-  return <Button text="Blue button" variant={buttonVariant.blue} onClick={action('onClick')} />
-}
-
-export function blueSmall() {
-  return <Button text="Blue small button" variant={buttonVariant.blue} size={buttonSize.small} onClick={action('onClick')} />
-}
-
-export function blueLarge() {
-  return <Button text="Blue large button" variant={buttonVariant.blue} size={buttonSize.large} onClick={action('onClick')} />
-}
-
-export function blueInactive() {
-  return <Button text="Blue inactive button" variant={buttonVariant.blue} state={buttonState.inactive} onClick={action('onClick')} />
-}
-
-export function blueIconLeftAligned() {
-  return <Button text="Blue icon button" variant={buttonVariant.blue} icon={plusIconLeftAligned} onClick={action('onClick')} />
-}
-
-export function blueIconRightAligned() {
-  return <Button text="Blue icon button" variant={buttonVariant.blue} icon={plusIconRightAligned} onClick={action('onClick')} />
-}
-
-export function orange() {
-  return <Button text="Orange button" variant={buttonVariant.orange} onClick={action('onClick')} />
-}
-
-export function orangeSmall() {
-  return <Button text="Orange small button" variant={buttonVariant.orange} size={buttonSize.small} onClick={action('onClick')} />
-}
-
-export function orangeLarge() {
-  return <Button text="Orange large button" variant={buttonVariant.orange} size={buttonSize.large} onClick={action('onClick')} />
-}
-
-export function orangeInactive() {
-  return <Button text="Orange inactive button" variant={buttonVariant.orange} state={buttonState.inactive} onClick={action('onClick')} />
-}
-
-export function orangeIconLeftAligned() {
-  return <Button text="Orange icon button" variant={buttonVariant.orange} icon={plusIconLeftAligned} onClick={action('onClick')} />
-}
-
-export function orangeIconRightAligned() {
-  return <Button text="Orange icon button" variant={buttonVariant.orange} icon={plusIconRightAligned} onClick={action('onClick')} />
-}

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

@@ -1,191 +0,0 @@
-import {
-  defaultNormal,
-  defaultSmall,
-  defaultLarge,
-  defaultInactive,
-  defaultIconLeftAligned,
-  defaultIconRightAligned,
-  defaultLink,
-  primary,
-  primarySmall,
-  primaryLarge,
-  primaryInactive,
-  primaryIconLeftAligned,
-  primaryIconRightAligned,
-  danger,
-  dangerSmall,
-  dangerLarge,
-  dangerInactive,
-  dangerIconLeftAligned,
-  dangerIconRightAligned,
-  outline,
-  outlineSmall,
-  outlineLarge,
-  outlineInactive,
-  outlineIconLeftAligned,
-  outlineIconRightAligned,
-  blue,
-  blueSmall,
-  blueLarge,
-  blueInactive,
-  blueIconLeftAligned,
-  blueIconRightAligned,
-  orange,
-  orangeSmall,
-  orangeLarge,
-  orangeInactive,
-  orangeIconLeftAligned,
-  orangeIconRightAligned,
-} from './Button.int.story'
-
-describe('<Button />', () => {
-  describe('Render', () => {
-    test('must match defaultNormal()', () => {
-      expect(global.renderToJSON(defaultNormal())).toMatchSnapshot()
-    })
-
-    test('must match defaultSmall()', () => {
-      expect(global.renderToJSON(defaultSmall())).toMatchSnapshot()
-    })
-
-    test('must match defaultLarge()', () => {
-      expect(global.renderToJSON(defaultLarge())).toMatchSnapshot()
-    })
-
-    test('must match defaultInactive()', () => {
-      expect(global.renderToJSON(defaultInactive())).toMatchSnapshot()
-    })
-
-    test('must match defaultIconLeftAligned()', () => {
-      expect(global.renderToJSON(defaultIconLeftAligned())).toMatchSnapshot()
-    })
-
-    test('must match defaultIconRightAligned()', () => {
-      expect(global.renderToJSON(defaultIconRightAligned())).toMatchSnapshot()
-    })
-
-    test('must match defaultLink()', () => {
-      expect(global.renderToJSON(defaultLink())).toMatchSnapshot()
-    })
-
-    test('must match primary()', () => {
-      expect(global.renderToJSON(primary())).toMatchSnapshot()
-    })
-
-    test('must match primarySmall()', () => {
-      expect(global.renderToJSON(primarySmall())).toMatchSnapshot()
-    })
-
-    test('must match primaryLarge()', () => {
-      expect(global.renderToJSON(primaryLarge())).toMatchSnapshot()
-    })
-
-    test('must match primaryInactive()', () => {
-      expect(global.renderToJSON(primaryInactive())).toMatchSnapshot()
-    })
-
-    test('must match primaryIconLeftAligned()', () => {
-      expect(global.renderToJSON(primaryIconLeftAligned())).toMatchSnapshot()
-    })
-
-    test('must match primaryIconRightAligned()', () => {
-      expect(global.renderToJSON(primaryIconRightAligned())).toMatchSnapshot()
-    })
-
-    test('must match danger()', () => {
-      expect(global.renderToJSON(danger())).toMatchSnapshot()
-    })
-
-    test('must match dangerSmall()', () => {
-      expect(global.renderToJSON(dangerSmall())).toMatchSnapshot()
-    })
-
-    test('must match dangerLarge()', () => {
-      expect(global.renderToJSON(dangerLarge())).toMatchSnapshot()
-    })
-
-    test('must match dangerInactive()', () => {
-      expect(global.renderToJSON(dangerInactive())).toMatchSnapshot()
-    })
-
-    test('must match dangerIconLeftAligned()', () => {
-      expect(global.renderToJSON(dangerIconLeftAligned())).toMatchSnapshot()
-    })
-
-    test('must match dangerIconRightAligned()', () => {
-      expect(global.renderToJSON(dangerIconRightAligned())).toMatchSnapshot()
-    })
-
-    test('must match outline()', () => {
-      expect(global.renderToJSON(outline())).toMatchSnapshot()
-    })
-
-    test('must match outlineSmall()', () => {
-      expect(global.renderToJSON(outlineSmall())).toMatchSnapshot()
-    })
-
-    test('must match outlineLarge()', () => {
-      expect(global.renderToJSON(outlineLarge())).toMatchSnapshot()
-    })
-
-    test('must match outlineInactive()', () => {
-      expect(global.renderToJSON(outlineInactive())).toMatchSnapshot()
-    })
-
-    test('must match outlineIconLeftAligned()', () => {
-      expect(global.renderToJSON(outlineIconLeftAligned())).toMatchSnapshot()
-    })
-
-    test('must match outlineIconRightAligned()', () => {
-      expect(global.renderToJSON(outlineIconRightAligned())).toMatchSnapshot()
-    })
-
-    test('must match blue()', () => {
-      expect(global.renderToJSON(blue())).toMatchSnapshot()
-    })
-
-    test('must match blueSmall()', () => {
-      expect(global.renderToJSON(blueSmall())).toMatchSnapshot()
-    })
-
-    test('must match blueLarge()', () => {
-      expect(global.renderToJSON(blueLarge())).toMatchSnapshot()
-    })
-
-    test('must match blueInactive()', () => {
-      expect(global.renderToJSON(blueInactive())).toMatchSnapshot()
-    })
-
-    test('must match blueIconLeftAligned()', () => {
-      expect(global.renderToJSON(blueIconLeftAligned())).toMatchSnapshot()
-    })
-
-    test('must match blueIconRightAligned()', () => {
-      expect(global.renderToJSON(blueIconRightAligned())).toMatchSnapshot()
-    })
-
-    test('must match orange()', () => {
-      expect(global.renderToJSON(orange())).toMatchSnapshot()
-    })
-
-    test('must match orangeSmall()', () => {
-      expect(global.renderToJSON(orangeSmall())).toMatchSnapshot()
-    })
-
-    test('must match orangeLarge()', () => {
-      expect(global.renderToJSON(orangeLarge())).toMatchSnapshot()
-    })
-
-    test('must match orangeInactive()', () => {
-      expect(global.renderToJSON(orangeInactive())).toMatchSnapshot()
-    })
-
-    test('must match orangeIconLeftAligned()', () => {
-      expect(global.renderToJSON(orangeIconLeftAligned())).toMatchSnapshot()
-    })
-
-    test('must match orangeIconRightAligned()', () => {
-      expect(global.renderToJSON(orangeIconRightAligned())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Button/index.ts

@@ -1,2 +0,0 @@
-export { Button } from './Button'
-export { buttonElement, buttonVariant, buttonSize, buttonState, iconAlignment, buttonInputType } from './Button.prop'