@bethinkpl/design-system 21.0.2 → 22.0.1

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

@@ -27,12 +27,12 @@ describe('TabItem', () => {
 	it('when prop isSelected is set to false component should not render "isSelected" class', () => {
 		const component = createComponent({ isSelected: false });
 
-		expect(component.find('.-isSelected').exists()).toBe(false);
+		expect(component.find('.-ds-isSelected').exists()).toBe(false);
 	});
 
 	it('when prop isSelected is set to true component should render "isSelected" class', () => {
 		const component = createComponent({ isSelected: true });
 
-		expect(component.find('.-isSelected').exists()).toBe(true);
+		expect(component.find('.-ds-isSelected').exists()).toBe(true);
 	});
 });

package/lib/js/components/TabItem/TabItem.vue

@@ -1,21 +1,21 @@
 <template>
 	<div
-		class="tabItem"
+		class="ds-tabItem"
 		:title="label"
 		:class="{
-			'-sizeMedium': size === TAB_ITEM_SIZES.MEDIUM,
-			'-sizeSmall': size === TAB_ITEM_SIZES.SMALL,
-			'-isSelected': isSelected,
+			'-ds-sizeMedium': size === TAB_ITEM_SIZES.MEDIUM,
+			'-ds-sizeSmall': size === TAB_ITEM_SIZES.SMALL,
+			'-ds-isSelected': isSelected,
 		}"
 		@click="$emit('click')"
 	>
 		<ds-icon
 			v-if="icon !== null"
-			class="tabItem__icon"
+			class="ds-tabItem__icon"
 			:icon="icon"
 			:size="ICON_SIZES.X_SMALL"
 		/>
