@bethinkpl/design-system 26.15.1 → 27.0.0

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

@@ -1,7 +1,12 @@
 import Card from './Card.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
-import { CARD_BORDER_COLORS, CARD_BORDER_POSITIONS, CARD_BORDER_SIZES } from './Card.consts';
+import {
+	CARD_BORDER_COLORS,
+	CARD_BORDER_POSITIONS,
+	CARD_BORDER_SIZES,
+	CARD_PADDING_SIZES,
+} from './Card.consts';
 import { LOADING_BAR_COLORS } from '../../LoadingBar';
 
 export default {
@@ -12,27 +17,18 @@ export default {
 const StoryTemplate: StoryFn<typeof Card> = (args) => ({
 	components: { Card },
 	setup() {
-		return args;
+		return { args };
 	},
 	template: `
-		<card :header-has-padding="headerHasPadding"
-			  :divider-under-header="dividerUnderHeader"
-			  :has-border="hasBorder"
-			  :border-position="borderPosition"
-			  :border-size="borderSize"
-			  :border-color="borderColor"
-			  :has-loading-bar="hasLoadingBar"
-			  :loading-bar-color="loadingBarColor"
-			  :loading-bar-time="loadingBarTime"
-		>
-			<template v-if="header" #header>
-				<div v-html="header" />
+		<card v-bind="args">
+			<template v-if="args.header" #header>
+				<div v-html="args.header" />
 			</template>
-			<template v-if="content" #content>
-				<div v-html="content" />
+			<template v-if="args.content" #content>
+				<div v-html="args.content" />
 			</template>
-			<template v-if="footer" #footer>
-				<div v-html="footer" />
+			<template v-if="args.footer" #footer>
+				<div v-html="args.footer" />
 			</template>
 		</card>`,
 });
@@ -44,6 +40,8 @@ const args = {
 	content: 'content slot that supports <b>HTML markup</b>',
 	footer: 'footer slot',
 	headerHasPadding: false,
+	footerHasPadding: false,
+	paddingSize: CARD_PADDING_SIZES.SMALL,
 	dividerUnderHeader: false,
 	hasBorder: false,
 	borderPosition: CARD_BORDER_POSITIONS.TOP,
@@ -52,6 +50,7 @@ const args = {
 	hasLoadingBar: false,
 	loadingBarColor: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
 	loadingBarTime: '0',
+	isFlat: false,
 } as Args;
 
 const argTypes = {
@@ -76,6 +75,10 @@ const argTypes = {
 		control: 'select',
 		options: Object.values(LOADING_BAR_COLORS),
 	},
+	paddingSize: {
+		control: 'select',
+		options: Object.values(CARD_PADDING_SIZES),
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

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

@@ -1,12 +1,16 @@
 <template>
 	<div
-		:class="{
-			'ds-card': true,
-			[borderColorClass]: true,
-			[borderSizeClass]: true,
-			'-ds-top-border': hasTopBoarder,
-			'-ds-left-border': hasLeftBoarder,
-		}"
+		:class="[
+			'ds-card',
+			borderColorClass,
+			borderSizeClass,
+			{
+				'-ds-top-border': hasTopBoarder,
+				'-ds-left-border': hasLeftBoarder,
+				'-ds-paddingLarge': paddingSize === CARD_PADDING_SIZES.LARGE,
+				'-ds-flat': isFlat,
+			},
+		]"
 	>
 		<ds-loading-bar
 			v-if="hasLoadingBar"
@@ -30,7 +34,13 @@
 		<div v-if="$slots.content" class="ds-card__content">
 			<slot name="content" />
 		</div>
-		<slot name="footer" />
+		<div
+			v-if="$slots.footer"
+			class="ds-card__footer"
+			:class="{ '-ds-withPadding': footerHasPadding }"
+		>
+			<slot name="footer" />
+		</div>
 	</div>
 </template>
 
@@ -44,12 +54,15 @@
 .ds-card {
 	$root: &;
 
-	background-color: $color-default-background;
-	border-radius: $radius-m;
-	box-shadow: $shadow-s;
 	position: relative;
 	width: inherit;
 
+	&:not(.-ds-flat) {
+		background-color: $color-default-background;
+		border-radius: $radius-m;
+		box-shadow: $shadow-s;
+	}
+
 	&.-ds-top-border {
 		border-top: $border-l transparent solid;
 	}
@@ -59,32 +72,50 @@
 	}
 
 	&.-ds-border-size-small {
-		border-radius: $radius-xs;
 		border-top-width: $border-s;
 
+		#{$root}:not(.-ds-flat) & {
+			border-radius: $radius-xs;
+		}
+
 		#{$root}__loadingBar {
-			border-radius: $radius-xs $radius-xs 0 0;
 			top: -$border-s;
+
+			#{$root}:not(.-ds-flat) & {
+				border-radius: $radius-xs $radius-xs 0 0;
+			}
 		}
 	}
 
 	&.-ds-border-size-medium {
-		border-radius: $radius-s;
 		border-top-width: $border-m;
 
+		#{$root}:not(.-ds-flat) & {
+			border-radius: $radius-s;
+		}
+
 		#{$root}__loadingBar {
