@bethinkpl/design-system 21.0.1 → 21.0.2

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1713181986832,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1714022462304,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/lib/images/icons/icon-answers.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 37" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9279 4.95849e-08C17.1399 -0.000218791 18.2347 0.723966 18.7086 1.83944L31.6285 32.2452C32.2809 33.7806 31.5651 35.5543 30.0296 36.2067C28.4942 36.8592 26.7205 36.1433 26.0681 34.6079L24.3991 30.6801H7.46905L5.80221 34.6069C5.15032 36.1426 3.37693 36.859 1.84122 36.2071C0.305517 35.5553 -0.410957 33.7819 0.240931 32.2462L13.1478 1.84044C13.6214 0.7248 14.7159 0.000219338 15.9279 4.95849e-08ZM15.9298 10.7484L21.618 24.1351H10.2473L15.9298 10.7484Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M40.2245 4.95849e-08C38.5561 4.95849e-08 37.2037 1.35245 37.2037 3.02079V33.4135C37.2037 35.0819 38.5561 36.4343 40.2245 36.4343H51.4969C51.6322 36.4343 51.7654 36.4254 51.8959 36.4082H53.5334C59.4204 36.4082 64 31.4837 64 25.6563C64 21.9291 62.1266 18.5714 59.236 16.6351C60.8036 14.8695 61.7559 12.5453 61.7559 9.99958C61.7559 4.47864 57.2773 4.95849e-08 51.7563 4.95849e-08H40.2245ZM53.5334 30.3666H43.2453V20.9459H53.5334C55.8706 20.9459 57.9584 22.9483 57.9584 25.6563C57.9584 28.3642 55.8706 30.3666 53.5334 30.3666ZM51.7563 6.04158H43.2453V13.9576H51.7563C53.9406 13.9576 55.7143 12.1838 55.7143 9.99958C55.7143 7.81531 53.9406 6.04158 51.7563 6.04158Z" fill="currentColor"/>
+</svg>

package/lib/images/icons/icon-hide-answers.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 64 64" fill="none">
+    <g clip-path="url(#clip0_2574_94)">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.8478 6.63647C6.54251 5.61597 4.6571 5.84684 3.63661 7.15212C2.61612 8.4574 2.84698 10.3428 4.15226 11.3633L59.1523 54.3633C60.4575 55.3838 62.343 55.1529 63.3634 53.8477C64.3839 52.5424 64.1531 50.657 62.8478 49.6365L60.4296 47.7459C62.6317 45.7569 64 42.8414 64 39.6562C64 35.929 62.1266 32.5712 59.236 30.635C60.8036 28.8694 61.7559 26.5452 61.7559 23.9995C61.7559 18.4785 57.2773 13.9999 51.7563 13.9999H40.2245C38.5561 13.9999 37.2037 15.3523 37.2037 17.0207V29.5874L7.8478 6.63647ZM44.0574 34.9458L55.4845 43.8797C56.9183 43.1274 57.9584 41.5675 57.9584 39.6562C57.9584 36.9482 55.8706 34.9458 53.5334 34.9458H44.0574ZM43.2453 20.0415H51.7563C53.9406 20.0415 55.7143 21.8152 55.7143 23.9995C55.7143 26.1837 53.9406 27.9575 51.7563 27.9575H43.2453V20.0415Z" fill="currentColor"/>
+        <path d="M0.240931 46.246L9.97552 23.3135L14.9034 27.1662L10.2473 38.135H21.618L17.979 29.5707L27.8089 37.256L31.6285 46.245C32.2809 47.7805 31.5651 49.5542 30.0296 50.2066C28.4942 50.8591 26.7205 50.1432 26.0681 48.6077L24.3991 44.68H7.46905L5.80221 48.6067C5.15032 50.1425 3.37693 50.8589 1.84122 50.207C0.305517 49.5551 -0.410957 47.7818 0.240931 46.246Z" fill="currentColor"/>
+        <path d="M37.2037 47.4134V44.601L44.6648 50.4342H40.2245C38.5561 50.4342 37.2037 49.0818 37.2037 47.4134Z" fill="currentColor"/>
+    </g>
+</svg>

package/lib/js/components/Drawer/DrawerSection/DrawerSection.stories.ts

