@digigov/react-core 1.3.0-dcbd7ded → 2.0.0-4be8f7cc

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

@@ -19,20 +19,20 @@ exports[`renders the SvgIcon with no props 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop size=lg 1`] = `
+exports[`renders the SvgIcon with prop color=base-content 1`] = `
 <ForwardRef(SvgIcon)
-  size="lg"
+  color="base-content"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--lg ds-svg-icon"
+    className="ds-svg-icon--base-content ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--lg ds-svg-icon"
+      className="ds-svg-icon--base-content ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -42,20 +42,20 @@ exports[`renders the SvgIcon with prop size=lg 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop size=md 1`] = `
+exports[`renders the SvgIcon with prop color=dark 1`] = `
 <ForwardRef(SvgIcon)
-  size="md"
+  color="dark"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--md ds-svg-icon"
+    className="ds-svg-icon--dark ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--md ds-svg-icon"
+      className="ds-svg-icon--dark ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -65,20 +65,20 @@ exports[`renders the SvgIcon with prop size=md 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop size=sm 1`] = `
+exports[`renders the SvgIcon with prop color=error 1`] = `
 <ForwardRef(SvgIcon)
-  size="sm"
+  color="error"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--sm ds-svg-icon"
+    className="ds-svg-icon--error ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--sm ds-svg-icon"
+      className="ds-svg-icon--error ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -88,20 +88,21 @@ exports[`renders the SvgIcon with prop size=sm 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop size=xl 1`] = `
+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--xl ds-svg-icon"
+    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--xl ds-svg-icon"
+      className="ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -111,20 +112,20 @@ exports[`renders the SvgIcon with prop size=xl 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop size=xs 1`] = `
+exports[`renders the SvgIcon with prop color=focus 1`] = `
 <ForwardRef(SvgIcon)
-  size="xs"
+  color="focus"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--xs ds-svg-icon"
+    className="ds-svg-icon--focus ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--xs ds-svg-icon"
+      className="ds-svg-icon--focus ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -134,20 +135,20 @@ exports[`renders the SvgIcon with prop size=xs 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop variant=dark 1`] = `
+exports[`renders the SvgIcon with prop color=gray 1`] = `
 <ForwardRef(SvgIcon)
-  variant="dark"
+  color="gray"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--dark ds-svg-icon"
+    className="ds-svg-icon--gray ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--dark ds-svg-icon"
+      className="ds-svg-icon--gray ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -157,20 +158,20 @@ exports[`renders the SvgIcon with prop variant=dark 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop variant=error 1`] = `
+exports[`renders the SvgIcon with prop color=primary 1`] = `
 <ForwardRef(SvgIcon)
-  variant="error"
+  color="primary"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--error 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--error ds-svg-icon"
+      className="ds-svg-icon--primary ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -180,21 +181,20 @@ exports[`renders the SvgIcon with prop variant=error 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop variant=error and size= xl 1`] = `
+exports[`renders the SvgIcon with prop color=success 1`] = `
 <ForwardRef(SvgIcon)
-  size="xl"
-  variant="warning"
+  color="success"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--warning ds-svg-icon--xl 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--warning ds-svg-icon--xl ds-svg-icon"
+      className="ds-svg-icon--success ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -204,20 +204,20 @@ exports[`renders the SvgIcon with prop variant=error and size= xl 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop variant=focus 1`] = `
+exports[`renders the SvgIcon with prop color=warning 1`] = `
 <ForwardRef(SvgIcon)
-  variant="focus"
+  color="warning"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--focus 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--focus ds-svg-icon"
+      className="ds-svg-icon--warning ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -227,20 +227,21 @@ exports[`renders the SvgIcon with prop variant=focus 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop variant=gray 1`] = `
+exports[`renders the SvgIcon with prop color=warning and size=sm 1`] = `
 <ForwardRef(SvgIcon)
-  variant="gray"
+  color="warning"
+  size="sm"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--gray 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--gray ds-svg-icon"
+      className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -250,20 +251,20 @@ exports[`renders the SvgIcon with prop variant=gray 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop variant=light 1`] = `
+exports[`renders the SvgIcon with prop color=white 1`] = `
 <ForwardRef(SvgIcon)
-  variant="light"
+  color="white"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--light 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--light ds-svg-icon"
+      className="ds-svg-icon--white ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -273,20 +274,20 @@ exports[`renders the SvgIcon with prop variant=light 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop variant=primary 1`] = `
+exports[`renders the SvgIcon with prop size=lg 1`] = `
 <ForwardRef(SvgIcon)
-  variant="primary"
+  size="lg"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--primary ds-svg-icon"
+    className="ds-svg-icon--lg 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--lg ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -296,20 +297,20 @@ exports[`renders the SvgIcon with prop variant=primary 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop variant=success 1`] = `
+exports[`renders the SvgIcon with prop size=md 1`] = `
 <ForwardRef(SvgIcon)
-  variant="success"
+  size="md"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--success ds-svg-icon"
+    className="ds-svg-icon--md 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--md ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -319,20 +320,20 @@ exports[`renders the SvgIcon with prop variant=success 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop variant=warning 1`] = `
+exports[`renders the SvgIcon with prop size=sm 1`] = `
 <ForwardRef(SvgIcon)
-  variant="warning"
+  size="sm"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--warning ds-svg-icon"
+    className="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--sm ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -342,21 +343,43 @@ exports[`renders the SvgIcon with prop variant=warning 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop variant=warning and size=sm 1`] = `
+exports[`renders the SvgIcon with prop size=xl 1`] = `
 <ForwardRef(SvgIcon)
-  size="sm"
-  variant="warning"
+  size="xl"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+    className="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--sm ds-svg-icon"
+      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"
     >

package/src/SvgIcon/index.test.tsx

@@ -21,43 +21,46 @@ it('renders the SvgIcon with prop size=lg', () => {
 it('renders the SvgIcon with prop size=xl', () => {
   expect(mount(<SvgIcon size="xl">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop variant=dark', () => {
-  expect(mount(<SvgIcon variant="dark">hello</SvgIcon>)).toMatchSnapshot();
+it('renders the SvgIcon with prop color=base-content', () => {
+  expect(mount(<SvgIcon color="base-content">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop variant=light', () => {
-  expect(mount(<SvgIcon variant="light">hello</SvgIcon>)).toMatchSnapshot();
+it('renders the SvgIcon with prop color=dark', () => {
+  expect(mount(<SvgIcon color="dark">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop variant=gray', () => {
-  expect(mount(<SvgIcon variant="gray">hello</SvgIcon>)).toMatchSnapshot();
+it('renders the SvgIcon with prop color=white', () => {
+  expect(mount(<SvgIcon color="white">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop variant=primary', () => {
-  expect(mount(<SvgIcon variant="primary">hello</SvgIcon>)).toMatchSnapshot();
+it('renders the SvgIcon with prop color=gray', () => {
+  expect(mount(<SvgIcon color="gray">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop variant=success', () => {
-  expect(mount(<SvgIcon variant="success">hello</SvgIcon>)).toMatchSnapshot();
+it('renders the SvgIcon with prop color=primary', () => {
+  expect(mount(<SvgIcon color="primary">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop variant=warning', () => {
-  expect(mount(<SvgIcon variant="warning">hello</SvgIcon>)).toMatchSnapshot();
+it('renders the SvgIcon with prop color=success', () => {
+  expect(mount(<SvgIcon color="success">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop variant=error', () => {
-  expect(mount(<SvgIcon variant="error">hello</SvgIcon>)).toMatchSnapshot();
+it('renders the SvgIcon with prop color=warning', () => {
+  expect(mount(<SvgIcon color="warning">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop variant=focus', () => {
-  expect(mount(<SvgIcon variant="focus">hello</SvgIcon>)).toMatchSnapshot();
+it('renders the SvgIcon with prop color=error', () => {
+  expect(mount(<SvgIcon color="error">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop variant=warning and size=sm', () => {
+it('renders the SvgIcon with prop color=focus', () => {
+  expect(mount(<SvgIcon color="focus">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop color=warning and size=sm', () => {
   expect(
     mount(
-      <SvgIcon variant="warning" size="sm">
+      <SvgIcon color="warning" size="sm">
         hello
       </SvgIcon>
     )
   ).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop variant=error and size= xl', () => {
+it('renders the SvgIcon with prop color=error and size= xl', () => {
   expect(
     mount(
-      <SvgIcon variant="warning" size="xl">
+      <SvgIcon color="warning" size="xl">
         hello
       </SvgIcon>
     )

package/src/SvgIcon/index.tsx

@@ -16,52 +16,47 @@ export interface SvgIconProps extends BaseProps<'svg'> {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
   /**
-   * variant property styles svg icon with Gov.gr palette's basic colors.
-   * variant property is optional.
-   * @value 'dark'
-   * @value 'light'
+   * color property styles svg icon with Gov.gr palette's basic colors.
+   * color property is optional.
+   * @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'
    */
-  variant?:
-  | 'dark'
-  | 'light'
-  | 'gray'
-  | 'primary'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'focus'
-  | 'link';
+  color?:
+    | 'base-content'
+    | 'dark'
+    | 'white'
+    | 'gray'
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'focus'
+    | 'info'
+    | 'link';
 }
 /**
  * Use SvgIcon as global svg component.
- *  SvgIcon can be used inside other svg components as childern such as CheckIcon, CaretIcon etc.
+ *  SvgIcon can be used inside other svg components as children such as CheckIcon, CaretIcon etc.
  */
 export const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(
-  function SvgIcon({ size, variant, children, className, ...props }, ref) {
+  function SvgIcon({ size, color, children, className, ...props }, ref) {
     return (
       <Base
         as="svg"
         ref={ref}
         className={clsx(className, {
-          'ds-svg-icon--dark': variant === 'dark',
-          'ds-svg-icon--light': variant === 'light',
-          'ds-svg-icon--gray': variant === 'gray',
-          'ds-svg-icon--success': variant === 'success',
-          'ds-svg-icon--primary': variant === 'primary',
-          'ds-svg-icon--warning': variant === 'warning',
-          'ds-svg-icon--error': variant === 'error',
-          'ds-svg-icon--focus': variant === 'focus',
-          'ds-svg-icon--link': variant === 'link',
-          [`ds-svg-icon--${size}`]: size !== undefined,
-
           'ds-svg-icon': true,
+          [`ds-svg-icon--${color}`]: color !== undefined,
+          [`ds-svg-icon--${size}`]: size !== undefined,
         })}
         focusable="false"
         viewBox="0 0 24 24"

package/src/TabsHeading/__snapshots__/index.test.tsx.snap

@@ -7,10 +7,11 @@ exports[`renders the TabsHeading with no props 1`] = `
   >
     <ForwardRef(Base)
       as="div"
-      className="ds-hidden-md--up"
+      mdUpHidden={true}
+      xsUpHidden={false}
     >
       <div
-        className="ds-hidden-md--up"
+        className="ds-hidden-md-up"
       >
         <ForwardRef(Heading)
           size="sm"
@@ -46,10 +47,11 @@ exports[`renders the TabsHeading with size=m 1`] = `
   >
     <ForwardRef(Base)
       as="div"
-      className="ds-hidden-md--up"
+      mdUpHidden={true}
+      xsUpHidden={false}
     >
       <div
-        className="ds-hidden-md--up"
+        className="ds-hidden-md-up"
       >
         <ForwardRef(Heading)
           size="md"
@@ -85,10 +87,11 @@ exports[`renders the TabsHeading with size=s 1`] = `
   >
     <ForwardRef(Base)
       as="div"
-      className="ds-hidden-md--up"
+      mdUpHidden={true}
+      xsUpHidden={false}
     >
       <div
-        className="ds-hidden-md--up"
+        className="ds-hidden-md-up"
       >
         <ForwardRef(Heading)
           size="sm"