Skip to content

Commit d6aa9e5

Browse files
linspwlinspw
authored
feat: add a-card tests and separate scss (#6)
1 parent 8ccf208 commit d6aa9e5

File tree

6 files changed

+141
-69
lines changed

6 files changed

+141
-69
lines changed

‎src/components/atoms/a-card/__tests__/__snapshots__/a-card.test.js.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`ACard render correctly with default props 1`] = `"<div class=\\"a-card a-card--variant-default a-card--elevation-medium\\">My first test</div>"`;

‎src/components/atoms/a-card/__tests__/a-card.test.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { render } from '@testing-library/vue';
2+
import ACard from '../a-card.vue';
3+
4+
describe('ACard', () => {
5+
it('render correctly with default props', () => {
6+
const { html } = render(ACard, {
7+
slots: {
8+
default: 'My first test',
9+
},
10+
});
11+
expect(html()).toMatchSnapshot();
12+
});
13+
14+
it('render correctly with variant', () => {
15+
const { container } = render(ACard, {
16+
props: {
17+
variant: 'primary',
18+
},
19+
slots: {
20+
default: 'My second test',
21+
},
22+
});
23+
expect(container.firstChild.classList.contains('a-card--variant-primary')).toBe(true);
24+
});
25+
26+
it('render correctly with elevation', () => {
27+
const { container } = render(ACard, {
28+
props: {
29+
elevation: 'high',
30+
},
31+
slots: {
32+
default: 'My second test',
33+
},
34+
});
35+
expect(container.firstChild.classList.contains('a-card--elevation-high')).toBe(true);
36+
});
37+
38+
it('render correctly with elevation', () => {
39+
const { container } = render(ACard, {
40+
props: {
41+
tag: 'section',
42+
},
43+
slots: {
44+
default: 'My second test',
45+
},
46+
});
47+
expect(container.firstChild.tagName).toBe('SECTION');
48+
});
49+
});

‎src/components/atoms/a-card/a-card.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.a-card {
2+
--a-card--background-color: transparent;
3+
--a-card--border: none;
4+
--a-card--box-shadow: none;
5+
--a-card--padding: var(--size-large);
6+
--a-card--color: inherit;
7+
8+
background-color: var(--a-card--background-color);
9+
border: var(--a-card--border);
10+
border-radius: var(--border-radius-normal);
11+
box-shadow: var(--a-card--box-shadow);
12+
color: var(--a-card--color);
13+
padding: var(--a-card--padding);
14+
position: relative;
15+
16+
&--elevation {
17+
&-low {
18+
--a-card--box-shadow: var(--shadow-elevation-01);
19+
}
20+
21+
&-medium {
22+
--a-card--box-shadow: var(--shadow-elevation-02);
23+
}
24+
25+
&-high {
26+
--a-card--box-shadow: var(--shadow-elevation-03);
27+
}
28+
}
29+
30+
&--variant {
31+
&-default {
32+
--a-card--background-color: var(--colors-original-white);
33+
}
34+
35+
&-success {
36+
--a-card--background-color: var(--color-theme-success);
37+
}
38+
39+
&-info {
40+
--a-card--background-color: var(--color-theme-info);
41+
}
42+
43+
&-danger {
44+
--a-card--background-color: var(--color-theme-danger);
45+
}
46+
47+
&-warn {
48+
--a-card--background-color: var(--color-theme-warn);
49+
}
50+
51+
&-primary {
52+
--a-card--background-color: var(--color-theme-primary);
53+
}
54+
55+
&-secondary {
56+
--a-card--background-color: var(--color-theme-secondary);
57+
}
58+
59+
&-tertiary {
60+
--a-card--background-color: var(--color-theme-tertiary);
61+
}
62+
}
63+
}

