npm - @bethinkpl/design-system - Versions diffs - 26.2.0 → 26.2.1 - Mend

@bethinkpl/design-system 26.2.0 → 26.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/docs/assets/{preview-Uql0YBlW.js → preview-DrpGEWHQ.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-2RWLQUnC.js","./iframe-TMx3aCBI.js","./_commonjsHelpers-Chg3vePA.js","./index-vG0co4wr.js"])))=>i.map(i=>d[i]);
-import{_ as s}from"./iframe-TMx3aCBI.js";import"../sb-preview/runtime.js";const{global:_}=__STORYBOOK_MODULE_GLOBAL__;var o,i=Object.entries((o=_.TAGS_OPTIONS)!=null?o:{}).reduce((e,r)=>{let[t,a]=r;return a.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await s(()=>import("./DocsRenderer-CFRXHY34-2RWLQUnC.js").then(r=>r.am),__vite__mapDeps([0,1,2,3]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>i[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-ue2fqW_7.js","./iframe-pILTL9EM.js","./_commonjsHelpers-Chg3vePA.js","./index-vG0co4wr.js"])))=>i.map(i=>d[i]);
+import{_ as s}from"./iframe-pILTL9EM.js";import"../sb-preview/runtime.js";const{global:_}=__STORYBOOK_MODULE_GLOBAL__;var o,i=Object.entries((o=_.TAGS_OPTIONS)!=null?o:{}).reduce((e,r)=>{let[t,a]=r;return a.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await s(()=>import("./DocsRenderer-CFRXHY34-ue2fqW_7.js").then(r=>r.am),__vite__mapDeps([0,1,2,3]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>i[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};

package/docs/iframe.html CHANGED Viewed

@@ -510,7 +510,7 @@
 </script>
 <link rel="stylesheet" href="./preview.css">
-    <script type="module" crossorigin src="./assets/iframe-TMx3aCBI.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-pILTL9EM.js"></script>
   </head>
   <body>

package/docs/preview.css CHANGED Viewed

@@ -218,7 +218,7 @@ table {
 }
 /* latin-ext */
 @font-face {
-  font-family: "Lato";
+  font-family: Lato;
   font-style: normal;
   font-weight: 300;
   src: url(~design-system/lib/fonts/lato/lato-ext-300.woff2) format("woff2");
@@ -226,7 +226,7 @@ table {
 }
 /* latin */
 @font-face {
-  font-family: "Lato";
+  font-family: Lato;
   font-style: normal;
   font-weight: 300;
   src: url(~design-system/lib/fonts/lato/lato-latin-300.woff2) format("woff2");
@@ -234,7 +234,7 @@ table {
 }
 /* latin-ext */
 @font-face {
-  font-family: "Lato";
+  font-family: Lato;
   font-style: normal;
   font-weight: 400;
   src: url(~design-system/lib/fonts/lato/lato-ext.woff2) format("woff2");
@@ -242,7 +242,7 @@ table {
 }
 /* latin */
 @font-face {
-  font-family: "Lato";
+  font-family: Lato;
   font-style: normal;
   font-weight: 400;
   src: url(~design-system/lib/fonts/lato/lato-latin.woff2) format("woff2");
@@ -250,7 +250,7 @@ table {
 }
 /* latin-ext */
 @font-face {
-  font-family: "Lato";
+  font-family: Lato;
   font-style: normal;
   font-weight: 700;
   src: url(~design-system/lib/fonts/lato/lato-ext-700.woff2) format("woff2");
@@ -258,7 +258,7 @@ table {
 }
 /* latin */
 @font-face {
-  font-family: "Lato";
+  font-family: Lato;
   font-style: normal;
   font-weight: 700;
   src: url(~design-system/lib/fonts/lato/lato-latin-700.woff2) format("woff2");

package/docs/project.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"generatedAt":~~1730823378271~~,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@types/jest":"29.5.13","@vue/vue3-jest":"29.2.2","jest":"29.7.0","jest-environment-jsdom":"29.7.0","ts-jest":"29.0.5"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":2,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}
1	+ {"generatedAt":1731507519329,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@types/jest":"29.5.13","@vue/vue3-jest":"29.2.2","jest":"29.7.0","jest-environment-jsdom":"29.7.0","ts-jest":"29.0.5"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":2,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}

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

@@ -1,65 +1,70 @@
 <template>
-	<div class="ds-banner" :class="[colorClass, layoutClass]">
-		<div class="ds-banner__content">
-			<div class="ds-banner__header">
-				<div
-					v-if="icon"
-					class="ds-banner__iconContainer"
-					: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" />
-				</div>
-				<div class="ds-banner__textWrapper">
-					<div class="ds-banner__titleWrapper">
-						<div class="ds-banner__title" v-text="title" />
-						<div v-if="$slots.defaultText" class="ds-banner__defaultText">
-							<slot name="defaultText" />
-						</div>
+	<div class="ds-banner">
+		<div class="ds-banner__inner" :class="[colorClass, layoutClass]">
+			<div class="ds-banner__content">
+				<div class="ds-banner__header">
+					<div
+						v-if="icon"
+						class="ds-banner__iconContainer"
+						: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" />
 					</div>
-					<div class="ds-banner__rightWrapper">
-						<div v-if="buttonText" class="ds-banner__buttonWrapper">
-							<ds-button
-								class="ds-banner__ctaButton"
-								:color="BUTTON_COLORS.NEUTRAL"
-								:type="BUTTON_TYPES.OUTLINED"
-								:size="BUTTON_SIZES.SMALL"
-								@click="$emit('button-clicked')"
-								>{{ buttonText }}
-							</ds-button>
+					<div class="ds-banner__textWrapper">
+						<div class="ds-banner__titleWrapper">
+							<div class="ds-banner__title" v-text="title" />
+							<div v-if="$slots.defaultText" class="ds-banner__defaultText">
+								<slot name="defaultText" />
+							</div>
 						</div>
-						<div v-if="$slots.rightSlot" class="ds-banner__rightSlot">
-							<slot name="rightSlot" />
+						<div class="ds-banner__rightWrapper">
+							<div v-if="buttonText" class="ds-banner__buttonWrapper">
+								<ds-button
+									class="ds-banner__ctaButton"
+									:color="BUTTON_COLORS.NEUTRAL"
+									:type="BUTTON_TYPES.OUTLINED"
+									:size="BUTTON_SIZES.SMALL"
+									@click="$emit('button-clicked')"
+									>{{ buttonText }}
+								</ds-button>
+							</div>
+							<div v-if="$slots.rightSlot" class="ds-banner__rightSlot">
+								<slot name="rightSlot" />
+							</div>
 						</div>
 					</div>
 				</div>
+				<div v-if="$slots.expandedText" class="ds-banner__expander">
+					<ds-icon-button
+						:size="ICON_BUTTON_SIZES.SMALL"
+						:icon="isExpandedInternal ? ICONS.FA_CHEVRON_UP : ICONS.FA_CHEVRON_DOWN"
+						:color="ICON_BUTTON_COLORS.NEUTRAL"
+						:radius="BUTTON_RADIUSES.CAPSULE"
+						:touchable="false"
+						@click="toggleExpandedText"
+					/>
+				</div>
+				<div v-if="!$slots.expandedText && closable" class="ds-banner__close">
+					<ds-icon-button
+						:size="ICON_BUTTON_SIZES.SMALL"
+						:icon="ICONS.FA_XMARK"
+						:color="ICON_BUTTON_COLORS.NEUTRAL"
+						:radius="BUTTON_RADIUSES.CAPSULE"
+						:touchable="false"
+						@click="$emit('close')"
+					/>
+				</div>
 			</div>
-			<div v-if="$slots.expandedText" class="ds-banner__expander">
-				<ds-icon-button
-					:size="ICON_BUTTON_SIZES.SMALL"
-					:icon="isExpandedInternal ? ICONS.FA_CHEVRON_UP : ICONS.FA_CHEVRON_DOWN"
-					:color="ICON_BUTTON_COLORS.NEUTRAL"
-					:radius="BUTTON_RADIUSES.CAPSULE"
-					:touchable="false"
-					@click="toggleExpandedText"
-				/>
-			</div>
-			<div v-if="!$slots.expandedText && closable" class="ds-banner__close">
-				<ds-icon-button
-					:size="ICON_BUTTON_SIZES.SMALL"
-					:icon="ICONS.FA_XMARK"
-					:color="ICON_BUTTON_COLORS.NEUTRAL"
-					:radius="BUTTON_RADIUSES.CAPSULE"
-					:touchable="false"
-					@click="$emit('close')"
-				/>
-			</div>
-		</div>
-		<div v-if="$slots.expandedText && isExpandedInternal" class="ds-banner__expandedContainer">
-			<ds-divider :prominence="DIVIDER_PROMINENCES.STRONG" />
-			<div class="ds-banner__expandedText">
-				<slot name="expandedText" />
+			<div
+				v-if="$slots.expandedText && isExpandedInternal"
+				class="ds-banner__expandedContainer"
+			>
+				<ds-divider :prominence="DIVIDER_PROMINENCES.STRONG" />
+				<div class="ds-banner__expandedText">
+					<slot name="expandedText" />
+				</div>
 			</div>
 		</div>
 	</div>
@@ -75,79 +80,83 @@
 .ds-banner {
 	$self: &;
-	border-radius: $radius-m;
-	border-style: solid;
-	border-width: 1px;
-	display: flex;
-	flex-direction: column;
-	padding: $space-xs;
-	@media #{breakpoint-s()} {
-		&.-ds-horizontal {
-			#{$self}__iconContainer {
-				padding: $space-2xs 0;
-			}
+	container-type: inline-size;
-			#{$self}__header {
-				padding: 0 $space-2xs;
-			}
+	&__inner {
+		border-radius: $radius-m;
+		border-style: solid;
+		border-width: 1px;
+		display: flex;
+		flex-direction: column;
+		padding: $space-xs;
-			#{$self}__expander {
-				padding: $space-xs $space-4xs $space-xs 0;
-			}
+		@container (width > 500px) {
+			&.-ds-horizontal {
+				#{$self}__iconContainer {
+					padding: $space-2xs 0;
+				}
-			#{$self}__textWrapper {
-				flex-direction: row;
-			}
+				#{$self}__header {
+					padding: 0 $space-2xs;
+				}
-			#{$self}__rightWrapper {
-				padding: $space-5xs 0 $space-5xs $space-s;
-			}
+				#{$self}__expander {
+					padding: $space-xs $space-4xs $space-xs 0;
+				}
-			#{$self}__buttonWrapper {
-				padding: $space-xs 0;
-			}
+				#{$self}__textWrapper {
+					flex-direction: row;
+				}
+				#{$self}__rightWrapper {
+					padding: $space-5xs 0 $space-5xs $space-s;
+				}
-			#{$self}__rightSlot {
-				flex-grow: initial;
-				padding: $space-xs 0 $space-xs 0;
+				#{$self}__buttonWrapper {
+					padding: $space-xs 0;
+				}
+				#{$self}__rightSlot {
+					flex-grow: initial;
+					padding: $space-xs 0 $space-xs 0;
+				}
 			}
 		}
-	}
-	&.-ds-warning {
-		background-color: $color-warning-background;
-		border-color: $color-warning-border-weak;
-	}
+		&.-ds-warning {
+			background-color: $color-warning-background;
+			border-color: $color-warning-border-weak;
+		}
-	&.-ds-success {
-		background-color: $color-success-background;
-		border-color: $color-success-border-weak;
-	}
+		&.-ds-success {
+			background-color: $color-success-background;
+			border-color: $color-success-border-weak;
+		}
-	&.-ds-info {
-		background-color: $color-info-background;
-		border-color: $color-info-border-weak;
-	}
+		&.-ds-info {
+			background-color: $color-info-background;
+			border-color: $color-info-border-weak;
+		}
-	&.-ds-fail {
-		background-color: $color-fail-background;
-		border-color: $color-fail-border-weak;
-	}
+		&.-ds-fail {
+			background-color: $color-fail-background;
+			border-color: $color-fail-border-weak;
+		}
-	&.-ds-neutral {
-		background-color: $color-neutral-background;
-		border-color: $color-neutral-border-weak;
-	}
+		&.-ds-neutral {
+			background-color: $color-neutral-background;
+			border-color: $color-neutral-border-weak;
+		}
-	&.-ds-default {
-		background-color: $color-default-background;
-		border-color: $color-neutral-border-weak;
-	}
+		&.-ds-default {
+			background-color: $color-default-background;
+			border-color: $color-neutral-border-weak;
+		}
-	&.-ds-danger {
-		background-color: $color-danger-background;
-		border-color: $color-danger-border-weak;
+		&.-ds-danger {
+			background-color: $color-danger-background;
+			border-color: $color-danger-border-weak;
+		}
 	}
 	&__content {

package/lib/js/components/Buttons/IconButton/IconButton.vue CHANGED Viewed

@@ -67,11 +67,11 @@
 @import '../../../../styles/settings/typography/tokens';
 @mixin setIconButtonAdditions($border: null, $icon: null) {
-	@if $border != null {
+	@if $border {
 		border: 1px solid $border;
 	}
-	@if $icon != null {
+	@if $icon {
 		.ds-iconButton {
 			&__icon,
 			&__loadingIcon {

package/lib/js/components/DatePickers/DatePicker/DatePicker.vue CHANGED Viewed

@@ -260,13 +260,13 @@ export default defineComponent({
 	},
 	computed: {
 		eyebrowText() {
-			if (!this.date || this.state === DATE_PICKER_STATES.LOADING) {
+			if (!this.date) {
 				return '';
 			}
 			return capitalizeFirstLetter(localWeekdayName(this.date));
 		},
 		text() {
-			if (this.state === DATE_PICKER_STATES.LOADING || !this.date) {
+			if (!this.date) {
 				return this.placeholder;
 			}
 			return localFullDateWithShortMonthName(this.date);

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

@@ -69,7 +69,7 @@ $minimal-drawer-header-height: 82px;
 	flex-direction: column;
 	&__secondLevel {
-		position: absolute !important; //it is required so firstLevel content does not make component wider when hidden, and important is needed so component does not change its width when button was clicked
+		position: absolute !important; // it is required so firstLevel content does not make component wider when hidden, and important is needed so component does not change its width when button was clicked
 	}
 	&__leftIcon {
@@ -83,7 +83,7 @@ $minimal-drawer-header-height: 82px;
 		row-gap: $space-4xs;
 		&.-ds-hidden {
-			visibility: hidden; //by this we make sure that height does not change when switching to second level
+			visibility: hidden; // by this we make sure that height does not change when switching to second level
 		}
 	}

package/lib/js/components/Outline/OutlineItem/OutlineItem.vue CHANGED Viewed

@@ -112,7 +112,7 @@
 	}
 	&__text {
-		@include label-l-default-regular; //it fixes whole component height
+		@include label-l-default-regular; // it fixes whole component height
 		// To hide scrollbar in case Chrome renders __label higher than line-height - there are some problems with fraction of a pixel on Retina screens
 		// https://bethinkteam.slack.com/archives/C012R8RM3A4/p1727776466931369?thread_ts=1727775029.076259&cid=C012R8RM3A4

package/lib/js/components/PopOver/PopOver.vue CHANGED Viewed

@@ -69,10 +69,11 @@
 	flex-direction: column;
 	padding: 0;
-	/* stylelint-disable-next-line selector-class-pattern */
+	/* stylelint-disable selector-class-pattern */
 	&.-ds-color-neutral :deep(.popper__arrow) {
 		border-color: $color-neutral-background transparent !important;
 	}
+	/* stylelint-enable selector-class-pattern */
 	&.-ds-color-neutral {
 		background-color: $color-neutral-background;

package/lib/js/components/ProgressBar/ProgressBar.vue CHANGED Viewed

@@ -67,7 +67,6 @@
 <style scoped lang="scss">
 @use 'sass:math';
 @import '../../../styles/settings/spacings';
 @import '../../../styles/settings/media-queries';
 @import '../../../styles/settings/colors/tokens';

package/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue CHANGED Viewed

@@ -124,8 +124,8 @@ $progress-donut-chart-range-colors: (
 		transform: rotate(90deg);
 		transform-origin: 50% 50%;
 		// Disabled for v3.0
-		//stroke-linecap: round;
-		//stroke-linejoin: round;
+		// stroke-linecap: round;
+		// stroke-linejoin: round;
 		transition: all $default-transition-time ease-out;
 	}

package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue CHANGED Viewed

@@ -20,6 +20,7 @@
 		:is-selected="isSelected"
 		class="ds-basicRichListItem"
 		:class="{
+			'-ds-loading': state === RICH_LIST_ITEM_STATE.LOADING,
 			'-ds-small': size === RICH_LIST_ITEM_SIZE.SMALL,
 		}"
 		@mouseover="hovered = true"
@@ -77,6 +78,12 @@
 			padding: $space-2xs 0;
 		}
 	}
+	&.-ds-loading {
+		#{$root}__content {
+			flex: 1;
+		}
+	}
 }
 </style>
@@ -249,6 +256,7 @@ export default defineComponent({
 		return {
 			hovered: false,
 			RICH_LIST_ITEM_SIZE: Object.freeze(RICH_LIST_ITEM_SIZE),
+			RICH_LIST_ITEM_STATE: Object.freeze(RICH_LIST_ITEM_STATE),
 		};
 	},
 	computed: {
@@ -261,12 +269,12 @@ export default defineComponent({
 			return map[this.size];
 		},
 		textGroupState(): TextGroupState {
-			if (this.hovered && this.isInteractive) {
-				return TEXT_GROUP_STATES.HOVERED;
-			}
 			if (this.state === RICH_LIST_ITEM_STATE.LOADING) {
 				return TEXT_GROUP_STATES.LOADING;
 			}
+			if (this.hovered && this.isInteractive) {
+				return TEXT_GROUP_STATES.HOVERED;
+			}
 			return TEXT_GROUP_STATES.DEFAULT;
 		},
 	},

package/lib/styles/components/_buttons.scss CHANGED Viewed

@@ -32,7 +32,7 @@
 	$background-focus,
 	$background-disabled
 ) {
-	@if $background == null {
+	@if not $background {
 		background-color: transparent;
 	}
@@ -81,7 +81,7 @@
 	$icon-focused: null,
 	$icon-disabled: null
 ) {
-	@if $border != null {
+	@if $border {
 		border: 1px solid $border;
 	}

package/lib/styles/settings/_fonts.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 /* latin-ext */
 @font-face {
-	font-family: 'Lato';
+	font-family: Lato;
 	font-style: normal;
 	font-weight: 300;
 	src: url(~design-system/lib/fonts/lato/lato-ext-300.woff2) format('woff2');
@@ -10,7 +10,7 @@
 /* latin */
 @font-face {
-	font-family: 'Lato';
+	font-family: Lato;
 	font-style: normal;
 	font-weight: 300;
 	src: url(~design-system/lib/fonts/lato/lato-latin-300.woff2) format('woff2');
@@ -20,7 +20,7 @@
 /* latin-ext */
 @font-face {
-	font-family: 'Lato';
+	font-family: Lato;
 	font-style: normal;
 	font-weight: 400;
 	src: url(~design-system/lib/fonts/lato/lato-ext.woff2) format('woff2');
@@ -30,7 +30,7 @@
 /* latin */
 @font-face {
-	font-family: 'Lato';
+	font-family: Lato;
 	font-style: normal;
 	font-weight: 400;
 	src: url(~design-system/lib/fonts/lato/lato-latin.woff2) format('woff2');
@@ -40,7 +40,7 @@
 /* latin-ext */
 @font-face {
-	font-family: 'Lato';
+	font-family: Lato;
 	font-style: normal;
 	font-weight: 700;
 	src: url(~design-system/lib/fonts/lato/lato-ext-700.woff2) format('woff2');
@@ -50,7 +50,7 @@
 /* latin */
 @font-face {
-	font-family: 'Lato';
+	font-family: Lato;
 	font-style: normal;
 	font-weight: 700;
 	src: url(~design-system/lib/fonts/lato/lato-latin-700.woff2) format('woff2');

package/lib/styles/settings/_radiuses.scss CHANGED Viewed

@@ -2,5 +2,5 @@ $radius-xs: 2px;
 $radius-s: 4px;
 $radius-m: 6px;
 $radius-l: 8px;
-//Special radius for components which have to be always rounded
+// Special radius for components which have to be always rounded
 $radius-xl: 200px;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "26.2.0",
+  "version": "26.2.1",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -69,14 +69,15 @@
     "jsdom": "^19.0.0",
     "jsdom-global": "^3.0.2",
     "postcss": "^8.4.47",
+    "postcss-html": "^1.7.0",
     "postcss-prefix-selector": "^1.9.0",
     "prettier": "2.7.1",
     "sass": "^1.28.0",
     "storybook": "^8.3.4",
-    "stylelint": "13.8.0",
-    "stylelint-config-standard": "20.0.0",
+    "stylelint": "14.12.0",
+    "stylelint-config-standard-scss": "6.1.0",
+    "stylelint-config-standard-vue": "1.0.0",
     "stylelint-order": "6.0.3",
-    "stylelint-scss": "3.18.0",
     "ts-jest": "29.0.5",
     "ts-node": "^10.9.1",
     "typescript": "4.6.4",

package/stylelint.config.cjs CHANGED Viewed

@@ -1,10 +1,14 @@
 module.exports = {
-	extends: 'stylelint-config-standard',
-	plugins: ['stylelint-order', 'stylelint-scss'],
+	"extends": [
+		'stylelint-config-standard-scss',
+		'stylelint-config-standard-vue/scss'
+	],
+	plugins: ['stylelint-order'],
 	rules: {
 		// Support SCSS imports
 		'at-rule-no-unknown': null,
 		'scss/at-rule-no-unknown': true,
+		'string-quotes': 'single',
 		'order/order': [
 			[
@@ -24,12 +28,14 @@ module.exports = {
 					type: 'at-rule',
 					name: 'media',
 				},
+				{
+					type: 'at-rule',
+					name: 'container',
+				},
 				'rules',
 			],
 		],
 		indentation: 'tab',
-		'value-list-comma-newline-after': null,
-		'declaration-colon-newline-after': null,
 		'selector-pseudo-class-no-unknown': [
 			true,
 			{
@@ -44,6 +50,28 @@ module.exports = {
 		],
 		'order/properties-alphabetical-order': true,
 		'selector-class-pattern': '-?ds-[a-z][a-zA-Z_]*',
+		// Disable recommended rules, consider enabling them when you have time
+		'alpha-value-notation': null,
+		'color-function-notation': null,
+		'declaration-block-no-redundant-longhand-properties': null,
+		'declaration-colon-newline-after': null,
+		'function-url-quotes': null,
+		'keyframes-name-pattern': null,
+		'max-line-length': null,
+		'property-no-vendor-prefix': null,
+		'rule-empty-line-before': null,
+		'scss/at-extend-no-missing-placeholder': null,
+		'scss/at-mixin-pattern': null,
+		'scss/at-mixin-argumentless-call-parentheses': null,
+		'scss/dollar-variable-empty-line-before': null,
+		'scss/dollar-variable-pattern': null,
+		'scss/double-slash-comment-empty-line-before': null,
+		'scss/no-global-function-names': null,
+		'selector-not-notation': null,
+		'value-list-comma-newline-after': null,
+		'value-no-vendor-prefix': null,
 	},
 	ignoreFiles: ['lib/styles/settings/typography/_tokens.scss'],
 };