@bethinkpl/design-system 14.1.2 → 15.0.1

package/docs/vendors~main.09187a93.iframe.bundle.js.map

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

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

@@ -1,4 +1,3 @@
-import ClipboardAdd from '../../../../images/icons/clipboard-add.svg';
 import HeadWithQuestionMark from '../../../../images/icons/head-with-question-mark.svg';
 import Ribbon from '../../../../images/icons/ribbon.svg';
 import SlidersSearch from '../../../../images/icons/sliders-search.svg';
@@ -16,7 +15,6 @@ export const ICON_SIZES = {
 };
 
 const BETHINK_ICONS = {
-	CLIPBOARD_ADD: ClipboardAdd,
 	HEAD_WITH_QUESTION_MARK: HeadWithQuestionMark,
 	RIBBON: Ribbon,
 	SLIDERS_SEARCH: SlidersSearch,

package/lib/js/components/Modals/Modal/Modal.vue

@@ -66,6 +66,7 @@
 								:type="BUTTON_TYPES.TEXT"
 								:color="BUTTON_COLORS.NEUTRAL"
 								:icon-left="footerTertiaryButtonIcon"
+								@click="$emit('tertiary-button-click')"
 							>
 								{{ footerTertiaryButtonText }}
 							</wnl-button>
@@ -80,6 +81,7 @@
 								:type="BUTTON_TYPES.OUTLINED"
 								:color="calcFooterSecondaryButtonColor"
 								:icon-right="footerSecondaryButtonIcon"
+								@click="$emit('secondary-button-click')"
 							>
 								{{ footerSecondaryButtonText }}
 							</wnl-button>
@@ -88,6 +90,7 @@
 								class="ds-modal__buttonPrimary"
 								:color="calcFooterPrimaryButtonColor"
 								:icon-right="footerPrimaryButtonIcon"
+								@click="$emit('primary-button-click')"
 							>
 								{{ footerPrimaryButtonText }}
 							</wnl-button>

package/lib/js/components/Modals/ModalDialog/ModalDialog.vue

@@ -14,6 +14,9 @@
 		:footer-primary-button-icon="footerPrimaryButtonIcon"
 		:footer-secondary-button-text="footerSecondaryButtonText"
 		:footer-secondary-button-icon="footerSecondaryButtonIcon"
+		@close-modal="$emit('close-modal')"
+		@primary-button-click="$emit('primary-button-click')"
+		@secondary-button-click="$emit('secondary-button-click')"
 	>
 		<slot />
 	</ds-modal>

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

@@ -1,7 +1,39 @@
-export const PROGRESS_BAR_COLORS = {
+export const PROGRESS_BAR_RANGE_COLORS = {
+	PRIMARY_MEDIUM: 'primaryMedium',
+	PRIMARY: 'primary',
+	PRIMARY_WEAK: 'primaryWeak',
+	PRIMARY_GHOST: 'primaryGhost',
+
+	NEUTRAL_MEDIUM: 'neutralMedium',
 	NEUTRAL: 'neutral',
+	NEUTRAL_WEAK: 'neutralWeak',
+	NEUTRAL_GHOST: 'neutralGhost',
+
+	INFO_MEDIUM: 'infoMedium',
 	INFO: 'info',
+	INFO_WEAK: 'infoWeak',
+	INFO_GHOST: 'infoGhost',
+
+	SUCCESS_MEDIUM: 'successMedium',
+	SUCCESS: 'success',
+	SUCCESS_WEAK: 'successWeak',
+	SUCCESS_GHOST: 'successGhost',
+
+	WARNING_MEDIUM: 'warningMedium',
+	WARNING: 'warning',
+	WARNING_WEAK: 'warningWeak',
+	WARNING_GHOST: 'warningGhost',
+
+	FAIL_MEDIUM: 'failMedium',
+	FAIL: 'fail',
+	FAIL_WEAK: 'failWeak',
+	FAIL_GHOST: 'failGhost',
+} as const;
+
+export const PROGRESS_BAR_BADGE_COLORS = {
 	PRIMARY: 'primary',
+	NEUTRAL: 'neutral',
+	INFO: 'info',
 	SUCCESS: 'success',
 	WARNING: 'warning',
 	FAIL: 'fail',
@@ -13,6 +45,11 @@ export const PROGRESS_BAR_SIZES = {
 	XSMALL: 'extra small',
 } as const;
 
+export const PROGRESS_BAR_LABEL_TEXT_SIZES = {
+	MEDIUM: 'medium',
+	SMALL: 'small',
+} as const;
+
 export const PROGRESS_BAR_RADII = {
 	DEFAULT: 'default',
 	NONE: 'none',
@@ -23,19 +60,8 @@ export const PROGRESS_BAR_LAYOUTS = {
 	COMPACT: 'compact',
 };
 
-export const PROGRESS_BAR_LAYERS = {
-	ONE: 1,
-	TWO: 2,
-};
-
-export const PROGRESS_BAR_COLOR_SCHEMES = {
-	DEFAULT: 'default',
-	MEDIUM: 'medium',
-	MEDIUM_NEUTRAL: 'medium-neutral',
-};
-
 export interface ProgressBarRange {
-	layer: Number;
-	start: Number;
-	length: Number;
+	color: typeof PROGRESS_BAR_RANGE_COLORS[keyof typeof PROGRESS_BAR_RANGE_COLORS];
+	start: number;
+	length: number;
 }

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

@@ -1,12 +1,12 @@
 import ProgressBar from './ProgressBar.vue';
 import {
-	PROGRESS_BAR_COLORS,
+	PROGRESS_BAR_RANGE_COLORS,
 	PROGRESS_BAR_SIZES,
 	PROGRESS_BAR_LAYOUTS,
 	PROGRESS_BAR_RADII,
-	PROGRESS_BAR_LAYERS,
-	PROGRESS_BAR_COLOR_SCHEMES,
 	ProgressBarRange,
+	PROGRESS_BAR_LABEL_TEXT_SIZES,
+	PROGRESS_BAR_BADGE_COLORS,
 } from './ProgressBar.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
@@ -19,43 +19,39 @@ export default {
 const StoryTemplate: StoryFn<typeof ProgressBar> = (argTypes) => ({
 	components: { ProgressBar },
 	props: Object.keys(argTypes),
-	template: `<ProgressBar v-bind=$props></ProgressBar>`,
+	template: `
+			<ProgressBar
+					v-bind=$props
+					:badge-position="(typeof ($props.badgePosition) === 'undefined' || $props.badgePosition === '') ? null : parseInt($props.badgePosition, 10)"
+			/>`,
 });
 
 export const Interactive = StoryTemplate.bind({});
 
 const argTypes = {
-	numberOfLayers: {
-		control: { type: 'select', options: Object.values(PROGRESS_BAR_LAYERS) },
-		defaultValue: PROGRESS_BAR_LAYERS.ONE,
-	},
-	colorScheme: {
-		control: { type: 'select', options: Object.values(PROGRESS_BAR_COLOR_SCHEMES) },
-		defaultValue: PROGRESS_BAR_COLOR_SCHEMES.DEFAULT,
-	},
-	color: {
-		control: { type: 'select', options: Object.values(PROGRESS_BAR_COLORS) },
-		defaultValue: PROGRESS_BAR_COLORS.INFO,
-	},
 	size: {
 		control: { type: 'select', options: Object.values(PROGRESS_BAR_SIZES) },
-		defaultValue: PROGRESS_BAR_SIZES.MEDIUM,
+		defaultValue: PROGRESS_BAR_SIZES.SMALL,
+	},
+	labelTextSize: {
+		control: { type: 'select', options: Object.values(PROGRESS_BAR_LABEL_TEXT_SIZES) },
+		defaultValue: PROGRESS_BAR_LABEL_TEXT_SIZES.SMALL,
 	},
 	ranges: {
 		control: { type: 'array' },
 		defaultValue: [
 			{
-				layer: 1,
+				color: PROGRESS_BAR_RANGE_COLORS.INFO,
 				start: 0,
 				length: 30,
 			} as ProgressBarRange,
 			{
-				layer: 2,
+				color: PROGRESS_BAR_RANGE_COLORS.INFO_WEAK,
 				start: 30,
 				length: 10,
 			} as ProgressBarRange,
 			{
-				layer: 2,
+				color: PROGRESS_BAR_RANGE_COLORS.INFO_GHOST,
 				start: 40,
 				length: 10,
 			} as ProgressBarRange,
@@ -85,6 +81,15 @@ const argTypes = {
 		control: { type: 'text' },
 		defaultValue: '(%)',
 	},
+	badgePosition: {
+		// we use `text` type, because Storybook doesn't allow empty field in `number` type which imitates null
+		control: { type: 'text' },
+		defaultValue: '50',
+	},
+	badgeColor: {
+		control: { type: 'select', options: Object.values(PROGRESS_BAR_BADGE_COLORS) },
+		defaultValue: PROGRESS_BAR_BADGE_COLORS.INFO,
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
@@ -96,90 +101,74 @@ Interactive.parameters = {
 	},
 };
 
-const argTypesColorOnly = {
-	color: {
-		control: { type: 'select', options: Object.values(PROGRESS_BAR_COLORS) },
-		defaultValue: PROGRESS_BAR_COLORS.INFO,
-	},
-} as ArgTypes;
-
 export const WithoutLabels = StoryTemplate.bind({});
 
 WithoutLabels.args = {
-	color: PROGRESS_BAR_COLORS.PRIMARY,
 	ranges: [
 		{
-			layer: 1,
+			color: PROGRESS_BAR_RANGE_COLORS.INFO,
 			start: 0,
 			length: 30,
 		} as ProgressBarRange,
 	],
 } as Args;
-WithoutLabels.argTypes = argTypesColorOnly;
 
-export const TwoLayers = StoryTemplate.bind({});
+export const TwoColors = StoryTemplate.bind({});
 
-TwoLayers.args = {
-	color: PROGRESS_BAR_COLORS.PRIMARY,
-	numberOfLayers: 2,
+TwoColors.args = {
 	ranges: [
 		{
-			layer: 1,
+			color: PROGRESS_BAR_RANGE_COLORS.INFO,
 			start: 0,
 			length: 30,
 		} as ProgressBarRange,
 		{
-			layer: 2,
+			color: PROGRESS_BAR_RANGE_COLORS.WARNING,
 			start: 30,
 			length: 30,
 		} as ProgressBarRange,
 	],
 } as Args;
-TwoLayers.argTypes = argTypesColorOnly;
 
 export const WithGaps = StoryTemplate.bind({});
 
 WithGaps.args = {
-	color: PROGRESS_BAR_COLORS.PRIMARY,
-	numberOfLayers: 2,
 	ranges: [
 		{
-			layer: 1,
+			color: PROGRESS_BAR_RANGE_COLORS.INFO,
 			start: 0,
 			length: 10,
 		} as ProgressBarRange,
 		{
-			layer: 2,
+			color: PROGRESS_BAR_RANGE_COLORS.INFO_WEAK,
 			start: 20,
 			length: 10,
 		} as ProgressBarRange,
 		{
-			layer: 1,
+			color: PROGRESS_BAR_RANGE_COLORS.INFO,
 			start: 40,
 			length: 10,
 		} as ProgressBarRange,
 		{
-			layer: 2,
+			color: PROGRESS_BAR_RANGE_COLORS.INFO_WEAK,
 			start: 50,
 			length: 10,
 		} as ProgressBarRange,
 		{
-			layer: 1,
+			color: PROGRESS_BAR_RANGE_COLORS.INFO,
 			start: 70,
-			length: 100,
+			length: 30,
 		} as ProgressBarRange,
 	],
 } as Args;
-WithGaps.argTypes = argTypesColorOnly;
 
 export const Compact = StoryTemplate.bind({});
 
 Compact.args = {
-	color: PROGRESS_BAR_COLORS.PRIMARY,
 	layout: PROGRESS_BAR_LAYOUTS.COMPACT,
 	ranges: [
 		{
-			layer: 1,
+			color: PROGRESS_BAR_RANGE_COLORS.INFO,
 			start: 0,
 			length: 30,
 		} as ProgressBarRange,
@@ -189,4 +178,3 @@ Compact.args = {
 	labelDataSupporting: '100',
 	labelDataSuffix: '(%)',
 } as Args;
-Compact.argTypes = argTypesColorOnly;