@bethinkpl/design-system 21.0.2 → 22.0.1

package/lib/js/components/Toggles/ToggleButton/ToggleButton.vue

@@ -1,50 +1,50 @@
 <template>
 	<div
-		class="toggleButtonWrapper"
+		class="ds-toggleButtonWrapper"
 		:class="{
 			'-rounded': radius === TOGGLE_BUTTON_RADIUSES.ROUNDED,
 		}"
 	>
 		<div
-			class="toggleButton"
+			class="ds-toggleButton"
 			:class="{
-				'-small': size === TOGGLE_BUTTON_SIZES.SMALL,
-				'-medium': size === TOGGLE_BUTTON_SIZES.MEDIUM,
-				'-large': size === TOGGLE_BUTTON_SIZES.LARGE,
+				'-ds-small': size === TOGGLE_BUTTON_SIZES.SMALL,
+				'-ds-medium': size === TOGGLE_BUTTON_SIZES.MEDIUM,
+				'-ds-large': size === TOGGLE_BUTTON_SIZES.LARGE,
 
-				'-hasSmallHorizontalPadding': hasSmallHorizontalPadding,
+				'-ds-hasSmallHorizontalPadding': hasSmallHorizontalPadding,
 
-				'-rounded': radius === TOGGLE_BUTTON_RADIUSES.ROUNDED,
+				'-ds-rounded': radius === TOGGLE_BUTTON_RADIUSES.ROUNDED,
 
 				[colorClassName]: true,
 
-				'-disabled': state === TOGGLE_BUTTON_STATES.DISABLED,
-				'-loading': state === TOGGLE_BUTTON_STATES.LOADING,
-				'-interactive': isInteractiveComputed,
-				'-selected': isSelected,
+				'-ds-disabled': state === TOGGLE_BUTTON_STATES.DISABLED,
+				'-ds-loading': state === TOGGLE_BUTTON_STATES.LOADING,
+				'-ds-interactive': isInteractiveComputed,
+				'-ds-selected': isSelected,
 			}"
 			@click="isInteractiveComputed && $emit('click')"
 		>
-			<div class="toggleButton__contentWrapper">
+			<div class="ds-toggleButton__contentWrapper">
 				<ds-icon
 					v-if="iconLeft"
-					class="toggleButton__icon"
+					class="ds-toggleButton__icon"
 					:icon="iconLeft"
 					:size="iconSize"
 				/>
 				<span
 					v-if="label"
-					class="toggleButton__content"
+					class="ds-toggleButton__content"
 					:class="{
-						'-small': labelSize === TOGGLE_BUTTON_LABEL_SIZES.SMALL,
-						'-uppercase': isLabelUppercase,
+						'-ds-small': labelSize === TOGGLE_BUTTON_LABEL_SIZES.SMALL,
+						'-ds-uppercase': isLabelUppercase,
 					}"
 				>
 					{{ label }}
 				</span>
 				<ds-icon
 					v-if="iconRight"
-					class="toggleButton__icon"
+					class="ds-toggleButton__icon"
 					:icon="iconRight"
 					:size="iconSize"
 				/>
@@ -52,7 +52,7 @@
 
 			<ds-icon
 				v-if="state === TOGGLE_BUTTON_STATES.LOADING"
-				class="toggleButton__icon toggleButton__loadingSpinner"
+				class="ds-toggleButton__icon ds-toggleButton__loadingSpinner"
 				:icon="ICONS.FAD_SPINNER_THIRD"
 				:size="iconSize"
 				spinning
@@ -233,15 +233,15 @@ $toggle-button-colors: (
 	@return $padding - map-get($size-map, $size);
 }
 
