@papillonarts/components 0.8.0 → 0.10.0

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

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

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

package/build/primer/Dropdown/Dropdown.mdx

@@ -0,0 +1,19 @@
+# Dropdown
+
+> Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
+
+# Variants
+
+> - Regular, Inactive
+
+## Regular
+
+```jsx
+<Dropdown summary={summary} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} />
+```
+
+## Inactive
+
+```jsx
+<Dropdown summary={summary} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} state={dropdownState.inactive} />
+```

package/build/primer/Dropdown/Dropdown.prop.ts

@@ -0,0 +1,33 @@
+export const dropdownState = {
+  active: 'active',
+  inactive: 'inactive',
+}
+
+export const defaultProps = {
+  className: null,
+  ariaAttr: {
+    haspopup: false,
+    current: 'page',
+  },
+  state: dropdownState.active,
+}
+
+export interface AriaAttrType {
+  haspopup: boolean
+  current: string
+}
+
+export interface ItemType {
+  href: string
+  text: string
+  isSelected: boolean
+}
+
+export interface DropdownProps {
+  className?: string
+  summary: string
+  ariaAttr?: AriaAttrType
+  items: ItemType[]
+  onClick: (value) => void
+  state?: typeof dropdownState.active | typeof dropdownState.inactive
+}

package/build/primer/Dropdown/Dropdown.tsx

@@ -0,0 +1,102 @@
+import cx from 'classnames'
+import { v1 as uuidv1 } from 'uuid'
+import detailsUtilityStyles from '@papillonarts/css/build/primer/utilities/details.scss'
+import displayStyles from '@papillonarts/css/build/primer/utilities/visibility-display.scss'
+import layoutStyles from '@papillonarts/css/build/primer/utilities/layout.scss'
+import flexboxStyles from '@papillonarts/css/build/primer/utilities/flexbox.scss'
+import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
+import { useRef } from '@papillonarts/library/hooks'
+import buttonStyles from '../Button/Button.scss'
+import { DropdownProps, defaultProps, dropdownState } from './Dropdown.prop'
+import styles from './Dropdown.scss'
+
+export function Dropdown({
+  className = defaultProps.className,
+  summary,
+  ariaAttr = defaultProps.ariaAttr,
+  items,
+  onClick,
+  state = defaultProps.state,
+}: DropdownProps) {
+  const details = useRef(null)
+
+  if (!items) {
+    return null
+  }
+
+  const indexItems = getIndexItems(items)
+
+  return (
+    <div className={className}>
+      <details
+        ref={details}
+        className={cx(
+          styles.dropdown,
+          detailsUtilityStyles['details-reset'],
+          detailsUtilityStyles['details-overlay'],
+          displayStyles['d-inline-block'],
+          {
+            [styles['dropdown-inactive']]: state === dropdownState.inactive,
+          },
+        )}
+      >
+        <summary className={cx(buttonStyles.btn)} aria-haspopup={ariaAttr?.haspopup ?? false}>
+          <div
+            className={cx(displayStyles['d-flex'], flexboxStyles['flex-justify-between'], flexboxStyles['flex-items-center'], {
+              [styles['dropdown-inactive']]: state === dropdownState.inactive,
+            })}
+          >
+            <div>{summary}</div> <div className={styles['dropdown-caret']} />
+          </div>
+        </summary>
+
+        <ul className={cx(styles['dropdown-menu'], styles['dropdown-menu-se'], layoutStyles['width-full'])}>
+          {indexItems.map((indexItem) => {
+            const { href, text /* isSelected */ } = indexItem
+
+            // const itemOtherProps = isSelected ? { ...{ 'aria-current': ariaAttr?.current } } : null
+
+            return (
+              <li key={uuidv1()}>
+                <a
+                  onClick={(e) => {
+                    e.preventDefault()
+                    const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
+                    onClick({
+                      summary: text,
+                      ariaAttr,
+                      items: newIndexItems.map((newIndexItem) =>
+                        (({
+                          id: newIndexItemId,
+                          href: newIndexItemHref,
+                          text: newIndexItemText,
+                          'date-modified': dateModified,
+                          'date-created': dateCreated,
+                          isSelected: newIndexItemIsSelected,
+                        }) => ({
+                          id: newIndexItemId,
+                          href: newIndexItemHref,
+                          text: newIndexItemText,
+                          'date-modified': dateModified,
+                          'date-created': dateCreated,
+                          isSelected: newIndexItemIsSelected,
+                        }))(newIndexItem),
+                      ),
+                    })
+                    details.current.removeAttribute('open')
+                  }}
+                  className={styles['dropdown-item']}
+                  href={href}
+                  // @ts-ignore
+                  // {...itemOtherProps}
+                >
+                  {text}
+                </a>
+              </li>
+            )
+          })}
+        </ul>
+      </details>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,53 @@
+import { items, regular, inactive } from './Dropdown.int.story'
+
+jest.mock('@papillonarts/library/array', () => ({
+  getIndexItems: () => {},
+  getIndexItemsWithSelected: () => {},
+}))
+
+jest.mock('@papillonarts/library/hooks', () => ({
+  useRef: () => {},
+}))
+
+const libraryArrayMockObject = require('@papillonarts/library/array')
+const libraryHooksMockObject = require('@papillonarts/library/hooks')
+
+describe('<Dropdown />', () => {
+  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)
+
+    jest.spyOn(libraryHooksMockObject, 'useRef').mockImplementation(() => ({
+      current: {
+        removeAttribute: () => {},
+      },
+    }))
+  })
+
+  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/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from './Dropdown'
+export { dropdownState } from './Dropdown.prop'

package/build/primer/ErrorBoundary/ErrorBoundary.prop.ts

@@ -0,0 +1,5 @@
+export const defaultProps = {}
+
+export interface ErrorBoundaryProps {
+  children: React.ReactNode // https://react.dev/learn/typescript#typing-children,
+}

package/build/primer/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable no-unused-vars, no-console */
+import { Component } from 'react'
+import { ErrorBoundaryProps } from './ErrorBoundary.prop'
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps> {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    console.log('~error~', error)
+    console.log('~errorInfo~', errorInfo)
+  }
+
+  render() {
+    // @ts-ignore
+    const { hasError } = this.state
+    // @ts-ignore
+    const { children } = this.props
+
+    if (hasError) {
+      // You can render any custom fallback UI
+      return <h1>Something went wrong.</h1>
+    }
+
+    return children
+  }
+}

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

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

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

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

