@papillonarts/components 0.10.0 → 0.11.0

package/build/primer/Pagination/PreviousNext/PreviousNext.tsx

@@ -1,71 +0,0 @@
-import cx from 'classnames'
-import displayStyles from '@papillonarts/css/build/primer/utilities/visibility-display.scss'
-import { paginationActionTypes } from '@papillonarts/library/pagination'
-import { PreviousNextProps, defaultProps, previousNextState } from './PreviousNext.prop'
-import styles from './PreviousNext.scss'
-
-export function PreviousNext({
-  className = defaultProps.className,
-  ariaAttr,
-  currentPage,
-  previous = defaultProps.previous,
-  next = defaultProps.next,
-  onClick,
-  state = defaultProps.state,
-}: PreviousNextProps) {
-  const { label } = ariaAttr
-
-  const { indexItems, currentIndex, canMoveBackwards, canMoveForward } = currentPage
-  const backwardsAriaProps = !canMoveBackwards ? { ...{ 'aria-disabled': 'true' } } : null
-  const forwardAriaProps = !canMoveForward ? { ...{ 'aria-disabled': 'true' } } : null
-
-  // @ts-ignore
-  // if (indexItems === [] || currentIndex === -1) {
-  //   return null
-  // }
-
-  return (
-    <nav
-      className={cx(className, styles['paginate-container'], {
-        [styles['previousnext-inactive']]: state === previousNextState.inactive,
-      })}
-      aria-label={label}
-    >
-      <div className={cx(styles.pagination, displayStyles['d-flex'])}>
-        {!canMoveBackwards ? (
-          // @ts-ignore
-          <span {...backwardsAriaProps}>{previous.text}</span>
-        ) : (
-          <a
-            onClick={(event) => {
-              event.preventDefault()
-              onClick(paginationActionTypes.onBackwards)
-            }}
-            rel={previous.rel}
-            href={previous.href}
-            aria-label={previous.ariaAttr.label}
-          >
-            {previous.text}
-          </a>
-        )}
-        <span>{`Viewing ${currentIndex + 1} to ${indexItems.length}`}</span>
-        {!canMoveForward ? (
-          // @ts-ignore
-          <span {...forwardAriaProps}>{next.text}</span>
-        ) : (
-          <a
-            onClick={(event) => {
-              event.preventDefault()
-              onClick(paginationActionTypes.onForward)
-            }}
-            rel={next.rel}
-            href={next.href}
-            aria-label={next.ariaAttr.label}
-          >
-            {next.text}
-          </a>
-        )}
-      </div>
-    </nav>
-  )
-}

package/build/primer/Pagination/PreviousNext/__tests__/PreviousNext.int.story.tsx

@@ -1,48 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { previousNextState } from '../PreviousNext.prop'
-import results from '../../../../../../../.jest-test-results.json'
-
-const PreviousNext =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../../index').primer.Pagination.PreviousNext
-    : require('../../../../../build').primer.Pagination.PreviousNext
-
-export default {
-  title: 'Primer/Atom/Pagination/PreviousNext',
-  component: PreviousNext,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['PreviousNext.int.test.js'] },
-  excludeStories: ['ariaAttr', 'currentPage', 'custom'],
-}
-
-export const ariaAttr = {
-  label: 'Pagination',
-}
-
-export const currentPage = {
-  indexItems: [
-    { isCurrent: false, index: 0 },
-    { isCurrent: false, index: 1 },
-    { isCurrent: true, index: 2 },
-    { isCurrent: false, index: 3 },
-    { isCurrent: false, index: 4 },
-    { isCurrent: false, index: 5 },
-    { isCurrent: false, index: 6 },
-  ],
-  currentIndex: 2,
-  canMoveBackwards: true,
-  canMoveForward: true,
-}
-
-export function custom(onClick) {
-  return <PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={onClick} />
-}
-
-export function regular() {
-  return <PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={action('onClick')} />
-}
-
-export function inactive() {
-  return <PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={action('onClick')} state={previousNextState.inactive} />
-}

package/build/primer/Pagination/PreviousNext/__tests__/PreviousNext.int.test.ts

