@digigov/react-core 0.5.2 → 0.6.0

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

@@ -1,59 +1,175 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the BurgerIcon with active=false 1`] = `
+exports[`renders the BurgerIcon prop variant= "light" 1`] = `
 <ForwardRef(BurgerIcon)
-  active={false}
+  variant="light"
 >
-  <div
-    className="govgr-burger-menu govgr-burger-menu--white-bg"
+  <svg
+    aria-hidden="true"
+    className="govgr-svg-icon--light govgr-burger-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
   >
-    <div
-      className="govgr-burger-menu__line1"
+    <rect
+      height="3.3"
+      id="govgr-burger-icon__line-1"
+      width="20"
     />
-    <div
-      className="govgr-burger-menu__line2"
+    <rect
+      height="3.3"
+      id="govgr-burger-icon__line-2"
+      width="20"
     />
-    <div
-      className="govgr-burger-menu__line3"
+    <rect
+      height="3.3"
+      id="govgr-burger-icon__line-3"
+      width="20"
     />
-  </div>
+  </svg>
 </ForwardRef(BurgerIcon)>
 `;
 
-exports[`renders the BurgerIcon with active=true 1`] = `
+exports[`renders the BurgerIcon props active hidden="md" variant= "light" 1`] = `
 <ForwardRef(BurgerIcon)
   active={true}
+  variant="light"
 >
-  <div
-    className="govgr-burger-menu--active govgr-burger-menu govgr-burger-menu--white-bg"
+  <svg
+    aria-hidden="true"
+    className="govgr-svg-icon--light govgr-burger-icon--active govgr-burger-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
   >
-    <div
-      className="govgr-burger-menu__line1"
+    <rect
+      height="3.3"
+      id="govgr-burger-icon__line-1"
+      width="20"
     />
-    <div
-      className="govgr-burger-menu__line2"
+    <rect
+      height="3.3"
+      id="govgr-burger-icon__line-2"
+      width="20"
     />
-    <div
-      className="govgr-burger-menu__line3"
+    <rect
+      height="3.3"
+      id="govgr-burger-icon__line-3"
+      width="20"
     />
-  </div>
+  </svg>
 </ForwardRef(BurgerIcon)>
 `;
 
 exports[`renders the BurgerIcon with no props 1`] = `
 <ForwardRef(BurgerIcon)>
-  <div
-    className="govgr-burger-menu govgr-burger-menu--white-bg"
+  <svg
+    aria-hidden="true"
+    className="govgr-burger-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
   >
-    <div
-      className="govgr-burger-menu__line1"
+    <rect
+      height="3.3"
+      id="govgr-burger-icon__line-1"
+      width="20"
     />
-    <div
-      className="govgr-burger-menu__line2"
+    <rect
+      height="3.3"
+      id="govgr-burger-icon__line-2"
+      width="20"
     />
-    <div
-      className="govgr-burger-menu__line3"
+    <rect
+      height="3.3"
+      id="govgr-burger-icon__line-3"
+      width="20"
     />
-  </div>
+  </svg>
+</ForwardRef(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon with prop active=true 1`] = `
+<ForwardRef(BurgerIcon)
+  active={true}
+>
+  <svg
+    aria-hidden="true"
+    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>
+</ForwardRef(BurgerIcon)>
+`;
+
+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"
+  >
+    <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(BurgerIcon)>
+`;
+
+exports[`renders the BurgerIcon with props active hidden=md and variant="dark" 1`] = `
+<ForwardRef(BurgerIcon)
+  active={true}
+  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"
+  >
+    <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(BurgerIcon)>
 `;

package/esm/BurgerIcon/index.js

@@ -1,9 +1,28 @@
 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"];
-import React from 'react';
+var _excluded = ["active", "className", "variant"];
+import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 
+var _ref2 = /*#__PURE__*/React.createElement("rect", {
+  id: "govgr-burger-icon__line-1",
+  width: "20",
+  height: "3.3"
+});
+
+var _ref3 = /*#__PURE__*/React.createElement("rect", {
+  id: "govgr-burger-icon__line-2",
+  width: "20",
+  height: "3.3"
+});
+
+var _ref4 = /*#__PURE__*/React.createElement("rect", {
+  id: "govgr-burger-icon__line-3",
+  width: "20",
+  height: "3.3"
+});
+
 /**
  * BurgerIcon is used inside the Header component.
  * It should be linked with the NavHorizontal component. It is hidden when the NavHorizontal is visible and vice versa.
@@ -11,17 +30,29 @@ import clsx from 'clsx';
 export var BurgerIcon = /*#__PURE__*/React.forwardRef(function BurgerIcon(_ref, ref) {
   var active = _ref.active,
       className = _ref.className,
+      variant = _ref.variant,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", _extends({
+  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(className, active === true && 'govgr-burger-menu--active', true && ['govgr-burger-menu', 'govgr-burger-menu--white-bg'])
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: clsx(true && 'govgr-burger-menu__line1')
-  }), /*#__PURE__*/React.createElement("div", {
-    className: clsx(true && 'govgr-burger-menu__line2')
-  }), /*#__PURE__*/React.createElement("div", {
-    className: clsx(true && 'govgr-burger-menu__line3')
-  }));
+    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"
+  }, props), _ref2, _ref3, _ref4);
 });
 export default BurgerIcon;

