@digigov/react-core 0.6.1 → 0.6.2

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

@@ -4,16 +4,20 @@ exports[`renders the ArrowIcon with direction down prop 1`] = `
 <ForwardRef(ArrowIcon)
   direction="down"
 >
-  <svg
-    aria-hidden="true"
+  <ForwardRef(SvgIcon)
     className="govgr-arrow--down"
-    focusable="false"
-    viewBox="0 0 24 24"
   >
-    <path
-      d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-arrow--down govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(ArrowIcon)>
 `;
 
@@ -21,16 +25,20 @@ exports[`renders the ArrowIcon with direction left prop 1`] = `
 <ForwardRef(ArrowIcon)
   direction="left"
 >
-  <svg
-    aria-hidden="true"
+  <ForwardRef(SvgIcon)
     className="govgr-arrow--left"
-    focusable="false"
-    viewBox="0 0 24 24"
   >
-    <path
-      d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-arrow--left govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(ArrowIcon)>
 `;
 
@@ -38,30 +46,38 @@ exports[`renders the ArrowIcon with direction up prop 1`] = `
 <ForwardRef(ArrowIcon)
   direction="up"
 >
-  <svg
-    aria-hidden="true"
+  <ForwardRef(SvgIcon)
     className="govgr-arrow--up"
-    focusable="false"
-    viewBox="0 0 24 24"
   >
-    <path
-      d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-arrow--up govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(ArrowIcon)>
 `;
 
 exports[`renders the ArrowIcon with no props, direction prop is right by default 1`] = `
 <ForwardRef(ArrowIcon)>
-  <svg
-    aria-hidden="true"
+  <ForwardRef(SvgIcon)
     className="govgr-arrow--right"
-    focusable="false"
-    viewBox="0 0 24 24"
   >
-    <path
-      d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-arrow--right govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(ArrowIcon)>
 `;

package/esm/ArrowIcon/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", {
  * ArrowIcon component can be used inside other components, for example CallToAction component.
  */
 export var ArrowIcon = /*#__PURE__*/React.forwardRef(function ArrowIcon(_ref, ref) {
-  var _ref$direction = _ref.direction,
+  var size = _ref.size,
+      variant = _ref.variant,
+      _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? 'right' : _ref$direction,
       className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(direction),
-      _useState2 = _slicedToArray(_useState, 2),
-      arrowDirection = _useState2[0],
-      setDirection = _useState2[1];
-
-  useEffect(function () {
-    setDirection(direction);
-  }, [direction]);
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    ref: ref,
-    className: clsx(arrowDirection === 'right' && 'govgr-arrow--right', arrowDirection === 'left' && 'govgr-arrow--left', arrowDirection === 'down' && 'govgr-arrow--down', arrowDirection === 'up' && 'govgr-arrow--up', className && className),
-    focusable: "false",
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true"
-  }, props), arrowDirection === 'left' && _ref2, arrowDirection === 'right' && _ref3, arrowDirection === 'up' && _ref4, arrowDirection === 'down' && _ref5);
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    size: size,
+    variant: variant,
+    className: clsx(direction === 'right' && 'govgr-arrow--right', direction === 'left' && 'govgr-arrow--left', direction === 'down' && 'govgr-arrow--down', direction === 'up' && 'govgr-arrow--up', className && className),
+    ref: ref
+  }, props), direction === 'left' && _ref2, direction === 'right' && _ref3, direction === 'up' && _ref4, direction === 'down' && _ref5);
 });
 export default ArrowIcon;

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

