From d8d5e4038037925d2c46898c883761b09aa3ef1d Mon Sep 17 00:00:00 2001
From: Sebastian Dawidziak <sebastian@tweetgeek.pl>
Date: Wed, 10 Jan 2024 13:21:14 +0100
Subject: [PATCH 1/7] update SurveyQuestionScale layout

---
 .../SurveyQuestionScale.vue                   | 122 ++++++++++++++----
 1 file changed, 94 insertions(+), 28 deletions(-)

diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
index c7d87b3ba..7a3cbfd98 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
@@ -25,33 +25,63 @@
 					/>
 				</div>
 				<div class="surveyQuestionScale__content">
-					<template
-						v-for="(option, index) in scaleOptions"
-						:key="`surveyQuestionScale-${index}`"
+					<div class="surveyQuestionScale__container">
+						<template
+							v-for="(option, index) in scaleOptions"
+							:key="`surveyQuestionScale-${index}`"
+						>
+							<div
+								class="surveyQuestionScale__toggle"
+								:class="{ '-visibleOnMobile': option.standalone }"
+							>
+								<survey-toggle
+									:meaning="option.meaning"
+									:content-text="option.content"
+									:label="option.label"
+									:status="
+										selectedValue === option.value
+											? SURVEY_TOGGLE_STATUSES.SELECTED
+											: SURVEY_TOGGLE_STATUSES.DEFAULT
+									"
+									:state="
+										state === SURVEY_QUESTION_STATES.DISABLED
+											? SURVEY_TOGGLE_STATES.DISABLED
+											: SURVEY_TOGGLE_STATES.DEFAULT
+									"
+									@click="onToggleClick(option.value)"
+								/>
+							</div>
+						</template>
+					</div>
+
+					<div
+						v-if="standaloneOptions.length > 0"
+						class="surveyQuestionScale__container -hideOnMobile"
 					>
-						<div
-							v-if="option.standalone"
-							class="surveyQuestionScale__toggleSeparator"
-						/>
-						<div class="surveyQuestionScale__toggle">
-							<survey-toggle
-								:meaning="option.meaning"
-								:content-text="option.content"
-								:label="option.label"
-								:status="
-									selectedValue === option.value
-										? SURVEY_TOGGLE_STATUSES.SELECTED
-										: SURVEY_TOGGLE_STATUSES.DEFAULT
-								"
-								:state="
-									state === SURVEY_QUESTION_STATES.DISABLED
-										? SURVEY_TOGGLE_STATES.DISABLED
-										: SURVEY_TOGGLE_STATES.DEFAULT
-								"
-								@click="onToggleClick(option.value)"
-							/>
-						</div>
-					</template>
+						<template
+							v-for="(option, index) in standaloneOptions"
+							:key="`surveyQuestionScale-standalone-${index}`"
+						>
+							<div class="surveyQuestionScale__toggle">
+								<survey-toggle
+									:meaning="option.meaning"
+									:content-text="option.content"
+									:label="option.label"
+									:status="
+										selectedValue === option.value
+											? SURVEY_TOGGLE_STATUSES.SELECTED
+											: SURVEY_TOGGLE_STATUSES.DEFAULT
+									"
+									:state="
+										state === SURVEY_QUESTION_STATES.DISABLED
+											? SURVEY_TOGGLE_STATES.DISABLED
+											: SURVEY_TOGGLE_STATES.DEFAULT
+									"
+									@click="onToggleClick(option.value)"
+								/>
+							</div>
+						</template>
+					</div>
 				</div>
 
 				<template v-if="selectedValue !== null && elaborationLabel !== null">
@@ -113,6 +143,7 @@
 		padding: $space-s $space-xxs;
 
 		@media #{breakpoint-s()} {
+			gap: $space-l;
 			padding: $space-s $space-l;
 		}
 	}
@@ -154,15 +185,43 @@
 	&__elaborationInput {
 		margin-top: $space-xxs;
 	}
+
+	&__container {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+		justify-content: space-between;
+
+		@media #{breakpoint-s()} {
+			flex: 0;
+			justify-content: initial;
+			gap: $space-l;
+		}
+
+		&.-hideOnMobile {
+			display: none;
+
+			@media #{breakpoint-s()} {
+				display: flex;
+			}
+		}
+	}
+}
+
+.-visibleOnMobile {
+	display: flex;
+
+	@media #{breakpoint-s()} {
+		display: none;
+	}
 }
 </style>
 
 <script lang="ts">
 import DsCard from '../../Cards/Card';
