@digigov/react-core 0.6.0 → 0.6.3

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

@@ -2,16 +2,18 @@
 
 exports[`renders the CheckIcon with no props 1`] = `
 <ForwardRef(CheckIcon)>
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
-  >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+  <ForwardRef(SvgIcon)>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -19,16 +21,20 @@ exports[`renders the CheckIcon with prop size=l 1`] = `
 <ForwardRef(CheckIcon)
   size="l"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--l govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    size="l"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--l govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -36,16 +42,20 @@ exports[`renders the CheckIcon with prop size=m 1`] = `
 <ForwardRef(CheckIcon)
   size="m"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    size="m"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -53,16 +63,20 @@ exports[`renders the CheckIcon with prop size=s 1`] = `
 <ForwardRef(CheckIcon)
   size="s"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--s govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    size="s"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--s govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -70,16 +84,20 @@ exports[`renders the CheckIcon with prop size=xl 1`] = `
 <ForwardRef(CheckIcon)
   size="xl"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--xl govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    size="xl"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--xl govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -87,16 +105,20 @@ exports[`renders the CheckIcon with prop variant=dark 1`] = `
 <ForwardRef(CheckIcon)
   variant="dark"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    variant="dark"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -104,16 +126,20 @@ exports[`renders the CheckIcon with prop variant=error 1`] = `
 <ForwardRef(CheckIcon)
   variant="error"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--error govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    variant="error"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--error govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -122,16 +148,21 @@ exports[`renders the CheckIcon with prop variant=error and size= xl 1`] = `
   size="xl"
   variant="warning"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    size="xl"
+    variant="warning"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -139,16 +170,20 @@ exports[`renders the CheckIcon with prop variant=focus 1`] = `
 <ForwardRef(CheckIcon)
   variant="focus"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--focus govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    variant="focus"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--focus govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -156,16 +191,20 @@ exports[`renders the CheckIcon with prop variant=gray 1`] = `
 <ForwardRef(CheckIcon)
   variant="gray"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--gray govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    variant="gray"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--gray govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -173,16 +212,20 @@ exports[`renders the CheckIcon with prop variant=light 1`] = `
 <ForwardRef(CheckIcon)
   variant="light"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--light govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    variant="light"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--light govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -190,16 +233,20 @@ exports[`renders the CheckIcon with prop variant=primary 1`] = `
 <ForwardRef(CheckIcon)
   variant="primary"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--primary govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    variant="primary"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--primary govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -207,16 +254,20 @@ exports[`renders the CheckIcon with prop variant=success 1`] = `
 <ForwardRef(CheckIcon)
   variant="success"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--success govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    variant="success"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--success govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -224,16 +275,20 @@ exports[`renders the CheckIcon with prop variant=warning 1`] = `
 <ForwardRef(CheckIcon)
   variant="warning"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--warning govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    variant="warning"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--warning govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
 
@@ -242,15 +297,20 @@ exports[`renders the CheckIcon with prop variant=warning and size=s 1`] = `
   size="s"
   variant="warning"
 >
-  <svg
-    aria-hidden="true"
-    className="govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon--check govgr-svg-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <ForwardRef(SvgIcon)
+    size="s"
+    variant="warning"
   >
-    <polygon
-      points="9.63 18.697 2.339 11.478 4.661 9.133 9.631 14.055 19.34 4.451 21.66 6.796 9.63 18.697"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;

package/es/CheckIcon/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 = ["size", "variant", "className"];
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import SvgIcon from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
 
 var _ref2 = /*#__PURE__*/React.createElement("polygon", {
@@ -13,33 +13,16 @@ var _ref2 = /*#__PURE__*/React.createElement("polygon", {
  * Use CheckIcon component when you need a check icon.
  */
 export var CheckIcon = /*#__PURE__*/React.forwardRef(function CheckIcon(_ref, ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'dark' : _ref$variant,
+  var size = _ref.size,
+      variant = _ref.variant,
       className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(size),
-      _useState2 = _slicedToArray(_useState, 2),
-      checkSize = _useState2[0],
-      setSize = _useState2[1];
-
-  var _useState3 = useState(variant),
-      _useState4 = _slicedToArray(_useState3, 2),
-      checkVariant = _useState4[0],
-      setVariant = _useState4[1];
-
-  useEffect(function () {
-    setSize(size);
-    setVariant(variant);
-  }, [size, variant]);
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    ref: ref,
-    className: clsx(checkVariant === 'success' && 'govgr-svg-icon--success', checkVariant === 'primary' && 'govgr-svg-icon--primary', checkVariant === 'warning' && 'govgr-svg-icon--warning', checkVariant === 'light' && 'govgr-svg-icon--light', checkVariant === 'error' && 'govgr-svg-icon--error', checkVariant === 'focus' && 'govgr-svg-icon--focus', checkVariant === 'dark' && 'govgr-svg-icon--dark', checkVariant === 'gray' && 'govgr-svg-icon--gray', checkVariant === 'link' && 'govgr-svg-icon--link', checkSize === 'xl' && 'govgr-svg-icon--xl', checkSize === 's' && 'govgr-svg-icon--s', checkSize === 'm' && 'govgr-svg-icon--m', checkSize === 'l' && 'govgr-svg-icon--l', className && className, true && ['govgr-svg-icon--check', 'govgr-svg-icon']),
-    focusable: "false",
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true"
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    size: size,
+    variant: variant,
+    className: clsx(className && className, true && 'govgr-svg-icon--check'),
+    ref: ref
   }, props), _ref2);
 });
 export default CheckIcon;

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

@@ -2,15 +2,19 @@
 
 exports[`renders the CloseIcon with no props 1`] = `
 <ForwardRef(CloseIcon)>
-  <svg
-    aria-hidden="true"
+  <ForwardRef(SvgIcon)
     className="govgr-close-icon"
-    focusable="false"
-    viewBox="0 0 24 24"
   >
-    <polygon
-      points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-close-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
+      />
+    </svg>
+  </ForwardRef(SvgIcon)>
 </ForwardRef(CloseIcon)>
 `;

package/es/CloseIcon/index.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className"];
+var _excluded = ["size", "variant", "className"];
 import React from 'react';
+import SvgIcon from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
 
 var _ref2 = /*#__PURE__*/React.createElement("polygon", {
@@ -13,15 +14,16 @@ var _ref2 = /*#__PURE__*/React.createElement("polygon", {
  * CloseIcon component can be used for dismissing contents
  */
 export var CloseIcon = /*#__PURE__*/React.forwardRef(function CloseIcon(_ref, ref) {
-  var className = _ref.className,
+  var size = _ref.size,
+      variant = _ref.variant,
+      className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    ref: ref,
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    size: size,
+    variant: variant,
     className: clsx(className && className, true && 'govgr-close-icon'),
-    focusable: "false",
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true"
+    ref: ref
   }, props), _ref2);
 });
 export default CloseIcon;