@bethinkpl/design-system 16.5.0 → 16.6.0

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1684849448870,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.4"},"packageManager":{"type":"yarn","version":"1.22.19"},"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":1685017383139,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.4"},"packageManager":{"type":"yarn","version":"1.22.19"},"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/Banner/Banner.vue

@@ -342,6 +342,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['button-clicked', 'close', 'update:isExpanded'],
 	data() {
 		return {
 			isExpandedInternal: false,

package/lib/js/components/Cards/CardExpandable/CardExpandable.vue

@@ -112,6 +112,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:isExpanded'],
 	data() {
 		return {
 			isExpandedInternal: false,

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

@@ -114,6 +114,7 @@ export default {
 			},
 		},
 	},
+	emits: ['document-click', 'hide', 'show'],
 	data() {
 		return {
 			key: 1,

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue

@@ -295,6 +295,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['close', 'titleClick'],
 	data() {
 		return {
 			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),

package/lib/js/components/Headers/SectionHeader/SectionHeader.vue

@@ -156,6 +156,7 @@
 	}
 
 	&__info {
+		line-height: 0;
 		padding: $space-xxxs 0;
 	}
 

package/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue

@@ -235,6 +235,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['overlay-clicked'],
 	data() {
 		return {
 			THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE: Object.freeze(

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

@@ -117,6 +117,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['close-modal'],
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),

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

@@ -404,6 +404,13 @@ export default {
 			default: null,
 		},
 	},
+	emits: [
+		'tertiary-button-click',
+		'checkbox-change',
+		'close-modal',
+		'secondary-button-click',
+		'primary-button-click',
+	],
 	data() {
 		return {
 			BUTTON_COLORS: Object.freeze(BUTTON_COLORS),

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

@@ -86,6 +86,7 @@ export default {
 			},
 		},
 	},
+	emits: ['close-modal', 'primary-button-click', 'secondary-button-click'],
 	data() {
 		return {
 			MODAL_SIZES: Object.freeze(MODAL_SIZES),

package/lib/js/components/Outline/OutlineDivider/OutlineDivider.stories.ts

@@ -0,0 +1,38 @@
+import OutlineDivider from './OutlineDivider.vue';
+import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
+
+export default {
+	title: 'Components/Outline/OutlineDivider',
+	component: OutlineDivider,
+} as Meta<typeof OutlineDivider>;
+
+const StoryTemplate: StoryFn<typeof OutlineDivider> = (args) => ({
+	components: { OutlineDivider },
+	setup() {
+		return { ...args };
+	},
+	template: `<outline-divider :prominence="prominence" :size="size" />`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const argTypes = {
+	prominence: {
+		control: { type: 'select', options: Object.values(DIVIDER_PROMINENCES) },
+		defaultValue: DIVIDER_PROMINENCES.DEFAULT,
+	},
+	size: {
+		control: { type: 'select', options: Object.values(DIVIDER_SIZES) },
+		defaultValue: DIVIDER_SIZES.S,
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=6148-111431&t=Amd0mke9FMknuKCX-0',
+	},
+};

package/lib/js/components/Outline/OutlineDivider/OutlineDivider.vue

@@ -0,0 +1,36 @@
+<template>
+	<div class="outlineDivider">
+		<ds-divider :prominence="prominence" :size="size" />
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/spacings';
+
+.outlineDivider {
+	padding: $space-xxxs 0;
+}
+</style>
+
+<script lang="ts">
+import DsDivider, { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
+
+export default {
+	name: 'OutlineDivider',
+	components: {
+		DsDivider,
+	},
+	props: {
+		prominence: {
+			type: String,
+			default: DIVIDER_PROMINENCES.DEFAULT,
+			validator: (value: string) => Object.values(DIVIDER_PROMINENCES).includes(value),
+		},
+		size: {
+			type: String,
+			default: DIVIDER_SIZES.S,
+			validator: (value: string) => Object.values(DIVIDER_SIZES).includes(value),
+		},
+	},
+};
+</script>

package/lib/js/components/Outline/OutlineDivider/index.ts

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

package/lib/js/components/Outline/OutlineItem/OutlineItem.consts.ts

@@ -0,0 +1,13 @@
+export const OUTLINE_ITEM_SIZES = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+};
+export const OUTLINE_ITEM_STATES = {
+	DEFAULT: 'default',
+	DISABLED: 'disabled',
+};
+
+export const OUTLINE_ITEM_BACKGROUND_COLORS = {
+	NEUTRAL_WEAK: 'neutralWeak',
+	NEUTRAL: 'neutral',
+};

package/lib/js/components/Outline/OutlineItem/OutlineItem.stories.ts

@@ -0,0 +1,94 @@
+import OutlineItem from './OutlineItem.vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { ICONS } from '../../Icons/Icon';
+import {
+	OUTLINE_ITEM_BACKGROUND_COLORS,
+	OUTLINE_ITEM_SIZES,
+	OUTLINE_ITEM_STATES,
+} from './OutlineItem.consts';
+
+export default {
+	title: 'Components/Outline/OutlineItem',
+	component: OutlineItem,
+} as Meta<typeof OutlineItem>;
+
+const StoryTemplate: StoryFn<typeof OutlineItem> = (args) => ({
+	components: { OutlineItem },
+	setup() {
+		return { ...args };
+	},
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+		};
+	},
+	template: `<outline-item :label="label" :additional-text="additionalText" :size="size" :state="state" :icon-left="ICONS[iconLeft]" :icon-right="ICONS[iconRight]" :is-done="isDone" :is-selected="isSelected" :background-color="backgroundColor" :index="index" :is-label-uppercase="isLabelUppercase" :icon-right-rotation="iconRightRotation" :has-selected-icons-color-primary="hasSelectedIconsColorPrimary" :is-selected-interactive="isSelectedInteractive"><div v-if="defaultSlot && defaultSlot.length > 0" v-html="defaultSlot" style="font-size: 14px; line-height: 16px;"></div></outline-item>`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {} as Args;
+
+const argTypes = {
+	defaultSlot: { control: { type: 'text' }, defaultValue: 'Default slot' },
+	size: {
+		control: { type: 'select', options: Object.values(OUTLINE_ITEM_SIZES) },
+		defaultValue: OUTLINE_ITEM_SIZES.SMALL,
+	},
+	backgroundColor: {
+		control: { type: 'select', options: Object.values(OUTLINE_ITEM_BACKGROUND_COLORS) },
+		defaultValue: OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL_WEAK,
+	},
+	iconLeft: {
+		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		defaultValue: null,
+	},
+	iconRight: {
+		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		defaultValue: null,
+	},
+	iconRightRotation: {
+		control: { type: 'select', options: [null, 90, 180, 270] },
+		defaultValue: null,
+	},
+	index: {
+		control: { type: 'number' },
+		defaultValue: null,
+	},
+	label: { control: { type: 'text' }, defaultValue: 'Outline Item label' },
+	isLabelUppercase: {
+		control: { type: 'boolean' },
+		defaultValue: false,
+	},
+	additionalText: { control: { type: 'text' } },
+	state: {
+		control: { type: 'select', options: Object.values(OUTLINE_ITEM_STATES) },
+		defaultValue: OUTLINE_ITEM_STATES.DEFAULT,
+	},
+	isSelected: {
+		control: { type: 'boolean' },
+		defaultValue: false,
+	},
+	isDone: {
+		control: { type: 'boolean' },
+		defaultValue: false,
+	},
+	hasSelectedIconsColorPrimary: {
+		control: { type: 'boolean' },
+		defaultValue: true,
+	},
+	isSelectedInteractive: {
+		control: { type: 'boolean' },
+		defaultValue: false,
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=6148-111431&t=Amd0mke9FMknuKCX-0',
+	},
+};

package/lib/js/components/Outline/OutlineItem/OutlineItem.vue

@@ -0,0 +1,306 @@
+<template>
+	<div
+		v-ripple:disabled="isSelected && !isSelectedInteractive"
+		class="outlineItem"
+		:class="{
+			'-disabled': isDisabled,
+			'-medium': size === OUTLINE_ITEM_SIZES.MEDIUM,
+			'-selected': isSelected,
+			'-hoverable': !isSelected || isSelectedInteractive,
+			'-backgroundNeutral': backgroundColor === OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL,
+		}"
+	>
+		<div class="outlineItem__content">
+			<span
+				v-if="index !== null"
+				class="outlineItem__index"
+				:class="{ '-active': isSelected }"
+			>
+				{{ index }}.
+			</span>
+			<ds-icon
+				v-if="iconLeft"
+				class="outlineItem__icon"
+				:class="{
+					'-active': isSelected && hasSelectedIconsColorPrimary,
+				}"
+				:icon="iconLeft"
+				:size="ICON_SIZES.X_SMALL"
+			/>
+			<span class="outlineItem__text">
+				<span class="outlineItem__label" :class="{ '-uppercase': isLabelUppercase }">
+					{{ label }}
+				</span>
+				<span v-if="additionalText" class="outlineItem__additionalText">
+					{{ additionalText }}
+				</span>
+			</span>
+		</div>
+		<div class="outlineItem__rightContent">
+			<template v-if="$slots.default">
+				<slot />
+			</template>
+			<ds-icon
+				v-if="isDone"
+				class="outlineItem__icon -active"
+				:icon="ICONS.FA_CHECK_SOLID"
+				:size="ICON_SIZES.X_SMALL"
+			/>
+			<ds-icon
+				v-else-if="iconRight"
+				class="outlineItem__icon"
+				:class="{
+					'-active': isSelected && hasSelectedIconsColorPrimary,
+				}"
+				:icon="iconRight"
+				:size="ICON_SIZES.X_SMALL"
+				:rotation="iconRightRotation"
+			></ds-icon>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/radiuses';
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/typography/tokens';
+
+.outlineItem {
+	$root: &;
+	$border-width: 2px;
+
+	background-color: $color-neutral-background-weak;
+	border-radius: $radius-s;
+	column-gap: $space-xxs;
+	display: flex;
+	justify-content: space-between;
+	padding: $space-xs;
+
+	&__rightContent,
+	&__content {
+		align-items: center;
+		column-gap: $space-xxs;
+		display: inline-flex;
+	}
+
+	&__index {
+		@include label-l-default-bold;
+
+		align-self: flex-start;
+		color: $color-neutral-text-weak;
+
+		&.-active {
+			color: $color-primary-text;
+		}
+	}
+
+	&__text {
+		@include label-l-default-regular; //it fixes whole component height
+	}
+
+	&__label {
+		@include label-l-default-regular;
+
+		color: $color-neutral-text-heavy;
+
+		&.-uppercase {
+			@include label-l-default-regular-uppercase;
+		}
+	}
+
+	&__additionalText {
+		@include label-m-default-bold;
+
+		color: $color-neutral-text-weak;
+		margin-left: $space-xxxxs;
+	}
+
+	&__icon {
+		align-self: flex-start;
+		color: $color-neutral-icon-weak;
+
+		&.-active {
+			color: $color-primary-icon;
+		}
+	}
+
+	&.-hoverable:hover {
+		background-color: $color-neutral-background-weak-hovered;
+		cursor: pointer;
+	}
+
+	&.-selected {
+		background-color: $color-neutral-background;
+		border-left: $border-width solid $color-primary-border;
+		border-radius: $radius-xs $radius-s $radius-s $radius-xs;
+		padding-left: $space-xs - $border-width;
+	}
+
+	&.-disabled {
+		pointer-events: none;
+
+		&.-selected {
+			border-left: $border-width solid $color-primary-border-disabled;
+		}
+
+		#{$root}__icon {
+			color: $color-neutral-icon-weak-disabled;
+
+			&.-active {
+				color: $color-primary-icon-disabled;
+			}
+		}
+
+		#{$root}__index {
+			color: $color-neutral-text-weak-disabled;
+
+			&.-active {
+				color: $color-primary-text-disabled;
+			}
+		}
+
+		#{$root}__label {
+			color: $color-neutral-text-heavy-disabled;
+		}
+	}
+
+	&.-medium {
+		padding: $space-s $space-xs;
+
+		#{$root}__content {
+			column-gap: $space-xxxs;
+		}
+
+		#{$root}__label {
+			@include label-l-default-bold;
+
+			&.-uppercase {
+				@include label-l-default-bold-uppercase;
+			}
+		}
+
+		&.-selected {
+			padding-left: $space-xs - $border-width;
+		}
+	}
+
+	&.-backgroundNeutral {
+		background-color: $color-neutral-background;
+
+		&.-hoverable:hover {
+			background-color: $color-neutral-background-hovered;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import DsIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
+import { toRaw } from 'vue';
+import {
+	OUTLINE_ITEM_BACKGROUND_COLORS,
+	OUTLINE_ITEM_SIZES,
+	OUTLINE_ITEM_STATES,
+} from './OutlineItem.consts';
+import Ripple from 'vue-ripple-directive';
+
+export default {
+	name: 'OutlineItem',
+	components: {
+		DsIcon,
+	},
+	directives: {
+		ripple: Ripple,
+	},
+	props: {
+		size: {
+			type: String,
+			default: OUTLINE_ITEM_SIZES.SMALL,
+			validator(size) {
+				return Object.values(OUTLINE_ITEM_SIZES).includes(size);
+			},
+		},
+		backgroundColor: {
+			type: String,
+			default: OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL_WEAK,
+			validator(color) {
+				return Object.values(OUTLINE_ITEM_BACKGROUND_COLORS).includes(color);
+			},
+		},
+		iconLeft: {
+			type: Object,
+			default: null,
+			validator(icon) {
+				return icon == null || Object.values(ICONS).includes(toRaw(icon));
+			},
+		},
+		iconRight: {
+			type: Object,
+			default: null,
+			validator(icon) {
+				return icon == null || Object.values(ICONS).includes(toRaw(icon));
+			},
+		},
+		iconRightRotation: {
+			type: Number,
+			default: null,
+			validator(value: number) {
+				return [90, 180, 270].includes(value);
+			},
+		},
+		index: {
+			type: Number,
+			default: null,
+		},
+		label: {
+			type: String,
+			required: true,
+		},
+		isLabelUppercase: {
+			type: Boolean,
+			default: false,
+		},
+		additionalText: {
+			type: String,
+			default: null,
+		},
+		state: {
+			type: String,
+			default: OUTLINE_ITEM_STATES.DEFAULT,
+			validator(state) {
+				return Object.values(OUTLINE_ITEM_STATES).includes(state);
+			},
+		},
+		isSelected: {
+			type: Boolean,
+			default: false,
+		},
+		isDone: {
+			type: Boolean,
+			default: false,
+		},
+		hasSelectedIconsColorPrimary: {
+			type: Boolean,
+			default: true,
+		},
+		isSelectedInteractive: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+			ICON_SIZES: Object.freeze(ICON_SIZES),
+			OUTLINE_ITEM_BACKGROUND_COLORS: Object.freeze(OUTLINE_ITEM_BACKGROUND_COLORS),
+			OUTLINE_ITEM_SIZES: Object.freeze(OUTLINE_ITEM_SIZES),
+		};
+	},
+	computed: {
+		isDisabled() {
+			return this.state === OUTLINE_ITEM_STATES.DISABLED;
+		},
+	},
+};
+</script>

package/lib/js/components/Outline/OutlineItem/index.ts

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

package/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.stories.ts

@@ -0,0 +1,33 @@
+import OutlineSectionHeader from './OutlineSectionHeader.vue';
+import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'Components/Outline/OutlineSectionHeader',
+	component: OutlineSectionHeader,
+} as Meta<typeof OutlineSectionHeader>;
+
+const StoryTemplate: StoryFn<typeof OutlineSectionHeader> = (args) => ({
+	components: { OutlineSectionHeader },
+	setup() {
+		return { ...args };
+	},
+	template: `<outline-section-header :title="title" />`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const argTypes = {
+	title: {
+		control: { type: 'text' },
+		defaultValue: 'section header all caps',
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=6148-111431&t=Amd0mke9FMknuKCX-0',
+	},
+};

package/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="outlineSectionHeader">{{ title }}</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/typography/tokens';
+
+.outlineSectionHeader {
+	@include info-s-extensive-bold-uppercase;
+
+	color: $color-neutral-text-weak;
+	padding: $space-xxs 0;
+}
+</style>
+
+<script lang="ts">
+export default {
+	name: 'OutlineSectionHeader',
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+	},
+};
+</script>

package/lib/js/components/Outline/OutlineSectionHeader/index.ts

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

package/lib/js/components/Pagination/Pagination.vue

@@ -275,6 +275,7 @@ export default {
 			required: true,
 		},
 	},
+	emits: ['change-page'],
 	data() {
 		return {
 			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),

package/lib/js/components/Pill/Pill.vue

@@ -254,6 +254,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['delete'],
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),

package/lib/js/components/PopOver/PopOver.vue

@@ -273,6 +273,7 @@ export default {
 			default: '',
 		},
 	},
+	emits: ['button-click'],
 	data() {
 		return {
 			POP_OVER_COLORS: Object.freeze(POP_OVER_COLORS),