Skip to content

Commit 33e7671

Browse files
danilo-moreira-brisadanilo-moreira-brisa
authored
Merge branch 'main' into 198-docs-fix-badges-links
2 parents be70b6d + cae603e commit 33e7671

21 files changed

+767
-459
lines changed

‎package.json

-3
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,5 @@
112112
"commitizen": {
113113
"path": "@commitlint/cz-commitlint"
114114
}
115-
},
116-
"dependencies": {
117-
"@stitches/react": "^1.2.8"
118115
}
119116
}

‎src/components/alert/__snapshots__/alert.test.tsx.snap

+140-56
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`IonAlert should render alert with type: info 1`] = `
4+
.c3 {
5+
width: unset;
6+
height: unset;
7+
background-color: transparent;
8+
display: inline-flex;
9+
}
10+
11+
.c4 {
12+
width: 24px;
13+
height: 24px;
14+
fill: #282B33;
15+
}
16+
417
.c0 {
518
display: flex;
619
align-items: center;
@@ -37,21 +50,29 @@ exports[`IonAlert should render alert with type: info 1`] = `
3750
<div
3851
class="c1 c2"
3952
>
40-
<svg
41-
data-testid="ion-icon-info-solid"
42-
fill="#282B33"
43-
height="24"
44-
viewBox="0 0 24 24"
45-
width="24"
53+
<div
54+
class="c3"
55+
data-testid="ion-icon-outer-highlight"
4656
>
47-
48-
<path
49-
clip-rule="evenodd"
50-
d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18ZM10.75 7.25C10.75 6.55964 11.3096 6 12 6C12.6904 6 13.25 6.55964 13.25 7.25C13.25 7.94036 12.6904 8.5 12 8.5C11.3096 8.5 10.75 7.94036 10.75 7.25Z"
51-
fill-rule="evenodd"
52-
/>
53-
54-
</svg>
57+
<div
58+
class="c3"
59+
data-testid="ion-icon-inner-highlight"
60+
>
61+
<svg
62+
class="c4"
63+
data-testid="ion-icon-info-solid"
64+
viewBox="0 0 24 24"
65+
>
66+
67+
<path
68+
clip-rule="evenodd"
69+
d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18ZM10.75 7.25C10.75 6.55964 11.3096 6 12 6C12.6904 6 13.25 6.55964 13.25 7.25C13.25 7.94036 12.6904 8.5 12 8.5C11.3096 8.5 10.75 7.94036 10.75 7.25Z"
70+
fill-rule="evenodd"
71+
/>
72+
73+
</svg>
74+
</div>
75+
</div>
5576
<span>
5677
Example message
5778
</span>
@@ -61,6 +82,19 @@ exports[`IonAlert should render alert with type: info 1`] = `
6182
`;
6283