package/build/primer/ErrorBoundary/index.ts

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

package/build/primer/Form/Checkbox/Checkbox.prop.ts

@@ -0,0 +1,34 @@
+export const checkboxState = {
+  active: 'active',
+  inactive: 'inactive',
+}
+
+export const inputType = {
+  checkbox: 'checkbox',
+}
+
+export const defaultProps = {
+  dataTest: null,
+  className: null,
+  htmlFor: 'checkbox',
+  inputType: inputType.checkbox,
+  isChecked: false,
+  text: null,
+  state: checkboxState.active,
+}
+
+export interface AriaAttrType {
+  describedBy: string
+}
+
+export interface CheckboxProps {
+  dataTest?: string
+  className?: string
+  htmlFor?: string
+  ariaAttr: AriaAttrType
+  inputType?: typeof inputType.checkbox
+  isChecked?: boolean
+  text?: string
+  onChange: (value) => void
+  state?: typeof checkboxState.active | typeof checkboxState.inactive
+}

package/build/primer/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,40 @@
+import cx from 'classnames'
+import marginStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
+import { CheckboxProps, defaultProps, checkboxState } from './Checkbox.prop'
+import styles from './Checkbox.scss'
+import formStyles from '../index.scss'
+
+export function Checkbox({
+  dataTest = defaultProps.dataTest,
+  className = defaultProps.className,
+  htmlFor = defaultProps.htmlFor,
+  ariaAttr,
+  inputType = defaultProps.inputType,
+  isChecked = defaultProps.isChecked,
+  text = defaultProps.text,
+  onChange,
+  state = defaultProps.state,
+}: CheckboxProps) {
+  const { describedBy } = ariaAttr
+
+  return (
+    <div
+      data-test={dataTest}
+      className={cx(className, marginStyles['m-0'], formStyles['form-checkbox'], {
+        [styles['checkbox-inactive']]: state === checkboxState.inactive,
+      })}
+    >
+      <label htmlFor={htmlFor}>
+        <input
+          type={inputType}
+          aria-describedby={describedBy}
+          onChange={(event) => {
+            onChange(event)
+          }}
+          checked={isChecked}
+        />
+        {text}
+      </label>
+    </div>
+  )
+}

package/build/primer/Form/Checkbox/__tests__/Checkbox.int.story.tsx

@@ -0,0 +1,50 @@
+import { action } from 'storybook/actions'
+import { withTests } from '@storybook/addon-jest'
+import { checkboxState } from '../Checkbox.prop'
+import results from '../../../../../../../.jest-test-results.json'
+
+const Checkbox =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../../index').primer.Form.Checkbox.Checkbox
+    : require('../../../../../build').primer.Form.Checkbox.Checkbox
+
+export default {
+  title: 'Primer/Atom/Form/Checkbox',
+  component: Checkbox,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Checkbox.int.test.js'] },
+  excludeStories: ['ariaAttr', 'text', 'custom'],
+}
+
+const ariaAttr = {
+  describedBy: 'help-text-for-checkbox',
+}
+
+export const text = {
+  isChecked: 'is checked',
+  isNotChecked: 'is not checked',
+}
+
+export function custom(onChange) {
+  return <Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={onChange} text="is checked" />
+}
+
+export function isChecked() {
+  return <Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} />
+}
+
+export function isCheckedInactive() {
+  return (
+    <Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} state={checkboxState.inactive} />
+  )
+}
+
+export function isNotChecked() {
+  return <Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} />
+}
+
+export function isNotCheckedInactive() {
+  return (
+    <Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} state={checkboxState.inactive} />
+  )
+}

package/build/primer/Form/Checkbox/__tests__/Checkbox.int.test.ts

@@ -0,0 +1,23 @@
+import { isChecked, isNotChecked, isCheckedInactive, isNotCheckedInactive } from './Checkbox.int.story'
+
+describe('<Checkbox />', () => {
+  afterEach(() => jest.clearAllMocks())
+
+  describe('Render', () => {
+    test('must match isChecked()', () => {
+      expect(global.renderToJSON(isChecked())).toMatchSnapshot()
+    })
+
+    test('must match isCheckedInactive()', () => {
+      expect(global.renderToJSON(isCheckedInactive())).toMatchSnapshot()
+    })
+
+    test('must match isNotChecked()', () => {
+      expect(global.renderToJSON(isNotChecked())).toMatchSnapshot()
+    })
+
+    test('must match isNotCheckedInactive()', () => {
+      expect(global.renderToJSON(isNotCheckedInactive())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Form/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox'
+export { checkboxState } from './Checkbox.prop'