@bethinkpl/design-system 39.0.1 → 40.0.0

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

@@ -76,7 +76,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         RIGHT: string;
     }>;
 }, {
-    buttonPrimaryColor(): "primary" | "neutral";
+    buttonPrimaryColor(): "neutral" | "primary";
     buttonSecondaryColor(): "danger" | "neutral";
     toastPosition(): string;
     toastSize(): string;
@@ -253,17 +253,23 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             dividerUnderHeader: {
                 type: PropType<boolean>;
             };
-            hasBorder: {
+            hasRibbon: {
                 type: PropType<boolean>;
             };
-            borderPosition: {
-                type: PropType<import('../Cards/Card').CardBorderPositions>;
+            hasRadius: {
+                type: PropType<boolean>;
             };
-            borderSize: {
-                type: PropType<import('../Cards/Card').CardBorderSizes>;
+            backgroundColor: {
+                type: PropType<import('../Cards/Card').CardBackgroundColor>;
             };
-            borderColor: {
-                type: PropType<import('../Cards/Card').CardBorderColors>;
+            ribbonPosition: {
+                type: PropType<import('../Cards/Card').CardRibbonPositions>;
+            };
+            ribbonSize: {
+                type: PropType<import('../Cards/Card').CardRibbonSizes>;
+            };
+            ribbonColor: {
+                type: PropType<import('../Cards/Card').CardRibbonColors>;
             };
             hasRibbonRadius: {
                 type: PropType<boolean>;
@@ -283,6 +289,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             isContentScrollable: {
                 type: PropType<boolean>;
             };
+            hasBorder: {
+                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to hasRibbon">>;
+            };
+            borderPosition: {
+                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to ribbonPosition">>;
+            };
+            borderSize: {
+                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to ribbonSize">>;
+            };
+            borderColor: {
+                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to ribbonColor">>;
+            };
         }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
@@ -306,17 +324,23 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             dividerUnderHeader: {
                 type: PropType<boolean>;
             };
-            hasBorder: {
+            hasRibbon: {
                 type: PropType<boolean>;
             };
-            borderPosition: {
-                type: PropType<import('../Cards/Card').CardBorderPositions>;
+            hasRadius: {
+                type: PropType<boolean>;
             };
-            borderSize: {
-                type: PropType<import('../Cards/Card').CardBorderSizes>;
+            backgroundColor: {
+                type: PropType<import('../Cards/Card').CardBackgroundColor>;
             };
-            borderColor: {
-                type: PropType<import('../Cards/Card').CardBorderColors>;
+            ribbonPosition: {
+                type: PropType<import('../Cards/Card').CardRibbonPositions>;
+            };
+            ribbonSize: {
+                type: PropType<import('../Cards/Card').CardRibbonSizes>;
+            };
+            ribbonColor: {
+                type: PropType<import('../Cards/Card').CardRibbonColors>;
             };
             hasRibbonRadius: {
                 type: PropType<boolean>;
@@ -336,6 +360,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             isContentScrollable: {
                 type: PropType<boolean>;
             };
+            hasBorder: {
+                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to hasRibbon">>;
+            };
+            borderPosition: {
+                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to ribbonPosition">>;
+            };
+            borderSize: {
+                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to ribbonSize">>;
+            };
+            borderColor: {
+                type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to ribbonColor">>;
+            };
         }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
@@ -356,17 +392,23 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         dividerUnderHeader: {
             type: PropType<boolean>;
         };
-        hasBorder: {
+        hasRibbon: {
             type: PropType<boolean>;
         };
-        borderPosition: {
-            type: PropType<import('../Cards/Card').CardBorderPositions>;
+        hasRadius: {
+            type: PropType<boolean>;
         };
-        borderSize: {
-            type: PropType<import('../Cards/Card').CardBorderSizes>;
+        backgroundColor: {
+            type: PropType<import('../Cards/Card').CardBackgroundColor>;
         };
-        borderColor: {
-            type: PropType<import('../Cards/Card').CardBorderColors>;
+        ribbonPosition: {
+            type: PropType<import('../Cards/Card').CardRibbonPositions>;
+        };
+        ribbonSize: {
+            type: PropType<import('../Cards/Card').CardRibbonSizes>;
+        };
+        ribbonColor: {
+            type: PropType<import('../Cards/Card').CardRibbonColors>;
         };
         hasRibbonRadius: {
             type: PropType<boolean>;
@@ -386,6 +428,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         isContentScrollable: {
             type: PropType<boolean>;
         };
+        hasBorder: {
+            type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to hasRibbon">>;
+        };
+        borderPosition: {
+            type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to ribbonPosition">>;
+        };
+        borderSize: {
+            type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to ribbonSize">>;
+        };
+        borderColor: {
+            type: PropType<import('../../utils/type.utils').RemovedProp<"renamed to ribbonColor">>;
+        };
     }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: Readonly<{
             header?: () => any;

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

@@ -61,6 +61,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     ICONS: Readonly<{
         readonly ANSWERS: VueConstructor<Vue>;
         readonly CHANGE: VueConstructor<Vue>;
+        readonly COMMENT_LOCK: VueConstructor<Vue>;
         readonly COMMENTS_CHECK: VueConstructor<Vue>;
         readonly HEAD_WITH_QUESTION_MARK: VueConstructor<Vue>;
         readonly HIDE_ANSWERS: VueConstructor<Vue>;
@@ -162,6 +163,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_CODE_SIMPLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_CODE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENT_DOTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_COMMENT_PLUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -325,6 +327,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_VIDEO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_VOLUME_HIGH_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_SPARKLES: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_WAND_MAGIC_SPARKLES: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -424,12 +427,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     label: string;
     color: ToggleButtonColor;
     radius: ToggleButtonRadius;
+    isInteractive: boolean;
     state: ToggleButtonState;
+    isSelected: boolean;
     iconLeft: any;
     iconRight: any;
     isLabelUppercase: boolean;
-    isInteractive: boolean;
-    isSelected: boolean;
     hasSmallHorizontalPadding: boolean;
     labelSize: ToggleButtonLabelSize;
 }, {}, {

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

@@ -17,3 +17,27 @@ export declare const WELL_COLORS: {
 };
 export type WellColor = Value<typeof WELL_COLORS>;
 export declare const WELL_DEFAULT_COLOR: "neutral";
+export declare const WELL_RIBBON_COLORS: {
+    readonly NEUTRAL: "neutral";
+    readonly NEUTRAL_HEAVY: "neutral-heavy";
+    readonly NEUTRAL_STRONG: "neutral-strong";
+    readonly PRIMARY: "primary";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly FAIL: "fail";
+    readonly INFO: "info";
+    readonly TRANSPARENT: "transparent";
+};
+export type WellRibbonColor = Value<typeof WELL_RIBBON_COLORS>;
+export declare const WELL_RIBBON_SIZES: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+export type WellRibbonSize = Value<typeof WELL_RIBBON_SIZES>;
+export declare const WELL_RIBBON_POSITIONS: {
+    readonly TOP: "top";
+    readonly LEFT: "left";
+};
+export type WellRibbonPosition = Value<typeof WELL_RIBBON_POSITIONS>;

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

@@ -1,4 +1,4 @@
-import { WellPadding, WellColor } from './Well.consts';
+import { WellPadding, WellColor, WellRibbonPosition, WellRibbonSize, WellRibbonColor } from './Well.consts';
 
 declare function __VLS_template(): {
     accessory?(_: {}): any;
@@ -7,9 +7,21 @@ declare function __VLS_template(): {
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     padding?: WellPadding | null;
     color?: WellColor;
+    hasRadius?: boolean;
+    hasBorder?: boolean;
+    hasRibbon?: boolean;
+    ribbonPosition?: WellRibbonPosition;
+    ribbonSize?: WellRibbonSize;
+    ribbonColor?: WellRibbonColor;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     padding?: WellPadding | null;
     color?: WellColor;
+    hasRadius?: boolean;
+    hasBorder?: boolean;
+    hasRibbon?: boolean;
+    ribbonPosition?: WellRibbonPosition;
+    ribbonSize?: WellRibbonSize;
+    ribbonColor?: WellRibbonColor;
 }>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

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

@@ -91,6 +91,7 @@ export declare const FONTAWESOME_ICONS: {
     readonly FA_CODE_SIMPLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_CODE: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_COMMENT_DOTS: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_COMMENT_PLUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_COMMENT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_COMMENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_COMMENTS_QUESTION_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -254,6 +255,7 @@ export declare const FONTAWESOME_ICONS: {
     readonly FA_VIDEO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_VOLUME_HIGH_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_SPARKLES: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_WAND_MAGIC_SPARKLES: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/index.d.ts

@@ -1,3 +1,4 @@
+export { default as DsActionContent } from './components/ActionContent';
 export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar/Avatar.consts';
 export { default as Badge } from './components/Badge';
@@ -84,6 +85,7 @@ export * from './components/Headers/PageHeader/PageHeader.consts';
 export { default as SectionTitle } from './components/SectionTitle/SectionTitle.vue';
 export { default as DsSectionTitle } from './components/SectionTitle/SectionTitle.vue';
 export * from './components/SectionTitle/SectionTitle.consts';
+export { default as DsSpinnerLoading } from './components/SpinnerLoading/SpinnerLoading.vue';
 export { default as Drawer } from './components/Drawer';
 export { default as DsDrawer } from './components/Drawer';
 export * from './components/Drawer/Drawer.consts';

package/dist/lib/js/utils/type.utils.d.ts

@@ -1 +1,4 @@
 export type Value<T extends {}> = T[keyof T];
+export interface RemovedProp<TMessage extends string> {
+    __removed?: TMessage;
+}

package/lib/images/icons/comment-lock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64"><path fill="currentColor" fill-rule="evenodd" d="M49.5 25C54.8036 25 59.1426 29.3875 59.1426 34.75V40.9658C61.4328 41.6971 63 43.8908 63 46.4502V58.1504C62.9998 61.4408 60.4682 64 57.2139 64H41.7861C38.6523 64 36.0002 61.4408 36 58.1504V46.4502C36 43.8908 37.5672 41.6971 39.8574 40.9658V34.75C39.8574 29.3875 44.1964 25 49.5 25ZM49.5 30.8496C47.3304 30.8496 45.6426 32.5563 45.6426 34.75V40.5996H53.3574V34.75C53.3574 32.5563 51.6696 30.8496 49.5 30.8496Z" clip-rule="evenodd"/><path fill="currentColor" d="M32.5 0C48.8223 0 62.166 11.8359 63 26.7188C61.2129 25.5469 59.1875 24.7266 56.9238 24.4922C55.0176 14.0625 45.1289 5.625 32.5 5.625C18.4414 5.625 7.71875 16.0547 7.71875 28.125C7.71875 33.1641 9.50586 37.7344 12.6035 41.6016C14.0332 43.3594 14.2715 45.8203 13.1992 47.8125L11.0547 51.6797L18.084 48.75C19.3945 48.1641 21.0625 48.1641 22.4922 48.75C25.3516 49.9219 28.5684 50.5078 31.9043 50.625C31.0703 52.3828 30.5938 54.375 30.5938 56.25C26.9004 56.0156 23.4453 55.1953 20.2285 53.9062L6.4082 59.7656C5.93164 60 5.57422 60 5.09766 60C3.31055 60 2 58.7109 2 57.0703C2 56.4844 2.11914 56.0156 2.35742 55.5469L8.19531 45.1172C4.26367 40.4297 2 34.4531 2 28.125C2 12.6562 15.7012 1.84648e-07 32.5 0Z"/></svg>

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

@@ -0,0 +1,99 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import ActionContent from './ActionContent.vue';
+import DsFeatureIcon from '../Icons/FeatureIcon';
+import DsButton from '../Buttons/Button';
+import { ICONS } from '../Icons/Icon';
+
+describe('ActionContent', () => {
+	it('renders', () => {
+		const wrapper = mount(ActionContent);
+
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('renders the feature icon when icon is provided', () => {
+		const wrapper = mount(ActionContent, {
+			props: {
+				icon: ICONS.FA_COMMENT_DOTS,
+			},
+		});
+
+		expect(wrapper.findComponent(DsFeatureIcon).exists()).toBe(true);
+	});
+
+	it('does not render the feature icon when icon is not provided', () => {
+		const wrapper = mount(ActionContent);
+
+		expect(wrapper.findComponent(DsFeatureIcon).exists()).toBe(false);
+	});
+
+	it('passes main and supporting text to the text group', () => {
+		const wrapper = mount(ActionContent, {
+			props: {
+				mainText: 'Main text',
+				supportingText: 'Supporting text',
+			},
+		});
+
+		expect(wrapper.find('.ds-actionContent__text').text()).toContain('Main text');
+		expect(wrapper.find('.ds-actionContent__text').text()).toContain('Supporting text');
+	});
+
+	it('renders a default primary button with the button label and icon', () => {
+		const wrapper = mount(ActionContent, {
+			props: {
+				buttonLabel: 'Confirm',
+				buttonIcon: ICONS.FA_COMMENT_DOTS,
+			},
+		});
+
+		const button = wrapper.findComponent(DsButton);
+		expect(button.exists()).toBe(true);
+		expect(button.text()).toBe('Confirm');
+		expect(button.props('iconLeft')).toStrictEqual(ICONS.FA_COMMENT_DOTS);
+	});
+
+	it('emits button-clicked when the default button is clicked', async () => {
+		const wrapper = mount(ActionContent, {
+			props: {
+				buttonLabel: 'Confirm',
+			},
+		});
+
+		await wrapper.findComponent(DsButton).trigger('click');
+
+		expect(wrapper.emitted('button-clicked')).toHaveLength(1);
+	});
+
+	it('renders the actions slot instead of the default button', () => {
+		const wrapper = mount(ActionContent, {
+			props: {
+				buttonLabel: 'Default button',
+			},
+			slots: {
+				actions: () => h('span', { class: 'custom-action' }, 'Custom action'),
+			},
+		});
+
+		expect(wrapper.find('.custom-action').exists()).toBe(true);
+		expect(wrapper.findComponent(DsButton).exists()).toBe(false);
+	});
+
+	it('adds the vertical modifier when isActionVertical is set', () => {
+		const wrapper = mount(ActionContent, {
+			props: {
+				isActionVertical: true,
+			},
+		});
+
+		expect(wrapper.find('.ds-actionContent__actions').classes()).toContain('-ds-vertical');
+	});
+
+	it('does not add the vertical modifier by default', () => {
+		const wrapper = mount(ActionContent);
+
+		expect(wrapper.find('.ds-actionContent__actions').classes()).not.toContain('-ds-vertical');
+	});
+});

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

@@ -0,0 +1,141 @@
+import ActionContent from './ActionContent.vue';
+import DsButton from '../Buttons/Button';
+import { BUTTON_COLORS, BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button/Button.consts';
+import { ICONS } from '../Icons/Icon';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { toRefs } from 'vue';
+
+export default {
+	title: 'Components/ActionContent',
+	component: ActionContent,
+} as Meta<typeof ActionContent>;
+
+const StoryTemplate: StoryFn<typeof ActionContent> = (args) => {
+	return {
+		components: { ActionContent },
+		setup() {
+			return {
+				...toRefs(args),
+				ICONS,
+			};
+		},
+		template: `
+				<action-content
+						:icon="ICONS[icon]"
+						:main-text="mainText"
+						:supporting-text="supportingText"
+						:button-label="buttonLabel"
+						:button-icon="ICONS[buttonIcon]"
+						:is-action-vertical="isActionVertical"
+				>
+				<template v-if="actions" #actions><span v-html="actions" /></template>
+				</action-content>`,
+	};
+};
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	icon: 'FA_COMMENT_DOTS',
+	mainText: 'Main text tutaj sobie będzie',
+	supportingText: 'Supporting text tutaj będzie',
+	buttonLabel: 'Button label',
+	buttonIcon: null,
+	isActionVertical: false,
+	actions: '',
+} as Args;
+
+const argTypes = {
+	icon: {
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
+	},
+	mainText: {
+		control: 'text',
+	},
+	supportingText: {
+		control: 'text',
+	},
+	buttonLabel: {
+		control: 'text',
+	},
+	buttonIcon: {
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
+	},
+	isActionVertical: {
+		control: 'boolean',
+	},
+	actions: {
+		control: 'text',
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/uLBrJvVwTYzuch6VnDOBlL/INI-188---Dyskusje-2.0-NEW?node-id=4001-152961&m=dev',
+	},
+};
+
+const WithActionsSlotTemplate: StoryFn<typeof ActionContent> = (args) => {
+	return {
+		components: { ActionContent, DsButton },
+		setup() {
+			return {
+				...toRefs(args),
+				ICONS,
+				BUTTON_COLORS,
+				BUTTON_SIZES,
+				BUTTON_TYPES,
+			};
+		},
+		template: `
+				<action-content
+						:icon="ICONS[icon]"
+						:main-text="mainText"
+						:supporting-text="supportingText"
+						:is-action-vertical="isActionVertical"
+				>
+				<template #actions>
+					<ds-button
+							:color="BUTTON_COLORS.NEUTRAL"
+							:type="BUTTON_TYPES.OUTLINED"
+							:size="BUTTON_SIZES.SMALL"
+					>Cancel</ds-button>
+					<ds-button
+							:color="BUTTON_COLORS.PRIMARY"
+							:type="BUTTON_TYPES.FILLED"
+							:size="BUTTON_SIZES.SMALL"
+					>Confirm</ds-button>
+				</template>
+				</action-content>`,
+	};
+};
+
+export const WithActionsSlot = WithActionsSlotTemplate.bind({});
+
+WithActionsSlot.argTypes = {
+	icon: argTypes.icon,
+	mainText: argTypes.mainText,
+	supportingText: argTypes.supportingText,
+	isActionVertical: argTypes.isActionVertical,
+} as ArgTypes;
+
+WithActionsSlot.args = {
+	icon: 'FA_COMMENT_DOTS',
+	mainText: 'Main text tutaj sobie będzie',
+	supportingText: 'Supporting text tutaj będzie',
+	isActionVertical: false,
+} as Args;
+
+WithActionsSlot.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/uLBrJvVwTYzuch6VnDOBlL/INI-188---Dyskusje-2.0-NEW?node-id=4001-152961&m=dev',
+	},
+};

package/lib/js/components/ActionContent/ActionContent.vue

@@ -0,0 +1,104 @@
+<template>
+	<div class="ds-actionContent">
+		<div class="ds-actionContent__content">
+			<ds-feature-icon
+				v-if="icon"
+				class="ds-actionContent__icon"
+				:icon="icon"
+				:color="FEATURE_ICON_COLOR.PRIMARY"
+				:size="FEATURE_ICON_SIZES.MEDIUM"
+				double-background
+			/>
+			<ds-text-group
+				class="ds-actionContent__text"
+				:eyebrow-text="null"
+				:main-text="mainText"
+				:supporting-text="supportingText"
+				:size="TEXT_GROUP_SIZES.LARGE"
+				:align="TEXT_GROUP_ALIGNS.CENTER"
+				:main-text-color="TEXT_GROUP_MAIN_TEXT_COLORS.PRIMARY"
+				:is-interactive="false"
+			/>
+		</div>
+		<div class="ds-actionContent__actions" :class="{ '-ds-vertical': isActionVertical }">
+			<slot name="actions">
+				<ds-button
+					:color="BUTTON_COLORS.PRIMARY"
+					:type="BUTTON_TYPES.FILLED"
+					:size="BUTTON_SIZES.SMALL"
+					:radius="BUTTON_RADIUSES.ROUNDED"
+					:icon-left="buttonIcon"
+					@click="$emit('button-clicked')"
+					>{{ buttonLabel }}</ds-button
+				>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../styles/settings/spacings';
+
+.ds-actionContent {
+	display: flex;
+	flex-direction: column;
+	gap: $space-8;
+	width: 100%;
+
+	&__content {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		gap: $space-4;
+	}
+
+	&__actions {
+		display: flex;
+		gap: $space-8;
+		justify-content: center;
+
+		&.-ds-vertical {
+			align-items: stretch;
+			flex-direction: column;
+		}
+	}
+}
+</style>
+
+<script setup lang="ts">
+import DsFeatureIcon from '../Icons/FeatureIcon';
+import { FEATURE_ICON_COLOR, FEATURE_ICON_SIZES } from '../Icons/FeatureIcon/FeatureIcon.consts';
+import DsTextGroup from '../TextGroup/TextGroup.vue';
+import {
+	TEXT_GROUP_ALIGNS,
+	TEXT_GROUP_MAIN_TEXT_COLORS,
+	TEXT_GROUP_SIZES,
+} from '../TextGroup/TextGroup.consts';
+import DsButton, { BUTTON_RADIUSES } from '../Buttons/Button';
+import { BUTTON_COLORS, BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button/Button.consts';
+import { IconItem } from '../Icons/Icon';
+
+const {
+	icon = null,
+	mainText = null,
+	supportingText = null,
+	buttonLabel,
+	buttonIcon = null,
+	isActionVertical = false,
+} = defineProps<{
+	icon?: IconItem | null;
+	mainText?: string | null;
+	supportingText?: string | null;
+	buttonLabel?: string;
+	buttonIcon?: IconItem | null;
+	isActionVertical?: boolean;
+}>();
+
+defineEmits<{
+	(e: 'button-clicked'): void;
+}>();
+
+defineSlots<{
+	actions?: () => any;
+}>();
+</script>

package/lib/js/components/ActionContent/index.ts

@@ -0,0 +1,3 @@
+import ActionContent from './ActionContent.vue';
+
+export default ActionContent;