@bethinkpl/design-system 15.0.2 → 15.1.1

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1679915424872,"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":1680180973827,"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/Badges/Badge/Badge.vue

@@ -36,10 +36,10 @@ $badge-min-height: 20px;
 	}
 
 	&__slot {
-		display: flex;
 		align-items: center;
-		margin-right: $space-xxs;
+		display: flex;
 		height: $icon-xxs;
+		margin-right: $space-xxs;
 		width: $icon-xxs;
 	}
 }

package/lib/js/components/Badges/BadgeScore/BadgeScore.vue

@@ -119,8 +119,8 @@ $badge-score-colors: (
 	}
 
 	&__icon {
-		margin-right: $space-xxxxxs;
 		align-self: center;
+		margin-right: $space-xxxxxs;
 	}
 
 	&__suffix {
@@ -132,8 +132,8 @@ $badge-score-colors: (
 	&.-small {
 		@include label-xl-default-bold;
 
-		padding: $space-xxs $space-xxs;
 		min-width: $badge-score-small-min-width;
+		padding: $space-xxs $space-xxs;
 		#{$self}__suffix {
 			@include label-l-default-bold;
 		}

package/lib/js/components/Banner/Banner.vue

@@ -124,8 +124,8 @@
 			}
 
 			#{$self}__rightSlot {
-				padding: $space-xs 0 $space-xs 0;
 				flex-grow: initial;
+				padding: $space-xs 0 $space-xs 0;
 			}
 		}
 	}
@@ -172,8 +172,8 @@
 	&__header {
 		display: flex;
 		justify-content: space-between;
-		width: 100%;
 		padding: 0 $space-xxxxs;
+		width: 100%;
 	}
 
 	&__title {
@@ -189,8 +189,8 @@
 	}
 
 	&__textWrapper {
-		flex: 1;
 		display: flex;
+		flex: 1;
 		flex-direction: column;
 		justify-content: space-between;
 	}
@@ -198,15 +198,15 @@
 	&__titleWrapper {
 		display: flex;
 		flex-direction: column;
-		justify-content: center;
 		flex-grow: 1;
+		justify-content: center;
 		padding: $space-xxxxs 0;
 	}
 
 	&__rightWrapper {
 		display: flex;
-		flex-wrap: nowrap;
 		flex-shrink: 0;
+		flex-wrap: nowrap;
 		padding: 0;
 	}
 
