@bethinkpl/design-system 21.0.2 → 22.0.1

package/lib/js/components/Divider/Divider.vue

@@ -1,11 +1,11 @@
 <template>
 	<div
-		class="divider"
+		class="ds-divider"
 		:class="{
-			'-vertical': isVertical,
-			'-horizontal': !isVertical,
-			'-strong': prominence === DIVIDER_PROMINENCES.STRONG,
-			'-weak': prominence === DIVIDER_PROMINENCES.WEAK,
+			'-ds-vertical': isVertical,
+			'-ds-horizontal': !isVertical,
+			'-ds-strong': prominence === DIVIDER_PROMINENCES.STRONG,
+			'-ds-weak': prominence === DIVIDER_PROMINENCES.WEAK,
 			[sizeClass]: true,
 		}"
 	/>
@@ -14,40 +14,40 @@
 <style lang="scss" scoped>
 @import '../../../styles/settings/colors/tokens';
 
-.divider {
+.ds-divider {
 	background-color: $color-neutral-divider;
 
-	&.-strong {
+	&.-ds-strong {
 		background-color: $color-neutral-divider-strong;
 	}
 
-	&.-weak {
+	&.-ds-weak {
 		background-color: $color-neutral-divider-weak;
 	}
 
-	&.-vertical {
+	&.-ds-vertical {
 		height: 100%;
 		width: 1px;
 	}
 
-	&.-horizontal {
+	&.-ds-horizontal {
 		height: 1px;
 		width: auto;
 	}
 
-	&.-medium-vertical {
+	&.-ds-medium-vertical {
 		width: 2px;
 	}
 
-	&.-large-vertical {
+	&.-ds-large-vertical {
 		width: 4px;
 	}
 
-	&.-medium-horizontal {
+	&.-ds-medium-horizontal {
 		height: 2px;
 	}
 
-	&.-large-horizontal {
+	&.-ds-large-horizontal {
 		height: 4px;
 	}
 }
@@ -83,8 +83,8 @@ export default {
 		sizeClass() {
 			return {
 				[DIVIDER_SIZES.S]: '',
-				[DIVIDER_SIZES.M]: '-medium-' + (this.isVertical ? 'vertical' : 'horizontal'),
-				[DIVIDER_SIZES.L]: '-large-' + (this.isVertical ? 'vertical' : 'horizontal'),
+				[DIVIDER_SIZES.M]: '-ds-medium-' + (this.isVertical ? 'vertical' : 'horizontal'),
+				[DIVIDER_SIZES.L]: '-ds-large-' + (this.isVertical ? 'vertical' : 'horizontal'),
 			}[this.size];
 		},
 	},

package/lib/js/components/Drawer/Drawer.vue

@@ -1,25 +1,25 @@
 <template>
-	<div class="drawer scrollable-container" :class="{ [positionClassName]: true }">
-		<div v-if="$slots.header && stickyHeader" class="drawer__header -sticky">
+	<div class="ds-drawer scrollable-container" :class="{ [positionClassName]: true }">
+		<div v-if="$slots.header && stickyHeader" class="ds-drawer__header -ds-sticky">
 			<slot name="header" />
 		</div>
 		<div
-			class="drawer__content"
+			class="ds-drawer__content"
 			:class="{
 				'scrollable-container': stickyHeader || stickyFooter,
-				'-scrollable': stickyHeader || stickyFooter,
-				'-fullHeight': stickyFooter,
+				'-ds-scrollable': stickyHeader || stickyFooter,
+				'-ds-fullHeight': stickyFooter,
 			}"
 		>
-			<div v-if="$slots.header && !stickyHeader" class="drawer__header">
+			<div v-if="$slots.header && !stickyHeader" class="ds-drawer__header">
 				<slot name="header" />
 			</div>
 			<slot />
-			<div v-if="$slots.footer && !stickyFooter" class="drawer__footer">
+			<div v-if="$slots.footer && !stickyFooter" class="ds-drawer__footer">
 				<slot name="footer" />
 			</div>
 		</div>
-		<div v-if="$slots.footer && stickyFooter" class="drawer__footer -sticky">
+		<div v-if="$slots.footer && stickyFooter" class="ds-drawer__footer -ds-sticky">
 			<slot name="footer" />
 		</div>
 	</div>
@@ -29,7 +29,7 @@
 @import '../../../styles/settings/colors/tokens';
 @import '../../../styles/settings/media-queries';
 
-.drawer {
+.ds-drawer {
 	border-color: $color-neutral-border-weak;
 	border-style: solid;
 	border-width: 0;
@@ -39,11 +39,11 @@
 	overflow-y: auto;
 
 	@media #{breakpoint-s()} {
-		&.-positionLeft {
+		&.-ds-positionLeft {
 			border-right-width: 1px;
 		}
 
-		&.-positionRight {
+		&.-ds-positionRight {
 			border-left-width: 1px;
 		}
 	}
@@ -52,18 +52,18 @@
 	&__footer {
 		flex-shrink: 0;
 
-		&.-sticky {
+		&.-ds-sticky {
 			// Display above __content to correctly show shadows in __header and __footer
 			z-index: 1;
 		}
 	}
 
 	&__content {
-		&.-scrollable {
+		&.-ds-scrollable {
 			overflow-y: auto;
 		}
 
-		&.-fullHeight {
+		&.-ds-fullHeight {
 			flex-grow: 1;
 		}
 	}
@@ -97,10 +97,10 @@ export default {
 	computed: {
 		positionClassName(): string {
 			if (this.position === DRAWER_POSITIONS.LEFT) {
-				return '-positionLeft';
+				return '-ds-positionLeft';
 			}
 
-			return '-positionRight';
+			return '-ds-positionRight';
 		},
 	},
 };

package/lib/js/components/Drawer/DrawerContent/DrawerContent.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="drawerContent">
+	<div class="ds-drawerContent">
 		<slot />
 	</div>
 </template>
@@ -7,7 +7,7 @@
 <style lang="scss" scoped>
 @import '../../../../styles/settings/spacings';
 
-.drawerContent {
+.ds-drawerContent {
 	display: flex;
 	flex-direction: column;
 	gap: $space-s;

package/lib/js/components/Drawer/DrawerDivider/DrawerDivider.vue

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

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue

@@ -1,38 +1,38 @@
 <template>
-	<div class="drawerHeader">
-		<div class="drawerHeader__titleWrapper">
+	<div class="ds-drawerHeader">
+		<div class="ds-drawerHeader__titleWrapper">
 			<ds-button
 				v-if="isSecondLevel"
 				:icon-left="ICONS.FA_CHEVRON_LEFT"
 				:type="BUTTON_TYPES.TEXT"
-				class="drawerHeader__secondLevel"
+				class="ds-drawerHeader__secondLevel"
 				@click="$emit('backClicked')"
 			>
 				Wróć
 			</ds-button>
-			<div :class="{ '-hidden': isSecondLevel }" class="drawerHeader__firstLevel">
+			<div :class="{ '-ds-hidden': isSecondLevel }" class="ds-drawerHeader__firstLevel">
 				<span
 					v-if="eyebrowText"
 					:class="{
-						'-isInteractive': isInteractiveEyebrow,
-						'-ellipsis': eyebrowEllipsis,
+						'-ds-isInteractive': isInteractiveEyebrow,
+						'-ds-ellipsis': eyebrowEllipsis,
 					}"
-					class="drawerHeader__eyebrow"
+					class="ds-drawerHeader__eyebrow"
 					@click="isInteractiveEyebrow && $emit('eyebrowClicked')"
 				>
 					{{ eyebrowText }}
 				</span>
-				<div class="drawerHeader__title">
+				<div class="ds-drawerHeader__title">
 					<icon
 						v-if="leftIcon"
 						:icon="leftIcon"
 						:size="ICON_SIZES.X_SMALL"
-						class="drawerHeader__leftIcon"
+						class="ds-drawerHeader__leftIcon"
 					/>
 					<span
 						v-if="title"
-						class="drawerHeader__titleText"
-						:class="{ '-ellipsis': titleEllipsis, [`-${titleColor}`]: true }"
+						class="ds-drawerHeader__titleText"
+						:class="{ '-ds-ellipsis': titleEllipsis, [`-ds-${titleColor}`]: true }"
 						:title="titleEllipsis ? title : undefined"
 						>{{ title }}</span
 					>
@@ -42,7 +42,7 @@
 					</div>
 				</div>
 			</div>
-			<div v-if="$slots.actions" class="drawerHeader__actions">
+			<div v-if="$slots.actions" class="ds-drawerHeader__actions">
 				<slot name="actions" />
 			</div>
 			<icon-button
@@ -64,7 +64,7 @@
 
 $minimal-drawer-header-height: 82px;
 
-.drawerHeader {
+.ds-drawerHeader {
 	display: flex;
 	flex-direction: column;
 
@@ -82,7 +82,7 @@ $minimal-drawer-header-height: 82px;
 		min-width: 0;
 		row-gap: $space-4xs;
 
-		&.-hidden {
+		&.-ds-hidden {
 			visibility: hidden; //by this we make sure that height does not change when switching to second level
 		}
 	}
@@ -92,12 +92,12 @@ $minimal-drawer-header-height: 82px;
 
 		color: $color-neutral-text-weak;
 
-		&.-isInteractive:hover {
+		&.-ds-isInteractive:hover {
 			color: $color-neutral-text-weak-hovered;
 			cursor: pointer;
 		}
 
-		&.-ellipsis {
+		&.-ds-ellipsis {
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -113,15 +113,15 @@ $minimal-drawer-header-height: 82px;
 	&__titleText {
 		@include heading-s-default-bold-uppercase;
 
-		&.-neutralStrong {
+		&.-ds-neutralStrong {
 			color: $color-neutral-text-strong;
 		}
 
-		&.-neutralWeak {
+		&.-ds-neutralWeak {
 			color: $color-neutral-text-weak;
 		}
 
-		&.-ellipsis {
+		&.-ds-ellipsis {
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;

package/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue

@@ -1,13 +1,13 @@
 <template>
-	<div class="drawerListItem">
-		<div class="drawerListItem__label">{{ label }}</div>
+	<div class="ds-drawerListItem">
+		<div class="ds-drawerListItem__label">{{ label }}</div>
 		<ds-icon
 			v-if="state === DRAWER_LIST_ITEM_STATES.LOADING"
 			:icon="ICONS.FAD_SPINNER_THIRD"
 			:size="ICON_SIZES.XX_SMALL"
 			spinning
 		/>
-		<div v-else class="drawerListItem__value">
+		<div v-else class="ds-drawerListItem__value">
 			{{ valueText }}
 		</div>
 	</div>
@@ -18,7 +18,7 @@
 @import '../../../../styles/settings/spacings';
 @import '../../../../styles/settings/typography/tokens';
 
-.drawerListItem {
+.ds-drawerListItem {
 	align-items: center;
 	color: $color-neutral-text-strong;
 	display: flex;
@@ -48,7 +48,7 @@
 import { PropType } from 'vue';
 
 import { DRAWER_LIST_ITEM_STATES, DrawerListItemState } from './DrawerListItem.consts';
-import Icon, { ICONS, ICON_SIZES } from '../../Icons/Icon';
+import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 
 export default {
 	name: 'DrawerListItem',

package/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue

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

package/lib/js/components/Drawer/DrawerSection/DrawerSection.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="drawerSection">
+	<div class="ds-drawerSection">
 		<ds-section-header
 			:icon-left="iconLeft"
 			:icon-left-color="iconLeftColor"

package/lib/js/components/Drawer/DrawerTile/DrawerTile.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="drawerTile">
+	<div class="ds-drawerTile">
 		<ds-tile v-bind="$props" @click="$emit('click')" />
 	</div>
 </template>
@@ -7,7 +7,7 @@
 <style lang="scss" scoped>
 @import '../../../../styles/settings/spacings';
 
-.drawerTile {
+.ds-drawerTile {
 	padding: $space-2xs 0;
 }
 </style>

package/lib/js/components/Dropdown/Dropdown.vue

@@ -13,16 +13,16 @@
 		@show="onShow"
 	>
 		<div
-			class="popper dsDropdown"
+			class="popper ds-dropdown"
 			:class="{
-				'-radiusBottom': radius === DROPDOWN_RADIUSES.BOTTOM,
-				'-radiusTop': radius === DROPDOWN_RADIUSES.TOP,
-				'-radiusBottom -radiusTop': radius === DROPDOWN_RADIUSES.BOTH,
+				'-ds-radiusBottom': radius === DROPDOWN_RADIUSES.BOTTOM,
+				'-ds-radiusTop': radius === DROPDOWN_RADIUSES.TOP,
+				'-ds-radiusBottom -ds-radiusTop': radius === DROPDOWN_RADIUSES.BOTH,
 			}"
 		>
 			<div
-				class="dsDropdown__scrollableWrapper"
-				:class="{ '-heightLimited': !!maxHeight }"
+				class="ds-dropdown__scrollableWrapper"
+				:class="{ '-ds-heightLimited': !!maxHeight }"
 				:style="scrollableWrapperStyles"
 			>
 				<slot :close="close" />
@@ -41,7 +41,7 @@
 @import '../../../../lib/styles/settings/spacings';
 @import '../../../../lib/styles/settings/shadows';
 
-.dsDropdown {
+.ds-dropdown {
 	background-color: $color-default-background;
 	border: 0;
 	border-radius: 0;
@@ -52,12 +52,12 @@
 	padding: 0;
 	text-align: left;
 
-	&.-radiusBottom {
+	&.-ds-radiusBottom {
 		border-bottom-left-radius: $radius-s;
 		border-bottom-right-radius: $radius-s;
 	}
 
-	&.-radiusTop {
+	&.-ds-radiusTop {
 		border-top-left-radius: $radius-s;
 		border-top-right-radius: $radius-s;
 	}
@@ -71,7 +71,7 @@
 	}
 
 	&__scrollableWrapper {
-		&.-heightLimited {
+		&.-ds-heightLimited {
 			overflow-y: auto;
 		}
 	}

package/lib/js/components/Form/SelectionControl/SelectionControl.vue

@@ -1,26 +1,26 @@
 <template>
 	<label
-		class="selectionControl"
+		class="ds-selectionControl"
 		:class="[
-			`-${size}`,
+			`-ds-${size}`,
 			{
-				'-selected': isSelected,
-				'-default': state === SELECTION_CONTROL_STATE.DEFAULT,
-				'-disabled': state === SELECTION_CONTROL_STATE.DISABLED,
-				'-loading': state === SELECTION_CONTROL_STATE.LOADING,
-				'-focused': isFocused,
+				'-ds-selected': isSelected,
+				'-ds-default': state === SELECTION_CONTROL_STATE.DEFAULT,
+				'-ds-disabled': state === SELECTION_CONTROL_STATE.DISABLED,
+				'-ds-loading': state === SELECTION_CONTROL_STATE.LOADING,
+				'-ds-focused': isFocused,
 			},
 		]"
 	>
-		<span class="selectionControl__iconWrapper">
-			<icon :icon="icon" :size="iconSize" class="selectionControl__icon" />
+		<span class="ds-selectionControl__iconWrapper">
+			<icon :icon="icon" :size="iconSize" class="ds-selectionControl__icon" />
 		</span>
-		<span v-if="label" class="selectionControl__labelWrapper">
-			<span class="selectionControl__label">{{ label }}</span>
+		<span v-if="label" class="ds-selectionControl__labelWrapper">
+			<span class="ds-selectionControl__label">{{ label }}</span>
 		</span>
 		<input
 			:type="type === SELECTION_CONTROL_TYPE.CHECKBOX ? 'checkbox' : 'radio'"
-			class="selectionControl__checkbox"
+			class="ds-selectionControl__checkbox"
 			:value="isSelected"
 			@change="onToggle"
 			@focus="onFocus"
@@ -56,11 +56,11 @@ $selection-control-sizes: (
 	),
 );
 
-.selectionControl {
+.ds-selectionControl {
 	$root: &;
 
 	@each $size, $map in $selection-control-sizes {
-		&.-#{$size} {
+		&.-ds-#{$size} {
 			column-gap: map-get($map, 'gap');
 
 			#{$root}__iconWrapper {
@@ -77,9 +77,9 @@ $selection-control-sizes: (
 	display: inline-flex;
 	position: relative;
 
-	&.-default {
+	&.-ds-default {
 		@each $size, $map in $selection-control-sizes {
-			&.-#{$size} {
+			&.-ds-#{$size} {
 				#{$root}__icon::before {
 					bottom: -#{map-get($map, 'iconOutlinePadding')};
 					left: -#{map-get($map, 'iconOutlinePadding')};
@@ -103,7 +103,7 @@ $selection-control-sizes: (
 		&:hover,
 		&:focus,
 		&:active,
-		&.-focused {
+		&.-ds-focused {
 			#{$root}__icon::before {
 				transform: scale(1);
 				// see https://cubic-bezier.com/#.23,1,.32,1
@@ -116,7 +116,7 @@ $selection-control-sizes: (
 				background-color: $color-neutral-background-ghost-hovered;
 			}
 
-			&.-selected {
+			&.-ds-selected {
 				#{$root}__icon::before {
 					background-color: $color-primary-background-ghost-hovered;
 				}
@@ -124,12 +124,12 @@ $selection-control-sizes: (
 		}
 
 		&:focus,
-		&.-focused {
+		&.-ds-focused {
 			#{$root}__icon::before {
 				background-color: $color-neutral-background-ghost-focused;
 			}
 
-			&.-selected {
+			&.-ds-selected {
 				#{$root}__icon::before {
 					background-color: $color-primary-background-ghost-focused;
 				}
@@ -141,7 +141,7 @@ $selection-control-sizes: (
 				background-color: $color-neutral-background-ghost-pressed;
 			}
 
-			&.-selected {
+			&.-ds-selected {
 				#{$root}__icon::before {
 					background-color: $color-primary-background-ghost-pressed;
 				}
@@ -167,7 +167,7 @@ $selection-control-sizes: (
 		position: relative;
 	}
 
-	&.-selected {
+	&.-ds-selected {
 		#{$root}__label {
 			color: $color-neutral-text-heavy;
 		}
@@ -177,25 +177,25 @@ $selection-control-sizes: (
 		}
 	}
 
-	&.-x-small {
+	&.-ds-x-small {
 		#{$root}__label {
 			@include formLabel-s-default-regular;
 		}
 	}
 
-	&.-small {
+	&.-ds-small {
 		#{$root}__label {
 			@include formLabel-m-default-regular;
 		}
 	}
 
-	&.-medium {
+	&.-ds-medium {
 		#{$root}__label {
 			@include formLabel-l-default-regular;
 		}
 	}
 
-	&.-disabled {
+	&.-ds-disabled {
 		#{$root}__label {
 			color: $color-neutral-text-heavy-disabled;
 		}
@@ -204,7 +204,7 @@ $selection-control-sizes: (
 			color: $color-neutral-icon-disabled;
 		}
 
-		&.-selected {
+		&.-ds-selected {
 			#{$root}__label {
 				color: $color-neutral-text-heavy-disabled;
 			}