@digigov/react-core 0.18.1 → 0.19.1

package/src/CheckIcon/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
+export interface CheckIconProps extends SvgIconProps {
+  /**
+   * ref is optional.
+   * ref prop declares the reference of the svg icon component.
+   * It can be used to to access the DOM element and the React element.
+   */
+  ref?: React.Ref<SVGSVGElement>;
+}
+/**
+ * Use CheckIcon component when you need a check icon.
+ */
+export const CheckIcon: React.FC<CheckIconProps> = React.forwardRef<
+  SVGSVGElement,
+  CheckIconProps
+>(function CheckIcon({ size, variant, className, ...props }, ref) {
+  return (
+    <SvgIcon
+      size={size}
+      variant={variant}
+      className={clsx(className, {
+        'govgr-svg-icon--check': true,
+      })}
+      ref={ref}
+      {...props}
+    >
+      <polygon points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94" />
+    </SvgIcon>
+  );
+});
+
+export default CheckIcon;

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

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Checkbox with no props 1`] = `
+<ForwardRef(Checkbox)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-checkboxes"
+  >
+    <div
+      className="govgr-checkboxes"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Checkbox)>
+`;
+
+exports[`renders the Checkbox with no props and CheckboxItem 1`] = `
+<ForwardRef(Checkbox)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-checkboxes"
+  >
+    <div
+      className="govgr-checkboxes"
+    >
+      <ForwardRef(CheckboxItem)>
+        <div
+          className="govgr-checkboxes__item"
+        >
+          <label
+            className="govgr-label govgr-checkboxes__label"
+          >
+            This is item 1
+            <ForwardRef(Base)
+              as="input"
+              className="govgr-checkboxes__input"
+              type="checkbox"
+            >
+              <input
+                className="govgr-checkboxes__input"
+                type="checkbox"
+              />
+            </ForwardRef(Base)>
+          </label>
+        </div>
+      </ForwardRef(CheckboxItem)>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Checkbox)>
+`;

package/src/Checkbox/index.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Checkbox from '@digigov/react-core/Checkbox';
+import CheckboxItem from '@digigov/react-core/CheckboxItem';
+
+it('renders the Checkbox with no props', () => {
+  expect(mount(<Checkbox>hello</Checkbox>)).toMatchSnapshot();
+});
+
+it('renders the Checkbox with no props and CheckboxItem', () => {
+  expect(
+    mount(
+      <Checkbox>
+        <CheckboxItem>This is item 1</CheckboxItem>
+      </Checkbox>
+    )
+  ).toMatchSnapshot();
+});

package/src/Checkbox/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface CheckboxProps extends BaseProps<'div'> {}
+/**
+ * Details for the Checkbox.
+ * Checkbox component allow the user to select one or more items from a set.
+ * It takes CheckboxItem as children
+ */
+export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(
+  function Checkbox({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-checkboxes': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Checkbox;

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

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

package/src/CheckboxConditional/index.test.tsx

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

package/src/CheckboxConditional/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface CheckboxConditionalProps extends BaseProps<'div'> {}
+/**
+ * CheckboxConditional asks the user a related question when they select a particular checkbox,
+ * so they only see the question when it’s relevant to them.
+ * CheckboxConditional must be used inside Checkbox component
+ */
+export const CheckboxConditional = React.forwardRef<
+  HTMLDivElement,
+  CheckboxConditionalProps
+>(function CheckboxConditional({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-checkboxes__conditional': true,
+      })}
+      {...props}
+    >
+      <div
+        className={clsx({
+          'govgr-field': true,
+        })}
+      >
+        <label
+          className={clsx({
+            'govgr-label': true,
+          })}
+        >
+          {children}
+        </label>
+      </div>
+    </Base>
+  );
+});
+
+export default CheckboxConditional;

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

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CheckboxItem with \`name\` prop 1`] = `
+<ForwardRef(CheckboxItem)
+  name="example"
+>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <label
+      className="govgr-label govgr-checkboxes__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-checkboxes__input"
+        name="example"
+        type="checkbox"
+      >
+        <input
+          className="govgr-checkboxes__input"
+          name="example"
+          type="checkbox"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
+exports[`renders the CheckboxItem with \`value\` prop 1`] = `
+<ForwardRef(CheckboxItem)
+  value="example"
+>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <label
+      className="govgr-label govgr-checkboxes__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-checkboxes__input"
+        type="checkbox"
+        value="example"
+      >
+        <input
+          className="govgr-checkboxes__input"
+          type="checkbox"
+          value="example"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
+exports[`renders the CheckboxItem with no props 1`] = `
+<ForwardRef(CheckboxItem)>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <label
+      className="govgr-label govgr-checkboxes__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-checkboxes__input"
+        type="checkbox"
+      >
+        <input
+          className="govgr-checkboxes__input"
+          type="checkbox"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;

