Added n8n-card component. Added spacing utility classes.

This commit is contained in:
Alex Grozav 2022-04-28 13:10:03 +03:00
parent a74bce631c
commit 065b50b2ff
8 changed files with 134 additions and 1 deletions

View file

@ -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>

View file

@ -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>`,
});

View file

@ -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>

View file

@ -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();
});
});
});

View file

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

View file

@ -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,

View file

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

View file

@ -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;
}
}
}