@bethinkpl/design-system 21.0.2 → 22.0.1

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1714022462304,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1716286360999,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/lib/js/components/BadgeScore/BadgeScore.spec.ts

@@ -37,80 +37,80 @@ describe('BadgeScore', () => {
 	it(`when color is set as ${BADGE_SCORE_COLORS.SUCCESS} should render -success class`, () => {
 		const component = createComponent({ color: BADGE_SCORE_COLORS.SUCCESS });
 
-		expect(component.find('.-success').exists()).toBe(true);
-		expect(component.find('.-warning').exists()).toBe(false);
-		expect(component.find('.-fail').exists()).toBe(false);
-		expect(component.find('.-neutral').exists()).toBe(false);
-		expect(component.find('.-neutralWeak').exists()).toBe(false);
-		expect(component.find('.-inverted').exists()).toBe(false);
+		expect(component.find('.-ds-success').exists()).toBe(true);
+		expect(component.find('.-ds-warning').exists()).toBe(false);
+		expect(component.find('.-ds-fail').exists()).toBe(false);
+		expect(component.find('.-ds-neutral').exists()).toBe(false);
+		expect(component.find('.-ds-neutralWeak').exists()).toBe(false);
+		expect(component.find('.-ds-inverted').exists()).toBe(false);
 	});
 
 	it(`when color is set as ${BADGE_SCORE_COLORS.WARNING} should render -warning class`, () => {
 		const component = createComponent({ color: BADGE_SCORE_COLORS.WARNING });
 
-		expect(component.find('.-success').exists()).toBe(false);
-		expect(component.find('.-warning').exists()).toBe(true);
-		expect(component.find('.-fail').exists()).toBe(false);
-		expect(component.find('.-neutral').exists()).toBe(false);
-		expect(component.find('.-neutralWeak').exists()).toBe(false);
-		expect(component.find('.-inverted').exists()).toBe(false);
+		expect(component.find('.-ds-success').exists()).toBe(false);
+		expect(component.find('.-ds-warning').exists()).toBe(true);
+		expect(component.find('.-ds-fail').exists()).toBe(false);
+		expect(component.find('.-ds-neutral').exists()).toBe(false);
+		expect(component.find('.-ds-neutralWeak').exists()).toBe(false);
+		expect(component.find('.-ds-inverted').exists()).toBe(false);
 	});
 
 	it(`when color is set as ${BADGE_SCORE_COLORS.FAIL} should render -fail class`, () => {
 		const component = createComponent({ color: BADGE_SCORE_COLORS.FAIL });
 
-		expect(component.find('.-success').exists()).toBe(false);
-		expect(component.find('.-warning').exists()).toBe(false);
-		expect(component.find('.-fail').exists()).toBe(true);
-		expect(component.find('.-neutral').exists()).toBe(false);
-		expect(component.find('.-neutralWeak').exists()).toBe(false);
-		expect(component.find('.-inverted').exists()).toBe(false);
+		expect(component.find('.-ds-success').exists()).toBe(false);
+		expect(component.find('.-ds-warning').exists()).toBe(false);
+		expect(component.find('.-ds-fail').exists()).toBe(true);
+		expect(component.find('.-ds-neutral').exists()).toBe(false);
+		expect(component.find('.-ds-neutralWeak').exists()).toBe(false);
+		expect(component.find('.-ds-inverted').exists()).toBe(false);
 	});
 
 	it(`when color is set as ${BADGE_SCORE_COLORS.INVERTED} should render -inverted class`, () => {
 		const component = createComponent({ color: BADGE_SCORE_COLORS.INVERTED });
 
-		expect(component.find('.-success').exists()).toBe(false);
-		expect(component.find('.-warning').exists()).toBe(false);
-		expect(component.find('.-fail').exists()).toBe(false);
-		expect(component.find('.-neutral').exists()).toBe(false);
-		expect(component.find('.-neutralWeak').exists()).toBe(false);
-		expect(component.find('.-inverted').exists()).toBe(true);
+		expect(component.find('.-ds-success').exists()).toBe(false);
+		expect(component.find('.-ds-warning').exists()).toBe(false);
+		expect(component.find('.-ds-fail').exists()).toBe(false);
+		expect(component.find('.-ds-neutral').exists()).toBe(false);
+		expect(component.find('.-ds-neutralWeak').exists()).toBe(false);
+		expect(component.find('.-ds-inverted').exists()).toBe(true);
 	});
 
 	it(`when color is set as ${BADGE_SCORE_COLORS.NEUTRAL} should render -fail class`, () => {
 		const component = createComponent({ color: BADGE_SCORE_COLORS.NEUTRAL });
 
-		expect(component.find('.-success').exists()).toBe(false);
-		expect(component.find('.-warning').exists()).toBe(false);
-		expect(component.find('.-fail').exists()).toBe(false);
-		expect(component.find('.-neutral').exists()).toBe(true);
-		expect(component.find('.-neutralWeak').exists()).toBe(false);
-		expect(component.find('.-inverted').exists()).toBe(false);
+		expect(component.find('.-ds-success').exists()).toBe(false);
+		expect(component.find('.-ds-warning').exists()).toBe(false);
+		expect(component.find('.-ds-fail').exists()).toBe(false);
+		expect(component.find('.-ds-neutral').exists()).toBe(true);
+		expect(component.find('.-ds-neutralWeak').exists()).toBe(false);
+		expect(component.find('.-ds-inverted').exists()).toBe(false);
 	});
 
 	it(`when color is set as ${BADGE_SCORE_COLORS.NEUTRAL_WEAK} should render -fail class`, () => {
 		const component = createComponent({ color: BADGE_SCORE_COLORS.NEUTRAL_WEAK });
 
-		expect(component.find('.-success').exists()).toBe(false);
-		expect(component.find('.-warning').exists()).toBe(false);
-		expect(component.find('.-fail').exists()).toBe(false);
-		expect(component.find('.-neutral').exists()).toBe(false);
-		expect(component.find('.-neutralWeak').exists()).toBe(true);
-		expect(component.find('.-inverted').exists()).toBe(false);
+		expect(component.find('.-ds-success').exists()).toBe(false);
+		expect(component.find('.-ds-warning').exists()).toBe(false);
+		expect(component.find('.-ds-fail').exists()).toBe(false);
+		expect(component.find('.-ds-neutral').exists()).toBe(false);
+		expect(component.find('.-ds-neutralWeak').exists()).toBe(true);
+		expect(component.find('.-ds-inverted').exists()).toBe(false);
 	});
 
 	it(`when size is set as ${BADGE_SCORE_SIZES.SMALL} should render -small class`, () => {
 		const component = createComponent({ size: BADGE_SCORE_SIZES.SMALL });
 
-		expect(component.find('.-small').exists()).toBe(true);
-		expect(component.find('.-xsmall').exists()).toBe(false);
+		expect(component.find('.-ds-small').exists()).toBe(true);
+		expect(component.find('.-ds-xsmall').exists()).toBe(false);
 	});
 
 	it(`when size is set as ${BADGE_SCORE_SIZES.XSMALL} should render -xsmall class`, () => {
 		const component = createComponent({ size: BADGE_SCORE_SIZES.XSMALL });
 
-		expect(component.find('.-small').exists()).toBe(false);
-		expect(component.find('.-xsmall').exists()).toBe(true);
+		expect(component.find('.-ds-small').exists()).toBe(false);
+		expect(component.find('.-ds-xsmall').exists()).toBe(true);
 	});
 });

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

