@digigov/react-core 2.0.0-f2d82d25 → 2.0.0-rc.0

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

@@ -19,6 +19,29 @@ exports[`renders the SvgIcon with no props 1`] = `
 </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"
@@ -135,20 +158,20 @@ exports[`renders the SvgIcon with prop color=gray 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=light 1`] = `
+exports[`renders the SvgIcon with prop color=primary 1`] = `
 <ForwardRef(SvgIcon)
-  color="light"
+  color="primary"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--light ds-svg-icon"
+    className="ds-svg-icon--primary ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--light ds-svg-icon"
+      className="ds-svg-icon--primary ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -158,20 +181,20 @@ exports[`renders the SvgIcon with prop color=light 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=primary 1`] = `
+exports[`renders the SvgIcon with prop color=success 1`] = `
 <ForwardRef(SvgIcon)
-  color="primary"
+  color="success"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--primary ds-svg-icon"
+    className="ds-svg-icon--success ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--primary ds-svg-icon"
+      className="ds-svg-icon--success ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -181,20 +204,20 @@ exports[`renders the SvgIcon with prop color=primary 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=success 1`] = `
+exports[`renders the SvgIcon with prop color=warning 1`] = `
 <ForwardRef(SvgIcon)
-  color="success"
+  color="warning"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--success ds-svg-icon"
+    className="ds-svg-icon--warning ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--success ds-svg-icon"
+      className="ds-svg-icon--warning ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -204,20 +227,21 @@ exports[`renders the SvgIcon with prop color=success 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=warning 1`] = `
+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"
+    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"
+      className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -227,21 +251,20 @@ exports[`renders the SvgIcon with prop color=warning 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=warning and size=sm 1`] = `
+exports[`renders the SvgIcon with prop color=white 1`] = `
 <ForwardRef(SvgIcon)
-  color="warning"
-  size="sm"
+  color="white"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+    className="ds-svg-icon--white 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"
+      className="ds-svg-icon--white ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >

package/SvgIcon/index.d.ts

@@ -15,18 +15,19 @@ export interface SvgIconProps extends BaseProps<'svg'> {
     /**
      * color property styles svg icon with Gov.gr palette's basic colors.
      * color property is optional.
-     * @value 'dark'
-     * @value 'light'
+     * @value 'base-content'
+     * @value 'dark', always dark, among all themes
+     * @value 'white', always white, among all themes
      * @value 'gray'
      * @value 'primary'
      * @value 'success'
      * @value 'warning'
      * @value 'error'
-     * @value 'focus'
+     * @value 'focus', use only in focus state, in dark background
      * @value 'info'
      * @value 'link'
      */
-    color?: 'dark' | 'light' | 'gray' | 'primary' | 'success' | 'warning' | 'error' | 'focus' | 'info' | 'link';
+    color?: 'base-content' | 'dark' | 'white' | 'gray' | 'primary' | 'success' | 'warning' | 'error' | 'focus' | 'info' | 'link';
 }
 /**
  * Use SvgIcon as global svg component.

package/SvgIcon/index.test/index.js

@@ -36,64 +36,70 @@ it('renders the SvgIcon with prop size=xl', function () {
   expect(mount(_ref6)).toMatchSnapshot();
 });
 var _ref7 = /*#__PURE__*/React.createElement(SvgIcon, {
-  color: "dark"
+  color: "base-content"
 }, "hello");
