feature/SWED-2268 expandable component preview

RELEASE_NOTES.md

@@ -15,3 +15,5 @@
 - E2E tests for dropdown component
 
 ## Design System website
+
+- expand components preview containers to full screen

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">

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");
@@ -214,6 +215,7 @@ const ComponentPreview = ({
 					.activeOptions
 					? [...this.props.showCasePanelAdvanced.elements[0].activeOptions]
 					: [],
+				previewExpanded: false,
 			};
 		}
 
@@ -351,20 +353,58 @@ const ComponentPreview = ({
 			}
 		}
 
+		setExpandedPreview(state) {
+			this.setState({ previewExpanded: state });
+			state
+				? document.body.classList.add("has-vscroll")
+				: document.body.classList.remove("has-vscroll");
+		}
+
 		render() {
 			return (
 				<>
 					<div
 						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.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)}
+										>
+											<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}
@@ -583,6 +623,7 @@ const ComponentPreview = ({
 				showCasePanelAdvanced ? (
 					<ShowCasePanelAdvanced
 						showCasePanelAdvanced={showCasePanelAdvanced}
+						showExpandPreview={showExpandPreview}
 					/>
 				) : (
 					<ShowCasePanel />
@@ -608,6 +649,7 @@ ComponentPreview.propTypes = {
 	codeFigure: PropTypes.bool,
 	dangerousHTML: PropTypes.bool,
 	negative: PropTypes.bool,
+	showExpandPreview: PropTypes.bool,
 };
 
 export default ComponentPreview;

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%;
@@ -947,6 +949,13 @@
 								border-color: transparent;
 							}
 						}
+
+						> button[aria-label^="Expand"],
+						> button[aria-label^="Zoom"] {
+							width: 30px;
+							height: 30px;
+							margin: 4px;
+						}
 					}
 
 					.options-open {
@@ -1074,6 +1083,16 @@
 				}
 			}
 		}
+
+		&.preview-expanded {
+			position: fixed;
+			width: 100vw;
+			left: 0;
+			z-index: var(--fullscreen-z-index, 10000);
+			top: 0;
+			height: 100vh;
+			margin: 0;
+		}
 	}
 
 	.icon-preview {