6384
exports[`IonAlert should render alert with type: negative 1`] = `
85+
.c3 {
86+
width: unset;
87+
height: unset;
88+
background-color: transparent;
89+
display: inline-flex;
90+
}
91+
92+
.c4 {
93+
width: 24px;
94+
height: 24px;
95+
fill: #282B33;
96+
}
97+
6498
.c0 {
6599
display: flex;
66100
align-items: center;
@@ -97,21 +131,29 @@ exports[`IonAlert should render alert with type: negative 1`] = `
97131
<div
98132
class="c1 c2"
99133
>
100-
<svg
101-
data-testid="ion-icon-close-solid"
102-
fill="#282B33"
103-
height="24"
104-
viewBox="0 0 24 24"
105-
width="24"
134+
<div
135+
class="c3"
136+
data-testid="ion-icon-outer-highlight"
106137
>
107-
108-
<path
109-
clip-rule="evenodd"
110-
d="M5.63604 18.364C9.15076 21.8787 14.8492 21.8787 18.364 18.364C21.8787 14.8492 21.8787 9.15076 18.364 5.63604C14.8492 2.12132 9.15076 2.12132 5.63604 5.63604C2.12132 9.15076 2.12132 14.8492 5.63604 18.364ZM15.5355 9.87868C15.9261 9.48816 15.9261 8.85499 15.5355 8.46447C15.145 8.07394 14.5118 8.07394 14.1213 8.46447L12 10.5858L9.87868 8.46447C9.48816 8.07394 8.85499 8.07394 8.46447 8.46447C8.07394 8.85499 8.07394 9.48816 8.46447 9.87868L10.5858 12L8.46447 14.1213C8.07394 14.5118 8.07394 15.145 8.46447 15.5355C8.85499 15.9261 9.48816 15.9261 9.87868 15.5355L12 13.4142L14.1213 15.5355C14.5118 15.9261 15.145 15.9261 15.5355 15.5355C15.9261 15.145 15.9261 14.5118 15.5355 14.1213L13.4142 12L15.5355 9.87868Z"
111-
fill-rule="evenodd"
112-
/>
113-
114-
</svg>
138+
<div
139+
class="c3"
140+
data-testid="ion-icon-inner-highlight"
141+
>
142+
<svg
143+
class="c4"
144+
data-testid="ion-icon-close-solid"
145+
viewBox="0 0 24 24"
146+
>
147+
148+
<path
149+
clip-rule="evenodd"
150+
d="M5.63604 18.364C9.15076 21.8787 14.8492 21.8787 18.364 18.364C21.8787 14.8492 21.8787 9.15076 18.364 5.63604C14.8492 2.12132 9.15076 2.12132 5.63604 5.63604C2.12132 9.15076 2.12132 14.8492 5.63604 18.364ZM15.5355 9.87868C15.9261 9.48816 15.9261 8.85499 15.5355 8.46447C15.145 8.07394 14.5118 8.07394 14.1213 8.46447L12 10.5858L9.87868 8.46447C9.48816 8.07394 8.85499 8.07394 8.46447 8.46447C8.07394 8.85499 8.07394 9.48816 8.46447 9.87868L10.5858 12L8.46447 14.1213C8.07394 14.5118 8.07394 15.145 8.46447 15.5355C8.85499 15.9261 9.48816 15.9261 9.87868 15.5355L12 13.4142L14.1213 15.5355C14.5118 15.9261 15.145 15.9261 15.5355 15.5355C15.9261 15.145 15.9261 14.5118 15.5355 14.1213L13.4142 12L15.5355 9.87868Z"
151+
fill-rule="evenodd"
152+
/>
153+
154+
</svg>
155+
</div>
156+
</div>
115157
<span>
116158
Example message
117159
</span>
@@ -121,6 +163,19 @@ exports[`IonAlert should render alert with type: negative 1`] = `
121163
`;
122164

123165
exports[`IonAlert should render alert with type: success 1`] = `
166+
.c3 {
167+
width: unset;
168+
height: unset;
169+
background-color: transparent;
170+
display: inline-flex;
171+
}
172+
173+
.c4 {
174+
width: 24px;
175+
height: 24px;
176+
fill: #282B33;
177+
}
178+
124179
.c0 {
125180
display: flex;
126181
align-items: center;
@@ -157,21 +212,29 @@ exports[`IonAlert should render alert with type: success 1`] = `
157212
<div
158213
class="c1 c2"
159214
>
160-
<svg
161-
data-testid="ion-icon-check-solid"
162-
fill="#282B33"
163-
height="24"
164-
viewBox="0 0 24 24"
165-
width="24"
215+
<div
216+
class="c3"
217+
data-testid="ion-icon-outer-highlight"
166218
>
167-
168-
<path
169-
clip-rule="evenodd"
170-
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM16.7071 10.7071C17.0976 10.3166 17.0976 9.68342 16.7071 9.29289C16.3166 8.90237 15.6834 8.90237 15.2929 9.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.4804 15.8946 10.7348 16 11 16C11.2652 16 11.5196 15.8946 11.7071 15.7071L16.7071 10.7071Z"
171-
fill-rule="evenodd"
172-
/>
173-
174-
</svg>
219+
<div
220+
class="c3"
221+
data-testid="ion-icon-inner-highlight"
222+
>
223+
<svg
224+
class="c4"
225+
data-testid="ion-icon-check-solid"
226+
viewBox="0 0 24 24"
227+
>
228+
229+
<path
230+
clip-rule="evenodd"
231+
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM16.7071 10.7071C17.0976 10.3166 17.0976 9.68342 16.7071 9.29289C16.3166 8.90237 15.6834 8.90237 15.2929 9.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.4804 15.8946 10.7348 16 11 16C11.2652 16 11.5196 15.8946 11.7071 15.7071L16.7071 10.7071Z"
232+
fill-rule="evenodd"
233+
/>
234+
235+
</svg>
236+
</div>
237+
</div>
175238
<span>
176239
Example message
177240
</span>
@@ -181,6 +244,19 @@ exports[`IonAlert should render alert with type: success 1`] = `
181244
`;
182245

