From f61da8a516880414abf6f669240ae52086216a7d Mon Sep 17 00:00:00 2001
From: Daniel Sil <daniel.sil@kiwi.com>
Date: Fri, 13 Oct 2023 16:03:52 +0200
Subject: [PATCH] chore: ignore story elements

---
 .eslintrc.cjs                                           | 2 +-
 .github/workflows/chromatic.yml                         | 2 ++
 packages/orbit-components/.storybook/orbitDecorator.tsx | 8 ++++----
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 7b4ab62662..f8ef95ec53 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -47,7 +47,7 @@ module.exports = {
     "jsx-a11y/label-has-associated-control": "off",
     "no-await-in-loop": "off",
     "tailwindcss/classnames-order": "off",
-    "tailwindcss/no-custom-classname": [1, { whitelist: ["(orbit\\-).*"] }],
+    "tailwindcss/no-custom-classname": [1, { whitelist: ["(orbit\\-).*", "chromatic-ignore"] }],
     ...(!process.env.CI
       ? {
           "import/no-named-as-default": "off",
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index 940c3fa5b7..5b06eba18d 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -31,6 +31,8 @@ jobs:
 
       - name: Publish to Chromatic
         uses: chromaui/action@v1
+        env:
+          NODE_ENV: chromatic
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: packages/orbit-components
diff --git a/packages/orbit-components/.storybook/orbitDecorator.tsx b/packages/orbit-components/.storybook/orbitDecorator.tsx
index 7c89ea62c7..1cf5b86add 100644
--- a/packages/orbit-components/.storybook/orbitDecorator.tsx
+++ b/packages/orbit-components/.storybook/orbitDecorator.tsx
@@ -30,7 +30,7 @@ const OrbitDecorator = (storyFn, context) => {
   return (
     <OrbitProvider useId={React.useId} theme={{ ...defaultTheme }}>
       <div style={{ padding: "20px" }}>
-        <div data-chromatic="ignore">
+        <div className="chromatic-ignore">
           <Heading spaceAfter="medium" inverted={inverted}>
             {context.kind}
           </Heading>
@@ -39,11 +39,11 @@ const OrbitDecorator = (storyFn, context) => {
           </Text>
         </div>
         {children}
-        {process.env.NODE_ENV !== "loki" ? (
-          <div data-chromatic="ignore" style={{ marginTop: 20 }}>
+        {process.env.NODE_ENV === "loki" || process.env.NODE_ENV === "chromatic" ? null : (
+          <div className="chromatic-ignore" style={{ marginTop: 20 }}>
             <Source code={jsxToString(children, options)} language="jsx" format={false} />
           </div>
-        ) : null}
+        )}
       </div>
     </OrbitProvider>
   );