@digigov/react-core 0.6.1 → 0.6.2

package/esm/BurgerIcon/index.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["active", "className", "variant"];
-import React, { useEffect, useState } from 'react';
+var _excluded = ["variant", "size", "active", "hidden", "className"];
+import React from 'react';
+import SvgIcon from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
 
 var _ref2 = /*#__PURE__*/React.createElement("rect", {
@@ -28,31 +28,18 @@ var _ref4 = /*#__PURE__*/React.createElement("rect", {
  * It should be linked with the NavHorizontal component. It is hidden when the NavHorizontal is visible and vice versa.
  */
 export var BurgerIcon = /*#__PURE__*/React.forwardRef(function BurgerIcon(_ref, ref) {
-  var active = _ref.active,
+  var variant = _ref.variant,
+      size = _ref.size,
+      active = _ref.active,
+      hidden = _ref.hidden,
       className = _ref.className,
-      variant = _ref.variant,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(active),
-      _useState2 = _slicedToArray(_useState, 2),
-      iconActive = _useState2[0],
-      setActive = _useState2[1];
-
-  var _useState3 = useState(variant),
-      _useState4 = _slicedToArray(_useState3, 2),
-      iconVariant = _useState4[0],
-      setVariant = _useState4[1];
-
-  useEffect(function () {
-    setActive(active);
-    setVariant(variant);
-  }, [active, variant]);
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    ref: ref,
-    className: clsx(iconVariant === 'light' && 'govgr-svg-icon--light', iconVariant === 'dark' && 'govgr-svg-icon--dark', iconActive === true && 'govgr-burger-icon--active', className && className, true && 'govgr-burger-icon'),
-    focusable: "false",
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true"
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    variant: variant,
+    size: size,
+    className: clsx(active === true && 'govgr-burger-icon--active', hidden === 's' && 'govgr-burger-icon--hidden-s', hidden === 'm' && 'govgr-burger-icon--hidden-m', hidden === 'l' && 'govgr-burger-icon--hidden-l', className && className, true && 'govgr-burger-icon'),
+    ref: ref
   }, props), _ref2, _ref3, _ref4);
 });
 export default BurgerIcon;

package/esm/BurgerIcon/index.test.js

@@ -33,19 +33,61 @@ it('renders the BurgerIcon prop variant= "light"', function () {
 });
 
 var _ref5 = /*#__PURE__*/React.createElement(BurgerIcon, {
-  active: true,
-  variant: "dark"
+  variant: "error"
 });
 
-it('renders the BurgerIcon with props active hidden=md and variant="dark"', function () {
+it('renders the BurgerIcon prop variant= "error"', function () {
   expect(mount(_ref5)).toMatchSnapshot();
 });
 
 var _ref6 = /*#__PURE__*/React.createElement(BurgerIcon, {
+  hidden: "s"
+});
+
+it('renders the BurgerIcon prop hidden="s"', function () {
+  expect(mount(_ref6)).toMatchSnapshot();
+});
+
+var _ref7 = /*#__PURE__*/React.createElement(BurgerIcon, {
+  hidden: "m"
+});
+
+it('renders the BurgerIcon prop hidden="m"', function () {
+  expect(mount(_ref7)).toMatchSnapshot();
+});
+
+var _ref8 = /*#__PURE__*/React.createElement(BurgerIcon, {
+  hidden: "l"
+});
+
+it('renders the BurgerIcon prop hidden="l"', function () {
+  expect(mount(_ref8)).toMatchSnapshot();
+});
+
+var _ref9 = /*#__PURE__*/React.createElement(BurgerIcon, {
+  active: true,
+  hidden: "s",
+  variant: "dark"
+});
+
+it('renders the BurgerIcon with props active hidden="s" and variant="dark"', function () {
+  expect(mount(_ref9)).toMatchSnapshot();
+});
+
+var _ref10 = /*#__PURE__*/React.createElement(BurgerIcon, {
+  hidden: "l",
+  variant: "success"
+});
+
+it('renders the BurgerIcon with props hidden="l" and variant="success"', function () {
+  expect(mount(_ref10)).toMatchSnapshot();
+});
+
+var _ref11 = /*#__PURE__*/React.createElement(BurgerIcon, {
   active: true,
   variant: "light"
 });
 
-it('renders the BurgerIcon props active hidden="md" variant= "light"', function () {
-  expect(mount(_ref6)).toMatchSnapshot();
+it('renders the BurgerIcon props active hidden="no" variant= "light"', function () {
+  expect(mount(_ref11)).toMatchSnapshot();
 });

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

@@ -4,16 +4,20 @@ exports[`renders the CaretIcon with direction down prop 1`] = `
 <ForwardRef(CaretIcon)
   direction="down"
 >
-  <svg
-    aria-hidden="true"
+  <ForwardRef(SvgIcon)
     className="govgr-caret--down"
-    focusable="false"
-    viewBox="0 0 24 24"
   >
-    <path
-      d="M22,6H2l10,12L22,6z"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-caret--down govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M22,6H2l10,12L22,6z"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CaretIcon)>
 `;
 
@@ -21,16 +25,20 @@ exports[`renders the CaretIcon with direction right prop 1`] = `
 <ForwardRef(CaretIcon)
   direction="right"
 >
-  <svg
-    aria-hidden="true"
+  <ForwardRef(SvgIcon)
     className="govgr-caret--right"
-    focusable="false"
-    viewBox="0 0 24 24"
   >
-    <path
-      d="M6,2v20l12-10L6,2z"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-caret--right govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M6,2v20l12-10L6,2z"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CaretIcon)>
 `;
 
@@ -38,30 +46,38 @@ exports[`renders the CaretIcon with direction up prop 1`] = `
 <ForwardRef(CaretIcon)
   direction="up"
 >
-  <svg
-    aria-hidden="true"
+  <ForwardRef(SvgIcon)
     className="govgr-caret--up"
-    focusable="false"
-    viewBox="0 0 24 24"
   >
-    <path
-      d="M2,18h20L12,6L2,18z"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-caret--up govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M2,18h20L12,6L2,18z"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CaretIcon)>
 `;
 
 exports[`renders the CaretIcon with no props, direction prop is left by default 1`] = `
 <ForwardRef(CaretIcon)>
-  <svg
-    aria-hidden="true"
+  <ForwardRef(SvgIcon)
     className="govgr-caret--left"
-    focusable="false"
-    viewBox="0 0 24 24"
   >
-    <path
-      d="M18,22V2L6,12L18,22z"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-caret--left govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M18,22V2L6,12L18,22z"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CaretIcon)>
 `;

package/esm/CaretIcon/index.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["direction", "className"];
-import React, { useEffect, useState } from 'react';
+var _excluded = ["size", "variant", "direction", "className"];
+import React from 'react';
+import SvgIcon from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
 
 var _ref2 = /*#__PURE__*/React.createElement("path", {
@@ -26,25 +26,18 @@ var _ref5 = /*#__PURE__*/React.createElement("path", {
  * CaretIcon can be used inside other components, for example BackLink component.
  */
 export var CaretIcon = /*#__PURE__*/React.forwardRef(function CaretIcon(_ref, ref) {
-  var _ref$direction = _ref.direction,
+  var size = _ref.size,
+      variant = _ref.variant,
+      _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? 'left' : _ref$direction,
       className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(direction),
-      _useState2 = _slicedToArray(_useState, 2),
-      caretDirection = _useState2[0],
-      setDirection = _useState2[1];
-
-  useEffect(function () {
-    setDirection(direction);
-  }, [direction]);
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    ref: ref,
-    className: clsx(caretDirection === 'right' && 'govgr-caret--right', caretDirection === 'left' && 'govgr-caret--left', caretDirection === 'down' && 'govgr-caret--down', caretDirection === 'up' && 'govgr-caret--up', className && className),
-    focusable: "false",
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true"
-  }, props), caretDirection === 'left' && _ref2, caretDirection === 'right' && _ref3, caretDirection === 'up' && _ref4, caretDirection === 'down' && _ref5);
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    size: size,
+    variant: variant,
+    className: clsx(direction === 'right' && 'govgr-caret--right', direction === 'left' && 'govgr-caret--left', direction === 'down' && 'govgr-caret--down', direction === 'up' && 'govgr-caret--up', className && className),
+    ref: ref
+  }, props), direction === 'left' && _ref2, direction === 'right' && _ref3, direction === 'up' && _ref4, direction === 'down' && _ref5);
 });
 export default CaretIcon;