@digigov/react-core 0.18.1 → 0.19.0

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

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Container with cols={false} prop 1`] = `
+<ForwardRef(Container)
+  cols={false}
+  fullWidth={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-full-width-container"
+  >
+    <div
+      className="govgr-full-width-container"
+    >
+      <ForwardRef(Base)
+        as="div"
+        className=""
+      >
+        <div
+          className=""
+        >
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Container)>
+`;
+
+exports[`renders the Container with fullWidth prop 1`] = `
+<ForwardRef(Container)
+  fullWidth={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-full-width-container"
+  >
+    <div
+      className="govgr-full-width-container"
+    >
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-main-wrapper"
+      >
+        <div
+          className="govgr-main-wrapper"
+        >
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Container)>
+`;
+
+exports[`renders the Container with no props 1`] = `
+<ForwardRef(Container)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-width-container"
+  >
+    <div
+      className="govgr-width-container"
+    >
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-main-wrapper"
+      >
+        <div
+          className="govgr-main-wrapper"
+        >
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Container)>
+`;

package/src/Container/index.test.tsx

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

package/src/Container/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface ContainerProps extends BaseProps<'div'> {
+  /**
+   * cols is optional. Set to false if you don't need 3 columns layout.
+   */
+  cols?: true | false;
+  /**
+   * fullWidth is optional. Set to true if you need a full width layout.
+   */
+  fullWidth?: true | false;
+}
+/**
+ * Use Container as a wrapper.
+ */
+export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+  function Container(
+    { cols = true, fullWidth = false, className, children, ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-width-container': !fullWidth,
+          'govgr-full-width-container': fullWidth,
+        })}
+        {...props}
+      >
+        <Base
+          as="div"
+          className={clsx({
+            'govgr-main-wrapper': cols,
+          })}
+        >
+          {children}
+        </Base>
+      </Base>
+    );
+  }
+);
+
+export default Container;

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

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

package/src/CopyrightContainer/index.test.tsx

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

package/src/CopyrightContainer/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface CopyrightContainerProps extends BaseProps<'p'> {}
+/**
+ * CopyrightContainer is used inside the Footer component.
+ * CopyrightContainer has no props.
+ */
+export const CopyrightContainer = React.forwardRef<
+  HTMLParagraphElement,
+  CopyrightContainerProps
+>(function CopyrightContainer({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="p"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__licence-description': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default CopyrightContainer;

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

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

package/src/DateInputContainer/index.test.tsx

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

package/src/DateInputContainer/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface DateInputContainerProps extends BaseProps<'div'> {}
+/**
+ * Details for the DateInputContainer.
+ * DateInputContainer component is used for helping users enter a memorable date or one they can easily look up
+ * It is used as a parent component to wrap DateInputItem component
+ *
+ */
+export const DateInputContainer = React.forwardRef<
+  HTMLDivElement,
+  DateInputContainerProps
+>(function DateInputContainer({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-date-input': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default DateInputContainer;

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

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the DateInputItem with name and width===4 props 1`] = `
+<ForwardRef(DateInputItem)
+  name="date-input"
+  width={4}
+>
+  <div
+    className="govgr-date-input__item"
+  >
+    <label
+      className="govgr-label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-input--width-4 govgr-input"
+        inputMode="numeric"
+        name="date-input"
+        pattern="[0-9]*"
+        type="text"
+      >
+        <input
+          className="govgr-input--width-4 govgr-input"
+          inputMode="numeric"
+          name="date-input"
+          pattern="[0-9]*"
+          type="text"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(DateInputItem)>
+`;
+
+exports[`renders the DateInputItem with name prop 1`] = `
+<ForwardRef(DateInputItem)
+  name="date-input"
+>
+  <div
+    className="govgr-date-input__item"
+  >
+    <label
+      className="govgr-label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-input--width-2 govgr-input"
+        inputMode="numeric"
+        name="date-input"
+        pattern="[0-9]*"
+        type="text"
+      >
+        <input
+          className="govgr-input--width-2 govgr-input"
+          inputMode="numeric"
+          name="date-input"
+          pattern="[0-9]*"
+          type="text"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(DateInputItem)>
+`;
+
+exports[`renders the DateInputItem with no props 1`] = `
+<ForwardRef(DateInputItem)>
+  <div
+    className="govgr-date-input__item"
+  >
+    <label
+      className="govgr-label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-input--width-2 govgr-input"
+        inputMode="numeric"
+        pattern="[0-9]*"
+        type="text"
+      >
+        <input
+          className="govgr-input--width-2 govgr-input"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          type="text"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(DateInputItem)>
+`;

