@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-88820b1e

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

@@ -15,23 +15,6 @@ exports[`renders the Heading with no props 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=l 1`] = `
-<ForwardRef(Heading)
-  size="lg"
->
-  <ForwardRef(Base)
-    as="h2"
-    className="govgr-heading-lg"
-  >
-    <h2
-      className="govgr-heading-lg"
-    >
-      hello
-    </h2>
-  </ForwardRef(Base)>
-</ForwardRef(Heading)>
-`;
-
 exports[`renders the Heading with size=l and element h2 1`] = `
 <ForwardRef(Heading)
   element="h2"
@@ -86,19 +69,19 @@ exports[`renders the Heading with size=l and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=m 1`] = `
+exports[`renders the Heading with size=lg 1`] = `
 <ForwardRef(Heading)
-  size="md"
+  size="lg"
 >
   <ForwardRef(Base)
-    as="h3"
-    className="govgr-heading-md"
+    as="h2"
+    className="govgr-heading-lg"
   >
-    <h3
-      className="govgr-heading-md"
+    <h2
+      className="govgr-heading-lg"
     >
       hello
-    </h3>
+    </h2>
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
@@ -157,19 +140,19 @@ exports[`renders the Heading with size=m and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=s 1`] = `
+exports[`renders the Heading with size=md 1`] = `
 <ForwardRef(Heading)
-  size="sm"
+  size="md"
 >
   <ForwardRef(Base)
-    as="h4"
-    className="govgr-heading-sm"
+    as="h3"
+    className="govgr-heading-md"
   >
-    <h4
-      className="govgr-heading-sm"
+    <h3
+      className="govgr-heading-md"
     >
       hello
-    </h4>
+    </h3>
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
@@ -228,6 +211,23 @@ exports[`renders the Heading with size=s and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
+exports[`renders the Heading with size=sm 1`] = `
+<ForwardRef(Heading)
+  size="sm"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-sm"
+  >
+    <h4
+      className="govgr-heading-sm"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
 exports[`renders the Heading with size=xl 1`] = `
 <ForwardRef(Heading)
   size="xl"
@@ -298,3 +298,38 @@ exports[`renders the Heading with size=xl and element h4 1`] = `
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
+
+exports[`renders the Heading with size=xs 1`] = `
+<ForwardRef(Heading)
+  size="xs"
+>
+  <ForwardRef(Base)
+    as="h5"
+    className="govgr-heading-xs"
+  >
+    <h5
+      className="govgr-heading-xs"
+    >
+      hello
+    </h5>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=xs and element h4 1`] = `
+<ForwardRef(Heading)
+  element="h4"
+  size="xs"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-xs"
+  >
+    <h4
+      className="govgr-heading-xs"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;

package/esm/Heading/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["size", "element", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Typography from '@digigov/react-core/Typography';
 
 var getComponentBySize = function getComponentBySize(size) {
   switch (size) {
@@ -19,13 +19,16 @@ var getComponentBySize = function getComponentBySize(size) {
     case 'sm':
       return 'h4';
 
+    case 'xs':
+      return 'h5';
+
     default:
       return 'h1';
   }
 };
 /**
  * Heading component is used to place a title in a the page.
- * Heading component must be wraped inside Main component.
+ * Heading component must be wrapped inside Main component.
  */
 
 
@@ -38,10 +41,10 @@ export var Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var Component = element ? element : getComponentBySize(size);
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Typography, _extends({
     as: Component,
     ref: ref,
-    className: clsx(className, size === 'xl' && 'govgr-heading-xl', size === 'lg' && 'govgr-heading-lg', size === 'md' && 'govgr-heading-md', size === 'sm' && 'govgr-heading-sm')
+    className: clsx(className, size !== undefined && "govgr-heading-".concat(size))
   }, props), children);
 });
 export default Heading;

package/esm/Heading/index.test.js

@@ -20,7 +20,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Heading, {
   size: 'lg'
 }, "hello");
 
