feat(documentation): add possibility to open all demos full screen (#…

…1845)

.changeset/long-apes-vanish.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added the possibility to open each demo in full screen.

packages/documentation/.storybook/helpers/index.ts

@@ -1,3 +1,4 @@
 export * from './bages-config';
+export * from './open-full-screen-demo';
 export * from './prettier-options';
 export * from './reset-sb-styled-components';

packages/documentation/.storybook/helpers/open-full-screen-demo.ts

@@ -0,0 +1,12 @@
+export const openFullScreenDemo = (e: Event) => {
+  const target = e.target as HTMLButtonElement;
+  const canvas = target.closest('.docs-story');
+  const story = canvas?.querySelector('.sb-story');
+  const iframeId = story?.id?.replace('story--', '');
+
+  if (iframeId) {
+    window.open(`/iframe.html?id=${iframeId}`,'_blank');
+  } else {
+    alert('The full screen demo is not available.');
+  }
+};

packages/documentation/.storybook/preview.ts

@@ -1,10 +1,10 @@
 import type { Preview } from '@storybook/web-components';
-import './cypress-storybook/client';
 import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 import { format } from 'prettier';
 import DocsLayout from './blocks/layout';
-import { badgesConfig, prettierOptions, resetComponents } from './helpers';
+import { badgesConfig, openFullScreenDemo, prettierOptions, resetComponents } from './helpers';
 import './helpers/register-web-components';
+import './cypress-storybook/client';
 
 import './styles/preview.scss';
 
@@ -46,6 +46,14 @@ const preview: Preview = {
     },
     docs: {
       container: DocsLayout,
+      canvas: {
+        additionalActions: [
+          {
+            title: 'View full screen',
+            onClick: openFullScreenDemo,
+          },
+        ],
+      },
       source: {
         excludeDecorators: true,
         transform: (snippet: string) => format(snippet, prettierOptions),