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

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

@@ -2,16 +2,33 @@
 
 exports[`renders the TabsHeading with no props 1`] = `
 <ForwardRef(TabsHeading)>
-  <ForwardRef(Base)
-    as="h6"
-    className="govgr-heading-sm govgr-tabs__title"
+  <ForwardRef(Hidden)
+    mdUp={true}
   >
-    <h6
-      className="govgr-heading-sm govgr-tabs__title"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-hidden-md--up"
     >
-      hello
-    </h6>
-  </ForwardRef(Base)>
+      <div
+        className="govgr-hidden-md--up"
+      >
+        <ForwardRef(Heading)
+          size="sm"
+        >
+          <ForwardRef(Base)
+            as="h4"
+            className="govgr-heading-sm"
+          >
+            <h4
+              className="govgr-heading-sm"
+            >
+              hello
+            </h4>
+          </ForwardRef(Base)>
+        </ForwardRef(Heading)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Hidden)>
 </ForwardRef(TabsHeading)>
 `;
 
@@ -19,16 +36,33 @@ exports[`renders the TabsHeading with size=m 1`] = `
 <ForwardRef(TabsHeading)
   size="md"
 >
-  <ForwardRef(Base)
-    as="h6"
-    className="govgr-heading-md govgr-tabs__title"
+  <ForwardRef(Hidden)
+    mdUp={true}
   >
-    <h6
-      className="govgr-heading-md govgr-tabs__title"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-hidden-md--up"
     >
-      hello
-    </h6>
-  </ForwardRef(Base)>
+      <div
+        className="govgr-hidden-md--up"
+      >
+        <ForwardRef(Heading)
+          size="md"
+        >
+          <ForwardRef(Base)
+            as="h3"
+            className="govgr-heading-md"
+          >
+            <h3
+              className="govgr-heading-md"
+            >
+              hello
+            </h3>
+          </ForwardRef(Base)>
+        </ForwardRef(Heading)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Hidden)>
 </ForwardRef(TabsHeading)>
 `;
 
@@ -36,15 +70,32 @@ exports[`renders the TabsHeading with size=s 1`] = `
 <ForwardRef(TabsHeading)
   size="sm"
 >
-  <ForwardRef(Base)
-    as="h6"
-    className="govgr-heading-sm govgr-tabs__title"
+  <ForwardRef(Hidden)
+    mdUp={true}
   >
-    <h6
-      className="govgr-heading-sm govgr-tabs__title"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-hidden-md--up"
     >
-      hello
-    </h6>
-  </ForwardRef(Base)>
+      <div
+        className="govgr-hidden-md--up"
+      >
+        <ForwardRef(Heading)
+          size="sm"
+        >
+          <ForwardRef(Base)
+            as="h4"
+            className="govgr-heading-sm"
+          >
+            <h4
+              className="govgr-heading-sm"
+            >
+              hello
+            </h4>
+          </ForwardRef(Base)>
+        </ForwardRef(Heading)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Hidden)>
 </ForwardRef(TabsHeading)>
 `;

package/es/TabsHeading/index.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "className", "children"];
 import React from 'react';
-import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Hidden from '@digigov/react-core/Hidden';
+import Heading from '@digigov/react-core/Heading';
 
 /**
- * TabsHeading should be inside the Tabs component. This heading is hidden on desktop screens, but it is always usefull for accessibility.
+ * TabsHeading should be inside the Tabs component. This heading is hidden on desktop screens, but it is always useful for accessibility.
  */
 export var TabsHeading = /*#__PURE__*/React.forwardRef(function TabsHeading(_ref, ref) {
   var _ref$size = _ref.size,
@@ -15,10 +15,12 @@ export var TabsHeading = /*#__PURE__*/React.forwardRef(function TabsHeading(_ref
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "h6",
-    ref: ref,
-    className: clsx(className, size === 'md' && 'govgr-heading-md', size === 'sm' && 'govgr-heading-sm', true && 'govgr-tabs__title')
-  }, props), children);
+  return /*#__PURE__*/React.createElement(Hidden, _extends({
+    ref: ref
+  }, props, {
+    mdUp: true
+  }), /*#__PURE__*/React.createElement(Heading, {
+    size: size
+  }, children));
 });
 export default TabsHeading;

