mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
✨ Added n8n-card component. Added spacing utility classes.
This commit is contained in:
parent
a74bce631c
commit
065b50b2ff
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>`,
|
||||
});
|
49
packages/design-system/src/components/N8nCard/Card.vue
Normal file
49
packages/design-system/src/components/N8nCard/Card.vue
Normal 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>
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
3
packages/design-system/src/components/N8nCard/index.ts
Normal file
3
packages/design-system/src/components/N8nCard/index.ts
Normal file
|
@ -0,0 +1,3 @@
|
|||
import N8nCard from './Card.vue';
|
||||
|
||||
export default N8nCard;
|
|
@ -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,
|
||||
|
|
|
@ -82,3 +82,4 @@
|
|||
// @use "./avatar.scss";
|
||||
@use "./drawer.scss";
|
||||
// @use "./popconfirm.scss";
|
||||
@use "./utilities.scss";
|
||||
|
|
19
packages/design-system/theme/src/utilities.scss
Normal file
19
packages/design-system/theme/src/utilities.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue