@digigov/react-core 0.25.4 → 0.26.0

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

@@ -7,23 +7,81 @@ exports[`renders the CheckboxItem with \`disabled\` prop 1`] = `
   <div
     className="govgr-checkboxes__item"
   >
-    <label
-      className="govgr-checkboxes__label--disabled govgr-label govgr-checkboxes__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label--disabled govgr-checkboxes__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-checkboxes__input"
-        disabled={true}
-        type="checkbox"
+        as="label"
+        className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
       >
-        <input
-          className="govgr-checkboxes__input"
-          disabled={true}
-          type="checkbox"
-        />
+        <label
+          className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            disabled={true}
+            type="checkbox"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              disabled={true}
+              type="checkbox"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
+exports[`renders the CheckboxItem with \`divider\` prop 1`] = `
+<ForwardRef(CheckboxItem)
+  divider="ή"
+>
+  <ForwardRef(ChoiceDivider)
+    text="ή"
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-choice-divider"
+    >
+      <div
+        className="govgr-choice-divider"
+      >
+        ή
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(ChoiceDivider)>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label"
+    >
+      <ForwardRef(Base)
+        as="label"
+        className="govgr-checkboxes__label govgr-label"
+      >
+        <label
+          className="govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            type="checkbox"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              type="checkbox"
+            />
+          </ForwardRef(Base)>
+        </label>
+      </ForwardRef(Base)>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(CheckboxItem)>
 `;
@@ -35,25 +93,32 @@ exports[`renders the CheckboxItem with \`name\` prop 1`] = `
   <div
     className="govgr-checkboxes__item"
   >
-    <label
-      className="govgr-label govgr-checkboxes__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-checkboxes__input"
-        disabled={false}
-        name="example"
-        type="checkbox"
+        as="label"
+        className="govgr-checkboxes__label govgr-label"
       >
-        <input
-          className="govgr-checkboxes__input"
-          disabled={false}
-          name="example"
-          type="checkbox"
-        />
+        <label
+          className="govgr-checkboxes__label govgr-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>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(CheckboxItem)>
 `;
@@ -67,27 +132,94 @@ exports[`renders the CheckboxItem with \`value\` \`name\` and \`disabled\` props
   <div
     className="govgr-checkboxes__item"
   >
-    <label
-      className="govgr-checkboxes__label--disabled govgr-label govgr-checkboxes__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label--disabled govgr-checkboxes__label"
+    >
+      <ForwardRef(Base)
+        as="label"
+        className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
+      >
+        <label
+          className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            disabled={true}
+            name="example"
+            type="checkbox"
+            value="example"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              disabled={true}
+              name="example"
+              type="checkbox"
+              value="example"
+            />
+          </ForwardRef(Base)>
+        </label>
+      </ForwardRef(Base)>
+    </ForwardRef(LabelContainer)>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
+exports[`renders the CheckboxItem with \`value\` \`name\`, \`divider\` and \`disabled\` props 1`] = `
+<ForwardRef(CheckboxItem)
+  disabled={true}
+  divider="ή"
+  name="example"
+  value="example"
+>
+  <ForwardRef(ChoiceDivider)
+    text="ή"
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-choice-divider"
+    >
+      <div
+        className="govgr-choice-divider"
+      >
+        ή
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(ChoiceDivider)>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label--disabled govgr-checkboxes__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-checkboxes__input"
-        disabled={true}
-        name="example"
-        type="checkbox"
-        value="example"
+        as="label"
+        className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
       >
-        <input
-          className="govgr-checkboxes__input"
-          disabled={true}
-          name="example"
-          type="checkbox"
-          value="example"
-        />
+        <label
+          className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            disabled={true}
+            name="example"
+            type="checkbox"
+            value="example"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              disabled={true}
+              name="example"
+              type="checkbox"
+              value="example"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(CheckboxItem)>
 `;
