@bethinkpl/design-system 21.0.2 → 22.0.1

package/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="blockadeStatus" :class="statusClass">
-		<icon :size="ICON_SIZES.X_SMALL" :icon="icon" class="blockadeStatus__icon" />
-		<span class="blockadeStatus__text">{{ text }}</span>
+	<div class="ds-blockadeStatus" :class="statusClass">
+		<icon :size="ICON_SIZES.X_SMALL" :icon="icon" class="ds-blockadeStatus__icon" />
+		<span class="ds-blockadeStatus__text">{{ text }}</span>
 	</div>
 </template>
 
@@ -10,7 +10,7 @@
 @import '../../../../styles/settings/colors/tokens';
 @import '../../../../styles/settings/typography/tokens';
 
-.blockadeStatus {
+.ds-blockadeStatus {
 	$self: &;
 
 	align-items: center;
@@ -22,7 +22,7 @@
 		margin-right: $space-4xs;
 	}
 
-	&.-active {
+	&.-ds-active {
 		color: $color-danger-text;
 		#{$self}__icon {
 			color: $color-danger-icon;
@@ -36,8 +36,7 @@
 </style>
 
 <script lang="ts">
-import Icon from '../../Icons/Icon';
-import { ICONS, ICON_SIZES } from '../../Icons/Icon';
+import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { COURSE_BLOCKADE_ACCESS_STATUS } from '../../../consts/user';
 
 export default {
@@ -66,7 +65,7 @@ export default {
 		},
 		statusClass() {
 			if (this.status === COURSE_BLOCKADE_ACCESS_STATUS.ACTIVE) {
-				return '-active';
+				return '-ds-active';
 			}
 			return '';
 		},

package/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
-		class="surveyQuestionOpenEnded"
-		:class="{ '-disabled': state === SURVEY_QUESTION_STATES.DISABLED }"
+		class="ds-surveyQuestionOpenEnded"
+		:class="{ '-ds-disabled': state === SURVEY_QUESTION_STATES.DISABLED }"
 	>
 		<ds-modal v-if="showModal" @close-modal="showModal = false">
 			<slot name="explanation" />
@@ -15,13 +15,13 @@
 		</ds-modal>
 		<ds-card>
 			<template #content>
-				<div class="surveyQuestionOpenEnded__header">
-					<label class="surveyQuestionOpenEnded__title" :for="inputId">
+				<div class="ds-surveyQuestionOpenEnded__header">
+					<label class="ds-surveyQuestionOpenEnded__title" :for="inputId">
 						{{ title }}
 					</label>
 					<icon-button
 						v-if="$slots.explanation"
-						class="surveyQuestionOpenEnded__explanation"
+						class="ds-surveyQuestionOpenEnded__explanation"
 						:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
 						:icon="ICONS.FA_CIRCLE_QUESTION"
 						:size="ICON_SIZES.MEDIUM"
@@ -29,10 +29,10 @@
 						@click="showModal = true"
 					/>
 				</div>
-				<div class="surveyQuestionOpenEnded__content">
+				<div class="ds-surveyQuestionOpenEnded__content">
 					<survey-question-textarea
 						:id="inputId"
-						class="surveyQuestionOpenEnded__input"
+						class="ds-surveyQuestionOpenEnded__input"
 						:disabled="state === SURVEY_QUESTION_STATES.DISABLED"
 						:value="value"
 						:placeholder="placeholder"
@@ -50,7 +50,7 @@
 @import '../../../../styles/settings/colors/tokens';
 @import '../../../../styles/settings/typography/tokens';
 
-.surveyQuestionOpenEnded {
+.ds-surveyQuestionOpenEnded {
 	&__header {
 		display: flex;
 		justify-content: space-between;

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.spec.ts

@@ -55,32 +55,34 @@ describe('SurveyQuestionScale', () => {
 	it('should render surveyQuestionScale class', () => {
 		const component = createComponent();
 
-		expect(component.find('.surveyQuestionScale').exists()).toBe(true);
+		expect(component.find('.ds-surveyQuestionScale').exists()).toBe(true);
 	});
 
 	it('should render text from title prop', () => {
 		const title = 'Wspłynąłem na suchego przestwór oceanu';
 		const component = createComponent({ title });
 
-		expect(component.find('.surveyQuestionScale__title').text()).toContain(title);
+		expect(component.find('.ds-surveyQuestionScale__title').text()).toContain(title);
 	});
 
 	it("Don't show explanation icon when slot is empty", async () => {
 		const component = createComponent();
 
-		expect(component.find('.surveyQuestionScale__explanation').exists()).toBe(false);
+		expect(component.find('.ds-surveyQuestionScale__explanation').exists()).toBe(false);
 	});
 
 	it('Show explanation icon when slot is not empty', async () => {
 		const component = createComponent({ explanation: 'test' });
 
-		expect(component.find('.surveyQuestionScale__explanation').exists()).toBe(true);
+		expect(component.find('.ds-surveyQuestionScale__explanation').exists()).toBe(true);
 	});
 
 	it('click on survey toggle should emit "selectChange" event', async () => {
 		const component = createComponent({ scaleOptions: OPTIONS });
 
-		await component.find('.surveyQuestionScale__toggle .surveyToggle__toggle').trigger('click');
+		await component
+			.find('.ds-surveyQuestionScale__toggle .ds-surveyToggle__toggle')
+			.trigger('click');
 
 		expect(component.emitted()?.['select-change']?.[0]).toBeDefined();
 	});
@@ -88,6 +90,6 @@ describe('SurveyQuestionScale', () => {
 	it('should render SurveyToggle for each item in scaleOptions prop', () => {
 		const component = createComponent({ scaleOptions: OPTIONS });
 
-		expect(component.findAll('.surveyToggle').length).toBe(OPTIONS.length);
+		expect(component.findAll('.ds-surveyToggle').length).toBe(OPTIONS.length);
 	});
 });

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="surveyQuestionScale">
+	<div class="ds-surveyQuestionScale">
 		<ds-modal v-if="showModal" @close-modal="showModal = false">
 			<slot name="explanation" />
 			<template #footer>
@@ -12,11 +12,11 @@
 		</ds-modal>
 		<ds-card>
 			<template #content>
-				<div class="surveyQuestionScale__header">
-					<span class="surveyQuestionScale__title">{{ title }}</span>
+				<div class="ds-surveyQuestionScale__header">
+					<span class="ds-surveyQuestionScale__title">{{ title }}</span>
 					<icon-button
 						v-if="$slots.explanation"
-						class="surveyQuestionScale__explanation"
+						class="ds-surveyQuestionScale__explanation"
 						:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
 						:icon="ICONS.FA_CIRCLE_QUESTION"
 						:size="ICON_SIZES.MEDIUM"
@@ -25,23 +25,23 @@
 					/>
 				</div>
 				<div
-					class="surveyQuestionScale__content"
+					class="ds-surveyQuestionScale__content"
 					:class="{ '-oneContainer': containers === SURVEY_QUESTION_CONTAINERS.ONE }"
 				>
 					<div
-						class="surveyQuestionScale__container"
+						class="ds-surveyQuestionScale__container"
 						:class="{
-							'-oneContainer': containers === SURVEY_QUESTION_CONTAINERS.ONE,
+							'-ds-oneContainer': containers === SURVEY_QUESTION_CONTAINERS.ONE,
 						}"
 					>
 						<template
 							v-for="(option, index) in scaleOptions"
-							:key="`surveyQuestionScale-${index}`"
+							:key="`ds-surveyQuestionScale-${index}`"
 						>
 							<div
-								class="surveyQuestionScale__toggle"
+								class="ds-surveyQuestionScale__toggle"
 								:class="{
-									'-hideOnDesktop':
+									'-ds-hideOnDesktop':
 										option.standalone &&
 										containers === SURVEY_QUESTION_CONTAINERS.TWO,
 								}"
@@ -71,13 +71,13 @@
 							standaloneOptions.length > 0 &&
 							containers === SURVEY_QUESTION_CONTAINERS.TWO
 						"
-						class="surveyQuestionScale__container -justifyEnd -hideOnMobile"
+						class="ds-surveyQuestionScale__container -ds-justifyEnd -ds-hideOnMobile"
 					>
 						<template
 							v-for="(option, index) in standaloneOptions"
-							:key="`surveyQuestionScale-standalone-${index}`"
+							:key="`ds-surveyQuestionScale-standalone-${index}`"
 						>
-							<div class="surveyQuestionScale__toggle">
+							<div class="ds-surveyQuestionScale__toggle">
 								<survey-toggle
 									:meaning="option.meaning"
 									:content-text="option.content"
@@ -100,15 +100,15 @@
 				</div>
 
 				<template v-if="selectedValue !== null && elaborationLabel !== null">
-					<hr class="surveyQuestionScale__separator" />
-					<div class="surveyQuestionScale__elaboration">
-						<label class="surveyQuestionScale__elaborationLabel" :for="inputId">
+					<hr class="ds-surveyQuestionScale__separator" />
+					<div class="ds-surveyQuestionScale__elaboration">
+						<label class="ds-surveyQuestionScale__elaborationLabel" :for="inputId">
 							{{ elaborationLabel }}
 						</label>
 						<survey-question-textarea
 							:id="inputId"
 							:value="elaborationValue"
-							class="surveyQuestionScale__elaborationInput"
+							class="ds-surveyQuestionScale__elaborationInput"
 							:placeholder="placeholder"
 							:disabled="state === SURVEY_QUESTION_STATES.DISABLED"
 							@input="$emit('elaboration-change', $event)"
@@ -129,7 +129,7 @@
 @import '../../../../styles/settings/colors/tokens';
 @import '../../../../styles/settings/typography/tokens';
 
-.surveyQuestionScale {
+.ds-surveyQuestionScale {
 	&__header {
 		@include heading-m-default-regular;
 
@@ -160,13 +160,13 @@
 			gap: $space-l;
 			padding: $space-s $space-l;
 
-			&:not(.-oneContainer) {
+			&:not(.-ds-oneContainer) {
 				justify-content: center;
 				overflow-x: initial;
 			}
 		}
 
-		&.-oneContainer {
+		&.-ds-oneContainer {
 			overflow-x: auto;
 		}
 	}
@@ -175,7 +175,7 @@
 		display: flex;
 		justify-content: center;
 
-		&.-hideOnDesktop {
+		&.-ds-hideOnDesktop {
 			display: flex;
 
 			@media #{breakpoint-s()} {
@@ -209,15 +209,15 @@
 		flex-direction: row;
 		gap: $space-l;
 
-		&.-justifyEnd {
+		&.-ds-justifyEnd {
 			justify-content: flex-end;
 		}
 
-		&.-oneContainer {
+		&.-ds-oneContainer {
 			justify-content: space-between;
 		}
 
-		&.-hideOnMobile {
+		&.-ds-hideOnMobile {
 			display: none;
 
 			@media #{breakpoint-s()} {

package/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue

@@ -1,7 +1,7 @@
 <template>
 	<textarea
 		ref="textarea"
-		class="surveyQuestionTextarea"
+		class="ds-surveyQuestionTextarea"
 		:disabled="disabled"
 		:placeholder="placeholder"
 		:value="value"
@@ -15,7 +15,7 @@
 @import '../../../styles/settings/colors/tokens';
 @import '../../../styles/settings/typography/tokens';
 
-.surveyQuestionTextarea {
+.ds-surveyQuestionTextarea {
 	@include formText-s-default-regular;
 
 	border: 1px solid $color-neutral-border-weak;

package/lib/js/components/SurveyToggle/SurveyToggle.spec.ts

@@ -35,20 +35,20 @@ describe('SurveyToggle', () => {
 	it('should render surveyToggle class', () => {
 		const component = createComponent();
 
-		expect(component.find('.surveyToggle').exists()).toBe(true);
+		expect(component.find('.ds-surveyToggle').exists()).toBe(true);
 	});
 
 	it('should render text from label prop', () => {
 		const label = 'Wspłynąłem na suchego przestwór oceanu';
 		const component = createComponent({ label });
 
-		expect(component.find('.surveyToggle__label').text()).toContain(label);
+		expect(component.find('.ds-surveyToggle__label').text()).toContain(label);
 	});
 
 	it('after click on toggle component should emit "click" event', async () => {
 		const component = createComponent();
 
-		await component.find('.surveyToggle__toggle').trigger('click');
+		await component.find('.ds-surveyToggle__toggle').trigger('click');
 
 		expect(component.emitted()?.click?.[0]).toBeDefined();
 	});
@@ -70,6 +70,6 @@ describe('SurveyToggle', () => {
 			color: SURVEY_TOGGLE_MEANINGS.PRIMARY,
 			contentText,
 		});
-		expect(component.find('.surveyToggle__content').text()).toContain(contentText);
+		expect(component.find('.ds-surveyToggle__content').text()).toContain(contentText);
 	});
 });

package/lib/js/components/SurveyToggle/SurveyToggle.vue

@@ -1,26 +1,30 @@
 <template>
 	<div
-		class="surveyToggle"
+		class="ds-surveyToggle"
 		:class="{
-			'-primary-selected': isPrimarySelected,
-			'-primary': isPrimary,
-			'-neutral': isNeutral,
-			'-neutral-selected': isNeutralSelected,
-			'-disabled': state === SURVEY_TOGGLE_STATES.DISABLED,
-			'-hovered': isHoveredState,
+			'-ds-primary-selected': isPrimarySelected,
+			'-ds-primary': isPrimary,
+			'-ds-neutral': isNeutral,
+			'-ds-neutral-selected': isNeutralSelected,
+			'-ds-disabled': state === SURVEY_TOGGLE_STATES.DISABLED,
+			'-ds-hovered': isHoveredState,
 		}"
 	>
-		<div class="surveyToggle__toggle" @mouseover="hovered = true" @mouseleave="hovered = false">
-			<div class="surveyToggle__ring">
-				<span v-if="isPrimarySelected || isNeutralSelected" class="surveyToggle__icon">
+		<div
+			class="ds-surveyToggle__toggle"
+			@mouseover="hovered = true"
+			@mouseleave="hovered = false"
+		>
+			<div class="ds-surveyToggle__ring">
+				<span v-if="isPrimarySelected || isNeutralSelected" class="ds-surveyToggle__icon">
 					<ds-icon :icon="selectedIcon" :size="ICON_SIZES.X_SMALL" />
 				</span>
-				<span v-else class="surveyToggle__content">
+				<span v-else class="ds-surveyToggle__content">
 					{{ contentText }}
 				</span>
 			</div>
 		</div>
-		<div v-if="label" class="surveyToggle__label">{{ label }}</div>
+		<div v-if="label" class="ds-surveyToggle__label">{{ label }}</div>
 	</div>
 </template>
 
@@ -80,7 +84,7 @@ $survey-toggle-colors: (
 @mixin setSurveyToggleOtherStates($background, $icon: null) {
 	background-color: $background;
 
-	.surveyToggle__icon {
+	.ds-surveyToggle__icon {
 		color: $icon;
 	}
 }
@@ -95,11 +99,11 @@ $survey-toggle-colors: (
 	}
 }
 
-.surveyToggle {
+.ds-surveyToggle {
 	$self: &;
 
 	@each $color-name, $color-map in $survey-toggle-colors {
-		&.-#{$color-name} {
+		&.-ds-#{$color-name} {
 			@include setSurveyToggleNormalState(
 				$self,
 				map-get($color-map, 'background'),
@@ -111,13 +115,13 @@ $survey-toggle-colors: (
 			}
 
 			&:hover,
-			&.-hovered {
+			&.-ds-hovered {
 				#{$self}__toggle {
 					@include setSurveyToggleOtherStates(map-get($color-map, 'background-hovered'));
 				}
 			}
 
-			&.-disabled {
+			&.-ds-disabled {
 				#{$self}__toggle {
 					@include setSurveyToggleOtherStates(
 						map-get($color-map, 'disabled', 'background'),
@@ -161,7 +165,7 @@ $survey-toggle-colors: (
 			box-shadow ease-in-out $default-transition-time;
 		width: $survey-toggle-size;
 
-		.-hovered & {
+		.-ds-hovered & {
 			@include setSurveyToggleOtherStates(
 				map-get($survey-toggle-colors, 'primary', 'background-hovered')
 			);
@@ -181,7 +185,7 @@ $survey-toggle-colors: (
 		width: 100%;
 	}
 
-	&.-disabled {
+	&.-ds-disabled {
 		pointer-events: none;
 	}
 

package/lib/js/components/Switch/Switch.vue

@@ -1,67 +1,66 @@
 <template>
 	<div
-		class="switch"
+		class="ds-switch"
 		:class="{
-			'-small': size === SWITCH_SIZE.SMALL,
-			'-medium': size === SWITCH_SIZE.MEDIUM,
-
-			'-rounded': radius === SWITCH_RADIUSES.ROUNDED,
-
-			'-disabled': state === SWITCH_STATE.DISABLED,
+			'-ds-small': size === SWITCH_SIZE.SMALL,
+			'-ds-medium': size === SWITCH_SIZE.MEDIUM,
+			'-ds-rounded': radius === SWITCH_RADIUSES.ROUNDED,
+			'-ds-disabled': state === SWITCH_STATE.DISABLED,
 		}"
+		@click="onSwitch"
 	>
 		<div
-			class="switch__item -left"
+			class="ds-switch__item -ds-left"
 			:class="{
-				'-clickable': currentSide !== SWITCH_SIDE.LEFT && state !== SWITCH_STATE.DISABLED,
-				'-selected': currentSide === SWITCH_SIDE.LEFT,
+				'-ds-clickable':
+					currentSide !== SWITCH_SIDE.LEFT && state !== SWITCH_STATE.DISABLED,
+				'-ds-selected': currentSide === SWITCH_SIDE.LEFT,
 			}"
 			:title="labelLeft"
-			@click="onSwitch(SWITCH_SIDE.LEFT)"
 		>
 			<ds-icon
 				v-if="iconLeft"
-				class="switch__icon"
+				class="ds-switch__icon"
 				:icon="iconLeft"
 				:size="ICON_SIZES.XX_SMALL"
 			/>
-			<div v-if="labelLeft" class="switch__label">
+			<div v-if="labelLeft" class="ds-switch__label">
 				{{ labelLeft }}
 			</div>
 		</div>
 		<div
-			class="switch__item -right"
+			class="ds-switch__item -ds-right"
 			:class="{
-				'-clickable': currentSide !== SWITCH_SIDE.RIGHT && state !== SWITCH_STATE.DISABLED,
-				'-selected': currentSide === SWITCH_SIDE.RIGHT,
+				'-ds-clickable':
+					currentSide !== SWITCH_SIDE.RIGHT && state !== SWITCH_STATE.DISABLED,
+				'-ds-selected': currentSide === SWITCH_SIDE.RIGHT,
 			}"
 			:title="labelRight"
-			@click="onSwitch(SWITCH_SIDE.RIGHT)"
 		>
 			<ds-icon
 				v-if="iconRight"
-				class="switch__icon"
+				class="ds-switch__icon"
 				:icon="iconRight"
 				:size="ICON_SIZES.XX_SMALL"
 			/>
-			<div v-if="labelRight" class="switch__label">
+			<div v-if="labelRight" class="ds-switch__label">
 				{{ labelRight }}
 			</div>
 		</div>
 		<div
-			class="switch__item -selection"
+			class="ds-switch__item -ds-selection"
 			:class="{
-				'-left': currentSide === SWITCH_SIDE.LEFT,
-				'-right': currentSide === SWITCH_SIDE.RIGHT,
+				'-ds-left': currentSide === SWITCH_SIDE.LEFT,
+				'-ds-right': currentSide === SWITCH_SIDE.RIGHT,
 			}"
 		>
 			<ds-icon
 				v-if="currentIcon"
-				class="switch__icon"
+				class="ds-switch__icon"
 				:icon="currentIcon"
 				:size="ICON_SIZES.XX_SMALL"
 			/>
-			<div v-if="currentLabel" class="switch__label">{{ currentLabel }}</div>
+			<div v-if="currentLabel" class="ds-switch__label">{{ currentLabel }}</div>
 		</div>
 	</div>
 </template>
@@ -75,7 +74,7 @@
 
 $switch-transition: all $default-transition-time ease-out;
 
-.switch {
+.ds-switch {
 	$root: &;
 
 	background-color: $color-default-background;
@@ -85,6 +84,10 @@ $switch-transition: all $default-transition-time ease-out;
 	max-width: 100%;
 	position: relative;
 
+	/* Prevent text select */
+	-webkit-user-select: none; /* Safari */
+	user-select: none;
+
 	&__icon {
 		color: $color-neutral-icon;
 	}
@@ -98,7 +101,7 @@ $switch-transition: all $default-transition-time ease-out;
 		white-space: nowrap;
 	}
 
-	.-selected {
+	.-ds-selected {
 		#{$root}__icon {
 			color: $color-primary-icon;
 		}
@@ -128,15 +131,15 @@ $switch-transition: all $default-transition-time ease-out;
 		transition: $switch-transition;
 		z-index: 2;
 
-		&.-left {
+		&.-ds-left {
 			margin: -1px 0 -1px -1px;
 		}
 
-		&.-right {
+		&.-ds-right {
 			margin: -1px -1px -1px 0;
 		}
 
-		&.-selection {
+		&.-ds-selection {
 			background-color: $color-primary-background;
 			border: 1px solid $color-primary-border;
 			position: absolute;
@@ -154,29 +157,29 @@ $switch-transition: all $default-transition-time ease-out;
 				width: max-content;
 			}
 
-			&.-left {
+			&.-ds-left {
 				left: 0;
 			}
 
-			&.-right {
+			&.-ds-right {
 				left: calc(100% + 1px);
 				transform: translateX(-100%);
 			}
 		}
 
-		&.-selected,
-		&.-selection:hover {
+		&.-ds-selected,
+		&.-ds-selection:hover {
 			cursor: default;
 			flex-shrink: 0;
 			text-overflow: initial;
 		}
 
-		&.-clickable:hover {
+		&.-ds-clickable:hover {
 			background-color: $color-neutral-background-ghost-hovered;
 		}
 	}
 
-	&.-rounded {
+	&.-ds-rounded {
 		border-radius: $radius-xl;
 
 		#{$root}__item {
@@ -184,7 +187,7 @@ $switch-transition: all $default-transition-time ease-out;
 		}
 	}
 
-	&.-small &__item {
+	&.-ds-small &__item {
 		gap: $space-4xs;
 		max-width: calc(100% - 48px);
 		min-height: 24px;
@@ -192,7 +195,7 @@ $switch-transition: all $default-transition-time ease-out;
 		padding: 0 $space-xs;
 	}
 
-	&.-disabled &__item {
+	&.-ds-disabled &__item {
 		cursor: default;
 		pointer-events: none;
 
@@ -204,7 +207,7 @@ $switch-transition: all $default-transition-time ease-out;
 			color: $color-neutral-text-disabled;
 		}
 
-		&.-selected {
+		&.-ds-selected {
 			#{$root}__icon {
 				color: $color-primary-icon-disabled;
 			}
@@ -214,7 +217,7 @@ $switch-transition: all $default-transition-time ease-out;
 			}
 		}
 
-		&.-selection {
+		&.-ds-selection {
 			background-color: $color-primary-background-disabled;
 			border-color: $color-primary-border-disabled;
 		}
@@ -234,7 +237,7 @@ import {
 	SwitchSize,
 	SwitchState,
 } from './Switch.consts';
-import DsIcon, { ICON_SIZES, ICONS, IconItem } from '../Icons/Icon';
+import DsIcon, { ICON_SIZES, IconItem, ICONS } from '../Icons/Icon';
 
 export default {
 	// eslint-disable-next-line vue/no-reserved-component-names
@@ -317,6 +320,12 @@ export default {
 		currentLabel() {
 			return this.currentSide === SWITCH_SIDE.LEFT ? this.labelLeft : this.labelRight;
 		},
+		oppositeSide() {
+			if (this.currentSide === SWITCH_SIDE.LEFT) {
+				return SWITCH_SIDE.RIGHT;
+			}
+			return SWITCH_SIDE.LEFT;
+		},
 	},
 	watch: {
 		selectedSide: {
@@ -329,12 +338,12 @@ export default {
 		},
 	},
 	methods: {
-		onSwitch(side: SwitchSelection) {
-			if (this.state === SWITCH_STATE.DISABLED || this.currentSide === side) {
+		onSwitch() {
+			if (this.state === SWITCH_STATE.DISABLED) {
 				return;
 			}
-			this.currentSide = side;
-			this.$emit('update:selectedSide', side);
+			this.currentSide = this.oppositeSide;
+			this.$emit('update:selectedSide', this.currentSide);
 		},
 	},
 };