@@ -1,15 +0,0 @@
-import { regular, inactive } from './PreviousNext.int.story'
-
-describe('<PreviousNext />', () => {
-  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/Pagination/PreviousNext/index.ts

@@ -1,2 +0,0 @@
-export { PreviousNext } from './PreviousNext'
-export { previousNextState } from './PreviousNext.prop'

package/build/primer/Pagination/index.ts

@@ -1,6 +0,0 @@
-import { PreviousNext, previousNextState } from './PreviousNext'
-
-export const Pagination = {
-  PreviousNext,
-  previousNextState,
-}

package/build/primer/Popover/Popover.prop.ts

@@ -1,49 +0,0 @@
-export const popoverVariant = {
-  default: 'default',
-  bottom: 'bottom',
-  bottomRight: 'bottomRight',
-  bottomLeft: 'bottomLeft',
-  left: 'left',
-  leftBottom: 'leftBottom',
-  leftTop: 'leftTop',
-  right: 'right',
-  rightBottom: 'rightBottom',
-  rightTop: 'rightTop',
-  topLeft: 'topLeft',
-  topRight: 'topRight',
-}
-
-export const popoverSize = {
-  normal: 'normal',
-  large: 'large',
-}
-
-export const defaultProps = {
-  className: null,
-  variant: popoverVariant.default,
-  size: popoverSize.normal,
-}
-
-export interface PopoverProps {
-  className?: string
-  variant?:
-    | typeof popoverVariant.default
-    | typeof popoverVariant.bottom
-    | typeof popoverVariant.bottomRight
-    | typeof popoverVariant.bottomLeft
-    | typeof popoverVariant.left
-    | typeof popoverVariant.leftBottom
-    | typeof popoverVariant.leftTop
-    | typeof popoverVariant.right
-    | typeof popoverVariant.rightBottom
-    | typeof popoverVariant.rightTop
-    | typeof popoverVariant.topLeft
-    | typeof popoverVariant.topRight
-  size?: typeof popoverSize.normal | typeof popoverSize.large
-  intro: string
-  heading: string
-  message: string
-  acknowledge: string
-  introOnClick: (value) => void
-  acknowledgeOnClick: (value) => void
-}

package/build/primer/Popover/Popover.tsx

@@ -1,80 +0,0 @@
-import cx from 'classnames'
-import boxShadowStyles from '@papillonarts/css/build/primer/utilities/box-shadow.scss'
-import layoutStyles from '@papillonarts/css/build/primer/utilities/layout.scss'
-import marginStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
-import paddingStyles from '@papillonarts/css/build/primer/utilities/padding.scss'
-import typographyStyles from '@papillonarts/css/build/primer/utilities/typography.scss'
-import boxStyles from '../Box/box.scss'
-import { PopoverProps, defaultProps, popoverVariant, popoverSize } from './Popover.prop'
-import styles from './Popover.scss'
-import { Button, buttonVariant } from '../Button'
-
-export function Popover({
-  className = defaultProps.className,
-  variant = defaultProps.variant,
-  size = defaultProps.size,
-  intro,
-  heading,
-  message,
-  acknowledge,
-  introOnClick,
-  acknowledgeOnClick,
-}: PopoverProps) {
-  return (
-    <div
-      className={cx(className, layoutStyles['position-relative'], {
-        [typographyStyles['text-center']]: variant === popoverVariant.default || variant === popoverVariant.bottom,
-        [cx(typographyStyles['text-right'], paddingStyles['pr-2'])]: variant === popoverVariant.bottomRight,
-      })}
-    >
-      {variant === popoverVariant.default && <Button variant={buttonVariant.primary} text={intro} onClick={introOnClick} />}
-      <div
-        // @ts-ignore
-        className={
-          (cx(styles.Popover, layoutStyles['position-relative']),
-          {
-            [cx(layoutStyles['right-0'], layoutStyles['left-0'])]: variant === popoverVariant.default,
-            [paddingStyles['pl-2']]: variant === popoverVariant.bottomLeft,
-          })
-        }
-      >
-        <div
-          className={cx(
-            styles['Popover-message'],
-            typographyStyles['text-left'],
-            paddingStyles['p-4'],
-            boxStyles.Box,
-            boxShadowStyles['box-shadow-large'],
-            {
-              [cx(marginStyles['mx-auto'], marginStyles['mt-2'])]: variant === popoverVariant.default,
-              [cx(styles['Popover-message--bottom'], marginStyles['mx-auto'], marginStyles['mb-2'])]: variant === popoverVariant.bottom,
-              [cx(styles['Popover-message--bottom-right'], marginStyles['mb-2'])]: variant === popoverVariant.bottomRight,
-              [cx(styles['Popover-message--bottom-left'], marginStyles['mb-2'])]: variant === popoverVariant.bottomLeft,
-              [styles['Popover-message--left']]: variant === popoverVariant.left,
-              [styles['Popover-message--left-bottom']]: variant === popoverVariant.leftBottom,
-              [styles['Popover-message--left-top']]: variant === popoverVariant.leftTop,
-              [styles['Popover-message--right']]: variant === popoverVariant.right,
-              [styles['Popover-message--right-bottom']]: variant === popoverVariant.rightBottom,
-              [styles['Popover-message--right-top']]: variant === popoverVariant.rightTop,
-              [styles['Popover-message--top-left']]: variant === popoverVariant.topLeft,
-              [styles['Popover-message--top-right']]: variant === popoverVariant.topRight,
-              [styles['Popover-message--large']]: size === popoverSize.large,
-            },
-          )}
-        >
-          <h4 className={marginStyles['mb-2']}>{heading}</h4>
-          <p>{message}</p>
-          <Button
-            className={cx(marginStyles['mt-2'], typographyStyles['text-bold'])}
-            text={acknowledge}
-            variant={buttonVariant.outline}
-            onClick={acknowledgeOnClick}
-          />
-        </div>
-      </div>
-      {(variant === popoverVariant.bottom || variant === popoverVariant.bottomRight || variant === popoverVariant.bottomLeft) && (
-        <Button variant={buttonVariant.primary} text={intro} onClick={introOnClick} />
-      )}
-    </div>
-  )
-}

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

@@ -1,216 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { popoverVariant, popoverSize } from '../Popover.prop'
-import results from '../../../../../../.jest-test-results.json'
-
-const Popover =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Popover.Popover
-    : require('../../../../build').primer.Popover.Popover
-
-export default {
-  title: 'Primer/Molecule/Popover',
-  component: Popover,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Popover.int.test.js'] },
-  excludeStories: ['custom'],
-}
-
-const intro = 'UI'
-const heading = 'Popover heading'
-const message = 'Message about this particular piece of UI.'
-const acknowledge = 'Got it!'
-
-export function custom(introOnClick, acknowledgeOnClick) {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      introOnClick={introOnClick}
-      acknowledgeOnClick={acknowledgeOnClick}
-    />
-  )
-}
-
-export function regular() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function regularLarge() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      size={popoverSize.large}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function bottom() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      variant={popoverVariant.bottom}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function bottomRight() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      variant={popoverVariant.bottomRight}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function bottomLeft() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      variant={popoverVariant.bottomLeft}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function left() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      variant={popoverVariant.left}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function leftBottom() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      variant={popoverVariant.leftBottom}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function leftTop() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      variant={popoverVariant.leftTop}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function right() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      variant={popoverVariant.right}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function rightBottom() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      variant={popoverVariant.rightBottom}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function rightTop() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      variant={popoverVariant.rightTop}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function topLeft() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      variant={popoverVariant.topLeft}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}
-
-export function topRight() {
-  return (
-    <Popover
-      intro={intro}
-      heading={heading}
-      message={message}
-      acknowledge={acknowledge}
-      variant={popoverVariant.topRight}
-      introOnClick={action('introOnClick')}
-      acknowledgeOnClick={action('acknowledgeOnClick')}
-    />
-  )
-}

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

@@ -1,71 +0,0 @@
-import {
-  regular,
-  regularLarge,
-  bottom,
-  bottomRight,
-  bottomLeft,
-  left,
-  leftBottom,
-  leftTop,
-  right,
-  rightBottom,
-  rightTop,
-  topLeft,
-  topRight,
-} from './Popover.int.story'
-
-describe('<Popover />', () => {
-  describe('Render', () => {
-    test('must match regular()', () => {
-      expect(global.renderToJSON(regular())).toMatchSnapshot()
-    })
-
-    test('must match regularLarge()', () => {
-      expect(global.renderToJSON(regularLarge())).toMatchSnapshot()
-    })
-
-    test('must match bottom()', () => {
-      expect(global.renderToJSON(bottom())).toMatchSnapshot()
-    })
-
-    test('must match bottomRight()', () => {
-      expect(global.renderToJSON(bottomRight())).toMatchSnapshot()
-    })
-
-    test('must match bottomLeft()', () => {
-      expect(global.renderToJSON(bottomLeft())).toMatchSnapshot()
-    })
-
-    test('must match left()', () => {
-      expect(global.renderToJSON(left())).toMatchSnapshot()
-    })
-
-    test('must match leftBottom()', () => {
-      expect(global.renderToJSON(leftBottom())).toMatchSnapshot()
-    })
-
-    test('must match leftTop()', () => {
-      expect(global.renderToJSON(leftTop())).toMatchSnapshot()
-    })
-
-    test('must match right()', () => {
-      expect(global.renderToJSON(right())).toMatchSnapshot()
-    })
-
-    test('must match rightBottom()', () => {
-      expect(global.renderToJSON(rightBottom())).toMatchSnapshot()
-    })
-
-    test('must match rightTop()', () => {
-      expect(global.renderToJSON(rightTop())).toMatchSnapshot()
-    })
-
-    test('must match topLeft()', () => {
-      expect(global.renderToJSON(topLeft())).toMatchSnapshot()
-    })
-
-    test('must match topRight()', () => {
-      expect(global.renderToJSON(topRight())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Popover/index.ts

@@ -1,2 +0,0 @@
-export { Popover } from './Popover'
-export { popoverVariant, popoverSize } from './Popover.prop'

package/build/primer/Progress/Progress.prop.ts

@@ -1,16 +0,0 @@
-export const progressVariant = {
-  small: 'small',
-  normal: 'normal',
-  large: 'large',
-}
-
-export const defaultProps = {
-  className: null,
-  variant: progressVariant.normal,
-}
-
-export interface ProgressProps {
-  className?: string
-  variant?: typeof progressVariant.small | typeof progressVariant.normal | typeof progressVariant.large
-  percentage: number
-}

package/build/primer/Progress/Progress.tsx

@@ -1,19 +0,0 @@
-import cx from 'classnames'
-import colorStyles from '@papillonarts/css/build/primer/utilities/colors.scss'
-import { ProgressProps, defaultProps, progressVariant } from './Progress.prop'
-import styles from './Progress.scss'
-
-export function Progress({ className = defaultProps.className, variant = defaultProps.variant, percentage }: ProgressProps) {
-  const percentageStyle = { width: `${percentage}%` }
-
-  return (
-    <span
-      className={cx(className, styles.Progress, {
-        [styles['Progress--large']]: variant === progressVariant.large,
-        [styles['Progress--small']]: (variant === progressVariant.small) === true,
-      })}
-    >
-      <span className={cx(styles['Progress-item'], colorStyles['bg-green'])} style={percentageStyle} />
-    </span>
-  )
-}

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

@@ -1,28 +0,0 @@
-import { withTests } from '@storybook/addon-jest'
-import { progressVariant } from '../Progress.prop'
-import results from '../../../../../../.jest-test-results.json'
-
-const Progress =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Progress.Progress
-    : require('../../../../build').primer.Progress.Progress
-
-export default {
-  title: 'Primer/Atom/Progress',
-  component: Progress,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Progress.int.test.js'] },
-  excludeStories: ['custom'],
-}
-
-export function normal() {
-  return <Progress variant={progressVariant.normal} percentage={50} />
-}
-
-export function large() {
-  return <Progress variant={progressVariant.large} percentage={50} />
-}
-
-export function small() {
-  return <Progress variant={progressVariant.small} percentage={50} />
-}

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

@@ -1,17 +0,0 @@
-import { normal, large, small } from './Progress.int.story'
-
-describe('<Progress />', () => {
-  describe('Render', () => {
-    test('must match normal()', () => {
-      expect(global.renderToJSON(normal())).toMatchSnapshot()
-    })
-
-    test('must match large()', () => {
-      expect(global.renderToJSON(large())).toMatchSnapshot()
-    })
-
-    test('must match small()', () => {
-      expect(global.renderToJSON(small())).toMatchSnapshot()
-    })
-  })
-})

package/build/primer/Progress/index.ts

@@ -1,2 +0,0 @@
-export { Progress } from './Progress'
-export { progressVariant } from './Progress.prop'

package/build/primer/Select/Select.prop.ts

@@ -1,24 +0,0 @@
-export const selectState = {
-  active: 'active',
-  inactive: 'inactive',
-}
-
-export const defaultProps = {
-  id: null,
-  className: null,
-  state: selectState.active,
-}
-
-export interface ItemType {
-  text: string
-  isSelected: boolean
-}
-
-export interface SelectProps {
-  id?: string
-  className?: string
-  selectedText: string
-  items: ItemType[]
-  onChange: (value) => void
-  state?: typeof selectState.active | typeof selectState.inactive
-}