-			border-radius: $radius-s $radius-s 0 0;
 			top: -$border-m;
+
+			#{$root}:not(.-ds-flat) & {
+				border-radius: $radius-s $radius-s 0 0;
+			}
 		}
 	}
 
 	&.-ds-border-size-large {
-		border-radius: $radius-m;
 		border-top-width: $border-l;
 
+		#{$root}:not(.-ds-flat) & {
+			border-radius: $radius-m;
+		}
+
 		#{$root}__loadingBar {
-			border-radius: $radius-m $radius-m 0 0;
 			top: -$border-l;
+
+			#{$root}:not(.-ds-flat) & {
+				border-radius: $radius-m $radius-m 0 0;
+			}
 		}
 	}
 
@@ -121,23 +152,45 @@
 	&__header {
 		&.-ds-withPadding {
 			padding: $space-s;
+
+			#{$root}.-ds-paddingLarge & {
+				padding: $space-l $space-l $space-s;
+			}
 		}
 	}
 
 	&__headerDivider {
 		&.-ds-withHorizontalMargin {
 			margin: 0 $space-s;
+
+			#{$root}.-ds-paddingLarge & {
+				margin: 0 $space-l;
+			}
 		}
 	}
 
 	&__content {
 		padding: $space-s;
+
+		#{$root}.-ds-paddingLarge & {
+			padding: $space-s $space-l;
+		}
+	}
+
+	&__footer {
+		&.-ds-withPadding {
+			padding: 0 $space-s $space-s;
+
+			#{$root}.-ds-paddingLarge & {
+				padding: 0 $space-l $space-l;
+			}
+		}
 	}
 }
 </style>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 
 import DsDivider from '../../Divider/Divider.vue';
 import DsLoadingBar, { LOADING_BAR_COLORS, LoadingBarColors } from '../../LoadingBar';
@@ -145,79 +198,66 @@ import {
 	CARD_BORDER_COLORS,
 	CARD_BORDER_POSITIONS,
 	CARD_BORDER_SIZES,
+	CARD_PADDING_SIZES,
 	CardBorderColors,
 	CardBorderPositions,
 	CardBorderSizes,
+	CardPaddingSize,
 } from './Card.consts';
 
