@digigov/react-core 0.25.4 → 0.26.0

package/es/CheckIcon/index.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "size", "variant"];
+var _excluded = ["size", "variant", "className"];
 import React from 'react';
-import clsx from 'clsx';
 import SvgIcon from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
 
 var _ref2 = /*#__PURE__*/React.createElement("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"
@@ -13,16 +13,16 @@ var _ref2 = /*#__PURE__*/React.createElement("polygon", {
  * Use CheckIcon component when you need a check icon.
  */
 export var CheckIcon = /*#__PURE__*/React.forwardRef(function CheckIcon(_ref, ref) {
-  var className = _ref.className,
-      size = _ref.size,
+  var size = _ref.size,
       variant = _ref.variant,
+      className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(SvgIcon, _extends({
-    className: clsx(className, true && 'govgr-svg-icon--check'),
-    ref: ref,
     size: size,
-    variant: variant
+    variant: variant,
+    className: clsx(className, true && 'govgr-svg-icon--check'),
+    ref: ref
   }, props), _ref2);
 });
 export default CheckIcon;

package/es/CheckIcon/index.test.js

@@ -105,8 +105,8 @@ it('renders the CheckIcon with prop variant=focus', function () {
 });
 
 var _ref14 = /*#__PURE__*/React.createElement(CheckIcon, {
-  size: "s",
-  variant: "warning"
+  variant: "warning",
+  size: "s"
 });
 
 it('renders the CheckIcon with prop variant=warning and size=s', function () {
@@ -114,8 +114,8 @@ it('renders the CheckIcon with prop variant=warning and size=s', function () {
 });
 
 var _ref15 = /*#__PURE__*/React.createElement(CheckIcon, {
-  size: "xl",
-  variant: "warning"
+  variant: "warning",
+  size: "xl"
 });
 
 it('renders the CheckIcon with prop variant=error and size= xl', function () {

package/es/Checkbox/index.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className"];
+var _excluded = ["className", "children"];
 import React from 'react';
-import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 /**
  * Details for the Checkbox.
@@ -11,14 +11,14 @@ import Base from '@digigov/react-core/Base';
  * It takes CheckboxItem as children
  */
 export var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
+  var className = _ref.className,
+      children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
-    className: clsx(className, true && 'govgr-checkboxes'),
-    ref: ref
+    ref: ref,
+    className: clsx(className, true && 'govgr-checkboxes')
   }, props), children);
 });
 export default Checkbox;

package/es/CheckboxConditional/index.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className"];
+var _excluded = ["className", "children"];
 import React from 'react';
-import clsx from 'clsx';
 import Base 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';
 
 /**
  * CheckboxConditional asks the user a related question when they select a particular checkbox,
@@ -13,14 +13,14 @@ import LabelContainer from '@digigov/react-core/LabelContainer';
  * CheckboxConditional must be used inside Checkbox component
  */
 export var CheckboxConditional = /*#__PURE__*/React.forwardRef(function CheckboxConditional(_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
+  var className = _ref.className,
+      children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
-    className: clsx(className, true && 'govgr-checkboxes__conditional'),
-    ref: ref
+    ref: ref,
+    className: clsx(className, true && 'govgr-checkboxes__conditional')
   }, props), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, children)));
 });
 export default CheckboxConditional;

package/es/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/es/CheckboxItem/index.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "disabled", "name", "value"];
+var _excluded = ["name", "value", "divider", "className", "disabled", "children"];
 import React from 'react';
-import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
 import LabelContainer from '@digigov/react-core/LabelContainer';
+import clsx from 'clsx';
+import ChoiceDivider from '@digigov/react-core/ChoiceDivider';
 
 /**
  * Details for the CheckboxItem.
@@ -12,25 +13,28 @@ import LabelContainer from '@digigov/react-core/LabelContainer';
  * CheckboxItem must be used inside Checkbox component
  */
 export var CheckboxItem = /*#__PURE__*/React.forwardRef(function CheckboxItem(_ref, ref) {
-  var children = _ref.children,
+  var name = _ref.name,
+      value = _ref.value,
+      divider = _ref.divider,
       className = _ref.className,
       disabled = _ref.disabled,
-      name = _ref.name,
-      value = _ref.value,
+      children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, divider && /*#__PURE__*/React.createElement(ChoiceDivider, {
+    text: divider
+  }), /*#__PURE__*/React.createElement("div", {
     className: clsx(className, true && 'govgr-checkboxes__item')
   }, /*#__PURE__*/React.createElement(LabelContainer, {
     className: clsx(disabled === true && 'govgr-checkboxes__label--disabled', true && 'govgr-checkboxes__label')
   }, children, /*#__PURE__*/React.createElement(Base, _extends({
     as: "input",
-    className: clsx(true && 'govgr-checkboxes__input'),
-    disabled: disabled,
-    name: name,
     ref: ref,
     type: "checkbox",
-    value: value
-  }, props))));
+    name: name,
+    value: value,
+    className: clsx(true && 'govgr-checkboxes__input'),
+    disabled: disabled
+  }, props)))));
 });
 export default CheckboxItem;

