@bethinkpl/design-system 31.0.2 → 32.0.0

package/dist/lib/js/components/TextGroup/TextGroup.vue.d.ts

@@ -1,304 +1,60 @@
-import { PropType } from 'vue';
-import { TextGroupColor, TextGroupLoadingSize, TextGroupSize, TextGroupState } from './TextGroup.consts';
+import { TextGroupProminence, TextGroupLoadingSize, TextGroupSize, TextGroupState } from './TextGroup.consts';
 
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    size: {
-        type: PropType<TextGroupSize>;
-        default: string;
-    };
-    color: {
-        type: PropType<TextGroupColor>;
-        default: "neutral";
-    };
-    eyebrowText: {
-        type: PropType<string | null>;
-        default: null;
-    };
-    eyebrowTextEllipsis: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isEyebrowTextUppercase: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    mainText: {
-        type: PropType<string | null>;
-        default: null;
-    };
-    mainTextEllipsis: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    supportingText: {
-        type: PropType<string | null>;
-        default: null;
-    };
-    supportingTextEllipsis: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isInteractive: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    skeletonLoadingSize: {
-        type: PropType<TextGroupLoadingSize>;
-        default: string;
-    };
-    isSelected: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    state: {
-        type: PropType<TextGroupState>;
-        default: "default";
-    };
-    isSupportingTextTooltipEnabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isSupportingTextTooltipEnabledOnMobile: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isSupportingTextTooltipAutoFilledWithContent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    supportingTextTooltipContent: {
-        type: StringConstructor;
-        default: null;
-    };
-}>, {}, {
-    TEXT_GROUP_SIZES: Readonly<{
-        SMALL: string;
-        MEDIUM: string;
-    }>;
-    TEXT_GROUP_STATES: Readonly<{
-        readonly DEFAULT: "default";
-        readonly HOVERED: "hovered";
-        readonly DISABLED: "disabled";
-        readonly LOADING: "loading";
-    }>;
-}, {
-    colorClassName(): string;
-    isLoading(): boolean;
-    loadingSizeClassName(): string;
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    size: {
-        type: PropType<TextGroupSize>;
-        default: string;
-    };
-    color: {
-        type: PropType<TextGroupColor>;
-        default: "neutral";
-    };
-    eyebrowText: {
-        type: PropType<string | null>;
-        default: null;
-    };
-    eyebrowTextEllipsis: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isEyebrowTextUppercase: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    mainText: {
-        type: PropType<string | null>;
-        default: null;
-    };
-    mainTextEllipsis: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    supportingText: {
-        type: PropType<string | null>;
-        default: null;
-    };
-    supportingTextEllipsis: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isInteractive: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    skeletonLoadingSize: {
-        type: PropType<TextGroupLoadingSize>;
-        default: string;
-    };
-    isSelected: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    state: {
-        type: PropType<TextGroupState>;
-        default: "default";
-    };
-    isSupportingTextTooltipEnabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isSupportingTextTooltipEnabledOnMobile: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isSupportingTextTooltipAutoFilledWithContent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    supportingTextTooltipContent: {
-        type: StringConstructor;
-        default: null;
-    };
-}>> & Readonly<{}>, {
-    size: string;
-    color: "neutral";
-    state: TextGroupState;
-    isInteractive: boolean;
-    eyebrowText: string | null;
-    isEyebrowTextUppercase: boolean;
-    supportingText: string | null;
-    isSelected: boolean;
-    eyebrowTextEllipsis: boolean;
-    mainText: string | null;
-    mainTextEllipsis: boolean;
-    supportingTextEllipsis: boolean;
-    skeletonLoadingSize: string;
-    isSupportingTextTooltipEnabled: boolean;
-    isSupportingTextTooltipEnabledOnMobile: boolean;
-    isSupportingTextTooltipAutoFilledWithContent: boolean;
-    supportingTextTooltipContent: string;
-}, {}, {
-    DsSkeleton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        height: {
-            type: StringConstructor;
-            default: string;
-        };
-        radius: {
-            type: PropType<import('../..').SkeletonRadiusSize>;
-            default: string;
-        };
-        width: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>, {}, {
-        designTokens: {
-            animation: {
-                background: string;
-            };
-            background: string;
-        };
-    }, {
-        radiusTranslated(): string;
-    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        height: {
-            type: StringConstructor;
-            default: string;
-        };
-        radius: {
-            type: PropType<import('../..').SkeletonRadiusSize>;
-            default: string;
-        };
-        width: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>> & Readonly<{}>, {
-        radius: string;
-        width: string;
-        height: string;
-    }, {}, {
-        PrimeSkeleton: import('@primevue/core').DefineComponent<import('primevue/skeleton').SkeletonProps, import('primevue/skeleton').SkeletonSlots, (e: string, ...args: any[]) => void>;
-    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    DsTooltip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        placement: {
-            type: PropType<import('../Tooltip').TooltipPlacement>;
-            default: "bottom";
-            validator(placement: import('../Tooltip').TooltipPlacement): boolean;
-        };
-        text: {
-            type: StringConstructor;
-            default: string;
-        };
-        isDisabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        isPointerVisible: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        inline: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        isHiddenOnMobile: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>, {}, {}, {
-        tooltipParams(): {
-            position: any;
-            event: string;
-        };
-        options(): {
-            value: any;
-            disabled: any;
-            dt: {
-                shadow: string;
-                padding: string;
-                background: string;
-                color: string;
-                borderRadius: string;
-                maxWidth: string;
-            };
-            class: string | null;
-            ptOptions: {
-                mergeProps: boolean;
-            };
-            pt: {
-                text: string;
-                arrow: string;
-            };
-        };
-    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        placement: {
-            type: PropType<import('../Tooltip').TooltipPlacement>;
-            default: "bottom";
-            validator(placement: import('../Tooltip').TooltipPlacement): boolean;
-        };
-        text: {
-            type: StringConstructor;
-            default: string;
-        };
-        isDisabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        isPointerVisible: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        inline: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        isHiddenOnMobile: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, {
-        text: string;
-        placement: import('../Tooltip').TooltipPlacement;
-        isDisabled: boolean;
-        isPointerVisible: boolean;
-        inline: boolean;
-        isHiddenOnMobile: boolean;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare function __VLS_template(): {
+    mainText?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    size?: TextGroupSize;
+    prominence?: TextGroupProminence;
+    eyebrowText?: string | null;
+    eyebrowTextEllipsis?: boolean;
+    isEyebrowTextUppercase?: boolean;
+    hasEyebrowMask?: boolean;
+    mainText?: string | null;
+    mainTextEllipsis?: boolean;
+    supportingText?: string | null;
+    supportingTextEllipsis?: boolean;
+    isInteractive?: boolean;
+    skeletonLoadingSize?: TextGroupLoadingSize;
+    isSelected?: boolean;
+    state?: TextGroupState;
+    isSupportingTextTooltipEnabled?: boolean;
+    isSupportingTextTooltipEnabledOnMobile?: boolean;
+    isSupportingTextTooltipAutoFilledWithContent?: boolean;
+    supportingTextTooltipContent?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    size?: TextGroupSize;
+    prominence?: TextGroupProminence;
+    eyebrowText?: string | null;
+    eyebrowTextEllipsis?: boolean;
+    isEyebrowTextUppercase?: boolean;
+    hasEyebrowMask?: boolean;
+    mainText?: string | null;
+    mainTextEllipsis?: boolean;
+    supportingText?: string | null;
+    supportingTextEllipsis?: boolean;
+    isInteractive?: boolean;
+    skeletonLoadingSize?: TextGroupLoadingSize;
+    isSelected?: boolean;
+    state?: TextGroupState;
+    isSupportingTextTooltipEnabled?: boolean;
+    isSupportingTextTooltipEnabledOnMobile?: boolean;
+    isSupportingTextTooltipAutoFilledWithContent?: boolean;
+    supportingTextTooltipContent?: string;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts

@@ -173,8 +173,10 @@ export declare const data: () => {
         readonly FA_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts

@@ -229,8 +229,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/icons/fontawesome.d.ts

@@ -160,8 +160,10 @@ export declare const FONTAWESOME_ICONS: {
     readonly FA_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MEMO: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -1,5 +1,6 @@
-export const TEXT_GROUP_COLORS = {
-	NEUTRAL: 'neutral',
+export const TEXT_GROUP_PROMINENCE = {
+	DEFAULT: 'default',
+	STRONG: 'strong',
 } as const;
 
 export const TEXT_GROUP_LOADING_SIZES = {
@@ -20,7 +21,8 @@ export const TEXT_GROUP_STATES = {
 	LOADING: 'loading',
 } as const;
 
-export type TextGroupColor = (typeof TEXT_GROUP_COLORS)[keyof typeof TEXT_GROUP_COLORS];
+export type TextGroupProminence =
+	(typeof TEXT_GROUP_PROMINENCE)[keyof typeof TEXT_GROUP_PROMINENCE];
 export type TextGroupLoadingSize =
 	(typeof TEXT_GROUP_LOADING_SIZES)[keyof typeof TEXT_GROUP_LOADING_SIZES];
 export type TextGroupSize = (typeof TEXT_GROUP_SIZES)[keyof typeof TEXT_GROUP_SIZES];

package/lib/js/components/TextGroup/TextGroup.stories.ts

@@ -2,8 +2,8 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import DsDivider from '../Divider/Divider.vue';
 import DsTextGroup from './TextGroup.vue';
 import {
-	TEXT_GROUP_COLORS,
 	TEXT_GROUP_LOADING_SIZES,
+	TEXT_GROUP_PROMINENCE,
 	TEXT_GROUP_SIZES,
 	TEXT_GROUP_STATES,
 } from './TextGroup.consts';
@@ -21,7 +21,7 @@ const StoryTemplate: StoryFn<typeof DsTextGroup> = (args) => ({
 	template: `
 		<ds-text-group
 			:size="size"
-			:color="color"
+			:prominence="prominence"
 			:eyebrow-text="eyebrowText === 'null' ? null : eyebrowText"
 			:eyebrow-text-ellipsis="eyebrowTextEllipsis"
 			:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
@@ -37,8 +37,11 @@ const StoryTemplate: StoryFn<typeof DsTextGroup> = (args) => ({
 			:is-supporting-text-tooltip-enabled-on-mobile="isSupportingTextTooltipEnabledOnMobile"
 			:is-supporting-text-tooltip-auto-filled-with-content="isSupportingTextTooltipAutoFilledWithContent"
 			:supporting-text-tooltip-content="supportingTextTooltipContent"
+			:has-eyebrow-mask="hasEyebrowMask"
 		>
-			<template v-if="mainTextSlot" #mainText><div v-html="mainTextSlot" /></template>
+			<template v-if="mainTextSlot" #mainText>
+				<div v-html="mainTextSlot" />
+			</template>
 		</ds-text-group>
 		<div style="margin-top: 100px; color: #888">
 			<ds-divider />
@@ -51,10 +54,11 @@ export const Interactive = StoryTemplate.bind({});
 Interactive.args = {
 	mainTextSlot: '',
 	size: TEXT_GROUP_SIZES.MEDIUM,
-	color: TEXT_GROUP_COLORS.NEUTRAL,
+	prominence: TEXT_GROUP_PROMINENCE.DEFAULT,
 	eyebrowText: 'Eyebrow Uppercase Veritatis aspernatur cupiditate magnam quidem',
 	eyebrowTextEllipsis: false,
 	isEyebrowTextUppercase: true,
+	hasEyebrowMask: false,
 	mainText: 'Main text Veritatis aspernatur cupiditate magnam quidem',
 	mainTextEllipsis: false,
 	supportingText:
@@ -75,9 +79,9 @@ Interactive.argTypes = {
 		control: 'select',
 		options: Object.values(TEXT_GROUP_SIZES),
 	},
-	color: {
+	prominence: {
 		control: 'select',
-		options: Object.values(TEXT_GROUP_COLORS),
+		options: Object.values(TEXT_GROUP_PROMINENCE),
 	},
 	eyebrowText: {
 		control: 'text',
@@ -88,6 +92,9 @@ Interactive.argTypes = {
 	isEyebrowTextUppercase: {
 		control: 'boolean',
 	},
+	hasEyebrowMask: {
+		control: 'boolean',
+	},
 	mainText: {
 		control: 'text',
 	},