@digigov/react-core 0.2.0 → 0.3.0

package/src/Table/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Table from '@digigov/react-core/Table';
+
+it('renders the Table with no props', () => {
+  expect(mount(<Table>hello</Table>)).toMatchSnapshot();
+});
+
+it('renders the Table with dark variant prop', () => {
+  expect(mount(<Table variant="dark">hello</Table>)).toMatchSnapshot();
+});
+
+it('renders the Table with light variant prop', () => {
+  expect(mount(<Table variant="light">hello</Table>)).toMatchSnapshot();
+});
+
+it('renders the Table with zebra prop', () => {
+  expect(mount(<Table zebra>hello</Table>)).toMatchSnapshot();
+});
+
+it('renders the Table with zebra prop', () => {
+  expect(mount(<Table verticalBorders>hello</Table>)).toMatchSnapshot();
+});

package/src/Table/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type TableElementAttributes = JSX.IntrinsicElements['table'];
+export interface TableProps extends TableElementAttributes {
+  /**
+   * variant is optional.
+   * The `variant` prop is used to either give blue background color to th tags
+   * or a light grey background.
+   * Default value is undefined which results to an opaque background color.
+   */
+  variant?: 'dark' | 'light';
+  /**
+   * dense is optional.
+   * The dense prop is used to make font size smaller and give
+   * extra padding.
+   */
+  dense?: boolean;
+  /**
+   * zebra is optional.
+   * The zebra prop is used to make zebra table lines.
+   * Default value is false.
+   */
+  zebra?: boolean;
+  /**
+   * verticalBorders is optional.
+   * The verticalBorders prop gives extra vertical lines to the table.
+   * Default value is false.
+   */
+  verticalBorders?: boolean;
+}
+/**
+ * Table component is used to wrap the sub components of a table
+ */
+export const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  function Table(
+    {
+      variant,
+      zebra = false,
+      dense = false,
+      verticalBorders = false,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <table
+        ref={ref}
+        className={clsx(className, {
+          'govgr-table': true,
+          'govgr-table--dark': variant === 'dark',
+          'govgr-table--light': variant === 'light',
+          'govgr-table--zebra': zebra === true,
+          'govgr-table--dense': dense === true,
+          'govgr-table--with-vertical-header': verticalBorders === true,
+          'govgr-table--with-vertical-lines': verticalBorders === true,
+        })}
+        {...props}
+      >
+        {children}
+      </table>
+    );
+  }
+);
+
+export default Table;

package/src/TableBody/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the TableBody with no props 1`] = `
+<ForwardRef(TableBody)>
+  <tbody
+    className="govgr-table__body"
+  >
+    hello
+  </tbody>
+</ForwardRef(TableBody)>
+`;

package/src/TableBody/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TableBody from '@digigov/react-core/TableBody';
+
+it('renders the TableBody with no props', () => {
+  expect(mount(<TableBody>hello</TableBody>)).toMatchSnapshot();
+});

package/src/TableBody/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type TBodyElementAttributes = JSX.IntrinsicElements['tbody'];
+export interface TableBodyProps extends TBodyElementAttributes {}
+/**
+ * Use TableBody inside the Table component to provide for the table data.
+ */
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  TableBodyProps
+>(function TableBody({ className, children, ...props }, ref) {
+  return (
+    <tbody
+      ref={ref}
+      className={clsx(className, {
+        'govgr-table__body': true,
+      })}
+      {...props}
+    >
+      {children}
+    </tbody>
+  );
+});
+
+export default TableBody;

package/src/TableCaption/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the TableCaption with no props 1`] = `
+<ForwardRef(TableCaption)>
+  <caption
+    className="govgr-table__caption--m govgr-table__caption"
+  >
+    hello
+  </caption>
+</ForwardRef(TableCaption)>
+`;
+
+exports[`renders the TableCaption with size m prop 1`] = `
+<ForwardRef(TableCaption)
+  size="m"
+>
+  <caption
+    className="govgr-table__caption--m govgr-table__caption"
+  >
+    hello
+  </caption>
+</ForwardRef(TableCaption)>
+`;
+
+exports[`renders the TableCaption with size s prop 1`] = `
+<ForwardRef(TableCaption)
+  size="s"
+>
+  <caption
+    className="govgr-table__caption--s govgr-table__caption"
+  >
+    hello
+  </caption>
+</ForwardRef(TableCaption)>
+`;
+
+exports[`renders the TableCaption with size x prop 1`] = `
+<ForwardRef(TableCaption)
+  size="l"
+>
+  <caption
+    className="govgr-table__caption--l govgr-table__caption"
+  >
+    hello
+  </caption>
+</ForwardRef(TableCaption)>
+`;
+
+exports[`renders the TableCaption with size xl prop 1`] = `
+<ForwardRef(TableCaption)
+  size="xl"
+>
+  <caption
+    className="govgr-table__caption--xl govgr-table__caption"
+  >
+    hello
+  </caption>
+</ForwardRef(TableCaption)>
+`;