@@ -1,88 +1,235 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the BurgerIcon prop hidden="l" 1`] = `
+<ForwardRef(BurgerIcon)
+  hidden="l"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--hidden-l govgr-burger-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-burger-icon--hidden-l govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-1"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-2"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-3"
+        width="20"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon prop hidden="m" 1`] = `
+<ForwardRef(BurgerIcon)
+  hidden="m"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--hidden-m govgr-burger-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-burger-icon--hidden-m govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-1"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-2"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-3"
+        width="20"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon prop hidden="s" 1`] = `
+<ForwardRef(BurgerIcon)
+  hidden="s"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--hidden-s govgr-burger-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-burger-icon--hidden-s govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-1"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-2"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-3"
+        width="20"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon prop variant= "error" 1`] = `
+<ForwardRef(BurgerIcon)
+  variant="error"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon"
+    variant="error"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--error govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-1"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-2"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-3"
+        width="20"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
 exports[`renders the BurgerIcon prop variant= "light" 1`] = `
 <ForwardRef(BurgerIcon)
   variant="light"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--light govgr-burger-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon"
+    variant="light"
   >
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-1"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-2"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-3"
-      width="20"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--light govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-1"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-2"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-3"
+        width="20"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(BurgerIcon)>
 `;
 
-exports[`renders the BurgerIcon props active hidden="md" variant= "light" 1`] = `
+exports[`renders the BurgerIcon props active hidden="no" variant= "light" 1`] = `
 <ForwardRef(BurgerIcon)
   active={true}
   variant="light"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--light govgr-burger-icon--active govgr-burger-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--active govgr-burger-icon"
+    variant="light"
   >
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-1"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-2"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-3"
-      width="20"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--light govgr-burger-icon--active govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-1"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-2"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-3"
+        width="20"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(BurgerIcon)>
 `;
 
 exports[`renders the BurgerIcon with no props 1`] = `
 <ForwardRef(BurgerIcon)>
-  <svg
-    aria-hidden="true"
+  <ForwardRef(SvgIcon)
     className="govgr-burger-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
   >
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-1"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-2"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-3"
-      width="20"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-1"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-2"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-3"
+        width="20"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(BurgerIcon)>
 `;
 
@@ -90,28 +237,32 @@ exports[`renders the BurgerIcon with prop active=true 1`] = `
 <ForwardRef(BurgerIcon)
   active={true}
 >
-  <svg
-    aria-hidden="true"
+  <ForwardRef(SvgIcon)
     className="govgr-burger-icon--active govgr-burger-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
   >
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-1"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-2"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-3"
-      width="20"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-burger-icon--active govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-1"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-2"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-3"
+        width="20"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(BurgerIcon)>
 `;
 
@@ -119,57 +270,103 @@ exports[`renders the BurgerIcon with prop variant=dark 1`] = `
 <ForwardRef(BurgerIcon)
   variant="dark"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-burger-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon"
+    variant="dark"
   >
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-1"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-2"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-3"
-      width="20"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-1"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-2"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-3"
+        width="20"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(BurgerIcon)>
 `;
 
-exports[`renders the BurgerIcon with props active hidden=md and variant="dark" 1`] = `
+exports[`renders the BurgerIcon with props active hidden="s" and variant="dark" 1`] = `
 <ForwardRef(BurgerIcon)
   active={true}
+  hidden="s"
   variant="dark"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-burger-icon--active govgr-burger-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--active govgr-burger-icon--hidden-s govgr-burger-icon"
+    variant="dark"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-burger-icon--active govgr-burger-icon--hidden-s govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-1"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-2"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-3"
+        width="20"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon with props hidden="l" and variant="success" 1`] = `
+<ForwardRef(BurgerIcon)
+  hidden="l"
+  variant="success"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-burger-icon--hidden-l govgr-burger-icon"
+    variant="success"
   >
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-1"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-2"
-      width="20"
-    />
-    <rect
-      height="3.3"
-      id="govgr-burger-icon__line-3"
-      width="20"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--success govgr-burger-icon--hidden-l govgr-burger-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-1"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-2"
+        width="20"
+      />
+      <rect
+        height="3.3"
+        id="govgr-burger-icon__line-3"
+        width="20"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(BurgerIcon)>
 `;