@digigov/react-core 0.10.1 → 0.12.0

package/es/Card/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["variant", "style", "className", "children"];
+var _excluded = ["variant", "borderColor", "callToAction", "style", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 
@@ -11,6 +11,8 @@ import clsx from 'clsx';
  */
 export var Card = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
   var variant = _ref.variant,
+      borderColor = _ref.borderColor,
+      callToAction = _ref.callToAction,
       style = _ref.style,
       className = _ref.className,
       children = _ref.children,
@@ -18,7 +20,7 @@ export var Card = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
 
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: clsx(className, variant === "divider" && 'govgr-card--divider', variant === "border" && 'govgr-card--border', true && 'govgr-card')
+    className: clsx(className, variant === "border-top" && 'govgr-card--border-top', variant === "divider" && 'govgr-card--divider', variant === "border" && 'govgr-card--border', borderColor === "gray" && 'govgr-card--border-gray', borderColor === "dark" && 'govgr-card--border-dark', callToAction && 'govgr-card--cta', true && 'govgr-card')
   }, props), /*#__PURE__*/React.createElement("div", {
     className: clsx(true && 'govgr-card__body')
   }, children));

package/es/Card/index.test.js

@@ -9,17 +9,79 @@ it('renders the Card with no props', function () {
 });
 
 var _ref2 = /*#__PURE__*/React.createElement(Card, {
-  variant: "border"
+  callToAction: true
 }, "hello");
 
-it('renders the Card with variant="border" props', function () {
+it('renders the Card with callToActon props', function () {
   expect(mount(_ref2)).toMatchSnapshot();
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, "hello");
+
+it('renders the Card with variant="border" props', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(Card, {
   variant: "divider"
 }, "hello");
 
 it('renders the Card with variant="divider" props', function () {
-  expect(mount(_ref3)).toMatchSnapshot();
+  expect(mount(_ref4)).toMatchSnapshot();
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border-top"
+}, "hello");
+
+it('renders the Card with variant="border-top" props', function () {
+  expect(mount(_ref5)).toMatchSnapshot();
+});
+
+var _ref6 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  borderColor: "dark"
+}, "hello");
+
+it('renders the Card with variant="border" and borderColor="dark" props', function () {
+  expect(mount(_ref6)).toMatchSnapshot();
+});
+
+var _ref7 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  borderColor: "gray"
+}, "hello");
+
+it('renders the Card with variant="border" and borderColor="gray" props', function () {
+  expect(mount(_ref7)).toMatchSnapshot();
+});
+
+var _ref8 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border-top",
+  borderColor: "dark"
+}, "hello");
+
+it('renders the Card with variant="border-top" and borderColor="dark" props', function () {
+  expect(mount(_ref8)).toMatchSnapshot();
+});
+
+var _ref9 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border-top",
+  borderColor: "gray"
+}, "hello");
+
+it('renders the Card with variant="border-top" and borderColor="gray" props', function () {
+  expect(mount(_ref9)).toMatchSnapshot();
+});
+
+var _ref10 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border-top",
+  borderColor: "dark",
+  callToAction: true
+}, "hello");
+
+it('renders the Card with variant="border-top" and borderColor="dark" callToAction props', function () {
+  expect(mount(_ref10)).toMatchSnapshot();
 });

package/es/Grid/index.js