@@ -1,21 +1,21 @@
 <template>
 	<div
-		class="badgeScore"
+		class="ds-badgeScore"
 		:class="{
-			'-success': color === BADGE_SCORE_COLORS.SUCCESS,
-			'-warning': color === BADGE_SCORE_COLORS.WARNING,
-			'-fail': color === BADGE_SCORE_COLORS.FAIL,
-			'-inverted': color === BADGE_SCORE_COLORS.INVERTED,
-			'-neutralWeak': color === BADGE_SCORE_COLORS.NEUTRAL_WEAK,
-			'-neutral': color === BADGE_SCORE_COLORS.NEUTRAL,
-			'-small': size === BADGE_SCORE_SIZES.SMALL,
-			'-xsmall': size === BADGE_SCORE_SIZES.XSMALL,
-			'-fullWidth': fullWidth,
+			'-ds-success': color === BADGE_SCORE_COLORS.SUCCESS,
+			'-ds-warning': color === BADGE_SCORE_COLORS.WARNING,
+			'-ds-fail': color === BADGE_SCORE_COLORS.FAIL,
+			'-ds-inverted': color === BADGE_SCORE_COLORS.INVERTED,
+			'-ds-neutralWeak': color === BADGE_SCORE_COLORS.NEUTRAL_WEAK,
+			'-ds-neutral': color === BADGE_SCORE_COLORS.NEUTRAL,
+			'-ds-small': size === BADGE_SCORE_SIZES.SMALL,
+			'-ds-xsmall': size === BADGE_SCORE_SIZES.XSMALL,
+			'-ds-fullWidth': fullWidth,
 		}"
 	>
