@digigov/react-core 0.4.0 → 0.5.2

package/es/RadioConditional/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Blockquote with name prop 1`] = `
+<ForwardRef(RadioConditional)
+  name="some-name"
+>
+  <div
+    className="govgr-radios__conditional"
+  >
+    <div
+      className="govgr-field"
+    >
+      <label
+        className="govgr-label"
+      >
+        hello
+      </label>
+    </div>
+  </div>
+</ForwardRef(RadioConditional)>
+`;
+
+exports[`renders the Blockquote with no props 1`] = `
+<ForwardRef(RadioConditional)>
+  <div
+    className="govgr-radios__conditional"
+  >
+    <div
+      className="govgr-field"
+    >
+      <label
+        className="govgr-label"
+      >
+        hello
+      </label>
+    </div>
+  </div>
+</ForwardRef(RadioConditional)>
+`;

package/es/RadioConditional/index.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "className", "children"];
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * RadioConditional asks the user a related question when they select a particular radios,
+ * so they only see the question when it’s relevant to them.
+ * RadioConditional must be used inside Radio component
+ */
+export var RadioConditional = /*#__PURE__*/React.forwardRef(function RadioConditional(_ref, ref) {
+  var name = _ref.name,
+      className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: clsx(className, true && 'govgr-radios__conditional')
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: clsx(true && 'govgr-field')
+  }, /*#__PURE__*/React.createElement("label", {
+    className: clsx(true && 'govgr-label')
+  }, children)));
+});
+export default RadioConditional;

package/es/RadioConditional/index.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import RadioConditional from '@digigov/react-core/RadioConditional';
+
+var _ref = /*#__PURE__*/React.createElement(RadioConditional, null, "hello");
+
+it('renders the Blockquote with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(RadioConditional, {
+  name: 'some-name'
+}, "hello");
+
+it('renders the Blockquote with name prop', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});

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

@@ -7,15 +7,15 @@ exports[`renders the RadioItem  value props 1`] = `
   <div
     className="govgr-radios__item"
   >
-    <input
-      className="govgr-radios__input"
-      type="radio"
-      value="someValue"
-    />
     <label
       className="govgr-label govgr-radios__label"
     >
       hello
+      <input
+        className="govgr-radios__input"
+        type="radio"
+        value="someValue"
+      />
     </label>
   </div>
 </ForwardRef(RadioItem)>
@@ -28,15 +28,15 @@ exports[`renders the RadioItem with name  props 1`] = `
   <div
     className="govgr-radios__item"
   >
-    <input
-      className="govgr-radios__input"
-      name="name"
-      type="radio"
-    />
     <label
       className="govgr-label govgr-radios__label"
     >
       hello
+      <input
+        className="govgr-radios__input"
+        name="name"
+        type="radio"
+      />
     </label>
   </div>
 </ForwardRef(RadioItem)>
@@ -50,16 +50,16 @@ exports[`renders the RadioItem with name and value props 1`] = `
   <div
     className="govgr-radios__item"
   >
-    <input
-      className="govgr-radios__input"
-      name="name"
-      type="radio"
-      value="someValue"
-    />
     <label
       className="govgr-label govgr-radios__label"
     >
       hello
+      <input
+        className="govgr-radios__input"
+        name="name"
+        type="radio"
+        value="someValue"
+      />
     </label>
   </div>
 </ForwardRef(RadioItem)>