@@ -25,7 +25,7 @@ export var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
 
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: clsx(className, container === true && [inline === true && 'govgr-grid-inline', 'govgr-grid'], container && [spacing === 1 && "govgr-grid__gap-1", spacing === 2 && "govgr-grid__gap-2", spacing === 4 && "govgr-grid__gap-4", spacing === 6 && "govgr-grid__gap-6"], item && [xs === 'auto' && "xs:govgr-grid__col-auto", sm === 'auto' && "sm:govgr-grid__col-auto", md === 'auto' && "md:govgr-grid__col-auto", lg === 'auto' && "lg:govgr-grid__col-auto", xl === 'auto' && "xl:govgr-grid__col-auto", xs === 10 && "xs:govgr-grid__col-span-10", xs === 11 && "xs:govgr-grid__col-span-11", xs === 12 && "xs:govgr-grid__col-span-12", sm === 10 && "sm:govgr-grid__col-span-10", sm === 11 && "sm:govgr-grid__col-span-11", sm === 12 && "sm:govgr-grid__col-span-12", md === 10 && "md:govgr-grid__col-span-10", md === 11 && "md:govgr-grid__col-span-11", md === 12 && "md:govgr-grid__col-span-12", lg === 10 && "lg:govgr-grid__col-span-10", lg === 11 && "lg:govgr-grid__col-span-11", lg === 12 && "lg:govgr-grid__col-span-12", xl === 10 && "xl:govgr-grid__col-span-10", xl === 11 && "xl:govgr-grid__col-span-11", xl === 12 && "xl:govgr-grid__col-span-12", xs === 1 && "xs:govgr-grid__col-span-1", xs === 2 && "xs:govgr-grid__col-span-2", xs === 3 && "xs:govgr-grid__col-span-3", xs === 4 && "xs:govgr-grid__col-span-4", xs === 5 && "xs:govgr-grid__col-span-5", xs === 6 && "xs:govgr-grid__col-span-6", xs === 7 && "xs:govgr-grid__col-span-7", xs === 8 && "xs:govgr-grid__col-span-8", xs === 9 && "xs:govgr-grid__col-span-9", sm === 1 && "sm:govgr-grid__col-span-1", sm === 2 && "sm:govgr-grid__col-span-2", sm === 3 && "sm:govgr-grid__col-span-3", sm === 4 && "sm:govgr-grid__col-span-4", sm === 5 && "sm:govgr-grid__col-span-5", sm === 6 && "sm:govgr-grid__col-span-6", sm === 7 && "sm:govgr-grid__col-span-7", sm === 8 && "sm:govgr-grid__col-span-8", sm === 9 && "sm:govgr-grid__col-span-9", md === 1 && "md:govgr-grid__col-span-1", md === 2 && "md:govgr-grid__col-span-2", md === 3 && "md:govgr-grid__col-span-3", md === 4 && "md:govgr-grid__col-span-4", md === 5 && "md:govgr-grid__col-span-5", md === 6 && "md:govgr-grid__col-span-6", md === 7 && "md:govgr-grid__col-span-7", md === 8 && "md:govgr-grid__col-span-8", md === 9 && "md:govgr-grid__col-span-9", lg === 1 && "lg:govgr-grid__col-span-1", lg === 2 && "lg:govgr-grid__col-span-2", lg === 3 && "lg:govgr-grid__col-span-3", lg === 4 && "lg:govgr-grid__col-span-4", lg === 5 && "lg:govgr-grid__col-span-5", lg === 6 && "lg:govgr-grid__col-span-6", lg === 7 && "lg:govgr-grid__col-span-7", lg === 8 && "lg:govgr-grid__col-span-8", lg === 9 && "lg:govgr-grid__col-span-9", xl === 1 && "xl:govgr-grid__col-span-1", xl === 2 && "xl:govgr-grid__col-span-2", xl === 3 && "xl:govgr-grid__col-span-3", xl === 4 && "xl:govgr-grid__col-span-4", xl === 5 && "xl:govgr-grid__col-span-5", xl === 6 && "xl:govgr-grid__col-span-6", xl === 7 && "xl:govgr-grid__col-span-7", xl === 8 && "xl:govgr-grid__col-span-8", xl === 9 && "xl:govgr-grid__col-span-9"])
+    className: clsx(className, container === true && [inline === true && 'govgr-grid-inline', 'govgr-grid'], container && [spacing === 10 && "govgr-grid__gap-10", spacing === 12 && "govgr-grid__gap-12", spacing === 1 && "govgr-grid__gap-1", spacing === 2 && "govgr-grid__gap-2", spacing === 4 && "govgr-grid__gap-4", spacing === 6 && "govgr-grid__gap-6", spacing === 8 && "govgr-grid__gap-8"], item && [xs === 'auto' && "xs:govgr-grid__col-auto", sm === 'auto' && "sm:govgr-grid__col-auto", md === 'auto' && "md:govgr-grid__col-auto", lg === 'auto' && "lg:govgr-grid__col-auto", xl === 'auto' && "xl:govgr-grid__col-auto", xs === 10 && "xs:govgr-grid__col-span-10", xs === 11 && "xs:govgr-grid__col-span-11", xs === 12 && "xs:govgr-grid__col-span-12", sm === 10 && "sm:govgr-grid__col-span-10", sm === 11 && "sm:govgr-grid__col-span-11", sm === 12 && "sm:govgr-grid__col-span-12", md === 10 && "md:govgr-grid__col-span-10", md === 11 && "md:govgr-grid__col-span-11", md === 12 && "md:govgr-grid__col-span-12", lg === 10 && "lg:govgr-grid__col-span-10", lg === 11 && "lg:govgr-grid__col-span-11", lg === 12 && "lg:govgr-grid__col-span-12", xl === 10 && "xl:govgr-grid__col-span-10", xl === 11 && "xl:govgr-grid__col-span-11", xl === 12 && "xl:govgr-grid__col-span-12", xs === 1 && "xs:govgr-grid__col-span-1", xs === 2 && "xs:govgr-grid__col-span-2", xs === 3 && "xs:govgr-grid__col-span-3", xs === 4 && "xs:govgr-grid__col-span-4", xs === 5 && "xs:govgr-grid__col-span-5", xs === 6 && "xs:govgr-grid__col-span-6", xs === 7 && "xs:govgr-grid__col-span-7", xs === 8 && "xs:govgr-grid__col-span-8", xs === 9 && "xs:govgr-grid__col-span-9", sm === 1 && "sm:govgr-grid__col-span-1", sm === 2 && "sm:govgr-grid__col-span-2", sm === 3 && "sm:govgr-grid__col-span-3", sm === 4 && "sm:govgr-grid__col-span-4", sm === 5 && "sm:govgr-grid__col-span-5", sm === 6 && "sm:govgr-grid__col-span-6", sm === 7 && "sm:govgr-grid__col-span-7", sm === 8 && "sm:govgr-grid__col-span-8", sm === 9 && "sm:govgr-grid__col-span-9", md === 1 && "md:govgr-grid__col-span-1", md === 2 && "md:govgr-grid__col-span-2", md === 3 && "md:govgr-grid__col-span-3", md === 4 && "md:govgr-grid__col-span-4", md === 5 && "md:govgr-grid__col-span-5", md === 6 && "md:govgr-grid__col-span-6", md === 7 && "md:govgr-grid__col-span-7", md === 8 && "md:govgr-grid__col-span-8", md === 9 && "md:govgr-grid__col-span-9", lg === 1 && "lg:govgr-grid__col-span-1", lg === 2 && "lg:govgr-grid__col-span-2", lg === 3 && "lg:govgr-grid__col-span-3", lg === 4 && "lg:govgr-grid__col-span-4", lg === 5 && "lg:govgr-grid__col-span-5", lg === 6 && "lg:govgr-grid__col-span-6", lg === 7 && "lg:govgr-grid__col-span-7", lg === 8 && "lg:govgr-grid__col-span-8", lg === 9 && "lg:govgr-grid__col-span-9", xl === 1 && "xl:govgr-grid__col-span-1", xl === 2 && "xl:govgr-grid__col-span-2", xl === 3 && "xl:govgr-grid__col-span-3", xl === 4 && "xl:govgr-grid__col-span-4", xl === 5 && "xl:govgr-grid__col-span-5", xl === 6 && "xl:govgr-grid__col-span-6", xl === 7 && "xl:govgr-grid__col-span-7", xl === 8 && "xl:govgr-grid__col-span-8", xl === 9 && "xl:govgr-grid__col-span-9"])
   }, props), children);
 });
 export default Grid;

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the TableContainer with  border prop 1`] = `
+<ForwardRef(TableContainer)
+  border={true}
+>
+  <div
+    className="govgr-table-container--border govgr-table-container"
+  >
+    hello
+  </div>
+</ForwardRef(TableContainer)>
+`;
+
+exports[`renders the TableContainer with no props 1`] = `
+<ForwardRef(TableContainer)>
+  <div
+    className="govgr-table-container"
+  >
+    hello
+  </div>
+</ForwardRef(TableContainer)>
+`;

package/es/TableContainer/index.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["border", "className", "children"];
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Use TableContainer as a wrapper for a Table. It is used when the table is wider that the viewport width.
+ */
+export var TableContainer = /*#__PURE__*/React.forwardRef(function TableContainer(_ref, ref) {
+  var _ref$border = _ref.border,
+      border = _ref$border === void 0 ? false : _ref$border,
+      className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: clsx(className, border && 'govgr-table-container--border', true && 'govgr-table-container')
+  }, props), children);
+});
+export default TableContainer;

package/es/TableContainer/index.test.js

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

package/es/index.js

@@ -118,6 +118,7 @@ export { default as SvgIcon } from '@digigov/react-core/SvgIcon';
 export { default as Table } from '@digigov/react-core/Table';
 export { default as TableBody } from '@digigov/react-core/TableBody';
 export { default as TableCaption } from '@digigov/react-core/TableCaption';
+export { default as TableContainer } from '@digigov/react-core/TableContainer';
 export { default as TableDataCell } from '@digigov/react-core/TableDataCell';
 export { default as TableNoDataRow } from '@digigov/react-core/TableNoDataRow';
 export { default as TableHead } from '@digigov/react-core/TableHead';

package/esm/AccordionSection/index.js

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 
 /**
  * AccordionSection should be inside the Accordion component.
+ * 
  * Inside this component must place the AccordionSectionHeader and the AccordionSectionContent components.
  */
 // eslint-disable-next-line react/display-name

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

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the Card with callToActon props 1`] = `
+<ForwardRef(Card)
+  callToAction={true}
+>
+  <div
+    className="govgr-card--cta govgr-card"
+  >
+    <div
+      className="govgr-card__body"
+    >
+      hello
+    </div>
+  </div>
+</ForwardRef(Card)>
+`;
+
 exports[`renders the Card with no props 1`] = `
 <ForwardRef(Card)>
   <div
@@ -14,6 +30,40 @@ exports[`renders the Card with no props 1`] = `
 </ForwardRef(Card)>
 `;
 
+exports[`renders the Card with variant="border" and borderColor="dark" props 1`] = `
+<ForwardRef(Card)
+  borderColor="dark"
+  variant="border"
+>
+  <div
+    className="govgr-card--border govgr-card--border-dark govgr-card"
+  >
+    <div
+      className="govgr-card__body"
+    >
+      hello
+    </div>
+  </div>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="border" and borderColor="gray" props 1`] = `
+<ForwardRef(Card)
+  borderColor="gray"
+  variant="border"
+>
+  <div
+    className="govgr-card--border govgr-card--border-gray govgr-card"
+  >
+    <div
+      className="govgr-card__body"
+    >
+      hello
+    </div>
+  </div>
+</ForwardRef(Card)>
+`;
+
 exports[`renders the Card with variant="border" props 1`] = `
 <ForwardRef(Card)
   variant="border"
