@bethinkpl/design-system 41.0.0 → 41.0.2

package/dist/lib/js/components/Buttons/IconButton/IconButton.consts.d.ts

@@ -30,6 +30,7 @@ export declare const ICON_BUTTON_COLORS: {
     readonly WARNING: "warning";
     readonly INFO: "info";
     readonly MAGIC: "magic";
+    readonly ACCENT: "accent";
 };
 export type IconButtonColor = Value<typeof ICON_BUTTON_COLORS>;
 export declare const ICON_BUTTON_STATES: {

package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts

@@ -379,6 +379,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     BUTTON_COLORS: Readonly<{
         readonly PRIMARY: "primary";

package/dist/lib/js/components/Cards/Card/Card.consts.d.ts

@@ -20,6 +20,7 @@ export declare const CARD_RIBBON_COLORS: {
     readonly DANGER: "danger";
     readonly FAIL: "fail";
     readonly INFO: "info";
+    readonly ACCENT: "accent";
     readonly TRANSPARENT: "transparent";
 };
 export type CardRibbonColors = Value<typeof CARD_RIBBON_COLORS>;

package/dist/lib/js/components/Cards/Card/Card.vue.d.ts

@@ -5,10 +5,12 @@ declare function __VLS_template(): Readonly<{
     header?: () => any;
     content?: () => any;
     footer?: () => any;
+    experimentalContent?: () => any;
 }> & {
     header?: () => any;
     content?: () => any;
     footer?: () => any;
+    experimentalContent?: () => any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     contentHasPadding?: boolean;

package/dist/lib/js/components/Cards/CardExpandable/CardExpandable.vue.d.ts

@@ -533,10 +533,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             header?: () => any;
             content?: () => any;
             footer?: () => any;
+            experimentalContent?: () => any;
         }> & {
             header?: () => any;
             content?: () => any;
             footer?: () => any;
+            experimentalContent?: () => any;
         };
     });
     DsIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{

package/dist/lib/js/components/Chip/Chip.consts.d.ts

@@ -16,6 +16,7 @@ export declare const CHIP_COLORS: {
     readonly INVERTED: "inverted";
     readonly WARNING: "warning";
     readonly INFO: "info";
+    readonly ACCENT: "accent";
 };
 export declare const CHIP_DEFAULT_COLOR: "neutral";
 export type ChipColor = Value<typeof CHIP_COLORS>;

package/dist/lib/js/components/ContainerRibbon/ContainerRibbon.consts.d.ts

@@ -17,6 +17,7 @@ export declare const CONTAINER_RIBBON_COLORS: {
     readonly DANGER: "danger";
     readonly FAIL: "fail";
     readonly INFO: "info";
+    readonly ACCENT: "accent";
     readonly TRANSPARENT: "transparent";
 };
 export type ContainerRibbonColor = Value<typeof CONTAINER_RIBBON_COLORS>;

package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts

@@ -1030,6 +1030,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts

@@ -71,6 +71,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     };
     ICON_BUTTON_SIZES: {
         readonly XX_SMALL: "xx-small";
@@ -820,6 +821,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         SECTION_HEADER_MOBILE_LAYOUTS: Readonly<{
             readonly VERTICAL: "vertical";
@@ -1372,6 +1374,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 readonly WARNING: "warning";
                 readonly INFO: "info";
                 readonly MAGIC: "magic";
+                readonly ACCENT: "accent";
             }>;
             BUTTON_COLORS: Readonly<{
                 readonly PRIMARY: "primary";

package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts

@@ -59,6 +59,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     ICON_BUTTON_STATES: Readonly<{
         readonly DEFAULT: "default";
@@ -807,6 +808,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts

@@ -377,6 +377,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     SECTION_HEADER_MOBILE_LAYOUTS: Readonly<{
         readonly VERTICAL: "vertical";
@@ -929,6 +930,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts

@@ -407,6 +407,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     };
     ICON_SIZES: {
         XXX_SMALL: string;
@@ -1060,6 +1061,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts

@@ -542,6 +542,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         };
         ICON_SIZES: {
             XXX_SMALL: string;
@@ -1195,6 +1196,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 readonly WARNING: "warning";
                 readonly INFO: "info";
                 readonly MAGIC: "magic";
+                readonly ACCENT: "accent";
             }>;
             BUTTON_COLORS: Readonly<{
                 readonly PRIMARY: "primary";

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

@@ -53,6 +53,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     ICON_BUTTON_STATES: Readonly<{
         readonly DEFAULT: "default";
@@ -761,6 +762,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts

@@ -314,6 +314,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     ICON_SIZES: Readonly<{
         XXX_SMALL: string;
@@ -660,10 +661,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             header?: () => any;
             content?: () => any;
             footer?: () => any;
+            experimentalContent?: () => any;
         }> & {
             header?: () => any;
             content?: () => any;
             footer?: () => any;
+            experimentalContent?: () => any;
         };
     });
     IconButton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -1043,6 +1046,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts

@@ -343,6 +343,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     BUTTON_TYPES: Readonly<{
         readonly FILLED: "filled";
@@ -632,10 +633,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             header?: () => any;
             content?: () => any;
             footer?: () => any;
+            experimentalContent?: () => any;
         }> & {
             header?: () => any;
             content?: () => any;
             footer?: () => any;
+            experimentalContent?: () => any;
         };
     });
     IconButton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -1015,6 +1018,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

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

@@ -409,10 +409,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             header?: () => any;
             content?: () => any;
             footer?: () => any;
+            experimentalContent?: () => any;
         }> & {
             header?: () => any;
             content?: () => any;
             footer?: () => any;
+            experimentalContent?: () => any;
         };
     });
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/lib/js/components/Well/Well.consts.d.ts

