@digigov/react-icons 1.2.0-a7ffb5dc → 2.0.0-0edebf87

package/cjs/SvgIcon/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,390 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SvgIcon with no props 1`] = `
+<ForwardRef(SvgIcon)>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=base-content 1`] = `
+<ForwardRef(SvgIcon)
+  color="base-content"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--base-content ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--base-content ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=dark 1`] = `
+<ForwardRef(SvgIcon)
+  color="dark"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--dark ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--dark ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=error 1`] = `
+<ForwardRef(SvgIcon)
+  color="error"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--error ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--error ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=error and size= xl 1`] = `
+<ForwardRef(SvgIcon)
+  color="warning"
+  size="xl"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=focus 1`] = `
+<ForwardRef(SvgIcon)
+  color="focus"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--focus ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--focus ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=gray 1`] = `
+<ForwardRef(SvgIcon)
+  color="gray"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--gray ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--gray ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=primary 1`] = `
+<ForwardRef(SvgIcon)
+  color="primary"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--primary ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--primary ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=success 1`] = `
+<ForwardRef(SvgIcon)
+  color="success"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--success ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--success ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=warning 1`] = `
+<ForwardRef(SvgIcon)
+  color="warning"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--warning ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--warning ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=warning and size=sm 1`] = `
+<ForwardRef(SvgIcon)
+  color="warning"
+  size="sm"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop color=white 1`] = `
+<ForwardRef(SvgIcon)
+  color="white"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--white ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--white ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=lg 1`] = `
+<ForwardRef(SvgIcon)
+  size="lg"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--lg ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--lg ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=md 1`] = `
+<ForwardRef(SvgIcon)
+  size="md"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--md ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--md ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=sm 1`] = `
+<ForwardRef(SvgIcon)
+  size="sm"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--sm ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--sm ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=xl 1`] = `
+<ForwardRef(SvgIcon)
+  size="xl"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--xl ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--xl ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=xs 1`] = `
+<ForwardRef(SvgIcon)
+  size="xs"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--xs ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--xs ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;

package/cjs/SvgIcon/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SvgIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Base = _interopRequireDefault(require("@digigov/react-icons/Base"));
+var _excluded = ["size", "color", "children", "className"];
+/**
+ * Use SvgIcon as global svg component.
+ *  SvgIcon can be used inside other svg components as children such as CheckIcon, CaretIcon etc.
+ */
+var SvgIcon = exports.SvgIcon = /*#__PURE__*/_react["default"].forwardRef(function SvgIcon(_ref, ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    children = _ref.children,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
+    as: "svg",
+    ref: ref,
+    className: (0, _clsx["default"])(className, color !== undefined && "ds-svg-icon--".concat(color), size !== undefined && "ds-svg-icon--".concat(size), true && 'ds-svg-icon'),
+    focusable: "false",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true"
+  }, props), children);
+});
+var _default = exports["default"] = SvgIcon;

package/cjs/SvgIcon/index.test/index.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _SvgIcon = _interopRequireDefault(require("@digigov/react-icons/SvgIcon"));
+var _ref = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], null);
+it('renders the SvgIcon with no props', function () {
+  expect((0, _enzyme.mount)(_ref)).toMatchSnapshot();
+});
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  size: "xs"
+}, "hello");
+it('renders the SvgIcon with prop size=xs', function () {
+  expect((0, _enzyme.mount)(_ref2)).toMatchSnapshot();
+});
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  size: "sm"
+}, "hello");
+it('renders the SvgIcon with prop size=sm', function () {
+  expect((0, _enzyme.mount)(_ref3)).toMatchSnapshot();
+});
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  size: "md"
+}, "hello");
+it('renders the SvgIcon with prop size=md', function () {
+  expect((0, _enzyme.mount)(_ref4)).toMatchSnapshot();
+});
+var _ref5 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  size: "lg"
+}, "hello");
+it('renders the SvgIcon with prop size=lg', function () {
+  expect((0, _enzyme.mount)(_ref5)).toMatchSnapshot();
+});
+var _ref6 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  size: "xl"
+}, "hello");
+it('renders the SvgIcon with prop size=xl', function () {
+  expect((0, _enzyme.mount)(_ref6)).toMatchSnapshot();
+});
+var _ref7 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  color: "base-content"
+}, "hello");
+it('renders the SvgIcon with prop color=base-content', function () {
+  expect((0, _enzyme.mount)(_ref7)).toMatchSnapshot();
+});
+var _ref8 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  color: "dark"
+}, "hello");
+it('renders the SvgIcon with prop color=dark', function () {
+  expect((0, _enzyme.mount)(_ref8)).toMatchSnapshot();
+});
+var _ref9 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  color: "white"
+}, "hello");
+it('renders the SvgIcon with prop color=white', function () {
+  expect((0, _enzyme.mount)(_ref9)).toMatchSnapshot();
+});
+var _ref10 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  color: "gray"
+}, "hello");
+it('renders the SvgIcon with prop color=gray', function () {
+  expect((0, _enzyme.mount)(_ref10)).toMatchSnapshot();
+});
+var _ref11 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  color: "primary"
+}, "hello");
+it('renders the SvgIcon with prop color=primary', function () {
+  expect((0, _enzyme.mount)(_ref11)).toMatchSnapshot();
+});
+var _ref12 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  color: "success"
+}, "hello");
+it('renders the SvgIcon with prop color=success', function () {
+  expect((0, _enzyme.mount)(_ref12)).toMatchSnapshot();
+});
+var _ref13 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  color: "warning"
+}, "hello");
+it('renders the SvgIcon with prop color=warning', function () {
+  expect((0, _enzyme.mount)(_ref13)).toMatchSnapshot();
+});
+var _ref14 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  color: "error"
+}, "hello");
+it('renders the SvgIcon with prop color=error', function () {
+  expect((0, _enzyme.mount)(_ref14)).toMatchSnapshot();
+});
+var _ref15 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  color: "focus"
+}, "hello");
+it('renders the SvgIcon with prop color=focus', function () {
+  expect((0, _enzyme.mount)(_ref15)).toMatchSnapshot();
+});
+var _ref16 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  color: "warning",
+  size: "sm"
+}, "hello");
+it('renders the SvgIcon with prop color=warning and size=sm', function () {
+  expect((0, _enzyme.mount)(_ref16)).toMatchSnapshot();
+});
+var _ref17 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+  color: "warning",
+  size: "xl"
+}, "hello");
+it('renders the SvgIcon with prop color=error and size= xl', function () {
+  expect((0, _enzyme.mount)(_ref17)).toMatchSnapshot();
+});