@papillonarts/components 0.8.0 → 0.9.0

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

@@ -0,0 +1,43 @@
+export const inputState = {
+  active: 'active',
+  inactive: 'inactive',
+}
+
+export const inputType = {
+  text: 'text',
+  password: 'password',
+}
+
+export const defaultProps = {
+  dataTest: null,
+  id: null,
+  className: null,
+  placeholder: null,
+  ariaAttr: {
+    label: '',
+  },
+  inputType: inputType.text,
+  onFocus: () => {},
+  onBlur: () => {},
+  state: inputState.active,
+}
+
+export interface AriaAttrType {
+  label: string
+}
+
+export interface InputProps {
+  dataTest?: string
+  id?: string
+  className?: string
+  placeholder?: string
+  ariaAttr?: AriaAttrType
+  inputType?: typeof inputType.text | typeof inputType.password
+  value: string
+  onChange: (value) => void
+  onKeyUp: (value) => void
+  onFocus?: (value) => void
+  onBlur?: (value) => void
+  autoFocus: boolean
+  state?: typeof inputState.active | typeof inputState.inactive
+}

package/build/primer/Form/Input/Input.tsx

@@ -0,0 +1,43 @@
+import cx from 'classnames'
+import { InputProps, defaultProps, inputState } from './Input.prop'
+import styles from './Input.scss'
+import formStyles from '../index.scss'
+
+export function Input({
+  dataTest = defaultProps.dataTest,
+  id = defaultProps.id,
+  className = defaultProps.className,
+  placeholder = defaultProps.placeholder,
+  ariaAttr = defaultProps.ariaAttr,
+  inputType = defaultProps.inputType,
+  value,
+  onChange,
+  onKeyUp,
+  onFocus = defaultProps.onFocus,
+  onBlur = defaultProps.onBlur,
+  autoFocus,
+  state = defaultProps.state,
+}: InputProps) {
+  return (
+    <input
+      data-test={dataTest}
+      id={id}
+      className={cx(className, formStyles['form-control'], {
+        [styles['input-inactive']]: state === inputState.inactive,
+      })}
+      value={value}
+      onChange={(event) => {
+        onChange(event)
+      }}
+      onKeyUp={(event) => {
+        onKeyUp(event)
+      }}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      type={inputType}
+      placeholder={placeholder}
+      aria-label={ariaAttr.label}
+      autoFocus={autoFocus} // eslint-disable-line
+    />
+  )
+}

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

@@ -0,0 +1,54 @@
+import { action } from 'storybook/actions'
+import { withTests } from '@storybook/addon-jest'
+import { inputState } from '../Input.prop'
+import results from '../../../../../../../.jest-test-results.json'
+
+const Input =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../../index').primer.Form.Input.Input
+    : require('../../../../../build').primer.Form.Input.Input
+
+export default {
+  title: 'Primer/Atom/Form/Input',
+  component: Input,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Input.int.test.js'] },
+  excludeStories: ['placeholder', 'ariaAttr', 'custom'],
+}
+
+const placeholder = 'Fantastic placeholder'
+
+const ariaAttr = {
+  label: 'Repository description',
+}
+
+export function custom(onChange, onKeyUp, onFocus, onBlur) {
+  return <Input placeholder={placeholder} ariaAttr={ariaAttr} onChange={onChange} onKeyUp={onKeyUp} onFocus={onFocus} onBlur={onBlur} />
+}
+
+export function regular() {
+  return (
+    <Input
+      placeholder={placeholder}
+      ariaAttr={ariaAttr}
+      onChange={action('onChange')}
+      onKeyUp={action('onKeyUp')}
+      onFocus={action('onFocus')}
+      onBlur={action('onBlur')}
+    />
+  )
+}
+
+export function inactive() {
+  return (
+    <Input
+      placeholder={placeholder}
+      ariaAttr={ariaAttr}
+      onChange={action('onChange')}
+      onKeyUp={action('onKeyUp')}
+      onFocus={action('onFocus')}
+      onBlur={action('onBlur')}
+      state={inputState.inactive}
+    />
+  )
+}

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

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

