@digigov/react-core 0.3.1 → 0.5.1

package/es/FieldsetLegend/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "singleFieldLegend", "className", "children"];
+var _excluded = ["size", "heading", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 
@@ -10,17 +10,18 @@ import clsx from 'clsx';
 export var FieldsetLegend = /*#__PURE__*/React.forwardRef(function FieldsetLegend(_ref, ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'l' : _ref$size,
-      _ref$singleFieldLegen = _ref.singleFieldLegend,
-      singleFieldLegend = _ref$singleFieldLegen === void 0 ? false : _ref$singleFieldLegen,
+      _ref$heading = _ref.heading,
+      heading = _ref$heading === void 0 ? false : _ref$heading,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("legend", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("legend", _extends({
     ref: ref,
-    className: clsx(className, size === 'l' && 'govgr-heading-l', size === 'm' && 'govgr-heading-m', size === 's' && 'govgr-heading-s', true && 'govgr-fieldset__legend')
-  }, singleFieldLegend && /*#__PURE__*/React.createElement("h1", _extends({
-    className: clsx(className)
-  }, props), children), !singleFieldLegend && children));
+    className: clsx(className, size === 'xl' && 'govgr-heading-xl', size === 'l' && 'govgr-heading-l', size === 'm' && 'govgr-heading-m', size === 's' && 'govgr-heading-s', true && 'govgr-fieldset__legend')
+  }, heading && {
+    role: "heading",
+    "aria-level": 1
+  }, props), children));
 });
 export default FieldsetLegend;

package/es/FieldsetLegend/index.test.js

@@ -1,176 +1,85 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import Checkbox from '@digigov/react-core/Checkbox';
-import CheckboxItem from '@digigov/react-core/CheckboxItem';
-import FormGroup from '@digigov/react-core/FormGroup';
-import Fieldset from '@digigov/react-core/Fieldset';
 import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
-import Hint from '@digigov/react-core/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "This is FieldsetLegend with no props"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
+var _ref = /*#__PURE__*/React.createElement(FieldsetLegend, null, "This is FieldsetLegend with no props");
 
 it('renders the FieldsetLegend with no props', function () {
   expect(mount(_ref)).toMatchSnapshot();
 });
 
-var _ref2 = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
-  size: "m"
-}, "This is FieldsetLegend with singleFieldLegend false"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
-
-it('renders the FieldsetLegend with size=m', function () {
+var _ref2 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "This is FieldsetLegend with no props");
+
+it('renders the FieldsetLegend with size s props', function () {
   expect(mount(_ref2)).toMatchSnapshot();
 });
 
-var _ref3 = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
-  size: "s"
-}, "This is FieldsetLegend with singleFieldLegend false"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
-
-it('renders the FieldsetLegend with size=s', function () {
+var _ref3 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "m"
+}, "This is FieldsetLegend with no props");
+
+it('renders the FieldsetLegend with size m props', function () {
   expect(mount(_ref3)).toMatchSnapshot();
 });
 
-var _ref4 = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
-  singleFieldLegend: false
-}, "This is FieldsetLegend with singleFieldLegend false"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
-
-it('renders the FieldsetLegend with singleFieldLegend=false', function () {
+var _ref4 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "l"
+}, "This is FieldsetLegend with no props");
+
+it('renders the FieldsetLegend with size l props', function () {
   expect(mount(_ref4)).toMatchSnapshot();
 });
 
-var _ref5 = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
-  singleFieldLegend: false,
-  size: "m"
-}, "This is FieldsetLegend with singleFieldLegend false"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
-
-it('renders the FieldsetLegend with singleFieldLegend=false and size=m', function () {
+var _ref5 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "xl"
+}, "This is FieldsetLegend with no props");
+
+it('renders the FieldsetLegend with size xl props', function () {
   expect(mount(_ref5)).toMatchSnapshot();
 });
 
-var _ref6 = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
-  singleFieldLegend: false,
-  size: "s"
-}, "This is FieldsetLegend with singleFieldLegend false"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
-
-it('renders the FieldsetLegend with singleFieldLegend=false and size=s', function () {
+var _ref6 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true
+}, "This is FieldsetLegend with no props");
+
+it('renders the FieldsetLegend with heading props', function () {
   expect(mount(_ref6)).toMatchSnapshot();
 });
 
-var _ref7 = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "This is FieldsetLegend with no props"), /*#__PURE__*/React.createElement(Hint, null, "This is a hint"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
+var _ref7 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true,
+  size: "s"
+}, "This is FieldsetLegend with no props");
 
