chore(angular): add theme-decorator example

storybookjs · Jan 28, 2021 · 53248ca · 53248ca
1 parent 9113153
commit 53248ca
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 0 deletions.
diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js
@@ -11,5 +11,6 @@ module.exports = {
     '@storybook/addon-jest',
     '@storybook/addon-backgrounds',
     '@storybook/addon-a11y',
+    '@storybook/addon-toolbars',
   ],
 };
diff --git a/examples/angular-cli/.storybook/preview.ts b/examples/angular-cli/.storybook/preview.ts
@@ -23,3 +23,18 @@ addParameters({
     prepareForInline,
   },
 });
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'light', title: 'Light theme' },
+        { value: 'dark', title: 'Dark theme' },
+      ],
+    },
+  },
+};
diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
@@ -15,6 +15,26 @@ exports[`Storyshots Core/Parameters passed to story 1`] = `
     "docs": {
       "inlineStories": true
     },
+    "globalTypes": {
+      "theme": {
+        "name": "Theme",
+        "description": "Global theme for components",
+        "defaultValue": "light",
+        "toolbar": {
+          "icon": "paintbrush",
+          "items": [
+            {
+              "value": "light",
+              "title": "Light theme"
+            },
+            {
+              "value": "dark",
+              "title": "Dark theme"
+            }
+          ]
+        }
+      }
+    },
     "globalParameter": "globalParameter",
     "framework": "angular",
     "chapterParameter": "chapterParameter",

diff --git a/examples/angular-cli/src/stories/theme-decorator/__snapshots__/decorators.stories.storyshot b/examples/angular-cli/src/stories/theme-decorator/__snapshots__/decorators.stories.storyshot
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Core / Theme Decorators Base 1`] = `
+<storybook-wrapper>
+  <div
+    class="light-theme"
+  >
+    Change theme with the brush in toolbar
+  </div>
+</storybook-wrapper>
+`;
diff --git a/examples/angular-cli/src/stories/theme-decorator/decorators.stories.ts b/examples/angular-cli/src/stories/theme-decorator/decorators.stories.ts
@@ -0,0 +1,18 @@
+import { componentWrapperDecorator, Meta } from '@storybook/angular';
+
+export default {
+  title: 'Core / Theme Decorators',
+  decorators: [
+    componentWrapperDecorator(
+      (story) => `<div [class]="myTheme">${story}</div>`,
+      ({ globals }) => ({ myTheme: `${globals.theme}-theme` })
+    ),
+  ],
+} as Meta;
+
+export const Base = (args) => ({
+  template: 'Change theme with the brush in toolbar',
+  props: {
+    ...args,
+  },
+});
diff --git a/examples/angular-cli/src/styles.scss b/examples/angular-cli/src/styles.scss
@@ -6,3 +6,12 @@
 .green-color {
   color: $color;
 }
+
+.light-theme {
+  background-color: white;
+}
+
+.dark-theme {
+  background-color: rgb(75, 75, 75);
+  color: white;
+}