@digigov/react-core 2.0.0-b3ec0588 → 2.0.0-cbc56209

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

@@ -342,14 +342,14 @@ exports[`renders the Paragraph with size=lead 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body"
+        className="ds-body--lg ds-body"
       >
         <p
-          className="ds-body-lg ds-body"
+          className="ds-body--lg ds-body"
         >
           hello
         </p>
@@ -371,15 +371,15 @@ exports[`renders the Paragraph with size=lead and fontSize=14 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={14}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-14"
+        className="ds-body--lg ds-body ds-!-font-size-14"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-14"
+          className="ds-body--lg ds-body ds-!-font-size-14"
         >
           hello
         </p>
@@ -401,15 +401,15 @@ exports[`renders the Paragraph with size=lead and fontSize=16 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={16}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-16"
+        className="ds-body--lg ds-body ds-!-font-size-16"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-16"
+          className="ds-body--lg ds-body ds-!-font-size-16"
         >
           hello
         </p>
@@ -431,15 +431,15 @@ exports[`renders the Paragraph with size=lead and fontSize=19 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={19}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-19"
+        className="ds-body--lg ds-body ds-!-font-size-19"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-19"
+          className="ds-body--lg ds-body ds-!-font-size-19"
         >
           hello
         </p>
@@ -461,15 +461,15 @@ exports[`renders the Paragraph with size=lead and fontSize=24 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={14}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-14"
+        className="ds-body--lg ds-body ds-!-font-size-14"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-14"
+          className="ds-body--lg ds-body ds-!-font-size-14"
         >
           hello
         </p>
@@ -491,15 +491,15 @@ exports[`renders the Paragraph with size=lead and fontSize=30 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={30}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-30"
+        className="ds-body--lg ds-body ds-!-font-size-30"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-30"
+          className="ds-body--lg ds-body ds-!-font-size-30"
         >
           hello
         </p>
@@ -521,15 +521,15 @@ exports[`renders the Paragraph with size=lead and fontSize=36 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={36}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-36"
+        className="ds-body--lg ds-body ds-!-font-size-36"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-36"
+          className="ds-body--lg ds-body ds-!-font-size-36"
         >
           hello
         </p>
@@ -551,15 +551,15 @@ exports[`renders the Paragraph with size=lead and fontSize=48 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={48}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-48"
+        className="ds-body--lg ds-body ds-!-font-size-48"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-48"
+          className="ds-body--lg ds-body ds-!-font-size-48"
         >
           hello
         </p>
@@ -581,15 +581,15 @@ exports[`renders the Paragraph with size=lead and fontSize=72 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={72}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-72"
+        className="ds-body--lg ds-body ds-!-font-size-72"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-72"
+          className="ds-body--lg ds-body ds-!-font-size-72"
         >
           hello
         </p>
@@ -942,14 +942,14 @@ exports[`renders the Paragraph with size=small 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body"
+        className="ds-body--sm ds-body"
       >
         <p
-          className="ds-body-sm ds-body"
+          className="ds-body--sm ds-body"
         >
           hello
         </p>
@@ -971,15 +971,15 @@ exports[`renders the Paragraph with size=small and fontSize=14 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={14}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-14"
+        className="ds-body--sm ds-body ds-!-font-size-14"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-14"
+          className="ds-body--sm ds-body ds-!-font-size-14"
         >
           hello
         </p>
@@ -1001,15 +1001,15 @@ exports[`renders the Paragraph with size=small and fontSize=16 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={16}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-16"
+        className="ds-body--sm ds-body ds-!-font-size-16"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-16"
+          className="ds-body--sm ds-body ds-!-font-size-16"
         >
           hello
         </p>
@@ -1031,15 +1031,15 @@ exports[`renders the Paragraph with size=small and fontSize=19 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={19}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-19"
+        className="ds-body--sm ds-body ds-!-font-size-19"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-19"
+          className="ds-body--sm ds-body ds-!-font-size-19"
         >
           hello
         </p>
@@ -1061,15 +1061,15 @@ exports[`renders the Paragraph with size=small and fontSize=24 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={14}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-14"
+        className="ds-body--sm ds-body ds-!-font-size-14"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-14"
+          className="ds-body--sm ds-body ds-!-font-size-14"
         >
           hello
         </p>
@@ -1091,15 +1091,15 @@ exports[`renders the Paragraph with size=small and fontSize=30 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={30}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-30"
+        className="ds-body--sm ds-body ds-!-font-size-30"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-30"
+          className="ds-body--sm ds-body ds-!-font-size-30"
         >
           hello
         </p>
@@ -1121,15 +1121,15 @@ exports[`renders the Paragraph with size=small and fontSize=36 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={36}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-36"
+        className="ds-body--sm ds-body ds-!-font-size-36"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-36"
+          className="ds-body--sm ds-body ds-!-font-size-36"
         >
           hello
         </p>
@@ -1151,15 +1151,15 @@ exports[`renders the Paragraph with size=small and fontSize=48 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={48}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-48"
+        className="ds-body--sm ds-body ds-!-font-size-48"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-48"
+          className="ds-body--sm ds-body ds-!-font-size-48"
         >
           hello
         </p>
@@ -1181,15 +1181,15 @@ exports[`renders the Paragraph with size=small and fontSize=72 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={72}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-72"
+        className="ds-body--sm ds-body ds-!-font-size-72"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-72"
+          className="ds-body--sm ds-body ds-!-font-size-72"
         >
           hello
         </p>

package/src/PhaseBannerHeaderContainer/__snapshots__/inde.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the PhaseBannerHeaderContainer with no props 1`] = `
 <ForwardRef(PhaseBannerHeaderContainer)>
   <ForwardRef(Base)
     as="div"
-    className="ds-phase-banner__header"
+    className="ds-phase-banner-header"
   >
     <div
-      className="ds-phase-banner__header"
+      className="ds-phase-banner-header"
     >
       hello
     </div>

package/src/PhaseBannerHeaderContainer/index.tsx

@@ -14,7 +14,7 @@ export const PhaseBannerHeaderContainer = React.forwardRef<
       ref={ref}
       {...props}
       className={clsx({
-        'ds-phase-banner__header': true,
+        'ds-phase-banner-header': true,
       })}
     >
       {children}

package/src/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/src/SvgIcon/index.test.tsx

@@ -21,11 +21,14 @@ 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 color=base-content', () => {
+  expect(mount(<SvgIcon color="base-content">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 color=light', () => {
-  expect(mount(<SvgIcon color="light">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 color=gray', () => {
   expect(mount(<SvgIcon color="gray">hello</SvgIcon>)).toMatchSnapshot();

package/src/SvgIcon/index.tsx

@@ -18,20 +18,22 @@ 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?:
+    | 'base-content'
     | 'dark'
-    | 'light'
+    | 'white'
     | 'gray'
     | 'primary'
     | 'success'

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

@@ -11,7 +11,7 @@ exports[`renders the TabsHeading with no props 1`] = `
       xsUpHidden={false}
     >
       <div
-        className="ds-hidden-md--up"
+        className="ds-hidden-md-up"
       >
         <ForwardRef(Heading)
           size="sm"
@@ -51,7 +51,7 @@ exports[`renders the TabsHeading with size=m 1`] = `
       xsUpHidden={false}
     >
       <div
-        className="ds-hidden-md--up"
+        className="ds-hidden-md-up"
       >
         <ForwardRef(Heading)
           size="md"
@@ -91,7 +91,7 @@ exports[`renders the TabsHeading with size=s 1`] = `
       xsUpHidden={false}
     >
       <div
-        className="ds-hidden-md--up"
+        className="ds-hidden-md-up"
       >
         <ForwardRef(Heading)
           size="sm"