From 895bd5bda069320f88c366843d1b1c8658141df3 Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Tue, 14 Nov 2023 13:15:31 +0100
Subject: [PATCH] feat(documentation): fullwidth topic teaser docs (#2246)

---
 .../components/topic-teaser/topic-teaser.docs.mdx  | 14 +++++++++++---
 .../topic-teaser/topic-teaser.stories.ts           |  1 +
 .../topic-teaser/topic-teaser.styles.scss          |  6 ++++++
 3 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss

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
index a8ab51994f..9ada585596 100644
--- 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
index 127280968d..8b69ba1dc0 100644
--- 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
new file mode 100644
index 0000000000..aeeee57ac2
--- /dev/null
+++ 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)');
+}