chore: ignore story elements

kiwicom · Oct 16, 2023 · f61da8a · f61da8a
1 parent 481f189
commit f61da8a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>
   );