package/es/TabsListItem/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["selected", "className", "children"];
+var _excluded = ["open", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -10,19 +10,19 @@ import Base from '@digigov/react-core/Base';
  * In here we declare the title of the tab.
  */
 export var TabsListItem = /*#__PURE__*/React.forwardRef(function TabsListItem(_ref, ref) {
-  var selected = _ref.selected,
+  var open = _ref.open,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement("li", {
     role: "presentation",
-    className: clsx(className, selected && 'govgr-tabs__list-item-selected', true && 'govgr-tabs__list-item')
+    className: clsx(className, true && 'govgr-tabs__list-item', open && 'govgr-tabs__list-item-selected')
   }, /*#__PURE__*/React.createElement(Base, _extends({
-    as: "a",
+    as: "button",
     ref: ref,
     role: "tab",
-    "aria-selected": selected,
+    "aria-selected": open,
     className: clsx(true && 'govgr-tabs__tab')
   }, props), children));
 });

package/es/TabsListItem/index.test.js

@@ -9,35 +9,35 @@ it('renders the TabsListItem with no props', function () {
 });
 
 var _ref2 = /*#__PURE__*/React.createElement(TabsListItem, {
-  selected: true
+  open: true
 }, "hello");
 
-it('renders the TabsListItem with selected=true', function () {
+it('renders the TabsListItem with open=true', function () {
   expect(mount(_ref2)).toMatchSnapshot();
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(TabsListItem, {
-  selected: false
+  open: false
 }, "hello");
 
-it('renders the TabsListItem with selected=false', function () {
+it('renders the TabsListItem with open=false', function () {
   expect(mount(_ref3)).toMatchSnapshot();
 });
 
 var _ref4 = /*#__PURE__*/React.createElement(TabsListItem, {
   href: "/",
-  selected: false
+  open: false
 }, "hello");
 
-it('renders the TabsListItem with href and selected=false', function () {
+it('renders the TabsListItem with href and open=false', function () {
   expect(mount(_ref4)).toMatchSnapshot();
 });
 
 var _ref5 = /*#__PURE__*/React.createElement(TabsListItem, {
   href: "/",
-  selected: true
+  open: true
 }, "hello");
 
-it('renders the TabsListItem with selected=true', function () {
+it('renders the TabsListItem with open=true', function () {
   expect(mount(_ref5)).toMatchSnapshot();
 });

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

@@ -21,10 +21,10 @@ exports[`renders the TaskListItemHeading with size = "md" prop 1`] = `
 >
   <ForwardRef(Base)
     as="h3"
-    className="govgr-task-list__heading-md govgr-task-list__heading"
+    className="govgr-task-list__heading--md govgr-task-list__heading"
   >
     <h3
-      className="govgr-task-list__heading-md govgr-task-list__heading"
+      className="govgr-task-list__heading--md govgr-task-list__heading"
     >
       hello
     </h3>
@@ -38,10 +38,10 @@ exports[`renders the TaskListItemHeading with size = "sm" prop 1`] = `
 >
   <ForwardRef(Base)
     as="h4"
-    className="govgr-task-list__heading-sm govgr-task-list__heading"
+    className="govgr-task-list__heading--sm govgr-task-list__heading"
   >
     <h4
-      className="govgr-task-list__heading-sm govgr-task-list__heading"
+      className="govgr-task-list__heading--sm govgr-task-list__heading"
     >
       hello
     </h4>

package/es/TaskListItemHeading/index.js

@@ -1,44 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "element", "className", "children"];
+var _excluded = ["children"];
 import React from 'react';
-import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Heading from '@digigov/react-core/Heading';
 
-var getComponentBySize = function getComponentBySize(size) {
-  switch (size) {
-    case 'lg':
-      return 'h2';
-
-    case 'md':
-      return 'h3';
-
-    case 'sm':
-      return 'h4';
-
-    default:
-      return 'h2';
-  }
-};
 /**
  * TaskListItemHeading component is used to place a title in a TaskListItem component.
- * TaskListItemHeading component must be wraped inside TaskListItem component.
+ * TaskListItemHeading component must be wrapped inside TaskListItem component.
  */
-
-
-export var TaskListItemHeading = /*#__PURE__*/React.forwardRef(function TaskListItemHeading(_ref, ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'lg' : _ref$size,
-      element = _ref.element,
-      className = _ref.className,
-      children = _ref.children,
+export var TaskListItemHeading = /*#__PURE__*/React.forwardRef(function TaskListItemHeaading(_ref, ref) {
+  var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var Component = element ? element : getComponentBySize(size);
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: Component,
-    ref: ref,
-    className: clsx(className, size === 'md' && 'govgr-task-list__heading--md', size === 'sm' && 'govgr-task-list__heading--sm', true && 'govgr-task-list__heading')
+  return /*#__PURE__*/React.createElement(Heading, _extends({
+    size: "lg",
+    marginBottom: 4,
+    ref: ref
   }, props), children);
 });
 export default TaskListItemHeading;

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

@@ -1,13 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the TaskListItemTag with no props 1`] = `
-<ForwardRef(PhaseBannerTag)>
+exports[`renders the TaskListItemTag with color="primary" props 1`] = `
+<ForwardRef(PhaseBannerTag)
+  color="primary"
+>
   <ForwardRef(Base)
     as="strong"
-    className="govgr-task-list__content__tag"
+    className="govgr-task-list__content__tag--primary govgr-task-list__content__tag"
   >
     <strong
-      className="govgr-task-list__content__tag"
+      className="govgr-task-list__content__tag--primary govgr-task-list__content__tag"
     >
       hello
     </strong>
@@ -15,16 +17,16 @@ exports[`renders the TaskListItemTag with no props 1`] = `
 </ForwardRef(PhaseBannerTag)>
 `;
 
-exports[`renders the TaskListItemTag with status="completed" props 1`] = `
+exports[`renders the TaskListItemTag with color="secondary" props 1`] = `
 <ForwardRef(PhaseBannerTag)
-  status="completed"
+  color="secondary"
 >
   <ForwardRef(Base)
     as="strong"
-    className="govgr-tag__primary govgr-task-list__content__tag"
+    className="govgr-task-list__content__tag--secondary govgr-task-list__content__tag"
   >
     <strong
-      className="govgr-tag__primary govgr-task-list__content__tag"
+      className="govgr-task-list__content__tag--secondary govgr-task-list__content__tag"
     >
       hello
     </strong>
@@ -32,16 +34,14 @@ exports[`renders the TaskListItemTag with status="completed" props 1`] = `
 </ForwardRef(PhaseBannerTag)>
 `;
 
-exports[`renders the TaskListItemTag with status="in-progress" props 1`] = `
-<ForwardRef(PhaseBannerTag)
-  status="in-progress"
->
+exports[`renders the TaskListItemTag with no props 1`] = `
+<ForwardRef(PhaseBannerTag)>
   <ForwardRef(Base)
     as="strong"
-    className="govgr-tag__secondary govgr-task-list__content__tag"
+    className="govgr-task-list__content__tag"
   >
     <strong
-      className="govgr-tag__secondary govgr-task-list__content__tag"
+      className="govgr-task-list__content__tag"
     >
       hello
     </strong>
@@ -49,16 +49,16 @@ exports[`renders the TaskListItemTag with status="in-progress" props 1`] = `
 </ForwardRef(PhaseBannerTag)>
 `;
 
-exports[`renders the TaskListItemTag with status="not-started" props 1`] = `
+exports[`renders the TaskListItemTag with status="info" props 1`] = `
 <ForwardRef(PhaseBannerTag)
-  status="not-started"
+  color="info"
 >
   <ForwardRef(Base)
     as="strong"
-    className="govgr-tag__gray govgr-task-list__content__tag"
+    className="govgr-task-list__content__tag--info govgr-task-list__content__tag"
   >
     <strong
-      className="govgr-tag__gray govgr-task-list__content__tag"
+      className="govgr-task-list__content__tag--info govgr-task-list__content__tag"
     >
       hello
     </strong>

package/es/TaskListItemTag/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["status", "className", "children"];
+var _excluded = ["color", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -9,7 +9,7 @@ import Base from '@digigov/react-core/Base';
  * TaskListItemTag is used inside the TaskListItem component and it displays the status of the task (completed, not started yet, etc.)
  */
 export var TaskListItemTag = /*#__PURE__*/React.forwardRef(function PhaseBannerTag(_ref, ref) {
-  var status = _ref.status,
+  var color = _ref.color,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -17,7 +17,7 @@ export var TaskListItemTag = /*#__PURE__*/React.forwardRef(function PhaseBannerT
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "strong",
     ref: ref,
-    className: clsx(className, status === 'in-progress' && 'govgr-task-list__content__tag--secondary', status === 'not-started' && 'govgr-task-list__content__tag--gray', status === 'completed' && 'govgr-task-list__content__tag--primary', true && 'govgr-task-list__content__tag')
+    className: clsx(className, color !== undefined && "govgr-task-list__content__tag--".concat(color), true && 'govgr-task-list__content__tag')
   }, props), children);
 });
 export default TaskListItemTag;

package/es/TaskListItemTag/index.test.js

@@ -9,25 +9,25 @@ it('renders the TaskListItemTag with no props', function () {
 });
 
 var _ref2 = /*#__PURE__*/React.createElement(TaskListItemTag, {
-  status: "completed"
+  color: "info"
 }, "hello");
 
-it('renders the TaskListItemTag with status="completed" props', function () {
+it('renders the TaskListItemTag with status="info" props', function () {
   expect(mount(_ref2)).toMatchSnapshot();
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(TaskListItemTag, {
-  status: "in-progress"
+  color: "primary"
 }, "hello");
 
-it('renders the TaskListItemTag with status="in-progress" props', function () {
+it('renders the TaskListItemTag with color="primary" props', function () {
   expect(mount(_ref3)).toMatchSnapshot();
 });
 
 var _ref4 = /*#__PURE__*/React.createElement(TaskListItemTag, {
-  status: "not-started"
+  color: "secondary"
 }, "hello");
 
-it('renders the TaskListItemTag with status="not-started" props', function () {
+it('renders the TaskListItemTag with color="secondary" props', function () {
   expect(mount(_ref4)).toMatchSnapshot();
 });