@papillonarts/components 0.7.0 → 0.9.0

package/build/primer/Grid/FlexGrid/__tests__/FlexGrid.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: 'File16',
+      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: 'File16',
+      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: 'File16',
+      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: 'File16',
+      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: 'File16',
+          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: 'FileDirectory16',
+      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: 'File16',
+      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: 'File16',
+      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: 'File16',
+          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: 'FileDirectory16',
+      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: 'File16',
+      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)',
+  },
+]

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