@bethinkpl/design-system 34.2.1 → 34.2.2

package/dist/i18n/en/blockadeStatus.json

@@ -0,0 +1,4 @@
+{
+	"ds.blockadeStatus.active": "Access blockade",
+	"ds.blockadeStatus.ended": "Blockade ended"
+}

package/dist/i18n/en/cardExpandable.json

@@ -0,0 +1,4 @@
+{
+	"ds.cardExpandable.collapse": "Collapse",
+	"ds.cardExpandable.expand": "Expand"
+}

package/dist/i18n/en/overlayHeader.json

@@ -0,0 +1,3 @@
+{
+	"ds.overlayHeader.close": "Close — Q"
+}

package/dist/i18n/en/survey.json

@@ -0,0 +1,3 @@
+{
+	"ds.survey.placeholder": "Enter your answer"
+}

package/dist/i18n/pl/blockadeStatus.json

@@ -0,0 +1,4 @@
+{
+	"ds.blockadeStatus.active": "Blokada dostępu",
+	"ds.blockadeStatus.ended": "Blokada zakończona"
+}

package/dist/i18n/pl/cardExpandable.json

@@ -0,0 +1,4 @@
+{
+	"ds.cardExpandable.collapse": "Zwiń",
+	"ds.cardExpandable.expand": "Rozwiń"
+}

package/dist/i18n/pl/overlayHeader.json

@@ -0,0 +1,3 @@
+{
+	"ds.overlayHeader.close": "Zamknij — Q"
+}

package/dist/i18n/pl/survey.json

@@ -0,0 +1,3 @@
+{
+	"ds.survey.placeholder": "Wpisz swoją odpowiedź"
+}

package/dist/lib/js/components/Cards/CardExpandable/CardExpandable.vue.d.ts

@@ -9,11 +9,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     expanderTextCollapsed: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     expanderTextExpanded: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     headerHasPadding: {
         type: BooleanConstructor;
@@ -23,7 +23,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {
+}>, {
+    t: import('../../../i18n').TranslateFunction;
+}, {
     isExpandedInternal: boolean;
     ICONS: Readonly<{
         readonly ANSWERS: VueConstructor<Vue>;
@@ -305,6 +307,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         XX_LARGE: string;
     }>;
 }, {
+    resolvedExpanderTextCollapsed(): string;
+    resolvedExpanderTextExpanded(): string;
     chevronRotation(): number | null;
 }, {
     onExpanderClick(): void;
@@ -321,11 +325,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     expanderTextCollapsed: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     expanderTextExpanded: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     headerHasPadding: {
         type: BooleanConstructor;

package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts

@@ -34,7 +34,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: () => import('@fortawesome/fontawesome-common-types').IconDefinition;
         validator(icon: unknown): boolean;
     };
-}>, {}, {
+}>, {
+    t: import('../../../i18n').TranslateFunction;
+}, {
     ICON_BUTTON_SIZES: Readonly<{
         readonly XX_SMALL: "xx-small";
         readonly X_SMALL: "x-small";

package/dist/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue.d.ts

@@ -3,7 +3,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         required: true;
     };
-}>, {}, {
+}>, {
+    t: import('../../../i18n').TranslateFunction;
+}, {
     ICONS: Readonly<{
         readonly ANSWERS: VueConstructor<Vue>;
         readonly CHANGE: VueConstructor<Vue>;
@@ -286,7 +288,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }, {
     icon(): import('@fortawesome/fontawesome-common-types').IconDefinition;
     statusClass(): "" | "-ds-active";
-    text(): "Blokada dostępu" | "Blokada zakończona";
+    text(): any;
 }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     status: {
         type: StringConstructor;

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/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/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/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/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;
 

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

@@ -35,7 +35,7 @@
 						class="ds-surveyQuestionOpenEnded__input"
 						:disabled="state === SURVEY_QUESTION_STATES.DISABLED"
 						:value="value"
-						:placeholder="placeholder"
+						:placeholder="resolvedPlaceholder"
 						@input="$emit('input', $event)"
 					/>
 				</div>
@@ -114,7 +114,7 @@ export default defineComponent({
 		},
 		placeholder: {
 			type: String,
-			default: 'Wpisz swoją odpowiedź',
+			default: null,
 		},
 		state: {
 			type: String,
@@ -143,5 +143,10 @@ export default defineComponent({
 			SURVEY_QUESTION_STATES: Object.freeze(SURVEY_QUESTION_STATES),
 		};
 	},
+	computed: {
+		resolvedPlaceholder(): string {
+			return this.placeholder ?? this.t('ds.survey.placeholder');
+		},
+	},
 });
 </script>

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

@@ -19,7 +19,7 @@ const StoryTemplate: StoryFn<typeof SurveyQuestionScale> = (args) => {
 			return args;
 		},
 		template:
-			'<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">' +
+			'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder !== \'\' ? placeholder: null" :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: {
@@ -41,7 +41,7 @@ const args = {
 	elaborationValue: '',
 	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ź',
+	placeholder: '',
 	containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
 	selectedValue: null,
 	scaleOptions: [
@@ -126,7 +126,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" :containers="containers" :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 !== \'\' ? placeholder: null" :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: {
@@ -155,7 +155,7 @@ LimitedWidth.args = {
 	elaborationValue: '',
 	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ź',
+	placeholder: '',
 	containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
 	state: SURVEY_QUESTION_STATES.DEFAULT,
 	selectedValue: null,

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

@@ -105,7 +105,7 @@
 							:id="inputId"
 							:value="elaborationValue"
 							class="ds-surveyQuestionScale__elaborationInput"
-							:placeholder="placeholder"
+							:placeholder="resolvedPlaceholder"
 							:disabled="state === SURVEY_QUESTION_STATES.DISABLED"
 							@input="$emit('elaboration-change', $event)"
 						/>
@@ -293,7 +293,7 @@ export default defineComponent({
 		},
 		placeholder: {
 			type: String,
-			default: 'Wpisz swoją odpowiedź',
+			default: null,
 		},
 		selectedValue: {
 			type: String,
@@ -331,6 +331,9 @@ export default defineComponent({
 		};
 	},
 	computed: {
+		resolvedPlaceholder(): string {
+			return this.placeholder ?? this.t('ds.survey.placeholder');
+		},
 		standaloneOptions() {
 			return this.scaleOptions.filter(
 				(option: SurveyQuestionScaleOption) => option.standalone,

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

@@ -3,7 +3,7 @@
 		ref="textarea"
 		class="ds-surveyQuestionTextarea"
 		:disabled="disabled"
-		:placeholder="placeholder"
+		:placeholder="resolvedPlaceholder"
 		:value="value"
 		@input="onInput"
 	/>
@@ -35,6 +35,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { useLegacyI18n } from '../../composables/useLegacyI18n';
 
 export default defineComponent({
 	name: 'SurveyQuestionTextarea',
@@ -45,7 +46,7 @@ export default defineComponent({
 		},
 		placeholder: {
 			type: String,
-			default: 'Wpisz swoją odpowiedź',
+			default: null,
 		},
 		disabled: {
 			type: Boolean,
@@ -55,6 +56,16 @@ export default defineComponent({
 	// TODO fix me when touching this file
 	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['input'],
+	setup() {
+		const { t } = useLegacyI18n();
+
+		return { t };
+	},
+	computed: {
+		resolvedPlaceholder(): string {
+			return this.placeholder ?? this.t('ds.survey.placeholder');
+		},
+	},
 	watch: {
 		value() {
 			// we want to update height of textarea based on content that is inside

package/lib/js/i18n/en/blockadeStatus.json

@@ -0,0 +1,4 @@
+{
+	"ds.blockadeStatus.active": "Access blockade",
+	"ds.blockadeStatus.ended": "Blockade ended"
+}

package/lib/js/i18n/en/cardExpandable.json

@@ -0,0 +1,4 @@
+{
+	"ds.cardExpandable.collapse": "Collapse",
+	"ds.cardExpandable.expand": "Expand"
+}

package/lib/js/i18n/en/overlayHeader.json

@@ -0,0 +1,3 @@
+{
+	"ds.overlayHeader.close": "Close — Q"
+}

package/lib/js/i18n/en/survey.json

@@ -0,0 +1,3 @@
+{
+	"ds.survey.placeholder": "Enter your answer"
+}

package/lib/js/i18n/en.ts

@@ -3,6 +3,10 @@ import accessStatus from './en/accessStatus.json';
 import pagination from './en/pagination.json';
 import statsLayout from './en/statsLayout.json';
 import datePicker from './en/datePicker.json';
+import survey from './en/survey.json';
+import overlayHeader from './en/overlayHeader.json';
+import cardExpandable from './en/cardExpandable.json';
+import blockadeStatus from './en/blockadeStatus.json';
 
 export default {
 	...globals,
@@ -10,4 +14,8 @@ export default {
 	...pagination,
 	...statsLayout,
 	...datePicker,
+	...survey,
+	...overlayHeader,
+	...cardExpandable,
+	...blockadeStatus,
 };

package/lib/js/i18n/pl/blockadeStatus.json

@@ -0,0 +1,4 @@
+{
+	"ds.blockadeStatus.active": "Blokada dostępu",
+	"ds.blockadeStatus.ended": "Blokada zakończona"
+}

package/lib/js/i18n/pl/cardExpandable.json

@@ -0,0 +1,4 @@
+{
+	"ds.cardExpandable.collapse": "Zwiń",
+	"ds.cardExpandable.expand": "Rozwiń"
+}