@@ -0,0 +1,2 @@
+export { Input } from './Input'
+export { inputType, inputState } from './Input.prop'

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

@@ -0,0 +1,30 @@
+export const radioState = {
+  active: 'active',
+  inactive: 'inactive',
+}
+
+export const inputType = {
+  radio: 'radio',
+}
+
+export const defaultProps = {
+  dataTest: null,
+  className: null,
+  htmlFor: 'checkbox',
+  inputType: inputType.radio,
+  isChecked: false,
+  text: null,
+  state: radioState.active,
+}
+
+export interface RadioProps {
+  dataTest?: string
+  className?: string
+  htmlFor?: string
+  inputType?: typeof inputType.radio
+  name: string
+  isChecked?: boolean
+  text?: string
+  onChange: (value) => void
+  state?: typeof radioState.active | typeof radioState.inactive
+}

package/build/primer/Form/Radio/Radio.tsx

@@ -0,0 +1,38 @@
+import cx from 'classnames'
+import marginStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
+import { RadioProps, defaultProps, radioState } from './Radio.prop'
+import styles from './Radio.scss'
+import formStyles from '../index.scss'
+
+export function Radio({
+  dataTest = defaultProps.dataTest,
+  className = defaultProps.className,
+  htmlFor = defaultProps.htmlFor,
+  inputType = defaultProps.inputType,
+  name,
+  isChecked = defaultProps.isChecked,
+  text = defaultProps.text,
+  onChange,
+  state = defaultProps.state,
+}: RadioProps) {
+  return (
+    <div
+      data-test={dataTest}
+      className={cx(className, marginStyles['m-0'], formStyles['form-checkbox'], {
+        [styles['radio-inactive']]: state === radioState.inactive,
+      })}
+    >
+      <label htmlFor={htmlFor}>
+        <input
+          type={inputType}
+          name={name}
+          onChange={(event) => {
+            onChange(event)
+          }}
+          checked={isChecked}
+        />
+        {text}
+      </label>
+    </div>
+  )
+}

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

@@ -0,0 +1,42 @@
+import { Fragment } from 'react'
+import { action } from 'storybook/actions'
+import { withTests } from '@storybook/addon-jest'
+import { radioState } from '../Radio.prop'
+import results from '../../../../../../../.jest-test-results.json'
+
+const Radio =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../../index').primer.Form.Radio.Radio
+    : require('../../../../../build').primer.Form.Radio.Radio
+
+export default {
+  title: 'Primer/Atom/Form/Radio',
+  component: Radio,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Radio.int.test.js'] },
+  excludeStories: ['name', 'custom'],
+}
+
+const name = 'fantastic-name'
+
+export function custom(onChange) {
+  return <Radio name={name} onChange={onChange} text="White" />
+}
+
+export function regular() {
+  return (
+    <Fragment>
+      <Radio name={name} onChange={action('onChange-white')} text="White" />
+      <Radio name={name} isChecked={true} onChange={action('onChange-black')} text="Black" />
+    </Fragment>
+  )
+}
+
+export function inactive() {
+  return (
+    <Fragment>
+      <Radio name={name} onChange={action('onChange-white')} text="White" state={radioState.inactive} />
+      <Radio name={name} isChecked={true} onChange={action('onChange-black')} text="Black" state={radioState.inactive} />
+    </Fragment>
+  )
+}

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

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

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

@@ -0,0 +1,2 @@
+export { Radio } from './Radio'
+export { radioState } from './Radio.prop'

package/build/primer/Form/index.ts

@@ -0,0 +1,19 @@
+import { Checkbox, checkboxState } from './Checkbox'
+import { Input, inputType, inputState } from './Input'
+import { Radio, radioState } from './Radio'
+
+export const Form = {
+  Checkbox: {
+    Checkbox,
+    checkboxState,
+  },
+  Input: {
+    Input,
+    inputType,
+    inputState,
+  },
+  Radio: {
+    Radio,
+    radioState,
+  },
+}

