feat(documentation): fullwidth topic teaser docs (#2246)

swisspost · Nov 14, 2023 · 895bd5b · 895bd5b
1 parent dd0fa86
commit 895bd5b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx
@@ -1,9 +1,12 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as TopicTeaserStories from './topic-teaser.stories';
 import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import './topic-teaser.styles.scss';
 
 <Meta of={TopicTeaserStories} />
 
+<div className="hide-col-default container">
+
 # Topic Teaser
 
 <div className="lead">
@@ -13,9 +16,14 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 If you use multiple topic teasers on one page, each topic teaser must have a different background.
 
-<Canvas sourceState="shown" of={TopicTeaserStories.Default} />
-<div className="hide-col-default">
+</div>
+
+<Canvas className="topic-teaser-full-width-storybook" of={TopicTeaserStories.Default} />
+
+<div className="hide-col-default container">
   <Controls of={TopicTeaserStories.Default} />
 </div>
 
-<StylesPackageImport components={["topic-teaser"]} />
+<div className="hide-col-default container">
+  <StylesPackageImport components={['topic-teaser']} />
+</div>
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
@@ -7,6 +7,7 @@ const meta: Meta = {
   title: 'Components/Topic Teaser',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
+    layout: 'fullscreen',
   },
   args: {
     title: 'Loremipsum',

diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss
@@ -0,0 +1,6 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.topic-teaser-full-width-storybook > div > div:first-child {
+  overflow: hidden;
+  @include post.responsive-size('huge', 'padding-bottom', 'calc($value + 2rem)');
+}