@bethinkpl/design-system 41.0.0 → 41.0.1

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/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts

@@ -660,10 +660,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<{

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

@@ -632,10 +632,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<{

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/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/package.json

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