@digigov/react-core 0.18.1 → 0.19.0

package/src/SvgIcon/index.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import SvgIcon from '@digigov/react-core/SvgIcon';
+
+it('renders the SvgIcon with no props', () => {
+  expect(mount(<SvgIcon />)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop size=s', () => {
+  expect(mount(<SvgIcon size="s">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop size=m', () => {
+  expect(mount(<SvgIcon size="m">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop size=l', () => {
+  expect(mount(<SvgIcon size="l">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop size=xl', () => {
+  expect(mount(<SvgIcon size="xl">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop variant=dark', () => {
+  expect(mount(<SvgIcon variant="dark">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop variant=light', () => {
+  expect(mount(<SvgIcon variant="light">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop variant=gray', () => {
+  expect(mount(<SvgIcon variant="gray">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop variant=primary', () => {
+  expect(mount(<SvgIcon variant="primary">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop variant=success', () => {
+  expect(mount(<SvgIcon variant="success">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop variant=warning', () => {
+  expect(mount(<SvgIcon variant="warning">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop variant=error', () => {
+  expect(mount(<SvgIcon variant="error">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop variant=focus', () => {
+  expect(mount(<SvgIcon variant="focus">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop variant=warning and size=s', () => {
+  expect(
+    mount(
+      <SvgIcon variant="warning" size="s">
+        hello
+      </SvgIcon>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop variant=error and size= xl', () => {
+  expect(
+    mount(
+      <SvgIcon variant="warning" size="xl">
+        hello
+      </SvgIcon>
+    )
+  ).toMatchSnapshot();
+});

package/src/SvgIcon/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface SvgIconProps extends BaseProps<'svg'> {
+  /**
+   * size prop declares the size of the svg icon.
+   * size is optional. The default value is 'm'.
+   */
+  size?: 's' | 'm' | 'l' | 'xl';
+
+  /**
+   * variant property styles svg icon with Gov.gr palette's basic colors.
+   * variant property is optional.
+   */
+  variant?:
+    | 'dark'
+    | 'light'
+    | 'gray'
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'focus'
+    | 'link';
+}
+/**
+ * Use SvgIcon as global svg component.
+ *  SvgIcon can be used inside other svg components as childern such as CheckIcon, CaretIcon etc.
+ */
+export const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(
+  function SvgIcon({ size, variant, children, className, ...props }, ref) {
+    return (
+      <Base
+        as="svg"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-svg-icon--dark': variant === 'dark',
+          'govgr-svg-icon--light': variant === 'light',
+          'govgr-svg-icon--gray': variant === 'gray',
+          'govgr-svg-icon--success': variant === 'success',
+          'govgr-svg-icon--primary': variant === 'primary',
+          'govgr-svg-icon--warning': variant === 'warning',
+          'govgr-svg-icon--error': variant === 'error',
+          'govgr-svg-icon--focus': variant === 'focus',
+          'govgr-svg-icon--link': variant === 'link',
+          'govgr-svg-icon--s': size === 's',
+          'govgr-svg-icon--m': size === 'm',
+          'govgr-svg-icon--l': size === 'l',
+          'govgr-svg-icon--xl': size === 'xl',
+          'govgr-svg-icon': true,
+        })}
+        focusable="false"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default SvgIcon;

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

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Table with dark variant prop 1`] = `
+<ForwardRef(Table)
+  variant="dark"
+>
+  <ForwardRef(Base)
+    as="table"
+    className="govgr-table--dark govgr-table"
+  >
+    <table
+      className="govgr-table--dark govgr-table"
+    >
+      hello
+    </table>
+  </ForwardRef(Base)>
+</ForwardRef(Table)>
+`;
+
+exports[`renders the Table with light variant prop 1`] = `
+<ForwardRef(Table)
+  variant="light"
+>
+  <ForwardRef(Base)
+    as="table"
+    className="govgr-table--light govgr-table"
+  >
+    <table
+      className="govgr-table--light govgr-table"
+    >
+      hello
+    </table>
+  </ForwardRef(Base)>
+</ForwardRef(Table)>
+`;
+
+exports[`renders the Table with no props 1`] = `
+<ForwardRef(Table)>
+  <ForwardRef(Base)
+    as="table"
+    className="govgr-table"
+  >
+    <table
+      className="govgr-table"
+    >
+      hello
+    </table>
+  </ForwardRef(Base)>
+</ForwardRef(Table)>
+`;
+
+exports[`renders the Table with zebra prop 1`] = `
+<ForwardRef(Table)
+  zebra={true}
+>
+  <ForwardRef(Base)
+    as="table"
+    className="govgr-table--zebra govgr-table"
+  >
+    <table
+      className="govgr-table--zebra govgr-table"
+    >
+      hello
+    </table>
+  </ForwardRef(Base)>
+</ForwardRef(Table)>
+`;
+
+exports[`renders the Table with zebra prop 2`] = `
+<ForwardRef(Table)
+  verticalBorders={true}
+>
+  <ForwardRef(Base)
+    as="table"
+    className="govgr-table--with-vertical-header govgr-table--with-vertical-lines govgr-table"
+  >
+    <table
+      className="govgr-table--with-vertical-header govgr-table--with-vertical-lines govgr-table"
+    >
+      hello
+    </table>
+  </ForwardRef(Base)>
+</ForwardRef(Table)>
+`;

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,69 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TableProps extends BaseProps<'table'> {
+  /**
+   * 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 (
+      <Base
+        as="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}
+      </Base>
+    );
+  }
+);
+
+export default Table;

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

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

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

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the TableCaption with no props 1`] = `
+<ForwardRef(TableCaption)>
+  <ForwardRef(Base)
+    as="caption"
+    className="govgr-table__caption--m govgr-table__caption"
+  >
+    <caption
+      className="govgr-table__caption--m govgr-table__caption"
+    >
+      hello
+    </caption>
+  </ForwardRef(Base)>
+</ForwardRef(TableCaption)>
+`;
+
+exports[`renders the TableCaption with size m prop 1`] = `
+<ForwardRef(TableCaption)
+  size="m"
+>
+  <ForwardRef(Base)
+    as="caption"
+    className="govgr-table__caption--m govgr-table__caption"
+  >
+    <caption
+      className="govgr-table__caption--m govgr-table__caption"
+    >
+      hello
+    </caption>
+  </ForwardRef(Base)>
+</ForwardRef(TableCaption)>
+`;
+
+exports[`renders the TableCaption with size s prop 1`] = `
+<ForwardRef(TableCaption)
+  size="s"
+>
+  <ForwardRef(Base)
+    as="caption"
+    className="govgr-table__caption--s govgr-table__caption"
+  >
+    <caption
+      className="govgr-table__caption--s govgr-table__caption"
+    >
+      hello
+    </caption>
+  </ForwardRef(Base)>
+</ForwardRef(TableCaption)>
+`;
+
+exports[`renders the TableCaption with size x prop 1`] = `
+<ForwardRef(TableCaption)
+  size="l"
+>
+  <ForwardRef(Base)
+    as="caption"
+    className="govgr-table__caption--l govgr-table__caption"
+  >
+    <caption
+      className="govgr-table__caption--l govgr-table__caption"
+    >
+      hello
+    </caption>
+  </ForwardRef(Base)>
+</ForwardRef(TableCaption)>
+`;
+
+exports[`renders the TableCaption with size xl prop 1`] = `
+<ForwardRef(TableCaption)
+  size="xl"
+>
+  <ForwardRef(Base)
+    as="caption"
+    className="govgr-table__caption--xl govgr-table__caption"
+  >
+    <caption
+      className="govgr-table__caption--xl govgr-table__caption"
+    >
+      hello
+    </caption>
+  </ForwardRef(Base)>
+</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,37 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TableCaptionProps extends BaseProps<'caption'> {
+  /**
+   * 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 (
+      <Base
+        as="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}
+      </Base>
+    );
+  }
+);
+
+export default TableCaption;

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the TableContainer with  border prop 1`] = `
+<ForwardRef(TableContainer)
+  border={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-table-container--border govgr-table-container"
+  >
+    <div
+      className="govgr-table-container--border govgr-table-container"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(TableContainer)>
+`;
+
+exports[`renders the TableContainer with no props 1`] = `
+<ForwardRef(TableContainer)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-table-container"
+  >
+    <div
+      className="govgr-table-container"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(TableContainer)>
+`;

package/src/TableContainer/index.test.tsx

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

package/src/TableContainer/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TableContainerProps extends BaseProps<'div'> {
+  /**
+   * border is optional. Set to true if you need a border for the Table.
+   */
+  border?: boolean;
+}
+/**
+ * Use TableContainer as a wrapper for a Table. It is used when the table is wider that the viewport width.
+ */
+export const TableContainer = React.forwardRef<
+  HTMLDivElement,
+  TableContainerProps
+>(function TableContainer(
+  { border = false, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-table-container': true,
+        'govgr-table-container--border': border,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default TableContainer;

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

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