@bethinkpl/design-system 19.0.2 → 19.0.3

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1710494907733,"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":1710759807141,"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/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts

@@ -32,31 +32,54 @@ const StoryTemplate: StoryFn<typeof DrawerHeader> = (args) => ({
 			:title-color="titleColor"
 			:title-ellipsis="titleEllipsis"
 			:title="title"
-		/>`,
+		>
+			<template #actions v-if="actions">
+				<div v-html="actions" />
+			</template>
+			<template #titleTrailing v-if="titleTrailing">
+				<div v-html="titleTrailing" />
+			</template>
+		</drawer-header>`,
 });
 
 export const Interactive = StoryTemplate.bind({});
 
-const args = {} as Args;
+const args = {
+	eyebrowText: 'eyebrow',
+	isInteractiveEyebrow: false,
+	eyebrowEllipsis: false,
+	title: 'Header Title',
+	titleEllipsis: false,
+	titleColor: DRAWER_HEADER_TITLE_COLORS.NEUTRAL_STRONG,
+	leftIcon: null,
+	chipLabel: 'chip',
+	isClosable: true,
+	hasDivider: false,
+	isSecondLevel: false,
+	actions: 'actions slot',
+	titleTrailing: 'trailing slot',
+} as Args;
 
 const argTypes = {
-	title: { control: { type: 'text' }, defaultValue: 'Header Title' },
 	eyebrowText: { control: { type: 'text' }, defaultValue: 'eyebrow' },
-	chipLabel: { control: { type: 'text' }, defaultValue: 'chip' },
-	hasDivider: { control: { type: 'boolean' }, defaultValue: false },
-	isClosable: { control: { type: 'boolean' }, defaultValue: true },
-	isSecondLevel: { control: { type: 'boolean' }, defaultValue: false },
 	isInteractiveEyebrow: { control: { type: 'boolean' }, defaultValue: false },
-	leftIcon: {
-		control: { type: 'select', options: [...Object.keys(ICONS), null] },
-		defaultValue: null,
-	},
 	eyebrowEllipsis: { control: { type: 'boolean' }, defaultValue: false },
+	title: { control: { type: 'text' }, defaultValue: 'Header Title' },
 	titleEllipsis: { control: { type: 'boolean' }, defaultValue: false },
 	titleColor: {
 		control: { type: 'select', options: Object.values(DRAWER_HEADER_TITLE_COLORS) },
 		defaultValue: DRAWER_HEADER_TITLE_COLORS.NEUTRAL_STRONG,
 	},
+	leftIcon: {
+		control: { type: 'select', options: [...Object.keys(ICONS), null] },
+		defaultValue: null,
+	},
+	chipLabel: { control: { type: 'text' }, defaultValue: 'chip' },
+	hasDivider: { control: { type: 'boolean' }, defaultValue: false },
+	isSecondLevel: { control: { type: 'boolean' }, defaultValue: false },
+	isClosable: { control: { type: 'boolean' }, defaultValue: true },
+	actions: { control: { type: 'text' }, defaultValue: 'actions slot' },
+	titleTrailing: { control: { type: 'text' }, defaultValue: 'trailing slot' },
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

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

@@ -22,7 +22,7 @@
 				>
 					{{ eyebrowText }}
 				</span>
-				<div class="drawerHeader__title" :class="{ [`-${titleColor}`]: true }">
+				<div class="drawerHeader__title">
 					<icon
 						v-if="leftIcon"
 						:icon="leftIcon"
@@ -31,16 +31,22 @@
 					/>
 					<span
 						v-if="title"
-						:class="{ '-ellipsis': titleEllipsis }"
+						class="drawerHeader__titleText"
+						:class="{ '-ellipsis': titleEllipsis, [`-${titleColor}`]: true }"
 						:title="titleEllipsis ? title : undefined"
 						>{{ title }}</span
 					>
 					<chip v-if="chipLabel" :label="chipLabel" />
+					<div v-if="$slots.titleTrailing">
+						<slot name="titleTrailing" />
+					</div>
 				</div>
 			</div>
+			<div v-if="$slots.actions" class="drawerHeader__actions">
+				<slot name="actions" />
+			</div>
 			<icon-button
 				v-if="isClosable"
-				class="drawerHeader__closeButton"
 				:icon="ICONS.FA_XMARK"
 				:size="ICON_BUTTON_SIZES.MEDIUM"
 				:touchable="false"
@@ -99,11 +105,13 @@ $minimal-drawer-header-height: 82px;
 	}
 
 	&__title {
-		@include heading-s-default-bold-uppercase;
-
 		align-items: center;
 		column-gap: $space-xxxs;
 		display: flex;
+	}
+
+	&__titleText {
+		@include heading-s-default-bold-uppercase;
 
 		&.-neutralStrong {
 			color: $color-neutral-text-strong;
@@ -113,7 +121,7 @@ $minimal-drawer-header-height: 82px;
 			color: $color-neutral-text-weak;
 		}
 
-		.-ellipsis {
+		&.-ellipsis {
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -129,8 +137,8 @@ $minimal-drawer-header-height: 82px;
 		padding: $space-m $space-xs $space-m $space-s;
 	}
 
-	&__closeButton {
-		align-self: flex-start;
+	&__actions {
+		margin-left: auto;
 	}
 }
 </style>
@@ -159,50 +167,50 @@ export default {
 		Chip,
 	},
 	props: {
-		title: {
-			type: String,
-			default: null,
-		},
 		eyebrowText: {
 			type: String,
 			default: null,
 		},
-		chipLabel: {
+		isInteractiveEyebrow: {
+			type: Boolean,
+			default: false,
+		},
+		eyebrowEllipsis: {
+			type: Boolean,
+			default: false,
+		},
+		title: {
 			type: String,
 			default: null,
 		},
+		titleEllipsis: {
+			type: Boolean,
+			default: false,
+		},
+		titleColor: {
+			type: String as PropType<DrawerHeaderTitleColor>,
+			default: DRAWER_HEADER_TITLE_COLORS.NEUTRAL_STRONG,
+		},
 		leftIcon: {
 			type: [Object, null],
 			default: null,
 		},
+		chipLabel: {
+			type: String,
+			default: null,
+		},
 		isClosable: {
 			type: Boolean,
 			default: true,
 		},
-		isSecondLevel: {
-			type: Boolean,
-			default: false,
-		},
-		isInteractiveEyebrow: {
-			type: Boolean,
-			default: false,
-		},
 		hasDivider: {
 			type: Boolean,
 			default: false,
 		},
-		eyebrowEllipsis: {
-			type: Boolean,
-			default: false,
-		},
-		titleEllipsis: {
+		isSecondLevel: {
 			type: Boolean,
 			default: false,
 		},
-		titleColor: {
-			type: String as PropType<DrawerHeaderTitleColor>,
-			default: DRAWER_HEADER_TITLE_COLORS.NEUTRAL_STRONG,
-		},
 	},
 	emits: ['backClicked', 'close', 'eyebrowClicked'],
 	data() {

package/lib/styles/settings/_media-queries.scss

@@ -9,3 +9,7 @@
 @function breakpoint-l() {
 	@return '(min-width: 1280px)';
 }
+
+@function breakpoint-xl() {
+	@return '(min-width: 1600px)';
+}

package/package.json

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