@bethinkpl/design-system 18.7.4 → 18.9.0

package/lib/js/components/RichList/RichListItemBasic/RichListItemBasic.vue

@@ -0,0 +1,176 @@
+<template>
+	<rich-list-item
+		:size="size"
+		:type="type"
+		:is-interactive="isInteractive"
+		:is-draggable="isDraggable"
+		:icon="icon"
+		:icon-color="iconColor"
+		:icon-color-hex="iconColorHex"
+		:is-dimmed="isDimmed"
+		:border-color="borderColor"
+		:border-color-hex="borderColorHex"
+		:state="state"
+		class="richListItemBasic"
+	>
+		<template #content>
+			<div class="richListItemBasic__content">
+				<div
+					class="richListItemBasic__eyebrow"
+					:class="{ '-uppercase': isEyebrowUppercase }"
+				>
+					{{ eyebrow }}
+				</div>
+
+				<div class="richListItemBasic__text">
+					{{ text }}
+				</div>
+			</div>
+		</template>
+		<template v-if="$slots.meta" #meta>
+			<slot name="meta" />
+		</template>
+		<template v-if="$slots.trailing" #trailing>
+			<slot name="trailing" />
+		</template>
+	</rich-list-item>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/spacings';
+
+.richListItemBasic {
+	max-width: 100%;
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: $space-xxxxs;
+		justify-content: center;
+		min-width: 0; // to prevent the component from being pushed by the ellipses
+		padding: $space-xxs 0;
+	}
+
+	&__eyebrow {
+		@include info-s-extensive-bold;
+
+		color: $color-neutral-text-weak;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		&.-uppercase {
+			@include info-s-extensive-bold-uppercase;
+		}
+	}
+
+	&__text {
+		@include text-m-compact-bold;
+
+		color: $color-neutral-text;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+</style>
+
+<script lang="ts">
+import RichListItem, {
+	RICH_LIST_ITEM_BORDER_COLOR,
+	RICH_LIST_ITEM_ICON_COLOR,
+	RICH_LIST_ITEM_SIZE,
+	RICH_LIST_ITEM_STATE,
+	RICH_LIST_ITEM_TYPE,
+	RichListItemBorderColor,
+	RichListItemIconColor,
+	RichListItemSize,
+	RichListItemState,
+	RichListItemType,
+} from '../RichListItem';
+import { PropType } from 'vue';
+
+export default {
+	name: 'RichListItemBasic',
+	components: {
+		RichListItem,
+	},
+	props: {
+		type: {
+			type: String as PropType<RichListItemType>,
+			default: RICH_LIST_ITEM_TYPE.DEFAULT,
+			validator(type) {
+				return Object.values(RICH_LIST_ITEM_TYPE).includes(type);
+			},
+		},
+		state: {
+			type: String as PropType<RichListItemState>,
+			default: RICH_LIST_ITEM_STATE.DEFAULT,
+			validator(state) {
+				return Object.values(RICH_LIST_ITEM_STATE).includes(state);
+			},
+		},
+		size: {
+			type: String as PropType<RichListItemSize>,
+			default: RICH_LIST_ITEM_SIZE.MEDIUM,
+			validator(size) {
+				return Object.values(RICH_LIST_ITEM_SIZE).includes(size);
+			},
+		},
+		isInteractive: {
+			type: Boolean,
+			default: true,
+		},
+		isDimmed: {
+			type: Boolean,
+			default: false,
+		},
+		isDraggable: {
+			type: Boolean,
+			default: true,
+		},
+		icon: {
+			type: String,
+			default: null,
+		},
+		iconColor: {
+			type: String as PropType<RichListItemIconColor>,
+			default: null,
+			validator(iconColor) {
+				return Object.values(RICH_LIST_ITEM_ICON_COLOR).includes(iconColor);
+			},
+		},
+		iconColorHex: {
+			type: String,
+			default: null,
+		},
+		borderColor: {
+			type: String as PropType<RichListItemBorderColor>,
+			default: null,
+			validator(borderColor) {
+				return Object.values(RICH_LIST_ITEM_BORDER_COLOR).includes(borderColor);
+			},
+		},
+		borderColorHex: {
+			type: String,
+			default: null,
+		},
+		text: {
+			type: String,
+			required: true,
+		},
+		eyebrow: {
+			type: String,
+			required: true,
+		},
+		isEyebrowUppercase: {
+			type: Boolean,
+			default: false,
+		},
+	},
+};
+</script>

package/lib/js/components/RichList/RichListItemBasic/index.ts

@@ -0,0 +1,3 @@
+import RichListItemBasic from './RichListItemBasic.vue';
+
+export default RichListItemBasic;

package/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_SCALE_CONTAINERS = {
+	ONE: 'one',
+	TWO: 'two',
+} as const;

package/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_SCALE_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: {
@@ -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_SCALE_CONTAINERS.TWO,
 	scaleOptions: [
 		{
 			value: '1',
@@ -75,6 +76,10 @@ const argTypes = {
 	elaborationValue: { control: { type: 'text' } },
 	selectedValue: { control: false },
 	explanation: { control: { type: 'text' } },
+	containers: {
+		control: { type: 'select' },
+		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
+	},
 	scaleOptions: { control: { type: 'object' } },
 	state: {
 		control: { type: 'select', options: Object.values(SURVEY_QUESTION_STATES) },
@@ -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_SCALE_CONTAINERS),
+	},
+} as ArgTypes;
 
 LimitedWidth.args = {
 	title: "Main question write here if it's long it will collapse.",
@@ -134,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_SCALE_CONTAINERS.TWO,
 	scaleOptions: [
 		{
 			value: '1',
@@ -176,54 +188,8 @@ 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" @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 +198,58 @@ 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_SCALE_CONTAINERS),
+	},
+} as ArgTypes;
+
+SevenOptions.args = {
+	containers: SURVEY_QUESTION_SCALE_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;

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

@@ -24,34 +24,79 @@
 						@click="showModal = true"
 					/>
 				</div>
-				<div class="surveyQuestionScale__content">
-					<template
-						v-for="(option, index) in scaleOptions"
-						:key="`surveyQuestionScale-${index}`"
+				<div
+					class="surveyQuestionScale__content"
+					:class="{ '-oneContainer': containers === SURVEY_QUESTION_CONTAINERS.ONE }"
+				>
+					<div
+						class="surveyQuestionScale__container"
+						:class="{
+							'-oneContainer': containers === SURVEY_QUESTION_CONTAINERS.ONE,
+						}"
 					>
-						<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 scaleOptions"
+							:key="`surveyQuestionScale-${index}`"
+						>
+							<div
+								class="surveyQuestionScale__toggle"
+								:class="{
+									'-hideOnDesktop':
+										option.standalone &&
+										containers === SURVEY_QUESTION_CONTAINERS.TWO,
+								}"
+							>
+								<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 &&
+							containers === SURVEY_QUESTION_CONTAINERS.TWO
+						"
+						class="surveyQuestionScale__container -justifyEnd -hideOnMobile"
+					>
+						<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">
@@ -108,31 +153,34 @@
 		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;
 			padding: $space-s $space-l;
+
+			&:not(.-oneContainer) {
+				justify-content: center;
+				overflow-x: initial;
+			}
+		}
+
+		&.-oneContainer {
+			overflow-x: auto;
 		}
 	}
 
 	&__toggle {
 		display: flex;
 		justify-content: center;
-		margin-right: $space-xxs;
 
-		&:last-child {
-			margin-right: 0;
-		}
-	}
+		&.-hideOnDesktop {
+			display: flex;
 
-	&__toggleSeparator {
-		display: none;
-
-		@media #{breakpoint-s()} {
-			display: block;
-			width: $space-l;
+			@media #{breakpoint-s()} {
+				display: none;
+			}
 		}
 	}
 
