fix(react): fix for items displayed on brand color background

fixes components that are displayed on brand coloured background

packages/react/src/component-tests/IcHero/IcHero.cy.tsx

@@ -16,7 +16,7 @@ import {
   BackgroundImage,
   LongHeading,
   FullWidth,
-  LightBrand,
+  BrandChange,
 } from "./IcHeroTestData";
 import { BE_VISIBLE } from "../utils/constants";
 
@@ -182,15 +182,29 @@ describe("IcHero end-to-end, visual regression and a11y tests", () => {
   });
 
   it("should render with light brand color", () => {
-    mount(<LightBrand />);
+    mount(<BrandChange />);
 
     cy.checkHydrated(IC_HERO_SELECTOR);
     cy.get("ic-theme").should("exist");
 
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "light-brand",
-      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.028),
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.026),
+    });
+
+    cy.get("#default-btn").click();
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "dark-brand",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.027),
+    });
+
+    cy.get("#sunrise-btn").click();
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "light-brand-again",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.026),
     });
   });
 });

packages/react/src/component-tests/IcHero/IcHeroTestData.tsx

@@ -237,10 +237,18 @@ export const FullWidth = () => {
   );
 };
 
-export const LightBrand = () => {
+export const BrandChange = () => {
+  const [color, setColour] = useState("rgb(255, 201, 60)");
+  const defaultButtonClickHandler = () => {
+    setColour("rgb(27, 60, 121)");
+  };
+  const differentButtonClickHandler = () => {
+    setColour("rgb(255, 201, 60)");
+  };
+
   return (
     <>
-      <IcTheme color={"rgb(255, 201, 60)"}>
+      <IcTheme color={color}>
         <IcHero
           heading="Hero heading"
           subheading="Hero description. This is a Hero component, it should be used as a page heading."
@@ -276,6 +284,20 @@ export const LightBrand = () => {
           />
         </IcHero>
       </IcTheme>
+      <IcButton
+        id="default-btn"
+        variant="primary"
+        onClick={defaultButtonClickHandler}
+      >
+        Default brand
+      </IcButton>
+      <IcButton
+        id="sunrise-btn"
+        variant="primary"
+        onClick={differentButtonClickHandler}
+      >
+        Sunrise brand
+      </IcButton>
     </>
   );
 };

packages/react/src/stories/ic-hero.stories.mdx

@@ -21,14 +21,11 @@ import image from "./assets/example-background.png";
 
 export const Controlled = () => {
   const [color, setColour] = useState("rgb(255, 201, 60)");
-  const [theme, setTheme] = useState("light");
   const defaultButtonClickHandler = () => {
     setColour("rgb(27, 60, 121)");
-    setTheme("dark");
   };
   const differentButtonClickHandler = () => {
     setColour("rgb(255, 201, 60)");
-    setTheme("light");
   };
   return (
     <>
@@ -65,7 +62,6 @@ export const Controlled = () => {
           heading="Latest announcement"
           message="This is some example text that can be included in the card copy."
           slot="secondary"
-          theme={theme}
         />
       </IcHero>
       <IcButton variant="primary" onClick={defaultButtonClickHandler}>
@@ -150,7 +146,6 @@ export const defaultArgs = {
             <IcCardVertical
               heading="Latest announcement"
               message="This is some example text that can be included in the card copy."
-              theme="dark"
               slot="secondary"
             />
           )}
@@ -325,7 +320,6 @@ export const defaultArgs = {
       <IcCardVertical
         heading="Latest announcement"
         message="This is some example text that can be included in the card copy."
-        theme="dark"
         slot="secondary"
       />
     </IcHero>