@papillonarts/components 0.9.0 → 0.11.0

package/build/primer/Select/Select.tsx

@@ -1,58 +0,0 @@
-import cx from 'classnames'
-import { v1 as uuidv1 } from 'uuid'
-import layoutStyles from '@papillonarts/css/build/primer/utilities/layout.scss'
-import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
-import { SelectProps, defaultProps, selectState } from './Select.prop'
-import styles from './Select.scss'
-
-export function Select({
-  id = defaultProps.id,
-  className = defaultProps.className,
-  selectedText,
-  items,
-  onChange,
-  state = defaultProps.state,
-}: SelectProps) {
-  const indexItems = getIndexItems(items)
-
-  const handleOnChange = (event) => {
-    const indexItem = indexItems.find((item) => item.text === event.target.value)
-    const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
-
-    onChange({
-      selectedText: indexItem.text,
-      items: newIndexItems.map((newIndexItem) =>
-        (({ text: newIndexItemText, isSelected: newIndexItemIsSelected }) => ({
-          text: newIndexItemText,
-          isSelected: newIndexItemIsSelected,
-        }))(newIndexItem),
-      ),
-    })
-  }
-
-  return (
-    <div className={cx(className, styles.select)}>
-      <select
-        id={id}
-        // @ts-ignore
-        readOnly={false}
-        onChange={handleOnChange}
-        className={cx(styles['select-menu'], layoutStyles['width-full'], {
-          [styles['select-inactive']]: state === selectState.inactive,
-        })}
-        value={selectedText}
-      >
-        {items &&
-          indexItems.map((indexItem) => {
-            const { text, isSelected } = indexItem
-
-            return (
-              <option key={uuidv1()} value={text} selected={isSelected}>
-                {text}
-              </option>
-            )
-          })}
-      </select>
-    </div>
-  )
-}

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

@@ -1,38 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { selectState } from '../Select.prop'
-import results from '../../../../../../.jest-test-results.json'
-
-const Select =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Select.Select
-    : require('../../../../build').primer.Select.Select
-
-export default {
-  title: 'Primer/Atom/Select',
-  component: Select,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Select.int.test.js'] },
-  excludeStories: ['selectedText', 'items', 'custom'],
-}
-
-export const selectedText = 'Select'
-
-export const items = [
-  { text: 'Select Item 1', isSelected: true },
-  { text: 'Select Item 2', isSelected: false },
-  { text: 'Select Item 3', isSelected: false },
-  { text: 'Select Item 4', isSelected: false },
-]
-
-export function custom(onChange) {
-  return <Select selectedText={selectedText} items={items} onChange={onChange} />
-}
-
-export function regular() {
-  return <Select selectedText={selectedText} items={items} onChange={action('onChange')} />
-}
-
-export function inactive() {
-  return <Select selectedText={selectedText} items={items} onChange={action('onChange')} state={selectState.inactive} />
-}

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

@@ -1,42 +0,0 @@
-import { items, regular, inactive } from './Select.int.story'
-
-jest.mock('@papillonarts/library/array', () => ({
-  getIndexItems: () => {},
-  getIndexItemsWithSelected: () => {},
-}))
-
-const libraryArrayMockObject = require('@papillonarts/library/array')
-
-describe('<Select />', () => {
-  const 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 },
-  ]
-
-  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 inacive()', () => {
-      expect(global.renderToJSON(inactive())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Select/index.ts

@@ -1,2 +0,0 @@
-export { Select } from './Select'
-export { selectState } from './Select.prop'

package/build/primer/SelectMenu/SelectMenu.prop.ts

@@ -1,25 +0,0 @@
-import { IconNameType } from '../Icon/Icon.prop'
-
-export const defaultProps = {
-  className: null,
-  title: null,
-}
-
-export interface AriaAttrType {
-  haspopup: boolean
-}
-
-export interface ItemType {
-  text: string
-  isSelected: boolean
-}
-
-export interface SelectMenuProps {
-  className?: string
-  summary: string
-  icon: IconNameType
-  title?: string
-  ariaAttr: AriaAttrType
-  items: ItemType[]
-  onClick: (value) => void
-}

package/build/primer/SelectMenu/SelectMenu.tsx

@@ -1,68 +0,0 @@
-import cx from 'classnames'
-import { v1 as uuidv1 } from 'uuid'
-import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
-import { useRef, useState } from '@papillonarts/library/hooks'
-import utilityStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
-import detailsStyles from '@papillonarts/css/build/primer/utilities/details.scss'
-import { SelectMenuProps, defaultProps } from './SelectMenu.prop'
-import styles from './SelectMenu.scss'
-import buttonStyles from '../Button/Button.scss'
-import { Icon, iconSize } from '../Icon'
-
-export function SelectMenu({
-  className = defaultProps.className,
-  summary,
-  icon,
-  title = defaultProps.title,
-  ariaAttr,
-  items,
-  onClick,
-}: SelectMenuProps) {
-  const [indexItems, setIndexItems] = useState(getIndexItems(items))
-  const { haspopup } = ariaAttr
-  const details = useRef(null)
-
-  return (
-    <details ref={details} className={cx(className, detailsStyles['details-reset'], detailsStyles['details-overlay'])}>
-      <summary className={cx(buttonStyles.btn, buttonStyles['btn-outline'])} aria-haspopup={haspopup}>
-        {summary} <Icon className={cx(utilityStyles['ml-2'])} icon={icon} size={iconSize.small} />
-      </summary>
-      <div className={styles.SelectMenu}>
-        <div className={styles['SelectMenu-modal']}>
-          {title && (
-            <header className={styles['SelectMenu-header']}>
-              <h3 className={styles['SelectMenu-title']}>{title}</h3>
-              <button className={styles['SelectMenu-closeButton']} type="button" />
-            </header>
-          )}
-          <div className={styles['SelectMenu-list']}>
-            {indexItems.map((indexItem) => {
-              const { text } = indexItem
-
-              return (
-                <button
-                  type="button"
-                  key={uuidv1()}
-                  onClick={(e) => {
-                    e.preventDefault()
-                    const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
-                    setIndexItems(newIndexItems)
-                    onClick({
-                      ariaAttr,
-                      items: newIndexItems.map((newIndexItem) => (({ text, isSelected }) => ({ text, isSelected }))(newIndexItem)), // eslint-disable-line
-                    })
-                    details.current.removeAttribute('open')
-                  }}
-                  className={styles['SelectMenu-item']}
-                  role="menuitem"
-                >
-                  {text}
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-    </details>
-  )
-}

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

@@ -1,50 +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 SelectMenu =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.SelectMenu
-    : require('../../../../build').primer.SelectMenu
-
-export default {
-  title: 'Primer/Molecule/SelectMenu',
-  component: SelectMenu,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['SelectMenu.int.test.js'] },
-  excludeStories: ['summary', 'title', 'ariaAttr', 'items', 'custom'],
-}
-
-export const summary = 'Choose an item'
-
-export const title = 'Title'
-
-export const ariaAttr = {
-  haspopup: true,
-  current: 'page',
-}
-
-export const items = [
-  { text: 'Item 1', isSelected: true },
-  { text: 'Item 2', isSelected: false },
-  { text: 'Item 3', isSelected: false },
-  { text: 'Item 4', isSelected: false },
-]
-
-export function custom(onClick) {
-  return <SelectMenu summary={summary} icon={iconName.ChevronDown16} title={title} ariaAttr={ariaAttr} items={items} onClick={onClick} />
-}
-
-export function regular() {
-  return (
-    <SelectMenu
-      summary={summary}
-      icon={iconName.ChevronDown16}
-      title={title}
-      ariaAttr={ariaAttr}
-      items={items}
-      onClick={action('onClick')}
-    />
-  )
-}

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

@@ -1,56 +0,0 @@
-import { items, regular } from './SelectMenu.int.story'
-
-jest.mock('@papillonarts/library/array', () => ({
-  getIndexItems: () => {},
-  getIndexItemsWithSelected: () => {},
-}))
-
-jest.mock('@papillonarts/library/hooks', () => ({
-  useRef: () => {},
-  useState: () => {},
-}))
-
-const libraryArrayMockObject = require('@papillonarts/library/array')
-const libraryHooksMockObject = require('@papillonarts/library/hooks')
-
-describe('<SelectMenu />', () => {
-  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])
-
-    jest.spyOn(libraryHooksMockObject, 'useRef').mockImplementation(() => ({
-      current: {
-        removeAttribute: () => {},
-      },
-    }))
-  })
-
-  afterEach(() => jest.clearAllMocks())
-
-  describe('Render', () => {
-    test('must match regular()', () => {
-      expect(global.renderToJSON(regular())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/SelectMenu/index.ts

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

package/build/primer/Subhead/Subhead.prop.ts

@@ -1,10 +0,0 @@
-export const defaultProps = {
-  className: null,
-  isSpacious: false,
-}
-
-export interface SubheadProps {
-  className?: string
-  heading: string
-  isSpacious?: boolean
-}

package/build/primer/Subhead/Subhead.tsx

@@ -1,15 +0,0 @@
-import cx from 'classnames'
-import { SubheadProps, defaultProps } from './Subhead.prop'
-import styles from './Subhead.scss'
-
-export function Subhead({ className = defaultProps.className, heading, isSpacious = defaultProps.isSpacious }: SubheadProps) {
-  return (
-    <div
-      className={cx(className, styles.Subhead, {
-        [styles['Subhead--spacious']]: isSpacious === true,
-      })}
-    >
-      <div className={styles['Subhead-heading']}>{heading}</div>
-    </div>
-  )
-}

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

@@ -1,23 +0,0 @@
-import { withTests } from '@storybook/addon-jest'
-import results from '../../../../../../.jest-test-results.json'
-
-const Subhead =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Subhead
-    : require('../../../../build').primer.Subhead
-
-export default {
-  title: 'Primer/Atom/Subhead',
-  component: Subhead,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Subhead.int.test.js'] },
-  excludeStories: ['custom'],
-}
-
-export function plain() {
-  return <Subhead heading="Plain subhead" />
-}
-
-export function spacious() {
-  return <Subhead heading="Spacious subhead" isSpacious={true} />
-}

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

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

package/build/primer/Subhead/index.ts

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

package/build/primer/Toast/Toast.prop.ts

@@ -1,21 +0,0 @@
-export const toastVariant = {
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  error: 'error',
-}
-
-export const defaultProps = {
-  className: null,
-  variant: toastVariant.info,
-  isDismissable: false,
-  onClick: () => {},
-}
-
-export interface ToastProps {
-  className?: string
-  variant?: typeof toastVariant.info | typeof toastVariant.success | typeof toastVariant.warning | typeof toastVariant.error
-  text: string
-  isDismissable?: boolean
-  onClick?: (value) => void
-}

package/build/primer/Toast/Toast.tsx

@@ -1,38 +0,0 @@
-import cx from 'classnames'
-import paddingStyles from '@papillonarts/css/build/primer/utilities/padding.scss'
-import { ToastProps, defaultProps, toastVariant } from './Toast.prop'
-import styles from './Toast.scss'
-import { Icon, iconName, iconSize } from '../Icon'
-
-export function Toast({
-  className = defaultProps.className,
-  variant = defaultProps.variant,
-  text,
-  isDismissable = defaultProps.isDismissable,
-  onClick = defaultProps.onClick,
-}: ToastProps) {
-  return (
-    <div className={cx(className, paddingStyles['p-1'])}>
-      <div
-        className={cx(styles.Toast, {
-          [styles['Toast--success']]: variant === toastVariant.success,
-          [styles['Toast--warning']]: variant === toastVariant.warning,
-          [styles['Toast--error']]: variant === toastVariant.error,
-        })}
-      >
-        <span className={styles['Toast-icon']}>
-          {variant === toastVariant.info && <Icon icon={iconName.Info16} />}
-          {variant === toastVariant.success && <Icon icon={iconName.Check16} />}
-          {variant === toastVariant.warning && <Icon icon={iconName.Alert16} />}
-          {variant === toastVariant.error && <Icon icon={iconName.Stop16} />}
-        </span>
-        <span className={styles['Toast-content']}>{text}</span>
-        {isDismissable && (
-          <button type="button" className={styles['Toast-dismissButton']} onClick={onClick}>
-            <Icon icon={iconName.X16} size={iconSize.small} />
-          </button>
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,50 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { toastVariant } from '../Toast.prop'
-import results from '../../../../../../.jest-test-results.json'
-
-const text = {
-  custom: 'Toast message goes here',
-  info: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Aenean massa. Cum sociis natoquepenatibus et ma',
-  success: 'Success message goes here',
-  warning: 'Warning message goes here',
-  error: 'Error message goes here',
-  dismissable: 'This toast is dismissable.',
-}
-
-const Toast =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Toast.Toast
-    : require('../../../../build').primer.Toast.Toast
-
-export default {
-  title: 'Primer/Molecule/Toast',
-  component: Toast,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Toast.int.test.js'] },
-  excludeStories: ['custom'],
-}
-
-export function custom(onClick) {
-  return <Toast text={text.custom} isDismissable={true} onClick={onClick} />
-}
-
-export function info() {
-  return <Toast variant={toastVariant.info} text={text.info} />
-}
-
-export function success() {
-  return <Toast variant={toastVariant.success} text={text.success} />
-}
-
-export function warning() {
-  return <Toast variant={toastVariant.warning} text={text.warning} />
-}
-
-export function error() {
-  return <Toast variant={toastVariant.error} text={text.error} />
-}
-
-export function dismissable() {
-  return <Toast variant={toastVariant.info} text={text.dismissable} isDismissable={true} onClick={action('onClick')} />
-}

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

@@ -1,25 +0,0 @@
-import { info, success, warning, error, dismissable } from './Toast.int.story'
-
-describe('<Button />', () => {
-  describe('Render', () => {
-    test('must match info()', () => {
-      expect(global.renderToJSON(info())).toMatchSnapshot()
-    })
-
-    test('must match success()', () => {
-      expect(global.renderToJSON(success())).toMatchSnapshot()
-    })
-
-    test('must match warning()', () => {
-      expect(global.renderToJSON(warning())).toMatchSnapshot()
-    })
-
-    test('must match error()', () => {
-      expect(global.renderToJSON(error())).toMatchSnapshot()
-    })
-
-    test('must match dismissable()', () => {
-      expect(global.renderToJSON(dismissable())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Toast/index.ts

@@ -1,2 +0,0 @@
-export { Toast } from './Toast'
-export { toastVariant } from './Toast.prop'

package/build/primer/index.ts

@@ -1,83 +0,0 @@
-import { Alert, alertVariant } from './Alert'
-import { Breadcrumb, breadcrumbState } from './Breadcrumb'
-import { Blankslate, blankslateVariant } from './Blankslate'
-import { Button, buttonElement, buttonVariant, buttonSize, buttonState, iconAlignment, buttonInputType } from './Button'
-import { Dropdown, dropdownState } from './Dropdown'
-import { ErrorBoundary } from './ErrorBoundary'
-import { Form } from './Form'
-import { Grid } from './Grid'
-import { Icon, iconName, iconSize } from './Icon'
-import { Label } from './Label'
-import { Loader, loaderVariant } from './Loader'
-import { Navigation } from './Navigation'
-import { Pagination } from './Pagination'
-import { Popover, popoverVariant, popoverSize } from './Popover'
-import { Progress, progressVariant } from './Progress'
-import { Select, selectState } from './Select'
-import { SelectMenu } from './SelectMenu'
-import { Subhead } from './Subhead'
-import { Toast, toastVariant } from './Toast'
-
-import '@papillonarts/css/build/primer/index.scss'
-
-export const primer = {
-  Alert: {
-    Alert,
-    alertVariant,
-  },
-  Breadcrumb: {
-    Breadcrumb,
-    breadcrumbState,
-  },
-  Blankslate: {
-    Blankslate,
-    blankslateVariant,
-  },
-  Button: {
-    Button,
-    buttonElement,
-    buttonVariant,
-    buttonSize,
-    buttonState,
-    iconAlignment,
-    buttonInputType,
-  },
-  Dropdown: {
-    Dropdown,
-    dropdownState,
-  },
-  ErrorBoundary,
-  Form,
-  Grid,
-  Icon: {
-    Icon,
-    iconName,
-    iconSize,
-  },
-  Label,
-  Loader: {
-    Loader,
-    loaderVariant,
-  },
-  Navigation,
-  Pagination,
-  Popover: {
-    Popover,
-    popoverVariant,
-    popoverSize,
-  },
-  Progress: {
-    Progress,
-    progressVariant,
-  },
-  Select: {
-    Select,
-    selectState,
-  },
-  SelectMenu,
-  Subhead,
-  Toast: {
-    Toast,
-    toastVariant,
-  },
-}