-		<wnl-icon v-if="icon" class="badgeScore__icon" :icon="icon" :size="iconSize" />
-		<div class="badgeScore__text">{{ text }}</div>
-		<span class="badgeScore__suffix">{{ suffix }}</span>
+		<wnl-icon v-if="icon" class="ds-badgeScore__icon" :icon="icon" :size="iconSize" />
+		<div class="ds-badgeScore__text">{{ text }}</div>
+		<span class="ds-badgeScore__suffix">{{ suffix }}</span>
 	</div>
 </template>
 
@@ -83,20 +83,20 @@ $badge-score-colors: (
 		color: $color-suffix;
 	}
 
-	&.-xsmall {
+	&.-ds-xsmall {
 		#{$self}__suffix {
 			color: $color-suffix-xs;
 		}
 	}
 }
 
-.badgeScore {
+.ds-badgeScore {
 	$self: &;
 
 	@include label-2xl-default-bold;
 
 	@each $color-name, $color-map in $badge-score-colors {
-		&.-#{$color-name} {
+		&.-ds-#{$color-name} {
 			@include setBadgeScoreColor(
 				$self,
 				map-get($color-map, 'background'),
@@ -129,7 +129,7 @@ $badge-score-colors: (
 		align-self: baseline;
 	}
 
-	&.-small {
+	&.-ds-small {
 		@include label-xl-default-bold;
 
 		min-width: $badge-score-small-min-width;
@@ -140,7 +140,7 @@ $badge-score-colors: (
 		}
 	}
 
-	&.-xsmall {
+	&.-ds-xsmall {
 		@include label-s-default-bold;
 
 		min-width: $badge-score-x-small-min-width;
@@ -151,7 +151,7 @@ $badge-score-colors: (
 		}
 	}
 
-	&.-fullWidth {
+	&.-ds-fullWidth {
 		width: 100%;
 	}
 }
@@ -159,7 +159,7 @@ $badge-score-colors: (
 
 <script lang="ts">
 import { BADGE_SCORE_COLORS, BADGE_SCORE_SIZES } from './BadgeScore.consts';
-import WnlIcon, { ICONS, ICON_SIZES } from '../Icons/Icon';
+import WnlIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 import { toRaw } from 'vue';
 
 export default {

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

@@ -5,7 +5,7 @@
 				<div
 					v-if="icon"
 					class="ds-banner__iconContainer"
-					:class="{ '-hideOnMobile': isIconHiddenOnMobile }"
+					:class="{ '-ds-hideOnMobile': isIconHiddenOnMobile }"
 				>
 					<!-- TODO: https://bethink.atlassian.net/browse/IT-3589 change to a-illustration in the future -->
 					<ds-icon class="ds-banner__icon" :class="[colorClass]" :icon="icon" />
@@ -83,7 +83,7 @@
 	padding: $space-xs;
 
 	@media #{breakpoint-s()} {
-		&.-horizontal {
+		&.-ds-horizontal {
 			#{$self}__iconContainer {
 				padding: $space-2xs 0;
 			}
@@ -115,37 +115,37 @@
 		}
 	}
 
-	&.-warning {
+	&.-ds-warning {
 		background-color: $color-warning-background;
 		border-color: $color-warning-border-weak;
 	}
 
-	&.-success {
+	&.-ds-success {
 		background-color: $color-success-background;
 		border-color: $color-success-border-weak;
 	}
 
-	&.-info {
+	&.-ds-info {
 		background-color: $color-info-background;
 		border-color: $color-info-border-weak;
 	}
 
-	&.-fail {
+	&.-ds-fail {
 		background-color: $color-fail-background;
 		border-color: $color-fail-border-weak;
 	}
 
-	&.-neutral {
+	&.-ds-neutral {
 		background-color: $color-neutral-background;
 		border-color: $color-neutral-border-weak;
 	}
 
-	&.-default {
+	&.-ds-default {
 		background-color: $color-default-background;
 		border-color: $color-neutral-border-weak;
 	}
 
-	&.-danger {
+	&.-ds-danger {
 		background-color: $color-danger-background;
 		border-color: $color-danger-border-weak;
 	}
@@ -212,7 +212,7 @@
 		margin-right: $space-s;
 		padding: $space-4xs 0;
 
-		&.-hideOnMobile {
+		&.-ds-hideOnMobile {
 			display: none;
 
 			@media #{breakpoint-s()} {
@@ -225,37 +225,37 @@
 		border-radius: 100px;
 		padding: $space-2xs;
 
-		&.-neutral {
+		&.-ds-neutral {
 			background-color: $color-neutral-background-medium;
 			color: $color-neutral-icon;
 		}
 
-		&.-default {
+		&.-ds-default {
 			background-color: $color-neutral-background-medium;
 			color: $color-neutral-icon;
 		}
 
-		&.-warning {
+		&.-ds-warning {
 			background-color: $color-warning-background-medium;
 			color: $color-warning-icon;
 		}
 
-		&.-success {
+		&.-ds-success {
 			background-color: $color-success-background-medium;
 			color: $color-success-icon;
 		}
 
-		&.-info {
+		&.-ds-info {
 			background-color: $color-info-background-medium;
 			color: $color-info-icon;
 		}
 
-		&.-fail {
+		&.-ds-fail {
 			background-color: $color-fail-background-medium;
 			color: $color-fail-icon;
 		}
 
-		&.-danger {
+		&.-ds-danger {
 			background-color: $color-danger-background-medium;
 			color: $color-danger-icon;
 		}
@@ -285,15 +285,14 @@
 
 <script lang="ts">
 import DsButton, {
-	BUTTON_RADIUSES,
-	BUTTON_TYPES,
 	BUTTON_COLORS,
+	BUTTON_RADIUSES,
 	BUTTON_SIZES,
+	BUTTON_TYPES,
 } from '../Buttons/Button';
 import DsDivider, { DIVIDER_PROMINENCES } from '../Divider';
-import DsIcon from '../Icons/Icon';
+import DsIcon, { ICONS } from '../Icons/Icon';
 import DsIconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../Buttons/IconButton';
-import { ICONS } from '../Icons/Icon';
 import { BANNER_COLORS, BANNER_LAYOUTS } from './Banner.consts';
 import { toRaw } from 'vue';
 
@@ -361,17 +360,17 @@ export default {
 	computed: {
 		colorClass() {
 			return {
-				[BANNER_COLORS.NEUTRAL]: '-neutral',
-				[BANNER_COLORS.DEFAULT]: '-default',
-				[BANNER_COLORS.FAIL]: '-fail',
-				[BANNER_COLORS.INFO]: '-info',
-				[BANNER_COLORS.SUCCESS]: '-success',
-				[BANNER_COLORS.WARNING]: '-warning',
-				[BANNER_COLORS.DANGER]: '-danger',
+				[BANNER_COLORS.NEUTRAL]: '-ds-neutral',
+				[BANNER_COLORS.DEFAULT]: '-ds-default',
+				[BANNER_COLORS.FAIL]: '-ds-fail',
+				[BANNER_COLORS.INFO]: '-ds-info',
+				[BANNER_COLORS.SUCCESS]: '-ds-success',
+				[BANNER_COLORS.WARNING]: '-ds-warning',
+				[BANNER_COLORS.DANGER]: '-ds-danger',
 			}[this.color];
 		},
 		layoutClass() {
-			return this.layout === BANNER_LAYOUTS.VERTICAL ? '-vertical' : '-horizontal';
+			return this.layout === BANNER_LAYOUTS.VERTICAL ? '-ds-vertical' : '-ds-horizontal';
 		},
 	},
 	watch: {

package/lib/js/components/Buttons/Button/Button.spec.ts

@@ -27,18 +27,18 @@ describe('Button', () => {
 	});
 
 	test.each([
-		[{ props: { type: BUTTON_TYPES.OUTLINED }, expectedClass: '-outlined' }],
-		[{ props: { type: BUTTON_TYPES.TEXT }, expectedClass: '-text' }],
-		[{ props: { size: BUTTON_SIZES.SMALL }, expectedClass: '-small' }],
-		[{ props: { size: BUTTON_SIZES.LARGE }, expectedClass: '-large' }],
-		[{ props: { color: BUTTON_COLORS.PRIMARY }, expectedClass: '-color-primary' }],
-		[{ props: { color: BUTTON_COLORS.DANGER }, expectedClass: '-color-danger' }],
-		[{ props: { color: BUTTON_COLORS.SUCCESS }, expectedClass: '-color-success' }],
-		[{ props: { radius: BUTTON_RADIUSES.ROUNDED }, expectedClass: '-rounded' }],
-		[{ props: { state: BUTTON_STATES.HOVERED }, expectedClass: '-hovered' }],
-		[{ props: { state: BUTTON_STATES.FOCUSED }, expectedClass: '-focused' }],
-		[{ props: { state: BUTTON_STATES.LOADING }, expectedClass: '-loading' }],
-		[{ props: { state: BUTTON_STATES.DISABLED }, expectedClass: '-disabled' }],
+		[{ props: { type: BUTTON_TYPES.OUTLINED }, expectedClass: '-ds-outlined' }],
+		[{ props: { type: BUTTON_TYPES.TEXT }, expectedClass: '-ds-text' }],
+		[{ props: { size: BUTTON_SIZES.SMALL }, expectedClass: '-ds-small' }],
+		[{ props: { size: BUTTON_SIZES.LARGE }, expectedClass: '-ds-large' }],
+		[{ props: { color: BUTTON_COLORS.PRIMARY }, expectedClass: '-ds-color-primary' }],
+		[{ props: { color: BUTTON_COLORS.DANGER }, expectedClass: '-ds-color-danger' }],
+		[{ props: { color: BUTTON_COLORS.SUCCESS }, expectedClass: '-ds-color-success' }],
+		[{ props: { radius: BUTTON_RADIUSES.ROUNDED }, expectedClass: '-ds-rounded' }],
+		[{ props: { state: BUTTON_STATES.HOVERED }, expectedClass: '-ds-hovered' }],
+		[{ props: { state: BUTTON_STATES.FOCUSED }, expectedClass: '-ds-focused' }],
+		[{ props: { state: BUTTON_STATES.LOADING }, expectedClass: '-ds-loading' }],
+		[{ props: { state: BUTTON_STATES.DISABLED }, expectedClass: '-ds-disabled' }],
 	])('correct class for props', ({ props, expectedClass }) => {
 		const outlinedButton = createComponent(props);
 		expect(outlinedButton.classes()).toContain(expectedClass);
@@ -47,27 +47,27 @@ describe('Button', () => {
 	it('loading should have correct text container and loading icon', () => {
 		const component = createComponent({ state: BUTTON_STATES.LOADING });
 
-		expect(component.find('.a-button__content').exists()).toBe(true);
-		expect(component.find('.a-button__loadingIcon').exists()).toBe(true);
+		expect(component.find('.ds-button__content').exists()).toBe(true);
+		expect(component.find('.ds-button__loadingIcon').exists()).toBe(true);
 	});
 
 	it('should render icon', () => {
 		const leftIcon = createComponent({ 'icon-left': Object.freeze(ICONS.FA_XMARK) });
-		expect(leftIcon.find('.a-button__icon.-left').exists()).toBe(true);
-		expect(leftIcon.findComponent<typeof Button>('.a-button__icon.-left').props().icon).toEqual(
-			ICONS.FA_XMARK,
-		);
+		expect(leftIcon.find('.ds-button__icon.-ds-left').exists()).toBe(true);
+		expect(
+			leftIcon.findComponent<typeof Button>('.ds-button__icon.-ds-left').props().icon,
+		).toEqual(ICONS.FA_XMARK);
 
 		const rightIcon = createComponent({ 'icon-right': Object.freeze(ICONS.FA_CLOCK) });
-		expect(rightIcon.find('.a-button__icon.-right').exists()).toBe(true);
+		expect(rightIcon.find('.ds-button__icon.-ds-right').exists()).toBe(true);
 		expect(
-			rightIcon.findComponent<typeof Button>('.a-button__icon.-right').props().icon,
+			rightIcon.findComponent<typeof Button>('.ds-button__icon.-ds-right').props().icon,
 		).toEqual(ICONS.FA_CLOCK);
 	});
 
 	it('correct slot content', () => {
 		const component = createComponent({ 'icon-left': null });
-		expect(component.find('.a-button__icon.-left').exists()).toBe(false);
-		expect(component.find('.a-button__content').text()).toBe('Hello');
+		expect(component.find('.ds-button__icon.-ds-left').exists()).toBe(false);
+		expect(component.find('.ds-button__content').text()).toBe('Hello');
 	});
 });

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

@@ -1,44 +1,44 @@
 <template>
 	<span
-		class="a-button"
+		class="ds-button"
 		:class="{
-			'-outlined': type === BUTTON_TYPES.OUTLINED,
-			'-text': type === BUTTON_TYPES.TEXT,
+			'-ds-outlined': type === BUTTON_TYPES.OUTLINED,
+			'-ds-text': type === BUTTON_TYPES.TEXT,
 
-			'-small': size === SIZES.SMALL,
-			'-large': size === SIZES.LARGE,
+			'-ds-small': size === SIZES.SMALL,
+			'-ds-large': size === SIZES.LARGE,
 
-			'-rounded': type !== BUTTON_TYPES.TEXT && radius === RADIUSES.ROUNDED,
+			'-ds-rounded': type !== BUTTON_TYPES.TEXT && radius === RADIUSES.ROUNDED,
 
-			'-hovered': state === STATES.HOVERED,
-			'-focused': state === STATES.FOCUSED,
-			'-loading': state === STATES.LOADING,
-			'-disabled': state === STATES.DISABLED,
+			'-ds-hovered': state === STATES.HOVERED,
+			'-ds-focused': state === STATES.FOCUSED,
+			'-ds-loading': state === STATES.LOADING,
+			'-ds-disabled': state === STATES.DISABLED,
 
 			[colorClassName]: true,
 
-			'-elevation-x-small': elevation === ELEVATIONS.X_SMALL,
-			'-elevation-small': elevation === ELEVATIONS.SMALL,
+			'-ds-elevation-x-small': elevation === ELEVATIONS.X_SMALL,
+			'-ds-elevation-small': elevation === ELEVATIONS.SMALL,
 		}"
 	>
-		<span class="a-button__content">
+		<span class="ds-button__content">
 			<wnl-icon
 				v-if="iconLeft"
-				class="a-button__icon -left"
+				class="ds-button__icon -ds-left"
 				:icon="iconLeft"
 				:size="iconSize"
 			/>
 			<slot />
 			<wnl-icon
 				v-if="iconRight"
-				class="a-button__icon -right"
+				class="ds-button__icon -ds-right"
 				:icon="iconRight"
 				:size="iconSize"
 			/>
 		</span>
 		<wnl-icon
 			v-if="state === STATES.LOADING"
-			class="a-button__loadingIcon"
+			class="ds-button__loadingIcon"
 			:icon="ICONS.FAD_SPINNER_THIRD"
 			:size="loadingIconSize"
 		/>
@@ -149,7 +149,7 @@ export default {
 			return ICON_SIZES.X_SMALL;
 		},
 		colorClassName(): string {
-			return `-color-${this.color}`;
+			return `-ds-color-${this.color}`;
 		},
 		loadingIconSize(): string {
 			if (this.size === BUTTON_SIZES.LARGE) {