@@ -27,6 +27,7 @@ export declare const WELL_RIBBON_COLORS: {
     readonly DANGER: "danger";
     readonly FAIL: "fail";
     readonly INFO: "info";
+    readonly ACCENT: "accent";
     readonly TRANSPARENT: "transparent";
 };
 export type WellRibbonColor = Value<typeof WELL_RIBBON_COLORS>;

package/lib/js/components/Buttons/IconButton/IconButton.consts.ts

@@ -37,6 +37,7 @@ export const ICON_BUTTON_COLORS = {
 	WARNING: 'warning',
 	INFO: 'info',
 	MAGIC: 'magic',
+	ACCENT: 'accent',
 } as const;
 
 export type IconButtonColor = Value<typeof ICON_BUTTON_COLORS>;

package/lib/js/components/Buttons/IconButton/IconButton.spec.ts

@@ -38,6 +38,7 @@ describe('IconButton', () => {
 		[{ props: { state: ICON_BUTTON_STATES.LOADING }, expectedClass: '-ds-loading' }],
 		[{ props: { color: ICON_BUTTON_COLORS.PRIMARY }, expectedClass: '-ds-color-primary' }],
 		[{ props: { color: ICON_BUTTON_COLORS.MAGIC }, expectedClass: '-ds-color-magic' }],
+		[{ props: { color: ICON_BUTTON_COLORS.ACCENT }, expectedClass: '-ds-color-accent' }],
 	])('correct class for props', ({ props, expectedClass }) => {
 		const component = createComponent(props);
 		expect(component.classes()).toContain(expectedClass);

package/lib/js/components/Cards/Card/Card.spec.ts

@@ -55,6 +55,56 @@ describe('Card', () => {
 		expect(component.text()).toContain(footer);
 	});
 
+	it('should render experimentalContent slot', () => {
+		const experimentalContent = 'Wpłynąlem na suchego przestwór oceanu';
+		const component = createComponent({
+			slots: {
+				experimentalContent: () => [h('span', experimentalContent)],
+			},
+		});
+
+		expect(component.find('.ds-card__experimentalContent').exists()).toBe(true);
+		expect(component.find('.ds-card__experimentalContent').text()).toContain(
+			experimentalContent,
+		);
+	});
+
+	it('should skip standard slots when experimentalContent is used', () => {
+		const component = createComponent({
+			slots: {
+				header: () => [h('span', 'header')],
+				content: () => [h('span', 'content')],
+				footer: () => [h('span', 'footer')],
+				experimentalContent: () => [h('span', 'experimental')],
+			},
+		});
+
+		expect(component.find('.ds-card__header').exists()).toBe(false);
+		expect(component.find('.ds-card__content').exists()).toBe(false);
+		expect(component.find('.ds-card__footer').exists()).toBe(false);
+	});
+
+	it('should not render the slotsWrapper when experimentalContent is used', () => {
+		const component = createComponent({
+			slots: {
+				experimentalContent: () => [h('span', 'experimental')],
+			},
+		});
+
+		expect(component.find('.ds-card__slotsWrapper').exists()).toBe(false);
+	});
+
+	it('should still render the ribbon when experimentalContent is used', () => {
+		const component = createComponent({
+			props: { hasRibbon: true },
+			slots: {
+				experimentalContent: () => [h('span', 'experimental')],
+			},
+		});
+
+		expect(component.find('.ds-card__ribbon').exists()).toBe(true);
+	});
+
 	it('should render content slot with padding by default', () => {
 		const content = 'Wpłynąlem na suchego przestwór oceanu';
 		const component = createComponent({

package/lib/js/components/Cards/Card/Card.stories.ts

@@ -31,6 +31,9 @@ const StoryTemplate: StoryFn<typeof Card> = (args) => ({
 			<template v-if="args.footer" #footer>
 				<div v-html="args.footer" />
 			</template>
+			<template v-if="args.experimentalContent" #experimentalContent>
+				<div v-html="args.experimentalContent" />
+			</template>
 		</card>`,
 });
 
@@ -40,6 +43,7 @@ const args = {
 	header: 'header slot',
 	content: 'content slot that supports <b>HTML markup</b>',
 	footer: 'footer slot',
+	experimentalContent: '',
 	contentHasPadding: true,
 	headerHasPadding: false,
 	footerHasPadding: false,
@@ -65,6 +69,7 @@ const argTypes = {
 		control: 'text',
 	},
 	footer: { control: 'text' },
+	experimentalContent: { control: 'text' },
 	backgroundColor: {
 		control: 'select',
 		options: Object.values(CARD_BACKGROUND_COLORS),

package/lib/js/components/Cards/Card/Card.vue

@@ -28,7 +28,12 @@
 			/>
 		</div>
 
+		<div v-if="$slots.experimentalContent" class="ds-card__experimentalContent">
+			<slot name="experimentalContent" />
+		</div>
+
 		<div
+			v-else
 			class="ds-card__slotsWrapper"
 			:class="{ '-ds-containerIsScrollable': isContentScrollable }"
 		>
@@ -110,6 +115,14 @@
 		}
 	}
 
+	&__experimentalContent {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		// prevents excessive width due to child elements
+		min-width: 0;
+	}
+
 	&__header {
 		&.-ds-withPadding {
 			padding: $space-8;
@@ -252,6 +265,7 @@ defineSlots<{
 	header?: () => any;
 	content?: () => any;
 	footer?: () => any;
+	experimentalContent?: () => any;
 }>();
 
 const ribbonLayout = computed(() => {

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

@@ -18,6 +18,7 @@ export const CHIP_COLORS = {
 	INVERTED: 'inverted',
 	WARNING: 'warning',
 	INFO: 'info',
+	ACCENT: 'accent',
 } as const;
 
 export const CHIP_DEFAULT_COLOR = CHIP_COLORS.NEUTRAL;

package/lib/js/components/Chip/Chip.spec.ts

@@ -133,6 +133,7 @@ describe('Chip', () => {
 		[CHIP_COLORS.INFO, '-ds-color-info'],
 		[CHIP_COLORS.WARNING, '-ds-color-warning'],
 		[CHIP_COLORS.INVERTED, '-ds-color-inverted'],
+		[CHIP_COLORS.ACCENT, '-ds-color-accent'],
 	])(
 		'correct class for color: %s prop, expectedClass: %s',
 		(color: string, expectedClass: string) => {
@@ -147,6 +148,7 @@ describe('Chip', () => {
 				'-ds-color-info',
 				'-ds-color-warning',
 				'-ds-color-inverted',
+				'-ds-color-accent',
 			];
 			const component = createComponent({ color });
 			const componentClasses = component.classes();

package/lib/js/components/Chip/Chip.vue

@@ -156,6 +156,17 @@ $chip-colors: (
 			'background': $color-info-background,
 		),
 	),
+	'accent': (
+		'label': $color-accent-text,
+		'icon': $color-accent-icon,
+		'background': $color-accent-background,
+		'background-hover': $color-accent-background-hovered,
+		'disabled': (
+			'label': $color-accent-text-disabled,
+			'icon': $color-accent-icon-disabled,
+			'background': $color-accent-background,
+		),
+	),
 	'inverted': (
 		'label': $color-neutral-text,
 		'icon': $color-neutral-icon,
@@ -318,6 +329,7 @@ const CHIP_ICON_BUTTONS_COLOR_MAP: Record<ChipColor, IconButtonColor> = {
 	[CHIP_COLORS.WARNING]: ICON_BUTTON_COLORS.WARNING,
 	[CHIP_COLORS.SUCCESS]: ICON_BUTTON_COLORS.SUCCESS,
 	[CHIP_COLORS.INFO]: ICON_BUTTON_COLORS.INFO,
+	[CHIP_COLORS.ACCENT]: ICON_BUTTON_COLORS.ACCENT,
 };
 
 const {

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

@@ -19,6 +19,7 @@ export const CONTAINER_RIBBON_COLORS = {
 	DANGER: 'danger',
 	FAIL: 'fail',
 	INFO: 'info',
+	ACCENT: 'accent',
 	TRANSPARENT: 'transparent',
 } as const;
 

package/lib/js/components/ContainerRibbon/ContainerRibbon.spec.ts

@@ -33,12 +33,15 @@ describe('ContainerRibbon', () => {
 		},
 	);
 
-	it('applies color classes correctly', () => {
-		const wrapper = mount(ContainerRibbon, {
-			props: { color: CONTAINER_RIBBON_COLORS.PRIMARY },
-		});
-		expect(wrapper.find('.ds-container-ribbon').classes()).toContain('-ds-color-primary');
-	});
+	it.each(Object.values(CONTAINER_RIBBON_COLORS))(
+		'applies color class correctly for color "%s"',
+		(color) => {
+			const wrapper = mount(ContainerRibbon, {
+				props: { color },
+			});
+			expect(wrapper.find('.ds-container-ribbon').classes()).toContain(`-ds-color-${color}`);
+		},
+	);
 
 	it('applies layout classes correctly', () => {
 		const wrapper = mount(ContainerRibbon, {

package/lib/js/components/ContainerRibbon/ContainerRibbon.vue

@@ -15,6 +15,7 @@
 			'-ds-color-danger': color === CONTAINER_RIBBON_COLORS.DANGER,
 			'-ds-color-fail': color === CONTAINER_RIBBON_COLORS.FAIL,
 			'-ds-color-info': color === CONTAINER_RIBBON_COLORS.INFO,
+			'-ds-color-accent': color === CONTAINER_RIBBON_COLORS.ACCENT,
 			'-ds-color-transparent': color === CONTAINER_RIBBON_COLORS.TRANSPARENT,
 			'-ds-layout-vertical': layout === CONTAINER_RIBBON_LAYOUTS.VERTICAL,
 			'-ds-layout-horizontal': layout === CONTAINER_RIBBON_LAYOUTS.HORIZONTAL,
@@ -116,6 +117,10 @@
 		background-color: $color-info-border;
 	}
 
+	&.-ds-color-accent {
+		background-color: $color-accent-border;
+	}
+
 	&.-ds-color-transparent {
 		background-color: transparent;
 	}

package/lib/styles/settings/_buttons.scss

@@ -185,6 +185,48 @@ $only-icon-button-colors: (
 			),
 		),
 	),
+	'accent': (
+		'filled': (
+			'color': $color-inverted-text,
+			'icon': $color-inverted-icon,
+			'background': $color-accent-background-strong,
+			'background-hovered': $color-accent-background-strong-hovered,
+			'background-focused': $color-accent-background-strong-focused,
+			'background-disabled': $color-accent-background-strong-disabled,
+			'disabled': (
+				'color': $color-inverted-text,
+				'icon': $color-inverted-icon,
+				'background': $color-accent-background-strong-disabled,
+			),
+		),
+		'outlined': (
+			'color': $color-accent-text,
+			'icon': $color-accent-icon,
+			'border': $color-accent-border,
+			'background': $color-accent-background-ghost,
+			'background-hovered': $color-accent-background-ghost-hovered,
+			'background-focused': $color-accent-background-ghost-focused,
+			'background-disabled': $color-accent-background-ghost-disabled,
+			'disabled': (
+				'color': $color-accent-text,
+				'border': $color-accent-border-disabled,
+				'icon': $color-accent-icon-disabled,
+				'background': $color-accent-background-ghost-disabled,
+			),
+		),
+		'text': (
+			'color': $color-accent-text,
+			'icon': $color-accent-icon,
+			'background': $color-accent-background-ghost,
+			'background-hovered': $color-accent-background-ghost-hovered,
+			'background-focused': $color-accent-background-ghost-focused,
+			'background-disabled': $color-accent-background-ghost-disabled,
+			'disabled': (
+				'color': $color-accent-text,
+				'icon': $color-accent-icon-disabled,
+			),
+		),
+	),
 );
 
 $button-colors: (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "41.0.0",
+  "version": "41.0.2",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",