@papillonarts/components 0.8.0 → 0.10.0

package/build/primer/Grid/FlexGrid/__tests__/FlexGrid.int.story.tsx

@@ -0,0 +1,146 @@
+import { action } from 'storybook/actions'
+import { withTests } from '@storybook/addon-jest'
+import { sortDefault } from '@papillonarts/library/sort'
+import { flexGridSelection, flexGridState } from '../FlexGrid.prop'
+import { filesObjects } from './FlexGrid.int.data'
+import results from '../../../../../../../.jest-test-results.json'
+
+const FlexGrid =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../../index').primer.Grid.FlexGrid
+    : require('../../../../../build').primer.Grid.FlexGrid
+
+export default {
+  title: 'Primer/Molecule/Grid/FlexGrid',
+  component: FlexGrid,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['FlexGrid.int.test.js'] },
+  excludeStories: ['ariaAttr', 'text', 'custom'],
+}
+
+const radioItemsWithSelection = filesObjects.map((filesObject) =>
+  (({ contents, path, id, isSelected, ...otherProperties }) => ({
+    names: Object.keys({ id, isSelected, ...otherProperties }),
+    values: Object.values({ id, isSelected, ...otherProperties }),
+  }))(filesObject),
+)
+
+const radioItemsWithoutSelection = filesObjects.map((filesObject) =>
+  (({ contents, path, id, isSelected, ...otherProperties }) => ({
+    names: Object.keys({ id, ...otherProperties }),
+    values: Object.values({ id, ...otherProperties }),
+  }))(filesObject),
+)
+
+const checkboxItemsWithSelection = filesObjects.map((filesObject) =>
+  (({ contents, path, id, isSelected, ...otherProperties }) => ({
+    names: Object.keys({ id, isSelected, ...otherProperties }),
+    values: Object.values({ id, isSelected, ...otherProperties }),
+  }))(filesObject),
+)
+
+const checkboxItemsWithoutSelection = filesObjects.map((filesObject) =>
+  (({ contents, path, id, isSelected, ...otherProperties }) => ({
+    names: Object.keys({ id, ...otherProperties }),
+    values: Object.values({ id, ...otherProperties }),
+  }))(filesObject),
+)
+
+export function radioWithSelection() {
+  return (
+    <FlexGrid
+      items={radioItemsWithSelection}
+      idIndex={0}
+      isSelectedIndex={1}
+      selection={flexGridSelection.radio}
+      sort={sortDefault}
+      onChange={action('onChange')}
+      onDoubleClick={action('onDoubleClick')}
+    />
+  )
+}
+
+export function radioWithSelectionInactive() {
+  return (
+    <FlexGrid
+      items={radioItemsWithSelection}
+      idIndex={0}
+      isSelectedIndex={1}
+      selection={flexGridSelection.radio}
+      sort={sortDefault}
+      onChange={action('onChange')}
+      onDoubleClick={action('onDoubleClick')}
+      state={flexGridState.inactive}
+    />
+  )
+}
+
+export function radioWithoutSelection() {
+  return <FlexGrid idIndex={0} items={radioItemsWithoutSelection} sort={sortDefault} onChange={action('onChange')} />
+}
+
+export function radioWithoutSelectionInactive() {
+  return (
+    <FlexGrid
+      idIndex={0}
+      items={radioItemsWithoutSelection}
+      sort={sortDefault}
+      onChange={action('onChange')}
+      state={flexGridState.inactive}
+    />
+  )
+}
+
+export function checkboxWithSelection() {
+  return (
+    <FlexGrid
+      items={checkboxItemsWithSelection}
+      idIndex={0}
+      isSelectedIndex={1}
+      selection={flexGridSelection.checkbox}
+      sort={sortDefault}
+      onChange={action('onChange')}
+      onDoubleClick={action('onDoubleClick')}
+    />
+  )
+}
+
+export function checkboxWithSelectionInactive() {
+  return (
+    <FlexGrid
+      items={checkboxItemsWithSelection}
+      idIndex={0}
+      isSelectedIndex={1}
+      selection={flexGridSelection.checkbox}
+      sort={sortDefault}
+      onChange={action('onChange')}
+      onDoubleClick={action('onDoubleClick')}
+      state={flexGridState.inactive}
+    />
+  )
+}
+
+export function checkboxWithoutSelection() {
+  return (
+    <FlexGrid
+      idIndex={0}
+      items={checkboxItemsWithoutSelection}
+      sort={sortDefault}
+      onChange={action('onChange')}
+      onDoubleClick={action('onDoubleClick')}
+    />
+  )
+}
+
+export function checkboxWithoutSelectionInactive() {
+  return (
+    <FlexGrid
+      idIndex={0}
+      items={checkboxItemsWithoutSelection}
+      sort={sortDefault}
+      onChange={action('onChange')}
+      onDoubleClick={action('onDoubleClick')}
+      state={flexGridState.inactive}
+    />
+  )
+}

package/build/primer/Grid/FlexGrid/__tests__/FlexGrid.int.test.ts

@@ -0,0 +1,46 @@
+import {
+  radioWithSelection,
+  radioWithSelectionInactive,
+  radioWithoutSelection,
+  radioWithoutSelectionInactive,
+  checkboxWithSelection,
+  checkboxWithSelectionInactive,
+  checkboxWithoutSelection,
+  checkboxWithoutSelectionInactive,
+} from './FlexGrid.int.story'
+
+describe('<FlexGrid />', () => {
+  describe('Render', () => {
+    test('must match radioWithSelection()', () => {
+      expect(global.renderToJSON(radioWithSelection())).toMatchSnapshot()
+    })
+
+    test('must match radioWithSelectionInactive()', () => {
+      expect(global.renderToJSON(radioWithSelectionInactive())).toMatchSnapshot()
+    })
+
+    test('must match radioWithoutSelection()', () => {
+      expect(global.renderToJSON(radioWithoutSelection())).toMatchSnapshot()
+    })
+
+    test('must match radioWithoutSelectionInactive()', () => {
+      expect(global.renderToJSON(radioWithoutSelectionInactive())).toMatchSnapshot()
+    })
+
+    test('must match checkboxWithSelection()', () => {
+      expect(global.renderToJSON(checkboxWithSelection())).toMatchSnapshot()
+    })
+
+    test('must match checkboxWithSelectionInactive()', () => {
+      expect(global.renderToJSON(checkboxWithSelectionInactive())).toMatchSnapshot()
+    })
+
+    test('must match checkboxWithoutSelection()', () => {
+      expect(global.renderToJSON(checkboxWithoutSelection())).toMatchSnapshot()
+    })
+
+    test('must match checkboxWithoutSelectionInactive()', () => {
+      expect(global.renderToJSON(checkboxWithoutSelectionInactive())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Grid/FlexGrid/index.ts

@@ -0,0 +1,2 @@
+export { FlexGrid } from './FlexGrid'
+export { flexGridSelection, flexGridState } from './FlexGrid.prop'

package/build/primer/Grid/index.ts

@@ -0,0 +1,9 @@
+import { DisplayTable } from './DisplayTable'
+import { FlexGrid, flexGridSelection, flexGridState } from './FlexGrid'
+
+export const Grid = {
+  DisplayTable,
+  FlexGrid,
+  flexGridSelection,
+  flexGridState,
+}