@bethinkpl/design-system 20.1.1 → 21.0.1

package/lib/js/components/Modals/Modal/Modal.stories.ts

@@ -3,7 +3,8 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import Modal from './Modal.vue';
 import { ICONS } from '../../Icons/Icon';
 import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
-import { MODAL_SIZES, MODAL_HEADER_TITLE_SIZES } from './Modal.consts';
+import { MODAL_HEADER_TITLE_SIZES, MODAL_SIZES } from './Modal.consts';
+import { BUTTON_STATES } from '../../Buttons/Button';
 
 export default {
 	title: 'Components/Modals/Modal',
@@ -18,9 +19,9 @@ const StoryTemplate: StoryFn<typeof Modal> = (args) => ({
 	template:
 		'<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' +
 		':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' +
-		':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" ' +
-		':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" ' +
-		':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" ' +
+		':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' +
+		':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' +
+		':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' +
 		':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' +
 		'<div v-html="defaultSlot" />' +
 		'</modal>',
@@ -47,10 +48,13 @@ const args = {
 	headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
 	footerPrimaryButtonText: 'Primary M',
 	footerPrimaryButtonIcon: null,
+	footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
 	footerSecondaryButtonText: 'Secondary M',
 	footerSecondaryButtonIcon: null,
+	footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
 	footerTertiaryButtonText: 'Tertiary M',
 	footerTertiaryButtonIcon: null,
+	footerTertiaryButtonState: BUTTON_STATES.DEFAULT,
 	footerCheckboxText: '',
 } as Args;
 
@@ -81,16 +85,28 @@ const argTypes = {
 		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
 		defaultValue: null,
 	},
+	footerPrimaryButtonState: {
+		control: { type: 'select', options: Object.values(BUTTON_STATES) },
+		defaultValue: BUTTON_STATES.DEFAULT,
+	},
 	footerSecondaryButtonText: { control: { type: 'text' } },
 	footerSecondaryButtonIcon: {
 		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
 		defaultValue: null,
 	},
+	footerSecondaryButtonState: {
+		control: { type: 'select', options: Object.values(BUTTON_STATES) },
+		defaultValue: BUTTON_STATES.DEFAULT,
+	},
 	footerTertiaryButtonText: { control: { type: 'text' } },
 	footerTertiaryButtonIcon: {
 		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
 		defaultValue: ICONS.FA_CHART_COLUMN,
 	},
+	footerTertiaryButtonState: {
+		control: { type: 'select', options: Object.values(BUTTON_STATES) },
+		defaultValue: BUTTON_STATES.DEFAULT,
+	},
 	footerCheckboxText: { control: { type: 'text' } },
 	onCloseModal: { action: 'close-modal' },
 	onCheckboxChange: { action: 'checkbox-change' },
@@ -123,10 +139,13 @@ const argsDanger = {
 	headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
 	footerPrimaryButtonText: 'Primary M',
 	footerPrimaryButtonIcon: null,
+	footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
 	footerSecondaryButtonText: 'Secondary M',
 	footerSecondaryButtonIcon: null,
+	footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
 	footerTertiaryButtonText: '',
 	footerTertiaryButtonIcon: null,
+	footerTertiaryButtonState: BUTTON_STATES.DEFAULT,
 	footerCheckboxText: '',
 } as Args;
 
@@ -149,10 +168,13 @@ const argsWithImage = {
 	headerFeatureIconColor: null,
 	footerPrimaryButtonText: 'Primary M',
 	footerPrimaryButtonIcon: null,
+	footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
 	footerSecondaryButtonText: 'Secondary M',
 	footerSecondaryButtonIcon: null,
+	footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
 	footerTertiaryButtonText: '',
 	footerTertiaryButtonIcon: null,
+	footerTertiaryButtonState: BUTTON_STATES.DEFAULT,
 	footerCheckboxText: '',
 } as Args;
 
@@ -174,10 +196,13 @@ const argsSmallHeaderAndCentered = {
 	headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
 	footerPrimaryButtonText: 'Primary M',
 	footerPrimaryButtonIcon: null,
+	footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
 	footerSecondaryButtonText: 'Secondary M',
 	footerSecondaryButtonIcon: null,
+	footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
 	footerTertiaryButtonText: '',
 	footerTertiaryButtonIcon: null,
+	footerTertiaryButtonState: BUTTON_STATES.DEFAULT,
 	footerCheckboxText: '',
 } as Args;
 

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

@@ -64,6 +64,7 @@
 								:type="BUTTON_TYPES.TEXT"
 								:color="BUTTON_COLORS.NEUTRAL"
 								:icon-left="footerTertiaryButtonIcon"
+								:state="footerTertiaryButtonState"
 								class="ds-modal__tertiaryButton"
 								@click="$emit('tertiary-button-click')"
 							>
@@ -79,6 +80,7 @@
 								:type="BUTTON_TYPES.OUTLINED"
 								:color="calcFooterSecondaryButtonColor"
 								:icon-right="footerSecondaryButtonIcon"
+								:state="footerSecondaryButtonState"
 								@click="$emit('secondary-button-click')"
 							>
 								{{ footerSecondaryButtonText }}
@@ -87,6 +89,7 @@
 								v-if="footerPrimaryButtonText"
 								:color="calcFooterPrimaryButtonColor"
 								:icon-right="footerPrimaryButtonIcon"
+								:state="footerPrimaryButtonState"
 								@click="$emit('primary-button-click')"
 							>
 								{{ footerPrimaryButtonText }}
@@ -233,13 +236,13 @@ $image-height-small: 140px;
 
 		color: $color-neutral-text-heavy;
 		cursor: pointer;
-		margin-left: $space-xxs;
+		margin-left: $space-2xs;
 	}
 
 	&__close {
 		position: absolute;
-		right: $space-xxxs;
-		top: $space-xxxs;
+		right: $space-3xs;
+		top: $space-3xs;
 	}
 
 	&__image {
@@ -315,7 +318,12 @@ import FeatureIcon from '../../Icons/FeatureIcon/FeatureIcon.vue';
 import { MODAL_HEADER_TITLE_SIZES, MODAL_SIZES } from './Modal.consts';
 import { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { FEATURE_ICON_COLOR, FEATURE_ICON_SIZES } from '../../Icons/FeatureIcon';
-import WnlButton, { BUTTON_COLORS, BUTTON_ELEVATIONS, BUTTON_TYPES } from '../../Buttons/Button';
+import WnlButton, {
+	BUTTON_COLORS,
+	BUTTON_ELEVATIONS,
+	BUTTON_STATES,
+	BUTTON_TYPES,
+} from '../../Buttons/Button';
 import WnlIconButton, { ICON_BUTTON_COLORS } from '../../Buttons/IconButton';
 import { toRaw } from 'vue';
 
@@ -378,6 +386,13 @@ export default {
 				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
+		footerPrimaryButtonState: {
+			type: String,
+			default: BUTTON_STATES.DEFAULT,
+			validator(state) {
+				return Object.values(BUTTON_STATES).includes(state);
+			},
+		},
 		footerSecondaryButtonText: {
 			type: String,
 			default: null,
@@ -389,6 +404,13 @@ export default {
 				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
+		footerSecondaryButtonState: {
+			type: String,
+			default: BUTTON_STATES.DEFAULT,
+			validator(state) {
+				return Object.values(BUTTON_STATES).includes(state);
+			},
+		},
 		footerTertiaryButtonText: {
 			type: String,
 			default: null,
@@ -400,6 +422,13 @@ export default {
 				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
+		footerTertiaryButtonState: {
+			type: String,
+			default: BUTTON_STATES.DEFAULT,
+			validator(state) {
+				return Object.values(BUTTON_STATES).includes(state);
+			},
+		},
 		footerCheckboxText: {
 			type: String,
 			default: null,

package/lib/js/components/Modals/ModalDialog/ModalDialog.stories.ts

@@ -3,6 +3,7 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import ModalDialog from './ModalDialog.vue';
 import { ICONS } from '../../Icons/Icon';
 import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
+import { BUTTON_STATES } from '../../Buttons/Button';
 
 export default {
 	title: 'Components/Modals/ModalDialog',
@@ -17,14 +18,15 @@ const StoryTemplate: StoryFn<typeof ModalDialog> = (args) => ({
 	template:
 		'<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' +
 		':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' +
-		':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" ' +
+		':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" ' +
 		':headerImage="headerImage" ' +
-		':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon">' +
+		':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' +
 		'<div v-html="defaultSlot" />' +
 		'</modal-dialog>',
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),
+			BUTTON_STATES: Object.freeze(BUTTON_STATES),
 		};
 	},
 });
@@ -42,8 +44,10 @@ const args = {
 	headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
 	footerPrimaryButtonText: 'Primary M',
 	footerPrimaryButtonIcon: null,
+	footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
 	footerSecondaryButtonText: 'Secondary M',
 	footerSecondaryButtonIcon: null,
+	footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
 } as Args;
 
 const argTypes = {
@@ -70,11 +74,19 @@ const argTypes = {
 		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
 		defaultValue: null,
 	},
+	footerPrimaryButtonState: {
+		control: { type: 'select', options: Object.values(BUTTON_STATES) },
+		defaultValue: BUTTON_STATES.DEFAULT,
+	},
 	footerSecondaryButtonText: { control: { type: 'text' } },
 	footerSecondaryButtonIcon: {
 		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
 		defaultValue: null,
 	},
+	footerSecondaryButtonState: {
+		control: { type: 'select', options: Object.values(BUTTON_STATES) },
+		defaultValue: BUTTON_STATES.DEFAULT,
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
@@ -98,8 +110,10 @@ const argsDanger = {
 	headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
 	footerPrimaryButtonText: 'Primary M',
 	footerPrimaryButtonIcon: null,
+	footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
 	footerSecondaryButtonText: 'Secondary M',
 	footerSecondaryButtonIcon: null,
+	footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
 } as Args;
 
 export const Danger = StoryTemplate.bind({});
@@ -118,8 +132,10 @@ const argsWithImage = {
 	headerFeatureIconColor: FEATURE_ICON_COLOR.NEUTRAL,
 	footerPrimaryButtonText: 'Primary M',
 	footerPrimaryButtonIcon: null,
+	footerPrimaryButtonState: BUTTON_STATES.DEFAULT,
 	footerSecondaryButtonText: 'Secondary M',
 	footerSecondaryButtonIcon: null,
+	footerSecondaryButtonState: BUTTON_STATES.DEFAULT,
 } as Args;
 
 export const WithImage = StoryTemplate.bind({});

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

@@ -12,8 +12,10 @@
 		:header-subtitle="headerSubtitle"
 		:footer-primary-button-text="footerPrimaryButtonText"
 		:footer-primary-button-icon="footerPrimaryButtonIcon"
+		:footer-primary-button-state="footerPrimaryButtonState"
 		:footer-secondary-button-text="footerSecondaryButtonText"
 		:footer-secondary-button-icon="footerSecondaryButtonIcon"
+		:footer-secondary-button-state="footerSecondaryButtonState"
 		@close-modal="$emit('close-modal')"
 		@primary-button-click="$emit('primary-button-click')"
 		@secondary-button-click="$emit('secondary-button-click')"
@@ -24,10 +26,11 @@
 
 <script lang="ts">
 import DsModal from '../Modal/Modal.vue';
-import { MODAL_SIZES, MODAL_HEADER_TITLE_SIZES } from '../Modal';
+import { MODAL_HEADER_TITLE_SIZES, MODAL_SIZES } from '../Modal';
 import { ICONS } from '../../Icons/Icon';
 import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
 import { toRaw } from 'vue';
+import { BUTTON_STATES } from '../../Buttons/Button';
 
 export default {
 	name: 'ModalDialog',
@@ -74,6 +77,13 @@ export default {
 				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
+		footerPrimaryButtonState: {
+			type: String,
+			default: BUTTON_STATES.DEFAULT,
+			validator(state) {
+				return Object.values(BUTTON_STATES).includes(state);
+			},
+		},
 		footerSecondaryButtonText: {
 			type: String,
 			default: null,
@@ -85,6 +95,13 @@ export default {
 				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
+		footerSecondaryButtonState: {
+			type: String,
+			default: BUTTON_STATES.DEFAULT,
+			validator(state) {
+				return Object.values(BUTTON_STATES).includes(state);
+			},
+		},
 	},
 	// TODO fix me when touching this file
 	// eslint-disable-next-line vue/require-emit-validator

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

@@ -28,7 +28,7 @@
 	height: $icon-xl;
 	justify-content: center;
 	min-width: $icon-xl;
-	padding: 0 $space-xxxs;
+	padding: 0 $space-3xs;
 	text-align: center;
 
 	@media #{breakpoint-s()} {

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

@@ -8,7 +8,7 @@
 @import '../../../../styles/settings/spacings';
 
 .outlineDivider {
-	padding: $space-xxxs 0;
+	padding: $space-3xs 0;
 }
 </style>
 

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

@@ -71,7 +71,7 @@
 
 	background-color: $color-neutral-background-weak;
 	border-radius: $radius-s;
-	column-gap: $space-xxs;
+	column-gap: $space-2xs;
 	display: flex;
 	justify-content: space-between;
 	padding: $space-xs;
@@ -79,7 +79,7 @@
 	&__rightContent,
 	&__content {
 		align-items: flex-start;
-		column-gap: $space-xxs;
+		column-gap: $space-2xs;
 		display: flex;
 
 		&.-centeredContent {
@@ -115,7 +115,7 @@
 		@include label-m-default-bold;
 
 		color: $color-neutral-text-weak;
-		margin-left: $space-xxxxs;
+		margin-left: $space-4xs;
 	}
 
 	&__icon {
@@ -170,7 +170,7 @@
 		padding: $space-s $space-xs;
 
 		#{$root}__content {
-			column-gap: $space-xxxs;
+			column-gap: $space-3xs;
 		}
 
 		#{$root}__label {

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

@@ -11,7 +11,7 @@
 	@include info-s-extensive-bold-uppercase;
 
 	color: $color-neutral-text-weak;
-	padding: $space-xxs 0;
+	padding: $space-2xs 0;
 }
 </style>
 

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

@@ -185,7 +185,7 @@ $pagination-input-height: 32px;
 		border-radius: $radius-s;
 		box-shadow: inset 0 1px 3px $color-neutral-border-strong;
 		height: $pagination-input-height;
-		padding: $space-xxxs $space-xxs;
+		padding: $space-3xs $space-2xs;
 
 		&:hover {
 			border-color: $color-neutral-border-strong-hovered;
@@ -201,7 +201,7 @@ $pagination-input-height: 32px;
 		@include label-l-default-regular;
 
 		color: $color-neutral-text;
-		padding: $space-xxs $space-xxxs;
+		padding: $space-2xs $space-3xs;
 		text-align: center;
 	}
 
@@ -214,7 +214,7 @@ $pagination-input-height: 32px;
 	&__itemWrapper {
 		@include label-l-default-regular;
 
-		padding: $space-xxxxs;
+		padding: $space-4xs;
 		text-align: center;
 
 		&.-touchable:hover {
@@ -235,7 +235,7 @@ $pagination-input-height: 32px;
 		flex-direction: column;
 		justify-content: center;
 		min-width: $pagination-item-min-width;
-		padding: $space-xxs;
+		padding: $space-2xs;
 
 		&.-selected {
 			@include label-l-default-bold;

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

@@ -165,14 +165,14 @@
 		@include heading-m-default-bold;
 
 		color: $color-default-text;
-		margin-bottom: $space-xxs;
+		margin-bottom: $space-2xs;
 	}
 
 	&__subtitle {
 		@include heading-s-default-regular;
 
 		color: $color-neutral-text;
-		margin-bottom: $space-xxs;
+		margin-bottom: $space-2xs;
 	}
 
 	&__button {

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

@@ -153,7 +153,7 @@ $progress-bar-badge-colors: (
 		}
 
 		#{$self}__label {
-			margin-bottom: $space-xxxs;
+			margin-bottom: $space-3xs;
 		}
 	}
 
@@ -201,10 +201,10 @@ $progress-bar-badge-colors: (
 		align-items: flex-end;
 		display: flex;
 		justify-content: space-between;
-		margin-bottom: $space-xxxs;
+		margin-bottom: $space-3xs;
 
 		@media #{breakpoint-s()} {
-			margin-bottom: $space-xxxs;
+			margin-bottom: $space-3xs;
 		}
 	}
 
@@ -241,26 +241,26 @@ $progress-bar-badge-colors: (
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: right;
-		margin-bottom: $space-xxxxxs;
-		margin-left: $space-xxs;
+		margin-bottom: $space-5xs;
+		margin-left: $space-2xs;
 		max-width: $progress-bar-label-data-max-width;
 	}
 
 	&__labelDataSupporting {
 		color: $color-neutral-text;
 		display: flex;
-		margin-left: $space-xxxxxs;
+		margin-left: $space-5xs;
 	}
 
 	&__labelDataSeparator {
-		margin-right: $space-xxxxxs;
+		margin-right: $space-5xs;
 	}
 
 	&__labelDataSuffix {
 		@include label-s-default-regular;
 
 		color: $color-neutral-text-weak;
-		margin-left: $space-xxxxs;
+		margin-left: $space-4xs;
 	}
 
 	&__range {

package/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue

@@ -182,7 +182,7 @@ $progress-donut-chart-range-colors: (
 
 		&.-hasOverage {
 			color: $color-success-text;
-			margin-left: -$space-xxxxxs;
+			margin-left: -$space-5xs;
 		}
 	}
 
@@ -193,7 +193,7 @@ $progress-donut-chart-range-colors: (
 		border-radius: 100%;
 		color: $color-neutral-text;
 		height: $progress-donut-chart-loading-dot-size;
-		margin-top: $space-xxxs;
+		margin-top: $space-3xs;
 		position: relative;
 		width: $progress-donut-chart-loading-dot-size;
 

package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue

@@ -61,7 +61,7 @@
 	&__content {
 		display: flex;
 		flex-direction: column;
-		gap: $space-xxxxs;
+		gap: $space-4xs;
 		justify-content: center;
 		min-width: 0; // to prevent the component from being pushed by the ellipses
 		padding: $space-xs 0;
@@ -106,7 +106,7 @@
 
 	&.-small {
 		#{$root}__content {
-			padding: $space-xxxs 0;
+			padding: $space-3xs 0;
 		}
 	}
 }

package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.vue

@@ -85,7 +85,7 @@ $group-rich-list-background-colors: (
 		left: -1px;
 		position: absolute;
 		top: -1px;
-		width: $space-xxxxs;
+		width: $space-4xs;
 	}
 }
 </style>