@@ -30,6 +80,74 @@ exports[`renders the Card with variant="border" props 1`] = `
 </ForwardRef(Card)>
 `;
 
+exports[`renders the Card with variant="border-top" and borderColor="dark" callToAction props 1`] = `
+<ForwardRef(Card)
+  borderColor="dark"
+  callToAction={true}
+  variant="border-top"
+>
+  <div
+    className="govgr-card--border-top govgr-card--border-dark govgr-card--cta govgr-card"
+  >
+    <div
+      className="govgr-card__body"
+    >
+      hello
+    </div>
+  </div>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="border-top" and borderColor="dark" props 1`] = `
+<ForwardRef(Card)
+  borderColor="dark"
+  variant="border-top"
+>
+  <div
+    className="govgr-card--border-top govgr-card--border-dark govgr-card"
+  >
+    <div
+      className="govgr-card__body"
+    >
+      hello
+    </div>
+  </div>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="border-top" and borderColor="gray" props 1`] = `
+<ForwardRef(Card)
+  borderColor="gray"
+  variant="border-top"
+>
+  <div
+    className="govgr-card--border-top govgr-card--border-gray govgr-card"
+  >
+    <div
+      className="govgr-card__body"
+    >
+      hello
+    </div>
+  </div>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="border-top" props 1`] = `
+<ForwardRef(Card)
+  variant="border-top"
+>
+  <div
+    className="govgr-card--border-top govgr-card"
+  >
+    <div
+      className="govgr-card__body"
+    >
+      hello
+    </div>
+  </div>
+</ForwardRef(Card)>
+`;
+
 exports[`renders the Card with variant="divider" props 1`] = `
 <ForwardRef(Card)
   variant="divider"

package/esm/Card/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["variant", "style", "className", "children"];
+var _excluded = ["variant", "borderColor", "callToAction", "style", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 
@@ -11,6 +11,8 @@ import clsx from 'clsx';
  */
 export var Card = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
   var variant = _ref.variant,
+      borderColor = _ref.borderColor,
+      callToAction = _ref.callToAction,
       style = _ref.style,
       className = _ref.className,
       children = _ref.children,
@@ -18,7 +20,7 @@ export var Card = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
 
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: clsx(className, variant === "divider" && 'govgr-card--divider', variant === "border" && 'govgr-card--border', true && 'govgr-card')
+    className: clsx(className, variant === "border-top" && 'govgr-card--border-top', variant === "divider" && 'govgr-card--divider', variant === "border" && 'govgr-card--border', borderColor === "gray" && 'govgr-card--border-gray', borderColor === "dark" && 'govgr-card--border-dark', callToAction && 'govgr-card--cta', true && 'govgr-card')
   }, props), /*#__PURE__*/React.createElement("div", {
     className: clsx(true && 'govgr-card__body')
   }, children));

package/esm/Card/index.test.js

@@ -9,17 +9,79 @@ it('renders the Card with no props', function () {
 });
 
 var _ref2 = /*#__PURE__*/React.createElement(Card, {
-  variant: "border"
+  callToAction: true
 }, "hello");
 
-it('renders the Card with variant="border" props', function () {
+it('renders the Card with callToActon props', function () {
   expect(mount(_ref2)).toMatchSnapshot();
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, "hello");
+
+it('renders the Card with variant="border" props', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(Card, {
   variant: "divider"
 }, "hello");
 
 it('renders the Card with variant="divider" props', function () {
-  expect(mount(_ref3)).toMatchSnapshot();
+  expect(mount(_ref4)).toMatchSnapshot();
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border-top"
+}, "hello");
+
+it('renders the Card with variant="border-top" props', function () {
+  expect(mount(_ref5)).toMatchSnapshot();
+});
+
+var _ref6 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  borderColor: "dark"
+}, "hello");
+
+it('renders the Card with variant="border" and borderColor="dark" props', function () {
+  expect(mount(_ref6)).toMatchSnapshot();
+});
+
+var _ref7 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  borderColor: "gray"
+}, "hello");
+
+it('renders the Card with variant="border" and borderColor="gray" props', function () {
+  expect(mount(_ref7)).toMatchSnapshot();
+});
+
+var _ref8 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border-top",
+  borderColor: "dark"
+}, "hello");
+
+it('renders the Card with variant="border-top" and borderColor="dark" props', function () {
+  expect(mount(_ref8)).toMatchSnapshot();
+});
+
+var _ref9 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border-top",
+  borderColor: "gray"
+}, "hello");
+
+it('renders the Card with variant="border-top" and borderColor="gray" props', function () {
+  expect(mount(_ref9)).toMatchSnapshot();
+});
+
+var _ref10 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border-top",
+  borderColor: "dark",
+  callToAction: true
+}, "hello");
+
+it('renders the Card with variant="border-top" and borderColor="dark" callToAction props', function () {
+  expect(mount(_ref10)).toMatchSnapshot();
 });

package/esm/Grid/index.js

@@ -25,7 +25,7 @@ export var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
 
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: clsx(className, container === true && [inline === true && 'govgr-grid-inline', 'govgr-grid'], container && [spacing === 1 && "govgr-grid__gap-1", spacing === 2 && "govgr-grid__gap-2", spacing === 4 && "govgr-grid__gap-4", spacing === 6 && "govgr-grid__gap-6"], item && [xs === 'auto' && "xs:govgr-grid__col-auto", sm === 'auto' && "sm:govgr-grid__col-auto", md === 'auto' && "md:govgr-grid__col-auto", lg === 'auto' && "lg:govgr-grid__col-auto", xl === 'auto' && "xl:govgr-grid__col-auto", xs === 10 && "xs:govgr-grid__col-span-10", xs === 11 && "xs:govgr-grid__col-span-11", xs === 12 && "xs:govgr-grid__col-span-12", sm === 10 && "sm:govgr-grid__col-span-10", sm === 11 && "sm:govgr-grid__col-span-11", sm === 12 && "sm:govgr-grid__col-span-12", md === 10 && "md:govgr-grid__col-span-10", md === 11 && "md:govgr-grid__col-span-11", md === 12 && "md:govgr-grid__col-span-12", lg === 10 && "lg:govgr-grid__col-span-10", lg === 11 && "lg:govgr-grid__col-span-11", lg === 12 && "lg:govgr-grid__col-span-12", xl === 10 && "xl:govgr-grid__col-span-10", xl === 11 && "xl:govgr-grid__col-span-11", xl === 12 && "xl:govgr-grid__col-span-12", xs === 1 && "xs:govgr-grid__col-span-1", xs === 2 && "xs:govgr-grid__col-span-2", xs === 3 && "xs:govgr-grid__col-span-3", xs === 4 && "xs:govgr-grid__col-span-4", xs === 5 && "xs:govgr-grid__col-span-5", xs === 6 && "xs:govgr-grid__col-span-6", xs === 7 && "xs:govgr-grid__col-span-7", xs === 8 && "xs:govgr-grid__col-span-8", xs === 9 && "xs:govgr-grid__col-span-9", sm === 1 && "sm:govgr-grid__col-span-1", sm === 2 && "sm:govgr-grid__col-span-2", sm === 3 && "sm:govgr-grid__col-span-3", sm === 4 && "sm:govgr-grid__col-span-4", sm === 5 && "sm:govgr-grid__col-span-5", sm === 6 && "sm:govgr-grid__col-span-6", sm === 7 && "sm:govgr-grid__col-span-7", sm === 8 && "sm:govgr-grid__col-span-8", sm === 9 && "sm:govgr-grid__col-span-9", md === 1 && "md:govgr-grid__col-span-1", md === 2 && "md:govgr-grid__col-span-2", md === 3 && "md:govgr-grid__col-span-3", md === 4 && "md:govgr-grid__col-span-4", md === 5 && "md:govgr-grid__col-span-5", md === 6 && "md:govgr-grid__col-span-6", md === 7 && "md:govgr-grid__col-span-7", md === 8 && "md:govgr-grid__col-span-8", md === 9 && "md:govgr-grid__col-span-9", lg === 1 && "lg:govgr-grid__col-span-1", lg === 2 && "lg:govgr-grid__col-span-2", lg === 3 && "lg:govgr-grid__col-span-3", lg === 4 && "lg:govgr-grid__col-span-4", lg === 5 && "lg:govgr-grid__col-span-5", lg === 6 && "lg:govgr-grid__col-span-6", lg === 7 && "lg:govgr-grid__col-span-7", lg === 8 && "lg:govgr-grid__col-span-8", lg === 9 && "lg:govgr-grid__col-span-9", xl === 1 && "xl:govgr-grid__col-span-1", xl === 2 && "xl:govgr-grid__col-span-2", xl === 3 && "xl:govgr-grid__col-span-3", xl === 4 && "xl:govgr-grid__col-span-4", xl === 5 && "xl:govgr-grid__col-span-5", xl === 6 && "xl:govgr-grid__col-span-6", xl === 7 && "xl:govgr-grid__col-span-7", xl === 8 && "xl:govgr-grid__col-span-8", xl === 9 && "xl:govgr-grid__col-span-9"])
+    className: clsx(className, container === true && [inline === true && 'govgr-grid-inline', 'govgr-grid'], container && [spacing === 10 && "govgr-grid__gap-10", spacing === 12 && "govgr-grid__gap-12", spacing === 1 && "govgr-grid__gap-1", spacing === 2 && "govgr-grid__gap-2", spacing === 4 && "govgr-grid__gap-4", spacing === 6 && "govgr-grid__gap-6", spacing === 8 && "govgr-grid__gap-8"], item && [xs === 'auto' && "xs:govgr-grid__col-auto", sm === 'auto' && "sm:govgr-grid__col-auto", md === 'auto' && "md:govgr-grid__col-auto", lg === 'auto' && "lg:govgr-grid__col-auto", xl === 'auto' && "xl:govgr-grid__col-auto", xs === 10 && "xs:govgr-grid__col-span-10", xs === 11 && "xs:govgr-grid__col-span-11", xs === 12 && "xs:govgr-grid__col-span-12", sm === 10 && "sm:govgr-grid__col-span-10", sm === 11 && "sm:govgr-grid__col-span-11", sm === 12 && "sm:govgr-grid__col-span-12", md === 10 && "md:govgr-grid__col-span-10", md === 11 && "md:govgr-grid__col-span-11", md === 12 && "md:govgr-grid__col-span-12", lg === 10 && "lg:govgr-grid__col-span-10", lg === 11 && "lg:govgr-grid__col-span-11", lg === 12 && "lg:govgr-grid__col-span-12", xl === 10 && "xl:govgr-grid__col-span-10", xl === 11 && "xl:govgr-grid__col-span-11", xl === 12 && "xl:govgr-grid__col-span-12", xs === 1 && "xs:govgr-grid__col-span-1", xs === 2 && "xs:govgr-grid__col-span-2", xs === 3 && "xs:govgr-grid__col-span-3", xs === 4 && "xs:govgr-grid__col-span-4", xs === 5 && "xs:govgr-grid__col-span-5", xs === 6 && "xs:govgr-grid__col-span-6", xs === 7 && "xs:govgr-grid__col-span-7", xs === 8 && "xs:govgr-grid__col-span-8", xs === 9 && "xs:govgr-grid__col-span-9", sm === 1 && "sm:govgr-grid__col-span-1", sm === 2 && "sm:govgr-grid__col-span-2", sm === 3 && "sm:govgr-grid__col-span-3", sm === 4 && "sm:govgr-grid__col-span-4", sm === 5 && "sm:govgr-grid__col-span-5", sm === 6 && "sm:govgr-grid__col-span-6", sm === 7 && "sm:govgr-grid__col-span-7", sm === 8 && "sm:govgr-grid__col-span-8", sm === 9 && "sm:govgr-grid__col-span-9", md === 1 && "md:govgr-grid__col-span-1", md === 2 && "md:govgr-grid__col-span-2", md === 3 && "md:govgr-grid__col-span-3", md === 4 && "md:govgr-grid__col-span-4", md === 5 && "md:govgr-grid__col-span-5", md === 6 && "md:govgr-grid__col-span-6", md === 7 && "md:govgr-grid__col-span-7", md === 8 && "md:govgr-grid__col-span-8", md === 9 && "md:govgr-grid__col-span-9", lg === 1 && "lg:govgr-grid__col-span-1", lg === 2 && "lg:govgr-grid__col-span-2", lg === 3 && "lg:govgr-grid__col-span-3", lg === 4 && "lg:govgr-grid__col-span-4", lg === 5 && "lg:govgr-grid__col-span-5", lg === 6 && "lg:govgr-grid__col-span-6", lg === 7 && "lg:govgr-grid__col-span-7", lg === 8 && "lg:govgr-grid__col-span-8", lg === 9 && "lg:govgr-grid__col-span-9", xl === 1 && "xl:govgr-grid__col-span-1", xl === 2 && "xl:govgr-grid__col-span-2", xl === 3 && "xl:govgr-grid__col-span-3", xl === 4 && "xl:govgr-grid__col-span-4", xl === 5 && "xl:govgr-grid__col-span-5", xl === 6 && "xl:govgr-grid__col-span-6", xl === 7 && "xl:govgr-grid__col-span-7", xl === 8 && "xl:govgr-grid__col-span-8", xl === 9 && "xl:govgr-grid__col-span-9"])
   }, props), children);
 });
 export default Grid;

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the TableContainer with  border prop 1`] = `
+<ForwardRef(TableContainer)
+  border={true}
+>
+  <div
+    className="govgr-table-container--border govgr-table-container"
+  >
+    hello
+  </div>
+</ForwardRef(TableContainer)>
+`;
+
+exports[`renders the TableContainer with no props 1`] = `
+<ForwardRef(TableContainer)>
+  <div
+    className="govgr-table-container"
+  >
+    hello
+  </div>
+</ForwardRef(TableContainer)>
+`;