package/esm/BurgerIcon/index.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import BurgerIcon from '@digigov/react-core/BurgerIcon';
 
-var _ref = /*#__PURE__*/React.createElement(BurgerIcon, null, "hello");
+var _ref = /*#__PURE__*/React.createElement(BurgerIcon, null);
 
 it('renders the BurgerIcon with no props', function () {
   expect(mount(_ref)).toMatchSnapshot();
@@ -10,16 +10,42 @@ it('renders the BurgerIcon with no props', function () {
 
 var _ref2 = /*#__PURE__*/React.createElement(BurgerIcon, {
   active: true
-}, "hello");
+});
 
-it('renders the BurgerIcon with active=true', function () {
+it('renders the BurgerIcon with prop active=true', function () {
   expect(mount(_ref2)).toMatchSnapshot();
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(BurgerIcon, {
-  active: false
-}, "hello");
+  variant: "dark"
+});
 
-it('renders the BurgerIcon with active=false', function () {
+it('renders the BurgerIcon with prop variant=dark', function () {
   expect(mount(_ref3)).toMatchSnapshot();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(BurgerIcon, {
+  variant: "light"
+});
+
+it('renders the BurgerIcon prop variant= "light"', function () {
+  expect(mount(_ref4)).toMatchSnapshot();
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(BurgerIcon, {
+  active: true,
+  variant: "dark"
+});
+
+it('renders the BurgerIcon with props active hidden=md and variant="dark"', function () {
+  expect(mount(_ref5)).toMatchSnapshot();
+});
+
+var _ref6 = /*#__PURE__*/React.createElement(BurgerIcon, {
+  active: true,
+  variant: "light"
+});
+
+it('renders the BurgerIcon props active hidden="md" variant= "light"', function () {
+  expect(mount(_ref6)).toMatchSnapshot();
 });

package/esm/CallToAction/index.js

@@ -4,15 +4,9 @@ var _excluded = ["className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import ButtonLink from '@digigov/react-core/ButtonLink';
+import ArrowIcon from '@digigov/react-core/ArrowIcon';
 
-var _ref2 = /*#__PURE__*/React.createElement("svg", {
-  className: "govgr-btn-cta__arrow",
-  focusable: "false",
-  viewBox: "0 0 24 24",
-  "aria-hidden": "true"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-}));
+var _ref2 = /*#__PURE__*/React.createElement(ArrowIcon, null);
 
 /**
  * Use this button for the main call to action on your service’s start page.

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

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CaretIcon with direction down prop 1`] = `
+<ForwardRef(CaretIcon)
+  direction="down"
+>
+  <svg
+    aria-hidden="true"
+    className="govgr-caret--down"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M22,6H2l10,12L22,6z"
+    />
+  </svg>
+</ForwardRef(CaretIcon)>
+`;
+
+exports[`renders the CaretIcon with direction right prop 1`] = `
+<ForwardRef(CaretIcon)
+  direction="right"
+>
+  <svg
+    aria-hidden="true"
+    className="govgr-caret--right"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M6,2v20l12-10L6,2z"
+    />
+  </svg>
+</ForwardRef(CaretIcon)>
+`;
+
+exports[`renders the CaretIcon with direction up prop 1`] = `
+<ForwardRef(CaretIcon)
+  direction="up"
+>
+  <svg
+    aria-hidden="true"
+    className="govgr-caret--up"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M2,18h20L12,6L2,18z"
+    />
+  </svg>
+</ForwardRef(CaretIcon)>
+`;
+
+exports[`renders the CaretIcon with no props, direction prop is left by default 1`] = `
+<ForwardRef(CaretIcon)>
+  <svg
+    aria-hidden="true"
+    className="govgr-caret--left"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M18,22V2L6,12L18,22z"
+    />
+  </svg>
+</ForwardRef(CaretIcon)>
+`;

package/esm/CaretIcon/index.js

@@ -0,0 +1,50 @@
+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';
+import clsx from 'clsx';
+
+var _ref2 = /*#__PURE__*/React.createElement("path", {
+  d: "M18,22V2L6,12L18,22z"
+});
+
+var _ref3 = /*#__PURE__*/React.createElement("path", {
+  d: "M6,2v20l12-10L6,2z"
+});
+
+var _ref4 = /*#__PURE__*/React.createElement("path", {
+  d: "M2,18h20L12,6L2,18z"
+});
+
+var _ref5 = /*#__PURE__*/React.createElement("path", {
+  d: "M22,6H2l10,12L22,6z"
+});
+
+/**
+ * CaretIcon component is used to add caret icon.
+ * 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,
+      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);
+});
+export default CaretIcon;

package/esm/CaretIcon/index.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import CaretIcon from '@digigov/react-core/CaretIcon';
+
+var _ref = /*#__PURE__*/React.createElement(CaretIcon, null);
+
+it('renders the CaretIcon with no props, direction prop is left by default', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(CaretIcon, {
+  direction: "right"
+});
+
+it('renders the CaretIcon with direction right prop', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(CaretIcon, {
+  direction: "up"
+});
+
+it('renders the CaretIcon with direction up prop', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(CaretIcon, {
+  direction: "down"
+});
+
+it('renders the CaretIcon with direction down prop', function () {
+  expect(mount(_ref4)).toMatchSnapshot();
+});