@papillonarts/components 0.8.0 → 0.10.0

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

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

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

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

package/build/primer/Button/Button.mdx

@@ -0,0 +1,239 @@
+# Button
+
+> Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.
+
+# Variants
+
+> - DefaultButton, DefaultSmallButton, DefaultLargeButton, DefaultInactiveButton, DefaultIconButtonLeftAligned, DefaultIconButtonRightAligned, DefaultLinkButton
+>
+> - PrimaryButton, PrimarySmallButton, PrimaryLargeButton, PrimaryInactiveButton, PrimaryIconButtonLeftAligned, PrimaryIconButtonRightAligned
+>
+> - DangerButton, DangerSmallButton, DangerLargeButton, DangerInactiveButton, DangerIconButtonLeftAligned, DangerIconButtonRightAligned
+>
+> - OutlineButton, OutlineSmallButton, OutlineLargeButton, OutlineInactiveButton, OutlineIconButtonLeftAligned, OutlineIconButtonRightAligned
+>
+> - BlueButton, BlueSmallButton, BlueLargeButton, BlueInactiveButton, BlueIconButtonLeftAligned, BlueIconButtonRightAligned
+>
+> - OrangeButton, OrangeSmallButton, OrangeLargeButton, OrangeInactiveButton, OrangeIconButtonLeftAligned, OrangeIconButtonRightAligned
+
+## DefaultButton
+
+```jsx
+<Button text="Default button" onClick={action('onClick')} />
+```
+
+## DefaultSmallButton
+
+```jsx
+<Button text="Default small button" size={buttonSize.small} onClick={action('onClick')} />
+```
+
+## DefaultLargeButton
+
+```jsx
+<Button text="Default large button" size={buttonSize.large} onClick={action('onClick')} />
+```
+
+## DefaultInactiveButton
+
+```jsx
+<Button text="Default inactive button" state={buttonState.inactive} onClick={action('onClick')} />
+```
+
+## DefaultIconButtonLeftAligned
+
+```jsx
+<Button text="Default icon button" icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+## DefaultIconButtonRightAligned
+
+```jsx
+<Button text="Default icon button" icon={plusIconRightAligned} onClick={action('onClick')} />
+```
+
+## DefaultLinkButton
+
+```jsx
+<Button element={buttonElement.a} href="#url" text="Default link button" onClick={action('onClick')} />
+```
+
+## PrimaryButton
+
+```jsx
+<Button text="Primary button" variant={buttonVariant.primary} onClick={action('onClick')} />
+```
+
+## PrimarySmallButton
+
+```jsx
+<Button text="Primary small button" variant={buttonVariant.primary} size={buttonSize.small} onClick={action('onClick')} />
+```
+
+## PrimaryLargeButton
+
+```jsx
+<Button text="Primary large button" variant={buttonVariant.primary} size={buttonSize.large} onClick={action('onClick')} />
+```
+
+## PrimaryInactiveButton
+
+```jsx
+<Button text="Primary inactive button" variant={buttonVariant.primary} state={buttonState.inactive} onClick={action('onClick')} />
+```
+
+## PrimaryIconButtonLeftAligned
+
+```jsx
+<Button text="Primary icon button" variant={buttonVariant.primary} icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+## PrimaryIconButtonRightAligned
+
+```jsx
+<Button text="Primary icon button" variant={buttonVariant.primary} icon={plusIconRightAligned} onClick={action('onClick')} />
+```
+
+## DangerButton
+
+```jsx
+<Button text="Danger button" variant={buttonVariant.danger} onClick={action('onClick')} />
+```
+
+## DangerSmallButton
+
+```jsx
+<Button text="Danger small button" variant={buttonVariant.danger} size={buttonSize.small} onClick={action('onClick')} />
+```
+
+## DangerLargeButton
+
+```jsx
+<Button text="Danger large button" variant={buttonVariant.danger} size={buttonSize.large} onClick={action('onClick')} />
+```
+
+## DangerInactiveButton
+
+```jsx
+<Button text="Danger inactive button" variant={buttonVariant.danger} state={buttonState.inactive} onClick={action('onClick')} />
+```
+
+## DangerIconButtonLeftAligned
+
+```jsx
+<Button text="Danger icon button" variant={buttonVariant.danger} icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+## DangerIconButtonRightAligned
+
+```jsx
+<Button text="Danger icon button" variant={buttonVariant.danger} icon={plusIconRightAligned} onClick={action('onClick')} />
+```
+
+## OutlineButton
+
+```jsx
+<Button text="Outline button" variant={buttonVariant.outline} onClick={action('onClick')} />
+```
+
+## OutlineSmallButton
+
+```jsx
+<Button text="Outline small button" variant={buttonVariant.outline} size={buttonSize.small} onClick={action('onClick')} />
+```
+
+## OutlineLargeButton
+
+```jsx
+<Button text="Outline large button" variant={buttonVariant.outline} size={buttonSize.large} onClick={action('onClick')} />
+```
+
+## OutlineInactiveButton
+
+```jsx
+<Button text="Outline inactive button" variant={buttonVariant.outline} state={buttonState.inactive} onClick={action('onClick')} />
+```
+
+## OutlineIconButtonLeftAligned
+
+```jsx
+<Button text="Outline icon button" variant={buttonVariant.outline} icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+## OutlineIconButtonRightAligned
+
+```jsx
+<Button text="Outline icon button" variant={buttonVariant.outline} icon={plusIconRightAligned} onClick={action('onClick')} />
+```
+
+## BlueButton
+
+```jsx
+<Button text="Blue button" variant={buttonVariant.blue} onClick={action('onClick')} />
+```
+
+## BlueSmallButton
+
+```jsx
+<Button text="Blue small button" variant={buttonVariant.blue} size={buttonSize.small} onClick={action('onClick')} />
+```
+
+## BlueLargeButton
+
+```jsx
+<Button text="Blue large button" variant={buttonVariant.blue} size={buttonSize.large} onClick={action('onClick')} />
+```
+
+## BlueInactiveButton
+
+```jsx
+<Button text="Blue inactive button" variant={buttonVariant.blue} state={buttonState.inactive} onClick={action('onClick')} />
+```
+
+## BlueIconButtonLeftAligned
+
+```jsx
+<Button text="Blue icon button" variant={buttonVariant.blue} icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+## BlueIconButtonRightAligned
+
+```jsx
+<Button text="Blue icon button" variant={buttonVariant.blue} icon={plusIconRightAligned} onClick={action('onClick')} />
+```
+
+## OrangeButton
+
+```jsx
+<Button text="Orange button" variant={buttonVariant.orange} onClick={action('onClick')} />
+```
+
+## OrangeSmallButton
+
+```jsx
+<Button text="Orange small button" variant={buttonVariant.orange} size={buttonSize.small} onClick={action('onClick')} />
+```
+
+## OrangeLargeButton
+
+```jsx
+<Button text="Orange large button" variant={buttonVariant.orange} size={buttonSize.large} onClick={action('onClick')} />
+```
+
+## OrangeInactiveButton
+
+```jsx
+<Button text="Orange inactive button" variant={buttonVariant.orange} state={buttonState.inactive} onClick={action('onClick')} />
+```
+
+## OrangeIconButtonLeftAligned
+
+```jsx
+<Button text="Orange icon button" variant={buttonVariant.orange} icon={plusIconLeftAligned} onClick={action('onClick')} />
+```
+
+## OrangeIconButtonRightAligned
+
+```jsx
+<Button text="Orange icon button" variant={buttonVariant.orange} icon={plusIconRightAligned} onClick={action('onClick')} />
+```

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

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

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

@@ -0,0 +1,173 @@
+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')} />
+}