package/build/primer/Grid/DisplayTable/DisplayTable.prop.ts

@@ -0,0 +1,21 @@
+export const defaultProps = {
+  className: null,
+  idIndex: -1,
+  isSelectedIndex: -1,
+}
+
+export interface ValueType {
+  value: React.ReactNode
+}
+
+export interface ItemType {
+  names: React.ReactNode[]
+  values: ValueType[] | React.ReactNode[]
+}
+
+export interface DisplayTableProps {
+  className: string
+  items: ItemType[]
+  idIndex: number
+  isSelectedIndex: number
+}

package/build/primer/Grid/DisplayTable/DisplayTable.tsx

@@ -0,0 +1,68 @@
+import { Fragment } from 'react'
+import cx from 'classnames'
+import { v1 as uuidv1 } from 'uuid'
+import displayStyles from '@papillonarts/css/build/primer/utilities/visibility-display.scss'
+import borderStyles from '@papillonarts/css/build/primer/utilities/borders.scss'
+import paddingStyles from '@papillonarts/css/build/primer/utilities/padding.scss'
+import typographyStyles from '@papillonarts/css/build/primer/utilities/typography.scss'
+import colorStyles from '@papillonarts/css/build/primer/utilities/colors.scss'
+import gridStyles from '../../Layout/grid.scss'
+import { DisplayTableProps, defaultProps } from './DisplayTable.prop'
+
+export function DisplayTable({
+  className = defaultProps.className,
+  items,
+  idIndex = defaultProps.idIndex,
+  isSelectedIndex = defaultProps.isSelectedIndex,
+}: DisplayTableProps) {
+  return (
+    <Fragment>
+      <div className={cx(className, displayStyles['d-table'], gridStyles['col-12'], colorStyles['bg-blue-light'])}>
+        {items[0].names.map((name, index) => {
+          const isIdColumn = index === idIndex
+          const isSelectedColumn = index === isSelectedIndex
+
+          return (
+            <Fragment key={uuidv1()}>
+              {!isIdColumn && (
+                <div
+                  key={uuidv1()}
+                  className={cx(
+                    gridStyles['col-2'],
+                    displayStyles['d-table-cell'],
+                    borderStyles.border,
+                    paddingStyles['p-2'],
+                    typographyStyles.h6,
+                  )}
+                >
+                  {isSelectedColumn ? '' : name}
+                </div>
+              )}
+            </Fragment>
+          )
+        })}
+      </div>
+      {items.map((item) => (
+        <div key={uuidv1()} className={cx(className, displayStyles['d-table'], gridStyles['col-12'])}>
+          {item.values.map((value, valueIndex) => {
+            const isIdColumn = valueIndex === idIndex
+            const isSelectedColumn = valueIndex === isSelectedIndex
+
+            return (
+              <Fragment key={uuidv1()}>
+                {!isIdColumn && (
+                  <div
+                    key={uuidv1()}
+                    className={cx(gridStyles['col-2'], displayStyles['d-table-cell'], borderStyles.border, paddingStyles['p-2'])}
+                  >
+                    {isSelectedColumn ? '' : (value?.value ?? value)}
+                  </div>
+                )}
+              </Fragment>
+            )
+          })}
+        </div>
+      ))}
+    </Fragment>
+  )
+}

package/build/primer/Grid/DisplayTable/__tests__/DisplayTable.int.data.ts

