feat(storybook): better tracking, new version, viewport plugin (#696)

telekom · Nov 15, 2021 · 6c5eb34 · 6c5eb34
1 parent 3b1fea9
commit 6c5eb34
Show file tree

Hide file tree

Showing 6 changed files with 620 additions and 441 deletions.
diff --git a/packages/storybook-vue/.storybook/language-addon/register.js b/packages/storybook-vue/.storybook/language-addon/register.js
@@ -16,7 +16,7 @@ import useLocalStorage from "../use-localstorage";
 import translationMap from "../../translations.json";
 
 const activeBtnClassName = "css-mszgbt";
-const inactiveBtnClassName = "css-1nin9qf";
+const inactiveBtnClassName = "css-am1h1h";
 
 // utility to create new links
 const createLink = label => {

diff --git a/packages/storybook-vue/.storybook/main.js b/packages/storybook-vue/.storybook/main.js
@@ -4,6 +4,7 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-docs",
     "@storybook/addon-controls",
+    '@storybook/addon-viewport',
     "./usage-addon/register.js",
     "./language-addon/register.js",
     "./sidebar-links-addon/register.js",

diff --git a/packages/storybook-vue/.storybook/manager-head.html b/packages/storybook-vue/.storybook/manager-head.html
@@ -40,10 +40,17 @@
 </style>
 <!-- Matomo -->
 <script type="text/javascript">
+    const content = document.getElementsByTagName('iframe') && document.getElementsByTagName('iframe')[0];
     var _paq = window._paq = window._paq || [];
     _paq.push(["disableCookies"]);
     _paq.push(['trackPageView']);
     _paq.push(['enableLinkTracking']);
+
+    _paq.push(['setDocumentTitle', window.document.title]);
+    _paq.push(['MediaAnalytics::scanForMedia', content]);
+    _paq.push(['FormAnalytics::scanForForms', content]);
+    _paq.push(['trackContentImpressionsWithinNode', content]);
+
     (function() {
         var u="https://www.brand-design.telekom.com/piwik-bd/";
         _paq.push(['setTrackerUrl', u+'matomo.php']);

diff --git a/packages/storybook-vue/.storybook/preview.js b/packages/storybook-vue/.storybook/preview.js
@@ -4,6 +4,7 @@ import {
   defineCustomElements,
   applyPolyfills,
 } from '@telekom/scale-components/loader';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 Vue.config.productionTip = false;
 Vue.config.ignoredElements = [/scale-\w*/];
@@ -31,4 +32,7 @@ export const parameters = {
       ],
     },
   },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS, // newViewports would be an ViewportMap. (see below for examples)
+  },
 };
diff --git a/packages/storybook-vue/package.json b/packages/storybook-vue/package.json
@@ -6,16 +6,16 @@
   "license": "MPL-2.0",
   "devDependencies": {
     "@babel/core": "^7.10.4",
-    "@storybook/addon-actions": "^6.2.7",
-    "@storybook/addon-controls": "^6.2.7",
-    "@storybook/addon-docs": "^6.2.7",
-    "@storybook/addon-links": "^6.2.7",
-    "@storybook/addons": "^6.2.7",
-    "@storybook/api": "^6.2.7",
-    "@storybook/components": "^6.2.7",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-controls": "^6.3.12",
+    "@storybook/addon-docs": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addons": "^6.3.12",
+    "@storybook/api": "^6.3.12",
+    "@storybook/components": "^6.3.12",
     "@storybook/core-events": "^6.3.12",
-    "@storybook/theming": "^6.2.7",
-    "@storybook/vue": "^6.2.7",
+    "@storybook/theming": "^6.3.12",
+    "@storybook/vue": "^6.3.12",
     "babel-loader": "^8.1.0",
     "babel-preset-vue": "^2.0.2",
     "copy-webpack-plugin": "^6.0.3",
@@ -28,6 +28,7 @@
     "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
+    "@storybook/addon-viewport": "^6.3.12",
     "@telekom/scale-components": "^3.0.0-beta.30",
     "@telekom/scale-components-vue": "^3.0.0-beta.30"
   },