From 21492fb5cfe02a1143f803311f0e43605588f714 Mon Sep 17 00:00:00 2001
From: Raphael Ferrand <goldenraphti@users.noreply.github.com>
Date: Thu, 31 Aug 2023 16:21:29 +0200
Subject: [PATCH 1/2] SWED-2268 add expand component preview feature

---
 RELEASE_NOTES.md                           |  2 ++
 src/App/docutils/ComponentPreview/index.js | 41 +++++++++++++++++++++-
 src/less/documentation-swedbankpay.less    | 12 +++++++
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index e16b88789c..6cd7e5b03f 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -15,3 +15,5 @@
 - E2E tests for dropdown component
 
 ## Design System website
+
+- expand components preview containers to full screen
diff --git a/src/App/docutils/ComponentPreview/index.js b/src/App/docutils/ComponentPreview/index.js
index 59ddd20996..c0b655ccfe 100644
--- a/src/App/docutils/ComponentPreview/index.js
+++ b/src/App/docutils/ComponentPreview/index.js
@@ -214,6 +214,7 @@ const ComponentPreview = ({
 					.activeOptions
 					? [...this.props.showCasePanelAdvanced.elements[0].activeOptions]
 					: [],
+				previewExpanded: false,
 			};
 		}
 
@@ -351,6 +352,14 @@ const ComponentPreview = ({
 			}
 		}
 
