@papillonarts/components 0.7.0 → 0.9.0

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'

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/form-control.scss

@@ -1,7 +1,7 @@
-@import '@papillonbits/css/build/primer/support/variables/typography.scss';
-@import '@papillonbits/css/build/primer/support/variables/misc.scss';
-@import '@papillonbits/css/build/primer/support/mixins/misc.scss';
-@import '@papillonbits/css/build/primer/support/mixins/layout.scss';
+@import '@papillonarts/css/build/primer/support/variables/typography.scss';
+@import '@papillonarts/css/build/primer/support/variables/misc.scss';
+@import '@papillonarts/css/build/primer/support/mixins/misc.scss';
+@import '@papillonarts/css/build/primer/support/mixins/layout.scss';
 
 // stylelint-disable custom-property-pattern
 // stylelint-disable no-descending-specificity

package/build/primer/Form/form-select.scss

@@ -1,7 +1,7 @@
-@import '@papillonbits/css/build/primer/support/variables/typography.scss';
-@import '@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '@papillonbits/css/build/primer/support/mixins/layout.scss';
-@import '@papillonbits/css/build/primer/support/mixins/color-modes.scss';
+@import '@papillonarts/css/build/primer/support/variables/typography.scss';
+@import '@papillonarts/css/build/primer/support/variables/layout.scss';
+@import '@papillonarts/css/build/primer/support/mixins/layout.scss';
+@import '@papillonarts/css/build/primer/support/mixins/color-modes.scss';
 
 // stylelint-disable custom-property-pattern
 

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>
+  )
+}