package/es/CheckboxItem/index.test.js

@@ -33,11 +33,30 @@ it('renders the CheckboxItem with `disabled` prop', function () {
 });
 
 var _ref5 = /*#__PURE__*/React.createElement(CheckboxItem, {
-  disabled: true,
+  divider: "\u03AE"
+}, "hello");
+
+it('renders the CheckboxItem with `divider` prop', function () {
+  expect(mount(_ref5)).toMatchSnapshot();
+});
+
+var _ref6 = /*#__PURE__*/React.createElement(CheckboxItem, {
+  value: "example",
   name: "example",
-  value: "example"
+  disabled: true
 }, "hello");
 
 it('renders the CheckboxItem with `value` `name` and `disabled` props', function () {
-  expect(mount(_ref5)).toMatchSnapshot();
+  expect(mount(_ref6)).toMatchSnapshot();
+});
+
+var _ref7 = /*#__PURE__*/React.createElement(CheckboxItem, {
+  value: "example",
+  name: "example",
+  divider: "\u03AE",
+  disabled: true
+}, "hello");
+
+it('renders the CheckboxItem with `value` `name`, `divider` and `disabled` props', function () {
+  expect(mount(_ref7)).toMatchSnapshot();
 });

package/es/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/es/ChoiceDivider/index.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["text", "className"];
+import React from 'react';
+import Base from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+/**
+ * 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 var ChoiceDivider = /*#__PURE__*/React.forwardRef(function ChoiceDivider(_ref, ref) {
+  var text = _ref.text,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    as: "div",
+    ref: ref,
+    className: clsx(className, true && 'govgr-choice-divider')
+  }, props), text);
+});
+export default ChoiceDivider;

package/es/ChoiceDivider/index.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ChoiceDivider from '@digigov/react-core/ChoiceDivider';
+
+var _ref = /*#__PURE__*/React.createElement(ChoiceDivider, {
+  text: "\u03AE"
+});
+
+it('renders the ChoiceDivider with text prop', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/es/CloseIcon/index.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "size", "variant"];
+var _excluded = ["size", "variant", "className"];
 import React from 'react';
-import clsx from 'clsx';
 import SvgIcon from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
 
 var _ref2 = /*#__PURE__*/React.createElement("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 "
@@ -14,16 +14,16 @@ var _ref2 = /*#__PURE__*/React.createElement("polygon", {
  * CloseIcon component can be used for dismissing contents
  */
 export var CloseIcon = /*#__PURE__*/React.forwardRef(function CloseIcon(_ref, ref) {
-  var className = _ref.className,
-      size = _ref.size,
+  var size = _ref.size,
       variant = _ref.variant,
+      className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(SvgIcon, _extends({
-    className: clsx(className, true && 'govgr-close-icon'),
-    ref: ref,
     size: size,
-    variant: variant
+    variant: variant,
+    className: clsx(className, true && 'govgr-close-icon'),
+    ref: ref
   }, props), _ref2);
 });
 export default CloseIcon;

package/es/Confirmation/index.js

@@ -1,22 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className"];
+var _excluded = ["className", "children"];
 import React from 'react';
-import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 /**
  * You should use Conformation in a confirmation page at the end of a transaction.
  */
 export var Confirmation = /*#__PURE__*/React.forwardRef(function Confirmation(_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
+  var className = _ref.className,
+      children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
-    className: clsx(className, true && ['govgr-panel', 'govgr-panel--confirmation']),
-    ref: ref
+    ref: ref,
+    className: clsx(className, true && ['govgr-panel', 'govgr-panel--confirmation'])
   }, props), children);
 });
 export default Confirmation;