@@ -70,14 +70,14 @@ exports[`renders the RadioItem with no props 1`] = `
   <div
     className="govgr-radios__item"
   >
-    <input
-      className="govgr-radios__input"
-      type="radio"
-    />
     <label
       className="govgr-label govgr-radios__label"
     >
       hello
+      <input
+        className="govgr-radios__input"
+        type="radio"
+      />
     </label>
   </div>
 </ForwardRef(RadioItem)>

package/es/RadioItem/index.js

@@ -15,16 +15,16 @@ export var RadioItem = /*#__PURE__*/React.forwardRef(function RadioItem(_ref, re
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
+  return /*#__PURE__*/React.createElement("div", {
     className: clsx(className, true && 'govgr-radios__item')
-  }, props), /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("label", {
+    className: clsx(true && 'govgr-label govgr-radios__label')
+  }, children, /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref,
     type: "radio",
     name: name,
     value: value,
     className: clsx(true && 'govgr-radios__input')
-  }), /*#__PURE__*/React.createElement("label", {
-    className: clsx(true && 'govgr-label govgr-radios__label')
-  }, children));
+  }, props))));
 });
 export default RadioItem;

package/es/index.js

@@ -52,7 +52,7 @@ export { default as FooterMeta } from '@digigov/react-core/FooterMeta';
 export { default as FooterMetaItem } from '@digigov/react-core/FooterMetaItem';
 export { default as FooterNavigation } from '@digigov/react-core/FooterNavigation';
 export { default as FooterSection } from '@digigov/react-core/FooterSection';
-export { default as FormGroup } from '@digigov/react-core/FormGroup';
+export { default as Field } from '@digigov/react-core/Field';
 export { default as GovGRFooter } from '@digigov/react-core/GovGRFooter';
 export { default as GovGRLogo } from '@digigov/react-core/GovGRLogo';
 export { default as Grid } from '@digigov/react-core/Grid';
@@ -66,8 +66,10 @@ export { default as HeaderTitle } from '@digigov/react-core/HeaderTitle';
 export { default as Heading } from '@digigov/react-core/Heading';
 export { default as HeadingCaption } from '@digigov/react-core/HeadingCaption';
 export { default as HellenicRepublicLogo } from '@digigov/react-core/HellenicRepublicLogo';
+export { default as Hidden } from '@digigov/react-core/Hidden';
 export { default as Hint } from '@digigov/react-core/Hint';
 export { default as Label } from '@digigov/react-core/Label';
+export { default as LabelTitle } from '@digigov/react-core/LabelTitle';
 export { default as Layout } from '@digigov/react-core/Layout';
 export { default as Link } from '@digigov/react-core/Link';
 export { default as List } from '@digigov/react-core/List';
@@ -96,6 +98,7 @@ export { default as PhaseBannerTag } from '@digigov/react-core/PhaseBannerTag';
 export { default as PhaseBannerText } from '@digigov/react-core/PhaseBannerText';
 export { default as Radio } from '@digigov/react-core/Radio';
 export { default as RadioItem } from '@digigov/react-core/RadioItem';
+export { default as RadioConditional } from '@digigov/react-core/RadioConditional';
 export { default as SectionBreak } from '@digigov/react-core/SectionBreak';
 export { default as Select } from '@digigov/react-core/Select';
 export { default as SelectOption } from '@digigov/react-core/SelectOption';

package/esm/Button/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["color", "disabled", "className", "children"];
+var _excluded = ["color", "variant", "disabled", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 
@@ -10,6 +10,8 @@ import clsx from 'clsx';
 export var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'primary' : _ref$color,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'button' : _ref$variant,
       disabled = _ref.disabled,
       className = _ref.className,
       children = _ref.children,
@@ -18,7 +20,7 @@ export var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   return /*#__PURE__*/React.createElement("button", _extends({
     disabled: disabled,
     ref: ref,
-    className: clsx(className, color === 'secondary' && 'govgr-btn-secondary', color === 'primary' && 'govgr-btn-primary', color === 'warning' && 'govgr-btn-warning', disabled === true && 'govgr-btn-disabled', true && 'govgr-btn')
+    className: clsx(className, variant === 'button' && [color === 'secondary' && 'govgr-btn-secondary', color === 'primary' && 'govgr-btn-primary', color === 'warning' && 'govgr-btn-warning', disabled === true && 'govgr-btn-disabled', 'govgr-btn'], variant === 'link' && 'govgr-link')
   }, props), children);
 });
 export default Button;

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

@@ -8,18 +8,13 @@ exports[`renders the Blockquote with name prop 1`] = `
     className="govgr-checkboxes__conditional"
   >
     <div
-      className="govgr-form-group"
+      className="govgr-field"
     >
       <label
         className="govgr-label"
       >
         hello
       </label>
-      <input
-        className="govgr-input govgr-!-width-one-third"
-        name="some-name"
-        type="text"
-      />
     </div>
   </div>
 </ForwardRef(CheckboxConditional)>
