Add theme selector to Storybook

Update Storybook to allow testing of both light and dark modes for all component previews. Some components such as the Log / YAML display are designed for dark mode only so these specify an override.
tektoncd · Sep 4, 2023 · 24dda99 · 24dda99
1 parent 8a4b3ad
commit 24dda99
Show file tree

Hide file tree

Showing 24 changed files with 41 additions and 96 deletions.
diff --git a/.storybook/Container.scss b/.storybook/Container.scss
@@ -18,3 +18,12 @@ limitations under the License.
 @import '@tektoncd/dashboard-graph/src/components/ZoomablePipelineGraph.scss';
 
 @import '@tektoncd/dashboard-graph/src/components/newGraph.scss';
+
+.tkn--storybook-theme {
+  background-color: $ui-background;
+  color: $text-01;
+
+  .sb-show-main {
+    background-color: inherit !important;
+  }
+}
diff --git a/.storybook/Welcome.mdx b/.storybook/Welcome.mdx
@@ -24,11 +24,6 @@ import tektonDashboardLogo from '../src/images/tekton-dashboard-color.svg';
 
 <Meta
   name="Welcome"
-  parameters={{
-    backgrounds: {
-      default: 'gray10'
-    }
-  }}
   title="Getting started/Welcome"
 />
 

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -17,7 +17,8 @@ const config = {
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-links',
-    '@storybook/addon-storysource'
+    '@storybook/addon-storysource',
+    '@storybook/addon-themes'
   ],
   core: { disableTelemetry: true },
   docs: {

diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -12,6 +12,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import { withThemeByClassName } from '@storybook/addon-themes';
 
 import Container from './Container';
 
@@ -22,26 +23,28 @@ const parameters = {
     }
   },
   backgrounds: {
-    default: 'gray10',
+    disable: true,
     grid: {
       disable: true,
       cellSize: 16,
       opacity: 0.2,
       cellAmount: 1,
       offsetX: 0,
       offsetY: 0
-    },
-    values: [
-      { name: 'white', value: 'white' },
-      { name: 'gray10', value: '#f4f4f4' },
-      { name: 'gray90', value: '#262626' },
-      { name: 'debug', value: 'red' }
-    ]
+    }
   },
   controls: { hideNoControlsWarning: true }
 };
 
 const decorators = [
+  withThemeByClassName({
+    themes: {
+      light: 'tkn--theme-light tkn--storybook-theme',
+      dark: 'tkn--theme-dark tkn--storybook-theme',
+      system: 'tkn--theme-system tkn--storybook-theme'
+    },
+    defaultTheme: 'system'
+  }),
   (story, context) => (
     <Container
       notes={context.parameters.notes}

diff --git a/packages/components/src/components/DeleteModal/DeleteModal.stories.jsx b/packages/components/src/components/DeleteModal/DeleteModal.stories.jsx
@@ -17,11 +17,6 @@ import DeleteModal from './DeleteModal';
 
 export default {
   component: DeleteModal,
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'DeleteModal'
 };
 

diff --git a/packages/components/src/components/DetailsHeader/DetailsHeader.scss b/packages/components/src/components/DetailsHeader/DetailsHeader.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2022 The Tekton Authors
+Copyright 2019-2023 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -12,6 +12,7 @@ limitations under the License.
 */
 
 header.tkn--step-details-header {
+  background-color: $ui-01;
   padding: 1rem 1rem 0;
 
   h2.tkn--details-header--heading {

diff --git a/packages/components/src/components/DetailsHeader/DetailsHeader.stories.jsx b/packages/components/src/components/DetailsHeader/DetailsHeader.stories.jsx
@@ -38,11 +38,6 @@ export default {
     }
   },
   component: DetailsHeader,
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'DetailsHeader'
 };
 

diff --git a/packages/components/src/components/Log/Log.stories.jsx b/packages/components/src/components/Log/Log.stories.jsx
@@ -37,6 +37,11 @@ export default {
       </div>
     )
   ],
+  parameters: {
+    themes: {
+      themeOverride: 'dark'
+    }
+  },
   title: 'Log'
 };
 

diff --git a/packages/components/src/components/LogFormat/LogFormat.stories.jsx b/packages/components/src/components/LogFormat/LogFormat.stories.jsx
@@ -54,17 +54,17 @@ const ansiTextStyles = (() => {
 
 export default {
   component: LogFormat,
+  parameters: {
+    themes: {
+      themeOverride: 'dark'
+    }
+  },
   title: 'LogFormat'
 };
 
 export const Colors = {
   args: {
     children: ansiColors
-  },
-  parameters: {
-    backgrounds: {
-      default: 'gray90'
-    }
   }
 };
 

diff --git a/packages/components/src/components/StatusIcon/StatusIcon.stories.jsx b/packages/components/src/components/StatusIcon/StatusIcon.stories.jsx
@@ -38,11 +38,6 @@ export default {
       options: ['normal', 'inverse']
     }
   },
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'StatusIcon'
 };
 