-export default defineComponent({
-	name: 'Card',
-	components: { DsDivider, DsLoadingBar },
-	props: {
-		headerHasPadding: {
-			type: Boolean,
-			default: false,
-		},
-		dividerUnderHeader: {
-			type: Boolean,
-			default: false,
-		},
-		hasBorder: {
-			type: Boolean,
-			default: false,
-		},
-		borderPosition: {
-			type: String as PropType<CardBorderPositions>,
-			default: CARD_BORDER_POSITIONS.TOP,
-		},
-		borderSize: {
-			type: String as PropType<CardBorderSizes>,
-			default: CARD_BORDER_SIZES.LARGE,
-		},
-		borderColor: {
-			type: String as PropType<CardBorderColors>,
-			default: CARD_BORDER_COLORS.NEUTRAL_HEAVY,
-		},
-		hasLoadingBar: {
-			type: Boolean,
-			default: false,
-		},
-		loadingBarColor: {
-			type: String as PropType<LoadingBarColors>,
-			default: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
-		},
-		loadingBarTime: {
-			type: String,
-			default: '0',
-		},
-	},
-
-	computed: {
-		hasLeftBoarder() {
-			return (
-				this.hasBorder &&
-				this.borderPosition === CARD_BORDER_POSITIONS.LEFT &&
-				!this.hasLoadingBar
-			);
-		},
-		hasTopBoarder() {
-			return (
-				(this.hasBorder && this.borderPosition === CARD_BORDER_POSITIONS.TOP) ||
-				this.hasLoadingBar
-			);
-		},
-		borderColorClass() {
-			if (this.hasLoadingBar) {
-				return '-ds-border-color-transparent';
-			}
-			return `-ds-border-color-${this.borderColor}`;
-		},
-		borderSizeClass() {
-			if (!this.hasBorder && !this.hasLoadingBar) {
-				return '';
-			}
-			return `-ds-border-size-${this.borderSize}`;
-		},
-	},
+const {
+	headerHasPadding = false,
+	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,
+	hasLoadingBar = false,
+	loadingBarColor = LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+	loadingBarTime = '0',
+	isFlat = false,
+} = defineProps<{
+	headerHasPadding?: boolean;
+	footerHasPadding?: boolean;
+	paddingSize?: CardPaddingSize;
+	dividerUnderHeader?: boolean;
+	hasBorder?: boolean;
+	borderPosition?: CardBorderPositions;
+	borderSize?: CardBorderSizes;
+	borderColor?: CardBorderColors;
+	hasLoadingBar?: boolean;
+	loadingBarColor?: LoadingBarColors;
+	loadingBarTime?: string;
+	isFlat?: boolean;
+}>();
+
+defineSlots<{
+	header?: () => any;
+	content?: () => any;
+	footer?: () => any;
+}>();
+
+const hasLeftBoarder = computed(() => {
+	return hasBorder && borderPosition === CARD_BORDER_POSITIONS.LEFT && !hasLoadingBar;
+});
+
+const hasTopBoarder = computed(() => {
+	return (hasBorder && borderPosition === CARD_BORDER_POSITIONS.TOP) || hasLoadingBar;
+});
+
+const borderColorClass = computed(() => {
+	if (hasLoadingBar) {
+		return '-ds-border-color-transparent';
+	}
+	return `-ds-border-color-${borderColor}`;
+});
+
+const borderSizeClass = computed(() => {
+	if (!hasBorder && !hasLoadingBar) {
+		return null;
+	}
+	return `-ds-border-size-${borderSize}`;
 });
 </script>

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

@@ -1,3 +1,4 @@
 import Card from './Card.vue';
 
+export * from './Card.consts';
 export default Card;

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

@@ -5,6 +5,7 @@ import Chip from './Chip.vue';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import Icon, { ICONS } from '../Icons/Icon';
 import { CHIP_COLORS, CHIP_SIZES } from './Chip.consts';
+import IconButton from '../Buttons/IconButton';
 
 interface createComponentOptions {
 	label?: string;
@@ -70,7 +71,7 @@ describe('Chip', () => {
 	it('renders remove', () => {
 		const component = createComponent({ isRemovable: true });
 
-		const removeButton = component.findComponent<typeof Chip>('.ds-chip__remove');
+		const removeButton = component.findComponent<typeof IconButton>('.ds-chip__remove');
 		expect(removeButton.exists()).toBe(true);
 		expect(removeButton.props().icon).toBe(ICONS.FA_XMARK);
 
@@ -78,7 +79,7 @@ describe('Chip', () => {
 		expect(component.emitted('remove')?.length).toBe(1);
 	});
 
-	it("doesn' contain x-small class by default", () => {
+	it("doesn't contain x-small class by default", () => {
 		const component = createComponent({ size: CHIP_SIZES.SMALL });
 
 		expect(component.classes()).not.toContain('-x-small');

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

@@ -238,7 +238,6 @@ $chip-colors: (
 
 <script lang="ts">
 import { defineComponent, toRaw } from 'vue';
-import { Value } from '../../utils/type.utils';
 import { BUTTON_ELEVATIONS } from '../Buttons/Button';
 import IconButton, {
 	ICON_BUTTON_COLORS,

package/lib/js/components/DatePickers/DateBox/DateBox.stories.ts

@@ -2,7 +2,6 @@ import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
 import { ICONS } from '../../Icons/Icon';
 import { DATE_PICKER_COLORS, DATE_PICKER_STATES } from '../DatePicker';
 import { ComponentProps } from 'vue-component-type-helpers';
-import { useArgs } from '@storybook/preview-api';
 import DateBox from './index';
 
 type DateBoxProps = ComponentProps<typeof DateBox>;
@@ -11,8 +10,6 @@ const meta: Meta<DateBoxProps> = {
 	title: 'Components/DatePickers/DateBox',
 	component: DateBox,
 	render: (args) => {
-		const [_, updateArgs] = useArgs();
-
 		return {
 			components: { DateBox },
 			setup() {

package/lib/js/components/Form/FormField/FormField.consts.ts

@@ -0,0 +1,10 @@
+import { Value } from '../../../utils/type.utils';
+
+export const FORM_FIELD_STATES = {
+	DEFAULT: 'default',
+	DISABLED: 'disabled',
+	ERROR: 'error',
+	SUCCESS: 'success',
+} as const;
+
+export type FormFieldState = Value<typeof FORM_FIELD_STATES>;

package/lib/js/components/Form/FormField/FormField.spec.ts

@@ -0,0 +1,138 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import FormField from './FormField.vue';
+import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
+import FormFieldMessage from './FormFieldMessage/FormFieldMessage.vue';
+
+const fieldId = 'form-field-v-0';
+const messageId = 'form-field-v-0-message';
+
+function setup(
+	props: ComponentProps<typeof FormField> = {},
+	slots: Partial<ComponentSlots<typeof FormField>> = {},
+) {
+	return mount(FormField, {
+		props,
+		slots: {
+			field() {
+				return [h('input')];
+			},
+			...slots,
+		},
+	});
+}
+
+describe('FormField', () => {
+	it('should render', () => {
+		const wrapper = setup(
+			{
+				label: 'Label',
+				labelInfo: 'Label info',
+				subLabel: 'Sub Label',
+				hasRequiredIndicator: true,
+			},
+			{
+				labelAside: () => [h('span', 'Label aside')],
+				message: () => [
+					h(
+						FormFieldMessage,
+						{
+							messageId,
+						},
+						() => 'Message',
+					),
+				],
+				fieldStatus: () => [h('span', 'Field status')],
+				help: () => [h('span', 'Help')],
+			},
+		);
+
+		expect(wrapper.exists()).toBe(true);
+		expect(wrapper.find('.ds-formField__label').attributes('for')).toBe(fieldId);
+		expect(wrapper.find('.ds-formField__labelText').text()).toBe('Label');
+		expect(wrapper.find('.ds-formField__labelRequired').text()).toBe('*');
+		expect(wrapper.find('.ds-formField__labelInfo').text()).toBe('Label info');
+		expect(wrapper.find('.ds-formField__subLabelRow').text()).toBe('Sub Label');
+		expect(wrapper.find('.ds-formField__field input').exists()).toBe(true);
+		expect(wrapper.find('.ds-formField__labelAside').text()).toBe('Label aside');
+		expect(wrapper.find(`#${messageId}`).text()).toBe('Message');
+		expect(wrapper.find('.ds-formField__fieldStatus').text()).toBe('Field status');
+	});
+
+	it.each([
+		{
+			name: 'only label',
+			props: {
+				label: 'Label',
+			},
+			slots: {},
+			expected: true,
+		},
+		{
+			name: 'only label aside',
+			props: {},
+			slots: {
+				labelAside: () => [h('span', 'Label aside')],
+			},
+			expected: true,
+		},
+		{
+			name: 'only subLabel',
+			props: {
+				subLabel: 'Sub Label',
+			},
+			slots: {},
+			expected: true,
+		},
+		{
+			name: 'no labels wrapper',
+			props: {},
+			slots: {},
+			expected: false,
+		},
+	])(`should render labels wrapper: $name`, ({ props, slots, expected }) => {
+		const wrapper = setup(props, slots);
+
+		expect(wrapper.find('.ds-formField__labels').exists()).toBe(expected);
+	});
+
+	it.each([
+		{
+			name: 'only message',
+			props: {},
+			slots: {
+				message: () => [h(FormFieldMessage, { messageId }, () => 'Message')],
+			},
+			expected: true,
+		},
+		{
+			name: 'only field status',
+			props: {},
+			slots: {
+				fieldStatus: () => [h('span', 'Field status')],
+			},
+			expected: true,
+		},
+		{
+			name: 'no footer row',
+			props: {},
+			slots: {},
+			expected: false,
+		},
+	])('should render footer row: $name', ({ props, slots, expected }) => {
+		const wrapper = setup(props, slots);
+
+		expect(wrapper.find('.ds-formField__footerRow').exists()).toBe(expected);
+	});
+
+	it('should render message', () => {
+		const messageText = 'Message text';
+		const wrapper = setup({
+			messageText,
+		});
+
+		expect(wrapper.find('.ds-formField__message').exists()).toBe(true);
+		expect(wrapper.find(`#${messageId}`).text()).toBe(messageText);
+	});
+});

package/lib/js/components/Form/FormField/FormField.stories.shared.ts

@@ -0,0 +1,53 @@
+import { FORM_FIELD_STATES } from './FormField.consts';
+import { Meta, StoryObj } from '@storybook/vue3';
+import FormField from './FormField.vue';
+
+export const argTypes: Meta<typeof FormField>['argTypes'] = {
+	label: {
+		control: 'text',
+	},
+	state: {
+		control: 'select',
+		options: Object.values(FORM_FIELD_STATES),
+	},
+	hasRequiredIndicator: {
+		control: 'boolean',
+	},
+	labelInfo: {
+		control: 'text',
+	},
+	subLabel: {
+		control: 'text',
+	},
+	fieldId: {
+		control: 'text',
+	},
+	labelAside: {
+		control: 'text',
+	},
+	message: {
+		control: 'text',
+	},
+	fieldStatus: {
+		control: 'text',
+	},
+	help: {
+		control: 'boolean',
+	},
+	messageText: {
+		control: 'text',
+	},
+};
+
+export const args: StoryObj<typeof FormField>['args'] = {
+	label: 'Label',
+	state: FORM_FIELD_STATES.DEFAULT,
+	hasRequiredIndicator: false,
+	labelInfo: '(opcjonalne)',
+	subLabel: 'Sublabel write here',
+	labelAside: 'Label aside',
+	message: '',
+	help: true,
+	fieldStatus: 'Field status',
+	messageText: '',
+};