-import IconButton from '../../Buttons/IconButton';
+import IconButton, { ICON_BUTTON_COLORS } from '../../Buttons/IconButton';
 import { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import DsButton, { BUTTON_TYPES } from '../../Buttons/Button';
-import { ICON_BUTTON_COLORS } from '../../Buttons/IconButton';
 import DsModal from '../../Modal';
 import SurveyToggle, {
 	SURVEY_TOGGLE_MEANINGS,
@@ -235,6 +294,13 @@ export default {
 			SURVEY_QUESTION_STATES: Object.freeze(SURVEY_QUESTION_STATES),
 		};
 	},
+	computed: {
+		standaloneOptions() {
+			return this.scaleOptions.filter(
+				(option: SurveyQuestionScaleOption) => option.standalone,
+			);
+		},
+	},
 	methods: {
 		onToggleClick(value: string) {
 			this.$emit('select-change', this.selectedValue === value ? null : value);

From d5c79ffc5918ee3a2faf07dbea4b3682fa9e872d Mon Sep 17 00:00:00 2001
From: Sebastian Dawidziak <sebastian@tweetgeek.pl>
Date: Wed, 10 Jan 2024 13:32:54 +0100
Subject: [PATCH 2/7] linter fix

---
 .../SurveyQuestionScale/SurveyQuestionScale.vue               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
index 7a3cbfd98..4217fe390 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
@@ -188,14 +188,14 @@
 
 	&__container {
 		display: flex;
-		flex-direction: row;
 		flex: 1;
+		flex-direction: row;
 		justify-content: space-between;
 
 		@media #{breakpoint-s()} {
 			flex: 0;
-			justify-content: initial;
 			gap: $space-l;
+			justify-content: initial;
 		}
 
 		&.-hideOnMobile {

From 9352e30ee8cbba213bf003d9a3700cd99584dce6 Mon Sep 17 00:00:00 2001
From: Sebastian Dawidziak <sebastian@tweetgeek.pl>
Date: Wed, 10 Jan 2024 16:59:20 +0100
Subject: [PATCH 3/7] fix scroll and desktop gap

---
 .../SurveyQuestionScale/SurveyQuestionScale.vue | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
index 4217fe390..fe8eb8fda 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
@@ -138,12 +138,12 @@
 		background: $color-neutral-background;
 		border-radius: $radius-s;
 		display: flex;
-		justify-content: space-between;
 		overflow-x: auto;
 		padding: $space-s $space-xxs;
 
 		@media #{breakpoint-s()} {
-			gap: $space-l;
+			overflow-x: initial;
+			justify-content: center;
 			padding: $space-s $space-l;
 		}
 	}
@@ -151,11 +151,6 @@
 	&__toggle {
 		display: flex;
 		justify-content: center;
-		margin-right: $space-xxs;
-
-		&:last-child {
-			margin-right: 0;
-		}
 	}
 
 	&__toggleSeparator {
@@ -190,12 +185,10 @@
 		display: flex;
 		flex: 1;
 		flex-direction: row;
-		justify-content: space-between;
+		gap: $space-l;
 
-		@media #{breakpoint-s()} {
-			flex: 0;
-			gap: $space-l;
-			justify-content: initial;
+		&:last-child {
+			justify-content: flex-end;
 		}
 
 		&.-hideOnMobile {

From dbade82682a6c8c50ce378db60901b67b4185557 Mon Sep 17 00:00:00 2001
From: Sebastian Dawidziak <sebastian@tweetgeek.pl>
Date: Thu, 11 Jan 2024 16:19:33 +0100
Subject: [PATCH 4/7] add containers option

---
 .../SurveyQuestions/SurveyQuestion.consts.ts  |  5 ++
 .../SurveyQuestionScale.stories.ts            | 34 +++++++++---
 .../SurveyQuestionScale.vue                   | 53 +++++++++++++++----
 3 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts b/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts
index 269340009..9ec42f942 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts
+++ b/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts
@@ -2,3 +2,8 @@ export const SURVEY_QUESTION_STATES = {
 	DEFAULT: 'default',
 	DISABLED: 'disabled',
 } as const;
+
+export const SURVEY_QUESTION_CONTAINERS = {
+	ONE: 'one',
+	TWO: 'two',
+} as const;
diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
index 1df61b337..11e057d2a 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
@@ -1,6 +1,6 @@
 import SurveyQuestionScale from './SurveyQuestionScale.vue';
 import { SURVEY_TOGGLE_MEANINGS } from '../../SurveyToggle';
-import { SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
+import { SURVEY_QUESTION_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
@@ -15,7 +15,7 @@ const StoryTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }
 		return { ...args };
 	},
 	template:
-		'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
+		'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" :containers="containers" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
 		'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
 		'</survey-question-scale>',
 	methods: {
@@ -69,6 +69,7 @@ const args = {
 			standalone: true,
 		},
 	],
+	containers: SURVEY_QUESTION_CONTAINERS.TWO,
 } as Args;
 
 const argTypes = {
@@ -76,6 +77,10 @@ const argTypes = {
 	selectedValue: { control: false },
 	explanation: { control: { type: 'text' } },
 	scaleOptions: { control: { type: 'object' } },
+	containers: {
+		control: { type: 'select' },
+		options: Object.values(SURVEY_QUESTION_CONTAINERS),
+	},
 	state: {
 		control: { type: 'select', options: Object.values(SURVEY_QUESTION_STATES) },
 		defaultValue: SURVEY_QUESTION_STATES.DEFAULT,
@@ -111,7 +116,7 @@ const StoryLimitedWidthTemplate: StoryFn<typeof SurveyQuestionScale> = (args, {
 		return { ...args };
 	},
 	template:
-		'<div style="max-width: 600px"><survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
+		'<div style="max-width: 600px"><survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :containers="containers" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
 		'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
 		'</survey-question-scale></div>',
 	methods: {
@@ -125,7 +130,13 @@ const StoryLimitedWidthTemplate: StoryFn<typeof SurveyQuestionScale> = (args, {
 });
 
 export const LimitedWidth = StoryLimitedWidthTemplate.bind({});
-LimitedWidth.argTypes = argTypesDisabled;
+LimitedWidth.argTypes = {
+	...argTypesDisabled,
+	containers: {
+		control: { type: 'select' },
+		options: Object.values(SURVEY_QUESTION_CONTAINERS),
+	},
+} as ArgTypes;
 
 LimitedWidth.args = {
 	title: "Main question write here if it's long it will collapse.",
@@ -166,6 +177,7 @@ LimitedWidth.args = {
 			standalone: true,
 		},
 	],
+	containers: SURVEY_QUESTION_CONTAINERS.TWO,
 } as Args;
 
 const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }) => ({
@@ -223,7 +235,7 @@ const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args, {
 		];
 	},
 	template:
-		'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" @select-change="selectedValueUpdate" />',
+		'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" :containers="containers" @select-change="selectedValueUpdate" />',
 	methods: {
 		selectedValueUpdate(selectedValue) {
 			updateArgs({ selectedValue });
@@ -232,4 +244,14 @@ const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args, {
 });
 
 export const SevenOptions = StorySevenOptionsTemplate.bind({});
-SevenOptions.argTypes = argTypesDisabled;
+SevenOptions.argTypes = {
+	...argTypesDisabled,
+	containers: {
+		control: { type: 'select' },
+		options: Object.values(SURVEY_QUESTION_CONTAINERS),
+	},
+} as ArgTypes;
+
+SevenOptions.args = {
+	containers: SURVEY_QUESTION_CONTAINERS.ONE,
+} as Args;
diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
index fe8eb8fda..7572ca228 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
@@ -24,15 +24,27 @@
 						@click="showModal = true"
 					/>
 				</div>
-				<div class="surveyQuestionScale__content">
-					<div class="surveyQuestionScale__container">
+				<div
+					class="surveyQuestionScale__content"
+					:class="{ '-oneContainer': containers === SURVEY_QUESTION_CONTAINERS.ONE }"
+				>
+					<div
+						class="surveyQuestionScale__container"
+						:class="{
+							'-oneContainer': containers === SURVEY_QUESTION_CONTAINERS.ONE,
+						}"
+					>
 						<template
 							v-for="(option, index) in scaleOptions"
 							:key="`surveyQuestionScale-${index}`"
 						>
 							<div
 								class="surveyQuestionScale__toggle"
-								:class="{ '-visibleOnMobile': option.standalone }"
+								:class="{
+									'-visibleOnMobile':
+										option.standalone &&
+										containers === SURVEY_QUESTION_CONTAINERS.TWO,
+								}"
 							>
 								<survey-toggle
 									:meaning="option.meaning"
@@ -55,8 +67,11 @@
 					</div>
 
 					<div
-						v-if="standaloneOptions.length > 0"
-						class="surveyQuestionScale__container -hideOnMobile"
+						v-if="
+							standaloneOptions.length > 0 &&
+							containers === SURVEY_QUESTION_CONTAINERS.TWO
+						"
+						class="surveyQuestionScale__container -justifyEnd -hideOnMobile"
 					>
 						<template
 							v-for="(option, index) in standaloneOptions"
@@ -142,9 +157,17 @@
 		padding: $space-s $space-xxs;
 
 		@media #{breakpoint-s()} {
-			overflow-x: initial;
-			justify-content: center;
+			gap: $space-l;
 			padding: $space-s $space-l;
+
+			&:not(.-oneContainer) {
+				justify-content: center;
+				overflow-x: initial;
+			}
+		}
+
+		&.-oneContainer {
+			overflow-x: auto;
 		}
 	}
 
@@ -187,10 +210,14 @@
 		flex-direction: row;
 		gap: $space-l;
 
-		&:last-child {
+		&.-justifyEnd {
 			justify-content: flex-end;
 		}
 
+		&.-oneContainer {
+			justify-content: space-between;
+		}
+
 		&.-hideOnMobile {
 			display: none;
 
@@ -221,7 +248,7 @@ import SurveyToggle, {
 	SURVEY_TOGGLE_STATES,
 	SURVEY_TOGGLE_STATUSES,
 } from '../../SurveyToggle';
-import { SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
+import { SURVEY_QUESTION_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 import SurveyQuestionTextarea from '../';
 import { SurveyQuestionScaleOption } from '../SurveyQuestion.domain';
 import { randomString } from '../../../utils/string';
@@ -271,6 +298,13 @@ export default {
 			type: String,
 			default: null,
 		},
+		containers: {
+			type: String,
+			default: SURVEY_QUESTION_CONTAINERS.TWO,
+			validator(containers) {
+				return Object.values(SURVEY_QUESTION_CONTAINERS).includes(containers);
+			},
+		},
 	},
 	emits: ['elaboration-change', 'select-change'],
 	data() {
@@ -285,6 +319,7 @@ export default {
 			SURVEY_TOGGLE_STATES: Object.freeze(SURVEY_TOGGLE_STATES),
 			SURVEY_TOGGLE_STATUSES: Object.freeze(SURVEY_TOGGLE_STATUSES),
 			SURVEY_QUESTION_STATES: Object.freeze(SURVEY_QUESTION_STATES),
+			SURVEY_QUESTION_CONTAINERS: Object.freeze(SURVEY_QUESTION_CONTAINERS),
 		};
 	},
 	computed: {

From 30f8c28e6ff0e58b26c403b5d000d28a1fb0d8fc Mon Sep 17 00:00:00 2001
From: Sebastian Dawidziak <sebastian@tweetgeek.pl>
Date: Thu, 11 Jan 2024 16:22:06 +0100
Subject: [PATCH 5/7] remove unused css rules

---
 .../SurveyQuestionScale/SurveyQuestionScale.vue          | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
index 7572ca228..83164c687 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
@@ -176,15 +176,6 @@
 		justify-content: center;
 	}
 
-	&__toggleSeparator {
-		display: none;
-
-		@media #{breakpoint-s()} {
-			display: block;
-			width: $space-l;
-		}
-	}
-
 	&__separator {
 		border-bottom: none;
 		border-top: 1px solid $color-neutral-border-weak;

From 1131db1d4c59b3665af83e8cea195ae41a922a16 Mon Sep 17 00:00:00 2001
From: Sebastian Dawidziak <sebastian@tweetgeek.pl>
Date: Fri, 12 Jan 2024 12:10:10 +0100
Subject: [PATCH 6/7] fix args order

---
 .../SurveyQuestionScale.stories.ts            | 96 +++++++++----------
 1 file changed, 47 insertions(+), 49 deletions(-)

diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
index 11e057d2a..0bc2826d8 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
@@ -37,6 +37,7 @@ const args = {
 	explanation:
 		'<h3 style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>\n<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',
 	placeholder: 'Wpisz swoją odpowiedź',
+	containers: SURVEY_QUESTION_CONTAINERS.TWO,
 	scaleOptions: [
 		{
 			value: '1',
@@ -69,18 +70,17 @@ const args = {
 			standalone: true,
 		},
 	],
-	containers: SURVEY_QUESTION_CONTAINERS.TWO,
 } as Args;
 
 const argTypes = {
 	elaborationValue: { control: { type: 'text' } },
 	selectedValue: { control: false },
 	explanation: { control: { type: 'text' } },
-	scaleOptions: { control: { type: 'object' } },
 	containers: {
 		control: { type: 'select' },
 		options: Object.values(SURVEY_QUESTION_CONTAINERS),
 	},
+	scaleOptions: { control: { type: 'object' } },
 	state: {
 		control: { type: 'select', options: Object.values(SURVEY_QUESTION_STATES) },
 		defaultValue: SURVEY_QUESTION_STATES.DEFAULT,
@@ -145,6 +145,7 @@ LimitedWidth.args = {
 	explanation:
 		'<h3 class="modalHeader" style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>\n<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',
 	placeholder: 'Wpisz swoją odpowiedź',
+	containers: SURVEY_QUESTION_CONTAINERS.TWO,
 	scaleOptions: [
 		{
 			value: '1',
@@ -177,7 +178,6 @@ LimitedWidth.args = {
 			standalone: true,
 		},
 	],
-	containers: SURVEY_QUESTION_CONTAINERS.TWO,
 } as Args;
 
 const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }) => ({
@@ -188,52 +188,6 @@ const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args, {
 	data() {
 		return { elaboration: '' };
 	},
-	created() {
-		this.scaleOptions = [
-			{
-				value: '1',
-				label: 'Nie zgadzam się',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '1',
-			},
-			{
-				value: '2',
-				label: '',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '2',
-			},
-			{
-				value: '3',
-				label: '',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '3',
-			},
-			{
-				value: '4',
-				label: 'Trochę',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '4',
-			},
-			{
-				value: '5',
-				label: '',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '5',
-			},
-			{
-				value: '6',
-				label: '',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '6',
-			},
-			{
-				value: '7',
-				label: 'Zgadzam się',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '7',
-			},
-		];
-	},
 	template:
 		'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" :containers="containers" @select-change="selectedValueUpdate" />',
 	methods: {
@@ -254,4 +208,48 @@ SevenOptions.argTypes = {
 
 SevenOptions.args = {
 	containers: SURVEY_QUESTION_CONTAINERS.ONE,
+	scaleOptions: [
+		{
+			value: '1',
+			label: 'Nie zgadzam się',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '1',
+		},
+		{
+			value: '2',
+			label: '',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '2',
+		},
+		{
+			value: '3',
+			label: '',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '3',
+		},
+		{
+			value: '4',
+			label: 'Trochę',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '4',
+		},
+		{
+			value: '5',
+			label: '',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '5',
+		},
+		{
+			value: '6',
+			label: '',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '6',
+		},
+		{
+			value: '7',
+			label: 'Zgadzam się',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '7',
+		},
+	],
 } as Args;

From 688440a022f29c6f7095f1520d6f334b3f1f05c8 Mon Sep 17 00:00:00 2001
From: rogatty <7030884+rogatty@users.noreply.github.com>
Date: Fri, 12 Jan 2024 15:55:10 +0100
Subject: [PATCH 7/7] IT-5549 | minor rename

---
 .../SurveyQuestions/SurveyQuestion.consts.ts  |  2 +-
 .../SurveyQuestionScale.stories.ts            | 14 +++++-----
 .../SurveyQuestionScale.vue                   | 26 +++++++++----------
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts b/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts
index 9ec42f942..f292f2593 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts
+++ b/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts
@@ -3,7 +3,7 @@ export const SURVEY_QUESTION_STATES = {
 	DISABLED: 'disabled',
 } as const;
 
-export const SURVEY_QUESTION_CONTAINERS = {
+export const SURVEY_QUESTION_SCALE_CONTAINERS = {
 	ONE: 'one',
 	TWO: 'two',
 } as const;
diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
index 0bc2826d8..0df378bc9 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
@@ -1,6 +1,6 @@
 import SurveyQuestionScale from './SurveyQuestionScale.vue';
 import { SURVEY_TOGGLE_MEANINGS } from '../../SurveyToggle';
-import { SURVEY_QUESTION_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
+import { SURVEY_QUESTION_SCALE_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
@@ -37,7 +37,7 @@ const args = {
 	explanation:
 		'<h3 style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>\n<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',
 	placeholder: 'Wpisz swoją odpowiedź',
-	containers: SURVEY_QUESTION_CONTAINERS.TWO,
+	containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
 	scaleOptions: [
 		{
 			value: '1',
@@ -78,7 +78,7 @@ const argTypes = {
 	explanation: { control: { type: 'text' } },
 	containers: {
 		control: { type: 'select' },
-		options: Object.values(SURVEY_QUESTION_CONTAINERS),
+		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
 	},
 	scaleOptions: { control: { type: 'object' } },
 	state: {
@@ -134,7 +134,7 @@ LimitedWidth.argTypes = {
 	...argTypesDisabled,
 	containers: {
 		control: { type: 'select' },
-		options: Object.values(SURVEY_QUESTION_CONTAINERS),
+		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
 	},
 } as ArgTypes;
 
@@ -145,7 +145,7 @@ LimitedWidth.args = {
 	explanation:
 		'<h3 class="modalHeader" style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>\n<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',
 	placeholder: 'Wpisz swoją odpowiedź',
-	containers: SURVEY_QUESTION_CONTAINERS.TWO,
+	containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
 	scaleOptions: [
 		{
 			value: '1',
@@ -202,12 +202,12 @@ SevenOptions.argTypes = {
 	...argTypesDisabled,
 	containers: {
 		control: { type: 'select' },
-		options: Object.values(SURVEY_QUESTION_CONTAINERS),
+		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
 	},
 } as ArgTypes;
 
 SevenOptions.args = {
-	containers: SURVEY_QUESTION_CONTAINERS.ONE,
+	containers: SURVEY_QUESTION_SCALE_CONTAINERS.ONE,
 	scaleOptions: [
 		{
 			value: '1',
diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
index 83164c687..8fa219d51 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
@@ -41,7 +41,7 @@
 							<div
 								class="surveyQuestionScale__toggle"
 								:class="{
-									'-visibleOnMobile':
+									'-hideOnDesktop':
 										option.standalone &&
 										containers === SURVEY_QUESTION_CONTAINERS.TWO,
 								}"
@@ -174,6 +174,14 @@
 	&__toggle {
 		display: flex;
 		justify-content: center;
+
+		&.-hideOnDesktop {
+			display: flex;
+
+			@media #{breakpoint-s()} {
+				display: none;
+			}
+		}
 	}
 
 	&__separator {
@@ -218,14 +226,6 @@
 		}
 	}
 }
-
-.-visibleOnMobile {
-	display: flex;
-
-	@media #{breakpoint-s()} {
-		display: none;
-	}
-}
 </style>
 
 <script lang="ts">
@@ -239,7 +239,7 @@ import SurveyToggle, {
 	SURVEY_TOGGLE_STATES,
 	SURVEY_TOGGLE_STATUSES,
 } from '../../SurveyToggle';
-import { SURVEY_QUESTION_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
+import { SURVEY_QUESTION_SCALE_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 import SurveyQuestionTextarea from '../';
 import { SurveyQuestionScaleOption } from '../SurveyQuestion.domain';
 import { randomString } from '../../../utils/string';
@@ -291,9 +291,9 @@ export default {
 		},
 		containers: {
 			type: String,
-			default: SURVEY_QUESTION_CONTAINERS.TWO,
+			default: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
 			validator(containers) {
-				return Object.values(SURVEY_QUESTION_CONTAINERS).includes(containers);
+				return Object.values(SURVEY_QUESTION_SCALE_CONTAINERS).includes(containers);
 			},
 		},
 	},
@@ -310,7 +310,7 @@ export default {
 			SURVEY_TOGGLE_STATES: Object.freeze(SURVEY_TOGGLE_STATES),
 			SURVEY_TOGGLE_STATUSES: Object.freeze(SURVEY_TOGGLE_STATUSES),
 			SURVEY_QUESTION_STATES: Object.freeze(SURVEY_QUESTION_STATES),
-			SURVEY_QUESTION_CONTAINERS: Object.freeze(SURVEY_QUESTION_CONTAINERS),
+			SURVEY_QUESTION_CONTAINERS: Object.freeze(SURVEY_QUESTION_SCALE_CONTAINERS),
 		};
 	},
 	computed: {