@@ -154,22 +202,44 @@
 	&__elaborationInput {
 		margin-top: $space-xxs;
 	}
+
+	&__container {
+		display: flex;
+		flex: 1;
+		flex-direction: row;
+		gap: $space-l;
+
+		&.-justifyEnd {
+			justify-content: flex-end;
+		}
+
+		&.-oneContainer {
+			justify-content: space-between;
+		}
+
+		&.-hideOnMobile {
+			display: none;
+
+			@media #{breakpoint-s()} {
+				display: flex;
+			}
+		}
+	}
 }
 </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,
 	SURVEY_TOGGLE_STATES,
 	SURVEY_TOGGLE_STATUSES,
 } from '../../SurveyToggle';
-import { 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';
@@ -219,6 +289,13 @@ export default {
 			type: String,
 			default: null,
 		},
+		containers: {
+			type: String,
+			default: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
+			validator(containers) {
+				return Object.values(SURVEY_QUESTION_SCALE_CONTAINERS).includes(containers);
+			},
+		},
 	},
 	emits: ['elaboration-change', 'select-change'],
 	data() {
@@ -233,8 +310,16 @@ 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_SCALE_CONTAINERS),
 		};
 	},
+	computed: {
+		standaloneOptions() {
+			return this.scaleOptions.filter(
+				(option: SurveyQuestionScaleOption) => option.standalone,
+			);
+		},
+	},
 	methods: {
 		onToggleClick(value: string) {
 			this.$emit('select-change', this.selectedValue === value ? null : value);

package/lib/js/icons/fontawesome.ts

@@ -110,6 +110,7 @@ import { faPrint } from '@fortawesome/pro-regular-svg-icons/faPrint';
 import { faReply } from '@fortawesome/pro-regular-svg-icons/faReply';
 import { faRotateLeft } from '@fortawesome/pro-regular-svg-icons/faRotateLeft';
 import { faShare } from '@fortawesome/pro-regular-svg-icons/faShare';
+import { faShareNodes } from '@fortawesome/pro-regular-svg-icons/faShareNodes';
 import { faShieldHalved } from '@fortawesome/pro-regular-svg-icons/faShieldHalved';
 import { faSignal } from '@fortawesome/pro-regular-svg-icons/faSignal';
 import { faSitemap } from '@fortawesome/pro-regular-svg-icons/faSitemap';
@@ -325,6 +326,7 @@ export const FONTAWESOME_ICONS = {
 	FA_REPLY: faReply,
 	FA_ROTATE_LEFT: faRotateLeft,
 	FA_SHARE: faShare,
+	FA_SHARE_NODES: faShareNodes,
 	FA_SHIELD_HALVED: faShieldHalved,
 	FA_SIGNAL: faSignal,
 	FA_SITEMAP: faSitemap,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "18.7.4",
+  "version": "18.9.0",
   "description": "Bethink universe design-system",
   "repository": "git@github.com:bethinkpl/design-system.git",
   "author": "nerdy@bethink.pl",
@@ -80,7 +80,7 @@
     "typescript": "4.6.4",
     "vue": "3.2.45",
     "vue-loader": "17.0.0",
-    "vue-popperjs": "bethinkpl/vue-popper#4714b024fda5c3b66f3f856c5ca2a470ff2cb51e",
+    "vue-popperjs": "bethinkpl/vue-popper#03c7912c4729386743b0cca8f39b35448cc3db7f",
     "vue-svg-loader": "0.17.0-beta.2"
   }
 }