@bethinkpl/design-system 39.1.0 → 40.0.0

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;

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

@@ -12,21 +12,28 @@ export const CARD_PADDING_SIZES = {
 
 export type CardPaddingSize = Value<typeof CARD_PADDING_SIZES>;
 
-export const CARD_BORDER_COLORS = CONTAINER_RIBBON_COLORS;
+export const CARD_BACKGROUND_COLORS = {
+	DEFAULT: 'default',
+	NEUTRAL: 'neutral',
+} as const;
+
+export type CardBackgroundColor = Value<typeof CARD_BACKGROUND_COLORS>;
+
+export const CARD_RIBBON_COLORS = CONTAINER_RIBBON_COLORS;
 
-export type CardBorderColors = Value<typeof CARD_BORDER_COLORS>;
+export type CardRibbonColors = Value<typeof CARD_RIBBON_COLORS>;
 
-export const CARD_BORDER_SIZES = CONTAINER_RIBBON_SIZES;
+export const CARD_RIBBON_SIZES = CONTAINER_RIBBON_SIZES;
 
-export type CardBorderSizes = Value<typeof CARD_BORDER_SIZES>;
+export type CardRibbonSizes = Value<typeof CARD_RIBBON_SIZES>;
 
-export const CARD_BORDER_POSITIONS = {
+export const CARD_RIBBON_POSITIONS = {
 	TOP: 'top',
 	LEFT: 'left',
 } as const;
 
-export type CardBorderPositions = Value<typeof CARD_BORDER_POSITIONS>;
+export type CardRibbonPositions = Value<typeof CARD_RIBBON_POSITIONS>;
 
-export const CARD_BORDER_RADIUS = CONTAINER_RIBBON_RADIUSES;
+export const CARD_RIBBON_RADIUS = CONTAINER_RIBBON_RADIUSES;
 
-export type CardBorderRadius = Value<typeof CARD_BORDER_RADIUS>;
+export type CardRibbonRadius = Value<typeof CARD_RIBBON_RADIUS>;

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

@@ -3,7 +3,7 @@ import { ComponentMountingOptions, mount } from '@vue/test-utils';
 import { h } from 'vue';
 
 import Card from './Card.vue';
-import { CARD_PADDING_SIZES } from './Card.consts';
+import { CARD_BACKGROUND_COLORS, CARD_PADDING_SIZES } from './Card.consts';
 
 describe('Card', () => {
 	const createComponent = (options: ComponentMountingOptions<typeof Card> = {}) => {
@@ -177,4 +177,64 @@ describe('Card', () => {
 
 		expect(component.find('.ds-card').classes()).toContain('-ds-flat');
 	});
+
+	it('should not set no-radius class by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-card').classes()).not.toContain('-ds-noRadius');
+	});
+
+	it('should set no-radius class when hasRadius is false', () => {
+		const component = createComponent({
+			props: { hasRadius: false },
+		});
+
+		expect(component.find('.ds-card').classes()).toContain('-ds-noRadius');
+	});
+
+	it('should not set neutral background class by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-card').classes()).not.toContain('-ds-backgroundNeutral');
+	});
+
+	it('should set neutral background class when backgroundColor is neutral', () => {
+		const component = createComponent({
+			props: { backgroundColor: CARD_BACKGROUND_COLORS.NEUTRAL },
+		});
+
+		expect(component.find('.ds-card').classes()).toContain('-ds-backgroundNeutral');
+	});
+
+	it('should not give the ribbon a radius when only hasRibbonRadius is set', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, hasRibbonRadius: true },
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(false);
+	});
+
+	it('should give the ribbon a radius when hasRibbonRadius and card has no radius', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, hasRibbonRadius: true, hasRadius: false },
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(true);
+	});
+
+	it('should not give the ribbon a radius when hasRadius is false but hasRibbonRadius is false', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, hasRibbonRadius: false, hasRadius: false },
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(false);
+	});
+
+	it('should give the ribbon a radius when hasRibbonRadius and card is flat', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, hasRibbonRadius: true, isFlat: true },
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(true);
+	});
 });

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

@@ -2,9 +2,10 @@ import Card from './Card.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
-	CARD_BORDER_COLORS,
-	CARD_BORDER_POSITIONS,
-	CARD_BORDER_SIZES,
+	CARD_BACKGROUND_COLORS,
+	CARD_RIBBON_COLORS,
+	CARD_RIBBON_POSITIONS,
+	CARD_RIBBON_SIZES,
 	CARD_PADDING_SIZES,
 } from './Card.consts';
 import { LOADING_BAR_COLORS } from '../../LoadingBar';
@@ -44,10 +45,12 @@ const args = {
 	footerHasPadding: false,
 	paddingSize: CARD_PADDING_SIZES.SMALL,
 	dividerUnderHeader: false,
-	hasBorder: false,
-	borderPosition: CARD_BORDER_POSITIONS.TOP,
-	borderSize: CARD_BORDER_SIZES.LARGE,
-	borderColor: CARD_BORDER_COLORS.NEUTRAL_HEAVY,
+	hasRibbon: false,
+	hasRadius: true,
+	backgroundColor: CARD_BACKGROUND_COLORS.DEFAULT,
+	ribbonPosition: CARD_RIBBON_POSITIONS.TOP,
+	ribbonSize: CARD_RIBBON_SIZES.MEDIUM,
+	ribbonColor: CARD_RIBBON_COLORS.NEUTRAL_HEAVY,
 	hasRibbonRadius: false,
 	hasLoadingBar: false,
 	loadingBarColor: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
@@ -62,17 +65,21 @@ const argTypes = {
 		control: 'text',
 	},
 	footer: { control: 'text' },
-	borderPosition: {
+	backgroundColor: {
 		control: 'select',
-		options: Object.values(CARD_BORDER_POSITIONS),
+		options: Object.values(CARD_BACKGROUND_COLORS),
 	},
-	borderSize: {
+	ribbonPosition: {
 		control: 'select',
-		options: Object.values(CARD_BORDER_SIZES),
+		options: Object.values(CARD_RIBBON_POSITIONS),
 	},
-	borderColor: {
+	ribbonSize: {
 		control: 'select',
-		options: Object.values(CARD_BORDER_COLORS),
+		options: Object.values(CARD_RIBBON_SIZES),
+	},
+	ribbonColor: {
+		control: 'select',
+		options: Object.values(CARD_RIBBON_COLORS),
 	},
 	hasRibbonRadius: {
 		control: 'boolean',