Merge branch 'feat/storybook-tags-5539' into 'master'

Add tag components to storybook #5539

See merge request minds/front!1944

Author: markharding

.storybook/main.js

@@ -1,16 +1,14 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    'storybook-addon-themes',
+    'storybook-addon-angular-router',
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "storybook-addon-themes",
-  ],
-  "framework": "@storybook/angular",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
-  }
-}
+  framework: '@storybook/angular',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+};

.storybook/preview.js

@@ -1,9 +1,15 @@
-import { setCompodocJson } from "@storybook/addon-docs/angular";
-import docJson from "../documentation.json";
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
 setCompodocJson(docJson);
+// .storybook/preview.js
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+  },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -15,16 +21,16 @@ export const parameters = {
     clearable: false,
     list: [
       {
-        name: "light mode",
-        class: [ "m-theme__2020", "m-theme__light" ], 
-        color: "#FFF",
-        default: true 
+        name: 'light mode',
+        class: ['m-theme__2020', 'm-theme__light'],
+        color: '#FFF',
+        default: true,
       },
       {
-        name: "dark mode",
-        class: [ "m-theme__2020", "m-theme__dark" ], 
-        color: "#111",
-      }
-    ]
-  }
-}
+        name: 'dark mode',
+        class: ['m-theme__2020', 'm-theme__dark'],
+        color: '#111',
+      },
+    ],
+  },
+};