-it('renders the FieldsetLegend with no props and Hint', function () {
+it('renders the FieldsetLegend with heading and size s props', function () {
   expect(mount(_ref7)).toMatchSnapshot();
 });
 
-var _ref8 = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+var _ref8 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true,
   size: "m"
-}, "This is FieldsetLegend with singleFieldLegend false"), /*#__PURE__*/React.createElement(Hint, null, "This is a hint"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
-
-it('renders the FieldsetLegend with size=m and Hint', function () {
+}, "This is FieldsetLegend with no props");
+
+it('renders the FieldsetLegend with heading and size m props', function () {
   expect(mount(_ref8)).toMatchSnapshot();
 });
 
-var _ref9 = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
-  size: "s"
-}, "This is FieldsetLegend with singleFieldLegend false and size=s"), /*#__PURE__*/React.createElement(Hint, null, "This is a hint"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
-
-it('renders the FieldsetLegend with size=s and Hint', function () {
-  expect(mount(_ref9)).toMatchSnapshot();
-});
+var _ref9 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true,
+  size: "l"
+}, "This is FieldsetLegend with no props");
 
-var _ref10 = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
-  singleFieldLegend: false
-}, "This is FieldsetLegend with singleFieldLegend false and size=m"), /*#__PURE__*/React.createElement(Hint, null, "This is a hint"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
-
-it('renders the FieldsetLegend with singleFieldLegend=false and Hint', function () {
-  expect(mount(_ref10)).toMatchSnapshot();
+it('renders the FieldsetLegend with heading and size l props', function () {
+  expect(mount(_ref9)).toMatchSnapshot();
 });
 
-var _ref11 = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
-  singleFieldLegend: false,
-  size: "m"
-}, "This is FieldsetLegend with singleFieldLegend false and size=m"), /*#__PURE__*/React.createElement(Hint, null, "This is a hint"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
-
-it('renders the FieldsetLegend with singleFieldLegend=false and size=m and Hint', function () {
-  expect(mount(_ref11)).toMatchSnapshot();
-});
+var _ref10 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true,
+  size: "xl"
+}, "This is FieldsetLegend with no props");
 
-var _ref12 = /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
-  singleFieldLegend: false,
-  size: "s"
-}, "This is FieldsetLegend with singleFieldLegend false and size=s"), /*#__PURE__*/React.createElement(Hint, null, "This is a hint"), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "dim",
-  value: "dim"
-}, "\u0394\u03B7\u03BC\u03AE\u03C4\u03C1\u03B7\u03C2"), /*#__PURE__*/React.createElement(CheckboxItem, {
-  name: "kat",
-  value: "kat"
-}, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"))));
-
-it('renders the FieldsetLegend with singleFieldLegend=false and size=s and Hint', function () {
-  expect(mount(_ref12)).toMatchSnapshot();
+it('renders the FieldsetLegend with heading and size xl props', function () {
+  expect(mount(_ref10)).toMatchSnapshot();
 });

package/es/FileUpload/index.js

@@ -15,12 +15,12 @@ export var FileUpload = /*#__PURE__*/React.forwardRef(function FileUpload(_ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
     className: clsx(className, true && 'upload-file')
-  }, props), children, /*#__PURE__*/React.createElement("input", {
+  }, props), children, /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref,
     type: "file",
     name: name,
     className: clsx(true && 'govgr-file-upload')
-  }));
+  }, props)));
 });
 export default FileUpload;

package/es/GovGRLogo/index.js

@@ -16,7 +16,7 @@ export var GovGRLogo = /*#__PURE__*/React.forwardRef(function GovGRLogo(_ref, re
   return /*#__PURE__*/React.createElement("a", _extends({
     href: href,
     ref: ref,
-    className: clsx(className)
+    className: clsx(className, true && 'govgr-header-link')
   }, props), /*#__PURE__*/React.createElement("img", {
     src: "https://www.gov.gr/gov_gr_logo.svg",
     className: clsx(className, true && 'govgr-header-logo')

package/es/Header/index.js

@@ -18,6 +18,6 @@ export var Header = /*#__PURE__*/React.forwardRef(function Header(_ref, ref) {
     "data-module": "govgr-header",
     ref: ref,
     className: clsx(className, true && 'govgr-header')
-  }, props), ' ', children);
+  }, props), children);
 });
 export default Header;