-		<span v-if="label" class="tabItem__label" :class="{ '-ellipsis': labelEllipsis }">{{
+		<span v-if="label" class="ds-tabItem__label" :class="{ '-ds-ellipsis': labelEllipsis }">{{
 			label
 		}}</span>
 	</div>
@@ -27,7 +27,7 @@
 @import '../../../styles/settings/typography/tokens';
 @import '../../../styles/settings/animations';
 
-.tabItem {
+.ds-tabItem {
 	$self: &;
 
 	align-items: center;
@@ -47,7 +47,7 @@
 		color: $color-neutral-text;
 		transition: color ease-in-out $default-transition-time;
 
-		&.-ellipsis {
+		&.-ds-ellipsis {
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -65,7 +65,7 @@
 		}
 	}
 
-	&.-isSelected {
+	&.-ds-isSelected {
 		box-shadow: inset 0 -1px 0 $color-primary-border;
 
 		#{$self}__icon {
@@ -77,14 +77,14 @@
 		}
 	}
 
-	&.-sizeSmall {
+	&.-ds-sizeSmall {
 		@include label-m-default-bold;
 
 		column-gap: $space-4xs;
 		padding: $space-xs;
 	}
 
-	&.-sizeMedium {
+	&.-ds-sizeMedium {
 		@include label-l-default-bold;
 
 		column-gap: $space-2xs;

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

@@ -45,10 +45,10 @@ describe('Tile', () => {
 			interactive: true,
 		};
 		const component = createComponent(props);
-		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
-		expect(component.find('.a-tile__text').text()).toBe('text text');
-		expect(component.find('.a-tile__iconRight').exists()).toBe(false);
-		expect(component.find('.a-tile__iconLeft').exists()).toBe(false);
+		expect(component.find('.ds-tile__eyebrowText').text()).toBe('eyebrowText text');
+		expect(component.find('.ds-tile__text').text()).toBe('text text');
+		expect(component.find('.ds-tile__iconRight').exists()).toBe(false);
+		expect(component.find('.ds-tile__iconLeft').exists()).toBe(false);
 
 		expect(component.find('.a-additionalText').exists()).toBe(false);
 	});
@@ -61,10 +61,10 @@ describe('Tile', () => {
 			iconRight: Object.freeze(ICONS.FA_CHEVRON_RIGHT),
 		};
 		const component = createComponent(props);
-		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
-		expect(component.find('.a-tile__text').text()).toBe('text text');
-		expect(component.find('.a-tile__iconRight').exists()).toBe(true);
-		expect(component.find('.a-tile__iconLeft').exists()).toBe(false);
+		expect(component.find('.ds-tile__eyebrowText').text()).toBe('eyebrowText text');
+		expect(component.find('.ds-tile__text').text()).toBe('text text');
+		expect(component.find('.ds-tile__iconRight').exists()).toBe(true);
+		expect(component.find('.ds-tile__iconLeft').exists()).toBe(false);
 
 		expect(component.find('.a-additionalText').exists()).toBe(false);
 	});
@@ -78,10 +78,10 @@ describe('Tile', () => {
 			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		};
 		const component = createComponent(props);
-		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
-		expect(component.find('.a-tile__text').text()).toBe('text text');
-		expect(component.find('.a-tile__iconRight').exists()).toBe(true);
-		expect(component.find('.a-tile__iconLeft').exists()).toBe(true);
+		expect(component.find('.ds-tile__eyebrowText').text()).toBe('eyebrowText text');
+		expect(component.find('.ds-tile__text').text()).toBe('text text');
+		expect(component.find('.ds-tile__iconRight').exists()).toBe(true);
+		expect(component.find('.ds-tile__iconLeft').exists()).toBe(true);
 
 		expect(component.find('.a-additionalText').exists()).toBe(false);
 	});
@@ -93,12 +93,12 @@ describe('Tile', () => {
 			interactive: true,
 			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		});
-		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
-		expect(component.find('.a-tile__text').text()).toBe('text text');
-		expect(component.find('.a-tile__iconRight').exists()).toBe(false);
-		expect(component.find('.a-tile__iconLeft').exists()).toBe(true);
+		expect(component.find('.ds-tile__eyebrowText').text()).toBe('eyebrowText text');
+		expect(component.find('.ds-tile__text').text()).toBe('text text');
+		expect(component.find('.ds-tile__iconRight').exists()).toBe(false);
+		expect(component.find('.ds-tile__iconLeft').exists()).toBe(true);
 
-		expect(component.find('.a-tile__additionalText').exists()).toBe(true);
+		expect(component.find('.ds-tile__additionalText').exists()).toBe(true);
 	});
 	it('Is not interactive without right icon and additionalText', () => {
 		const component = createComponent({
@@ -106,12 +106,12 @@ describe('Tile', () => {
 			eyebrowText: 'eyebrowText text',
 			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		});
-		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
-		expect(component.find('.a-tile__text').text()).toBe('text text');
+		expect(component.find('.ds-tile__eyebrowText').text()).toBe('eyebrowText text');
+		expect(component.find('.ds-tile__text').text()).toBe('text text');
 
-		expect(component.find('.a-tile__iconLeft').exists()).toBe(true);
-		expect(component.find('.a-tile__iconRight').exists()).toBe(false);
-		expect(component.find('.a-tile__additionalText').exists()).toBe(false);
+		expect(component.find('.ds-tile__iconLeft').exists()).toBe(true);
+		expect(component.find('.ds-tile__iconRight').exists()).toBe(false);
+		expect(component.find('.ds-tile__additionalText').exists()).toBe(false);
 	});
 	it('Is not interactive with right and without additionalText', () => {
 		const component = createComponent({
@@ -120,12 +120,12 @@ describe('Tile', () => {
 			iconRight: Object.freeze(ICONS.FA_ANGLE_RIGHT),
 			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		});
-		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
-		expect(component.find('.a-tile__text').text()).toBe('text text');
-		expect(component.find('.a-tile__iconRight').exists()).toBe(true);
+		expect(component.find('.ds-tile__eyebrowText').text()).toBe('eyebrowText text');
+		expect(component.find('.ds-tile__text').text()).toBe('text text');
+		expect(component.find('.ds-tile__iconRight').exists()).toBe(true);
 
-		expect(component.find('.a-tile__iconLeft').exists()).toBe(true);
-		expect(component.find('.a-tile__additionalText').exists()).toBe(false);
+		expect(component.find('.ds-tile__iconLeft').exists()).toBe(true);
+		expect(component.find('.ds-tile__additionalText').exists()).toBe(false);
 	});
 	it('Is not interactive without right and with additionalText', () => {
 		const component = createComponent({
@@ -134,12 +134,12 @@ describe('Tile', () => {
 			additionalText: 'additionalText text',
 			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		});
-		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
-		expect(component.find('.a-tile__text').text()).toBe('text text');
-		expect(component.find('.a-tile__iconRight').exists()).toBe(false);
-		expect(component.find('.a-tile__additionalText').exists()).toBe(true);
+		expect(component.find('.ds-tile__eyebrowText').text()).toBe('eyebrowText text');
+		expect(component.find('.ds-tile__text').text()).toBe('text text');
+		expect(component.find('.ds-tile__iconRight').exists()).toBe(false);
+		expect(component.find('.ds-tile__additionalText').exists()).toBe(true);
 
-		expect(component.find('.a-tile__iconLeft').exists()).toBe(true);
+		expect(component.find('.ds-tile__iconLeft').exists()).toBe(true);
 	});
 	it('Is not interactive with right and additionalText but additionalText is not visible when right is present', () => {
 		const component = createComponent({
@@ -149,12 +149,12 @@ describe('Tile', () => {
 			iconRight: Object.freeze(ICONS.FA_ANGLE_RIGHT),
 			iconLeft: Object.freeze(ICONS.FA_BOX_ARCHIVE),
 		});
-		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
-		expect(component.find('.a-tile__text').text()).toBe('text text');
-		expect(component.find('.a-tile__iconRight .-interactive').exists()).toBe(false);
-		expect(component.find('.a-tile__additionalText').exists()).toBe(false);
+		expect(component.find('.ds-tile__eyebrowText').text()).toBe('eyebrowText text');
+		expect(component.find('.ds-tile__text').text()).toBe('text text');
+		expect(component.find('.ds-tile__iconRight .-ds-interactive').exists()).toBe(false);
+		expect(component.find('.ds-tile__additionalText').exists()).toBe(false);
 
-		expect(component.find('.a-tile__iconLeft').exists()).toBe(true);
+		expect(component.find('.ds-tile__iconLeft').exists()).toBe(true);
 	});
 
 	it('Eyebrowtext is uppercased when isEyebrowTextUppercase', () => {
@@ -164,7 +164,7 @@ describe('Tile', () => {
 			additionalText: 'additionalText text',
 			isEyebrowTextUppercase: true,
 		});
-		expect(component.find('.a-tile__eyebrowText').text()).toBe('eyebrowText text');
-		expect(component.find('.a-tile__eyebrowText').classes()).toContain('-uppercase');
+		expect(component.find('.ds-tile__eyebrowText').text()).toBe('eyebrowText text');
+		expect(component.find('.ds-tile__eyebrowText').classes()).toContain('-ds-uppercase');
 	});
 });

package/lib/js/components/Tile/Tile.vue

@@ -1,34 +1,37 @@
 <template>
-	<div :class="[tileColor, tileState, { '-interactive': interactive }]" class="a-tile">
+	<div :class="[tileColor, tileState, { '-ds-interactive': interactive }]" class="ds-tile">
 		<ds-icon
 			v-if="iconLeft"
 			:icon="iconLeft"
 			:size="ICON_SIZES.SMALL"
-			class="a-tile__iconLeft"
+			class="ds-tile__iconLeft"
 		/>
-		<div class="a-tile__center">
+		<div class="ds-tile__center">
 			<span
 				v-if="eyebrowText"
-				class="a-tile__eyebrowText"
-				:class="{ '-uppercase': isEyebrowTextUppercase, '-ellipsis': eyebrowEllipsis }"
+				class="ds-tile__eyebrowText"
+				:class="{
+					'-ds-uppercase': isEyebrowTextUppercase,
+					'-ds-ellipsis': eyebrowEllipsis,
+				}"
 				v-text="eyebrowText"
 			/>
-			<span class="a-tile__text" :class="{ '-ellipsis': textEllipsis }" v-text="text" />
+			<span class="ds-tile__text" :class="{ '-ds-ellipsis': textEllipsis }" v-text="text" />
 		</div>
 		<ds-icon
 			v-if="state === TILE_STATES.LOADING"
-			class="a-tile__iconRight"
+			class="ds-tile__iconRight"
 			:icon="ICONS.FAD_SPINNER_THIRD"
 			:size="ICON_SIZES.SMALL"
 			spinning
 		/>
 		<ds-icon
 			v-else-if="iconRight"
-			class="a-tile__iconRight"
+			class="ds-tile__iconRight"
 			:icon="iconRight"
 			:size="ICON_SIZES.SMALL"
 		/>
-		<div v-else-if="additionalText" class="a-tile__additionalText">
+		<div v-else-if="additionalText" class="ds-tile__additionalText">
 			{{ additionalText }}
 		</div>
 	</div>
@@ -161,28 +164,28 @@ $tile-colors: (
 		color: map-get($color-map, 'icon');
 	}
 
-	&.-interactive {
+	&.-ds-interactive {
 		#{$root}__iconRight {
 			color: map-get($color-map, 'icon-interactive');
 		}
 
-		&:not(.-loading):hover {
+		&:not(.-ds-loading):hover {
 			background-color: map-get($color-map, 'background-hover');
 		}
 	}
 
-	&.-loading {
+	&.-ds-loading {
 		#{$root}__iconRight {
 			color: map-get($color-map, 'icon-interactive');
 		}
 	}
 }
 
-.a-tile {
+.ds-tile {
 	$self: &;
 
 	@each $color-name, $color-map in $tile-colors {
-		&.-#{$color-name} {
+		&.-ds-#{$color-name} {
 			@include setColors($self, map-get($color-map, 'default'));
 		}
 	}
@@ -195,9 +198,9 @@ $tile-colors: (
 	padding: $space-2xs $space-xs;
 	transition: background-color ease-in-out $default-transition-time;
 
-	&.-disabled {
+	&.-ds-disabled {
 		@each $color-name, $color-map in $tile-colors {
-			&.-#{$color-name} {
+			&.-ds-#{$color-name} {
 				@include setColors($self, map-get($color-map, 'disabled'));
 			}
 		}
@@ -231,11 +234,11 @@ $tile-colors: (
 
 		margin-bottom: $space-4xs;
 
-		&.-uppercase {
+		&.-ds-uppercase {
 			@include info-m-extensive-bold-uppercase();
 		}
 
-		&.-ellipsis {
+		&.-ds-ellipsis {
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -247,7 +250,7 @@ $tile-colors: (
 
 		color: $color-neutral-text-heavy;
 
-		&.-ellipsis {
+		&.-ds-ellipsis {
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -262,7 +265,7 @@ $tile-colors: (
 		margin-left: $space-xs;
 	}
 
-	&.-interactive:not(.-disabled):not(.-loading) {
+	&.-ds-interactive:not(.-ds-disabled):not(.-ds-loading) {
 		cursor: pointer;
 	}
 }
@@ -289,20 +292,20 @@ export default {
 	computed: {
 		tileColor() {
 			return {
-				[TILE_COLORS.NEUTRAL]: '-neutral',
-				[TILE_COLORS.NEUTRAL_WEAK]: '-neutralWeak',
-				[TILE_COLORS.PRIMARY]: '-primary',
-				[TILE_COLORS.SUCCESS]: '-success',
-				[TILE_COLORS.FAIL]: '-fail',
-				[TILE_COLORS.WARNING]: '-warning',
-				[TILE_COLORS.INFO]: '-info',
+				[TILE_COLORS.NEUTRAL]: '-ds-neutral',
+				[TILE_COLORS.NEUTRAL_WEAK]: '-ds-neutralWeak',
+				[TILE_COLORS.PRIMARY]: '-ds-primary',
+				[TILE_COLORS.SUCCESS]: '-ds-success',
+				[TILE_COLORS.FAIL]: '-ds-fail',
+				[TILE_COLORS.WARNING]: '-ds-warning',
+				[TILE_COLORS.INFO]: '-ds-info',
 			}[this.color];
 		},
 		tileState() {
 			return {
 				[TILE_STATES.DEFAULT]: null,
-				[TILE_STATES.DISABLED]: '-disabled',
-				[TILE_STATES.LOADING]: '-loading',
+				[TILE_STATES.DISABLED]: '-ds-disabled',
+				[TILE_STATES.LOADING]: '-ds-loading',
 			}[this.state];
 		},
 	},

package/lib/js/components/Toggles/CounterToggle/CounterToggle.spec.ts

@@ -20,17 +20,17 @@ describe('CounterToggle', () => {
 	});
 
 	test.each([
-		[{ props: { color: COUNTER_TOGGLE_COLORS.INVERTED }, expectedClass: '-color-inverted' }],
+		[{ props: { color: COUNTER_TOGGLE_COLORS.INVERTED }, expectedClass: '-ds-color-inverted' }],
 		[
 			{
 				props: { color: COUNTER_TOGGLE_COLORS.NEUTRAL_STRONG },
-				expectedClass: '-color-neutralStrong',
+				expectedClass: '-ds-color-neutralStrong',
 			},
 		],
-		[{ props: { color: COUNTER_TOGGLE_COLORS.NEUTRAL }, expectedClass: '-color-neutral' }],
-		[{ props: { color: COUNTER_TOGGLE_COLORS.PRIMARY }, expectedClass: '-color-primary' }],
-		[{ props: { isSelected: true }, expectedClass: '-selected' }],
-		[{ props: { isDisabled: true }, expectedClass: '-disabled' }],
+		[{ props: { color: COUNTER_TOGGLE_COLORS.NEUTRAL }, expectedClass: '-ds-color-neutral' }],
+		[{ props: { color: COUNTER_TOGGLE_COLORS.PRIMARY }, expectedClass: '-ds-color-primary' }],
+		[{ props: { isSelected: true }, expectedClass: '-ds-selected' }],
+		[{ props: { isDisabled: true }, expectedClass: '-ds-disabled' }],
 	])('correct class for props', ({ props, expectedClass }) => {
 		const outlinedCounterToggle = createComponent(props);
 		expect(outlinedCounterToggle.classes()).toContain(expectedClass);
@@ -38,7 +38,7 @@ describe('CounterToggle', () => {
 
 	it('should render icon', () => {
 		const icon = createComponent({ icon: Object.freeze(ICONS.FA_XMARK) });
-		let iconElement = icon.findComponent<typeof CounterToggle>('.counterToggle__icon');
+		let iconElement = icon.findComponent<typeof CounterToggle>('.ds-counterToggle__icon');
 		expect(iconElement.exists()).toBe(true);
 		expect(iconElement.props().icon).toEqual(Object.freeze(ICONS.FA_XMARK));
 	});
@@ -54,7 +54,7 @@ describe('CounterToggle', () => {
 		[{ props: { counter: 'test' }, expectedText: 'test', expectedToExist: true }],
 	])('correct counter', ({ props, expectedText, expectedToExist }) => {
 		const counterToggle = createComponent(props);
-		const counterElement = counterToggle.find('.counterToggle__counter');
+		const counterElement = counterToggle.find('.ds-counterToggle__counter');
 		expect(counterElement.exists()).toBe(expectedToExist);
 		if (expectedToExist) {
 			expect(counterElement.text()).toBe(expectedText);

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

@@ -1,10 +1,10 @@
 <template>
 	<div
-		class="counterToggle"
-		:class="[{ '-selected': isSelected, '-disabled': isDisabled }, colorClass]"
+		class="ds-counterToggle"
+		:class="[{ '-ds-selected': isSelected, '-ds-disabled': isDisabled }, colorClass]"
 	>
-		<icon class="counterToggle__icon" :icon="icon" :size="ICON_SIZES.X_SMALL" />
-		<span v-if="hasCounter" class="counterToggle__counter">{{ counter }}</span>
+		<icon class="ds-counterToggle__icon" :icon="icon" :size="ICON_SIZES.X_SMALL" />
+		<span v-if="hasCounter" class="ds-counterToggle__counter">{{ counter }}</span>
 	</div>
 </template>
 
@@ -143,46 +143,46 @@ $counter-toggle-colors: (
 	background-color: $background;
 
 	&:hover,
-	&.-hovered {
+	&.-ds-hovered {
 		background-color: $background-hover;
 	}
 
 	&:active,
-	&.-active {
+	&.-ds-active {
 		background-color: $background-pressed;
 	}
 
 	&:focus,
-	&.-focused {
+	&.-ds-focused {
 		background-color: $background-focus;
 	}
 }
 
 @mixin setCounterToggleDisabled($disabled-color, $disabled-icon, $disabled-background) {
 	&:disabled,
-	&.-disabled {
+	&.-ds-disabled {
 		background-color: $disabled-background;
 		color: $disabled-color;
 
-		.counterToggle__icon {
+		.ds-counterToggle__icon {
 			color: $disabled-icon;
 		}
 	}
 }
 
 @mixin setCounterToggleAdditions($icon) {
-	.counterToggle {
+	.ds-counterToggle {
 		&__icon {
 			color: $icon;
 		}
 	}
 }
 
-.counterToggle {
+.ds-counterToggle {
 	$self: &;
 
 	@each $color-name, $color-map in $counter-toggle-colors {
-		&.-color-#{$color-name} {
+		&.-ds-color-#{$color-name} {
 			@include setCounterToggleColor(map-get($color-map, 'default', 'color'));
 			@include setCounterToggleBackground(
 				map-get($color-map, 'default', 'background'),
@@ -213,9 +213,9 @@ $counter-toggle-colors: (
 	user-select: none;
 	width: auto;
 
-	&.-selected {
+	&.-ds-selected {
 		@each $color-name, $color-map in $counter-toggle-colors {
-			&.-color-#{$color-name} {
+			&.-ds-color-#{$color-name} {
 				@include setCounterToggleColor(map-get($color-map, 'selected', 'color'));
 				@include setCounterToggleBackground(
 					map-get($color-map, 'selected', 'background'),
@@ -234,7 +234,7 @@ $counter-toggle-colors: (
 	}
 
 	&:disabled,
-	&.-disabled {
+	&.-ds-disabled {
 		pointer-events: none;
 	}
 
@@ -295,7 +295,7 @@ export default {
 	},
 	computed: {
 		colorClass(): string {
-			return `-color-${this.color}`;
+			return `-ds-color-${this.color}`;
 		},
 		hasCounter(): boolean {
 			return this.counter !== null && this.counter !== '' && this.counter !== undefined;