@digigov/react-core 0.18.1 → 0.19.0

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Table with no props 1`] = `
+<ForwardRef(TableHead)>
+  <ForwardRef(Base)
+    as="thead"
+    className="govgr-table__head"
+  >
+    <thead
+      className="govgr-table__head"
+    >
+      hello
+    </thead>
+  </ForwardRef(Base)>
+</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,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TableHeadProps extends BaseProps<'thead'> {}
+/**
+ * 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 (
+    <Base
+      as="thead"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-table__head': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default TableHead;

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

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

package/src/TableHeadCell/index.test.tsx

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

package/src/TableHeadCell/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TableHeadCellProps extends BaseProps<'th'> {
+  /**
+   * dataType is optional.
+   * Use numeric value prop 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';
+  /**
+   * cellWidth is optional.
+   * Use cellWidth prop to define a custom width for a specific reference number in your table cell.
+   *
+   */
+  cellWidth?:
+    | 'one-quarter'
+    | 'one-third'
+    | 'one-half'
+    | 'two-thirds'
+    | 'three-quarters'
+    | 'full';
+}
+/**
+ * Use TableHeadCell inside the Table component to provide the header row and/or column of the table.
+ */
+export const TableHeadCell = React.forwardRef<
+  HTMLTableCellElement,
+  TableHeadCellProps
+>(function TableHeadCell(
+  { dataType = 'text', cellWidth, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="th"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-table__header': true,
+        'govgr-table__header--numeric': dataType === 'numeric',
+        'govgr-!-width-one-quarter': cellWidth === 'one-quarter',
+        'govgr-!-width-one-third': cellWidth === 'one-third',
+        'govgr-!-width-one-half': cellWidth === 'one-half',
+        'govgr-!-width-two-thirds': cellWidth === 'two-thirds',
+        'govgr-!-width-three-quarters': cellWidth === 'three-quarters',
+        'govgr-!-width-full': cellWidth === 'full',
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default TableHeadCell;

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Table with no props 1`] = `
+<ForwardRef(TableNoDataRow)>
+  <tr
+    className="govgr-table__row"
+  >
+    <ForwardRef(Base)
+      as="td"
+      className="govgr-table__cell--no-data"
+      colSpan={100}
+    >
+      <td
+        className="govgr-table__cell--no-data"
+        colSpan={100}
+      >
+        hello
+      </td>
+    </ForwardRef(Base)>
+  </tr>
+</ForwardRef(TableNoDataRow)>
+`;

package/src/TableNoDataRow/index.test.tsx

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

package/src/TableNoDataRow/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TableNoDataRowProps extends BaseProps<'td'> {}
+/**
+ * Use TableNoDataRow inside the Table component when there is no data to show.
+ * you can use colSpan prop attribute to expand the td width
+ */
+export const TableNoDataRow = React.forwardRef<
+  HTMLTableCellElement,
+  TableNoDataRowProps
+>(function TableNoDataRow({ className, children, ...props }, ref) {
+  return (
+    <tr className="govgr-table__row">
+      <Base
+        as="td"
+        colSpan={100}
+        ref={ref}
+        className={clsx(className, {
+          'govgr-table__cell--no-data': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    </tr>
+  );
+});
+
+export default TableNoDataRow;

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Table with no props 1`] = `
+<ForwardRef(TableRow)>
+  <ForwardRef(Base)
+    as="tr"
+    className="govgr-table__row"
+  >
+    <tr
+      className="govgr-table__row"
+    >
+      hello
+    </tr>
+  </ForwardRef(Base)>
+</ForwardRef(TableRow)>
+`;

package/src/TableRow/index.test.tsx

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

package/src/TableRow/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TableRowProps extends BaseProps<'tr'> {}
+/**
+ * Use TableRow inside the Table component to provide a new row to the table.
+ */
+export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
+  function TableRow({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="tr"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-table__row': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default TableRow;

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Tabs with no props 1`] = `
+<ForwardRef(Tabs)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-tabs"
+  >
+    <div
+      className="govgr-tabs"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Tabs)>
+`;

package/src/Tabs/index.test.tsx

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

package/src/Tabs/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TabsProps extends BaseProps<'div'> {}
+/**
+ * Tabs is the main component for tabs.
+ * This component must contain TabsHeading, TabsList, and a list of TabsPanel component.
+ */
+export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(
+  { className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-tabs': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default Tabs;

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the TabsHeading with no props 1`] = `
+<ForwardRef(TabsHeading)>
+  <ForwardRef(Base)
+    as="h6"
+    className="govgr-heading-s govgr-tabs__title"
+  >
+    <h6
+      className="govgr-heading-s govgr-tabs__title"
+    >
+      hello
+    </h6>
+  </ForwardRef(Base)>
+</ForwardRef(TabsHeading)>
+`;
+
+exports[`renders the TabsHeading with size=m 1`] = `
+<ForwardRef(TabsHeading)
+  size="m"
+>
+  <ForwardRef(Base)
+    as="h6"
+    className="govgr-heading-m govgr-tabs__title"
+  >
+    <h6
+      className="govgr-heading-m govgr-tabs__title"
+    >
+      hello
+    </h6>
+  </ForwardRef(Base)>
+</ForwardRef(TabsHeading)>
+`;
+
+exports[`renders the TabsHeading with size=s 1`] = `
+<ForwardRef(TabsHeading)
+  size="s"
+>
+  <ForwardRef(Base)
+    as="h6"
+    className="govgr-heading-s govgr-tabs__title"
+  >
+    <h6
+      className="govgr-heading-s govgr-tabs__title"
+    >
+      hello
+    </h6>
+  </ForwardRef(Base)>
+</ForwardRef(TabsHeading)>
+`;

package/src/TabsHeading/index.test.tsx

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