✨ Added n8n-card component. Added spacing utility classes.

packages/design-system/src/components/N8nButton/Button.vue

@@ -25,7 +25,11 @@
 				:size="props.size"
 			/>
 		</span>
-		<span v-if="props.label">{{ props.label }}</span>
+		<span v-if="props.label || $slots.default">
+			<slot>
+				{{ props.label }}
+			</slot>
+		</span>
 	</component>
 </template>
 

packages/design-system/src/components/N8nCard/Card.stories.ts

@@ -0,0 +1,29 @@
+/* tslint:disable:variable-name */
+
+import N8nCard from './Card.vue';
+import {StoryFn} from "@storybook/vue";
+
+export default {
+	title: 'Atoms/Card',
+	component: N8nCard
+};
+
+export const Default: StoryFn = (args, {argTypes}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nCard,
+	},
+	template: `<n8n-card v-bind="$props">This is a card.</n8n-card>`,
+});
+
+export const WithHeaderAndFooter: StoryFn = (args, {argTypes}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nCard,
+	},
+	template: `<n8n-card v-bind="$props">
+		<template #header>Header</template>
+		This is a card.
+		<template #footer>Footer</template>
+	</n8n-card>`,
+});

packages/design-system/src/components/N8nCard/Card.vue

@@ -0,0 +1,49 @@
+<template>
+	<div :class="['card', $style.card]" v-on="$listeners">
+		<div :class="$style.header" v-if="$slots.header">
+			<slot name="header" />
+		</div>
+		<div :class="$style.body" v-if="$slots.default">
+			<slot />
+		</div>
+		<div :class="$style.footer" v-if="$slots.footer">
+			<slot name="footer" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'n8n-card',
+});
+</script>
+
+<style lang="scss" module>
+.card {
+	border-radius: var(--border-radius-large);
+	border: var(--border-base);
+	background-color: var(--color-background-xlight);
+	padding: var(--spacing-s);
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.header,
+.footer {
+	display: flex;
+  	flex-direction: row;
+  	justify-content: space-between;
+	align-items: center;
+}
+
+.body {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+</style>

packages/design-system/src/components/N8nCard/__tests__/Card.spec.ts

@@ -0,0 +1,26 @@
+import {render} from '@testing-library/vue';
+import N8nCard from "../Card.vue";
+
+describe('components', () => {
+	describe('N8nCard', () => {
+		it('should render correctly', () => {
+			const wrapper = render(N8nCard, {
+				slots: {
+					default: 'This is a card.',
+				},
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+
+		it('should render correctly with header and footer', () => {
+			const wrapper = render(N8nCard, {
+				slots: {
+					header: 'Header',
+					default: 'This is a card.',
+					footer: 'Footer',
+				},
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+	});
+});

packages/design-system/src/components/N8nCard/index.ts

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

packages/design-system/src/components/index.js

@@ -38,6 +38,7 @@ import N8nActionToggle from './N8nActionToggle';
 import N8nAvatar from './N8nAvatar';
 import N8nBadge from './N8nBadge';
 import N8nButton from './N8nButton';
+import N8nCard from './N8nCard';
 import N8nFormBox from './N8nFormBox';
 import N8nFormInput from './N8nFormInput';
 import N8nFormInputs from './N8nFormInputs';
@@ -75,6 +76,7 @@ export {
 	N8nAvatar,
 	N8nBadge,
 	N8nButton,
+	N8nCard,
 	N8nHeading,
 	N8nFormBox,
 	N8nFormInput,

packages/design-system/theme/src/index.scss

@@ -82,3 +82,4 @@
 // @use "./avatar.scss";
 @use "./drawer.scss";
 // @use "./popconfirm.scss";
+@use "./utilities.scss";

packages/design-system/theme/src/utilities.scss

@@ -0,0 +1,19 @@
+@use 'sass:string';
+
+$spacing-sizes: '5xs', '4xs', '3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl';
+$spacing-properties: 'margin', 'padding';
+$spacing-sides: 'top', 'right', 'bottom', 'left';
+
+@each $size in $spacing-sizes {
+  @each $property in $spacing-properties {
+	@each $side in $spacing-sides {
+	  .#{string.slice($property, 0, 1)}#{string.slice($side, 0, 1)}-#{$size} {
+		#{$property}-#{$side}: var(--spacing-#{$size}) !important;
+	  }
+	}
+
+	.#{string.slice($property, 0, 1)}-#{$size} {
+	  #{$property}: var(--spacing-#{$size}) !important;
+	}
+  }
+}