@bethinkpl/design-system 21.0.2 → 22.0.1

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

@@ -1,38 +1,38 @@
 <template>
-	<div class="threeColumnLayout">
+	<div class="ds-threeColumnLayout">
 		<div
-			class="threeColumnLayout__overlay"
+			class="ds-threeColumnLayout__overlay"
 			:class="{
-				'-visible': rightColumnVisibleMobile || leftColumnVisibleMobile,
+				'-ds-visible': rightColumnVisibleMobile || leftColumnVisibleMobile,
 			}"
 			@click="$emit('overlay-clicked')"
 		/>
 		<div
-			class="threeColumnLayout__leftColumn"
+			class="ds-threeColumnLayout__leftColumn"
 			:class="{
-				'-desktopVisible': leftColumnVisible || leftColumnVisibleMobile,
-				'-mobileVisible': leftColumnVisibleMobile,
+				'-ds-desktopVisible': leftColumnVisible || leftColumnVisibleMobile,
+				'-ds-mobileVisible': leftColumnVisibleMobile,
 			}"
 		>
 			<slot name="leftColumn" />
 		</div>
-		<div class="threeColumnLayout__contentColumn">
+		<div class="ds-threeColumnLayout__contentColumn">
 			<div
-				class="threeColumnLayout__content"
+				class="ds-threeColumnLayout__content"
 				:class="{
-					'-noPadding': contentWithoutPadding,
+					'-ds-noPadding': contentWithoutPadding,
 				}"
 			>
 				<slot />
 			</div>
 		</div>
 		<div
-			class="threeColumnLayout__rightColumn"
+			class="ds-threeColumnLayout__rightColumn"
 			:class="{
-				'-medium': rightColumnSize === THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.MEDIUM,
-				'-large': rightColumnSize === THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.LARGE,
-				'-desktopVisible': rightColumnVisible || rightColumnVisibleMobile,
-				'-mobileVisible': rightColumnVisibleMobile,
+				'-ds-medium': rightColumnSize === THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.MEDIUM,
+				'-ds-large': rightColumnSize === THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.LARGE,
+				'-ds-desktopVisible': rightColumnVisible || rightColumnVisibleMobile,
+				'-ds-mobileVisible': rightColumnVisibleMobile,
 			}"
 		>
 			<slot name="rightColumn" />
@@ -63,7 +63,7 @@ $right-column-large-l-width: 30vw;
 $right-column-large-l-min-width: $right-column-min-width;
 $right-column-large-l-max-width: $right-column-large-max-width;
 
