@bethinkpl/design-system 26.14.2 → 26.14.4

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

@@ -239,7 +239,12 @@ import SurveyToggle, {
 	SURVEY_TOGGLE_STATES,
 	SURVEY_TOGGLE_STATUSES,
 } from '../../SurveyToggle';
-import { SURVEY_QUESTION_SCALE_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
+import {
+	SURVEY_QUESTION_SCALE_CONTAINERS,
+	SURVEY_QUESTION_STATES,
+	SurveyQuestionScaleContainer,
+	SurveyQuestionState,
+} from '../SurveyQuestion.consts';
 import SurveyQuestionTextarea from '../';
 import { SurveyQuestionScaleOption } from '../SurveyQuestion.domain';
 import { randomString } from '../../../utils/string';
@@ -263,14 +268,14 @@ export default defineComponent({
 		state: {
 			type: String,
 			default: SURVEY_QUESTION_STATES.DEFAULT,
-			validator(state) {
+			validator(state: SurveyQuestionState) {
 				return Object.values(SURVEY_QUESTION_STATES).includes(state);
 			},
 		},
 		scaleOptions: {
 			type: Array as () => Array<SurveyQuestionScaleOption>,
 			required: true,
-			validator(scaleOptions) {
+			validator(scaleOptions: Array<SurveyQuestionScaleOption>) {
 				return scaleOptions.every((option) => typeof option === 'object');
 			},
 		},
@@ -293,7 +298,7 @@ export default defineComponent({
 		containers: {
 			type: String,
 			default: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
-			validator(containers) {
+			validator(containers: SurveyQuestionScaleContainer) {
 				return Object.values(SURVEY_QUESTION_SCALE_CONTAINERS).includes(containers);
 			},
 		},

package/lib/js/components/SurveyToggle/SurveyToggle.consts.ts

@@ -1,15 +1,23 @@
+import { Value } from '../../utils/type.utils';
+
 export const SURVEY_TOGGLE_MEANINGS = {
 	PRIMARY: 'primary',
 	NEUTRAL: 'neutral',
 } as const;
 
+export type SurveyToggleMeaning = Value<typeof SURVEY_TOGGLE_MEANINGS>;
+
 export const SURVEY_TOGGLE_STATUSES = {
 	DEFAULT: 'default',
 	SELECTED: 'selected',
 } as const;
 
+export type SurveyToggleStatus = Value<typeof SURVEY_TOGGLE_STATUSES>;
+
 export const SURVEY_TOGGLE_STATES = {
 	DEFAULT: 'default',
 	HOVERED: 'hovered',
 	DISABLED: 'disabled',
 } as const;
+
+export type SurveyToggleState = Value<typeof SURVEY_TOGGLE_STATES>;

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

@@ -221,6 +221,9 @@ import {
 	SURVEY_TOGGLE_MEANINGS,
 	SURVEY_TOGGLE_STATES,
 	SURVEY_TOGGLE_STATUSES,
+	SurveyToggleMeaning,
+	SurveyToggleState,
+	SurveyToggleStatus,
 } from './SurveyToggle.consts';
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 
@@ -233,31 +236,31 @@ export default defineComponent({
 	},
 	props: {
 		label: {
-			type: String,
+			type: [String, null],
 			default: null,
 		},
 		contentText: {
-			type: String,
+			type: [String, null],
 			default: null,
 		},
 		meaning: {
-			type: String,
+			type: [String, null],
 			default: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-			validator(meaning) {
+			validator(meaning: SurveyToggleMeaning) {
 				return Object.values(SURVEY_TOGGLE_MEANINGS).includes(meaning);
 			},
 		},
 		status: {
 			type: String,
 			default: SURVEY_TOGGLE_STATUSES.DEFAULT,
-			validator(status) {
+			validator(status: SurveyToggleStatus) {
 				return Object.values(SURVEY_TOGGLE_STATUSES).includes(status);
 			},
 		},
 		state: {
 			type: String,
 			default: SURVEY_TOGGLE_STATES.DEFAULT,
-			validator(state) {
+			validator(state: SurveyToggleState) {
 				return Object.values(SURVEY_TOGGLE_STATES).includes(state);
 			},
 		},

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

@@ -116,7 +116,7 @@ export default defineComponent({
 			required: true,
 		},
 		label: {
-			type: [String, null],
+			type: String,
 			default: null,
 		},
 		labelEllipsis: {

package/lib/js/components/TextGroup/TextGroup.vue

@@ -350,7 +350,7 @@ export default defineComponent({
 			default: true,
 		},
 		supportingTextTooltipContent: {
-			type: [String, null],
+			type: String,
 			default: null,
 		},
 	},

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

@@ -11,7 +11,7 @@ export const TILE_COLORS = {
 	INFO: 'info',
 } as const;
 
-export type TileColors = Value<typeof TILE_COLORS>;
+export type TileColor = Value<typeof TILE_COLORS>;
 
 export const TILE_STATES = {
 	DEFAULT: 'default',
@@ -19,7 +19,7 @@ export const TILE_STATES = {
 	LOADING: 'loading',
 } as const;
 
-export type TileStates = Value<typeof TILE_STATES>;
+export type TileState = Value<typeof TILE_STATES>;
 
 export const TILE_BORDER_COLORS = {
 	NEUTRAL: 'neutral',
@@ -45,4 +45,4 @@ export const TILE_ADDITIONAL_TEXT_MAX_WIDTHS = {
 	MEDIUM: 'medium',
 } as const;
 
-export type TileAdditionalTextMaxWidths = Value<typeof TILE_ADDITIONAL_TEXT_MAX_WIDTHS>;
+export type TileAdditionalTextMaxWidth = Value<typeof TILE_ADDITIONAL_TEXT_MAX_WIDTHS>;

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

@@ -4,12 +4,11 @@ import {
 	TILE_ADDITIONAL_TEXT_MAX_WIDTHS,
 	TILE_COLORS,
 	TILE_STATES,
-	TileAdditionalTextMaxWidths,
+	TileAdditionalTextMaxWidth,
 	TileBorderColors,
-	TileColors,
-	TileStates,
+	TileColor,
+	TileState,
 } from './Tile.consts';
-import { Value } from '../../utils/type.utils';
 
 export const props = {
 	interactive: {
@@ -47,9 +46,9 @@ export const props = {
 		default: null,
 	},
 	color: {
-		type: String as PropType<TileColors>,
+		type: String as PropType<TileColor>,
 		default: TILE_COLORS.NEUTRAL,
-		validator(color) {
+		validator(color: TileColor) {
 			return Object.values(TILE_COLORS).includes(color);
 		},
 	},
@@ -58,9 +57,9 @@ export const props = {
 		default: false,
 	},
 	state: {
-		type: String as PropType<TileStates>,
+		type: String as PropType<TileState>,
 		default: TILE_STATES.DEFAULT,
-		validator(value: Value<typeof TILE_STATES>) {
+		validator(value: TileState) {
 			return Object.values(TILE_STATES).includes(value);
 		},
 	},
@@ -77,9 +76,9 @@ export const props = {
 		default: null,
 	},
 	additionalTextMaxWidth: {
-		type: String as PropType<TileAdditionalTextMaxWidths>,
+		type: String as PropType<TileAdditionalTextMaxWidth>,
 		default: TILE_ADDITIONAL_TEXT_MAX_WIDTHS.SMALL,
-		validator(value: TileAdditionalTextMaxWidths) {
+		validator(value: TileAdditionalTextMaxWidth) {
 			return Object.values(TILE_ADDITIONAL_TEXT_MAX_WIDTHS).includes(value);
 		},
 	},

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

@@ -1,6 +1,10 @@
+import { Value } from '../../../utils/type.utils';
+
 export const COUNTER_TOGGLE_COLORS = {
 	INVERTED: 'inverted',
 	NEUTRAL_STRONG: 'neutralStrong',
 	NEUTRAL: 'neutral',
 	PRIMARY: 'primary',
-};
+} as const;
+
+export type CounterToggleColor = Value<typeof COUNTER_TOGGLE_COLORS>;

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

@@ -251,7 +251,7 @@ $counter-toggle-colors: (
 </style>
 
 <script lang="ts">
-import { COUNTER_TOGGLE_COLORS } from './CounterToggle.consts';
+import { COUNTER_TOGGLE_COLORS, CounterToggleColor } from './CounterToggle.consts';
 import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { defineComponent, toRaw } from 'vue';
 
@@ -268,7 +268,7 @@ export default defineComponent({
 		color: {
 			type: String,
 			default: COUNTER_TOGGLE_COLORS.NEUTRAL_STRONG,
-			validator(color) {
+			validator(color: CounterToggleColor) {
 				return Object.values(COUNTER_TOGGLE_COLORS).includes(color);
 			},
 		},

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

@@ -410,7 +410,6 @@ $toggle-button-colors: (
 </style>
 
 <script lang="ts">
-import { Value } from '../../../utils/type.utils';
 import { defineComponent, PropType, toRaw } from 'vue';
 
 import {
@@ -437,7 +436,7 @@ export default defineComponent({
 		color: {
 			type: String as PropType<ToggleButtonColor>,
 			default: TOGGLE_BUTTON_COLORS.NEUTRAL,
-			validator(value: Value<typeof TOGGLE_BUTTON_COLORS>) {
+			validator(value: ToggleButtonColor) {
 				return Object.values(TOGGLE_BUTTON_COLORS).includes(value);
 			},
 		},
@@ -482,21 +481,21 @@ export default defineComponent({
 		radius: {
 			type: String as PropType<ToggleButtonRadius>,
 			default: TOGGLE_BUTTON_RADIUSES.CAPSULE,
-			validator(value: Value<typeof TOGGLE_BUTTON_RADIUSES>) {
+			validator(value: ToggleButtonRadius) {
 				return Object.values(TOGGLE_BUTTON_RADIUSES).includes(value);
 			},
 		},
 		size: {
 			type: String as PropType<ToggleButtonSize>,
 			default: TOGGLE_BUTTON_SIZES.MEDIUM,
-			validator(value: Value<typeof TOGGLE_BUTTON_SIZES>) {
+			validator(value: ToggleButtonSize) {
 				return Object.values(TOGGLE_BUTTON_SIZES).includes(value);
 			},
 		},
 		state: {
 			type: String as PropType<ToggleButtonState>,
 			default: TOGGLE_BUTTON_STATES.DEFAULT,
-			validator(value: Value<typeof TOGGLE_BUTTON_STATES>) {
+			validator(value: ToggleButtonState) {
 				return Object.values(TOGGLE_BUTTON_STATES).includes(value);
 			},
 		},

package/lib/js/styles/ItemsList.vue

@@ -22,8 +22,14 @@
 					<h3 :id="'category-' + itemCategory" class="itemsList__category">{{
 						itemCategory
 					}}</h3>
-					<items-color v-if="type === TOKENS_TYPES.COLORS" :items="items" />
-					<items-typography v-if="type === TOKENS_TYPES.TYPOGRAPHY" :items="items" />
+					<items-color
+						v-if="type === TOKENS_TYPES.COLORS"
+						:items="items as ColorToken[]"
+					/>
+					<items-typography
+						v-if="type === TOKENS_TYPES.TYPOGRAPHY"
+						:items="items as TypographyToken[]"
+					/>
 				</div>
 			</div>
 		</div>
@@ -64,6 +70,7 @@
 
 <script lang="ts">
 import { ItemsListsItem, TOKENS_TYPES } from './TokenTypes';
+import type { ColorToken, TypographyToken } from './TokenTypes';
 import { Value } from '../utils/type.utils';
 import ItemsColor from './ItemsColor.vue';
 import ItemsTypography from './ItemsTypography.vue';

package/lib/js/styles/TokenTypes.ts

@@ -21,6 +21,7 @@ export interface TypographyToken {
 	label: string;
 	value: string;
 	token: string;
+	ratio: number | null;
 	attributes: Array<string>;
 	attributesRaw: Array<AttributeRaw>;
 }
@@ -28,5 +29,5 @@ export interface TypographyToken {
 export interface ItemsListsItem {
 	title: string;
 	class: string;
-	list: Dict<object>;
+	list: Dict<Array<object>>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "26.14.2",
+  "version": "26.14.4",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -c .storybook -o public/storybook",
     "test": "jest",
-    "ts:check": "tsc --noEmit",
+    "ts:check": "vue-tsc --noEmit",
     "synchronizeColors": "npx ts-node tools/importers/SynchronizeColorsTokens.ts",
     "synchronizeTypography": "npx ts-node tools/importers/SynchronizeTypographyTokens.ts"
   },
@@ -88,7 +88,8 @@
     "vite-svg-loader": "^5.1.0",
     "vue": "3.5.12",
     "vue-eslint-parser": "^10.1.1",
-    "vue-popperjs": "github:bethinkpl/vue-popper#03c7912c4729386743b0cca8f39b35448cc3db7f"
+    "vue-popperjs": "github:bethinkpl/vue-popper#03c7912c4729386743b0cca8f39b35448cc3db7f",
+    "vue-tsc": "2.2.8"
   },
   "dependencies": {
     "@primevue/themes": "4.0.0-rc.3",

package/dist/demo.html

@@ -1 +0,0 @@
-<!doctype html><meta charset="utf-8"><title>design-system demo</title><script src="./design-system.umd.js"></script><script>console.log(design-system)</script>