Update Section tests

dnbexperience · Aug 23, 2023 · 260b043 · 260b043
1 parent d5137ac
commit 260b043
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/packages/dnb-eufemia/src/components/section/Section.tsx b/packages/dnb-eufemia/src/components/section/Section.tsx
@@ -104,7 +104,7 @@ export default function Section(localProps: SectionAllProps) {
   const params = {
     className: classnames(
       'dnb-section',
-      `dnb-section--${variant ?? (style_type  || 'default')}`,
+      `dnb-section--${variant ?? (style_type || 'default')}`,
       spacing &&
         `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,
       createSpacingClasses(props),

diff --git a/packages/dnb-eufemia/src/components/section/__tests__/Section.test.tsx b/packages/dnb-eufemia/src/components/section/__tests__/Section.test.tsx
@@ -35,7 +35,7 @@ describe('Section component', () => {
 
     expect(Array.from(element.classList)).toEqual([
       'dnb-section',
-      'dnb-section--mint-green-12',
+      'dnb-section--default',
       'dnb-space__top--medium',
     ])
   })

diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap
@@ -97,10 +97,10 @@ exports[`Section scss have to match default theme snapshot 1`] = `
 .dnb-section--transparent::after {
   color: transparent;
 }
-.dnb-section--mint-green-12 {
+.dnb-section--mint-green-12, .dnb-section--default {
   color: var(--color-black-80);
 }
-.dnb-section--mint-green-12::after {
+.dnb-section--mint-green-12::after, .dnb-section--default::after {
   color: var(--color-mint-green-12);
 }
 .dnb-section--white {
@@ -121,16 +121,16 @@ exports[`Section scss have to match default theme snapshot 1`] = `
 .dnb-section--lavender::after {
   color: var(--color-lavender);
 }
-.dnb-section--sand-yellow {
+.dnb-section--sand-yellow, .dnb-section--warning {
   color: var(--color-black-80);
 }
-.dnb-section--sand-yellow::after {
+.dnb-section--sand-yellow::after, .dnb-section--warning::after {
   color: var(--color-sand-yellow);
 }
-.dnb-section--pistachio {
+.dnb-section--pistachio, .dnb-section--info {
   color: var(--color-black-80);
 }
-.dnb-section--pistachio::after {
+.dnb-section--pistachio::after, .dnb-section--info::after {
   color: var(--color-pistachio);
 }
 .dnb-section--black-3 {
@@ -157,25 +157,31 @@ exports[`Section scss have to match default theme snapshot 1`] = `
 .dnb-section--fire-red::after {
   color: var(--color-fire-red);
 }
-.dnb-section--fire-red-8 {
+.dnb-section--fire-red-8, .dnb-section--error {
   color: var(--color-black-80);
 }
-.dnb-section--fire-red-8::after {
+.dnb-section--fire-red-8::after, .dnb-section--error::after {
   color: var(--color-fire-red-8);
 }
-.dnb-section--fire-red .dnb-anchor, .dnb-section--emerald-green .dnb-anchor, .dnb-section--sea-green .dnb-anchor {
+.dnb-section--success {
   color: var(--color-white);
 }
-.dnb-section--fire-red .dnb-anchor:hover, .dnb-section--emerald-green .dnb-anchor:hover, .dnb-section--sea-green .dnb-anchor:hover {
+.dnb-section--success::after {
+  color: var(--color-success-green);
+}
+.dnb-section--fire-red .dnb-anchor, .dnb-section--emerald-green .dnb-anchor, .dnb-section--sea-green .dnb-anchor, .dnb-section--success .dnb-anchor {
+  color: var(--color-white);
+}
+.dnb-section--fire-red .dnb-anchor:hover, .dnb-section--emerald-green .dnb-anchor:hover, .dnb-section--sea-green .dnb-anchor:hover, .dnb-section--success .dnb-anchor:hover {
   color: var(--color-emerald-green);
   box-shadow: inset 100vw 100vw 0 0 var(--color-white), -0.125em 0 0 0 var(--color-white), 0.125em 0 0 0 var(--color-white);
 }
-.dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:active {
+.dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:active, .dnb-section--success .dnb-anchor:active {
   color: var(--color-white);
   background-color: transparent;
   box-shadow: inset 100vw 100vw 0 0 transparent, -0.125em 0 0 0 transparent, 0.125em 0 0 0 transparent;
 }
-.dnb-section--fire-red .dnb-anchor:focus-visible, .dnb-section--emerald-green .dnb-anchor:focus-visible, .dnb-section--sea-green .dnb-anchor:focus-visible {
+.dnb-section--fire-red .dnb-anchor:focus-visible, .dnb-section--emerald-green .dnb-anchor:focus-visible, .dnb-section--sea-green .dnb-anchor:focus-visible, .dnb-section--success .dnb-anchor:focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;