@bethinkpl/design-system 15.0.3 → 15.1.2

package/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue

@@ -19,9 +19,9 @@
 	@include formText-s-default-regular;
 
 	border: 1px solid $color-neutral-border-weak;
-	box-sizing: border-box;
-	box-shadow: inset 0 1px 3px var(--raw-gray-400);
 	border-radius: $radius-s;
+	box-shadow: inset 0 1px 3px var(--raw-gray-400);
+	box-sizing: border-box;
 	min-height: 2em;
 	padding: $space-xxs;
 	resize: none;

package/lib/js/components/SurveyToggle/SurveyToggle.vue

@@ -186,10 +186,10 @@ $survey-toggle-colors: (
 	&__ring {
 		// TODO: IT-4131 mixin
 		align-items: center;
-		display: flex;
-		justify-content: center;
 		border: 3px solid $color-neutral-border;
 		border-radius: 100%;
+		display: flex;
+		justify-content: center;
 		transition: border-color ease-in-out $default-transition-time;
 		width: 100%;
 	}
@@ -205,18 +205,18 @@ $survey-toggle-colors: (
 	}
 
 	&__icon {
-		display: flex;
 		color: $color-inverted-icon;
+		display: flex;
 	}
 
 	&__label {
 		@include label-xs-default-bold;
 
 		color: $color-neutral-text;
-		text-align: center;
 		margin-top: $space-xxs;
-		min-height: 2em;
 		max-width: 100%;
+		min-height: 2em;
+		text-align: center;
 
 		@media #{breakpoint-s()} {
 			@include label-s-default-regular;

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

@@ -171,8 +171,8 @@ $counter-toggle-colors: (
 @mixin setCounterToggleDisabled($disabled-color, $disabled-icon, $disabled-background) {
 	&:disabled,
 	&.-disabled {
-		color: $disabled-color;
 		background-color: $disabled-background;
+		color: $disabled-color;
 
 		.counterToggle__icon {
 			color: $disabled-icon;
@@ -222,13 +222,13 @@ $counter-toggle-colors: (
 	border-radius: $radius-s;
 	cursor: pointer;
 	display: inline-flex;
-	width: auto;
 	justify-content: center;
 	padding: $space-xxs;
 	position: relative;
 	transition: color ease-in-out $default-transition-time,
 		background-color ease-in-out $default-transition-time;
 	user-select: none;
+	width: auto;
 
 	&.-selected {
 		@each $color-name, $color-map in $counter-toggle-colors {

package/lib/js/index.ts

@@ -56,6 +56,8 @@ export { default as Dropdown } from './components/Dropdown';
 export * from './components/Dropdown/Dropdown.consts';
 export { default as ProgressBar } from './components/ProgressBar';
 export * from './components/ProgressBar/ProgressBar.consts';
+export { default as ProgressDonutChart } from './components/ProgressDonutChart';
+export * from './components/ProgressDonutChart/ProgressDonutChart.consts';
 export { default as IconText } from './components/IconText';
 export * from './components/IconText/IconText.consts';
 export { default as Pagination } from './components/Pagination';

package/lib/js/styles/ItemsList.vue

@@ -42,8 +42,8 @@
 	}
 
 	&__category {
-		font-weight: var(--typography-font-weight-bold);
 		font-size: var(--typography-font-size-2xl);
+		font-weight: var(--typography-font-weight-bold);
 		line-height: var(--typography-line-height-3xl);
 	}
 

package/lib/styles/components/_buttons.scss

@@ -64,9 +64,9 @@
 ) {
 	&:disabled,
 	&.-disabled {
+		background-color: $disabled-background;
 		border-color: $disabled-border;
 		color: $disabled-color;
-		background-color: $disabled-background;
 
 		.a-button__icon {
 			color: $disabled-icon;
@@ -174,8 +174,8 @@ $button-disabled-alpha: 0.6;
 	border-radius: 100px;
 	cursor: pointer;
 	display: inline-flex;
-	min-height: $button-medium-min-height;
 	justify-content: center;
+	min-height: $button-medium-min-height;
 	outline: none;
 	padding: $space-xxxxs $space-s;
 	position: relative;

package/lib/styles/components/_items-list-item.scss

@@ -40,8 +40,8 @@
 
 	&__attributes {
 		color: var(--color-neutral-data-medium);
-		font-style: var(--typography-font-style-italic);
 		font-size: var(--typography-font-size-xs);
+		font-style: var(--typography-font-style-italic);
 		line-height: var(--typography-line-height-s);
 		width: 25%;
 

package/lib/styles/components/_links.scss

@@ -1,8 +1,8 @@
 @import '../settings/colors/tokens';
 
 .a-link {
-	cursor: pointer;
 	color: $color-primary-text;
+	cursor: pointer;
 
 	&:hover {
 		color: $color-primary-text;
@@ -10,8 +10,8 @@
 }
 
 .a-linkInText {
-	cursor: pointer;
 	color: inherit;
+	cursor: pointer;
 	text-decoration: underline;
 
 	&:hover {

package/lib/styles/mixins/_layout.scss

@@ -1,5 +1,5 @@
 @mixin centeredSpread() {
-	display: flex;
 	align-items: center;
+	display: flex;
 	justify-content: space-between;
 }

package/lib/styles/mixins/_scrollbars.scss

@@ -1,7 +1,7 @@
 @mixin scrollbar($size, $foreground-color, $background-color: white) {
 	::-webkit-scrollbar {
-		width: $size;
 		height: $size;
+		width: $size;
 	}
 
 	::-webkit-scrollbar-thumb {
@@ -15,8 +15,8 @@
 
 @mixin scrollbar-on-self($size, $foreground-color, $background-color: white) {
 	&::-webkit-scrollbar {
-		width: $size;
 		height: $size;
+		width: $size;
 	}
 
 	&::-webkit-scrollbar-thumb {

package/lib/styles/storybook.scss

@@ -14,9 +14,9 @@ $fontFamily: 'BlinkMacSystemFont', -apple-system, 'Segoe UI', 'Roboto', 'Oxygen'
 
 html,
 body {
-	-webkit-text-size-adjust: 100%;
-	-webkit-font-smoothing: antialiased;
 	font-family: 'Lato', sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-webkit-text-size-adjust: 100%;
 
 	&.styleguide {
 		@include text-l-default-regular;
@@ -47,8 +47,8 @@ html {
 
 .sbIconList {
 	display: flex;
-	font-size: 10px;
 	flex-wrap: wrap;
+	font-size: 10px;
 
 	&__icon {
 		align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "15.0.3",
+  "version": "15.1.2",
   "description": "Bethink universe design-system",
   "repository": "git@github.com:bethinkpl/design-system.git",
   "author": "nerdy@bethink.pl",
@@ -32,10 +32,10 @@
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.1.1",
+    "@fortawesome/pro-duotone-svg-icons": "6.1.1",
     "@fortawesome/pro-light-svg-icons": "6.1.1",
     "@fortawesome/pro-regular-svg-icons": "6.1.1",
     "@fortawesome/pro-solid-svg-icons": "6.1.1",
-    "@fortawesome/pro-duotone-svg-icons": "6.1.1",
     "@fortawesome/vue-fontawesome": "2.0.6",
     "@storybook/addon-actions": "6.5.13",
     "@storybook/addon-controls": "^6.5.13",
@@ -68,7 +68,7 @@
     "storybook-addon-designs": "^6.3.1",
     "stylelint": "13.6.1",
     "stylelint-config-standard": "20.0.0",
-    "stylelint-order": "4.1.0",
+    "stylelint-order": "6.0.3",
     "stylelint-scss": "3.18.0",
     "ts-jest": "^26.5.6",
     "ts-node": "^10.9.1",

package/stylelint.config.js

@@ -38,5 +38,7 @@ module.exports = {
 				ignoreProperties: ['--token'],
 			},
 		],
+		'order/properties-alphabetical-order': true,
 	},
+	ignoreFiles: ['lib/styles/settings/typography/_tokens.scss'],
 };