-.threeColumnLayout {
+.ds-threeColumnLayout {
 	$root: &;
 
 	display: flex;
@@ -84,13 +84,13 @@ $right-column-large-l-max-width: $right-column-large-max-width;
 		z-index: $z-index-overlay;
 
 		@media #{breakpoint-s()} {
-			&.-visible {
+			&.-ds-visible {
 				display: block;
 			}
 		}
 
 		@media #{breakpoint-l()} {
-			&.-visible {
+			&.-ds-visible {
 				display: none;
 			}
 		}
@@ -117,12 +117,12 @@ $right-column-large-l-max-width: $right-column-large-max-width;
 			position: initial;
 			top: initial;
 
-			&.-desktopVisible {
+			&.-ds-desktopVisible {
 				display: initial;
 			}
 		}
 
-		&.-mobileVisible {
+		&.-ds-mobileVisible {
 			display: initial;
 		}
 	}
@@ -138,7 +138,7 @@ $right-column-large-l-max-width: $right-column-large-max-width;
 		max-width: $content-column-max-width;
 		padding: $space-s;
 
-		&.-noPadding {
+		&.-ds-noPadding {
 			padding: 0;
 		}
 	}
@@ -159,16 +159,16 @@ $right-column-large-l-max-width: $right-column-large-max-width;
 			top: initial;
 			z-index: initial;
 
-			&.-desktopVisible {
+			&.-ds-desktopVisible {
 				display: initial;
 			}
 		}
 
-		&.-mobileVisible {
+		&.-ds-mobileVisible {
 			display: initial;
 		}
 
-		&.-medium {
+		&.-ds-medium {
 			@media #{breakpoint-s()} {
 				max-width: $right-column-medium-max-width;
 			}
@@ -180,7 +180,7 @@ $right-column-large-l-max-width: $right-column-large-max-width;
 			}
 		}
 
-		&.-large {
+		&.-ds-large {
 			@media #{breakpoint-s()} {
 				max-width: $right-column-large-max-width;
 			}

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

@@ -33,6 +33,8 @@
 @import '../../../styles/settings/colors/tokens';
 @import '../../../styles/settings/typography/tokens';
 
+// Deprecated component, no need to prefix class names.
+/* stylelint-disable-next-line selector-class-pattern */
 .m-modal {
 	@include text-l-default-regular;
 

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

@@ -1,6 +1,6 @@
 <template>
 	<div class="ds-modal" @click.self="$emit('close-modal')">
-		<div class="ds-modal__wrapper" :class="{ '-small': size === MODAL_SIZES.SMALL }">
+		<div class="ds-modal__wrapper" :class="{ '-ds-small': size === MODAL_SIZES.SMALL }">
 			<wnl-icon-button
 				touchable
 				:icon="ICONS.FA_XMARK"
@@ -12,7 +12,7 @@
 			/>
 			<div class="ds-modal__scrollableWrapper">
 				<img v-if="headerImage" class="ds-modal__image" :src="headerImage" alt="" />
-				<div class="ds-modal__content" :class="{ '-centered': contentCentered }">
+				<div class="ds-modal__content" :class="{ '-ds-centered': contentCentered }">
 					<div class="ds-modal__header">
 						<feature-icon
 							v-if="headerFeatureIcon"
@@ -25,7 +25,7 @@
 						<h4
 							class="ds-modal__headerTitle"
 							:class="{
-								'-small': headerTitleSize === MODAL_HEADER_TITLE_SIZES.SMALL,
+								'-ds-small': headerTitleSize === MODAL_HEADER_TITLE_SIZES.SMALL,
 							}"
 							>{{ headerTitle }}</h4
 						>
@@ -39,7 +39,7 @@
 					<div
 						v-if="displayFooter"
 						class="ds-modal__footer"
-						:class="{ '-singleColumn': calcSingleColumn }"
+						:class="{ '-ds-singleColumn': calcSingleColumn }"
 					>
 						<div
 							v-if="footerTertiaryButtonText || footerCheckboxText"
@@ -146,7 +146,7 @@ $image-height-small: 140px;
 		position: relative;
 		width: 100%;
 
-		&.-small {
+		&.-ds-small {
 			max-width: $modal-small-width;
 
 			@media #{breakpoint-s()} {
@@ -178,7 +178,7 @@ $image-height-small: 140px;
 			padding: $space-l $space-xl;
 		}
 
-		&.-centered {
+		&.-ds-centered {
 			#{$self}__header,
 			#{$self}__slotContent {
 				text-align: center;
@@ -208,7 +208,7 @@ $image-height-small: 140px;
 			@include displayHeading-xs-default-bold;
 		}
 
-		&.-small {
+		&.-ds-small {
 			@include heading-xl-default-bold;
 		}
 	}
@@ -263,7 +263,7 @@ $image-height-small: 140px;
 			flex-direction: row;
 		}
 
-		&.-singleColumn {
+		&.-ds-singleColumn {
 			#{$self}__footerCtaPrimary {
 				justify-content: center;
 				width: 100%;

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

@@ -1,6 +1,6 @@
 <template>
 	<ds-modal
-		class="modalDialog"
+		class="ds-modalDialog"
 		:size="MODAL_SIZES.SMALL"
 		:danger="danger"
 		:content-centered="true"

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

@@ -1,8 +1,8 @@
 <template>
 	<div
-		class="a-numberInCircle"
+		class="ds-numberInCircle"
 		:class="{
-			'-medium': medium,
+			'-ds-medium': medium,
 			[colorClass]: true,
 		}"
 	>
@@ -17,7 +17,7 @@
 @import '../../../styles/settings/colors/tokens';
 @import '../../../styles/settings/typography/tokens';
 
-.a-numberInCircle {
+.ds-numberInCircle {
 	@include label-2xl-default-regular;
 
 	align-items: center;
@@ -36,47 +36,47 @@
 		min-width: $icon-xxl;
 	}
 
-	&.-is1,
-	&.-is6,
-	&.-primary {
+	&.-ds-is1,
+	&.-ds-is6,
+	&.-ds-primary {
 		border-color: $color-primary-border;
 		color: $color-primary-text;
 	}
 
-	&.-is5,
-	&.-is10,
-	&.-neutral {
+	&.-ds-is5,
+	&.-ds-is10,
+	&.-ds-neutral {
 		border-color: $color-neutral-border-heavy;
 		color: $color-neutral-text;
 	}
 
-	&.-is2,
-	&.-is7,
-	&.-success {
+	&.-ds-is2,
+	&.-ds-is7,
+	&.-ds-success {
 		border-color: $color-success-border;
 		color: $color-success-text;
 	}
 
-	&.-danger {
+	&.-ds-danger {
 		border-color: $color-danger-border;
 		color: $color-danger-text;
 	}
 
-	&.-is4,
-	&.-is9,
-	&.-info {
+	&.-ds-is4,
+	&.-ds-is9,
+	&.-ds-info {
 		border-color: $color-info-border;
 		color: $color-info-text;
 	}
 
-	&.-is3,
-	&.-is8,
-	&.-accent {
+	&.-ds-is3,
+	&.-ds-is8,
+	&.-ds-accent {
 		border-color: $color-accent-border;
 		color: $color-accent-text;
 	}
 
-	&.-medium {
+	&.-ds-medium {
 		@include label-m-default-regular;
 
 		height: $icon-l;
@@ -110,13 +110,13 @@ export default {
 	computed: {
 		colorClass() {
 			const colorToClassMap = {
-				[NUMBER_IN_CIRCLE_COLORS.DEFAULT]: `-is${this.index}`,
-				[NUMBER_IN_CIRCLE_COLORS.PRIMARY]: '-primary',
-				[NUMBER_IN_CIRCLE_COLORS.NEUTRAL]: '-neutral',
-				[NUMBER_IN_CIRCLE_COLORS.SUCCESS]: '-success',
-				[NUMBER_IN_CIRCLE_COLORS.DANGER]: '-danger',
-				[NUMBER_IN_CIRCLE_COLORS.INFO]: '-info',
-				[NUMBER_IN_CIRCLE_COLORS.ACCENT]: '-accent',
+				[NUMBER_IN_CIRCLE_COLORS.DEFAULT]: `-ds-is${this.index}`,
+				[NUMBER_IN_CIRCLE_COLORS.PRIMARY]: '-ds-primary',
+				[NUMBER_IN_CIRCLE_COLORS.NEUTRAL]: '-ds-neutral',
+				[NUMBER_IN_CIRCLE_COLORS.SUCCESS]: '-ds-success',
+				[NUMBER_IN_CIRCLE_COLORS.DANGER]: '-ds-danger',
+				[NUMBER_IN_CIRCLE_COLORS.INFO]: '-ds-info',
+				[NUMBER_IN_CIRCLE_COLORS.ACCENT]: '-ds-accent',
 			};
 			return colorToClassMap[this.color];
 		},

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="outlineDivider">
+	<div class="ds-outlineDivider">
 		<ds-divider :prominence="prominence" :size="size" />
 	</div>
 </template>
@@ -7,7 +7,7 @@
 <style scoped lang="scss">
 @import '../../../../styles/settings/spacings';
 
-.outlineDivider {
+.ds-outlineDivider {
 	padding: $space-3xs 0;
 }
 </style>

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

@@ -1,55 +1,58 @@
 <template>
 	<div
-		class="outlineItem"
+		class="ds-outlineItem"
 		:class="{
-			'-disabled': isDisabled,
-			'-medium': size === OUTLINE_ITEM_SIZES.MEDIUM,
-			'-selected': isSelected,
-			'-hoverable': !isSelected || isSelectedInteractive,
-			'-backgroundNeutral': backgroundColor === OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL,
+			'-ds-disabled': isDisabled,
+			'-ds-medium': size === OUTLINE_ITEM_SIZES.MEDIUM,
+			'-ds-selected': isSelected,
+			'-ds-hoverable': !isSelected || isSelectedInteractive,
+			'-ds-backgroundNeutral': backgroundColor === OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL,
 		}"
 	>
-		<div class="outlineItem__content" :class="{ '-centeredContent': $slots.default }">
+		<div class="ds-outlineItem__content" :class="{ '-ds-centeredContent': $slots.default }">
 			<span
 				v-if="index !== null"
-				class="outlineItem__index"
-				:class="{ '-active': isSelected }"
+				class="ds-outlineItem__index"
+				:class="{ '-ds-active': isSelected }"
 			>
 				{{ index }}.
 			</span>
 			<ds-icon
 				v-if="iconLeft"
-				class="outlineItem__icon"
+				class="ds-outlineItem__icon"
 				:class="{
-					'-active': isSelected && hasSelectedIconsColorPrimary,
+					'-ds-active': isSelected && hasSelectedIconsColorPrimary,
 				}"
 				:icon="iconLeft"
 				:size="ICON_SIZES.X_SMALL"
 			/>
-			<span class="outlineItem__text">
-				<span class="outlineItem__label" :class="{ '-uppercase': isLabelUppercase }">
+			<span class="ds-outlineItem__text">
+				<span class="ds-outlineItem__label" :class="{ '-ds-uppercase': isLabelUppercase }">
 					{{ label }}
 				</span>
-				<span v-if="additionalText" class="outlineItem__additionalText">
+				<span v-if="additionalText" class="ds-outlineItem__additionalText">
 					{{ additionalText }}
 				</span>
 			</span>
 		</div>
-		<div class="outlineItem__rightContent" :class="{ '-centeredContent': $slots.default }">
+		<div
+			class="ds-outlineItem__rightContent"
+			:class="{ '-ds-centeredContent': $slots.default }"
+		>
 			<template v-if="$slots.default">
 				<slot />
 			</template>
 			<ds-icon
 				v-if="isDone"
-				class="outlineItem__icon -active"
+				class="ds-outlineItem__icon -ds-active"
 				:icon="ICONS.FA_CHECK_SOLID"
 				:size="ICON_SIZES.X_SMALL"
 			/>
 			<ds-icon
 				v-else-if="iconRight"
-				class="outlineItem__icon"
+				class="ds-outlineItem__icon"
 				:class="{
-					'-active': isSelected && hasSelectedIconsColorPrimary,
+					'-ds-active': isSelected && hasSelectedIconsColorPrimary,
 				}"
 				:icon="iconRight"
 				:size="ICON_SIZES.X_SMALL"
@@ -65,7 +68,7 @@
 @import '../../../../styles/settings/colors/tokens';
 @import '../../../../styles/settings/typography/tokens';
 
-.outlineItem {
+.ds-outlineItem {
 	$root: &;
 	$border-width: 2px;
 
@@ -82,7 +85,7 @@
 		column-gap: $space-2xs;
 		display: flex;
 
-		&.-centeredContent {
+		&.-ds-centeredContent {
 			align-items: center;
 		}
 	}
@@ -92,7 +95,7 @@
 
 		color: $color-neutral-text-weak;
 
-		&.-active {
+		&.-ds-active {
 			color: $color-primary-text;
 		}
 	}
@@ -106,7 +109,7 @@
 
 		color: $color-neutral-text-heavy;
 
-		&.-uppercase {
+		&.-ds-uppercase {
 			@include label-l-default-regular-uppercase;
 		}
 	}
@@ -121,34 +124,34 @@
 	&__icon {
 		color: $color-neutral-icon-weak;
 
-		&.-active {
+		&.-ds-active {
 			color: $color-primary-icon;
 		}
 	}
 
-	&.-hoverable:hover {
+	&.-ds-hoverable:hover {
 		background-color: $color-neutral-background-weak-hovered;
 		cursor: pointer;
 	}
 
-	&.-selected {
+	&.-ds-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 {
+	&.-ds-disabled {
 		pointer-events: none;
 
-		&.-selected {
+		&.-ds-selected {
 			border-left: $border-width solid $color-primary-border-disabled;
 		}
 
 		#{$root}__icon {
 			color: $color-neutral-icon-weak-disabled;
 
-			&.-active {
+			&.-ds-active {
 				color: $color-primary-icon-disabled;
 			}
 		}
@@ -156,7 +159,7 @@
 		#{$root}__index {
 			color: $color-neutral-text-weak-disabled;
 
-			&.-active {
+			&.-ds-active {
 				color: $color-primary-text-disabled;
 			}
 		}
@@ -166,7 +169,7 @@
 		}
 	}
 
-	&.-medium {
+	&.-ds-medium {
 		padding: $space-s $space-xs;
 
 		#{$root}__content {
@@ -176,20 +179,20 @@
 		#{$root}__label {
 			@include label-l-default-bold;
 
-			&.-uppercase {
+			&.-ds-uppercase {
 				@include label-l-default-bold-uppercase;
 			}
 		}
 
-		&.-selected {
+		&.-ds-selected {
 			padding-left: $space-xs - $border-width;
 		}
 	}
 
-	&.-backgroundNeutral {
+	&.-ds-backgroundNeutral {
 		background-color: $color-neutral-background;
 
-		&.-hoverable:hover {
+		&.-ds-hoverable:hover {
 			background-color: $color-neutral-background-hovered;
 		}
 	}
@@ -204,6 +207,7 @@ import {
 	OUTLINE_ITEM_SIZES,
 	OUTLINE_ITEM_STATES,
 } from './OutlineItem.consts';
+
 export default {
 	name: 'OutlineItem',
 	components: {

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="outlineSectionHeader">{{ title }}</div>
+	<div class="ds-outlineSectionHeader">{{ title }}</div>
 </template>
 
 <style scoped lang="scss">
@@ -7,7 +7,7 @@
 @import '../../../../styles/settings/colors/tokens';
 @import '../../../../styles/settings/typography/tokens';
 
-.outlineSectionHeader {
+.ds-outlineSectionHeader {
 	@include info-s-extensive-bold-uppercase;
 
 	color: $color-neutral-text-weak;

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

@@ -2,27 +2,27 @@
 	<div
 		class="ds-pagination"
 		:class="{
-			'-forceCompact': forceCompact,
-			'-centered': isCentered && !$slots.accessory,
+			'-ds-forceCompact': forceCompact,
+			'-ds-centered': isCentered && !$slots.accessory,
 		}"
 	>
 		<div class="ds-pagination__itemsWrapper">
 			<div
 				v-if="navigationItems.length > 1 && !forceCompact"
-				class="ds-pagination__items -default"
+				class="ds-pagination__items -ds-default"
 			>
 				<template v-for="(navigationItem, index) in navigationItems">
 					<div
 						v-if="isPage(navigationItem)"
 						:key="index"
 						class="ds-pagination__itemWrapper"
-						:class="{ '-touchable': currentPage !== navigationItem }"
+						:class="{ '-ds-touchable': currentPage !== navigationItem }"
 						role="link"
 						@click="changePage(navigationItem)"
 					>
 						<span
 							class="ds-pagination__item"
-							:class="{ '-selected': currentPage === navigationItem }"
+							:class="{ '-ds-selected': currentPage === navigationItem }"
 						>
 							{{ navigationItem }}
 						</span>
@@ -38,10 +38,10 @@
 							"
 						>
 							<template #reference="{ isOpened }">
-								<div class="ds-pagination__itemWrapper -touchable">
+								<div class="ds-pagination__itemWrapper -ds-touchable">
 									<span
 										class="ds-pagination__item"
-										:class="{ '-selected': isOpened }"
+										:class="{ '-ds-selected': isOpened }"
 										>&hellip;</span
 									>
 								</div>
@@ -67,7 +67,7 @@
 				</template>
 			</div>
 
-			<div v-if="navigationItems.length > 1" class="ds-pagination__items -compact">
+			<div v-if="navigationItems.length > 1" class="ds-pagination__items -ds-compact">
 				<icon-button
 					:size="ICON_BUTTON_SIZES.MEDIUM"
 					:color="ICON_BUTTON_COLORS.NEUTRAL"
@@ -142,7 +142,7 @@ $pagination-input-height: 32px;
 		justify-content: center;
 	}
 
-	&.-centered {
+	&.-ds-centered {
 		#{$self}__itemsWrapper {
 			align-items: center;
 			flex-grow: 1;
@@ -154,25 +154,25 @@ $pagination-input-height: 32px;
 		flex-direction: row;
 		padding: 0;
 
-		&.-default {
+		&.-ds-default {
 			display: none;
 
 			@media #{breakpoint-s()} {
 				display: flex;
 
-				#{$self}.-forceCompact & {
+				#{$self}.-ds-forceCompact & {
 					display: none;
 				}
 			}
 		}
 
-		&.-compact {
+		&.-ds-compact {
 			display: flex;
 
 			@media #{breakpoint-s()} {
 				display: none;
 
-				#{$self}.-forceCompact & {
+				#{$self}.-ds-forceCompact & {
 					display: flex;
 				}
 			}
@@ -217,10 +217,10 @@ $pagination-input-height: 32px;
 		padding: $space-4xs;
 		text-align: center;
 
-		&.-touchable:hover {
+		&.-ds-touchable:hover {
 			cursor: pointer;
 
-			#{$self}__item:not(.-selected) {
+			#{$self}__item:not(.-ds-selected) {
 				background: $color-neutral-background-weak-hovered;
 			}
 		}
@@ -237,14 +237,14 @@ $pagination-input-height: 32px;
 		min-width: $pagination-item-min-width;
 		padding: $space-2xs;
 
-		&.-selected {
+		&.-ds-selected {
 			@include label-l-default-bold;
 
 			background: $color-neutral-background-medium;
 			color: $color-neutral-text-heavy;
 		}
 
-		&:active:not(.-selected) {
+		&:active:not(.-ds-selected) {
 			background: $color-neutral-background-weak-hovered;
 			box-shadow: $shadow-inset-s;
 		}

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

@@ -6,6 +6,7 @@ export const POP_OVER_COLORS = {
 export const POP_OVER_TRIGGER_ACTIONS = {
 	CLICK: 'click',
 	HOVER: 'hover',
+	NONE: 'none',
 } as const;
 
 export const POP_OVER_PLACEMENTS = {