Skip to content

Commit 8ccf208

Browse files
linspwlinspw
authored
feat: create a-button tests and separate scss (#4)
1 parent 6b625de commit 8ccf208

File tree

7 files changed

+195
-118
lines changed

7 files changed

+195
-118
lines changed

‎src/components/atoms/a-button/__tests__/__snapshots__/a-button.spec.js.snap

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`AButton render correctly with attrs 1`] = `
4+
"<button id=\\"my-first-component\\" data-test-id=\\"secondary\\" class=\\"a-button a-button--behavior-is-rounded a-button--variant-primary a-button--size-small\\">
5+
<!---->
6+
<!----> <span class=\\"a-button__text\\">With many Itens</span></button>"
7+
`;
8+
39
exports[`AButton render correctly with default props 1`] = `
410
"<button class=\\"a-button a-button--behavior-is-rounded a-button--variant-primary a-button--size-small\\">
511
<!---->
612
<!----> <span class=\\"a-button__text\\">My first test</span></button>"
713
`;
814
915
exports[`AButton render correctly with different props 1`] = `
10-
"<button class=\\"a-button a-button--behavior-block a-button--behavior-is-rounded a-button--variant-secondary a-button--size-small\\">
16+
"<button class=\\"a-button a-button--behavior-block a-button--variant-secondary a-button--size-small\\">
1117
<div class=\\"a-icon a-icon--size-inherit a-icon--color-primary a-button__icon\\"><i class=\\"fas fa-circle\\"></i></div>
1218
<!----> <span class=\\"a-button__text\\">With many Itens</span>
1319
</button>"

‎src/components/atoms/a-button/__tests__/a-button.spec.js

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render } from '@testing-library/vue';
1+
import { render, screen, fireEvent } from '@testing-library/vue';
22
import AButton from '../a-button.vue';
33

44
describe('AButton', () => {
@@ -22,10 +22,37 @@ describe('AButton', () => {
2222
size: 'small',
2323
icon: 'fas fa-circle',
2424
iconColor: 'primary',
25-
isRounded: true,
25+
isRounded: false,
2626
},
2727
});
2828
expect(html()).toMatchSnapshot();
29-
// expect(getByText('My first button').closest('button')).toHaveAttribute('disabled');
29+
});
30+
31+
it('render correctly with attrs', () => {
32+
const { html } = render(AButton, {
33+
slots: {
34+
default: 'With many Itens',
35+
},
36+
attrs: {
37+
id: 'my-first-component',
38+
'data-test-id': 'secondary',
39+
},
40+
});
41+
expect(html()).toMatchSnapshot();
42+
});
43+
44+
it('when click active event', async () => {
45+
const handleClick = jest.fn();
46+
render(AButton, {
47+
slots: {
48+
default: 'Event',
49+
},
50+
listeners: {
51+
click: handleClick,
52+
},
53+
});
54+
55+
await fireEvent.click(screen.getByText('Event'));
56+
expect(handleClick).toHaveBeenCalledTimes(1);
3057
});
3158
});

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

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
.a-button {
2+
/**
3+
* @tokens AButton
4+
*/
5+
--a-button-border-radius: var(--border-radius-normal);
6+
--a-button-background-color: transparent;
7+
--a-button-background-color--hover: var(--colors-scale-grey-darkest);
8+
--a-button-background-color--active: var(--colors-scale-grey-superior);
9+
--a-button-text-decoration: none;
10+
--a-button-text-decoration--hover: none;
11+
--a-button-text-decoration--active: none;
12+
--a-button-color: inherit;
13+
--a-button-font-weight: 500;
14+
--a-button-border: none;
15+
--a-button-height: auto;
16+
--a-button-min-height: fit-content;
17+
--a-button-width: auto;
18+
--a-button__text-font-size: inherit;
19+
20+
align-items: center;
21+
border-radius: var(--a-button-border-radius);
22+
border: var(--a-button-border);
23+
display: inline-flex;
24+
font-weight: var(--a-button-font-weight);
25+
justify-content: center;
26+
padding: var(--size-small) var(--size-large);
27+
position: relative;
28+
text-decoration: var(--a-button-text-decoration);
29+
transition: background-color 250ms, opacity 250ms;
30+
white-space: nowrap;
31+
background-color: var(--a-button-background-color);
32+
color: var(--a-button-color);
33+
height: var(--a-button-height);
34+
min-height: var(--a-button-min-height);
35+
width: var(--a-button-width);
36+
37+
&:hover {
38+
--a-button-background-color: var(--a-button-background-color--hover);
39+
--a-button-text-decoration: var(--a-button-text-decoration--hover)
40+
}
41+
&:active {
42+
--a-button-background-color: var(--a-button-background-color--active);
43+
--a-button-text-decoration: var(--a-button-text-decoration--active);
44+
}
45+
&:disabled {
46+
--a-button-background-color: var(--color-theme-tertiary);
47+
pointer-events: none;
48+
cursor: not-allowed;
49+
}
50+
51+
&--size {
52+
&-small {
53+
--a-button-min-height: var(--size-extra-large);
54+
--a-button__text-font-size: 14px;
55+
}
56+
&-medium {
57+
--a-button-min-height: var(--size-jumbo);
58+
--a-button__text-font-size: 18px;
59+
}
60+
}
61+
62+
&--variant {
63+
&-primary {
64+
--a-button-background-color: var(--color-theme-primary);
65+
--a-button-color: var(--colors-original-white);
66+
}
67+
&-secondary {
68+
--a-button-background-color: var(--color-theme-secondary);
69+
--a-button-color: var(--colors-original-white);
70+
}
71+
&-tertiary {
72+
--a-button-background-color: var(--colors-original-white);
73+
--a-button-border: var(--size-micro) solid var(--color-theme-secondary);
74+
--a-button-color: var(--color-theme-secondary);
75+
}
76+
&-quaternary {
77+
--a-button-background-color: transparent;
78+
--a-button-color: var(--color-theme-secondary);
79+
--a-button-background-color--hover: transparent;
80+
--a-button-background-color--active: transparent;
81+
--a-button-text-decoration--hover: underline;
82+
--a-button-text-decoration--active: underline;
83+
}
84+
&-quintenary {
85+
--a-button-background-color: var(--color-theme-primary);
86+
--a-button-color: var(--color-theme-secondary);
87+
}
88+
}
89+
90+
&--behavior {
91+
&-block {
92+
--a-button-width: 100%;
93+
}
94+
95+
&-is-rounded {
96+
--a-button-border-radius: var(--border-radius-high);
97+
}
98+
99+
&-is-loading {
100+
& > .a-button__text {
101+
opacity: 0;
102+
}
103+
104+
& > .a-button__icon {
105+
opacity: 0;
106+
}
107+
108+
& > .a-button__icon--is-loading {
109+
position: absolute;
110+
height: auto;
111+
width: auto;
112+
opacity: 1;
113+
margin: 0;
114+
}
115+
}
116+
}
117+
118+
&__icon {
119+
align-items: center;
120+
display: flex;
121+
height: 100%;
122+
width: 16px;
123+
margin-right: var(--size-small);
124+
}
125+
126+
&__text {
127+
align-items: center;
128+
display: flex;
129+
flex: 1;
130+
justify-content: center;
131+
white-space: nowrap;
132+
}
133+
}
134+
135+
.a-button__text {
136+
font-size: var(--a-button__text-font-size);
137+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,4 +137,20 @@ import AButton from './a-button.vue';
137137
</Story>
138138
</Canvas>
139139

140+
### All html attrs and disabled:
141+
142+
<Canvas>
143+
<Story name="All html attrs and disabled">
144+
{{
145+
components: { AButton },
146+
template: `
147+
<div>
148+
<a-button id="my-specific-component">Behavior</a-button>
149+
<a-button disabled>Behavior</a-button>
150+
</div>
151+
`,
152+
}}
153+
</Story>
154+
</Canvas>
155+
140156
<ArgsTable of={AButton} />

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

Lines changed: 0 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -87,117 +87,3 @@ export default {
8787
},
8888
};
8989
</script>
90-
91-
<style lang="scss">
92-
.a-button {
93-
align-items: center;
94-
border-radius: var(--border-radius-normal);
95-
display: inline-flex;
96-
font-weight: 500;
97-
justify-content: center;
98-
padding: var(--size-small) var(--size-large);
99-
position: relative;
100-
transition: background-color 250ms, opacity 250ms;
101-
white-space: nowrap;
102-
103-
&:hover {
104-
background-color: #CFDAE3;
105-
}
106-
&:active {
107-
background-color: #839fb6;
108-
}
109-
110-
&--size {
111-
&-small {
112-
min-height: var(--size-extra-large);
113-
height: fit-content;
114-
& > .a-button__text {
115-
font-size: 14px;
116-
}
117-
}
118-
&-medium {
119-
min-height: var(--size-jumbo);
120-
height: fit-content;
121-
& > .a-button__text {
122-
font-size: 18px;
123-
}
124-
}
125-
}
126-
127-
&--variant {
128-
&-primary {
129-
background-color: var(--color-theme-primary);
130-
color: var(--colors-original-white);
131-
}
132-
&-secondary {
133-
background-color: var(--color-theme-secondary);
134-
color: var(--colors-original-white);
135-
}
136-
&-tertiary {
137-
background-color: var(--colors-original-white);
138-
border: var(--size-micro) solid var(--color-theme-secondary);
139-
color: var(--color-theme-secondary);
140-
}
141-
&-quaternary {
142-
background-color: transparent;
143-
color: var(--color-theme-secondary);
144-
&:hover {
145-
text-decoration: underline;
146-
background-color: transparent;
147-
}
148-
&:active {
149-
text-decoration: underline;
150-
background-color: transparent;
151-
}
152-
}
153-
&-quintenary {
154-
background-color: var(--color-theme-primary);
155-
color: var(--color-theme-secondary);
156-
}
157-
}
158-
159-
&--behavior {
160-
&-block {
161-
width: 100%;
162-
}
163-
164-
&-is-rounded {
165-
border-radius: var(--border-radius-high);
166-
}
167-
168-
&-is-loading {
169-
& > .a-button__text {
170-
opacity: 0;
171-
}
172-
173-
& > .a-button__icon {
174-
opacity: 0;
175-
}
176-
177-
& > .a-button__icon--is-loading {
178-
position: absolute;
179-
height: auto;
180-
width: auto;
181-
opacity: 1;
182-
margin: 0;
183-
}
184-
}
185-
}
186-
187-
&__icon {
188-
align-items: center;
189-
display: flex;
190-
height: 100%;
191-
width: 16px;
192-
margin-right: var(--size-small);
193-
}
194-
195-
&__text {
196-
align-items: center;
197-
display: flex;
198-
flex: 1;
199-
justify-content: center;
200-
white-space: nowrap;
201-
}
202-
}
203-
</style>

‎src/styles/essentials/_components.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Aurora Componentes
2+
3+
// Atoms
4+
@import '@/components/atoms/a-button/a-button.scss';

‎src/styles/essentials/_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@import 'reset';
22
@import 'global';
3+
@import 'components';

0 commit comments

Comments
 (0)