183246
exports[`IonAlert should render alert with type: warning 1`] = `
247+
.c3 {
248+
width: unset;
249+
height: unset;
250+
background-color: transparent;
251+
display: inline-flex;
252+
}
253+
254+
.c4 {
255+
width: 24px;
256+
height: 24px;
257+
fill: #282B33;
258+
}
259+
184260
.c0 {
185261
display: flex;
186262
align-items: center;
@@ -217,21 +293,29 @@ exports[`IonAlert should render alert with type: warning 1`] = `
217293
<div
218294
class="c1 c2"
219295
>
220-
<svg
221-
data-testid="ion-icon-attention-solid"
222-
fill="#282B33"
223-
height="24"
224-
viewBox="0 0 24 24"
225-
width="24"
296+
<div
297+
class="c3"
298+
data-testid="ion-icon-outer-highlight"
226299
>
227-
228-
<path
229-
clip-rule="evenodd"
230-
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 6C12.5523 6 13 6.44772 13 7V13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13V7C11 6.44772 11.4477 6 12 6ZM13.25 16.75C13.25 17.4404 12.6904 18 12 18C11.3096 18 10.75 17.4404 10.75 16.75C10.75 16.0596 11.3096 15.5 12 15.5C12.6904 15.5 13.25 16.0596 13.25 16.75Z"
231-
fill-rule="evenodd"
232-
/>
233-
234-
</svg>
300+
<div
301+
class="c3"
302+
data-testid="ion-icon-inner-highlight"
303+
>
304+
<svg
305+
class="c4"
306+
data-testid="ion-icon-attention-solid"
307+
viewBox="0 0 24 24"
308+
>
309+
310+
<path
311+
clip-rule="evenodd"
312+
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 6C12.5523 6 13 6.44772 13 7V13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13V7C11 6.44772 11.4477 6 12 6ZM13.25 16.75C13.25 17.4404 12.6904 18 12 18C11.3096 18 10.75 17.4404 10.75 16.75C10.75 16.0596 11.3096 15.5 12 15.5C12.6904 15.5 13.25 16.0596 13.25 16.75Z"
313+
fill-rule="evenodd"
314+
/>
315+
316+
</svg>
317+
</div>
318+
</div>
235319
<span>
236320
Example message
237321
</span>

‎src/components/alert/alert.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ErrorBoundary from '../error/error-boundary';
44

55
import { IonIcon } from '../icons/icons';
66
import isValidLabel from '../utils/isValidLabel';
7-
import { Alert, Wrapper } from './styled';
7+
import { Alert, Wrapper } from './styles';
88
import { IconType } from '../icons/svgs/icons';
99

1010
export interface AlertProps {

‎src/components/alert/styled.ts renamed to ‎src/components/alert/styles.ts

File renamed without changes.

‎src/components/button/button.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ describe('Button', () => {
103103
const icon = 'pencil';
104104
sut({ ...defaultButton, icon: icon });
105105
const Tab = screen.getByTestId(`ion-icon-${icon}`);
106-
expect(Tab).toHaveAttribute('height', sm);
106+
expect(Tab).toHaveStyleRule('height', `${sm}px`);
107107
});
108108

109109
it('should render icon lg when button is lg', () => {
@@ -115,9 +115,9 @@ describe('Button', () => {
115115
size: 'lg',
116116
icon: lgIconName,
117117
});
118-
expect(screen.getByTestId(`ion-icon-${lgIconName}`)).toHaveAttribute(
118+
expect(screen.getByTestId(`ion-icon-${lgIconName}`)).toHaveStyleRule(
119119
'height',
120-
lgSize
120+
`${lgSize}px`
121121
);
122122
});
123123

‎src/components/chip/chip.test.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -63,19 +63,19 @@ describe('IonChip', () => {
6363

6464
it('should render icon sm by default', () => {
6565
const smSize = '16';
66-
expect(screen.getByTestId(`ion-icon-${iconName}`)).toHaveAttribute(
66+
expect(screen.getByTestId(`ion-icon-${iconName}`)).toHaveStyleRule(
6767
'height',
68-
smSize
68+
`${smSize}px`
6969
);
7070
});
7171

7272
it('should render icon md when chip is md', () => {
7373
const mdSize = '20';
7474
const mdIconName = 'alert';
7575
sut({ ...defaultChip, size: 'md', icon: mdIconName });
76-
expect(screen.getByTestId(`ion-icon-${mdIconName}`)).toHaveAttribute(
76+
expect(screen.getByTestId(`ion-icon-${mdIconName}`)).toHaveStyleRule(
7777
'height',
78-
mdSize
78+
`${mdSize}px`
7979
);
8080
});
8181
});

‎src/components/divider/divider.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Divider, DividerContainer } from './styled';
1+
import { Divider, DividerContainer } from './styles';
22

33
export type DividerDirection = 'horizontal' | 'vertical';
44
export type DividerType = 'solid' | 'dashed';

‎src/components/divider/styled.ts renamed to ‎src/components/divider/styles.ts

File renamed without changes.

0 commit comments

Comments
 (0)