From 20f2a8680fc77890a5f67cae03bdf4ea0a6c6d4e Mon Sep 17 00:00:00 2001
From: "myelyn.kim" <myelyn.kim@lge.com>
Date: Mon, 13 May 2024 16:51:31 +0900
Subject: [PATCH] Added screenScale prop for large screen mode scale values

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)
---
 samples/sampler/.storybook/preview.js               | 13 +++++++++++++
 .../src/ThemeEnvironment/ThemeEnvironment.js        |  8 +++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js
index 8dca7e3ef4..3f27f51044 100644
--- a/samples/sampler/.storybook/preview.js
+++ b/samples/sampler/.storybook/preview.js
@@ -48,6 +48,18 @@ const skins = {
 	'Light': 'light'
 };
 
+const screenScale = {
+	'1': 1,
+	'1.2': 1.2,
+	'1.4': 1.4,
+	'1.6': 1.6,
+	'1.8': 1.8,
+	'2': 2,
+	'3': 3,
+	'4': 4,
+	'5': 5
+};
+
 configureActions();
 
 if (process.env.STORYBOOK_APPLY_GA_COOKIEBANNER) {
@@ -91,6 +103,7 @@ export const globalTypes = {
 	'large text': getBooleanType('large text'),
 	'high contrast': getBooleanType('high contrast'),
 	'focus ring':getBooleanType('focus ring'),
+	'screen scale': getObjectType('screen scale', 1, screenScale),
 	'skin': getObjectType('skin', 'neutral', skins),
 	'background': getObjectType('background', 'default', backgrounds),
 	'debug aria': getBooleanType('debug aria'),
diff --git a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js
index 85b9461aa9..aec540d406 100644
--- a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js
+++ b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js
@@ -43,10 +43,7 @@ const PanelsBase = kind({
 
 const Theme = ThemeDecorator({overlay: false}, PanelsBase);
 
-const StorybookDecorator = (story, config = {}) => {
-	// Executing `story` here allows the story controls to register and render before the global variable below.
-	const sample = story();
-
+const StorybookDecorator = (Story, config = {}) => {
 	const {globals} = config;
 
 	const componentName = config.kind.replace(/^([^/]+)\//, '');
@@ -74,13 +71,14 @@ const StorybookDecorator = (story, config = {}) => {
 			textSize={JSON.parse(globals['large text']) ? 'large' : 'normal'}
 			focusRing={JSON.parse(globals['focus ring'])}
 			highContrast={JSON.parse(globals['high contrast'])}
+			screenScale={JSON.parse(globals['screen scale'])}
 			style={{
 				'--sand-env-background': globals.background === 'default' ? '' : globals.background
 			}}
 			skin={globals.skin}
 			{...hasProps ? config.parameters.props : null}
 		>
-			{sample}
+			<Story />
 		</Theme>
 	);
 };