@digigov/react-core 0.17.1 → 0.18.0

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

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

package/src/ErrorSummary/index.test.tsx

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

package/src/ErrorSummary/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface ErrorSummaryProps extends BaseProps<'div'> {}
+/**
+ * Use this component at the top of a page to summarise any errors a user has made.
+ */
+export const ErrorSummary = React.forwardRef<HTMLDivElement, ErrorSummaryProps>(
+  function ErrorSummary({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-error-summary': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default ErrorSummary;

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

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FieldContainer with error=false 1`] = `
+<ForwardRef(FieldContainer)
+  error={false}
+>
+  <ForwardRef(Grid)
+    className="govgr-field"
+    item={true}
+    lg={12}
+    md={12}
+    xl={12}
+    xs={12}
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+    >
+      <div
+        className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+      >
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
+</ForwardRef(FieldContainer)>
+`;
+
+exports[`renders the FieldContainer with error=true 1`] = `
+<ForwardRef(FieldContainer)
+  error={true}
+>
+  <ForwardRef(Grid)
+    className="govgr-field__error govgr-field"
+    item={true}
+    lg={12}
+    md={12}
+    xl={12}
+    xs={12}
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-field__error govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+    >
+      <div
+        className="govgr-field__error govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+      >
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
+</ForwardRef(FieldContainer)>
+`;
+
+exports[`renders the FieldContainer with no props 1`] = `
+<ForwardRef(FieldContainer)>
+  <ForwardRef(Grid)
+    className="govgr-field"
+    item={true}
+    lg={12}
+    md={12}
+    xl={12}
+    xs={12}
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+    >
+      <div
+        className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+      >
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
+</ForwardRef(FieldContainer)>
+`;

package/src/FieldContainer/index.test.tsx

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

package/src/FieldContainer/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import clsx from 'clsx';
+import Grid, { GridProps } from '@digigov/react-core/Grid';
+
+export interface FieldContainerProps extends GridProps {
+  /**
+   * error is optional.
+   */
+  error?: boolean;
+}
+/**
+ * Field component wraps form components such as Checkbox TextInput TextArea etc.
+ */
+export const FieldContainer = React.forwardRef<
+  HTMLDivElement,
+  FieldContainerProps
+>(function FieldContainer(
+  { error, className, children, xs = 12, md = 12, lg = 12, xl = 12 },
+  ref
+) {
+  return (
+    <Grid
+      ref={ref}
+      className={clsx(className, {
+        'govgr-field': true,
+        'govgr-field__error': error === true,
+      })}
+      item
+      xs={xs}
+      md={md}
+      lg={lg}
+      xl={xl}
+    >
+      {children}
+    </Grid>
+  );
+});
+
+export default FieldContainer;

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

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

package/src/Fieldset/index.test.tsx

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

package/src/Fieldset/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FieldsetProps extends BaseProps<'fieldset'> {}
+/**
+ * Details for the Fieldset.
+ * Fieldset component is used to group related elements in a form.
+ */
+export const Fieldset = React.forwardRef<HTMLFieldSetElement, FieldsetProps>(
+  function Fieldset({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="fieldset"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-fieldset': true,
+          /* 'govgr-grid': true, */
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Fieldset;

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

@@ -0,0 +1,193 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FieldsetLegend with heading and size l props 1`] = `
+<ForwardRef(FieldsetLegend)
+  heading={true}
+  size="l"
+>
+  <ForwardRef(Base)
+    aria-level={1}
+    as="legend"
+    className="govgr-heading-l govgr-fieldset__legend"
+    role="heading"
+  >
+    <legend
+      aria-level={1}
+      className="govgr-heading-l govgr-fieldset__legend"
+      role="heading"
+    >
+      This is FieldsetLegend with no props
+    </legend>
+  </ForwardRef(Base)>
+</ForwardRef(FieldsetLegend)>
+`;
+
+exports[`renders the FieldsetLegend with heading and size m props 1`] = `
+<ForwardRef(FieldsetLegend)
+  heading={true}
+  size="m"
+>
+  <ForwardRef(Base)
+    aria-level={1}
+    as="legend"
+    className="govgr-heading-m govgr-fieldset__legend"
+    role="heading"
+  >
+    <legend
+      aria-level={1}
+      className="govgr-heading-m govgr-fieldset__legend"
+      role="heading"
+    >
+      This is FieldsetLegend with no props
+    </legend>
+  </ForwardRef(Base)>
+</ForwardRef(FieldsetLegend)>
+`;
+
+exports[`renders the FieldsetLegend with heading and size s props 1`] = `
+<ForwardRef(FieldsetLegend)
+  heading={true}
+  size="s"
+>
+  <ForwardRef(Base)
+    aria-level={1}
+    as="legend"
+    className="govgr-heading-s govgr-fieldset__legend"
+    role="heading"
+  >
+    <legend
+      aria-level={1}
+      className="govgr-heading-s govgr-fieldset__legend"
+      role="heading"
+    >
+      This is FieldsetLegend with no props
+    </legend>
+  </ForwardRef(Base)>
+</ForwardRef(FieldsetLegend)>
+`;
+
+exports[`renders the FieldsetLegend with heading and size xl props 1`] = `
+<ForwardRef(FieldsetLegend)
+  heading={true}
+  size="xl"
+>
+  <ForwardRef(Base)
+    aria-level={1}
+    as="legend"
+    className="govgr-heading-xl govgr-fieldset__legend"
+    role="heading"
+  >
+    <legend
+      aria-level={1}
+      className="govgr-heading-xl govgr-fieldset__legend"
+      role="heading"
+    >
+      This is FieldsetLegend with no props
+    </legend>
+  </ForwardRef(Base)>
+</ForwardRef(FieldsetLegend)>
+`;
+
+exports[`renders the FieldsetLegend with heading props 1`] = `
+<ForwardRef(FieldsetLegend)
+  heading={true}
+>
+  <ForwardRef(Base)
+    aria-level={1}
+    as="legend"
+    className="govgr-heading-l govgr-fieldset__legend"
+    role="heading"
+  >
+    <legend
+      aria-level={1}
+      className="govgr-heading-l govgr-fieldset__legend"
+      role="heading"
+    >
+      This is FieldsetLegend with no props
+    </legend>
+  </ForwardRef(Base)>
+</ForwardRef(FieldsetLegend)>
+`;
+
+exports[`renders the FieldsetLegend with no props 1`] = `
+<ForwardRef(FieldsetLegend)>
+  <ForwardRef(Base)
+    as="legend"
+    className="govgr-heading-l govgr-fieldset__legend"
+  >
+    <legend
+      className="govgr-heading-l govgr-fieldset__legend"
+    >
+      This is FieldsetLegend with no props
+    </legend>
+  </ForwardRef(Base)>
+</ForwardRef(FieldsetLegend)>
+`;
+
+exports[`renders the FieldsetLegend with size l props 1`] = `
+<ForwardRef(FieldsetLegend)
+  size="l"
+>
+  <ForwardRef(Base)
+    as="legend"
+    className="govgr-heading-l govgr-fieldset__legend"
+  >
+    <legend
+      className="govgr-heading-l govgr-fieldset__legend"
+    >
+      This is FieldsetLegend with no props
+    </legend>
+  </ForwardRef(Base)>
+</ForwardRef(FieldsetLegend)>
+`;
+
+exports[`renders the FieldsetLegend with size m props 1`] = `
+<ForwardRef(FieldsetLegend)
+  size="m"
+>
+  <ForwardRef(Base)
+    as="legend"
+    className="govgr-heading-m govgr-fieldset__legend"
+  >
+    <legend
+      className="govgr-heading-m govgr-fieldset__legend"
+    >
+      This is FieldsetLegend with no props
+    </legend>
+  </ForwardRef(Base)>
+</ForwardRef(FieldsetLegend)>
+`;
+
+exports[`renders the FieldsetLegend with size s props 1`] = `
+<ForwardRef(FieldsetLegend)
+  size="s"
+>
+  <ForwardRef(Base)
+    as="legend"
+    className="govgr-heading-s govgr-fieldset__legend"
+  >
+    <legend
+      className="govgr-heading-s govgr-fieldset__legend"
+    >
+      This is FieldsetLegend with no props
+    </legend>
+  </ForwardRef(Base)>
+</ForwardRef(FieldsetLegend)>
+`;
+
+exports[`renders the FieldsetLegend with size xl props 1`] = `
+<ForwardRef(FieldsetLegend)
+  size="xl"
+>
+  <ForwardRef(Base)
+    as="legend"
+    className="govgr-heading-xl govgr-fieldset__legend"
+  >
+    <legend
+      className="govgr-heading-xl govgr-fieldset__legend"
+    >
+      This is FieldsetLegend with no props
+    </legend>
+  </ForwardRef(Base)>
+</ForwardRef(FieldsetLegend)>
+`;

package/src/FieldsetLegend/index.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
+
+it('renders the FieldsetLegend with no props', () => {
+  expect(
+    mount(<FieldsetLegend>This is FieldsetLegend with no props</FieldsetLegend>)
+  ).toMatchSnapshot();
+});
+
+it('renders the FieldsetLegend with size s props', () => {
+  expect(
+    mount(
+      <FieldsetLegend size="s">
+        This is FieldsetLegend with no props
+      </FieldsetLegend>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the FieldsetLegend with size m props', () => {
+  expect(
+    mount(
+      <FieldsetLegend size="m">
+        This is FieldsetLegend with no props
+      </FieldsetLegend>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the FieldsetLegend with size l props', () => {
+  expect(
+    mount(
+      <FieldsetLegend size="l">
+        This is FieldsetLegend with no props
+      </FieldsetLegend>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the FieldsetLegend with size xl props', () => {
+  expect(
+    mount(
+      <FieldsetLegend size="xl">
+        This is FieldsetLegend with no props
+      </FieldsetLegend>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the FieldsetLegend with heading props', () => {
+  expect(
+    mount(
+      <FieldsetLegend heading>
+        This is FieldsetLegend with no props
+      </FieldsetLegend>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the FieldsetLegend with heading and size s props', () => {
+  expect(
+    mount(
+      <FieldsetLegend heading size="s">
+        This is FieldsetLegend with no props
+      </FieldsetLegend>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the FieldsetLegend with heading and size m props', () => {
+  expect(
+    mount(
+      <FieldsetLegend heading size="m">
+        This is FieldsetLegend with no props
+      </FieldsetLegend>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the FieldsetLegend with heading and size l props', () => {
+  expect(
+    mount(
+      <FieldsetLegend heading size="l">
+        This is FieldsetLegend with no props
+      </FieldsetLegend>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the FieldsetLegend with heading and size xl props', () => {
+  expect(
+    mount(
+      <FieldsetLegend heading size="xl">
+        This is FieldsetLegend with no props
+      </FieldsetLegend>
+    )
+  ).toMatchSnapshot();
+});

package/src/FieldsetLegend/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FieldsetLegendProps extends BaseProps<'legend'> {
+  /**
+   * size is optional. The default value is 'l'
+   */
+  size?: 'xl' | 'l' | 'm' | 's';
+
+  /**
+   * heading is optional.
+   * Add this prop if this Fieldset component is the only one in this page.
+   * The default value is false.
+   */
+  heading?: boolean;
+}
+/**
+ * FieldsetLegend component is the title within a Fieldset component.
+ */
+export const FieldsetLegend = React.forwardRef<
+  HTMLLegendElement,
+  FieldsetLegendProps
+>(function FieldsetLegend(
+  { size = 'l', heading = false, className, children, ...props },
+  ref
+) {
+  return (
+    <>
+      <Base
+        as="legend"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-fieldset__legend': true,
+          'govgr-heading-xl': size === 'xl',
+          'govgr-heading-l': size === 'l',
+          'govgr-heading-m': size === 'm',
+          'govgr-heading-s': size === 's',
+        })}
+        {...(heading && { role: 'heading', 'aria-level': 1 })}
+        {...props}
+      >
+        {children}
+      </Base>
+    </>
+  );
+});
+
+export default FieldsetLegend;

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

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FileUpload with name prop 1`] = `
+<ForwardRef(FileUpload)
+  name="some-name"
+>
+  <ForwardRef(Base)
+    as="label"
+    className="govgr-btn govgr-btn-secondary govgr-label-file"
+    role="button"
+    tabIndex={0}
+  >
+    <label
+      className="govgr-btn govgr-btn-secondary govgr-label-file"
+      role="button"
+      tabIndex={0}
+    >
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-file-input"
+        name="some-name"
+        type="file"
+      >
+        <input
+          className="govgr-file-input"
+          name="some-name"
+          type="file"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </ForwardRef(Base)>
+</ForwardRef(FileUpload)>
+`;
+
+exports[`renders the FileUpload with no props 1`] = `
+<ForwardRef(FileUpload)>
+  <ForwardRef(Base)
+    as="label"
+    className="govgr-btn govgr-btn-secondary govgr-label-file"
+    role="button"
+    tabIndex={0}
+  >
+    <label
+      className="govgr-btn govgr-btn-secondary govgr-label-file"
+      role="button"
+      tabIndex={0}
+    >
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-file-input"
+        type="file"
+      >
+        <input
+          className="govgr-file-input"
+          type="file"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </ForwardRef(Base)>
+</ForwardRef(FileUpload)>
+`;

package/src/FileUpload/index.test.tsx

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