@transferwise/components 46.116.1 → 46.117.0

package/src/sentimentSurface/SentimentSurface.less

@@ -1,9 +1,14 @@
 .wds-sentiment-surface {
-    &-negative {
-        .np-theme-personal &,
-        .np-theme-personal--bright-green & {
-            &-base {
-                .sentiment-surface-tokens(
+  &--hasBaseStyles {
+    background-color: var(--color-sentiment-background-surface);
+    color: var(--color-sentiment-content-primary);
+  }
+
+  &-negative {
+    .np-theme-personal &,
+    .np-theme-personal--bright-green & {
+      &-base {
+        .sentiment-surface-tokens(
                     #CB272F, #B8232B, #A72027,
                     #CB272F, #B8232B, #A72027,
                     #FBEAEA, #F9E1E1, #F8D8D8,
@@ -11,23 +16,23 @@
                     #FBEAEA, #F9E1E1, #F8D8D8,
                     #FBEAEA, #F9E1E1, #F8D8D8
                 );
-            }
-            &-elevated {
-                .sentiment-surface-tokens(
+      }
+      &-elevated {
+        .sentiment-surface-tokens(
                     #FFFFFF, #F5CCCC, #F1B7B7,
                     #FBEAEA, #F5CCCC, #F1B7B7,
                     #CB272F, #B8232B, #A72027,
-                    #9B141B, #831116, #6D0E13,
+                    #9B141B, #831116, #6D0e13,
                     #CB272F, #B8232B, #A72027,
                     #90000D, #B8232B, #A72027
                 );
-            }
-        }
+      }
+    }
 
-        .np-theme-personal--dark &,
-        .np-theme-personal--forest-green & {
-            &-base {
-                .sentiment-surface-tokens(
+    .np-theme-personal--dark &,
+    .np-theme-personal--forest-green & {
+      &-base {
+        .sentiment-surface-tokens(
                     #FFA8AD, #FFBDC0, #FFD1D3,
                     #FFA8AD, #FFBDC0, #FFD1D3,
                     #410B0D, #641115, #761418,
@@ -35,9 +40,9 @@
                     #410B0D, #641115, #761418,
                     #410B0D, #641115, #761418
                 );
-            }
-            &-elevated {
-                .sentiment-surface-tokens(
+      }
+      &-elevated {
+        .sentiment-surface-tokens(
                     #410B0D, #641115, #761418,
                     #410B0D, #641115, #761418,
                     #FFA8AD, #FFBDC0, #FFD1D3,
@@ -45,15 +50,15 @@
                     #FFA8AD, #FFBDC0, #FFD1D3,
                     #FFA8AD, #FFBDC0, #FFD1D3
                 );
-            }
-        }
+      }
     }
+  }
 
-    &-warning {
-        .np-theme-personal &,
-        .np-theme-personal--bright-green & {
-            &-base {
-                .sentiment-surface-tokens(
+  &-warning {
+    .np-theme-personal &,
+    .np-theme-personal--bright-green & {
+      &-base {
+        .sentiment-surface-tokens(
                     #4A3B1C, #302612, #2C2311,  // content-primary (default, hover, active)
                     #FFD11A, #FFBF0F, #FFBB00,  // interactive-primary
                     #FFF7D7, #FFF0B2, #FFE98F,  // interactive-secondary
@@ -61,9 +66,9 @@
                     #4A3B1C, #302612, #2C2311,  // interactive-control
                     #FFF7D7, #FFF0B2, #FFE98F   // background-surface
                 );
-            }
-            &-elevated {
-                .sentiment-surface-tokens(
+      }
+      &-elevated {
+        .sentiment-surface-tokens(
                     #4A3B1C, #302612, #2C2311,  // content-primary
                     #4A3B1C, #302612, #2C2311,  // interactive-primary
                     #FFD11A, #FFBF0F, #FFBB00,  // interactive-secondary
@@ -71,13 +76,13 @@
                     #FFD11A, #FFBF0F, #FFBB00,  // interactive-control
                     #FFD11A, #FFBF0F, #FFBB00   // background-surface
                 );
-            }
-        }
+      }
+    }
 
-        .np-theme-personal--dark &,
-        .np-theme-personal--forest-green & {
-            &-base {
-                .sentiment-surface-tokens(
+    .np-theme-personal--dark &,
+    .np-theme-personal--forest-green & {
+      &-base {
+        .sentiment-surface-tokens(
                     #FADC65, #F9D648, #F8CD20,  // content-primary
                     #FADC65, #F9D648, #F8CD20,  // interactive-primary
                     #3A3523, #504930, #665D3D,  // interactive-secondary
@@ -85,9 +90,9 @@
                     #3A3523, #504930, #665D3D,  // interactive-control
                     #3A3523, #504930, #665D3D   // background-surface
                 );
-            }
-            &-elevated {
-                .sentiment-surface-tokens(
+      }
+      &-elevated {
+        .sentiment-surface-tokens(
                     #3A3523, #504930, #665D3D,  // content-primary
                     #3A3523, #504930, #665D3D,  // interactive-primary
                     #FADC65, #F9D648, #F8CD20,  // interactive-secondary
@@ -95,14 +100,14 @@
                     #FADC65, #F9D648, #F8CD20,  // interactive-control
                     #FADC65, #F9D648, #F8CD20   // background-surface
                 );
-            }
-        }
+      }
     }
-    &-success {
-        .np-theme-personal &,
-        .np-theme-personal--bright-green & {
-            &-base {
-                .sentiment-surface-tokens(
+  }
+  &-success {
+    .np-theme-personal &,
+    .np-theme-personal--bright-green & {
+      &-base {
+        .sentiment-surface-tokens(
                     #054D28, #043A1E, #022614,  // content-primary (default, hover, active)
                     #054D28, #043A1E, #022614,  // interactive-primary
                     #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-secondary
@@ -110,9 +115,9 @@
                     #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-control
                     #E2F6D5, #D3F2C0, #C5EDAB   // background-surface
                 );
-            }
-            &-elevated {
-                .sentiment-surface-tokens(
+      }
+      &-elevated {
+        .sentiment-surface-tokens(
                     #E2F6D5, #D3F2C0, #C5EDAB,  // content-primary
                     #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-primary
                     #054D28, #043A1E, #022614,  // interactive-secondary
@@ -120,13 +125,13 @@
                     #054D28, #043A1E, #022614,  // interactive-control
                     #054D28, #043A1E, #022614   // background-surface
                 );
-            }
-        }
+      }
+    }
 
-        .np-theme-personal--dark &,
-        .np-theme-personal--forest-green & {
-            &-base {
-                .sentiment-surface-tokens(
+    .np-theme-personal--dark &,
+    .np-theme-personal--forest-green & {
+      &-base {
+        .sentiment-surface-tokens(
                     #BAE5A0, #C8EAB3, #D6F0C7,  // content-primary
                     #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-primary
                     #252C20, #323B2B, #3E4A36,  // interactive-secondary
@@ -134,9 +139,9 @@
                     #252C20, #323B2B, #3E4A36,  // interactive-control
                     #252C20, #323B2B, #3E4A36   // background-surface
                 );
-            }
-            &-elevated {
-                .sentiment-surface-tokens(
+      }
+      &-elevated {
+        .sentiment-surface-tokens(
                     #252C20, #323B2B, #3E4A36,  // content-primary
                     #252C20, #323B2B, #3E4A36,  // interactive-primary
                     #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-secondary
@@ -144,14 +149,14 @@
                     #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-control
                     #BAE5A0, #C8EAB3, #D6F0C7   // background-surface
                 );
-            }
-        }
+      }
     }
-    &-neutral {
-        .np-theme-personal &,
-        .np-theme-personal--bright-green & {
-            &-base {
-                .sentiment-surface-tokens(
+  }
+  &-neutral {
+    .np-theme-personal &,
+    .np-theme-personal--bright-green & {
+      &-base {
+        .sentiment-surface-tokens(
                     #454745, #353635, #232423,  // content-primary (default, hover, active)
                     #454745, #353635, #232423,  // interactive-primary
                     #F1F1ED, #E7E7E1, #DFDED5,  // interactive-secondary
@@ -159,9 +164,9 @@
                     #F1F1ED, #E7E7E1, #DFDED5,  // interactive-control
                     #F1F1ED, #E7E7E1, #DFDED5   // background-surface
                 );
-            }
-            &-elevated {
-                .sentiment-surface-tokens(
+      }
+      &-elevated {
+        .sentiment-surface-tokens(
                     #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
                     #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
                     #454745, #353635, #232423,  // interactive-secondary
@@ -169,13 +174,13 @@
                     #454745, #353635, #232423,  // interactive-control
                     #454745, #353635, #232423   // background-surface
                 );
-            }
-        }
+      }
+    }
 
-        .np-theme-personal--dark &,
-        .np-theme-personal--forest-green & {
-            &-base {
-                .sentiment-surface-tokens(
+    .np-theme-personal--dark &,
+    .np-theme-personal--forest-green & {
+      &-base {
+        .sentiment-surface-tokens(
                     #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
                     #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
                     #2A2C29, #414441, #595B58,  // interactive-secondary
@@ -183,9 +188,9 @@
                     #2A2C29, #414441, #595B58,  // interactive-control
                     #2A2C29, #414441, #595B58   // background-surface
                 );
-            }
-            &-elevated {
-                .sentiment-surface-tokens(
+      }
+      &-elevated {
+        .sentiment-surface-tokens(
                     #2A2C29, #414441, #595B58,  // content-primary
                     #2A2C29, #414441, #595B58,  // interactive-primary
                     #F1F1ED, #E7E7E1, #DFDED5,  // interactive-secondary
@@ -193,14 +198,14 @@
                     #F1F1ED, #E7E7E1, #DFDED5,  // interactive-control
                     #F1F1ED, #E7E7E1, #DFDED5   // background-surface
                 );
-            }
-        }
+      }
     }
-    &-proposition {
-        .np-theme-personal &,
-        .np-theme-personal--bright-green & {
-            &-base {
-                .sentiment-surface-tokens(
+  }
+  &-proposition {
+    .np-theme-personal &,
+    .np-theme-personal--bright-green & {
+      &-base {
+        .sentiment-surface-tokens(
                     #0E0F0C, #0A2826, #074140,  // content-primary (default, hover, active)
                     #054D4D, #043A3A, #022626,  // interactive-primary
                     #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-secondary
@@ -208,9 +213,9 @@
                     #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-control
                     #E0F7F7, #CAF1F1, #B6ECEC   // background-surface
                 );
-            }
-            &-elevated {
-                .sentiment-surface-tokens(
+      }
+      &-elevated {
+        .sentiment-surface-tokens(
                     #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary
                     #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-primary
                     #054D4D, #043A3A, #022626,  // interactive-secondary
@@ -218,13 +223,13 @@
                     #054D4D, #043A3A, #022626,  // interactive-control
                     #054D4D, #043A3A, #022626   // background-surface
                 );
-            }
-        }
+      }
+    }
 
-        .np-theme-personal--dark &,
-        .np-theme-personal--forest-green & {
-            &-base {
-                .sentiment-surface-tokens(
+    .np-theme-personal--dark &,
+    .np-theme-personal--forest-green & {
+      &-base {
+        .sentiment-surface-tokens(
                     #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary
                     #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-primary
                     #0B312F, #124F4C, #176460,  // interactive-secondary
@@ -232,9 +237,9 @@
                     #0B312F, #124F4C, #176460,  // interactive-control
                     #0B312F, #124F4C, #176460   // background-surface
                 );
-            }
-            &-elevated {
-                .sentiment-surface-tokens(
+      }
+      &-elevated {
+        .sentiment-surface-tokens(
                     #0E0F0C, #0A2826, #074140,  // content-primary
                     #0B312F, #104744, #16605C,  // interactive-primary
                     #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-secondary
@@ -242,9 +247,11 @@
                     #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-control
                     #E0F7F7, #CAF1F1, #B6ECEC   // background-surface
                 );
-            }
-        }
+      }
     }
+  }
+
+  --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 
 .sentiment-surface-tokens(
@@ -267,27 +274,27 @@
     @background-surface-hover,
     @background-surface-active
 ) {
-    --color-sentiment-content-primary: @content-primary;
-    --color-sentiment-content-primary-hover: @content-primary-hover;
-    --color-sentiment-content-primary-active: @content-primary-active;
+  --color-sentiment-content-primary: @content-primary;
+  --color-sentiment-content-primary-hover: @content-primary-hover;
+  --color-sentiment-content-primary-active: @content-primary-active;
 
-    --color-sentiment-interactive-primary: @interactive-primary;
-    --color-sentiment-interactive-primary-hover: @interactive-primary-hover;
-    --color-sentiment-interactive-primary-active: @interactive-primary-active;
+  --color-sentiment-interactive-primary: @interactive-primary;
+  --color-sentiment-interactive-primary-hover: @interactive-primary-hover;
+  --color-sentiment-interactive-primary-active: @interactive-primary-active;
 
-    --color-sentiment-interactive-secondary: @interactive-secondary;
-    --color-sentiment-interactive-secondary-hover: @interactive-secondary-hover;
-    --color-sentiment-interactive-secondary-active: @interactive-secondary-active;
+  --color-sentiment-interactive-secondary: @interactive-secondary;
+  --color-sentiment-interactive-secondary-hover: @interactive-secondary-hover;
+  --color-sentiment-interactive-secondary-active: @interactive-secondary-active;
 
-    --color-sentiment-interactive-secondary-neutral: @interactive-secondary-neutral;
-    --color-sentiment-interactive-secondary-neutral-hover: @interactive-secondary-neutral-hover;
-    --color-sentiment-interactive-secondary-neutral-active: @interactive-secondary-neutral-active;
+  --color-sentiment-interactive-secondary-neutral: @interactive-secondary-neutral;
+  --color-sentiment-interactive-secondary-neutral-hover: @interactive-secondary-neutral-hover;
+  --color-sentiment-interactive-secondary-neutral-active: @interactive-secondary-neutral-active;
 
-    --color-sentiment-interactive-control: @interactive-control;
-    --color-sentiment-interactive-control-hover: @interactive-control-hover;
-    --color-sentiment-interactive-control-active: @interactive-control-active;
+  --color-sentiment-interactive-control: @interactive-control;
+  --color-sentiment-interactive-control-hover: @interactive-control-hover;
+  --color-sentiment-interactive-control-active: @interactive-control-active;
 
-    --color-sentiment-background-surface: @background-surface;
-    --color-sentiment-background-surface-hover: @background-surface-hover;
-    --color-sentiment-background-surface-active: @background-surface-active;
+  --color-sentiment-background-surface: @background-surface;
+  --color-sentiment-background-surface-hover: @background-surface-hover;
+  --color-sentiment-background-surface-active: @background-surface-active;
 }

package/src/sentimentSurface/SentimentSurface.spec.tsx

@@ -13,7 +13,7 @@ describe('SentimentSurface', () => {
 
     it('renders as div by default', () => {
       render(
-        <SentimentSurface sentiment="neutral" testId="surface">
+        <SentimentSurface sentiment="neutral" data-testid="surface">
           {testContent}
         </SentimentSurface>,
       );
@@ -22,7 +22,7 @@ describe('SentimentSurface', () => {
 
     it('renders as custom element when as prop is provided', () => {
       render(
-        <SentimentSurface sentiment="neutral" as="section" testId="surface">
+        <SentimentSurface sentiment="neutral" as="section" data-testid="surface">
           {testContent}
         </SentimentSurface>,
       );
@@ -30,13 +30,33 @@ describe('SentimentSurface', () => {
     });
   });
 
+  describe('hasBaseStyles', () => {
+    it('applies base styles by default', () => {
+      render(
+        <SentimentSurface sentiment="neutral" data-testid="surface">
+          {testContent}
+        </SentimentSurface>,
+      );
+      expect(screen.getByTestId('surface')).toHaveClass('wds-sentiment-surface--hasBaseStyles');
+    });
+
+    it('does not apply base styles when hasBaseStyles is false', () => {
+      render(
+        <SentimentSurface sentiment="neutral" hasBaseStyles={false} data-testid="surface">
+          {testContent}
+        </SentimentSurface>,
+      );
+      expect(screen.getByTestId('surface')).not.toHaveClass('wds-sentiment-surface--hasBaseStyles');
+    });
+  });
+
   describe('sentiment variants', () => {
     const sentiments: Sentiment[] = ['negative', 'warning', 'neutral', 'success', 'proposition'];
 
     sentiments.forEach((sentiment) => {
       it(`renders ${sentiment} sentiment with correct class`, () => {
         render(
-          <SentimentSurface sentiment={sentiment} testId="surface">
+          <SentimentSurface sentiment={sentiment} data-testid="surface">
             {testContent}
           </SentimentSurface>,
         );
@@ -53,7 +73,7 @@ describe('SentimentSurface', () => {
     emphasisLevels.forEach((emphasis) => {
       it(`renders ${emphasis} emphasis with correct class`, () => {
         render(
-          <SentimentSurface sentiment="neutral" emphasis={emphasis} testId="surface">
+          <SentimentSurface sentiment="neutral" emphasis={emphasis} data-testid="surface">
             {testContent}
           </SentimentSurface>,
         );
@@ -65,7 +85,7 @@ describe('SentimentSurface', () => {
 
     it('defaults to base emphasis when not provided', () => {
       render(
-        <SentimentSurface sentiment="neutral" testId="surface">
+        <SentimentSurface sentiment="neutral" data-testid="surface">
           {testContent}
         </SentimentSurface>,
       );
@@ -79,7 +99,7 @@ describe('SentimentSurface', () => {
     it('applies custom className', () => {
       const customClass = 'custom-class';
       render(
-        <SentimentSurface sentiment="neutral" className={customClass} testId="surface">
+        <SentimentSurface sentiment="neutral" className={customClass} data-testid="surface">
           {testContent}
         </SentimentSurface>,
       );
@@ -96,10 +116,10 @@ describe('SentimentSurface', () => {
       expect(screen.getByText(testContent)).toHaveAttribute('id', customId);
     });
 
-    it('applies testId via data-testid', () => {
+    it('applies data-testid attribute', () => {
       const testId = 'test-surface';
       render(
-        <SentimentSurface sentiment="neutral" testId={testId}>
+        <SentimentSurface sentiment="neutral" data-testid={testId}>
           {testContent}
         </SentimentSurface>,
       );
@@ -109,7 +129,7 @@ describe('SentimentSurface', () => {
     it('applies custom style', () => {
       const customStyle = { padding: '20px' };
       render(
-        <SentimentSurface sentiment="neutral" style={customStyle} testId="surface">
+        <SentimentSurface sentiment="neutral" style={customStyle} data-testid="surface">
           {testContent}
         </SentimentSurface>,
       );
@@ -121,7 +141,7 @@ describe('SentimentSurface', () => {
     it('supports aria-label attribute', () => {
       const ariaLabel = 'Surface label';
       render(
-        <SentimentSurface sentiment="neutral" aria-label={ariaLabel} testId="surface">
+        <SentimentSurface sentiment="neutral" aria-label={ariaLabel} data-testid="surface">
           {testContent}
         </SentimentSurface>,
       );
@@ -130,7 +150,7 @@ describe('SentimentSurface', () => {
 
     it('supports role attribute', () => {
       render(
-        <SentimentSurface sentiment="neutral" role="region" testId="surface">
+        <SentimentSurface sentiment="neutral" role="region" data-testid="surface">
           {testContent}
         </SentimentSurface>,
       );