@@ -99,25 +231,32 @@ exports[`renders the CheckboxItem with \`value\` prop 1`] = `
   <div
     className="govgr-checkboxes__item"
   >
-    <label
-      className="govgr-label govgr-checkboxes__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-checkboxes__input"
-        disabled={false}
-        type="checkbox"
-        value="example"
+        as="label"
+        className="govgr-checkboxes__label govgr-label"
       >
-        <input
-          className="govgr-checkboxes__input"
-          disabled={false}
-          type="checkbox"
-          value="example"
-        />
+        <label
+          className="govgr-checkboxes__label govgr-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>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(CheckboxItem)>
 `;
@@ -127,23 +266,30 @@ exports[`renders the CheckboxItem with no props 1`] = `
   <div
     className="govgr-checkboxes__item"
   >
-    <label
-      className="govgr-label govgr-checkboxes__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-checkboxes__input"
-        disabled={false}
-        type="checkbox"
+        as="label"
+        className="govgr-checkboxes__label govgr-label"
       >
-        <input
-          className="govgr-checkboxes__input"
-          disabled={false}
-          type="checkbox"
-        />
+        <label
+          className="govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            type="checkbox"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              type="checkbox"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(CheckboxItem)>
 `;

package/src/CheckboxItem/index.test.tsx

@@ -21,13 +21,26 @@ it('renders the CheckboxItem with `value` prop', () => {
 it('renders the CheckboxItem with `disabled` prop', () => {
   expect(mount(<CheckboxItem disabled>hello</CheckboxItem>)).toMatchSnapshot();
 });
+it('renders the CheckboxItem with `divider` prop', () => {
+  expect(mount(<CheckboxItem divider='ή'>hello</CheckboxItem>)).toMatchSnapshot();
+});
 
 it('renders the CheckboxItem with `value` `name` and `disabled` props', () => {
   expect(
     mount(
-      <CheckboxItem disabled name="example" value="example">
+      <CheckboxItem value="example" name="example" disabled>
         hello
       </CheckboxItem>
     )
   ).toMatchSnapshot();
 });
+it('renders the CheckboxItem with `value` `name`, `divider` and `disabled` props', () => {
+  expect(
+    mount(
+      <CheckboxItem value="example" name="example" divider='ή' disabled>
+        hello
+      </CheckboxItem>
+    )
+  ).toMatchSnapshot();
+});
+

package/src/CheckboxItem/index.tsx

@@ -1,9 +1,17 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import LabelContainer from '@digigov/react-core/LabelContainer';
+import clsx from 'clsx';
+import ChoiceDivider from '@digigov/react-core/ChoiceDivider';
 
-export interface CheckboxItemProps extends BaseProps<'input'> {}
+export interface CheckboxItemProps extends BaseProps<'input'> {
+  /**
+   * divider is optional.
+   * Add this prop to add a choice divider ontop of a checkbox item.
+   * The string is the text that it will appear above this checkbox item.
+   */
+  divider?: string;
+}
 /**
  * Details for the CheckboxItem.
  * CheckboxItem component allows the user to select one or more checkboxes
@@ -13,36 +21,39 @@ export const CheckboxItem = React.forwardRef<
   HTMLInputElement,
   CheckboxItemProps
 >(function CheckboxItem(
-  { children, className, disabled, name, value, ...props },
+  { name, value, divider, className, disabled, children, ...props },
   ref
 ) {
   return (
-    <div
-      className={clsx(className, {
-        'govgr-checkboxes__item': true,
-      })}
-    >
-      <LabelContainer
-        className={clsx({
-          'govgr-checkboxes__label': true,
-          'govgr-checkboxes__label--disabled': disabled === true,
+    <>
+      {divider && <ChoiceDivider text={divider} />}
+      <div
+        className={clsx(className, {
+          'govgr-checkboxes__item': true,
         })}
       >
-        {children}
-        <Base
-          as="input"
+        <LabelContainer
           className={clsx({
-            'govgr-checkboxes__input': true,
+            'govgr-checkboxes__label': true,
+            'govgr-checkboxes__label--disabled': disabled === true,
           })}
-          disabled={disabled}
-          name={name}
-          ref={ref}
-          type="checkbox"
-          value={value}
-          {...props}
-        />
-      </LabelContainer>
-    </div>
+        >
+          {children}
+          <Base
+            as="input"
+            ref={ref}
+            type="checkbox"
+            name={name}
+            value={value}
+            className={clsx({
+              'govgr-checkboxes__input': true,
+            })}
+            disabled={disabled}
+            {...props}
+          />
+        </LabelContainer>
+      </div>
+    </>
   );
 });
 

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the ChoiceDivider with text prop 1`] = `
+<ForwardRef(ChoiceDivider)
+  text="ή"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-choice-divider"
+  >
+    <div
+      className="govgr-choice-divider"
+    >
+      ή
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(ChoiceDivider)>
+`;

package/src/ChoiceDivider/index.test.tsx

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

package/src/ChoiceDivider/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface ChoiceDividerProps extends BaseProps<'div'> {
+  text?: string;
+}
+/**
+ * ChoiceDivider component adds a text divider on top of a Radio or Checkbox item.
+ * It's been used as a prop ("divider") inside RadioItem and CheckboxItem. 
+ */
+export const ChoiceDivider = React.forwardRef<HTMLDivElement, ChoiceDividerProps>(
+  function ChoiceDivider({ text, className, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-choice-divider': true,
+        })}
+        {...props}
+      >
+        {text}
+      </Base>
+    );
+  }
+);
+
+export default ChoiceDivider;