diff --git a/packages/components/src/components/Step/Step.stories.jsx b/packages/components/src/components/Step/Step.stories.jsx
@@ -22,11 +22,6 @@ export default {
     stepName: 'build'
   },
   component: Step,
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'Step'
 };
 

diff --git a/packages/components/src/components/StepDetails/StepDetails.scss b/packages/components/src/components/StepDetails/StepDetails.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2023 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -12,6 +12,7 @@ limitations under the License.
 */
 
 .tkn--step-details {
+  background-color: $ui-01;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;

diff --git a/packages/components/src/components/StepDetails/StepDetails.stories.jsx b/packages/components/src/components/StepDetails/StepDetails.stories.jsx
@@ -36,11 +36,6 @@ export default {
     taskRun: {}
   },
   component: StepDetails,
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'StepDetails'
 };
 

diff --git a/packages/components/src/components/Tabs/Tabs.stories.jsx b/packages/components/src/components/Tabs/Tabs.stories.jsx
@@ -19,11 +19,6 @@ import Tab from '../Tab';
 
 export default {
   component: Tabs,
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'Tabs'
 };
 

diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.stories.jsx b/packages/components/src/components/TaskRunDetails/TaskRunDetails.stories.jsx
@@ -25,11 +25,6 @@ const results = [{ name: 'message', value: 'hello' }];
 
 export default {
   component: TaskRunDetails,
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'TaskRunDetails'
 };
 

diff --git a/packages/components/src/components/Trigger/Trigger.stories.jsx b/packages/components/src/components/Trigger/Trigger.stories.jsx
@@ -77,11 +77,6 @@ const props = {
 
 export default {
   component: Trigger,
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'Trigger'
 };
 

diff --git a/packages/components/src/components/ViewYAML/ViewYAML.stories.jsx b/packages/components/src/components/ViewYAML/ViewYAML.stories.jsx
@@ -38,6 +38,11 @@ export default {
     }
   },
   component: ViewYAML,
+  parameters: {
+    themes: {
+      themeOverride: 'dark'
+    }
+  },
   title: 'ViewYAML'
 };
 

diff --git a/packages/graph/src/components/Graph.stories.jsx b/packages/graph/src/components/Graph.stories.jsx
@@ -17,11 +17,6 @@ import graph from './examples/graph.json';
 
 export default {
   component: Graph,
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'legacy/Graph'
 };
 

diff --git a/packages/graph/src/components/Graph/Graph.stories.jsx b/packages/graph/src/components/Graph/Graph.stories.jsx
@@ -38,11 +38,6 @@ export default {
       options: ['DOWN', 'RIGHT']
     }
   },
-  parameters: {
-    backgrounds: {
-      default: 'gray10'
-    }
-  },
   title: 'Graph'
 };
 

diff --git a/packages/graph/src/components/Node.stories.jsx b/packages/graph/src/components/Node.stories.jsx
@@ -64,11 +64,6 @@ export default {
       </div>
     )
   ],
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'legacy/Node'
 };
 

diff --git a/packages/graph/src/components/Node/Node.stories.jsx b/packages/graph/src/components/Node/Node.stories.jsx
@@ -47,11 +47,6 @@ export default {
       options: ['card', 'icon']
     }
   },
-  parameters: {
-    backgrounds: {
-      default: 'gray10'
-    }
-  },
   title: 'Node'
 };
 

diff --git a/packages/graph/src/components/PipelineGraph.stories.jsx b/packages/graph/src/components/PipelineGraph.stories.jsx
@@ -22,11 +22,6 @@ import taskRuns from './examples/taskRuns.json';
 import tasks from './examples/tasks.json';
 
 export default {
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'legacy/PipelineGraph'
 };
 

diff --git a/packages/graph/src/components/StatusIcon/StatusIcon.stories.jsx b/packages/graph/src/components/StatusIcon/StatusIcon.stories.jsx
@@ -34,11 +34,6 @@ export default {
       ]
     }
   },
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'StatusIcon'
 };
 

diff --git a/packages/graph/src/components/ZoomablePipelineGraph.stories.jsx b/packages/graph/src/components/ZoomablePipelineGraph.stories.jsx
@@ -22,11 +22,6 @@ import taskRuns from './examples/taskRuns.json';
 import tasks from './examples/tasks.json';
 
 export default {
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  },
   title: 'legacy/ZoomablePipelineGraph'
 };