@bethinkpl/design-system 15.2.0 → 15.2.1

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1681368735855,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"4.5.13"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/vue":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue"},"addons":{"@storybook/addon-docs":{"version":"6.5.13"},"@storybook/addon-controls":{"version":"6.5.13"},"@storybook/addon-actions":{"version":"6.5.13"},"@storybook/addon-storysource":{"version":"6.5.13"},"@storybook/addon-viewport":{"version":"6.5.13"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1681907031126,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"4.5.13"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/vue":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue"},"addons":{"@storybook/addon-docs":{"version":"6.5.13"},"@storybook/addon-controls":{"version":"6.5.13"},"@storybook/addon-actions":{"version":"6.5.13"},"@storybook/addon-storysource":{"version":"6.5.13"},"@storybook/addon-viewport":{"version":"6.5.13"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/lib/js/components/ProgressBar/ProgressBar.stories.ts

@@ -1,12 +1,12 @@
 import ProgressBar from './ProgressBar.vue';
 import {
-	PROGRESS_BAR_RANGE_COLORS,
-	PROGRESS_BAR_SIZES,
+	PROGRESS_BAR_BADGE_COLORS,
+	PROGRESS_BAR_LABEL_TEXT_SIZES,
 	PROGRESS_BAR_LAYOUTS,
 	PROGRESS_BAR_RADII,
+	PROGRESS_BAR_RANGE_COLORS,
+	PROGRESS_BAR_SIZES,
 	ProgressBarRange,
-	PROGRESS_BAR_LABEL_TEXT_SIZES,
-	PROGRESS_BAR_BADGE_COLORS,
 } from './ProgressBar.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
@@ -90,6 +90,10 @@ const argTypes = {
 		control: { type: 'select', options: Object.values(PROGRESS_BAR_BADGE_COLORS) },
 		defaultValue: PROGRESS_BAR_BADGE_COLORS.INFO,
 	},
+	labelTextEllipsis: {
+		control: { type: 'boolean' },
+		defaultValue: false,
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
@@ -177,4 +181,5 @@ Compact.args = {
 	labelData: '30',
 	labelDataSupporting: '100',
 	labelDataSuffix: '(%)',
+	labelTextEllipsis: false,
 } as Args;

package/lib/js/components/ProgressBar/ProgressBar.vue

@@ -8,7 +8,11 @@
 		<div v-if="labelText || labelDataExists" class="progressBar__label">
 			<div
 				class="progressBar__labelText"
-				:class="{ '-medium': labelTextSize === PROGRESS_BAR_LABEL_TEXT_SIZES.MEDIUM }"
+				:class="{
+					'-medium': labelTextSize === PROGRESS_BAR_LABEL_TEXT_SIZES.MEDIUM,
+					'-ellipsis': labelTextEllipsis,
+				}"
+				:title="labelTextEllipsis ? labelText : null"
 			>
 				{{ labelText }}
 			</div>
@@ -219,6 +223,12 @@ $progress-bar-badge-colors: (
 				@include label-xl-default-bold;
 			}
 		}
+
+		&.-ellipsis {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 	}
 
 	&__labelDataWrapper {
@@ -296,15 +306,15 @@ $progress-bar-badge-colors: (
 <script lang="ts">
 import { PropType } from 'vue';
 import {
-	PROGRESS_BAR_SIZES,
-	PROGRESS_BAR_RADII,
+	PROGRESS_BAR_BADGE_COLORS,
+	PROGRESS_BAR_LABEL_TEXT_SIZES,
 	PROGRESS_BAR_LAYOUTS,
+	PROGRESS_BAR_RADII,
+	PROGRESS_BAR_SIZES,
 	ProgressBarRange,
-	PROGRESS_BAR_LABEL_TEXT_SIZES,
-	PROGRESS_BAR_BADGE_COLORS,
 } from './ProgressBar.consts';
 
-import DsIcon, { ICONS, ICON_SIZES } from '../Icons/Icon';
+import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 
 export default {
 	name: 'ProgressBar',
@@ -366,6 +376,10 @@ export default {
 			type: String,
 			default: null,
 		},
+		labelTextEllipsis: {
+			type: Boolean,
+			default: false,
+		},
 		badgePosition: {
 			type: Number,
 			default: null,

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

@@ -0,0 +1,4 @@
+export const WELL_PADDINGS = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+};

package/lib/js/components/Well/Well.stories.ts

@@ -0,0 +1,43 @@
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import Well from './Well.vue';
+import { WELL_PADDINGS } from './Well.consts';
+
+export default {
+	title: 'Components/Well',
+	component: Well,
+} as Meta<typeof Well>;
+
+const StoryTemplate: StoryFn<typeof Well> = (argTypes) => ({
+	components: { Well },
+	props: Object.keys(argTypes),
+	template: '<well :padding="padding"><div v-html="content" /></well>',
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	size: null,
+} as Args;
+
+const argTypes = {
+	padding: {
+		control: { type: 'select', options: [null, ...Object.values(WELL_PADDINGS)] },
+		defaultValue: null,
+	},
+	content: {
+		control: { type: 'text' },
+		defaultValue:
+			'<h3 style="margin-top: 0">Content</h3>' +
+			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/oqNhXXGdc4ZnNQ6YNpkLEK/INI-152-Baza-v3---planowanie?node-id=1807-518161&t=sQ5nflpPY2YcPKNc-4',
+	},
+};

package/lib/js/components/Well/Well.vue

@@ -0,0 +1,52 @@
+<template>
+	<div
+		class="well"
+		:class="{
+			'-medium': WELL_PADDINGS.MEDIUM === padding,
+			'-small': WELL_PADDINGS.SMALL === padding,
+		}"
+	>
+		<slot />
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/spacings';
+@import '../../../styles/settings/radiuses';
+@import '../../../styles/settings/colors/tokens';
+
+.well {
+	background-color: $color-neutral-background;
+	border-radius: $radius-m;
+
+	&.-medium {
+		padding: $space-s;
+	}
+
+	&.-small {
+		padding: $space-xs;
+	}
+}
+</style>
+
+<script>
+import { WELL_PADDINGS } from './Well.consts';
+
+export default {
+	name: 'Well',
+	props: {
+		padding: {
+			type: String,
+			default: null,
+			validator(padding) {
+				return Object.values(WELL_PADDINGS).includes(padding);
+			},
+		},
+	},
+	data() {
+		return {
+			WELL_PADDINGS: Object.freeze(WELL_PADDINGS),
+		};
+	},
+};
+</script>

package/lib/js/components/Well/index.ts

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

package/lib/js/index.ts

@@ -66,6 +66,8 @@ export { default as Pagination } from './components/Pagination';
 export * from './components/Pagination/Pagination.consts';
 export { default as OverlayHeader } from './components/OverlayHeader';
 export * from './components/OverlayHeader/OverlayHeader.consts';
+export { default as Well } from './components/Well';
+export * from './components/Well/Well.consts';
 
 export {
 	initialize as initializeIcons,

package/package.json

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