package/src/DateInputItem/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import DateInputItem from '@digigov/react-core/DateInputItem';
+
+it('renders the DateInputItem with no props', () => {
+  expect(mount(<DateInputItem>hello</DateInputItem>)).toMatchSnapshot();
+});
+
+it('renders the DateInputItem with name prop', () => {
+  expect(
+    mount(<DateInputItem name={'date-input'}>hello</DateInputItem>)
+  ).toMatchSnapshot();
+});
+
+it('renders the DateInputItem with name and width===4 props', () => {
+  expect(
+    mount(
+      <DateInputItem width={4} name={'date-input'}>
+        hello
+      </DateInputItem>
+    )
+  ).toMatchSnapshot();
+});

package/src/DateInputItem/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface DateInputItemProps extends BaseProps<'input'> {
+  /**
+   * Name property is optional and it contains a single value which describes the name of the <input> element.
+   */
+  name?: string;
+  /**
+   * Width property is optional.
+   * Use this property for year field to grow width.
+   */
+  width?: 2 | 4;
+  /**
+   * error is optional. The default value is false.
+   * Use this prop when there is an error at the input.
+   */
+  error?: boolean;
+}
+/**
+ * Details for the DateInputItem.
+ * DateInputItem component is used for displaying date.
+ * DateInputItem component must be included inside DateInput component as children component
+ */
+export const DateInputItem = React.forwardRef<
+  HTMLInputElement,
+  DateInputItemProps
+>(function DateInputItem(
+  { name, width = 2, error, className, children, ...props },
+  ref
+) {
+  return (
+    <div
+      className={clsx(className, {
+        'govgr-date-input__item': true,
+      })}
+    >
+      <label
+        className={clsx({
+          'govgr-label': true,
+        })}
+      >
+        {children}
+        <Base
+          as="input"
+          ref={ref}
+          type="text"
+          pattern="[0-9]*"
+          inputMode="numeric"
+          name={name}
+          className={clsx({
+            'govgr-input': true,
+            'govgr-input--width-2': width === 2,
+            'govgr-input--width-4': width === 4,
+            'govgr-error-input': error === true,
+          })}
+          {...props}
+        />
+      </label>
+    </div>
+  );
+});
+
+export default DateInputItem;

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

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

package/src/Details/index.test.tsx

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

package/src/Details/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface DetailsProps extends BaseProps<'details'> {}
+/**
+ * Details is used to make a page easier to scan when it contains information that only some users will need.
+ * Details component wraps DetailsSummary and DetailsContent as children components
+ */
+export const Details = React.forwardRef<HTMLElement, DetailsProps>(
+  function Details({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="details"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-details': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Details;

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

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

package/src/DetailsContent/index.test.tsx

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

package/src/DetailsContent/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface DetailsContentProps extends BaseProps<'div'> {}
+/**
+ *DetailsContent component wraps the content text.
+ *It is used inside Details component as children
+ */
+export const DetailsContent = React.forwardRef<
+  HTMLDivElement,
+  DetailsContentProps
+>(function DetailsContent({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-details__summary-text': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default DetailsContent;

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

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

package/src/DetailsSummary/index.test.tsx

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

package/src/DetailsSummary/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface DetailsSummaryProps extends BaseProps<'summary'> {}
+/**
+ * Use this inside Details.DetailsSummary will be the text to click on.
+ */
+export const DetailsSummary = React.forwardRef<
+  HTMLElement,
+  DetailsSummaryProps
+>(function DetailsSummary({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="summary"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-details__summary': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default DetailsSummary;

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

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

package/src/ErrorMessage/index.test.tsx

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

package/src/ErrorMessage/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface ErrorMessageProps extends BaseProps<'p'> {}
+/**
+ * ErrorMessage is used to show an error message when there is a validation error.
+ * In the error message explain what went wrong and how to fix it.
+ * This component is placed below the FieldsetLegend and the Hint.
+ */
+export const ErrorMessage = React.forwardRef<
+  HTMLParagraphElement,
+  ErrorMessageProps
+>(function ErrorMessage({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="p"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-error-message': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default ErrorMessage;