@@ -31,17 +26,13 @@ exports[`renders the Blockquote with no props 1`] = `
     className="govgr-checkboxes__conditional"
   >
     <div
-      className="govgr-form-group"
+      className="govgr-field"
     >
       <label
         className="govgr-label"
       >
         hello
       </label>
-      <input
-        className="govgr-input govgr-!-width-one-third"
-        type="text"
-      />
     </div>
   </div>
 </ForwardRef(CheckboxConditional)>

package/esm/CheckboxConditional/index.js

@@ -19,13 +19,9 @@ export var CheckboxConditional = /*#__PURE__*/React.forwardRef(function Checkbox
     ref: ref,
     className: clsx(className, true && 'govgr-checkboxes__conditional')
   }, props), /*#__PURE__*/React.createElement("div", {
-    className: clsx(true && 'govgr-form-group')
+    className: clsx(true && 'govgr-field')
   }, /*#__PURE__*/React.createElement("label", {
     className: clsx(true && 'govgr-label')
-  }, children), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    name: name,
-    className: clsx(true && 'govgr-input govgr-!-width-one-third')
-  })));
+  }, children)));
 });
 export default CheckboxConditional;

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

@@ -7,15 +7,15 @@ exports[`renders the CheckboxItem with \`name\` prop 1`] = `
   <div
     className="govgr-checkboxes__item"
   >
-    <input
-      className="govgr-checkboxes__input"
-      name="example"
-      type="checkbox"
-    />
     <label
       className="govgr-label govgr-checkboxes__label"
     >
       hello
+      <input
+        className="govgr-checkboxes__input"
+        name="example"
+        type="checkbox"
+      />
     </label>
   </div>
 </ForwardRef(CheckboxItem)>
@@ -28,15 +28,15 @@ exports[`renders the CheckboxItem with \`value\` prop 1`] = `
   <div
     className="govgr-checkboxes__item"
   >
-    <input
-      className="govgr-checkboxes__input"
-      type="checkbox"
-      value="example"
-    />
     <label
       className="govgr-label govgr-checkboxes__label"
     >
       hello
+      <input
+        className="govgr-checkboxes__input"
+        type="checkbox"
+        value="example"
+      />
     </label>
   </div>
 </ForwardRef(CheckboxItem)>
@@ -47,14 +47,14 @@ exports[`renders the CheckboxItem with no props 1`] = `
   <div
     className="govgr-checkboxes__item"
   >
-    <input
-      className="govgr-checkboxes__input"
-      type="checkbox"
-    />
     <label
       className="govgr-label govgr-checkboxes__label"
     >
       hello
+      <input
+        className="govgr-checkboxes__input"
+        type="checkbox"
+      />
     </label>
   </div>
 </ForwardRef(CheckboxItem)>

package/esm/CheckboxItem/index.js

@@ -16,16 +16,16 @@ export var CheckboxItem = /*#__PURE__*/React.forwardRef(function CheckboxItem(_r
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
+  return /*#__PURE__*/React.createElement("div", {
     className: clsx(className, true && 'govgr-checkboxes__item')
-  }, props), /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("label", {
+    className: clsx(true && 'govgr-label govgr-checkboxes__label')
+  }, children, /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref,
     type: "checkbox",
     name: name,
     value: value,
     className: clsx(true && 'govgr-checkboxes__input')
-  }), /*#__PURE__*/React.createElement("label", {
-    className: clsx(true && 'govgr-label govgr-checkboxes__label')
-  }, children));
+  }, props))));
 });
 export default CheckboxItem;

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

@@ -1,5 +1,29 @@
 // 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
+      <input
+        className="govgr-input--width-4 govgr-input"
+        inputMode="numeric"
+        name="date-input"
+        pattern="[0-9]*"
+        type="text"
+      />
+    </label>
+  </div>
+</ForwardRef(DateInputItem)>
+`;
+
 exports[`renders the DateInputItem with name prop 1`] = `
 <ForwardRef(DateInputItem)
   name="date-input"
@@ -11,14 +35,14 @@ exports[`renders the DateInputItem with name prop 1`] = `
       className="govgr-label"
     >
       hello
+      <input
+        className="govgr-input--width-2 govgr-input"
+        inputMode="numeric"
+        name="date-input"
+        pattern="[0-9]*"
+        type="text"
+      />
     </label>
-    <input
-      className="govgr-input govgr-input--width-2"
-      inputMode="numeric"
-      name="date-input"
-      pattern="[0-9]*"
-      type="text"
-    />
   </div>
 </ForwardRef(DateInputItem)>
 `;