package/esm/TableContainer/index.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["border", "className", "children"];
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Use TableContainer as a wrapper for a Table. It is used when the table is wider that the viewport width.
+ */
+export var TableContainer = /*#__PURE__*/React.forwardRef(function TableContainer(_ref, ref) {
+  var _ref$border = _ref.border,
+      border = _ref$border === void 0 ? false : _ref$border,
+      className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: clsx(className, border && 'govgr-table-container--border', true && 'govgr-table-container')
+  }, props), children);
+});
+export default TableContainer;

package/esm/TableContainer/index.test.js

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

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.10.1
+/** @license Digigov v0.12.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -123,6 +123,7 @@ export { default as SvgIcon } from '@digigov/react-core/SvgIcon';
 export { default as Table } from '@digigov/react-core/Table';
 export { default as TableBody } from '@digigov/react-core/TableBody';
 export { default as TableCaption } from '@digigov/react-core/TableCaption';
+export { default as TableContainer } from '@digigov/react-core/TableContainer';
 export { default as TableDataCell } from '@digigov/react-core/TableDataCell';
 export { default as TableNoDataRow } from '@digigov/react-core/TableNoDataRow';
 export { default as TableHead } from '@digigov/react-core/TableHead';

package/index.d.ts

@@ -118,6 +118,7 @@ export { default as SvgIcon } from '@digigov/react-core/SvgIcon';
 export { default as Table } from '@digigov/react-core/Table';
 export { default as TableBody } from '@digigov/react-core/TableBody';
 export { default as TableCaption } from '@digigov/react-core/TableCaption';
+export { default as TableContainer } from '@digigov/react-core/TableContainer';
 export { default as TableDataCell } from '@digigov/react-core/TableDataCell';
 export { default as TableNoDataRow } from '@digigov/react-core/TableNoDataRow';
 export { default as TableHead } from '@digigov/react-core/TableHead';

package/index.js

@@ -719,6 +719,12 @@ Object.defineProperty(exports, "TableCaption", {
     return _TableCaption["default"];
   }
 });
+Object.defineProperty(exports, "TableContainer", {
+  enumerable: true,
+  get: function get() {
+    return _TableContainer["default"];
+  }
+});
 Object.defineProperty(exports, "TableDataCell", {
   enumerable: true,
   get: function get() {
@@ -1056,6 +1062,8 @@ var _TableBody = _interopRequireDefault(require("@digigov/react-core/TableBody")
 
 var _TableCaption = _interopRequireDefault(require("@digigov/react-core/TableCaption"));
 
+var _TableContainer = _interopRequireDefault(require("@digigov/react-core/TableContainer"));
+
 var _TableDataCell = _interopRequireDefault(require("@digigov/react-core/TableDataCell"));
 
 var _TableNoDataRow = _interopRequireDefault(require("@digigov/react-core/TableNoDataRow"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/react-core",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "directory": "dist"
   },
   "peerDependencies": {
-    "@digigov/css": "0.20.0",
+    "@digigov/css": "0.22.0",
     "clsx": "1.1.1",
     "react": "16.14.0",
     "react-dom": "16.14.0"