fix(react): update storybook/cypress tests with tab context theme cha…

…nges Update storybook/cypress tests with tab context theme changes
mi6 · Sep 27, 2024 · 5a9ed1c · 5a9ed1c
1 parent 73555a2
commit 5a9ed1c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 74 deletions.
diff --git a/packages/react/src/component-tests/IcTabs/IcTabsTestData.tsx b/packages/react/src/component-tests/IcTabs/IcTabsTestData.tsx
@@ -179,7 +179,7 @@ export const ResponsiveTabs = (): ReactElement => (
 
 export const ResponsiveLightTextTabs = (): ReactElement => (
   <div style={{ margin: "2rem" }}>
-    <IcTabContext appearance="light">
+    <IcTabContext theme="dark">
       <IcTabGroup label="Example tab group">
         <IcTab>One</IcTab>
         <IcTab>Two</IcTab>
@@ -212,7 +212,7 @@ export const ResponsiveLightTextTabs = (): ReactElement => (
 
 export const LightTabs = (): ReactElement => (
   <div style={{ margin: "2rem" }}>
-    <IcTabContext appearance="light">
+    <IcTabContext theme="dark">
       <IcTabGroup label="Example tab group">
         <IcTab>Ingredients</IcTab>
         <IcTab>Method</IcTab>

diff --git a/packages/react/src/stories/ic-tabs.stories.mdx b/packages/react/src/stories/ic-tabs.stories.mdx
@@ -201,36 +201,6 @@ export const ControlledTabsExample = () => {
   </Story>
 </Canvas>
 
-### Light text
-
-<Canvas>
-  <Story name="Light text" parameters={{ backgrounds: { default: "dark" } }}>
-    <IcTabContext appearance="light">
-      <IcTabGroup label="Example tab group">
-        <IcTab>One</IcTab>
-        <IcTab>Two</IcTab>
-        <IcTab>
-          Three
-          <svg
-            slot="icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-          </svg>
-        </IcTab>
-      </IcTabGroup>
-      <IcTabPanel>Tab One</IcTabPanel>
-      <IcTabPanel>Tab Two</IcTabPanel>
-      <IcTabPanel>Tab Three</IcTabPanel>
-    </IcTabContext>
-  </Story>
-</Canvas>
-
 ### Responsive
 
 <Canvas>
@@ -266,46 +236,15 @@ export const ControlledTabsExample = () => {
   </Story>
 </Canvas>
 
-### Responsive (Light text)
-
-<Canvas>
-  <Story
-    name="Responsive (Light text)"
-    parameters={{ backgrounds: { default: "dark" } }}
-  >
-    <IcTabContext appearance="light">
-      <IcTabGroup label="Example tab group">
-        <IcTab>One</IcTab>
-        <IcTab>Two</IcTab>
-        <IcTab>Three</IcTab>
-        <IcTab>Four</IcTab>
-        <IcTab>Five</IcTab>
-        <IcTab>Six</IcTab>
-        <IcTab>Seven</IcTab>
-        <IcTab>Eight</IcTab>
-        <IcTab>Nine</IcTab>
-      </IcTabGroup>
-      <IcTabPanel>Tab One</IcTabPanel>
-      <IcTabPanel>Tab Two</IcTabPanel>
-      <IcTabPanel>Tab Three</IcTabPanel>
-      <IcTabPanel>Tab Four</IcTabPanel>
-      <IcTabPanel>Tab Five</IcTabPanel>
-      <IcTabPanel>Tab Six</IcTabPanel>
-      <IcTabPanel>Tab Seven</IcTabPanel>
-      <IcTabPanel>Tab Eight</IcTabPanel>
-      <IcTabPanel>Tab Nine</IcTabPanel>
-    </IcTabContext>
-  </Story>
-</Canvas>
-
 ### Playground
 
 export const defaultArgs = {
   activationType: "automatic",
-  appearance: "dark",
   disabled: false,
   inline: false,
   groupLabel: "Example tab group",
+  theme: "inherit",
+  monochrome: false,
 };
 
 <Canvas>
@@ -321,22 +260,19 @@ export const defaultArgs = {
           type: "inline-radio",
         },
       },
-      appearance: {
-        options: [
-          "dark", "light"
-        ],
-        control: {
-          type: "inline-radio",
-        },
+      theme: {
+        options: ["inherit", "light", "dark"],
+        control: { type: "inline-radio" },
       },
     }}
     name="Playground"
   >
     {(args) => (
-      <div style={{ backgroundColor: args.appearance == "light" ? "black" : ""}}>
+      <div>
         <IcTabContext
           activationType={args.activationType}
-          appearance={args.appearance}
+          theme={args.theme}
+          monochrome={args.monochrome}
         >
           <IcTabGroup
             label={args.groupLabel}
@@ -368,10 +304,14 @@ export const defaultArgs = {
                 <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
               </svg>
             </IcTab>
+            <IcTab>
+              Four
+            </IcTab>
           </IcTabGroup>
           <IcTabPanel>Tab One</IcTabPanel>
           <IcTabPanel>Tab Two</IcTabPanel>
           <IcTabPanel>Tab Three</IcTabPanel>
+          <IcTabPanel>Tab Four</IcTabPanel>
         </IcTabContext>
       </div>
     )}