package/es/Hidden/index.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children", "lgUp", "mdUp", "smUp", "xlUp", "xsUp"];
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Hidden is used to responsively hide children based on the screen size.
+ * Each property refers to a specific screen sizes and applies the "invisible"
+ * property at the selected screen size and above.
+ */
+export var Hidden = /*#__PURE__*/React.forwardRef(function Hidden(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      _ref$lgUp = _ref.lgUp,
+      lgUp = _ref$lgUp === void 0 ? false : _ref$lgUp,
+      _ref$mdUp = _ref.mdUp,
+      mdUp = _ref$mdUp === void 0 ? false : _ref$mdUp,
+      _ref$smUp = _ref.smUp,
+      smUp = _ref$smUp === void 0 ? false : _ref$smUp,
+      _ref$xlUp = _ref.xlUp,
+      xlUp = _ref$xlUp === void 0 ? false : _ref$xlUp,
+      _ref$xsUp = _ref.xsUp,
+      xsUp = _ref$xsUp === void 0 ? false : _ref$xsUp,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: clsx(className, lgUp && 'govgr-lg-up', mdUp && 'govgr-md-up', smUp && 'govgr-sm-up', xlUp && 'govgr-xl-up', xsUp && 'govgr-xs-up')
+  }, props), children);
+});
+export default Hidden;