+		setExpandedPreview(state) {
+			this.setState({ previewExpanded: state });
+
+			if (state) {
+				document.body.classList.add("has-vscroll");
+			}
+		}
+
 		render() {
 			return (
 				<>
@@ -358,13 +367,43 @@ const ComponentPreview = ({
 						id={this.props.showCasePanelAdvanced.id}
 						className={`showcase-panel showcase-panel-advanced${
 							this.state.optionsOpen ? " options-active" : ""
-						}${this.state.hideOptions ? " hide-options" : ""}`}
+						}${this.state.hideOptions ? " hide-options" : ""}
+						${this.state.previewExpanded ? " preview-expanded" : ""}`}
 					>
 						<div
 							id={this.props.showCasePanelAdvanced.tabsId}
 							className="tabs tabs-scroll"
 						>
 							<ul id={`${this.props.showCasePanelAdvanced.tabsId}-ul`}>
+								{!this.state.previewExpanded ? (
+									<button
+										className="btn btn-icon btn-xs"
+										type="button"
+										aria-label="Expand the preview container to full screen"
+										onClick={() => this.setExpandedPreview(true)}
+									>
+										<i
+											className="material-icons material-icons-outlined"
+											aria-hidden="true"
+										>
+											open_in_full
+										</i>
+									</button>
+								) : (
+									<button
+										className="btn btn-icon btn-xs"
+										type="button"
+										aria-label="Zoom out"
+										onClick={() => this.setExpandedPreview(false)}
+									>
+										<i
+											className="material-icons material-icons-outlined"
+											aria-hidden="true"
+										>
+											close_fullscreen
+										</i>
+									</button>
+								)}
 								{this.props.showCasePanelAdvanced.elements.map((element, i) => (
 									<li
 										key={i}
diff --git a/src/less/documentation-swedbankpay.less b/src/less/documentation-swedbankpay.less
index 85a3b0240e..8dd94234dc 100644
--- a/src/less/documentation-swedbankpay.less
+++ b/src/less/documentation-swedbankpay.less
@@ -2,6 +2,8 @@
 @import "global.less";
 
 #designguide {
+	--fullscreen-z-index: 10000;
+
 	display: flex;
 	flex-direction: column;
 	min-height: 100%;
@@ -1074,6 +1076,16 @@
 				}
 			}
 		}
+
+		&.preview-expanded {
+			position: fixed;
+			width: 100vw;
+			left: 0;
+			z-index: var(--fullscreen-z-index, 10000);
+			top: 0;
+			height: 100vh;
+			margin: 0;
+		}
 	}
 
 	.icon-preview {

From 25dce2f46a387cab1e2158acff833300036cfc04 Mon Sep 17 00:00:00 2001
From: Raphael Ferrand <goldenraphti@users.noreply.github.com>
Date: Fri, 1 Sep 2023 11:23:49 +0200
Subject: [PATCH 2/2] SWED-2268 style btn & fix body scroll & opt-in

---
 .../components/Topbar/index.js                |  1 +
 src/App/docutils/ComponentPreview/index.js    | 65 ++++++++++---------
 src/less/documentation-swedbankpay.less       |  7 ++
 3 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/App/ComponentsDocumentation/components/Topbar/index.js b/src/App/ComponentsDocumentation/components/Topbar/index.js
index 9c0311b703..93b17934c5 100644
--- a/src/App/ComponentsDocumentation/components/Topbar/index.js
+++ b/src/App/ComponentsDocumentation/components/Topbar/index.js
@@ -44,6 +44,7 @@ const Overview = () => (
 			showCasePanel
 			codeFigure
 			showCasePanelAdvanced={topbarShowcase}
+			showExpandPreview={true}
 		/>
 		<h3>When to consider something else</h3>
 		<ul className="list list-bullet">
diff --git a/src/App/docutils/ComponentPreview/index.js b/src/App/docutils/ComponentPreview/index.js
index c0b655ccfe..3eafb06f0f 100644
--- a/src/App/docutils/ComponentPreview/index.js
+++ b/src/App/docutils/ComponentPreview/index.js
@@ -19,6 +19,7 @@ const ComponentPreview = ({
 	codeFigure,
 	dangerousHTML,
 	negative,
+	showExpandPreview = false,
 }) => {
 	const _removeOuterTag = (element) => {
 		const div = document.createElement("div");
@@ -354,10 +355,9 @@ const ComponentPreview = ({
 
 		setExpandedPreview(state) {
 			this.setState({ previewExpanded: state });
-
-			if (state) {
-				document.body.classList.add("has-vscroll");
-			}
+			state
+				? document.body.classList.add("has-vscroll")
+				: document.body.classList.remove("has-vscroll");
 		}
 
 		render() {
@@ -375,35 +375,36 @@ const ComponentPreview = ({
 							className="tabs tabs-scroll"
 						>
 							<ul id={`${this.props.showCasePanelAdvanced.tabsId}-ul`}>
-								{!this.state.previewExpanded ? (
-									<button
-										className="btn btn-icon btn-xs"
-										type="button"
-										aria-label="Expand the preview container to full screen"
-										onClick={() => this.setExpandedPreview(true)}
-									>
-										<i
-											className="material-icons material-icons-outlined"
-											aria-hidden="true"
+								{this.props.showExpandPreview &&
+									(!this.state.previewExpanded ? (
+										<button
+											className="btn btn-icon btn-xs"
+											type="button"
+											aria-label="Expand the preview container to full screen"
+											onClick={() => this.setExpandedPreview(true)}
 										>
-											open_in_full
-										</i>
-									</button>
-								) : (
-									<button
-										className="btn btn-icon btn-xs"
-										type="button"
-										aria-label="Zoom out"
-										onClick={() => this.setExpandedPreview(false)}
-									>
-										<i
-											className="material-icons material-icons-outlined"
-											aria-hidden="true"
+											<i
+												className="material-icons material-icons-outlined"
+												aria-hidden="true"
+											>
+												open_in_full
+											</i>
+										</button>
+									) : (
+										<button
+											className="btn btn-icon btn-xs"
+											type="button"
+											aria-label="Zoom out"
+											onClick={() => this.setExpandedPreview(false)}
 										>
-											close_fullscreen
-										</i>
-									</button>
-								)}
+											<i
+												className="material-icons material-icons-outlined"
+												aria-hidden="true"
+											>
+												close_fullscreen
+											</i>
+										</button>
+									))}
 								{this.props.showCasePanelAdvanced.elements.map((element, i) => (
 									<li
 										key={i}
@@ -622,6 +623,7 @@ const ComponentPreview = ({
 				showCasePanelAdvanced ? (
 					<ShowCasePanelAdvanced
 						showCasePanelAdvanced={showCasePanelAdvanced}
+						showExpandPreview={showExpandPreview}
 					/>
 				) : (
 					<ShowCasePanel />
@@ -647,6 +649,7 @@ ComponentPreview.propTypes = {
 	codeFigure: PropTypes.bool,
 	dangerousHTML: PropTypes.bool,
 	negative: PropTypes.bool,
+	showExpandPreview: PropTypes.bool,
 };
 
 export default ComponentPreview;
diff --git a/src/less/documentation-swedbankpay.less b/src/less/documentation-swedbankpay.less
index 8dd94234dc..8fe7623cab 100644
--- a/src/less/documentation-swedbankpay.less
+++ b/src/less/documentation-swedbankpay.less
@@ -949,6 +949,13 @@
 								border-color: transparent;
 							}
 						}
+
+						> button[aria-label^="Expand"],
+						> button[aria-label^="Zoom"] {
+							width: 30px;
+							height: 30px;
+							margin: 4px;
+						}
 					}
 
 					.options-open {