@digigov/react-core 0.25.4 → 0.26.0

package/src/PhaseBannerText/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 PhaseBannerTextProps extends BaseProps<'span'> {}
 /**
@@ -11,14 +11,14 @@ export interface PhaseBannerTextProps extends BaseProps<'span'> {}
 export const PhaseBannerText = React.forwardRef<
   HTMLSpanElement,
   PhaseBannerTextProps
->(function PhaseBannerText({ children, className, ...props }, ref) {
+>(function PhaseBannerText({ className, children, ...props }, ref) {
   return (
     <Base
       as="span"
+      ref={ref}
       className={clsx(className, {
         'govgr-phase-banner__text': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/RadioConditional/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-import FieldContainer from '@digigov/react-core/FieldContainer';
 import LabelContainer from '@digigov/react-core/LabelContainer';
+import FieldContainer from '@digigov/react-core/FieldContainer';
+import clsx from 'clsx';
 
 export interface RadioConditionalProps extends BaseProps<'div'> {}
 /**
@@ -13,14 +13,14 @@ export interface RadioConditionalProps extends BaseProps<'div'> {}
 export const RadioConditional = React.forwardRef<
   HTMLDivElement,
   RadioConditionalProps
->(function RadioConditional({ children, className, ...props }, ref) {
+>(function RadioConditional({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-radios__conditional': true,
       })}
-      ref={ref}
       {...props}
     >
       <FieldContainer>

package/src/RadioContainer/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 RadioContainerProps extends BaseProps<'div'> {
   /**
@@ -15,15 +15,15 @@ export interface RadioContainerProps extends BaseProps<'div'> {
 export const RadioContainer = React.forwardRef<
   HTMLDivElement,
   RadioContainerProps
->(function RadioContainer({ children, className, inline, ...props }, ref) {
+>(function RadioContainer({ className, children, inline, ...props }, ref) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-radios': true,
         'govgr-radios--inline': inline === true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

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

@@ -1,5 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the RadioItem  \`divider\` props 1`] = `
+<ForwardRef(RadioItem)
+  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-radios__item"
+  >
+    <ForwardRef(LabelContainer)
+      className="govgr-radios__label"
+    >
+      <ForwardRef(Base)
+        as="label"
+        className="govgr-radios__label govgr-label"
+      >
+        <label
+          className="govgr-radios__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-radios__input"
+            disabled={false}
+            type="radio"
+          >
+            <input
+              className="govgr-radios__input"
+              disabled={false}
+              type="radio"
+            />
+          </ForwardRef(Base)>
+        </label>
+      </ForwardRef(Base)>
+    </ForwardRef(LabelContainer)>
+  </div>
+</ForwardRef(RadioItem)>
+`;
+
 exports[`renders the RadioItem  value props 1`] = `
 <ForwardRef(RadioItem)
   value="someValue"
@@ -7,25 +58,92 @@ exports[`renders the RadioItem  value props 1`] = `
   <div
     className="govgr-radios__item"
   >
-    <label
-      className="govgr-label govgr-radios__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-radios__label"
+    >
+      <ForwardRef(Base)
+        as="label"
+        className="govgr-radios__label govgr-label"
+      >
+        <label
+          className="govgr-radios__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-radios__input"
+            disabled={false}
+            type="radio"
+            value="someValue"
+          >
+            <input
+              className="govgr-radios__input"
+              disabled={false}
+              type="radio"
+              value="someValue"
+            />
+          </ForwardRef(Base)>
+        </label>
+      </ForwardRef(Base)>
+    </ForwardRef(LabelContainer)>
+  </div>
+</ForwardRef(RadioItem)>
+`;
+
+exports[`renders the RadioItem with \`name\`, \`disabled\`, \`divider\` and \`value\` props 1`] = `
+<ForwardRef(RadioItem)
+  disabled={true}
+  divider="ή"
+  name="name"
+  value="someValue"
+>
+  <ForwardRef(ChoiceDivider)
+    text="ή"
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-choice-divider"
+    >
+      <div
+        className="govgr-choice-divider"
+      >
+        ή
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(ChoiceDivider)>
+  <div
+    className="govgr-radios__item"
+  >
+    <ForwardRef(LabelContainer)
+      className="govgr-radios__label--disabled govgr-radios__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-radios__input"
-        disabled={false}
-        type="radio"
-        value="someValue"
+        as="label"
+        className="govgr-radios__label--disabled govgr-radios__label govgr-label"
       >
-        <input
-          className="govgr-radios__input"
-          disabled={false}
-          type="radio"
-          value="someValue"
-        />
+        <label
+          className="govgr-radios__label--disabled govgr-radios__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-radios__input"
+            disabled={true}
+            name="name"
+            type="radio"
+            value="someValue"
+          >
+            <input
+              className="govgr-radios__input"
+              disabled={true}
+              name="name"
+              type="radio"
+              value="someValue"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(RadioItem)>
 `;
@@ -37,23 +155,32 @@ exports[`renders the RadioItem with disabled prop 1`] = `
   <div
     className="govgr-radios__item"
   >
-    <label
-      className="govgr-radios__label--disabled govgr-label govgr-radios__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-radios__label--disabled govgr-radios__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-radios__input"
-        disabled={true}
-        type="radio"
+        as="label"
+        className="govgr-radios__label--disabled govgr-radios__label govgr-label"
       >
-        <input
-          className="govgr-radios__input"
-          disabled={true}
-          type="radio"
-        />
+        <label
+          className="govgr-radios__label--disabled govgr-radios__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-radios__input"
+            disabled={true}
+            type="radio"
+          >
+            <input
+              className="govgr-radios__input"
+              disabled={true}
+              type="radio"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(RadioItem)>
 `;
@@ -65,25 +192,34 @@ exports[`renders the RadioItem with name  props 1`] = `
   <div
     className="govgr-radios__item"
   >
-    <label
-      className="govgr-label govgr-radios__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-radios__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-radios__input"
-        disabled={false}
-        name="name"
-        type="radio"
+        as="label"
+        className="govgr-radios__label govgr-label"
       >
-        <input
-          className="govgr-radios__input"
-          disabled={false}
-          name="name"
-          type="radio"
-        />
+        <label
+          className="govgr-radios__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-radios__input"
+            disabled={false}
+            name="name"
+            type="radio"
+          >
+            <input
+              className="govgr-radios__input"
+              disabled={false}
+              name="name"
+              type="radio"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(RadioItem)>
 `;
@@ -96,27 +232,36 @@ exports[`renders the RadioItem with name and value props 1`] = `
   <div
     className="govgr-radios__item"
   >
-    <label
-      className="govgr-label govgr-radios__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-radios__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-radios__input"
-        disabled={false}
-        name="name"
-        type="radio"
-        value="someValue"
+        as="label"
+        className="govgr-radios__label govgr-label"
       >
-        <input
-          className="govgr-radios__input"
-          disabled={false}
-          name="name"
-          type="radio"
-          value="someValue"
-        />
+        <label
+          className="govgr-radios__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-radios__input"
+            disabled={false}
+            name="name"
+            type="radio"
+            value="someValue"
+          >
+            <input
+              className="govgr-radios__input"
+              disabled={false}
+              name="name"
+              type="radio"
+              value="someValue"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(RadioItem)>
 `;
@@ -130,27 +275,36 @@ exports[`renders the RadioItem with name disabled and value props 1`] = `
   <div
     className="govgr-radios__item"
   >
-    <label
-      className="govgr-radios__label--disabled govgr-label govgr-radios__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-radios__label--disabled govgr-radios__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-radios__input"
-        disabled={true}
-        name="name"
-        type="radio"
-        value="someValue"
+        as="label"
+        className="govgr-radios__label--disabled govgr-radios__label govgr-label"
       >
-        <input
-          className="govgr-radios__input"
-          disabled={true}
-          name="name"
-          type="radio"
-          value="someValue"
-        />
+        <label
+          className="govgr-radios__label--disabled govgr-radios__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-radios__input"
+            disabled={true}
+            name="name"
+            type="radio"
+            value="someValue"
+          >
+            <input
+              className="govgr-radios__input"
+              disabled={true}
+              name="name"
+              type="radio"
+              value="someValue"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(RadioItem)>
 `;
@@ -160,23 +314,32 @@ exports[`renders the RadioItem with no props 1`] = `
   <div
     className="govgr-radios__item"
   >
-    <label
-      className="govgr-label govgr-radios__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-radios__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-radios__input"
-        disabled={false}
-        type="radio"
+        as="label"
+        className="govgr-radios__label govgr-label"
       >
-        <input
-          className="govgr-radios__input"
-          disabled={false}
-          type="radio"
-        />
+        <label
+          className="govgr-radios__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-radios__input"
+            disabled={false}
+            type="radio"
+          >
+            <input
+              className="govgr-radios__input"
+              disabled={false}
+              type="radio"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(RadioItem)>
 `;

package/src/RadioItem/index.test.tsx

@@ -17,6 +17,12 @@ it('renders the RadioItem  value props', () => {
   ).toMatchSnapshot();
 });
 
+it('renders the RadioItem  `divider` props', () => {
+  expect(
+    mount(<RadioItem divider={'ή'}>hello</RadioItem>)
+  ).toMatchSnapshot();
+});
+
 it('renders the RadioItem with name and value props', () => {
   expect(
     mount(
@@ -34,7 +40,17 @@ it('renders the RadioItem with disabled prop', () => {
 it('renders the RadioItem with name disabled and value props', () => {
   expect(
     mount(
-      <RadioItem disabled name={'name'} value={'someValue'}>
+      <RadioItem name={'name'} value={'someValue'} disabled>
+        hello
+      </RadioItem>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the RadioItem with `name`, `disabled`, `divider` and `value` props', () => {
+  expect(
+    mount(
+      <RadioItem name={'name'} value={'someValue'} divider={'ή'} disabled>
         hello
       </RadioItem>
     )

package/src/RadioItem/index.tsx

@@ -1,45 +1,56 @@
 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 RadioItemProps extends BaseProps<'input'> {}
+export interface RadioItemProps extends BaseProps<'input'> {
+  /**
+   * divider is optional.
+   * Add this prop to add a choice divider ontop of a radio item.
+   * The string is the text that it will appear above this radio item.
+   */
+  divider?: string;
+}
 /**
  * RadioItem component is used for display radio buttons.
  * RadioItem component must be included inside Radio component, as a children component.
  */
 export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
   function RadioItem(
-    { children, className, disabled = false, name, value, ...props },
+    { divider, name, value, className, disabled = false, children, ...props },
     ref
   ) {
     return (
-      <div
-        className={clsx(className, {
-          'govgr-radios__item': true,
-        })}
-      >
-        <LabelContainer
-          className={clsx({
-            'govgr-radios__label': true,
-            'govgr-radios__label--disabled': disabled === true,
+      <>
+        {divider && <ChoiceDivider text={divider} />}
+        <div
+          className={clsx(className, {
+            'govgr-radios__item': true,
           })}
         >
-          {children}
-          <Base
-            as="input"
+          <LabelContainer
             className={clsx({
-              'govgr-radios__input': true,
+              'govgr-radios__label': true,
+              'govgr-radios__label--disabled': disabled === true,
             })}
-            disabled={disabled}
-            name={name}
-            ref={ref}
-            type="radio"
-            value={value}
-            {...props}
-          />
-        </LabelContainer>
-      </div>
+          >
+            {children}
+            <Base
+              as="input"
+              ref={ref}
+              type="radio"
+              name={name}
+              value={value}
+              className={clsx({
+                'govgr-radios__input': true,
+              })}
+              disabled={disabled}
+              {...props}
+            />
+          </LabelContainer>
+        </div>
+      </>
     );
   }
 );

package/src/SectionBreak/index.tsx

@@ -1,30 +1,31 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface SectionBreakProps extends BaseProps<'hr'> {
-  /**
-   * size is optional and it is about the different size margins.
-   */
-  size?: 'xl' | 'l' | 'm' | 's';
-
   /**
    * visible is optional.
    * By default, SectionBreak only visible by its margin. You can add the 'visible' prop to make it visible with a separator line.
    */
   visible?: boolean;
+
+  /**
+   * size is optional and it is about the different size margins.
+   */
+  size?: 'xl' | 'l' | 'm' | 's';
 }
 /**
  * SectionBreak is used to create a thematic break between sections of content.
  */
 export const SectionBreak = React.forwardRef<HTMLHRElement, SectionBreakProps>(
   function SectionBreak(
-    { className, size = 's', visible = true, ...props },
+    { visible = true, size = 's', className, ...props },
     ref
   ) {
     return (
       <Base
         as="hr"
+        ref={ref}
         className={clsx(className, {
           'govgr-section-break': true,
           'govgr-section-break--visible': visible === true,
@@ -32,7 +33,6 @@ export const SectionBreak = React.forwardRef<HTMLHRElement, SectionBreakProps>(
           'govgr-section-break--l': size === 'l',
           'govgr-section-break--m': size === 'm',
         })}
-        ref={ref}
         {...props}
       />
     );

package/src/SelectContainer/index.test.tsx

@@ -16,7 +16,7 @@ it('renders the SelectContainer with name props', () => {
 it('renders the SelectContainer with name and defaultValue', () => {
   expect(
     mount(
-      <SelectContainer defaultValue={'some-value'} name={'some-name'}>
+      <SelectContainer name={'some-name'} defaultValue={'some-value'}>
         hello
       </SelectContainer>
     )

package/src/SelectContainer/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 SelectContainerProps extends BaseProps<'select'> {}
 /**
@@ -10,15 +10,15 @@ export interface SelectContainerProps extends BaseProps<'select'> {}
 export const SelectContainer = React.forwardRef<
   HTMLSelectElement,
   SelectContainerProps
->(function SelectContainer({ children, className, name, ...props }, ref) {
+>(function SelectContainer({ name, className, children, ...props }, ref) {
   return (
     <Base
       as="select"
+      name={name}
+      ref={ref}
       className={clsx(className, {
         'govgr-select': true,
       })}
-      name={name}
-      ref={ref}
       {...props}
     >
       {children}