package/src/CloseIcon/index.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
-import clsx from 'clsx';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
-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>;
-}
+import clsx from 'clsx';
+
+export interface CloseIconProps extends SvgIconProps {}
 /**
  * CloseIcon component is used to add close icon.
  * CloseIcon component can be used for dismissing contents
@@ -16,15 +10,15 @@ export interface CloseIconProps extends SvgIconProps {
 export const CloseIcon: React.FC<CloseIconProps> = React.forwardRef<
   SVGSVGElement,
   CloseIconProps
->(function CloseIcon({ className, size, variant, ...props }, ref) {
+>(function CloseIcon({ size, variant, className, ...props }, ref) {
   return (
     <SvgIcon
+      size={size}
+      variant={variant}
       className={clsx(className, {
         'govgr-close-icon': true,
       })}
       ref={ref}
-      size={size}
-      variant={variant}
       {...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 " />

package/src/Confirmation/index.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
-import clsx from 'clsx';
 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({ children, className, ...props }, ref) {
+  function Confirmation({ className, children, ...props }, ref) {
     return (
       <Base
         as="div"
+        ref={ref}
         className={clsx(className, {
           'govgr-panel': true,
           'govgr-panel--confirmation': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/ConfirmationBody/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface ConfirmationBodyProps extends BaseProps<'div'> {}
 /**
@@ -9,14 +9,14 @@ export interface ConfirmationBodyProps extends BaseProps<'div'> {}
 export const ConfirmationBody = React.forwardRef<
   HTMLDivElement,
   ConfirmationBodyProps
->(function ConfirmationBody({ children, className, ...props }, ref) {
+>(function ConfirmationBody({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-panel__body': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/ConfirmationTitle/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface ConfirmationTitleProps extends BaseProps<'h1'> {}
 /**
@@ -9,14 +9,14 @@ export interface ConfirmationTitleProps extends BaseProps<'h1'> {}
 export const ConfirmationTitle = React.forwardRef<
   HTMLHeadingElement,
   ConfirmationTitleProps
->(function ConfirmationTitle({ children, className, ...props }, ref) {
+>(function ConfirmationTitle({ className, children, ...props }, ref) {
   return (
     <Base
       as="h1"
+      ref={ref}
       className={clsx(className, {
         'govgr-panel__title': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/Container/index.test.tsx

@@ -12,7 +12,7 @@ it('renders the Container with fullWidth prop', () => {
 it('renders the Container with cols={false} prop', () => {
   expect(
     mount(
-      <Container cols={false} fullWidth>
+      <Container fullWidth cols={false}>
         hello
       </Container>
     )

package/src/Container/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface ContainerProps extends BaseProps<'div'> {
   /**
@@ -17,17 +17,17 @@ export interface ContainerProps extends BaseProps<'div'> {
  */
 export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
   function Container(
-    { children, className, cols = true, fullWidth = false, ...props },
+    { 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,
         })}
-        ref={ref}
         {...props}
       >
         <Base