-.toggleButtonWrapper {
+.ds-toggleButtonWrapper {
 	display: inline-block;
 }
 
-.toggleButton {
+.ds-toggleButton {
 	$root: &;
 
 	@each $color-name, $color-map in $toggle-button-colors {
-		&.-color-#{$color-name} {
+		&.-ds-color-#{$color-name} {
 			background-color: map-get($color-map, 'background');
 			border-color: map-get($color-map, 'border');
 			color: map-get($color-map, 'color');
@@ -258,7 +258,7 @@ $toggle-button-colors: (
 				outline-color: map-get($color-map, 'outline-focused');
 			}
 
-			&.-selected {
+			&.-ds-selected {
 				background-color: map-get($color-map, 'selected', 'background');
 				border-color: map-get($color-map, 'selected', 'border');
 				color: map-get($color-map, 'selected', 'color');
@@ -280,7 +280,7 @@ $toggle-button-colors: (
 				}
 			}
 
-			&.-disabled {
+			&.-ds-disabled {
 				background-color: map-get($color-map, 'disabled', 'background');
 				border-color: map-get($color-map, 'disabled', 'border');
 				color: map-get($color-map, 'disabled', 'color');
@@ -290,7 +290,7 @@ $toggle-button-colors: (
 				}
 			}
 
-			&.-disabled.-selected {
+			&.-ds-disabled.-ds-selected {
 				background-color: map-get($color-map, 'selected', 'disabled', 'background');
 				border-color: map-get($color-map, 'selected', 'disabled', 'border');
 				color: map-get($color-map, 'selected', 'disabled', 'color');
@@ -335,69 +335,69 @@ $toggle-button-colors: (
 		text-overflow: ellipsis;
 		white-space: nowrap;
 
-		&.-uppercase {
+		&.-ds-uppercase {
 			@include label-l-default-bold-uppercase;
 		}
 	}
 
-	&.-rounded {
+	&.-ds-rounded {
 		border-radius: $radius-s;
 	}
 
-	&.-interactive {
+	&.-ds-interactive {
 		cursor: pointer;
 		pointer-events: initial;
 	}
 
-	&.-loading {
+	&.-ds-loading {
 		#{$root}__contentWrapper {
 			opacity: 0;
 		}
 	}
 
-	&.-small {
+	&.-ds-small {
 		min-height: $toggle-button-size-small;
 		min-width: $toggle-button-size-small;
 		padding: substract-border($space-3xs, 'small') substract-border($space-xs, 'small');
 
-		&.-hasSmallHorizontalPadding {
+		&.-ds-hasSmallHorizontalPadding {
 			padding: substract-border($space-3xs, 'small') substract-border($space-5xs, 'small');
 		}
 
-		#{$root}__content.-small {
+		#{$root}__content.-ds-small {
 			@include label-s-default-bold;
 
-			&.-uppercase {
+			&.-ds-uppercase {
 				@include label-s-default-bold-uppercase;
 			}
 		}
 	}
 
-	&.-medium {
+	&.-ds-medium {
 		min-height: $toggle-button-size-medium;
 		min-width: $toggle-button-size-medium;
 		padding: substract-border($space-2xs, 'medium') substract-border($space-xs, 'medium');
 
-		&.-hasSmallHorizontalPadding {
+		&.-ds-hasSmallHorizontalPadding {
 			padding: substract-border($space-2xs, 'medium') substract-border($space-5xs, 'medium');
 		}
 
-		#{$root}__content.-small {
+		#{$root}__content.-ds-small {
 			@include label-m-default-bold;
 
-			&.-uppercase {
+			&.-ds-uppercase {
 				@include label-m-default-bold-uppercase;
 			}
 		}
 	}
 
-	&.-large {
+	&.-ds-large {
 		border-width: $toggle-button-border-size-large;
 		min-height: $toggle-button-size-large;
 		min-width: $toggle-button-size-large;
 		padding: substract-border($space-xs, 'large') substract-border($space-s, 'large');
 
-		&.-hasSmallHorizontalPadding {
+		&.-ds-hasSmallHorizontalPadding {
 			padding: substract-border($space-2xs, 'large') substract-border($space-5xs, 'large');
 		}
 	}
@@ -515,7 +515,7 @@ export default {
 	},
 	computed: {
 		colorClassName(): string {
-			return `-color-${this.color}`;
+			return `-ds-color-${this.color}`;
 		},
 		iconSize(): IconSize {
 			return this.size === TOGGLE_BUTTON_SIZES.LARGE

package/lib/js/components/Well/Well.vue

@@ -1,9 +1,9 @@
 <template>
 	<div
-		class="well"
+		class="ds-well"
 		:class="{
-			'-medium': WELL_PADDINGS.MEDIUM === padding,
-			'-small': WELL_PADDINGS.SMALL === padding,
+			'-ds-medium': WELL_PADDINGS.MEDIUM === padding,
+			'-ds-small': WELL_PADDINGS.SMALL === padding,
 		}"
 	>
 		<slot />
@@ -15,15 +15,15 @@
 @import '../../../styles/settings/radiuses';
 @import '../../../styles/settings/colors/tokens';
 
-.well {
+.ds-well {
 	background-color: $color-neutral-background;
 	border-radius: $radius-m;
 
-	&.-medium {
+	&.-ds-medium {
 		padding: $space-s;
 	}
 
-	&.-small {
+	&.-ds-small {
 		padding: $space-xs;
 	}
 }

package/lib/js/styles/ColorsThemes/ColorsThemes.stories.ts

@@ -23,11 +23,11 @@ export const Theme = StoryTemplate.bind({});
 
 const args = {
 	itemsLists: [
-		{ title: 'WNL', list: rawWnlColorsList, class: 'theme-wnl', disabled: 'default' },
+		{ title: 'WNL', list: rawWnlColorsList, class: '-ds-theme-wnl', disabled: 'default' },
 		{
 			title: 'Bodywork',
 			list: rawBodyworkColorsList,
-			class: 'theme-bodywork',
+			class: '-ds-theme-bodywork',
 			disabled: 'default',
 		},
 	],

package/lib/js/styles/ColorsTokensPrimaryBodywork/ColorsTokensPrimaryBodywork.stories.ts

@@ -21,7 +21,7 @@ const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 export const PrimaryBodywork = StoryTemplate.bind({});
 
 const args = {
-	itemsLists: [{ title: 'Primary Bodywork', list: tokensList, class: 'theme-bodywork' }],
+	itemsLists: [{ title: 'Primary Bodywork', list: tokensList, class: '-ds-theme-bodywork' }],
 	type: TOKENS_TYPES.COLORS,
 } as Args;
 

package/lib/js/styles/ColorsTokensPrimaryWnl/ColorsTokensPrimaryWnl.stories.ts

@@ -21,7 +21,7 @@ const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 export const PrimaryWNL = StoryTemplate.bind({});
 
 const args = {
-	itemsLists: [{ title: 'Primary WNL', list: tokensList, class: 'theme-wnl' }],
+	itemsLists: [{ title: 'Primary WNL', list: tokensList, class: '-ds-theme-wnl' }],
 	type: TOKENS_TYPES.COLORS,
 } as Args;
 

package/lib/js/styles/ItemsList.vue

@@ -32,7 +32,8 @@
 
 <style lang="scss" scoped>
 @import '../../styles/settings/spacings';
-
+// This component isn't exported. It's only used in Storybook => no need to prefix class names.
+/* stylelint-disable selector-class-pattern */
 .itemsList {
 	margin: 0 auto;
 	width: 80%;
@@ -57,6 +58,7 @@
 		line-height: var(--typography-line-height-xl);
 	}
 }
+/* stylelint-enable */
 </style>
 
 <script lang="ts">

package/lib/js/styles/TypographyTokensLms/TypographyTokensLms.stories.ts

@@ -21,7 +21,7 @@ const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 export const LMS = StoryTemplate.bind({});
 
 const args = {
-	itemsLists: [{ title: 'LMS', list: source, class: 'theme-wnl' }],
+	itemsLists: [{ title: 'LMS', list: source, class: '-ds-theme-wnl' }],
 	type: TOKENS_TYPES.TYPOGRAPHY,
 } as Args;
 

package/lib/js/styles/TypographyVariables/TypographyVariables.stories.ts

@@ -21,7 +21,7 @@ const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 export const Variables = StoryTemplate.bind({});
 
 const args = {
-	itemsLists: [{ title: 'Variables', list: source, class: 'theme-wnl' }],
+	itemsLists: [{ title: 'Variables', list: source, class: '-ds-theme-wnl' }],
 	type: TOKENS_TYPES.TYPOGRAPHY,
 } as Args;
 

package/lib/styles/components/_buttons.scss

@@ -10,18 +10,18 @@
 	color: $color;
 
 	&:hover,
-	&.-hovered,
+	&.-ds-hovered,
 	&:active,
-	&.-active {
+	&.-ds-active {
 		color: $color-hovered;
 	}
 
 	&:focus,
-	&.-focused {
+	&.-ds-focused {
 		color: $color-focused;
 	}
 
-	&.-disabled {
+	&.-ds-disabled {
 		color: $color-disabled;
 	}
 }
@@ -39,19 +39,19 @@
 	background-color: $background;
 
 	&:hover,
-	&.-hovered,
+	&.-ds-hovered,
 	&:active,
-	&.-active {
+	&.-ds-active {
 		background-color: $background-hover;
 	}
 
 	&:focus,
-	&.-focused {
+	&.-ds-focused {
 		background-color: $background-focus;
 	}
 
 	&:disabled,
-	&.-disabled {
+	&.-ds-disabled {
 		background-color: $background-disabled;
 	}
 }
@@ -63,12 +63,12 @@
 	$disabled-border: null
 ) {
 	&:disabled,
-	&.-disabled {
+	&.-ds-disabled {
 		background-color: $disabled-background;
 		border-color: $disabled-border;
 		color: $disabled-color;
 
-		.a-button__icon {
+		.ds-button__icon {
 			color: $disabled-icon;
 		}
 	}
@@ -85,16 +85,16 @@
 		border: 1px solid $border;
 	}
 
-	.a-button {
+	.ds-button {
 		&__icon,
 		&__loadingIcon {
 			color: $icon;
 		}
 	}
 
-	&.-hovered,
+	&.-ds-hovered,
 	&:hover {
-		.a-button {
+		.ds-button {
 			&__icon,
 			&__loadingIcon {
 				color: $icon-hovered;
@@ -102,9 +102,9 @@
 		}
 	}
 
-	&.-focused,
+	&.-ds-focused,
 	&:focus {
-		.a-button {
+		.ds-button {
 			&__icon,
 			&__loadingIcon {
 				color: $icon-focused;
@@ -112,8 +112,8 @@
 		}
 	}
 
-	&.-disabled {
-		.a-button {
+	&.-ds-disabled {
+		.ds-button {
 			&__icon,
 			&__loadingIcon {
 				color: $icon-disabled;
@@ -130,13 +130,13 @@ $button-hover-alpha: 0.12;
 $button-focus-alpha: 0.24;
 $button-disabled-alpha: 0.6;
 
-.a-button {
+.ds-button {
 	$self: &;
 
 	@include button-m-default-bold-uppercase;
 
 	@each $color-name, $color-map in $icon-button-colors {
-		&.-color-#{$color-name} {
+		&.-ds-color-#{$color-name} {
 			@include setButtonColor(map-get($color-map, 'filled', 'color'));
 			@include setButtonBackground(
 				map-get($color-map, 'filled', 'background'),
@@ -171,14 +171,14 @@ $button-disabled-alpha: 0.6;
 	user-select: none;
 
 	&:disabled,
-	&.-disabled {
+	&.-ds-disabled {
 		cursor: not-allowed;
 		pointer-events: none;
 	}
 
-	&.-outlined {
+	&.-ds-outlined {
 		@each $color-name, $color-map in $icon-button-colors {
-			&.-color-#{$color-name} {
+			&.-ds-color-#{$color-name} {
 				@include setButtonColor(map-get($color-map, 'outlined', 'color'));
 				@include setButtonBackground(
 					map-get($color-map, 'outlined', 'background'),
@@ -200,7 +200,7 @@ $button-disabled-alpha: 0.6;
 		}
 	}
 
-	&.-large {
+	&.-ds-large {
 		@include button-l-default-bold-uppercase;
 
 		min-height: $button-large-min-height;
@@ -208,9 +208,9 @@ $button-disabled-alpha: 0.6;
 		padding-right: $space-m;
 	}
 
-	&.-text {
+	&.-ds-text {
 		@each $color-name, $color-map in $icon-button-colors {
-			&.-color-#{$color-name} {
+			&.-ds-color-#{$color-name} {
 				@include setButtonColor(
 					map-get($color-map, 'text', 'color'),
 					map-get($color-map, 'text', 'color-hovered'),
@@ -238,28 +238,28 @@ $button-disabled-alpha: 0.6;
 		padding-right: 0;
 	}
 
-	&:not(.-text) {
+	&:not(.-ds-text) {
 		min-width: 100px;
 
-		&.-rounded {
+		&.-ds-rounded {
 			border-radius: $radius-s;
 			padding-left: $space-xs;
 			padding-right: $space-xs;
 
-			&.-large {
+			&.-ds-large {
 				padding-left: $space-s;
 				padding-right: $space-s;
 			}
 		}
 	}
 
-	&.-small {
+	&.-ds-small {
 		@include button-s-default-bold-uppercase;
 
 		min-height: $button-small-min-height;
 	}
 
-	&.-loading {
+	&.-ds-loading {
 		pointer-events: none;
 
 		#{$self}__content {
@@ -267,9 +267,9 @@ $button-disabled-alpha: 0.6;
 		}
 	}
 
-	&.-elevation-x-small,
-	&.-elevation-small {
-		&.-outlined {
+	&.-ds-elevation-x-small,
+	&.-ds-elevation-small {
+		&.-ds-outlined {
 			&::before {
 				background: $color-default-background;
 				border-radius: 100px;
@@ -284,15 +284,15 @@ $button-disabled-alpha: 0.6;
 			}
 		}
 
-		&.-rounded {
+		&.-ds-rounded {
 			&::before {
 				border-radius: $radius-s;
 			}
 		}
 	}
 
-	&.-elevation-small {
-		&:not(.-text) {
+	&.-ds-elevation-small {
+		&:not(.-ds-text) {
 			box-shadow: $shadow-l;
 		}
 	}
@@ -303,11 +303,11 @@ $button-disabled-alpha: 0.6;
 	}
 
 	&__icon {
-		&.-left {
+		&.-ds-left {
 			margin-right: $space-4xs;
 		}
 
-		&.-right {
+		&.-ds-right {
 			margin-left: $space-4xs;
 		}
 	}

package/lib/styles/components/_icons.scss

@@ -1,11 +1,11 @@
 @import '../settings/icons';
 
-.a-icon {
+.ds-icon {
 	align-items: center;
 	display: inline-flex;
 	transition: transform 0.15s;
 
-	&.-touchable {
+	&.-ds-touchable {
 		align-items: center;
 		cursor: pointer;
 		display: flex;
@@ -14,85 +14,103 @@
 		min-width: $min-touchable-size;
 	}
 
-	&.-rotate90 {
+	&.-ds-rotate90 {
 		transform: rotate(90deg);
 	}
 
-	&.-rotate180 {
+	&.-ds-rotate180 {
 		transform: rotate(180deg);
 	}
 
-	&.-rotate270 {
+	&.-ds-rotate270 {
 		transform: rotate(270deg);
 	}
 
-	&.-no-transtition {
+	&.-ds-no-transtition {
 		transition: initial;
 	}
 
-	&.-spin {
+	&.-ds-spin {
 		animation: $animation-fade-in, $animation-spin;
 	}
 
-	&.-flipped-vertical {
+	&.-ds-flipped-vertical {
 		transform: rotateX(180deg);
 	}
 
-	&.-flipped-horizontal {
+	&.-ds-flipped-horizontal {
 		transform: rotateY(180deg);
 	}
 
+	/* stylelint-disable selector-class-pattern */
 	svg,
 		// We need this class to override FontAwesome styles
 	.svg-inline--fa {
+		/* stylelint-enable */
 		height: $icon-m;
 		width: $icon-m;
 	}
 
-	&.-xx-large svg,
-	&.-xx-large .svg-inline--fa {
+	/* stylelint-disable selector-class-pattern */
+	&.-ds-xx-large svg,
+	&.-ds-xx-large .svg-inline--fa {
+		/* stylelint-enable */
 		height: $icon-xxl;
 		width: $icon-xxl;
 	}
 
-	&.-x-large svg,
-	&.-x-large .svg-inline--fa {
+	/* stylelint-disable selector-class-pattern */
+	&.-ds-x-large svg,
+	&.-ds-x-large .svg-inline--fa {
+		/* stylelint-enable */
 		height: $icon-xl;
 		width: $icon-xl;
 	}
 
-	&.-large svg,
-	&.-large .svg-inline--fa {
+	/* stylelint-disable selector-class-pattern */
+	&.-ds-large svg,
+	&.-ds-large .svg-inline--fa {
+		/* stylelint-enable */
 		height: $icon-l;
 		width: $icon-l;
 	}
 
-	&.-medium svg,
-	&.-medium .svg-inline--fa {
+	/* stylelint-disable selector-class-pattern */
+	&.-ds-medium svg,
+	&.-ds-medium .svg-inline--fa {
+		/* stylelint-enable */
 		height: $icon-m;
 		width: $icon-m;
 	}
 
-	&.-small svg,
-	&.-small .svg-inline--fa {
+	/* stylelint-disable selector-class-pattern */
+	&.-ds-small svg,
+	&.-ds-small .svg-inline--fa {
+		/* stylelint-enable */
 		height: $icon-s;
 		width: $icon-s;
 	}
 
-	&.-x-small svg,
-	&.-x-small .svg-inline--fa {
+	/* stylelint-disable selector-class-pattern */
+	&.-ds-x-small svg,
+	&.-ds-x-small .svg-inline--fa {
+		/* stylelint-enable */
 		height: $icon-xs;
 		width: $icon-xs;
 	}
 
-	&.-xx-small svg,
-	&.-xx-small .svg-inline--fa {
+	/* stylelint-disable selector-class-pattern */
+	&.-ds-xx-small svg,
+	&.-ds-xx-small .svg-inline--fa {
+		/* stylelint-enable */
 		height: $icon-xxs;
 		width: $icon-xxs;
 	}
 
-	&.-xxx-small svg,
-	&.-xxx-small .svg-inline--fa {
+	/* stylelint-disable selector-class-pattern */
+	&.-ds-xxx-small svg,
+	&.-ds-xxx-small .svg-inline--fa {
+		/* stylelint-enable */
 		height: $icon-xxxs;
 		width: $icon-xxxs;
 	}