@bethinkpl/design-system 34.2.1 → 35.0.0

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts

@@ -11,7 +11,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     placeholder: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     state: {
         type: StringConstructor;
@@ -322,7 +322,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly DEFAULT: "default";
         readonly DISABLED: "disabled";
     }>;
-}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "input"[], "input", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {
+    resolvedPlaceholder(): string;
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "input"[], "input", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     title: {
         type: StringConstructor;
         required: true;
@@ -333,7 +335,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     placeholder: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     state: {
         type: StringConstructor;
@@ -353,13 +355,17 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
         placeholder: {
             type: StringConstructor;
-            default: string;
+            default: null;
         };
         disabled: {
             type: BooleanConstructor;
             default: boolean;
         };
-    }>, {}, {}, {}, {
+    }>, {
+        t: import('../../../i18n').TranslateFunction;
+    }, {}, {
+        resolvedPlaceholder(): string;
+    }, {
         onInput(evt: any): void;
     }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "input"[], "input", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         value: {
@@ -368,7 +374,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
         placeholder: {
             type: StringConstructor;
-            default: string;
+            default: null;
         };
         disabled: {
             type: BooleanConstructor;

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts

@@ -26,7 +26,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     placeholder: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     selectedValue: {
         type: StringConstructor;
@@ -359,6 +359,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly TWO: "two";
     }>;
 }, {
+    resolvedPlaceholder(): string;
     standaloneOptions(): any;
 }, {
     onToggleClick(value: string): void;
@@ -387,7 +388,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     placeholder: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     selectedValue: {
         type: StringConstructor;
@@ -415,13 +416,17 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
         placeholder: {
             type: StringConstructor;
-            default: string;
+            default: null;
         };
         disabled: {
             type: BooleanConstructor;
             default: boolean;
         };
-    }>, {}, {}, {}, {
+    }>, {
+        t: import('../../../i18n').TranslateFunction;
+    }, {}, {
+        resolvedPlaceholder(): string;
+    }, {
         onInput(evt: any): void;
     }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "input"[], "input", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         value: {
@@ -430,7 +435,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
         placeholder: {
             type: StringConstructor;
-            default: string;
+            default: null;
         };
         disabled: {
             type: BooleanConstructor;

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue.d.ts

@@ -5,13 +5,17 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     placeholder: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {}, {}, {
+}>, {
+    t: import('../../i18n').TranslateFunction;
+}, {}, {
+    resolvedPlaceholder(): string;
+}, {
     onInput(evt: any): void;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "input"[], "input", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     value: {
@@ -20,7 +24,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     placeholder: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     disabled: {
         type: BooleanConstructor;

package/dist/lib/js/components/TextGroup/TextGroup.consts.d.ts

@@ -8,6 +8,7 @@ export declare const TEXT_GROUP_LOADING_SIZES: {
     LARGE: string;
 };
 export declare const TEXT_GROUP_SIZES: {
+    X_SMALL: string;
     SMALL: string;
     MEDIUM: string;
 };

package/dist/lib/js/i18n/en.d.ts

@@ -1,4 +1,10 @@
 declare const _default: {
+    "ds.blockadeStatus.active": string;
+    "ds.blockadeStatus.ended": string;
+    "ds.cardExpandable.collapse": string;
+    "ds.cardExpandable.expand": string;
+    "ds.overlayHeader.close": string;
+    "ds.survey.placeholder": string;
     "ds.datePicker.selectDate": string;
     "ds.datePicker.set": string;
     "ds.statsLayout.default.leftColumnLabel": string;

package/dist/lib/js/i18n/index.d.ts

@@ -4,6 +4,12 @@ import { default as pl } from './pl';
 export type MessageSchema = typeof pl;
 export declare const messages: {
     pl: {
+        "ds.blockadeStatus.active": string;
+        "ds.blockadeStatus.ended": string;
+        "ds.cardExpandable.collapse": string;
+        "ds.cardExpandable.expand": string;
+        "ds.overlayHeader.close": string;
+        "ds.survey.placeholder": string;
         "ds.datePicker.selectDate": string;
         "ds.datePicker.set": string;
         "ds.statsLayout.default.leftColumnLabel": string;
@@ -26,6 +32,12 @@ export declare const messages: {
         "ds.globals.loading": string;
     };
     en: {
+        "ds.blockadeStatus.active": string;
+        "ds.blockadeStatus.ended": string;
+        "ds.cardExpandable.collapse": string;
+        "ds.cardExpandable.expand": string;
+        "ds.overlayHeader.close": string;
+        "ds.survey.placeholder": string;
         "ds.datePicker.selectDate": string;
         "ds.datePicker.set": string;
         "ds.statsLayout.default.leftColumnLabel": string;

package/dist/lib/js/i18n/pl.d.ts

@@ -1,4 +1,10 @@
 declare const _default: {
+    "ds.blockadeStatus.active": string;
+    "ds.blockadeStatus.ended": string;
+    "ds.cardExpandable.collapse": string;
+    "ds.cardExpandable.expand": string;
+    "ds.overlayHeader.close": string;
+    "ds.survey.placeholder": string;
     "ds.datePicker.selectDate": string;
     "ds.datePicker.set": string;
     "ds.statsLayout.default.leftColumnLabel": string;

package/dist/lib/js/index.d.ts

@@ -127,8 +127,8 @@ export { default as SelectListItemDivider } from './components/SelectList/Select
 export { default as DsSelectListItemDivider } from './components/SelectList/SelectListItemDivider/SelectListItemDivider.vue';
 export { default as SelectListItemToggle } from './components/SelectList/SelectListItemToggle/SelectListItemToggle.vue';
 export { default as DsSelectListItemToggle } from './components/SelectList/SelectListItemToggle/SelectListItemToggle.vue';
-export { default as SelectListItemTile } from './components/SelectList/SelectListItemTile/SelectListItemTile.vue';
-export { default as DsSelectListItemTile } from './components/SelectList/SelectListItemTile/SelectListItemTile.vue';
+export { default as SelectListItemContainer } from './components/SelectList/SelectListItemContainer/SelectListItemContainer.vue';
+export { default as DsSelectListItemContainer } from './components/SelectList/SelectListItemContainer/SelectListItemContainer.vue';
 export { default as SelectListSectionTitle } from './components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue';
 export { default as DsSelectListSectionTitle } from './components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue';
 export * from './components/SelectList/SelectListItem/SelectListItem.consts';

package/lib/js/components/Cards/CardExpandable/CardExpandable.stories.ts

@@ -13,8 +13,8 @@ const StoryTemplate: StoryFn<typeof CardExpandable> = (args) => ({
 		return args;
 	},
 	template: `
-			<card-expandable :is-expander-visible="isExpanderVisible" :expander-text-collapsed="expanderTextCollapsed"
-											 :expander-text-expanded="expanderTextExpanded" :is-expanded="isExpanded"
+			<card-expandable :is-expander-visible="isExpanderVisible" :expander-text-collapsed="expanderTextCollapsed !== '' ? expanderTextCollapsed : null"
+											 :expander-text-expanded="expanderTextExpanded !== '' ? expanderTextExpanded : null" :is-expanded="isExpanded"
 											 :header-has-padding="headerHasPadding" :divider-under-header="dividerUnderHeader">
 			<template v-if="header" #header>
 				<div v-html="header" />

package/lib/js/components/Cards/CardExpandable/CardExpandable.vue

@@ -16,7 +16,11 @@
 		<template v-if="isExpanderVisible" #footer>
 			<div class="ds-cardExpandable__expander" @click="onExpanderClick">
 				<span class="ds-cardExpandable__expanderLabel">
-					{{ isExpandedInternal ? expanderTextExpanded : expanderTextCollapsed }}
+					{{
+						isExpandedInternal
+							? resolvedExpanderTextExpanded
+							: resolvedExpanderTextCollapsed
+					}}
 				</span>
 				<ds-icon
 					class="ds-cardExpandable__expanderIcon"
@@ -72,6 +76,7 @@
 import { defineComponent } from 'vue';
 import DsCard from '../Card/';
 import DsIcon, { ICON_SIZES, ICONS } from '../../../components/Icons/Icon';
+import { useLegacyI18n } from '../../../composables/useLegacyI18n';
 
 export default defineComponent({
 	name: 'CardExpandable',
@@ -90,11 +95,11 @@ export default defineComponent({
 		},
 		expanderTextCollapsed: {
 			type: String,
-			default: 'Rozwiń',
+			default: null,
 		},
 		expanderTextExpanded: {
 			type: String,
-			default: 'Zwiń',
+			default: null,
 		},
 		headerHasPadding: {
 			type: Boolean,
@@ -106,6 +111,11 @@ export default defineComponent({
 		},
 	},
 	emits: { 'update:isExpanded': (payload: Boolean) => true },
+	setup() {
+		const { t } = useLegacyI18n();
+
+		return { t };
+	},
 	data() {
 		return {
 			isExpandedInternal: false,
@@ -114,6 +124,12 @@ export default defineComponent({
 		};
 	},
 	computed: {
+		resolvedExpanderTextCollapsed(): string {
+			return this.expanderTextCollapsed ?? this.t('ds.cardExpandable.expand');
+		},
+		resolvedExpanderTextExpanded(): string {
+			return this.expanderTextExpanded ?? this.t('ds.cardExpandable.collapse');
+		},
 		chevronRotation(): number | null {
 			return this.isExpandedInternal ? 180 : null;
 		},

package/lib/js/components/Divider/Divider.vue

@@ -16,6 +16,7 @@
 
 .ds-divider {
 	background-color: $color-neutral-divider;
+	flex-shrink: 0;
 
 	&.-ds-strong {
 		background-color: $color-neutral-divider-strong;

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue

@@ -104,7 +104,7 @@
 		<ds-tooltip
 			:is-pointer-visible="false"
 			:placement="TOOLTIP_PLACEMENTS.LEFT"
-			text="Zamknij — Q"
+			:text="t('ds.overlayHeader.close')"
 		>
 			<ds-icon-button
 				data-test-selector="overlay-header-close-button"
@@ -320,6 +320,7 @@ import {
 } from './OverlayHeader.consts';
 import { Value } from '../../../utils/type.utils';
 import { isElementEditable } from '../../../utils/shortcut-keys';
+import { useLegacyI18n } from '../../../composables/useLegacyI18n';
 import { toRaw } from 'vue';
 
 import { defineComponent } from 'vue';
@@ -369,6 +370,11 @@ export default defineComponent({
 		close: () => true,
 		titleClick: () => true,
 	},
+	setup() {
+		const { t } = useLegacyI18n();
+
+		return { t };
+	},
 	data() {
 		return {
 			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),

package/lib/js/components/SelectList/SelectListItem/SelectListItem.stories.ts

@@ -1,5 +1,8 @@
 import SelectListItem from './SelectListItem.vue';
 import { ICONS } from '../../Icons/Icon';
+import SlotPlaceholder, {
+	SLOT_PLACEHOLDER_SIZES,
+} from '../../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
@@ -14,27 +17,30 @@ export default {
 } as Meta<typeof SelectListItem>;
 
 const StoryTemplate: StoryFn<typeof SelectListItem> = (args) => ({
-	components: { SelectListItem },
+	components: { SelectListItem, SlotPlaceholder },
 	setup() {
-		return args;
+		return {
+			args,
+			ICONS,
+			SLOT_PLACEHOLDER_SIZES,
+		};
 	},
 	template: `
 			<select-list-item
-					:icon-left="ICONS[iconLeft]"
-					:label="label"
-					:eyebrow-text="eyebrowText"
-					:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
-					:is-selected="isSelected"
-					:selection-mode="selectionMode"
-					:size="size"
-					:state="state"
-			/>
+					:icon-left="ICONS[args.iconLeft]"
+					:label="args.label"
+					:eyebrow-text="args.eyebrowText"
+					:is-eyebrow-text-uppercase="args.isEyebrowTextUppercase"
+					:is-selected="args.isSelected"
+					:selection-mode="args.selectionMode"
+					:size="args.size"
+					:state="args.state"
+			>
+				<template v-if="args.accessorySlot" #accessory>
+					<slot-placeholder :size="SLOT_PLACEHOLDER_SIZES.SMALL" :label="args.accessorySlot" />
+				</template>
+			</select-list-item>
     `,
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
 });
 
 export const Interactive = StoryTemplate.bind({});
@@ -48,6 +54,7 @@ const args = {
 	state: SELECT_LIST_ITEM_STATES.DEFAULT,
 	isSelected: false,
 	selectionMode: SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,
+	accessorySlot: 'accessory',
 } as Args;
 
 const argTypes = {
@@ -67,6 +74,9 @@ const argTypes = {
 		control: 'select',
 		options: Object.values(SELECT_LIST_ITEM_STATES),
 	},
+	accessorySlot: {
+		control: 'text',
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/SelectList/SelectListItem/SelectListItem.vue

@@ -10,6 +10,8 @@
 		}"
 		:title="label"
 	>
+		<slot name="accessory" />
+
 		<ds-icon
 			v-if="iconLeft || isLoading"
 			class="ds-selectListItem__iconLeft"
@@ -54,6 +56,7 @@
 	color: $color-neutral-text-heavy;
 	cursor: pointer;
 	display: flex;
+	gap: $space-3xs;
 	min-height: $minHeight;
 	padding: $space-xs;
 
@@ -100,7 +103,6 @@
 
 	&__iconLeft {
 		color: $color-neutral-icon;
-		margin-right: $space-3xs;
 	}
 
 	&__iconRight {
@@ -160,7 +162,8 @@
 }
 </style>
 
-<script lang="ts">
+<script setup lang="ts">
+import { computed } from 'vue';
 import {
 	SELECT_LIST_ITEM_SELECTION_MODE,
 	SELECT_LIST_ITEM_SIZES,
@@ -169,75 +172,28 @@ import {
 	SelectListItemSize,
 	SelectListItemState,
 } from './SelectListItem.consts';
-import DsIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
-import { defineComponent, toRaw } from 'vue';
-
-export default defineComponent({
-	name: 'SelectListItem',
-	components: {
-		DsIcon,
-	},
-	props: {
-		iconLeft: {
-			type: Object,
-			default: null,
-			validator(icon) {
-				return Object.values(ICONS).includes(toRaw(icon));
-			},
-		},
-		isSelected: {
-			type: Boolean,
-			default: false,
-		},
-		label: {
-			type: String,
-			required: true,
-		},
-		eyebrowText: {
-			type: String,
-			default: '',
-		},
-		isEyebrowTextUppercase: {
-			type: Boolean,
-			default: false,
-		},
-		selectionMode: {
-			type: String,
-			default: SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,
-			validator(selectionMode: SelectListItemSelectionMode) {
-				return Object.values(SELECT_LIST_ITEM_SELECTION_MODE).includes(selectionMode);
-			},
-		},
-		size: {
-			type: String,
-			default: SELECT_LIST_ITEM_SIZES.SMALL,
-			validator(size: SelectListItemSize) {
-				return Object.values(SELECT_LIST_ITEM_SIZES).includes(size);
-			},
-		},
-		state: {
-			type: String,
-			default: SELECT_LIST_ITEM_STATES.DEFAULT,
-			validator(state: SelectListItemState) {
-				return Object.values(SELECT_LIST_ITEM_STATES).includes(state);
-			},
-		},
-	},
-	data() {
-		return {
-			ICON_SIZES: Object.freeze(ICON_SIZES),
-			ICONS: Object.freeze(ICONS),
-			SELECT_LIST_ITEM_SELECTION_MODE: Object.freeze(SELECT_LIST_ITEM_SELECTION_MODE),
-			SELECT_LIST_ITEM_STATES: Object.freeze(SELECT_LIST_ITEM_STATES),
-		};
-	},
-	computed: {
-		isLoading(): boolean {
-			return this.state === SELECT_LIST_ITEM_STATES.LOADING;
-		},
-		isDisabled(): boolean {
-			return this.state === SELECT_LIST_ITEM_STATES.DISABLED;
-		},
-	},
-});
+import DsIcon, { ICON_SIZES, ICONS, IconItem } from '../../Icons/Icon';
+
+const {
+	iconLeft = null,
+	isSelected = false,
+	label,
+	eyebrowText = '',
+	isEyebrowTextUppercase = false,
+	selectionMode = SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,
+	size = SELECT_LIST_ITEM_SIZES.SMALL,
+	state = SELECT_LIST_ITEM_STATES.DEFAULT,
+} = defineProps<{
+	iconLeft?: IconItem | null;
+	isSelected?: boolean;
+	label: string;
+	eyebrowText?: string;
+	isEyebrowTextUppercase?: boolean;
+	selectionMode?: SelectListItemSelectionMode;
+	size?: SelectListItemSize;
+	state?: SelectListItemState;
+}>();
+
+const isLoading = computed(() => state === SELECT_LIST_ITEM_STATES.LOADING);
+const isDisabled = computed(() => state === SELECT_LIST_ITEM_STATES.DISABLED);
 </script>

package/lib/js/components/SelectList/SelectListItemContainer/SelectListItemContainer.stories.ts

@@ -0,0 +1,35 @@
+import SelectListItemContainer from './SelectListItemContainer.vue';
+import Tile from '../../Tile';
+import { TILE_STATES } from '../../Tile';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'Components/SelectList/SelectListItemContainer',
+	component: SelectListItemContainer,
+} as Meta<typeof SelectListItemContainer>;
+
+const StoryTemplate: StoryFn<typeof SelectListItemContainer> = () => ({
+	components: { SelectListItemContainer, DsTile: Tile },
+	template: `
+<select-list-item-container>
+	<ds-tile
+		text="this is a text text"
+		eyebrow-text="this is an eyebrowText text"
+		additional-text="this is some additionalText"
+		:interactive="false"
+		:state="TILE_STATES.DEFAULT"
+	/>
+</select-list-item-container>
+	`,
+	data: () => ({ TILE_STATES }),
+});
+
+export const Default = StoryTemplate.bind({});
+
+Default.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5367-94238&m=dev',
+	},
+};

package/lib/js/components/SelectList/SelectListItemContainer/SelectListItemContainer.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="ds-selectListItemContainer">
+		<slot />
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/spacings';
+
+.ds-selectListItemContainer {
+	padding: $space-2xs $space-xs;
+}
+</style>
+
+<script setup lang="ts">
+defineOptions({
+	name: 'SelectListItemContainer',
+});
+</script>

package/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue

@@ -19,7 +19,7 @@ import {
 } from '../SelectListItem/SelectListItem.consts';
 import { IconItem, ICONS } from '../../Icons/Icon';
 import SelectListItem from '../SelectListItem/SelectListItem.vue';
-import { defineComponent, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 
 export default defineComponent({
 	name: 'SelectListItemToggle',
@@ -54,14 +54,14 @@ export default defineComponent({
 			required: true,
 		},
 		size: {
-			type: String,
+			type: String as PropType<SelectListItemSize>,
 			default: SELECT_LIST_ITEM_SIZES.SMALL,
 			validator(size: SelectListItemSize) {
 				return Object.values(SELECT_LIST_ITEM_SIZES).includes(size);
 			},
 		},
 		state: {
-			type: String,
+			type: String as PropType<SelectListItemState>,
 			default: SELECT_LIST_ITEM_STATES.DEFAULT,
 			validator(state: SelectListItemState) {
 				return Object.values(SELECT_LIST_ITEM_STATES).includes(state);

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

@@ -40,6 +40,7 @@
 import { defineComponent } from 'vue';
 import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { COURSE_BLOCKADE_ACCESS_STATUS } from '../../../consts/user';
+import { useLegacyI18n } from '../../../composables/useLegacyI18n';
 
 export default defineComponent({
 	name: 'BlockadeStatus',
@@ -52,6 +53,11 @@ export default defineComponent({
 			required: true,
 		},
 	},
+	setup() {
+		const { t } = useLegacyI18n();
+
+		return { t };
+	},
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),
@@ -73,9 +79,9 @@ export default defineComponent({
 		},
 		text() {
 			if (this.status === COURSE_BLOCKADE_ACCESS_STATUS.ACTIVE) {
-				return 'Blokada dostępu';
+				return this.t('ds.blockadeStatus.active');
 			}
-			return 'Blokada zakończona';
+			return this.t('ds.blockadeStatus.ended');
 		},
 	},
 });

package/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.stories.ts

@@ -19,7 +19,7 @@ const StoryTemplate: StoryFn<typeof SurveyQuestionOpenEnded> = (args) => {
 		},
 		// TODO typing in textarea looses focus
 		template:
-			'<survey-question-open-ended  :title="title" :value="value" :state="state" :placeholder="placeholder" @input="explanationUpdate">' +
+			'<survey-question-open-ended  :title="title" :value="value" :state="state" :placeholder="placeholder !== \'\' ? placeholder: null" @input="explanationUpdate">' +
 			'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
 			'</survey-question-open-ended>',
 		methods: {
@@ -37,7 +37,7 @@ const args = {
 	value: 'value',
 	explanation:
 		'<h3 class="modalHeader" style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3><div>Wyczerpujące materiały dają poczucie pełnego zrozumieina, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',
-	placeholder: 'Wpisz swoją odpowiedź',
+	placeholder: '',
 	state: SURVEY_QUESTION_STATES.DEFAULT,
 } as Args;