package/src/CheckboxItem/index.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import CheckboxItem from '@digigov/react-core/CheckboxItem';
+
+it('renders the CheckboxItem with no props', () => {
+  expect(mount(<CheckboxItem>hello</CheckboxItem>)).toMatchSnapshot();
+});
+
+it('renders the CheckboxItem with `name` prop', () => {
+  expect(
+    mount(<CheckboxItem name="example">hello</CheckboxItem>)
+  ).toMatchSnapshot();
+});
+it('renders the CheckboxItem with `value` prop', () => {
+  expect(
+    mount(<CheckboxItem value="example">hello</CheckboxItem>)
+  ).toMatchSnapshot();
+});

package/src/CheckboxItem/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface CheckboxItemProps extends BaseProps<'input'> {
+  /**
+   * Name property is optional and it contains a single value which describes the name of the <input> element.
+   */
+  name?: string;
+
+  /**
+   * Value property is optional and it specifies the value of an <input> element.
+   */
+  value?: string;
+}
+/**
+ * Details for the CheckboxItem.
+ * CheckboxItem component allows the user to select one or more checkboxes
+ * CheckboxItem must be used inside Checkbox component
+ */
+export const CheckboxItem = React.forwardRef<
+  HTMLInputElement,
+  CheckboxItemProps
+>(function CheckboxItem({ name, value, className, children, ...props }, ref) {
+  return (
+    <div
+      className={clsx(className, {
+        'govgr-checkboxes__item': true,
+      })}
+    >
+      <label
+        className={clsx({
+          'govgr-label govgr-checkboxes__label': true,
+        })}
+      >
+        {children}
+        <Base
+          as="input"
+          ref={ref}
+          type="checkbox"
+          name={name}
+          value={value}
+          className={clsx({
+            'govgr-checkboxes__input': true,
+          })}
+          {...props}
+        />
+      </label>
+    </div>
+  );
+});
+
+export default CheckboxItem;

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CloseIcon with no props 1`] = `
+<ForwardRef(CloseIcon)>
+  <ForwardRef(SvgIcon)
+    className="govgr-close-icon"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-close-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-close-icon govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(CloseIcon)>
+`;

package/src/CloseIcon/index.test.tsx

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

package/src/CloseIcon/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
+export interface CloseIconProps extends SvgIconProps {
+  /**
+   * ref is optional.
+   * ref prop declares the reference of the svg icon component.
+   * It can be used to to access the DOM element and the React element.
+   */
+  ref?: React.Ref<SVGSVGElement>;
+}
+/**
+ * CloseIcon component is used to add close icon.
+ * CloseIcon component can be used for dismissing contents
+ */
+export const CloseIcon: React.FC<CloseIconProps> = React.forwardRef<
+  SVGSVGElement,
+  CloseIconProps
+>(function CloseIcon({ size, variant, className, ...props }, ref) {
+  return (
+    <SvgIcon
+      size={size}
+      variant={variant}
+      className={clsx(className, {
+        'govgr-close-icon': true,
+      })}
+      ref={ref}
+      {...props}
+    >
+      <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " />
+    </SvgIcon>
+  );
+});
+
+export default CloseIcon;

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

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

package/src/Confirmation/index.test.tsx

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

package/src/Confirmation/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface ConfirmationProps extends BaseProps<'div'> {}
+/**
+ * You should use Conformation in a confirmation page at the end of a transaction.
+ */
+export const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
+  function Confirmation({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-panel': true,
+          'govgr-panel--confirmation': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Confirmation;

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

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

package/src/ConfirmationBody/index.test.tsx

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

package/src/ConfirmationBody/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface ConfirmationBodyProps extends BaseProps<'div'> {}
+/**
+ * ConfirmationBody provides the body of the confirmation message. Use this inside Confirmation, after ConfirmationTitle.
+ */
+export const ConfirmationBody = React.forwardRef<
+  HTMLDivElement,
+  ConfirmationBodyProps
+>(function ConfirmationBody({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-panel__body': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default ConfirmationBody;

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

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

package/src/ConfirmationTitle/index.test.tsx

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

package/src/ConfirmationTitle/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface ConfirmationTitleProps extends BaseProps<'h1'> {}
+/**
+ * ConfirmationTitle provides the title of the confirmation message.Use this inside Confirmation.
+ */
+export const ConfirmationTitle = React.forwardRef<
+  HTMLHeadingElement,
+  ConfirmationTitleProps
+>(function ConfirmationTitle({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="h1"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-panel__title': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default ConfirmationTitle;