package/es/Hidden/index.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Hidden from '@digigov/react-core/Hidden';
+
+var _ref = /*#__PURE__*/React.createElement(Hidden, {
+  lgUp: true
+}, /*#__PURE__*/React.createElement("div", null, "hello"));
+
+it('renders the Hidden with `lgUp` props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Hidden, {
+  mdUp: true
+}, /*#__PURE__*/React.createElement("div", null, "hello"));
+
+it('renders the Hidden with `mdUp` props', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(Hidden, {
+  smUp: true
+}, /*#__PURE__*/React.createElement("div", null, "hello"));
+
+it('renders the Hidden with `smUp` props', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(Hidden, {
+  xlUp: true
+}, /*#__PURE__*/React.createElement("div", null, "hello"));
+
+it('renders the Hidden with `xlUp` props', function () {
+  expect(mount(_ref4)).toMatchSnapshot();
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(Hidden, {
+  xsUp: true
+}, /*#__PURE__*/React.createElement("div", null, "hello"));
+
+it('renders the Hidden with `xsUp` props', function () {
+  expect(mount(_ref5)).toMatchSnapshot();
+});

package/es/Label/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["labelFile", "className", "children"];
+var _excluded = ["className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 
@@ -8,15 +8,13 @@ import clsx from 'clsx';
  * Label component defines a label for several elements at forms.
  */
 export var Label = /*#__PURE__*/React.forwardRef(function Label(_ref, ref) {
-  var _ref$labelFile = _ref.labelFile,
-      labelFile = _ref$labelFile === void 0 ? false : _ref$labelFile,
-      className = _ref.className,
+  var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement("label", _extends({
     ref: ref,
-    className: clsx(className, labelFile === true && 'label-file', true && 'govgr-label')
+    className: clsx(className, true && 'govgr-label')
   }, props), children);
 });
 export default Label;

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

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Label with heading  and size l props 1`] = `
+<ForwardRef(LabelTitle)
+  heading={true}
+  size="l"
+>
+  <span
+    aria-level={1}
+    className="govgr-heading-l"
+    role="heading"
+  >
+    hello
+  </span>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with heading  and size m props 1`] = `
+<ForwardRef(LabelTitle)
+  heading={true}
+  size="m"
+>
+  <span
+    aria-level={1}
+    className="govgr-heading-m"
+    role="heading"
+  >
+    hello
+  </span>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with heading  and size xl props 1`] = `
+<ForwardRef(LabelTitle)
+  heading={true}
+  size="xl"
+>
+  <span
+    aria-level={1}
+    className="govgr-heading-xl"
+    role="heading"
+  >
+    hello
+  </span>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with heading and size s props 1`] = `
+<ForwardRef(LabelTitle)
+  heading={true}
+  size="s"
+>
+  <span
+    aria-level={1}
+    className="govgr-heading-s"
+    role="heading"
+  >
+    hello
+  </span>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with heading prop 1`] = `
+<ForwardRef(LabelTitle)
+  heading={true}
+>
+  <span
+    aria-level={1}
+    className=""
+    role="heading"
+  >
+    hello
+  </span>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with size l prop 1`] = `
+<ForwardRef(LabelTitle)
+  size="l"
+>
+  <span
+    className="govgr-heading-l"
+  >
+    hello
+  </span>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with size m prop 1`] = `
+<ForwardRef(LabelTitle)
+  size="m"
+>
+  <span
+    className="govgr-heading-m"
+  >
+    hello
+  </span>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with size s prop 1`] = `
+<ForwardRef(LabelTitle)
+  size="s"
+>
+  <span
+    className="govgr-heading-s"
+  >
+    hello
+  </span>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with size xl prop 1`] = `
+<ForwardRef(LabelTitle)
+  size="xl"
+>
+  <span
+    className="govgr-heading-xl"
+  >
+    hello
+  </span>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the LabelTitle with no props 1`] = `
+<ForwardRef(LabelTitle)>
+  <span
+    className=""
+  >
+    hello
+  </span>
+</ForwardRef(LabelTitle)>
+`;

package/es/LabelTitle/index.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "className", "heading", "children"];
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Label component defines a label for several elements at forms.
+ */
+export var LabelTitle = /*#__PURE__*/React.forwardRef(function LabelTitle(_ref, ref) {
+  var size = _ref.size,
+      className = _ref.className,
+      _ref$heading = _ref.heading,
+      heading = _ref$heading === void 0 ? false : _ref$heading,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref,
+    className: clsx(className, size === 'xl' && 'govgr-heading-xl', size === 'l' && 'govgr-heading-l', size === 'm' && 'govgr-heading-m', size === 's' && 'govgr-heading-s')
+  }, heading && {
+    role: "heading",
+    "aria-level": 1
+  }, props), children);
+});
+export default LabelTitle;

package/es/LabelTitle/index.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import LabelTitle from '@digigov/react-core/LabelTitle';
+
+var _ref = /*#__PURE__*/React.createElement(LabelTitle, null, "hello");
+
+it('renders the LabelTitle with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(LabelTitle, {
+  heading: true
+}, "hello");
+
+it('renders the Label with heading prop', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(LabelTitle, {
+  size: "s"
+}, "hello");
+
+it('renders the Label with size s prop', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(LabelTitle, {
+  size: "m"
+}, "hello");
+
+it('renders the Label with size m prop', function () {
+  expect(mount(_ref4)).toMatchSnapshot();
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(LabelTitle, {
+  size: "l"
+}, "hello");
+
+it('renders the Label with size l prop', function () {
+  expect(mount(_ref5)).toMatchSnapshot();
+});
+
+var _ref6 = /*#__PURE__*/React.createElement(LabelTitle, {
+  size: "xl"
+}, "hello");
+
+it('renders the Label with size xl prop', function () {
+  expect(mount(_ref6)).toMatchSnapshot();
+});
+
+var _ref7 = /*#__PURE__*/React.createElement(LabelTitle, {
+  heading: true,
+  size: "s"
+}, "hello");
+
+it('renders the Label with heading and size s props', function () {
+  expect(mount(_ref7)).toMatchSnapshot();
+});
+
+var _ref8 = /*#__PURE__*/React.createElement(LabelTitle, {
+  heading: true,
+  size: "m"
+}, "hello");
+
+it('renders the Label with heading  and size m props', function () {
+  expect(mount(_ref8)).toMatchSnapshot();
+});
+
+var _ref9 = /*#__PURE__*/React.createElement(LabelTitle, {
+  heading: true,
+  size: "l"
+}, "hello");
+
+it('renders the Label with heading  and size l props', function () {
+  expect(mount(_ref9)).toMatchSnapshot();
+});
+
+var _ref10 = /*#__PURE__*/React.createElement(LabelTitle, {
+  heading: true,
+  size: "xl"
+}, "hello");
+
+it('renders the Label with heading  and size xl props', function () {
+  expect(mount(_ref10)).toMatchSnapshot();
+});

package/es/Masthead/index.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "children"];
 import React from 'react';
 import clsx from 'clsx';
+import Container from '@digigov/react-core/Container';
 
 /**
  * Use the Masthead on the top of the page.
@@ -15,12 +16,6 @@ export var Masthead = /*#__PURE__*/React.forwardRef(function Masthead(_ref, ref)
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     className: clsx(className, true && ['govgr-masthead', 'govgr-background-dark'])
-  }, props), /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: clsx(true && 'govgr-width-container')
-  }, props), /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: clsx(true && 'govgr-main-wrapper')
-  }, props), children)));
+  }, props), /*#__PURE__*/React.createElement(Container, null, children));
 });
 export default Masthead;