@digigov/react-core 0.4.0 → 0.4.1

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

@@ -19,13 +19,13 @@ export var CheckboxItem = /*#__PURE__*/React.forwardRef(function CheckboxItem(_r
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     className: clsx(className, true && 'govgr-checkboxes__item')
-  }, props), /*#__PURE__*/React.createElement("input", {
+  }, props), /*#__PURE__*/React.createElement("label", {
+    className: clsx(true && 'govgr-label govgr-checkboxes__label')
+  }, children, /*#__PURE__*/React.createElement("input", {
     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));
+  })));
 });
 export default CheckboxItem;

package/es/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/es/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/es/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/es/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/es/{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/es/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();
+});