@bethinkpl/design-system 21.0.2 → 22.0.0

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

@@ -1,10 +1,10 @@
 <template>
-	<div class="richListItem" :class="classList" @click="$emit('click', $event)">
-		<div class="richListItem__container -dimmable">
-			<div v-if="isDraggable && hasDraggableHandler" class="richListItem__dragAndDrop">
+	<div class="ds-richListItem" :class="classList" @click="$emit('click', $event)">
+		<div class="ds-richListItem__container -ds-dimmable">
+			<div v-if="isDraggable && hasDraggableHandler" class="ds-richListItem__dragAndDrop">
 				<ds-icon
 					:icon="ICONS.FA_BARS"
-					class="richListItem__dragAndDropIcon"
+					class="ds-richListItem__dragAndDropIcon"
 					:class="{ [draggableIconClassName]: !!draggableIconClassName }"
 					:size="
 						size === RICH_LIST_ITEM_SIZE.SMALL
@@ -14,10 +14,10 @@
 					@click.stop
 				/>
 			</div>
-			<div v-if="icon" class="richListItem__iconWrapper">
+			<div v-if="icon" class="ds-richListItem__iconWrapper">
 				<ds-icon
 					:icon="icon"
-					class="richListItem__icon"
+					class="ds-richListItem__icon"
 					:size="
 						size === RICH_LIST_ITEM_SIZE.SMALL
 							? ICON_SIZES.XX_SMALL
@@ -28,23 +28,23 @@
 					@click.prevent="$emit('icon-click')"
 				/>
 			</div>
-			<div class="richListItem__content">
+			<div class="ds-richListItem__content">
 				<slot name="content" />
 			</div>
-			<div class="richListItem__rightContainer">
-				<div v-if="$slots.meta" class="richListItem__metaData -hideOnMobile">
+			<div class="ds-richListItem__rightContainer">
+				<div v-if="$slots.meta" class="ds-richListItem__metaData -ds-hideOnMobile">
 					<slot name="meta" />
 				</div>
-				<div v-if="$slots.actions" class="richListItem__actionSlot" @click.stop>
+				<div v-if="$slots.actions" class="ds-richListItem__actionSlot" @click.stop>
 					<ds-divider
 						v-if="$slots.actions && hasActionsSlotDivider"
 						is-vertical
-						class="-hideOnMobile"
+						class="-ds-hideOnMobile"
 					/>
 					<slot name="actions" />
 				</div>
-				<div v-if="isSelectable" class="richListItem__checkbox">
-					<ds-divider is-vertical class="-hideOnMobile" />
+				<div v-if="isSelectable" class="ds-richListItem__checkbox">
+					<ds-divider is-vertical class="-ds-hideOnMobile" />
 					<ds-checkbox
 						:is-selected="isSelected"
 						@update:is-selected="$emit('update:isSelected', $event)"
@@ -54,12 +54,12 @@
 			</div>
 		</div>
 
-		<div v-if="$slots.meta" class="richListItem__metaData -dimmable -visibleOnMobile">
+		<div v-if="$slots.meta" class="ds-richListItem__metaData -ds-dimmable -ds-visibleOnMobile">
 			<slot name="meta" />
 		</div>
 		<div
 			v-if="borderColorClass || borderColorStyle"
-			class="richListItem__border"
+			class="ds-richListItem__border"
 			:class="borderColorClass"
 			:style="borderColorStyle"
 		/>
@@ -89,14 +89,14 @@ $rich-list-item-background-colors: (
 	),
 );
 