@@ -0,0 +1,289 @@
+export const filesObjects = [
+  {
+    contents: null,
+    'date-created': 'Wed May 13 2015',
+    'date-modified': 'Fri Feb 03 2017',
+    id: 'file-169a4ad0-ceaa-4a3b-9ee8-056f96c44953',
+    isSelected: false,
+    kind: 'PostScript file',
+    name: {
+      icon: 'File',
+      value: 'y8P.ps',
+    },
+    path: [
+      {
+        href: 'Files',
+        isSelected: true,
+        text: 'Files',
+      },
+      {
+        href: 'file-169a4ad0-ceaa-4a3b-9ee8-056f96c44953',
+        isSelected: false,
+        text: 'y8P.ps',
+      },
+    ],
+    size: '37.72 exabyte (EB)',
+  },
+  {
+    contents: null,
+    'date-created': 'Fri May 01 2020',
+    'date-modified': 'Mon Dec 31 2018',
+    id: 'file-26ea87eb-26e8-4f05-aec2-4c686ff7e2ec',
+    isSelected: false,
+    kind: 'Perl script file',
+    name: {
+      icon: 'File',
+      value: 'Pj9m.cgi',
+    },
+    path: [
+      {
+        href: 'Files',
+        isSelected: true,
+        text: 'Files',
+      },
+      {
+        href: 'file-26ea87eb-26e8-4f05-aec2-4c686ff7e2ec',
+        isSelected: false,
+        text: 'Pj9m.cgi',
+      },
+    ],
+    size: '339 gigabyte (GB)',
+  },
+  {
+    contents: null,
+    'date-created': 'Mon Oct 31 2016',
+    'date-modified': 'Tue Feb 21 2017',
+    id: 'file-bd9da022-f0c1-47ad-b4c4-c2f7176c4535',
+    isSelected: false,
+    kind: 'PSD image',
+    name: {
+      icon: 'File',
+      value: 'mRGfhp.psd',
+    },
+    path: [
+      {
+        href: 'Files',
+        isSelected: true,
+        text: 'Files',
+      },
+      {
+        href: 'file-bd9da022-f0c1-47ad-b4c4-c2f7176c4535',
+        isSelected: false,
+        text: 'mRGfhp.psd',
+      },
+    ],
+    size: '325.6 kilobyte (KB)',
+  },
+  {
+    contents: null,
+    'date-created': 'Wed Mar 11 2020',
+    'date-modified': 'Sun Aug 26 2018',
+    id: 'file-75c01598-a68d-43c5-bbe6-2d76678466ba',
+    isSelected: false,
+    kind: 'Active Server Page file',
+    name: {
+      icon: 'File',
+      value: 'FBrXhyh736LIV.aspx',
+    },
+    path: [
+      {
+        href: 'Files',
+        isSelected: true,
+        text: 'Files',
+      },
+      {
+        href: 'file-75c01598-a68d-43c5-bbe6-2d76678466ba',
+        isSelected: false,
+        text: 'FBrXhyh736LIV.aspx',
+      },
+    ],
+    size: '716 terabyte (TB)',
+  },
+  {
+    contents: [
+      {
+        contents: null,
+        'date-created': 'Sun May 18 2014',
+        'date-modified': 'Tue Feb 25 2020',
+        id: 'file-ad02e6c0-24aa-47cd-b65f-c3127dc01259',
+        isSelected: false,
+        kind: 'PostScript file',
+        name: {
+          icon: 'File',
+          value: 'OJNhlbZ8WMjuly.ps',
+        },
+        path: [
+          {
+            href: 'Files',
+            isSelected: true,
+            text: 'Files',
+          },
+          {
+            href: 'directory-56a0c7dc-dc95-4fd8-b079-256708e84e46',
+            isSelected: false,
+            text: 'beylpO7v',
+          },
+          {
+            href: 'file-ad02e6c0-24aa-47cd-b65f-c3127dc01259',
+            isSelected: false,
+            text: 'OJNhlbZ8WMjuly.ps',
+          },
+        ],
+        size: '580.5 exabyte (EB)',
+      },
+    ],
+    'date-created': 'Fri Mar 21 2014',
+    'date-modified': 'Wed Mar 04 2015',
+    id: 'directory-56a0c7dc-dc95-4fd8-b079-256708e84e46',
+    isSelected: false,
+    kind: 'Folder',
+    name: {
+      icon: 'FileDirectory',
+      value: 'beylpO7v',
+    },
+    path: [
+      {
+        href: 'Files',
+        isSelected: true,
+        text: 'Files',
+      },
+      {
+        href: 'directory-56a0c7dc-dc95-4fd8-b079-256708e84e46',
+        isSelected: false,
+        text: 'beylpO7v',
+      },
+    ],
+    size: '--',
+  },
+  {
+    contents: null,
+    'date-created': 'Sun Oct 20 2019',
+    'date-modified': 'Fri Feb 08 2019',
+    id: 'file-3be9cb1a-8744-438b-9506-99ef88a7480a',
+    isSelected: false,
+    kind: 'Database file',
+    name: {
+      icon: 'File',
+      value: 'aD9iiQhkj.db',
+    },
+    path: [
+      {
+        href: 'Files',
+        isSelected: true,
+        text: 'Files',
+      },
+      {
+        href: 'file-3be9cb1a-8744-438b-9506-99ef88a7480a',
+        isSelected: false,
+        text: 'aD9iiQhkj.db',
+      },
+    ],
+    size: '913.5 bit (b)',
+  },
+  {
+    contents: null,
+    'date-created': 'Fri Mar 11 2016',
+    'date-modified': 'Thu May 02 2019',
+    id: 'file-bbe22783-ec56-4ea3-8edb-a9e4cee48d9e',
+    isSelected: false,
+    kind: 'Apple Mail e-mail file',
+    name: {
+      icon: 'File',
+      value: '9kcUYOj65.emlx',
+    },
+    path: [
+      {
+        href: 'Files',
+        isSelected: true,
+        text: 'Files',
+      },
+      {
+        href: 'file-bbe22783-ec56-4ea3-8edb-a9e4cee48d9e',
+        isSelected: false,
+        text: '9kcUYOj65.emlx',
+      },
+    ],
+    size: '921.8 zettabyte (ZB)',
+  },
+  {
+    contents: [
+      {
+        contents: null,
+        'date-created': 'Sat May 07 2016',
+        'date-modified': 'Fri Sep 05 2014',
+        id: 'file-b4dddd05-fc2d-4fbe-b3f0-a69a6cab321c',
+        isSelected: false,
+        kind: 'Internet security certificate',
+        name: {
+          icon: 'File',
+          value: 'DTmnIjnVyaK.cer',
+        },
+        path: [
+          {
+            href: 'Files',
+            isSelected: true,
+            text: 'Files',
+          },
+          {
+            href: 'directory-8e2504aa-f428-441e-be2c-83c4a9c3219a',
+            isSelected: false,
+            text: '7',
+          },
+          {
+            href: 'file-b4dddd05-fc2d-4fbe-b3f0-a69a6cab321c',
+            isSelected: false,
+            text: 'DTmnIjnVyaK.cer',
+          },
+        ],
+        size: '760 terabyte (TB)',
+      },
+    ],
+    'date-created': 'Sun Oct 25 2015',
+    'date-modified': 'Thu Apr 11 2019',
+    id: 'directory-8e2504aa-f428-441e-be2c-83c4a9c3219a',
+    isSelected: false,
+    kind: 'Folder',
+    name: {
+      icon: 'FileDirectory',
+      value: '7',
+    },
+    path: [
+      {
+        href: 'Files',
+        isSelected: true,
+        text: 'Files',
+      },
+      {
+        href: 'directory-8e2504aa-f428-441e-be2c-83c4a9c3219a',
+        isSelected: false,
+        text: '7',
+      },
+    ],
+    size: '--',
+  },
+  {
+    contents: null,
+    'date-created': 'Tue Jan 20 2015',
+    'date-modified': 'Tue Oct 15 2013',
+    id: 'file-16db577b-1167-4add-bb79-9eab8c9b9217',
+    isSelected: false,
+    kind: 'Microsoft Excel file with macros',
+    name: {
+      icon: 'File',
+      value: '1NplEr0hHjFnTmW.xlsm',
+    },
+    path: [
+      {
+        href: 'Files',
+        isSelected: true,
+        text: 'Files',
+      },
+      {
+        href: 'file-16db577b-1167-4add-bb79-9eab8c9b9217',
+        isSelected: false,
+        text: '1NplEr0hHjFnTmW.xlsm',
+      },
+    ],
+    size: '474.53 petabyte (PB)',
+  },
+]