‎src/components/atoms/a-card/a-card.stories.mdx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import ACard from './a-card.vue';
2525
components: { ACard },
2626
template: `
2727
<div>
28-
<a-card elevation="low">With JSX</a-card>
28+
<a-card elevation="low" variant="default">default</a-card>
2929
<p />
3030
<a-card elevation="low" variant="success">success</a-card>
3131
<p />
@@ -55,11 +55,11 @@ import ACard from './a-card.vue';
5555
components: { ACard },
5656
template: `
5757
<div>
58-
<a-card elevation="low">With JSX</a-card>
58+
<a-card elevation="low">low</a-card>
5959
<p />
60-
<a-card elevation="medium">success</a-card>
60+
<a-card elevation="medium">medium</a-card>
6161
<p />
62-
<a-card elevation="high">info</a-card>
62+
<a-card elevation="high">high</a-card>
6363
</div>
6464
`,
6565
}}
@@ -74,11 +74,11 @@ import ACard from './a-card.vue';
7474
components: { ACard },
7575
template: `
7676
<div>
77-
<a-card tag="div">With JSX</a-card>
77+
<a-card tag="div">div</a-card>
7878
<p />
79-
<a-card tag="button">success</a-card>
79+
<a-card tag="button">button</a-card>
8080
<p />
81-
<a-card tag="article">info</a-card>
81+
<a-card tag="article">article</a-card>
8282
</div>
8383
`,
8484
}}

‎src/components/atoms/a-card/a-card.vue

Lines changed: 18 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
:class="{
55
[`a-card`]: true,
66
[`a-card--variant-${variant}`]: variant,
7-
[`a-card--${size}`]: size,
87
[`a-card--elevation-${elevation}`]: elevation,
98
}"
109
>
@@ -13,19 +12,32 @@
1312
</template>
1413

1514
<script>
15+
import { shouldBeOneOf } from 'vue-prop-validation-helper';
16+
1617
export default {
1718
props: {
1819
variant: {
1920
type: String,
20-
default: '',
21-
},
22-
size: {
23-
type: String,
24-
default: '',
21+
default: 'default',
22+
validator: shouldBeOneOf([
23+
'default',
24+
'primary',
25+
'secondary',
26+
'tertiary',
27+
'warn',
28+
'success',
29+
'danger',
30+
'info',
31+
]),
2532
},
2633
elevation: {
2734
type: String,
2835
default: 'medium',
36+
validator: shouldBeOneOf([
37+
'low',
38+
'medium',
39+
'high',
40+
]),
2941
},
3042
tag: {
3143
type: String,
@@ -34,59 +46,3 @@ export default {
3446
},
3547
};
3648
</script>
37-
38-
<style lang="scss">
39-
.a-card {
40-
--a-card--padding: var(--size-large);
41-
--a-card--background-color: var(--colors-original-white);
42-
43-
background-color: var(--a-card--background-color);
44-
border-radius: var(--border-radius-normal);
45-
padding: var(--a-card--padding);
46-
position: relative;
47-
48-
&--elevation {
49-
&-low {
50-
box-shadow: var(--shadow-elevation-01);
51-
}
52-
53-
&-medium {
54-
box-shadow: var(--shadow-elevation-02);
55-
}
56-
57-
&-high {
58-
box-shadow: var(--shadow-elevation-03);
59-
}
60-
}
61-
62-
&--variant {
63-
&-success {
64-
--a-card--background-color: var(--color-theme-success);
65-
}
66-
67-
&-info {
68-
--a-card--background-color: var(--color-theme-info);
69-
}
70-
71-
&-danger {
72-
--a-card--background-color: var(--color-theme-danger);
73-
}
74-
75-
&-warn {
76-
--a-card--background-color: var(--color-theme-warn);
77-
}
78-
79-
&-primary {
80-
--a-card--background-color: var(--color-theme-primary);
81-
}
82-
83-
&-secondary {
84-
--a-card--background-color: var(--color-theme-secondary);
85-
}
86-
87-
&-tertiary {
88-
--a-card--background-color: var(--color-theme-tertiary);
89-
}
90-
}
91-
}
92-
</style>

‎src/styles/essentials/_components.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22

33
// Atoms
44
@import '@/components/atoms/a-button/a-button.scss';
5+
@import '@/components/atoms/a-card/a-card.scss';

0 commit comments

Comments
 (0)