@@ -215,8 +215,8 @@
 	}
 
 	&__rightSlot {
-		padding: $space-xxs 0 0 0;
 		flex-grow: 1;
+		padding: $space-xxs 0 0 0;
 
 		&:nth-child(2) {
 			margin-left: $space-xxxxs;
@@ -224,8 +224,8 @@
 	}
 
 	&__iconContainer {
-		padding: $space-xxxxs 0;
 		margin-right: $space-s;
+		padding: $space-xxxxs 0;
 
 		&.-hideOnMobile {
 			display: none;
@@ -241,38 +241,38 @@
 		padding: $space-xxs;
 
 		&.-neutral {
-			color: $color-neutral-icon;
 			background-color: $color-neutral-background-medium;
+			color: $color-neutral-icon;
 		}
 
 		&.-default {
-			color: $color-neutral-icon;
 			background-color: $color-neutral-background-medium;
+			color: $color-neutral-icon;
 		}
 
 		&.-warning {
-			color: $color-warning-icon;
 			background-color: $color-warning-background-medium;
+			color: $color-warning-icon;
 		}
 
 		&.-success {
-			color: $color-success-icon;
 			background-color: $color-success-background-medium;
+			color: $color-success-icon;
 		}
 
 		&.-info {
-			color: $color-info-icon;
 			background-color: $color-info-background-medium;
+			color: $color-info-icon;
 		}
 
 		&.-fail {
-			color: $color-fail-icon;
 			background-color: $color-fail-background-medium;
+			color: $color-fail-icon;
 		}
 
 		&.-danger {
-			color: $color-danger-icon;
 			background-color: $color-danger-background-medium;
+			color: $color-danger-icon;
 		}
 	}
 
@@ -281,8 +281,8 @@
 	}
 
 	&__expander {
-		padding: 0;
 		margin-left: $space-xxs;
+		padding: 0;
 	}
 
 	&__expandedContainer {

package/lib/js/components/Buttons/IconButton/IconButton.vue

@@ -221,8 +221,8 @@
 	&.-xx-small {
 		#{$self}__button {
 			height: $icon-button-xx-small-size;
-			width: $icon-button-xx-small-size;
 			padding: $space-xxxxs;
+			width: $icon-button-xx-small-size;
 		}
 
 		#{$self}__label {
@@ -233,8 +233,8 @@
 	&.-x-small {
 		#{$self}__button {
 			height: $icon-button-x-small-size;
-			width: $icon-button-x-small-size;
 			padding: $space-xxxxs;
+			width: $icon-button-x-small-size;
 		}
 
 		#{$self}__label {

package/lib/js/components/IconText/IconText.vue

@@ -26,8 +26,8 @@
 	$root: &;
 
 	align-items: flex-start;
-	pointer-events: none;
 	display: flex;
+	pointer-events: none;
 
 	&.-neutralWeak {
 		color: $color-neutral-text-weak;

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

@@ -224,9 +224,9 @@ $image-height-small: 140px;
 	}
 
 	&__checkbox {
+		align-items: center;
 		cursor: pointer;
 		display: flex;
-		align-items: center;
 		margin-top: $space-s;
 
 		@media #{breakpoint-s()} {
@@ -249,14 +249,14 @@ $image-height-small: 140px;
 	}
 
 	&__image {
-		width: 100%;
 		display: block;
+		width: 100%;
 	}
 
 	&__footer {
 		display: flex;
-		justify-content: space-between;
 		flex-direction: column-reverse;
+		justify-content: space-between;
 		padding-top: $space-m;
 
 		@media #{breakpoint-s()} {
@@ -265,16 +265,16 @@ $image-height-small: 140px;
 
 		&.-singleColumn {
 			#{$self}__footerColumn {
-				width: 100%;
 				justify-content: center;
+				width: 100%;
 			}
 		}
 	}
 
 	&__footerColumn {
 		display: flex;
-		gap: 0 $space-s;
 		flex-direction: column-reverse;
+		gap: 0 $space-s;
 
 		&.--cta {
 			@media #{breakpoint-s()} {
@@ -297,8 +297,8 @@ $image-height-small: 140px;
 			justify-content: center;
 
 			@media #{breakpoint-s()} {
-				justify-content: left;
 				flex-direction: row;
+				justify-content: left;
 			}
 		}
 	}

package/lib/js/components/NumberInCircle/NumberInCircle.vue

@@ -22,8 +22,8 @@
 
 	align-items: center;
 	border-radius: 50%;
-	border-width: 1px;
 	border-style: solid;
+	border-width: 1px;
 	display: inline-flex;
 	height: $icon-xl;
 	justify-content: center;