-it('renders the Heading with size=l', function () {
+it('renders the Heading with size=lg', function () {
   expect(mount(_ref3)).toMatchSnapshot();
 });
 
@@ -28,7 +28,7 @@ var _ref4 = /*#__PURE__*/React.createElement(Heading, {
   size: 'md'
 }, "hello");
 
-it('renders the Heading with size=m', function () {
+it('renders the Heading with size=md', function () {
   expect(mount(_ref4)).toMatchSnapshot();
 });
 
@@ -36,114 +36,131 @@ var _ref5 = /*#__PURE__*/React.createElement(Heading, {
   size: 'sm'
 }, "hello");
 
-it('renders the Heading with size=s', function () {
+it('renders the Heading with size=sm', function () {
   expect(mount(_ref5)).toMatchSnapshot();
 });
 
 var _ref6 = /*#__PURE__*/React.createElement(Heading, {
+  size: 'xs'
+}, "hello");
+
+it('renders the Heading with size=xs', function () {
+  expect(mount(_ref6)).toMatchSnapshot();
+});
+
+var _ref7 = /*#__PURE__*/React.createElement(Heading, {
   size: 'sm',
   element: "h2"
 }, "hello");
 
 it('renders the Heading with size=s and element h2', function () {
-  expect(mount(_ref6)).toMatchSnapshot();
+  expect(mount(_ref7)).toMatchSnapshot();
 });
 
-var _ref7 = /*#__PURE__*/React.createElement(Heading, {
+var _ref8 = /*#__PURE__*/React.createElement(Heading, {
   size: 'sm',
   element: "h3"
 }, "hello");
 
 it('renders the Heading with size=s and element h3', function () {
-  expect(mount(_ref7)).toMatchSnapshot();
+  expect(mount(_ref8)).toMatchSnapshot();
 });
 
-var _ref8 = /*#__PURE__*/React.createElement(Heading, {
+var _ref9 = /*#__PURE__*/React.createElement(Heading, {
   size: 'sm',
   element: "h4"
 }, "hello");
 
 it('renders the Heading with size=s and element h4', function () {
-  expect(mount(_ref8)).toMatchSnapshot();
+  expect(mount(_ref9)).toMatchSnapshot();
 });
 
-var _ref9 = /*#__PURE__*/React.createElement(Heading, {
+var _ref10 = /*#__PURE__*/React.createElement(Heading, {
   size: 'md',
   element: "h2"
 }, "hello");
 
 it('renders the Heading with size=m and element h2', function () {
-  expect(mount(_ref9)).toMatchSnapshot();
+  expect(mount(_ref10)).toMatchSnapshot();
 });
 
-var _ref10 = /*#__PURE__*/React.createElement(Heading, {
+var _ref11 = /*#__PURE__*/React.createElement(Heading, {
   size: 'md',
   element: "h3"
 }, "hello");
 
 it('renders the Heading with size=m and element h3', function () {
-  expect(mount(_ref10)).toMatchSnapshot();
+  expect(mount(_ref11)).toMatchSnapshot();
 });
 
-var _ref11 = /*#__PURE__*/React.createElement(Heading, {
+var _ref12 = /*#__PURE__*/React.createElement(Heading, {
   size: 'md',
   element: "h4"
 }, "hello");
 
 it('renders the Heading with size=m and element h4', function () {
-  expect(mount(_ref11)).toMatchSnapshot();
+  expect(mount(_ref12)).toMatchSnapshot();
 });
 
-var _ref12 = /*#__PURE__*/React.createElement(Heading, {
+var _ref13 = /*#__PURE__*/React.createElement(Heading, {
   size: 'lg',
   element: "h2"
 }, "hello");
 
 it('renders the Heading with size=l and element h2', function () {
-  expect(mount(_ref12)).toMatchSnapshot();
+  expect(mount(_ref13)).toMatchSnapshot();
 });
 
-var _ref13 = /*#__PURE__*/React.createElement(Heading, {
+var _ref14 = /*#__PURE__*/React.createElement(Heading, {
   size: 'lg',
   element: "h3"
 }, "hello");
 
 it('renders the Heading with size=l and element h3', function () {
-  expect(mount(_ref13)).toMatchSnapshot();
+  expect(mount(_ref14)).toMatchSnapshot();
 });
 
-var _ref14 = /*#__PURE__*/React.createElement(Heading, {
+var _ref15 = /*#__PURE__*/React.createElement(Heading, {
   size: 'lg',
   element: "h4"
 }, "hello");
 
 it('renders the Heading with size=l and element h4', function () {
-  expect(mount(_ref14)).toMatchSnapshot();
+  expect(mount(_ref15)).toMatchSnapshot();
 });
 
-var _ref15 = /*#__PURE__*/React.createElement(Heading, {
+var _ref16 = /*#__PURE__*/React.createElement(Heading, {
   size: 'xl',
   element: "h2"
 }, "hello");
 
 it('renders the Heading with size=xl and element h2', function () {
-  expect(mount(_ref15)).toMatchSnapshot();
+  expect(mount(_ref16)).toMatchSnapshot();
 });
 
-var _ref16 = /*#__PURE__*/React.createElement(Heading, {
+var _ref17 = /*#__PURE__*/React.createElement(Heading, {
   size: 'xl',
   element: "h3"
 }, "hello");
 
 it('renders the Heading with size=xl and element h3', function () {
-  expect(mount(_ref16)).toMatchSnapshot();
+  expect(mount(_ref17)).toMatchSnapshot();
 });
 
-var _ref17 = /*#__PURE__*/React.createElement(Heading, {
+var _ref18 = /*#__PURE__*/React.createElement(Heading, {
   size: 'xl',
   element: "h4"
 }, "hello");
 
 it('renders the Heading with size=xl and element h4', function () {
-  expect(mount(_ref17)).toMatchSnapshot();
+  expect(mount(_ref18)).toMatchSnapshot();
+});
+
+var _ref19 = /*#__PURE__*/React.createElement(Heading, {
+  size: 'xs',
+  element: "h4"
+}, "hello");
+
+it('renders the Heading with size=xs and element h4', function () {
+  expect(mount(_ref19)).toMatchSnapshot();
 });

package/esm/HeadingCaption/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["size", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Typography from '@digigov/react-core/Typography';
 
 /**
  * Sometimes you may need to make it clear that a page is part of a larger section or group.
@@ -16,10 +16,10 @@ export var HeadingCaption = /*#__PURE__*/React.forwardRef(function HeadingCaptio
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Typography, _extends({
     as: "span",
     ref: ref,
-    className: clsx(className, size === 'xl' && 'govgr-caption-xl', size === 'lg' && 'govgr-caption-lg', size === 'md' && 'govgr-caption-md')
+    className: clsx(className, size !== undefined && "govgr-caption-".concat(size))
   }, props), children);
 });
 export default HeadingCaption;

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

@@ -2,66 +2,89 @@
 
 exports[`renders the Hint with fontSize=14 1`] = `
 <ForwardRef(Hint)
-  fontSize="14"
+  fontSize={14}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="p"
-    className="govgr-!-font-size-14 govgr-hint"
+    className="govgr-hint"
+    fontSize={14}
   >
-    <p
-      className="govgr-!-font-size-14 govgr-hint"
+    <ForwardRef(Base)
+      as="p"
+      className="govgr-hint govgr-!-font-size-14"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <p
+        className="govgr-hint govgr-!-font-size-14"
+      >
+        hello
+      </p>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(Hint)>
 `;
 
 exports[`renders the Hint with fontSize=16 1`] = `
 <ForwardRef(Hint)
-  fontSize="16"
+  fontSize={16}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="p"
-    className="govgr-!-font-size-16 govgr-hint"
+    className="govgr-hint"
+    fontSize={16}
   >
-    <p
-      className="govgr-!-font-size-16 govgr-hint"
+    <ForwardRef(Base)
+      as="p"
+      className="govgr-hint govgr-!-font-size-16"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <p
+        className="govgr-hint govgr-!-font-size-16"
+      >
+        hello
+      </p>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(Hint)>
 `;
 
 exports[`renders the Hint with fontSize=24 1`] = `
 <ForwardRef(Hint)
-  fontSize="24"
+  fontSize={24}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="p"
-    className="govgr-!-font-size-24 govgr-hint"
+    className="govgr-hint"
+    fontSize={24}
   >
-    <p
-      className="govgr-!-font-size-24 govgr-hint"
+    <ForwardRef(Base)
+      as="p"
+      className="govgr-hint govgr-!-font-size-24"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <p
+        className="govgr-hint govgr-!-font-size-24"
+      >
+        hello
+      </p>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(Hint)>
 `;
 
 exports[`renders the Hint with no props 1`] = `
 <ForwardRef(Hint)>
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="p"
     className="govgr-hint"
   >
-    <p
+    <ForwardRef(Base)
+      as="p"
       className="govgr-hint"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <p
+        className="govgr-hint"
+      >
+        hello
+      </p>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(Hint)>
 `;

package/esm/Hint/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["fontSize", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Typography from '@digigov/react-core/Typography';
 
 /**
  * Hint component can be used in form pages and it gives an extra hint description to the form.
@@ -14,10 +14,11 @@ export var Hint = /*#__PURE__*/React.forwardRef(function Hint(_ref, ref) {
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Typography, _extends({
     as: "p",
+    fontSize: fontSize,
     ref: ref,
-    className: clsx(className, fontSize === '14' && 'govgr-!-font-size-14', fontSize === '16' && 'govgr-!-font-size-16', fontSize === '24' && 'govgr-!-font-size-24', true && 'govgr-hint')
+    className: clsx(className, true && 'govgr-hint')
   }, props), children);
 });
 export default Hint;

package/esm/Hint/index.test.js

@@ -9,7 +9,7 @@ it('renders the Hint with no props', function () {
 });
 
 var _ref2 = /*#__PURE__*/React.createElement(Hint, {
-  fontSize: "14"
+  fontSize: 14
 }, "hello");
 
 it('renders the Hint with fontSize=14', function () {
@@ -17,7 +17,7 @@ it('renders the Hint with fontSize=14', function () {
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(Hint, {
-  fontSize: "16"
+  fontSize: 16
 }, "hello");
 
 it('renders the Hint with fontSize=16', function () {
@@ -25,7 +25,7 @@ it('renders the Hint with fontSize=16', function () {
 });
 
 var _ref4 = /*#__PURE__*/React.createElement(Hint, {
-  fontSize: "24"
+  fontSize: 24
 }, "hello");
 
 it('renders the Hint with fontSize=24', function () {

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

@@ -4,10 +4,10 @@ exports[`renders the Layout with no props 1`] = `
 <ForwardRef(Layout)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+    className="govgr-layout--full-height govgr-layout"
   >
     <div
-      className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+      className="govgr-layout--full-height govgr-layout"
     >
       hello
     </div>

package/esm/Layout/index.js

@@ -18,7 +18,7 @@ export var Layout = /*#__PURE__*/React.forwardRef(function Layout(_ref, ref) {
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, fullHeight && 'govgr-layout-wrapper__full-height', true && 'govgr-layout-wrapper')
+    className: clsx(className, fullHeight && 'govgr-layout--full-height', true && 'govgr-layout')
   }, props), children);
 });
 export default Layout;

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

@@ -57,17 +57,17 @@ exports[`renders the List with listStyle=bullet 2`] = `
 </ForwardRef(List)>
 `;
 
-exports[`renders the List with listStyle=bullet and spaced 1`] = `
+exports[`renders the List with listStyle=bullet and dense 1`] = `
 <ForwardRef(List)
+  dense={true}
   listStyle="bullet"
-  spaced={true}
 >
   <ForwardRef(Base)
     as="ol"
-    className="govgr-list--bullet govgr-list--spaced govgr-list"
+    className="govgr-list--bullet govgr-list"
   >
     <ol
-      className="govgr-list--bullet govgr-list--spaced govgr-list"
+      className="govgr-list--bullet govgr-list"
     >
       <ForwardRef(ListItem)>
         <ForwardRef(Base)
@@ -155,17 +155,17 @@ exports[`renders the List with listStyle=number 2`] = `
 </ForwardRef(List)>
 `;
 
-exports[`renders the List with listStyle=number and spaced 1`] = `
+exports[`renders the List with listStyle=number and dense 1`] = `
 <ForwardRef(List)
+  dense={true}
   listStyle="number"
-  spaced={true}
 >
   <ForwardRef(Base)
     as="ol"
-    className="govgr-list--number govgr-list--spaced govgr-list"
+    className="govgr-list--number govgr-list"
   >
     <ol
-      className="govgr-list--number govgr-list--spaced govgr-list"
+      className="govgr-list--number govgr-list"
     >
       <ForwardRef(ListItem)>
         <ForwardRef(Base)

package/esm/List/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["listStyle", "spaced", "horizontal", "className", "children"];
+var _excluded = ["listStyle", "dense", "layout", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -12,9 +12,9 @@ import Base from '@digigov/react-core/Base';
 export var List = /*#__PURE__*/React.forwardRef(function List(_ref, ref) {
   var _ref$listStyle = _ref.listStyle,
       listStyle = _ref$listStyle === void 0 ? 'none' : _ref$listStyle,
-      _ref$spaced = _ref.spaced,
-      spaced = _ref$spaced === void 0 ? false : _ref$spaced,
-      horizontal = _ref.horizontal,
+      _ref$dense = _ref.dense,
+      dense = _ref$dense === void 0 ? true : _ref$dense,
+      layout = _ref.layout,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -22,7 +22,7 @@ export var List = /*#__PURE__*/React.forwardRef(function List(_ref, ref) {
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "ol",
     ref: ref,
-    className: clsx(className, listStyle === 'bullet' && 'govgr-list--bullet', listStyle === 'number' && 'govgr-list--number', horizontal && 'govgr-list--horizontal', spaced && 'govgr-list--spaced', true && 'govgr-list')
+    className: clsx(className, layout === 'horizontal' && 'govgr-list--horizontal', listStyle === 'bullet' && 'govgr-list--bullet', listStyle === 'number' && 'govgr-list--number', !dense && 'govgr-list--spaced', true && 'govgr-list')
   }, props), children);
 });
 export default List;

package/esm/List/index.test.js

@@ -43,18 +43,18 @@ it('renders the List with listStyle=bullet', function () {
 
 var _ref6 = /*#__PURE__*/React.createElement(List, {
   listStyle: 'number',
-  spaced: true
+  dense: true
 }, /*#__PURE__*/React.createElement(ListItem, null, "hello Giorgos"), /*#__PURE__*/React.createElement(ListItem, null, "hello Katerina"));
 
-it('renders the List with listStyle=number and spaced', function () {
+it('renders the List with listStyle=number and dense', function () {
   expect(mount(_ref6)).toMatchSnapshot();
 });
 
 var _ref7 = /*#__PURE__*/React.createElement(List, {
   listStyle: 'bullet',
-  spaced: true
+  dense: true
 }, /*#__PURE__*/React.createElement(ListItem, null, "hello Giorgos"), /*#__PURE__*/React.createElement(ListItem, null, "hello Katerina"));
 
-it('renders the List with listStyle=bullet and spaced', function () {
+it('renders the List with listStyle=bullet and dense', function () {
   expect(mount(_ref7)).toMatchSnapshot();
 });

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

@@ -13,7 +13,7 @@ exports[`renders the Modal with no props 1`] = `
         className="govgr-modal__body"
       >
         <div
-          className="govgr-modal__content"
+          className="govgr-modal__container"
         >
           hello
         </div>