package/src/TableCaption/index.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TableCaption from '@digigov/react-core/TableCaption';
+
+it('renders the TableCaption with no props', () => {
+  expect(mount(<TableCaption>hello</TableCaption>)).toMatchSnapshot();
+});
+
+it('renders the TableCaption with size s prop', () => {
+  expect(
+    mount(<TableCaption size={'s'}>hello</TableCaption>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TableCaption with size m prop', () => {
+  expect(
+    mount(<TableCaption size={'m'}>hello</TableCaption>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TableCaption with size x prop', () => {
+  expect(
+    mount(<TableCaption size={'l'}>hello</TableCaption>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TableCaption with size xl prop', () => {
+  expect(
+    mount(<TableCaption size={'xl'}>hello</TableCaption>)
+  ).toMatchSnapshot();
+});

package/src/TableCaption/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type CaptionElementAttributes = JSX.IntrinsicElements['caption'];
+export interface TableCaptionProps extends CaptionElementAttributes {
+  /**
+   * size is optional.
+   * The props are 's' for small, 'm' for medium, 'l' for large and 'xl' for extra large .
+   * Default value is 'm'.
+   */
+  size?: 's' | 'm' | 'l' | 'xl';
+}
+/**
+ * Table caption is used inside the Table component to provide a caption at the top of the table.
+ */
+export const TableCaption = React.forwardRef<HTMLElement, TableCaptionProps>(
+  function TableCaption({ size = 'm', className, children, ...props }, ref) {
+    return (
+      <caption
+        ref={ref}
+        className={clsx(className, {
+          'govgr-table__caption': true,
+          'govgr-table__caption--s': size === 's',
+          'govgr-table__caption--m': size === 'm',
+          'govgr-table__caption--l': size === 'l',
+          'govgr-table__caption--xl': size === 'xl',
+        })}
+        {...props}
+      >
+        {children}
+      </caption>
+    );
+  }
+);
+
+export default TableCaption;

package/src/TableDataCell/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Table with dataType numeric prop 1`] = `
+<ForwardRef(TableDataCell)
+  dataType="numeric"
+>
+  <td
+    className="govgr-table__cell--numeric govgr-table__cell"
+  >
+    hello
+  </td>
+</ForwardRef(TableDataCell)>
+`;
+
+exports[`renders the Table with no props 1`] = `
+<ForwardRef(TableDataCell)>
+  <td
+    className="govgr-table__cell"
+  >
+    hello
+  </td>
+</ForwardRef(TableDataCell)>
+`;

package/src/TableDataCell/index.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TableDataCell from '@digigov/react-core/TableDataCell';
+
+it('renders the Table with no props', () => {
+  expect(mount(<TableDataCell>hello</TableDataCell>)).toMatchSnapshot();
+});
+
+it('renders the Table with dataType numeric prop', () => {
+  expect(
+    mount(<TableDataCell dataType="numeric">hello</TableDataCell>)
+  ).toMatchSnapshot();
+});

package/src/TableDataCell/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type TdElementAttributes = JSX.IntrinsicElements['td'];
+export interface TableDataCellProps extends TdElementAttributes {
+  /**
+   * dataType is optional.
+   * Use numeric value when comparing columns of numbers, align the numbers to the right in table cells
+   * Default value is text which aligns texts to the center
+   */
+  dataType?: 'text' | 'numeric';
+}
+/**
+ * Use TableDataCell inside the Table component to fill the data of a cell in a table.
+ */
+export const TableDataCell = React.forwardRef<
+  HTMLTableCellElement,
+  TableDataCellProps
+>(function TableDataCell(
+  { dataType = 'text', className, children, ...props },
+  ref
+) {
+  return (
+    <td
+      ref={ref}
+      className={clsx(className, {
+        'govgr-table__cell': true,
+        'govgr-table__cell--numeric': dataType === 'numeric',
+      })}
+      {...props}
+    >
+      {children}
+    </td>
+  );
+});
+
+export default TableDataCell;

package/src/TableHead/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Table with no props 1`] = `
+<ForwardRef(TableHead)>
+  <thead
+    className="govgr-table__head"
+  >
+    hello
+  </thead>
+</ForwardRef(TableHead)>
+`;

package/src/TableHead/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TableHead from '@digigov/react-core/TableHead';
+
+it('renders the Table with no props', () => {
+  expect(mount(<TableHead>hello</TableHead>)).toMatchSnapshot();
+});

package/src/TableHead/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type THeadElementAttributes = JSX.IntrinsicElements['thead'];
+export interface TableHeadProps extends THeadElementAttributes {}
+/**
+ * Use TableHead inside the Table component to provide the header row and/or column of the table.
+ */
+export const TableHead = React.forwardRef<
+  HTMLTableSectionElement,
+  TableHeadProps
+>(function TableHead({ className, children, ...props }, ref) {
+  return (
+    <thead
+      ref={ref}
+      className={clsx(className, {
+        'govgr-table__head': true,
+      })}
+      {...props}
+    >
+      {children}
+    </thead>
+  );
+});
+
+export default TableHead;

package/src/TableHeaderCell/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Table with dataType="numeric" prop 1`] = `
+<ForwardRef(TableHeaderCell)
+  dataType="numeric"
+>
+  <th
+    className="govgr-table__header--numeric govgr-table__header"
+  >
+    hello
+  </th>
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the Table with no props 1`] = `
+<ForwardRef(TableHeaderCell)>
+  <th
+    className="govgr-table__header"
+  >
+    hello
+  </th>
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell dataType="numeric" and  with cellWidth=full 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="full"
+  dataType="numeric"
+>
+  <th
+    className="govgr-table__header--numeric govgr-!-width-full govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell dataType="numeric" and with cellWidth=full 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="full"
+  dataType="numeric"
+>
+  <th
+    className="govgr-table__header--numeric govgr-!-width-full govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with cellWidth=full 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="full"
+>
+  <th
+    className="govgr-!-width-full govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with cellWidth=one-half 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="one-half"
+>
+  <th
+    className="govgr-!-width-one-half govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with cellWidth=one-quarter 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="one-quarter"
+>
+  <th
+    className="govgr-!-width-one-quarter govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with cellWidth=one-third 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="one-third"
+>
+  <th
+    className="govgr-!-width-one-third govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with cellWidth=three-quarters 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="three-quarters"
+>
+  <th
+    className="govgr-!-width-three-quarters govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with cellWidth=two-thirds 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="two-thirds"
+>
+  <th
+    className="govgr-!-width-two-thirds govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with dataType="numeric" and  cellWidth=three-quarters 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="three-quarters"
+  dataType="numeric"
+>
+  <th
+    className="govgr-!-width-three-quarters govgr-table__header--numeric govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with dataType="numeric" and  cellWidth=two-thirds 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="two-thirds"
+  dataType="numeric"
+>
+  <th
+    className="govgr-!-width-two-thirds govgr-table__header--numeric govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with dataType="numeric" and cellWidth=one-third 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="one-third"
+  dataType="numeric"
+>
+  <th
+    className="govgr-!-width-one-third govgr-table__header--numeric govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with dataType="numeric" and cellWidth=three-quarters 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="three-quarters"
+  dataType="numeric"
+>
+  <th
+    className="govgr-!-width-three-quarters govgr-table__header--numeric govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with dataType="numeric" and cellWidth=two-thirds 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="two-thirds"
+  dataType="numeric"
+>
+  <th
+    className="govgr-!-width-two-thirds govgr-table__header--numeric govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with dataType="numeric" and dataType="numeric" and   cellWidth=one-half 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="one-half"
+  dataType="numeric"
+>
+  <th
+    className="govgr-!-width-one-half govgr-table__header--numeric govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;
+
+exports[`renders the TableHeaderCell with dataType="numeric" cellWidth=one-quarter 1`] = `
+<ForwardRef(TableHeaderCell)
+  cellWidth="one-quarter"
+  dataType="numeric"
+>
+  <th
+    className="govgr-!-width-one-quarter govgr-table__header--numeric govgr-table__header"
+  />
+</ForwardRef(TableHeaderCell)>
+`;

package/src/TableHeaderCell/index.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TableHeaderCell from '@digigov/react-core/TableHeaderCell';
+
+it('renders the Table with no props', () => {
+  expect(mount(<TableHeaderCell>hello</TableHeaderCell>)).toMatchSnapshot();
+});
+
+it('renders the Table with dataType="numeric" prop', () => {
+  expect(
+    mount(<TableHeaderCell dataType="numeric">hello</TableHeaderCell>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell with cellWidth=one-quarter', () => {
+  expect(
+    mount(<TableHeaderCell cellWidth={'one-quarter'}></TableHeaderCell>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell with cellWidth=one-third', () => {
+  expect(
+    mount(<TableHeaderCell cellWidth={'one-third'}></TableHeaderCell>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell with cellWidth=one-half', () => {
+  expect(
+    mount(<TableHeaderCell cellWidth={'one-half'}></TableHeaderCell>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell with cellWidth=two-thirds', () => {
+  expect(
+    mount(<TableHeaderCell cellWidth={'two-thirds'}></TableHeaderCell>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell with cellWidth=three-quarters', () => {
+  expect(
+    mount(<TableHeaderCell cellWidth={'three-quarters'}></TableHeaderCell>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell with cellWidth=full', () => {
+  expect(
+    mount(<TableHeaderCell cellWidth={'full'}></TableHeaderCell>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell with dataType="numeric" cellWidth=one-quarter', () => {
+  expect(
+    mount(
+      <TableHeaderCell
+        dataType="numeric"
+        cellWidth={'one-quarter'}
+      ></TableHeaderCell>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell with dataType="numeric" and cellWidth=one-third', () => {
+  expect(
+    mount(
+      <TableHeaderCell
+        dataType="numeric"
+        cellWidth={'one-third'}
+      ></TableHeaderCell>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell with dataType="numeric" and dataType="numeric" and   cellWidth=one-half', () => {
+  expect(
+    mount(
+      <TableHeaderCell
+        dataType="numeric"
+        cellWidth={'one-half'}
+      ></TableHeaderCell>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell with dataType="numeric" and cellWidth=two-thirds', () => {
+  expect(
+    mount(
+      <TableHeaderCell
+        dataType="numeric"
+        cellWidth={'two-thirds'}
+      ></TableHeaderCell>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell with dataType="numeric" and cellWidth=three-quarters', () => {
+  expect(
+    mount(
+      <TableHeaderCell
+        dataType="numeric"
+        cellWidth={'three-quarters'}
+      ></TableHeaderCell>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the TableHeaderCell dataType="numeric" and with cellWidth=full', () => {
+  expect(
+    mount(
+      <TableHeaderCell dataType="numeric" cellWidth={'full'}></TableHeaderCell>
+    )
+  ).toMatchSnapshot();
+});