@bethinkpl/design-system 34.2.1 → 35.0.0

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/components/TextGroup/TextGroup.consts.ts

@@ -10,6 +10,7 @@ export const TEXT_GROUP_LOADING_SIZES = {
 };
 
 export const TEXT_GROUP_SIZES = {
+	X_SMALL: 'x-small',
 	SMALL: 'small',
 	MEDIUM: 'medium',
 };

package/lib/js/components/TextGroup/TextGroup.vue

@@ -2,6 +2,7 @@
 	<div
 		class="ds-textGroup"
 		:class="{
+			'-ds-x-small': size === TEXT_GROUP_SIZES.X_SMALL,
 			'-ds-small': size === TEXT_GROUP_SIZES.SMALL,
 
 			'-ds-hovered': state === TEXT_GROUP_STATES.HOVERED,
@@ -281,6 +282,26 @@ $text-group-colors: (
 		}
 	}
 
+	&.-ds-x-small {
+		#{$self}__eyebrow {
+			@include info-xs-default-bold;
+
+			margin-bottom: 0;
+
+			&.-ds-uppercase {
+				@include info-xs-extensive-bold-uppercase;
+			}
+		}
+
+		#{$self}__main {
+			@include info-s-default-bold;
+		}
+
+		#{$self}__supporting {
+			@include info-s-default-regular;
+		}
+	}
+
 	&.-ds-interactive:hover,
 	&.-ds-hovered {
 		cursor: pointer;

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ń"
+}

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

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

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

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

package/lib/js/i18n/pl.ts

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

package/lib/js/index.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "34.2.1",
+  "version": "35.0.0",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",

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

@@ -1,60 +0,0 @@
-import SelectListItemTile from './SelectListItemTile.vue';
-import { TILE_STATES } from '../../Tile';
-
-import { Args, Meta, StoryFn } from '@storybook/vue3';
-import { args, argTypes, data, template } from '../../Tile/Tile.sb.shared';
-import { withActions } from '@storybook/addon-actions/decorator';
-
-export default {
-	title: 'Components/SelectList/SelectListItemTile',
-	component: SelectListItemTile,
-	decorators: [withActions],
-} as Meta<typeof SelectListItemTile>;
-
-const StoryTemplate: StoryFn<typeof SelectListItemTile> = (args) => ({
-	components: { SelectListItemTile },
-	setup() {
-		return args;
-	},
-	template: template('select-list-item-tile'),
-	data,
-});
-
-export const Interactive = StoryTemplate.bind({});
-
-Interactive.argTypes = argTypes;
-Interactive.args = args;
-
-Interactive.parameters = {
-	actions: {
-		handles: ['click'],
-	},
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=5367-94239&t=GqiOb5BFRTyJrsv8-4',
-	},
-};
-
-const StoryStaticTemplate: StoryFn<typeof SelectListItemTile> = (args) => ({
-	components: { SelectListItemTile },
-	setup() {
-		return args;
-	},
-	template: template('select-list-item-tile'),
-	data,
-});
-
-export const Static = StoryStaticTemplate.bind({});
-
-Static.argTypes = argTypes;
-
-Static.args = {
-	...args,
-	interactive: false,
-	iconLeft: null,
-	iconRight: null,
-	text: 'this is a text text',
-	eyebrowText: 'this is an eyebrowText text',
-	additionalText: 'this is some additionalText',
-	state: TILE_STATES.DEFAULT,
-} as Args;

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

@@ -1,41 +0,0 @@
-<template>
-	<div class="ds-selectListItemTile">
-		<ds-tile
-			:interactive="interactive"
-			:icon-left="iconLeft"
-			:icon-right="iconRight"
-			:text="text"
-			:eyebrow-text="eyebrowText"
-			:additional-text="additionalText"
-			:color="color"
-			:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
-			:state="state"
-			:eyebrow-ellipsis="eyebrowEllipsis"
-			:text-ellipsis="textEllipsis"
-			:border-color="borderColor"
-		/>
-	</div>
-</template>
-
-<style scoped lang="scss">
-@import '../../../../styles/settings/spacings';
-
-.ds-selectListItemTile {
-	padding: $space-xs;
-}
-</style>
-
-<script lang="ts">
-import Tile from '../../Tile';
-import { props } from '../../Tile/Tile.shared';
-
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	name: 'SelectListItemTile',
-	components: {
-		DsTile: Tile,
-	},
-	props,
-});
-</script>