@bethinkpl/design-system 14.1.1 → 15.0.0

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/Dropdown/Dropdown.consts.ts

@@ -8,3 +8,8 @@ export const DROPDOWN_RADIUSES = {
 	BOTTOM: 'bottom',
 	BOTH: 'both',
 } as const;
+
+export const DROPDOWN_PLACEMENTS = {
+	BOTTOM_START: 'bottom-start',
+	BOTTOM_END: 'bottom-end',
+} as const;

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

@@ -1,5 +1,9 @@
 import Dropdown from './Dropdown.vue';
-import { DROPDOWN_RADIUSES, DROPDOWN_TRIGGER_ACTIONS } from './Dropdown.consts';
+import {
+	DROPDOWN_PLACEMENTS,
+	DROPDOWN_RADIUSES,
+	DROPDOWN_TRIGGER_ACTIONS,
+} from './Dropdown.consts';
 import SelectList from '../SelectList/SelectList.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
@@ -13,8 +17,10 @@ export default {
 const StoryTemplate: StoryFn<typeof Dropdown> = (argTypes) => ({
 	components: { Dropdown, SelectList, SelectListItem },
 	props: Object.keys(argTypes),
-	template: `<div style="position: relative">
-			<dropdown :trigger-action="triggerAction" :force-show="forceShow" :same-width="sameWidth" :radius="radius">
+	template: `
+			<div style="position: relative">
+			<dropdown :trigger-action="triggerAction" :force-show="forceShow" :same-width="sameWidth" :radius="radius"
+								:placement="placement">
 				<template #reference><span>Dropdown entry point</span></template>
 				<template #default="{ close }">
 					<select-list>
@@ -23,7 +29,7 @@ const StoryTemplate: StoryFn<typeof Dropdown> = (argTypes) => ({
 					</select-list>
 				</template>
 			</dropdown>
-		</div>`,
+			</div>`,
 });
 
 export const Interactive = StoryTemplate.bind({});
@@ -44,6 +50,10 @@ const argTypes = {
 		control: { type: 'select', options: Object.values(DROPDOWN_RADIUSES) },
 		defaultValue: DROPDOWN_RADIUSES.BOTH,
 	},
+	placement: {
+		control: { type: 'select', options: Object.values(DROPDOWN_PLACEMENTS) },
+		defaultValue: DROPDOWN_PLACEMENTS.BOTTOM_START,
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/Dropdown/Dropdown.vue

@@ -68,7 +68,11 @@
 <script lang="ts">
 import VuePopper from 'vue-popperjs';
 import 'vue-popperjs/dist/vue-popper.css';
-import { DROPDOWN_RADIUSES, DROPDOWN_TRIGGER_ACTIONS } from './Dropdown.consts';
+import {
+	DROPDOWN_PLACEMENTS,
+	DROPDOWN_RADIUSES,
+	DROPDOWN_TRIGGER_ACTIONS,
+} from './Dropdown.consts';
 
 export default {
 	name: 'Dropdown',
@@ -102,6 +106,13 @@ export default {
 				return Object.values(DROPDOWN_RADIUSES).includes(radius);
 			},
 		},
+		placement: {
+			type: String,
+			default: DROPDOWN_PLACEMENTS.BOTTOM_START,
+			validate(placement) {
+				return Object.values(DROPDOWN_PLACEMENTS).includes(placement);
+			},
+		},
 	},
 	data() {
 		return {
@@ -113,7 +124,7 @@ export default {
 		options() {
 			return {
 				modifiers: { preventOverflow: { padding: 0 } },
-				placement: 'bottom-start',
+				placement: this.placement,
 				...(this.sameWidth && {
 					// See https://github.com/floating-ui/floating-ui/issues/794
 					// We can't use onCreate because vue-popper overrides it.
@@ -135,6 +146,9 @@ export default {
 		boundariesSelector() {
 			this.updateKey();
 		},
+		placement() {
+			this.updateKey();
+		},
 	},
 	methods: {
 		close() {

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/OverlayHeader/OverlayHeader.vue

@@ -61,12 +61,20 @@
 			/>
 		</template>
 		<template v-if="$scopedSlots.dropdown">
-			<ds-dropdown boundaries-selector="body">
+			<ds-dropdown
+				boundaries-selector="body"
+				:placement="DROPDOWN_PLACEMENTS.BOTTOM_END"
+				@show="isDropdownOpen = true"
+				@hide="isDropdownOpen = false"
+			>
 				<template #reference>
 					<icon-button
 						:icon="ICONS.FA_ELLIPSIS_VERTICAL"
 						:size="ICON_BUTTON_SIZES.MEDIUM"
 						:color="ICON_BUTTON_COLORS.NEUTRAL"
+						:state="
+							isDropdownOpen ? ICON_BUTTON_STATES.HOVERED : ICON_BUTTON_STATES.DEFAULT
+						"
 					/>
 				</template>
 				<template #default="{ close }">
@@ -255,8 +263,8 @@
 <script lang="ts">
 import IconButton from '../Buttons/IconButton/IconButton.vue';
 import DsDivider, { DIVIDER_PROMINENCES } from '../Divider';
-import DsDropdown from '../Dropdown';
-import { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../Buttons/IconButton';
+import DsDropdown, { DROPDOWN_PLACEMENTS } from '../Dropdown';
+import { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES, ICON_BUTTON_STATES } from '../Buttons/IconButton';
 import { ICONS } from '../Icons/Icon';
 import { OVERLAY_HEADER_BORDER_COLORS } from './OverlayHeader.consts';
 
@@ -290,9 +298,12 @@ export default {
 		return {
 			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
 			ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
+			ICON_BUTTON_STATES: Object.freeze(ICON_BUTTON_STATES),
 			ICONS: Object.freeze(ICONS),
 			DIVIDER_PROMINENCES: Object.freeze(DIVIDER_PROMINENCES),
 			OVERLAY_HEADER_BORDER_COLORS: Object.freeze(OVERLAY_HEADER_BORDER_COLORS),
+			DROPDOWN_PLACEMENTS: Object.freeze(DROPDOWN_PLACEMENTS),
+			isDropdownOpen: false,
 		};
 	},
 	methods: {

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;