@@ -32,13 +56,13 @@ exports[`renders the DateInputItem with no props 1`] = `
       className="govgr-label"
     >
       hello
+      <input
+        className="govgr-input--width-2 govgr-input"
+        inputMode="numeric"
+        pattern="[0-9]*"
+        type="text"
+      />
     </label>
-    <input
-      className="govgr-input govgr-input--width-2"
-      inputMode="numeric"
-      pattern="[0-9]*"
-      type="text"
-    />
   </div>
 </ForwardRef(DateInputItem)>
 `;

package/esm/DateInputItem/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "className", "children"];
+var _excluded = ["name", "width", "error", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 
@@ -11,6 +11,9 @@ import clsx from 'clsx';
  */
 export var DateInputItem = /*#__PURE__*/React.forwardRef(function DateInputItem(_ref, ref) {
   var name = _ref.name,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 2 : _ref$width,
+      error = _ref.error,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -20,12 +23,12 @@ export var DateInputItem = /*#__PURE__*/React.forwardRef(function DateInputItem(
     className: clsx(className, true && 'govgr-date-input__item')
   }, props), /*#__PURE__*/React.createElement("label", {
     className: clsx(true && 'govgr-label')
-  }, children), /*#__PURE__*/React.createElement("input", {
+  }, children, /*#__PURE__*/React.createElement("input", {
     type: "text",
     pattern: "[0-9]*",
     inputMode: "numeric",
     name: name,
-    className: clsx(true && ['govgr-input', 'govgr-input--width-2'])
-  }));
+    className: clsx(error === true && 'govgr-error-input', width === 2 && 'govgr-input--width-2', width === 4 && 'govgr-input--width-4', true && 'govgr-input')
+  })));
 });
 export default DateInputItem;

package/esm/DateInputItem/index.test.js

@@ -14,4 +14,13 @@ var _ref2 = /*#__PURE__*/React.createElement(DateInputItem, {
 
 it('renders the DateInputItem with name prop', function () {
   expect(mount(_ref2)).toMatchSnapshot();
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(DateInputItem, {
+  width: 4,
+  name: 'date-input'
+}, "hello");
+
+it('renders the DateInputItem with name and width===4 props', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
 });

package/esm/Field/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Field with error=false 1`] = `
+<ForwardRef(Field)
+  error={false}
+>
+  <div
+    className="govgr-field"
+  >
+    hello
+  </div>
+</ForwardRef(Field)>
+`;
+
+exports[`renders the Field with error=true 1`] = `
+<ForwardRef(Field)
+  error={true}
+>
+  <div
+    className="govgr-field__error govgr-field"
+  >
+    hello
+  </div>
+</ForwardRef(Field)>
+`;
+
+exports[`renders the Field with no props 1`] = `
+<ForwardRef(Field)>
+  <div
+    className="govgr-field"
+  >
+    hello
+  </div>
+</ForwardRef(Field)>
+`;

package/esm/{FormGroup → Field}/index.js

@@ -5,9 +5,9 @@ import React from 'react';
 import clsx from 'clsx';
 
 /**
- * FormGroup component wraps components such as Checkbox.
+ * Field component wraps form components such as Checkbox TextInput TextArea etc.
  */
-export var FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(_ref, ref) {
+export var Field = /*#__PURE__*/React.forwardRef(function Field(_ref, ref) {
   var error = _ref.error,
       className = _ref.className,
       children = _ref.children,
@@ -15,7 +15,7 @@ export var FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(_ref, re
 
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: clsx(className, error === true && 'govgr-form-group__error', true && 'govgr-form-group')
+    className: clsx(className, error === true && 'govgr-field__error', true && 'govgr-field')
   }, props), children);
 });
-export default FormGroup;
+export default Field;

package/esm/Field/index.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Field from '@digigov/react-core/Field';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, "hello");
+
+it('renders the Field with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Field, {
+  error: true
+}, "hello");
+
+it('renders the Field with error=true', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(Field, {
+  error: false
+}, "hello");
+
+it('renders the Field with error=false', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});