-it('renders the SvgIcon with prop color=dark', function () {
+it('renders the SvgIcon with prop color=base-content', function () {
   expect(mount(_ref7)).toMatchSnapshot();
 });
 var _ref8 = /*#__PURE__*/React.createElement(SvgIcon, {
-  color: "light"
+  color: "dark"
 }, "hello");
-it('renders the SvgIcon with prop color=light', function () {
+it('renders the SvgIcon with prop color=dark', function () {
   expect(mount(_ref8)).toMatchSnapshot();
 });
 var _ref9 = /*#__PURE__*/React.createElement(SvgIcon, {
-  color: "gray"
+  color: "white"
 }, "hello");
-it('renders the SvgIcon with prop color=gray', function () {
+it('renders the SvgIcon with prop color=white', function () {
   expect(mount(_ref9)).toMatchSnapshot();
 });
 var _ref10 = /*#__PURE__*/React.createElement(SvgIcon, {
-  color: "primary"
+  color: "gray"
 }, "hello");
-it('renders the SvgIcon with prop color=primary', function () {
+it('renders the SvgIcon with prop color=gray', function () {
   expect(mount(_ref10)).toMatchSnapshot();
 });
 var _ref11 = /*#__PURE__*/React.createElement(SvgIcon, {
-  color: "success"
+  color: "primary"
 }, "hello");
-it('renders the SvgIcon with prop color=success', function () {
+it('renders the SvgIcon with prop color=primary', function () {
   expect(mount(_ref11)).toMatchSnapshot();
 });
 var _ref12 = /*#__PURE__*/React.createElement(SvgIcon, {
-  color: "warning"
+  color: "success"
 }, "hello");
-it('renders the SvgIcon with prop color=warning', function () {
+it('renders the SvgIcon with prop color=success', function () {
   expect(mount(_ref12)).toMatchSnapshot();
 });
 var _ref13 = /*#__PURE__*/React.createElement(SvgIcon, {
-  color: "error"
+  color: "warning"
 }, "hello");
-it('renders the SvgIcon with prop color=error', function () {
+it('renders the SvgIcon with prop color=warning', function () {
   expect(mount(_ref13)).toMatchSnapshot();
 });
 var _ref14 = /*#__PURE__*/React.createElement(SvgIcon, {
-  color: "focus"
+  color: "error"
 }, "hello");
-it('renders the SvgIcon with prop color=focus', function () {
+it('renders the SvgIcon with prop color=error', function () {
   expect(mount(_ref14)).toMatchSnapshot();
 });
 var _ref15 = /*#__PURE__*/React.createElement(SvgIcon, {
+  color: "focus"
+}, "hello");
+it('renders the SvgIcon with prop color=focus', function () {
+  expect(mount(_ref15)).toMatchSnapshot();
+});
+var _ref16 = /*#__PURE__*/React.createElement(SvgIcon, {
   color: "warning",
   size: "sm"
 }, "hello");
 it('renders the SvgIcon with prop color=warning and size=sm', function () {
-  expect(mount(_ref15)).toMatchSnapshot();
+  expect(mount(_ref16)).toMatchSnapshot();
 });
-var _ref16 = /*#__PURE__*/React.createElement(SvgIcon, {
+var _ref17 = /*#__PURE__*/React.createElement(SvgIcon, {
   color: "warning",
   size: "xl"
 }, "hello");
 it('renders the SvgIcon with prop color=error and size= xl', function () {
-  expect(mount(_ref16)).toMatchSnapshot();
+  expect(mount(_ref17)).toMatchSnapshot();
 });

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

@@ -19,6 +19,29 @@ exports[`renders the SvgIcon with no props 1`] = `
 </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"
@@ -135,20 +158,20 @@ exports[`renders the SvgIcon with prop color=gray 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=light 1`] = `
+exports[`renders the SvgIcon with prop color=primary 1`] = `
 <ForwardRef(SvgIcon)
-  color="light"
+  color="primary"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--light ds-svg-icon"
+    className="ds-svg-icon--primary ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--light ds-svg-icon"
+      className="ds-svg-icon--primary ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -158,20 +181,20 @@ exports[`renders the SvgIcon with prop color=light 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=primary 1`] = `
+exports[`renders the SvgIcon with prop color=success 1`] = `
 <ForwardRef(SvgIcon)
-  color="primary"
+  color="success"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--primary ds-svg-icon"
+    className="ds-svg-icon--success ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--primary ds-svg-icon"
+      className="ds-svg-icon--success ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -181,20 +204,20 @@ exports[`renders the SvgIcon with prop color=primary 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=success 1`] = `
+exports[`renders the SvgIcon with prop color=warning 1`] = `
 <ForwardRef(SvgIcon)
-  color="success"
+  color="warning"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--success ds-svg-icon"
+    className="ds-svg-icon--warning ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--success ds-svg-icon"
+      className="ds-svg-icon--warning ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -204,20 +227,21 @@ exports[`renders the SvgIcon with prop color=success 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=warning 1`] = `
+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"
+    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"
+      className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -227,21 +251,20 @@ exports[`renders the SvgIcon with prop color=warning 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=warning and size=sm 1`] = `
+exports[`renders the SvgIcon with prop color=white 1`] = `
 <ForwardRef(SvgIcon)
-  color="warning"
-  size="sm"
+  color="white"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+    className="ds-svg-icon--white 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"
+      className="ds-svg-icon--white ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >

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

@@ -39,64 +39,70 @@ it('renders the SvgIcon with prop size=xl', function () {
   expect((0, _enzyme.mount)(_ref6)).toMatchSnapshot();
 });
 var _ref7 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
-  color: "dark"
+  color: "base-content"
 }, "hello");
-it('renders the SvgIcon with prop color=dark', function () {
+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: "light"
+  color: "dark"
 }, "hello");
-it('renders the SvgIcon with prop color=light', function () {
+it('renders the SvgIcon with prop color=dark', function () {
   expect((0, _enzyme.mount)(_ref8)).toMatchSnapshot();
 });
 var _ref9 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
-  color: "gray"
+  color: "white"
 }, "hello");
-it('renders the SvgIcon with prop color=gray', function () {
+it('renders the SvgIcon with prop color=white', function () {
   expect((0, _enzyme.mount)(_ref9)).toMatchSnapshot();
 });
 var _ref10 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
-  color: "primary"
+  color: "gray"
 }, "hello");
-it('renders the SvgIcon with prop color=primary', function () {
+it('renders the SvgIcon with prop color=gray', function () {
   expect((0, _enzyme.mount)(_ref10)).toMatchSnapshot();
 });
 var _ref11 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
-  color: "success"
+  color: "primary"
 }, "hello");
-it('renders the SvgIcon with prop color=success', function () {
+it('renders the SvgIcon with prop color=primary', function () {
   expect((0, _enzyme.mount)(_ref11)).toMatchSnapshot();
 });
 var _ref12 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
-  color: "warning"
+  color: "success"
 }, "hello");
-it('renders the SvgIcon with prop color=warning', function () {
+it('renders the SvgIcon with prop color=success', function () {
   expect((0, _enzyme.mount)(_ref12)).toMatchSnapshot();
 });
 var _ref13 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
-  color: "error"
+  color: "warning"
 }, "hello");
-it('renders the SvgIcon with prop color=error', function () {
+it('renders the SvgIcon with prop color=warning', function () {
   expect((0, _enzyme.mount)(_ref13)).toMatchSnapshot();
 });
 var _ref14 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
-  color: "focus"
+  color: "error"
 }, "hello");
-it('renders the SvgIcon with prop color=focus', function () {
+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)(_ref15)).toMatchSnapshot();
+  expect((0, _enzyme.mount)(_ref16)).toMatchSnapshot();
 });
-var _ref16 = /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], {
+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)(_ref16)).toMatchSnapshot();
+  expect((0, _enzyme.mount)(_ref17)).toMatchSnapshot();
 });