@@ -33,6 +33,7 @@ const StoryTemplate: StoryFn<typeof DrawerSection> = (args, { updateArgs }) => (
 		<drawer-section
 			:size="size"
 			:title="title"
+			:title-ellipsis="titleEllipsis"
 			:supporting-text="supportingText"
 			:eyebrow="eyebrow"
 			:icon-left="ICONS[iconLeft]"
@@ -56,6 +57,7 @@ export const Interactive = StoryTemplate.bind({});
 const args = {
 	size: SECTION_HEADER_SIZES.XX_SMALL,
 	title: 'Drawer Section Header',
+	titleEllipsis: false,
 	supportingText: '',
 	eyebrow: '',
 	iconLeft: null,

package/lib/js/components/Drawer/DrawerSection/DrawerSection.vue

@@ -10,6 +10,7 @@
 			:info="info"
 			:size="size"
 			:title="title"
+			:title-ellipsis="titleEllipsis"
 			:eyebrow="eyebrow"
 			:supporting-text="supportingText"
 			:has-divider="hasDivider"
@@ -91,6 +92,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		titleEllipsis: {
+			type: Boolean,
+			default: false,
+		},
 		eyebrow: {
 			type: String,
 			default: '',

package/lib/js/components/Headers/SectionHeader/SectionHeader.stories.ts

@@ -42,6 +42,7 @@ const StoryTemplate: StoryFn<typeof SectionHeader> = (args, { updateArgs }) => (
 		' :size="size"' +
 		' :info="info"' +
 		' :title="title"' +
+		' :title-ellipsis="titleEllipsis"' +
 		' :eyebrow="eyebrow"' +
 		' :has-divider="hasDivider"' +
 		' :mobile-layout="mobileLayout"' +
@@ -57,6 +58,7 @@ export const Interactive = StoryTemplate.bind({});
 const args = {
 	size: SECTION_HEADER_SIZES.MEDIUM,
 	title: 'Section Header',
+	titleEllipsis: false,
 	supportingText:
 		'Supporting text. Et doloribus aspernatur suscipit provident maiores. Natus natus et pariatur. Eligendi illo quo esse. Tenetur ad neque veniam.',
 	eyebrow: 'eyebrow text',
@@ -108,6 +110,7 @@ const argTypes = {
 			defaultValue: SECTION_HEADER_MOBILE_LAYOUTS.VERTICAL,
 		},
 	},
+	titleEllipsis: { control: { type: 'boolean' }, defaultValue: false },
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

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

@@ -22,7 +22,12 @@
 						/>
 						<div class="sectionHeader__titleContainer">
 							<div v-if="eyebrow" class="sectionHeader__eyebrow">{{ eyebrow }}</div>
-							<div class="sectionHeader__title">{{ title }}</div>
+							<div
+								class="sectionHeader__title"
+								:class="{ '-ellipsis': titleEllipsis }"
+								:title="titleEllipsis ? title : undefined"
+								>{{ title }}
+							</div>
 						</div>
 						<ds-icon
 							v-if="iconRight"
@@ -121,6 +126,7 @@
 		align-items: center;
 		display: flex;
 		gap: $space-2xs;
+		min-width: 0;
 		width: 100%;
 
 		@media #{breakpoint-s()} {
@@ -159,17 +165,26 @@
 	&__titleWrapper {
 		align-items: center;
 		display: flex;
+		min-width: 0;
 	}
 
 	&__titleContainer {
 		display: flex;
 		flex-direction: column;
 		gap: $space-5xs;
+		min-width: 0;
 		padding: $space-2xs 0;
 	}
 
 	&__title {
 		color: $color-neutral-text-strong;
+		min-width: 0;
+
+		&.-ellipsis {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 	}
 
 	&__info {
@@ -323,9 +338,9 @@
 
 <script lang="ts">
 import {
+	SECTION_HEADER_ICON_COLORS,
 	SECTION_HEADER_MOBILE_LAYOUTS,
 	SECTION_HEADER_SIZES,
-	SECTION_HEADER_ICON_COLORS,
 	SectionHeaderIconColor,
 } from './SectionHeader.consts';
 import DsIcon, { ICON_SIZES, IconItem, ICONS } from '../../Icons/Icon';
@@ -396,6 +411,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		titleEllipsis: {
+			type: Boolean,
+			default: false,
+		},
 		eyebrow: {
 			type: String,
 			default: '',

package/lib/js/components/Icons/Icon/Icon.consts.ts

@@ -2,6 +2,9 @@ import HeadWithQuestionMark from '../../../../images/icons/head-with-question-ma
 import Ribbon from '../../../../images/icons/ribbon.svg';
 import SlidersSearch from '../../../../images/icons/sliders-search.svg';
 import CommentsCheck from '../../../../images/icons/comments-check.svg';
+import Answers from '../../../../images/icons/icon-answers.svg';
+import HideAnswers from '../../../../images/icons/icon-hide-answers.svg';
+
 import { FONTAWESOME_ICONS } from '../../../icons/fontawesome';
 import { Value } from '../../../utils/type.utils';
 
@@ -41,6 +44,8 @@ const BETHINK_ICONS = {
 	RIBBON: Ribbon,
 	SLIDERS_SEARCH: SlidersSearch,
 	COMMENTS_CHECK: CommentsCheck,
+	ANSWERS: Answers,
+	HIDE_ANSWERS: HideAnswers,
 } as const;
 
 export const ICONS = {

package/lib/js/components/PopOver/PopOver.consts.ts

@@ -13,6 +13,8 @@ export const POP_OVER_PLACEMENTS = {
 	BOTTOM: 'bottom',
 	LEFT: 'left',
 	RIGHT: 'right',
+	BOTTOM_START: 'bottom-start',
+	BOTTOM_END: 'bottom-end',
 } as const;
 
 export const POP_OVER_SIZES = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "21.0.1",
+  "version": "21.0.2",
   "description": "Bethink universe design-system",
   "repository": "git@github.com:bethinkpl/design-system.git",
   "author": "nerdy@bethink.pl",