-.richListItem {
+.ds-richListItem {
 	$root: &;
 
 	@each $color, $value in $rich-list-item-background-colors {
-		&.-background-#{$color} {
+		&.-ds-background-#{$color} {
 			background-color: map-get($value, 'default');
 
-			&.-loading {
+			&.-ds-loading {
 				background-color: map-get($value, 'loading');
 			}
 		}
@@ -118,50 +118,50 @@ $rich-list-item-background-colors: (
 		padding: 0 $space-4xs;
 	}
 
-	&.-dimmed {
-		.-dimmable {
+	&.-ds-dimmed {
+		.-ds-dimmable {
 			opacity: 0.65;
 		}
 	}
 
-	&.-loading {
+	&.-ds-loading {
 		cursor: initial;
 		pointer-events: none;
 
-		.-dimmable {
+		.-ds-dimmable {
 			opacity: 0.5;
 		}
 	}
 
-	&.-interactive {
+	&.-ds-interactive {
 		cursor: pointer;
 		pointer-events: initial;
 
-		&.-flat {
+		&.-ds-flat {
 			&:hover {
 				opacity: 1;
 
-				.-dimmable {
+				.-ds-dimmable {
 					opacity: 1;
 				}
 			}
 		}
 
-		&:not(.-dimmed):hover {
-			&.-default {
+		&:not(.-ds-dimmed):hover {
+			&.-ds-default {
 				@each $color, $value in $rich-list-item-background-colors {
-					&.-background-#{$color} {
+					&.-ds-background-#{$color} {
 						background-color: map-get($value, 'hover');
 					}
 				}
 			}
 
-			&.-flat {
+			&.-ds-flat {
 				background: $color-neutral-background-ghost-hovered;
 			}
 		}
 
-		&.-draggable {
+		&.-ds-draggable {
 			&:hover {
 				cursor: grab;
 			}
@@ -172,14 +172,14 @@ $rich-list-item-background-colors: (
 		}
 	}
 
-	&.-elevation-small {
+	&.-ds-elevation-small {
 		box-shadow: $shadow-s;
 	}
 
-	&.-flat {
+	&.-ds-flat {
 		background: $color-neutral-background-ghost;
 
-		&.-loading {
+		&.-ds-loading {
 			background: $color-neutral-background-ghost;
 		}
 
@@ -188,19 +188,19 @@ $rich-list-item-background-colors: (
 		}
 	}
 
-	&.-default {
+	&.-ds-default {
 		border: 1px solid $color-neutral-border-weak;
 		border-radius: $radius-s;
 
-		&.-interactive:hover {
-			.-dimmable {
+		&.-ds-interactive:hover {
+			.-ds-dimmable {
 				opacity: 1;
 			}
 		}
 
 		#{$root}__border {
 			@each $color, $value in $rich-list-item-border-colors {
-				&.-border-#{$color} {
+				&.-ds-border-#{$color} {
 					background-color: $value;
 				}
 			}
@@ -262,7 +262,7 @@ $rich-list-item-background-colors: (
 			padding-left: $space-4xs;
 		}
 
-		&.-hideOnMobile {
+		&.-ds-hideOnMobile {
 			display: none;
 
 			@media #{breakpoint-s()} {
@@ -270,7 +270,7 @@ $rich-list-item-background-colors: (
 			}
 		}
 
-		&.-visibleOnMobile {
+		&.-ds-visibleOnMobile {
 			display: flex;
 
 			@media #{breakpoint-s()} {
@@ -340,7 +340,7 @@ $rich-list-item-background-colors: (
 		}
 	}
 
-	&.-small {
+	&.-ds-small {
 		padding: $space-4xs;
 
 		@media #{breakpoint-s()} {
@@ -398,7 +398,7 @@ $rich-list-item-background-colors: (
 	}
 }
 
-.-hideOnMobile {
+.-ds-hideOnMobile {
 	display: none;
 
 	@media #{breakpoint-s()} {
@@ -546,28 +546,28 @@ export default {
 	computed: {
 		classList() {
 			return {
-				'-default': this.type === RICH_LIST_ITEM_TYPE.DEFAULT,
-				'-flat': this.type === RICH_LIST_ITEM_TYPE.FLAT,
-				'-loading': this.state === RICH_LIST_ITEM_STATE.LOADING,
-				'-dimmed': this.isDimmed,
-				'-interactive': this.isInteractive,
-				'-small': this.size === RICH_LIST_ITEM_SIZE.SMALL,
+				'-ds-default': this.type === RICH_LIST_ITEM_TYPE.DEFAULT,
+				'-ds-flat': this.type === RICH_LIST_ITEM_TYPE.FLAT,
+				'-ds-loading': this.state === RICH_LIST_ITEM_STATE.LOADING,
+				'-ds-dimmed': this.isDimmed,
+				'-ds-interactive': this.isInteractive,
+				'-ds-small': this.size === RICH_LIST_ITEM_SIZE.SMALL,
 				...(this.backgroundColor &&
 					this.type !== RICH_LIST_ITEM_TYPE.FLAT && {
-						[`-background-${this.backgroundColor}`]: true,
+						[`-ds-background-${this.backgroundColor}`]: true,
 					}),
 				...(this.elevation &&
 					this.type !== RICH_LIST_ITEM_TYPE.FLAT && {
-						[`-elevation-${this.elevation}`]: true,
+						[`-ds-elevation-${this.elevation}`]: true,
 					}),
-				'-draggable': this.isDraggable && !this.hasDraggableHandler,
+				'-ds-draggable': this.isDraggable && !this.hasDraggableHandler,
 			};
 		},
 		iconColorClass() {
 			if (!this.iconColor || (this.iconColor && this.iconColorHex)) {
 				return;
 			}
-			return `-${this.iconColor}`;
+			return `-ds-${this.iconColor}`;
 		},
 		iconColorStyle() {
 			if (!this.iconColor || !this.iconColorHex) {
@@ -581,7 +581,7 @@ export default {
 			if (!this.borderColor || (this.borderColor && this.borderColorHex)) {
 				return;
 			}
-			return `-border-${this.borderColor}`;
+			return `-ds-border-${this.borderColor}`;
 		},
 		borderColorStyle() {
 			if (!this.borderColor || !this.borderColorHex) {

package/lib/js/components/SectionTitle/SectionTitle.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="sectionTitle">
-		<div class="sectionTitle__title">{{ titleText }}</div>
-		<div class="sectionTitle__supportingText">{{ supportingText }}</div>
+	<div class="ds-sectionTitle">
+		<div class="ds-sectionTitle__title">{{ titleText }}</div>
+		<div class="ds-sectionTitle__supportingText">{{ supportingText }}</div>
 	</div>
 </template>
 
@@ -10,7 +10,7 @@
 @import '../../../styles/settings/typography/tokens';
 @import '../../../styles/settings/spacings';
 
-.sectionTitle {
+.ds-sectionTitle {
 	display: flex;
 	flex-direction: column;
 	gap: $space-4xs;

package/lib/js/components/SelectList/SelectList.vue

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

package/lib/js/components/SelectList/SelectListItem/SelectListItem.vue

@@ -1,40 +1,40 @@
 <template>
 	<div
-		class="selectListItem"
+		class="ds-selectListItem"
 		:class="{
-			'-disabled': isDisabled,
-			'-loading': isLoading,
-			'-selected': isSelected,
-			[`-${size}`]: true,
-			[`-${selectionMode}`]: true,
+			'-ds-disabled': isDisabled,
+			'-ds-loading': isLoading,
+			'-ds-selected': isSelected,
+			[`-ds-${size}`]: true,
+			[`-ds-${selectionMode}`]: true,
 		}"
 		:title="label"
 	>
 		<ds-icon
 			v-if="iconLeft || isLoading"
-			class="selectListItem__iconLeft"
+			class="ds-selectListItem__iconLeft"
 			:icon="isLoading ? ICONS.FAD_SPINNER_THIRD : iconLeft"
 			:size="ICON_SIZES.X_SMALL"
 			:spinning="isLoading"
 		/>
 
-		<span class="selectListItem__textWrapper">
+		<span class="ds-selectListItem__textWrapper">
 			<span
 				v-if="eyebrowText"
-				class="selectListItem__eyebrowText"
-				:class="{ '-uppercase': isEyebrowTextUppercase }"
+				class="ds-selectListItem__eyebrowText"
+				:class="{ '-ds-uppercase': isEyebrowTextUppercase }"
 				>{{ eyebrowText }}</span
 			>
-			<span class="selectListItem__text">{{ label }}</span>
+			<span class="ds-selectListItem__text">{{ label }}</span>
 		</span>
 
 		<ds-icon
 			v-if="isSelected"
-			class="selectListItem__iconRight"
+			class="ds-selectListItem__iconRight"
 			:icon="ICONS.FA_CHECK_SOLID"
 			:size="ICON_SIZES.XX_SMALL"
 		/>
-		<div v-else class="selectListItem__placeholderRight" />
+		<div v-else class="ds-selectListItem__placeholderRight" />
 	</div>
 </template>
 
@@ -44,7 +44,7 @@
 @import '../../../../styles/settings/typography/tokens';
 @import '../../../../styles/settings/spacings';
 
-.selectListItem {
+.ds-selectListItem {
 	$self: &;
 	$minHeight: 40px;
 
@@ -65,15 +65,15 @@
 		background-color: $color-neutral-background-ghost-hovered;
 	}
 
-	&.-loading,
-	&.-disabled {
+	&.-ds-loading,
+	&.-ds-disabled {
 		pointer-events: none;
 	}
 
-	&.-selected {
+	&.-ds-selected {
 		background-color: $color-neutral-background;
 
-		&.-disabled {
+		&.-ds-disabled {
 			background-color: $color-neutral-background-disabled;
 		}
 
@@ -85,16 +85,16 @@
 			background-color: $color-neutral-background-hovered;
 		}
 
-		&.-selectOnly {
+		&.-ds-selectOnly {
 			pointer-events: none;
 		}
 	}
 
-	&.-xSmall {
+	&.-ds-xSmall {
 		@include label-m-default-regular;
 	}
 
-	&.-medium {
+	&.-ds-medium {
 		@include label-xl-default-regular;
 	}
 
@@ -135,12 +135,12 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 
-		&.-uppercase {
+		&.-ds-uppercase {
 			@include info-s-extensive-bold-uppercase;
 		}
 	}
 
-	&.-disabled {
+	&.-ds-disabled {
 		#{$self}__iconLeft {
 			color: $color-neutral-icon-disabled;
 		}

package/lib/js/components/SelectList/SelectListItemDivider/SelectListItemDivider.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="selectListItemDivider">
+	<div class="ds-selectListItemDivider">
 		<divider />
 	</div>
 </template>
@@ -8,7 +8,7 @@
 @import '../../../../styles/settings/colors/tokens';
 @import '../../../../styles/settings/spacings';
 
-.selectListItemDivider {
+.ds-selectListItemDivider {
 	background-color: $color-neutral-background-ghost;
 	padding: $space-2xs 0;
 }

package/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="selectListItemTile">
+	<div class="ds-selectListItemTile">
 		<ds-tile
 			:interactive="interactive"
 			:icon-left="iconLeft"
@@ -19,7 +19,7 @@
 <style scoped lang="scss">
 @import '../../../../styles/settings/spacings';
 
-.selectListItemTile {
+.ds-selectListItemTile {
 	padding: $space-xs;
 }
 </style>

package/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue

@@ -1,6 +1,6 @@
 <template>
 	<select-list-item
-		class="selectListItemToggle"
+		class="ds-selectListItemToggle"
 		:icon-left="icon"
 		:state="state"
 		:label="label"
@@ -11,9 +11,9 @@
 
 <script lang="ts">
 import {
-	SELECT_LIST_ITEM_STATES,
-	SELECT_LIST_ITEM_SIZES,
 	SELECT_LIST_ITEM_SELECTION_MODE,
+	SELECT_LIST_ITEM_SIZES,
+	SELECT_LIST_ITEM_STATES,
 } from '../SelectListItem/SelectListItem.consts';
 import { IconItem, ICONS } from '../../Icons/Icon';
 import SelectListItem from '../SelectListItem/SelectListItem.vue';

package/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue

@@ -1,5 +1,7 @@
 <template>
-	<div class="selectListSectionTitle" :class="{ '-isUppercase': isUppercase }">{{ label }}</div>
+	<div class="ds-selectListSectionTitle" :class="{ '-ds-isUppercase': isUppercase }">{{
+		label
+	}}</div>
 </template>
 
 <style scoped lang="scss">
@@ -7,13 +9,13 @@
 @import '../../../../styles/settings/colors/tokens';
 @import '../../../../styles/settings/typography/tokens';
 
-.selectListSectionTitle {
+.ds-selectListSectionTitle {
 	@include info-m-default-regular;
 
 	color: $color-neutral-text;
 	padding: $space-3xs $space-xs;
 
-	&.-isUppercase {
+	&.-ds-isUppercase {
 		@include info-m-extensive-bold-uppercase;
 
 		padding: $space-xs $space-xs;

package/lib/js/components/SelectionTile/SelectionTile.vue

@@ -1,18 +1,18 @@
 <template>
 	<div
-		class="selectionTile"
+		class="ds-selectionTile"
 		:class="[
 			{
-				'-selected': isSelected,
-				'-default': state === SELECTION_TILE_STATE.DEFAULT,
-				'-disabled': state === SELECTION_TILE_STATE.DISABLED,
-				'-loading': isLoading,
-				'-focused': inputIsFocused && !isLoading,
+				'-ds-selected': isSelected,
+				'-ds-default': state === SELECTION_TILE_STATE.DEFAULT,
+				'-ds-disabled': state === SELECTION_TILE_STATE.DISABLED,
+				'-ds-loading': isLoading,
+				'-ds-focused': inputIsFocused && !isLoading,
 			},
 		]"
 		@click="updateIsSelected(!isSelected)"
 	>
-		<div class="selectionTile__wrapper">
+		<div class="ds-selectionTile__wrapper">
 			<component
 				:is="type === SELECTION_TILE_TYPE.RADIO_BUTTON ? 'radio-button' : 'checkbox'"
 				:size="SELECTION_CONTROL_SIZE.X_SMALL"
@@ -22,17 +22,17 @@
 				@input:focus="onInputFocus"
 				@input:blur="onInputBlur"
 			/>
-			<div class="selectionTile__textWrapper">
-				<div class="selectionTile__title">{{ title }}</div>
+			<div class="ds-selectionTile__textWrapper">
+				<div class="ds-selectionTile__title">{{ title }}</div>
 
-				<div v-if="supportingText" class="selectionTile__supportingText"
+				<div v-if="supportingText" class="ds-selectionTile__supportingText"
 					>{{ supportingText }}
 				</div>
 			</div>
 		</div>
 		<icon
 			v-if="icon || isLoading"
-			class="selectionTile__icon"
+			class="ds-selectionTile__icon"
 			:icon="isLoading ? ICONS.FAD_SPINNER_THIRD : icon"
 			:size="ICON_SIZES.X_SMALL"
 			:spinning="isLoading"
@@ -50,7 +50,7 @@
 
 $selection-tile-min-height: 48px;
 
-.selectionTile {
+.ds-selectionTile {
 	$root: &;
 
 	align-items: center;
@@ -68,7 +68,7 @@ $selection-tile-min-height: 48px;
 		background-color ease-in-out $default-transition-time;
 	width: 100%;
 
-	&.-loading {
+	&.-ds-loading {
 		cursor: initial;
 	}
 
@@ -101,18 +101,18 @@ $selection-tile-min-height: 48px;
 		display: flex;
 	}
 
-	&:hover:not(.-loading),
-	&.-focused {
+	&:hover:not(.-ds-loading),
+	&.-ds-focused {
 		background-color: $color-neutral-background-weak-hovered;
 		outline-color: $color-neutral-border-hovered;
 	}
 
-	&.-selected {
+	&.-ds-selected {
 		background-color: $color-primary-background;
 		outline-color: $color-primary-border;
 
-		&:hover:not(.-loading),
-		&.-focused {
+		&:hover:not(.-ds-loading),
+		&.-ds-focused {
 			background-color: $color-primary-background-hovered;
 			outline-color: $color-primary-border-hovered;
 		}
@@ -122,8 +122,8 @@ $selection-tile-min-height: 48px;
 		}
 	}
 
-	&.-disabled,
-	&.-disabled:hover {
+	&.-ds-disabled,
+	&.-ds-disabled:hover {
 		background-color: $color-neutral-background-weak-disabled;
 		cursor: initial;
 		outline-color: $color-neutral-border-disabled;
@@ -140,7 +140,7 @@ $selection-tile-min-height: 48px;
 			color: $color-neutral-icon-disabled;
 		}
 
-		&.-selected {
+		&.-ds-selected {
 			background-color: $color-primary-background-disabled;
 			outline-color: $color-primary-border-disabled;
 

package/lib/js/components/Statuses/AccessStatus/AccessStatus.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="accessStatus" :class="statusClass">
-		<icon :size="ICON_SIZES.X_SMALL" :icon="icon" class="accessStatus__icon" />
-		<span class="accessStatus__text">{{ text }}</span>
+	<div class="ds-accessStatus" :class="statusClass">
+		<icon :size="ICON_SIZES.X_SMALL" :icon="icon" class="ds-accessStatus__icon" />
+		<span class="ds-accessStatus__text">{{ text }}</span>
 	</div>
 </template>
 
@@ -10,7 +10,7 @@
 @import '../../../../styles/settings/colors/tokens';
 @import '../../../../styles/settings/typography/tokens';
 
-.accessStatus {
+.ds-accessStatus {
 	$self: &;
 
 	align-items: center;
@@ -22,7 +22,7 @@
 		margin-right: $space-4xs;
 	}
 
-	&.-active {
+	&.-ds-active {
 		color: $color-success-text;
 
 		#{$self}__icon {
@@ -30,7 +30,7 @@
 		}
 	}
 
-	&.-suspended {
+	&.-ds-suspended {
 		color: $color-danger-text;
 
 		#{$self}__icon {
@@ -45,8 +45,7 @@
 </style>
 
 <script lang="ts">
-import Icon from '../../Icons/Icon';
-import { ICONS, ICON_SIZES } from '../../Icons/Icon';
+import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { COURSE_ACCESS_STATUS } from '../../../consts/user';
 
 export default {
@@ -78,10 +77,10 @@ export default {
 		},
 		statusClass() {
 			if (this.status === COURSE_ACCESS_STATUS.ACTIVE) {
-				return '-active';
+				return '-ds-active';
 			}
 			if (this.status === COURSE_ACCESS_STATUS.SUSPENDED) {
-				return '-suspended';
+				return '-ds-suspended';
 			}
 			return '';
 		},