@@ -39,41 +39,41 @@
 	&.-is1,
 	&.-is6,
 	&.-primary {
-		color: $color-primary-text;
 		border-color: $color-primary-border;
+		color: $color-primary-text;
 	}
 
 	&.-is5,
 	&.-is10,
 	&.-neutral {
-		color: $color-neutral-text;
 		border-color: $color-neutral-border-heavy;
+		color: $color-neutral-text;
 	}
 
 	&.-is2,
 	&.-is7,
 	&.-success {
-		color: $color-success-text;
 		border-color: $color-success-border;
+		color: $color-success-text;
 	}
 
 	&.-danger {
-		color: $color-danger-text;
 		border-color: $color-danger-border;
+		color: $color-danger-text;
 	}
 
 	&.-is4,
 	&.-is9,
 	&.-info {
-		color: $color-info-text;
 		border-color: $color-info-border;
+		color: $color-info-text;
 	}
 
 	&.-is3,
 	&.-is8,
 	&.-accent {
-		color: $color-accent-text;
 		border-color: $color-accent-border;
+		color: $color-accent-text;
 	}
 
 	&.-medium {

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

@@ -97,27 +97,27 @@ $pagination-input-height: 32px;
 
 	@include centeredSpread();
 
-	flex-grow: 1;
-	flex-direction: row;
 	align-items: stretch;
+	flex-direction: row;
+	flex-grow: 1;
 
 	&__itemsWrapper {
+		align-content: center;
 		display: flex;
 		flex-wrap: nowrap;
-		align-content: center;
 		justify-content: center;
 	}
 
 	&.-centered {
 		#{$self}__itemsWrapper {
-			flex-grow: 1;
 			align-items: center;
+			flex-grow: 1;
 		}
 	}
 
 	&__items {
-		flex-direction: row;
 		align-items: center;
+		flex-direction: row;
 		padding: 0;
 
 		&.-default {
@@ -146,12 +146,12 @@ $pagination-input-height: 32px;
 	}
 
 	&__input {
-		padding: $space-xxxs $space-xxs;
 		background: $color-default-background;
 		border: 1px solid $color-neutral-border-strong;
-		box-shadow: inset 0 1px 3px $color-neutral-border-strong;
 		border-radius: $radius-s;
+		box-shadow: inset 0 1px 3px $color-neutral-border-strong;
 		height: $pagination-input-height;
+		padding: $space-xxxs $space-xxs;
 
 		&:hover {
 			border-color: $color-neutral-border-strong-hovered;
@@ -166,9 +166,9 @@ $pagination-input-height: 32px;
 	&__text {
 		@include text-m-default-regular;
 
-		text-align: center;
 		color: $color-neutral-text;
 		padding: $space-xxxs;
+		text-align: center;
 	}
 
 	&__compactItem {
@@ -180,8 +180,8 @@ $pagination-input-height: 32px;
 	&__itemWrapper {
 		@include text-m-default-regular;
 
-		text-align: center;
 		padding: $space-xxxxs;
+		text-align: center;
 
 		&.-touchable:hover {
 			cursor: pointer;
@@ -193,14 +193,14 @@ $pagination-input-height: 32px;
 	}
 
 	&__item {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
 		align-items: center;
-		min-width: $pagination-item-min-width;
 		background: $color-neutral-background-weak;
 		border-radius: $radius-xs;
 		color: $color-neutral-text;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		min-width: $pagination-item-min-width;
 		padding: $space-xxxs;
 
 		&.-selected {
@@ -217,19 +217,19 @@ $pagination-input-height: 32px;
 	}
 
 	&__ellipsis {
+		align-items: center;
+		color: $color-neutral-text-weak;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		align-items: center;
-		color: $color-neutral-text-weak;
 		padding: $space-xxxs;
 	}
 
 	&__accessorySlot {
-		display: flex;
 		align-items: center;
-		padding: 0;
+		display: flex;
 		min-height: 0;
+		padding: 0;
 	}
 }
 </style>

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

@@ -163,8 +163,8 @@ $pill-colors: (
 	&__label {
 		@include label-s-default-bold;
 
-		overflow: hidden;
 		margin: $space-xxxxxs $space-xxxs $space-xxxxxs 0;
+		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
@@ -174,8 +174,8 @@ $pill-colors: (
 	}
 
 	&.-x-small {
-		padding-left: $space-xxxs;
 		min-height: $pill-min-height;
+		padding-left: $space-xxxs;
 
 		#{$self}__leftIcon {
 			margin-right: $space-xxxxxs;

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

@@ -14,3 +14,8 @@ export const POP_OVER_PLACEMENTS = {
 	LEFT: 'left',
 	RIGHT: 'right',
 } as const;
+
+export const POP_OVER_SIZES = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+} as const;

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

@@ -1,5 +1,10 @@
 import PopOver from './PopOver.vue';
-import { POP_OVER_COLORS, POP_OVER_PLACEMENTS, POP_OVER_TRIGGER_ACTIONS } from './PopOver.consts';
+import {
+	POP_OVER_COLORS,
+	POP_OVER_PLACEMENTS,
+	POP_OVER_SIZES,
+	POP_OVER_TRIGGER_ACTIONS,
+} from './PopOver.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
 
@@ -15,14 +20,14 @@ const StoryTemplate: StoryFn<typeof PopOver> = (argTypes) => ({
 		'<div style="display: flex; align-items: center; justify-content: center; height: 600px">' +
 		'<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :button-text="buttonText" :force-show="forceShow" :header-image-url="headerImageUrl">' +
 		'<template #reference><span>click me!</span></template>' +
-		'<div>Bacon ipsum dolor amet t-bone meatball ground round turducken buffalo pork. </div>' +
+		'<div>Bacon ipsum dolor amet t-bone meatball ground round turducken buffalo pork.</div>' +
 		'</pop-over>' +
 		'</div>',
 });
 
 export const Interactive = StoryTemplate.bind({});
 
-const args = {
+Interactive.args = {
 	placement: POP_OVER_PLACEMENTS.BOTTOM,
 	color: POP_OVER_COLORS.DEFAULT,
 	triggerAction: POP_OVER_TRIGGER_ACTIONS.CLICK,
@@ -46,14 +51,47 @@ const argTypes = {
 		control: { type: 'select', options: Object.values(POP_OVER_TRIGGER_ACTIONS) },
 		defaultValue: POP_OVER_TRIGGER_ACTIONS.CLICK,
 	},
+	size: {
+		control: { type: 'select', options: Object.values(POP_OVER_SIZES) },
+		defaultValue: POP_OVER_SIZES.SMALL,
+	},
 } as ArgTypes;
 
-Interactive.argTypes = argTypes;
-Interactive.args = args;
-
 Interactive.parameters = {
 	design: {
 		type: 'figma',
 		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=3590%3A67741',
 	},
 };
+
+Interactive.argTypes = argTypes;
+
+const PopoverWithHTMLStoryTemplate: StoryFn<typeof PopOver> = (argTypes) => ({
+	components: { PopOver },
+	props: Object.keys(argTypes),
+	template:
+		'<div style="display: flex; align-items: center; justify-content: center; height: 600px">' +
+		'<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :force-show="forceShow" :size="size" :max-height="maxHeight" :visible-arrow="visibleArrow">' +
+		'<template #reference><span>click me!</span></template>' +
+		'<template #default><b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork. <b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.</template>' +
+		'</pop-over>' +
+		'</div>',
+});
+
+export const PopOverSizeMMaxHeightDisabledArrow = PopoverWithHTMLStoryTemplate.bind({});
+
+PopOverSizeMMaxHeightDisabledArrow.args = {
+	placement: POP_OVER_PLACEMENTS.BOTTOM,
+	color: POP_OVER_COLORS.DEFAULT,
+	triggerAction: POP_OVER_TRIGGER_ACTIONS.CLICK,
+	titleText: 'Lorem ipsum',
+	subtitleText: 'Dolor sit amet',
+	size: POP_OVER_SIZES.MEDIUM,
+	forceShow: false,
+	maxHeight: true,
+	visibleArrow: false,
+	slotText:
+		'<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.',
+} as Args;
+
+PopOverSizeMMaxHeightDisabledArrow.argTypes = argTypes;

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

@@ -9,16 +9,24 @@
 		:delay-on-mouse-over="300"
 		:delay-on-mouse-out="300"
 		:append-to-body="appendToBody"
+		:visible-arrow="visibleArrow"
+		:root-class="rootClass"
 	>
 		<div
 			class="popper popOver"
-			:class="{ '-color-neutral': color === POP_OVER_COLORS.NEUTRAL }"
+			:class="{
+				'-color-neutral': color === POP_OVER_COLORS.NEUTRAL,
+				'-small': size === POP_OVER_SIZES.SMALL,
+				'-medium': size === POP_OVER_SIZES.MEDIUM,
+			}"
 		>
 			<img v-if="headerImageUrl" class="popOver__image" :src="headerImageUrl" alt="" />
 			<div class="popOver__content">
 				<div v-if="titleText" class="popOver__title"> {{ titleText }} </div>
 				<div v-if="subtitleText" class="popOver__subtitle"> {{ subtitleText }} </div>
-				<slot :close="close" />
+				<div class="popOver__contentSlot" :class="{ '-maxHeight': maxHeight }">
+					<slot :close="close" />
+				</div>
 			</div>
 			<ds-button
 				v-if="buttonText"
@@ -53,7 +61,6 @@
 	display: flex;
 	flex-direction: column;
 	padding: 0;
-	max-width: 320px;
 
 	&.-color-neutral ::v-deep .popper__arrow {
 		border-color: $color-neutral-background transparent !important;
@@ -63,6 +70,26 @@
 		background-color: $color-neutral-background;
 	}
 
+	.popOver__contentSlot.-maxHeight {
+		overflow: scroll;
+	}
+
+	&.-small {
+		max-width: 320px;
+
+		.popOver__contentSlot.-maxHeight {
+			max-height: 160px;
+		}
+	}
+
+	&.-medium {
+		max-width: 460px;
+
+		.popOver__contentSlot.-maxHeight {
+			max-height: 250px;
+		}
+	}
+
 	&[x-placement^='bottom'] {
 		margin-top: $space-s;
 
@@ -145,8 +172,8 @@
 	}
 
 	&__button {
-		margin: 0 $space-s $space-xs;
 		align-self: flex-end;
+		margin: 0 $space-s $space-xs;
 	}
 }
 </style>
@@ -154,7 +181,12 @@
 <script>
 import VuePopper from 'vue-popperjs';
 import 'vue-popperjs/dist/vue-popper.css';
-import { POP_OVER_COLORS, POP_OVER_PLACEMENTS, POP_OVER_TRIGGER_ACTIONS } from './PopOver.consts';
+import {
+	POP_OVER_COLORS,
+	POP_OVER_PLACEMENTS,
+	POP_OVER_TRIGGER_ACTIONS,
+	POP_OVER_SIZES,
+} from './PopOver.consts';
 import DsButton, { BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button';
 
 export default {
@@ -217,10 +249,30 @@ export default {
 			type: Object,
 			default: () => ({}),
 		},
+		size: {
+			type: String,
+			default: POP_OVER_SIZES.SMALL,
+			validator(size) {
+				return Object.values(POP_OVER_SIZES).includes(size);
+			},
+		},
+		maxHeight: {
+			type: Boolean,
+			default: false,
+		},
+		visibleArrow: {
+			type: Boolean,
+			default: true,
+		},
+		rootClass: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {
 			POP_OVER_COLORS: Object.freeze(POP_OVER_COLORS),
+			POP_OVER_SIZES: Object.freeze(POP_OVER_SIZES),
 			BUTTON_TYPES: Object.freeze(BUTTON_TYPES),
 			BUTTON_SIZES: Object.freeze(BUTTON_SIZES),
 			key: 1,

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

@@ -5,7 +5,7 @@
 			'-compact': layout === PROGRESS_BAR_LAYOUTS.COMPACT,
 		}"
 	>
-		<div class="progressBar__label">
+		<div v-if="labelText || labelDataExists" class="progressBar__label">
 			<div
 				class="progressBar__labelText"
 				:class="{ '-medium': labelTextSize === PROGRESS_BAR_LABEL_TEXT_SIZES.MEDIUM }"
@@ -229,8 +229,8 @@ $progress-bar-badge-colors: (
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: right;
-		margin-left: $space-xxs;
 		margin-bottom: $space-xxxxxs;
+		margin-left: $space-xxs;
 		max-width: $progress-bar-label-data-max-width;
 	}
 
@@ -272,8 +272,8 @@ $progress-bar-badge-colors: (
 		}
 
 		align-items: center;
-		border-radius: 50%;
 		border: 1px solid $color-inverted-border;
+		border-radius: 50%;
 		display: flex;
 		height: $progress-bar-badge-size;
 		justify-content: center;