@bethinkpl/design-system 15.1.2 → 15.2.1

package/docs/vendors~main.d572ee99.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vendors~main.d572ee99.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}

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/SelectList/SelectListItemToggle/SelectListItemToggle.vue

@@ -73,10 +73,6 @@ export default {
 	},
 	computed: {
 		icon(): IconItem | null {
-			if (this.isLoading) {
-				return ICONS.FAD_SPINNER_THIRD;
-			}
-
 			return this.isOn ? this.iconOn : this.iconOff;
 		},
 		label(): string {

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/icons/fontawesome.ts

@@ -58,6 +58,7 @@ import { faEllipsisVertical } from '@fortawesome/pro-regular-svg-icons/faEllipsi
 import { faEye } from '@fortawesome/pro-regular-svg-icons/faEye';
 import { faEyeSlash } from '@fortawesome/pro-regular-svg-icons/faEyeSlash';
 import { faFaceFrown } from '@fortawesome/pro-regular-svg-icons/faFaceFrown';
+import { faFaceGrimace } from '@fortawesome/pro-regular-svg-icons/faFaceGrimace';
 import { faFaceMeh } from '@fortawesome/pro-regular-svg-icons/faFaceMeh';
 import { faFaceSmile } from '@fortawesome/pro-regular-svg-icons/faFaceSmile';
 import { faFileInvoiceDollar } from '@fortawesome/pro-regular-svg-icons/faFileInvoiceDollar';
@@ -74,6 +75,7 @@ import { faGift } from '@fortawesome/pro-regular-svg-icons/faGift';
 import { faGraduationCap } from '@fortawesome/pro-regular-svg-icons/faGraduationCap';
 import { faGrid } from '@fortawesome/pro-regular-svg-icons/faGrid';
 import { faHandPointLeft } from '@fortawesome/pro-regular-svg-icons/faHandPointLeft';
+import { faHandPointRight } from '@fortawesome/pro-regular-svg-icons/faHandPointRight';
 import { faHeartPulse } from '@fortawesome/pro-regular-svg-icons/faHeartPulse';
 import { faHourglass } from '@fortawesome/pro-regular-svg-icons/faHourglass';
 import { faHourglassEnd } from '@fortawesome/pro-regular-svg-icons/faHourglassEnd';
@@ -249,6 +251,7 @@ export const FONTAWESOME_ICONS = {
 	FA_EYE: faEye,
 	FA_EYE_SLASH: faEyeSlash,
 	FA_FACE_FROWN: faFaceFrown,
+	FA_FACE_GRIMACE: faFaceGrimace,
 	FA_FACE_MEH: faFaceMeh,
 	FA_FACE_SMILE: faFaceSmile,
 	FA_FACEBOOK: faFacebook,
@@ -272,6 +275,7 @@ export const FONTAWESOME_ICONS = {
 	FA_GRADUATION_CAP: faGraduationCap,
 	FA_GRID: faGrid,
 	FA_HAND_POINT_LEFT: faHandPointLeft,
+	FA_HAND_POINT_RIGHT: faHandPointRight,
 	FA_HAND_SPOCK_SOLID: fasHandSpock,
 	FA_HANDS_SOLID: fasHands,
 	FA_HEART_PULSE: faHeartPulse,

package/lib/js/index.ts

@@ -13,6 +13,8 @@ export { default as Card } from './components/Cards/Card/';
 export { default as CardExpandable } from './components/Cards/CardExpandable/';
 export { default as Divider } from './components/Divider';
 export * from './components/Divider/Divider.consts';
+export { default as FeatureIcon } from './components/Icons/FeatureIcon';
+export * from './components/Icons/FeatureIcon/FeatureIcon.consts';
 export { default as Icon } from './components/Icons/Icon';
 export * from './components/Icons/Icon/Icon.consts';
 export { default as IconButton } from './components/Buttons/IconButton';
@@ -64,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.1.2",
+  "version": "15.2.1",
   "description": "Bethink universe design-system",
   "repository": "git@github.com:bethinkpl/design-system.git",
   "author": "nerdy@bethink.pl",