Skip to content

Commit f48096b

Browse files
tewarigtewarig
authored
feat: add corner and arrow icons (#2495)
* feat: add corner and arrow icons * chore: update snaps * chore: change set * chore: linting error * chore: update react native * chore: revet changes * Revert "chore: update react native" This reverts commit 9744113. * chore: removed more icon files * chore: remove more files * feat: added icons with new name * chore: update lint
1 parent fb16afc commit f48096b

File tree

70 files changed

+1887
-3
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1887
-3
lines changed

‎.changeset/cool-lies-try.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@razorpay/blade': minor
3+
---
4+
5+
feat(blade): add corner and arrow icons

‎packages/blade/scripts/icons.json

+27-3
Large diffs are not rendered by default.

‎packages/blade/src/components/Icons/ArrowSquareDownIcon/ArrowSquareDownIcon.native.test.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ArrowSquareDownIcon from '.';
2+
import renderWithTheme from '~utils/testing/renderWithTheme.native';
3+
4+
describe('<ArrowSquareDownIcon />', () => {
5+
it('should render ArrowSquareDownIcon', () => {
6+
const renderTree = renderWithTheme(
7+
<ArrowSquareDownIcon color="feedback.icon.neutral.intense" size="large" />,
8+
).toJSON();
9+
expect(renderTree).toMatchSnapshot();
10+
});
11+
});

‎packages/blade/src/components/Icons/ArrowSquareDownIcon/ArrowSquareDownIcon.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Svg, Path } from '../_Svg';
2+
import type { IconComponent } from '..';
3+
import useIconProps from '../useIconProps';
4+
5+
const ArrowSquareDownIcon: IconComponent = ({ size, color, ...styledProps }) => {
6+
const { height, width, iconColor } = useIconProps({ size, color });
7+
8+
return (
9+
<Svg {...styledProps} width={width} height={height} viewBox="0 0 24 24" fill="none">
10+
<Path
11+
fillRule="evenodd"
12+
clipRule="evenodd"
13+
d="M8.54289 12.2929C8.93342 11.9024 9.56658 11.9024 9.95711 12.2929L12.25 14.5858L14.5429 12.2929C14.9334 11.9024 15.5666 11.9024 15.9571 12.2929C16.3476 12.6834 16.3476 13.3166 15.9571 13.7071L12.9571 16.7071C12.5666 17.0976 11.9334 17.0976 11.5429 16.7071L8.54289 13.7071C8.15237 13.3166 8.15237 12.6834 8.54289 12.2929Z"
14+
fill={iconColor}
15+
/>
16+
<Path
17+
d="M13.25 8.5C13.25 7.94772 12.8023 7.5 12.25 7.5C11.6977 7.5 11.25 7.94772 11.25 8.5V16C11.25 16.5523 11.6977 17 12.25 17C12.8023 17 13.25 16.5523 13.25 16V8.5Z"
18+
fill={iconColor}
19+
/>
20+
<Path
21+
fillRule="evenodd"
22+
clipRule="evenodd"
23+
d="M4.75 3C3.7835 3 3 3.7835 3 4.75V19.75C3 20.7165 3.7835 21.5 4.75 21.5H19.75C20.7165 21.5 21.5 20.7165 21.5 19.75V4.75C21.5 3.7835 20.7165 3 19.75 3H4.75ZM5 19.5V5H19.5V19.5H5Z"
24+
fill={iconColor}
25+
/>
26+
</Svg>
27+
);
28+
};
29+
30+
export default ArrowSquareDownIcon;

‎packages/blade/src/components/Icons/ArrowSquareDownIcon/ArrowSquareDownIcon.web.test.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ArrowSquareDownIcon from './';
2+
import renderWithTheme from '~utils/testing/renderWithTheme.web';
3+
4+
describe('<ArrowSquareDownIcon />', () => {
5+
it('should render ArrowSquareDownIcon', () => {
6+
const { container } = renderWithTheme(
7+
<ArrowSquareDownIcon color="feedback.icon.neutral.intense" size="large" />,
8+
);
9+
expect(container).toMatchSnapshot();
10+
});
11+
});

‎packages/blade/src/components/Icons/ArrowSquareDownIcon/__snapshots__/ArrowSquareDownIcon.native.test.tsx.snap

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<ArrowSquareDownIcon /> should render ArrowSquareDownIcon 1`] = `
4+
<View
5+
style={
6+
{
7+
"flex": 1,
8+
}
9+
}
10+
>
11+
<RNSVGSvgView
12+
accessibilityElementsHidden={true}
13+
align="xMidYMid"
14+
bbHeight="20px"
15+
bbWidth="20px"
16+
data-blade-component="icon"
17+
fill="none"
18+
focusable={false}
19+
height="20px"
20+
importantForAccessibility="no-hide-descendants"
21+
meetOrSlice={0}
22+
minX={0}
23+
minY={0}
24+
style={
25+
[
26+
{
27+
"backgroundColor": "transparent",
28+
"borderWidth": 0,
29+
},
30+
[
31+
{},
32+
],
33+
{
34+
"flex": 0,
35+
"height": 20,
36+
"width": 20,
37+
},
38+
]
39+
}
40+
vbHeight={24}
41+
vbWidth={24}
42+
width="20px"
43+
>
44+
<RNSVGGroup
45+
fill={null}
46+
propList={
47+
[
48+
"fill",
49+
]
50+
}
51+
>
52+
<RNSVGPath
53+
clipRule={0}
54+
d="M8.54289 12.2929C8.93342 11.9024 9.56658 11.9024 9.95711 12.2929L12.25 14.5858L14.5429 12.2929C14.9334 11.9024 15.5666 11.9024 15.9571 12.2929C16.3476 12.6834 16.3476 13.3166 15.9571 13.7071L12.9571 16.7071C12.5666 17.0976 11.9334 17.0976 11.5429 16.7071L8.54289 13.7071C8.15237 13.3166 8.15237 12.6834 8.54289 12.2929Z"
55+
fill={
56+
{
57+
"payload": 4280563015,
58+
"type": 0,
59+
}
60+
}
61+
fillRule={0}
62+
propList={
63+
[
64+
"fill",
65+
"fillRule",
66+
]
67+
}
68+
/>
69+
<RNSVGPath
70+
d="M13.25 8.5C13.25 7.94772 12.8023 7.5 12.25 7.5C11.6977 7.5 11.25 7.94772 11.25 8.5V16C11.25 16.5523 11.6977 17 12.25 17C12.8023 17 13.25 16.5523 13.25 16V8.5Z"
71+
fill={
72+
{
73+
"payload": 4280563015,
74+
"type": 0,
75+
}
76+
}
77+
propList={
78+
[
79+
"fill",
80+
]
81+
}
82+
/>
83+
<RNSVGPath
84+
clipRule={0}
85+
d="M4.75 3C3.7835 3 3 3.7835 3 4.75V19.75C3 20.7165 3.7835 21.5 4.75 21.5H19.75C20.7165 21.5 21.5 20.7165 21.5 19.75V4.75C21.5 3.7835 20.7165 3 19.75 3H4.75ZM5 19.5V5H19.5V19.5H5Z"
86+
fill={
87+
{
88+
"payload": 4280563015,
89+
"type": 0,
90+
}
91+
}
92+
fillRule={0}
93+
propList={
94+
[
95+
"fill",
96+
"fillRule",
97+
]
98+
}
99+
/>
100+
</RNSVGGroup>
101+
</RNSVGSvgView>
102+
</View>
103+
`;

‎packages/blade/src/components/Icons/ArrowSquareDownIcon/__snapshots__/ArrowSquareDownIcon.web.test.tsx.snap

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<ArrowSquareDownIcon /> should render ArrowSquareDownIcon 1`] = `
4+
<div>
5+
<svg
6+
aria-hidden="true"
7+
class="Svgweb__StyledSvg-vcmjs8-0"
8+
data-blade-component="icon"
9+
fill="none"
10+
height="20px"
11+
viewBox="0 0 24 24"
12+
width="20px"
13+
>
14+
<path
15+
clip-rule="evenodd"
16+
d="M8.54289 12.2929C8.93342 11.9024 9.56658 11.9024 9.95711 12.2929L12.25 14.5858L14.5429 12.2929C14.9334 11.9024 15.5666 11.9024 15.9571 12.2929C16.3476 12.6834 16.3476 13.3166 15.9571 13.7071L12.9571 16.7071C12.5666 17.0976 11.9334 17.0976 11.5429 16.7071L8.54289 13.7071C8.15237 13.3166 8.15237 12.6834 8.54289 12.2929Z"
17+
data-blade-component="svg-path"
18+
fill="hsla(211, 33%, 21%, 1)"
19+
fill-rule="evenodd"
20+
/>
21+
<path
22+
d="M13.25 8.5C13.25 7.94772 12.8023 7.5 12.25 7.5C11.6977 7.5 11.25 7.94772 11.25 8.5V16C11.25 16.5523 11.6977 17 12.25 17C12.8023 17 13.25 16.5523 13.25 16V8.5Z"
23+
data-blade-component="svg-path"
24+
fill="hsla(211, 33%, 21%, 1)"
25+
/>
26+
<path
27+
clip-rule="evenodd"
28+
d="M4.75 3C3.7835 3 3 3.7835 3 4.75V19.75C3 20.7165 3.7835 21.5 4.75 21.5H19.75C20.7165 21.5 21.5 20.7165 21.5 19.75V4.75C21.5 3.7835 20.7165 3 19.75 3H4.75ZM5 19.5V5H19.5V19.5H5Z"
29+
data-blade-component="svg-path"
30+
fill="hsla(211, 33%, 21%, 1)"
31+
fill-rule="evenodd"
32+
/>
33+
</svg>
34+
</div>
35+
`;

‎packages/blade/src/components/Icons/ArrowSquareDownIcon/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './ArrowSquareDownIcon';

‎packages/blade/src/components/Icons/ArrowSquareDownLeftIcon/ArrowSquareDownLeftIcon.native.test.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ArrowSquareDownLeftIcon from '.';
2+
import renderWithTheme from '~utils/testing/renderWithTheme.native';
3+
4+
describe('<ArrowSquareDownLeftIcon />', () => {
5+
it('should render ArrowSquareDownLeftIcon', () => {
6+
const renderTree = renderWithTheme(
7+
<ArrowSquareDownLeftIcon color="feedback.icon.neutral.intense" size="large" />,
8+
).toJSON();
9+
expect(renderTree).toMatchSnapshot();
10+
});
11+
});

‎packages/blade/src/components/Icons/ArrowSquareDownLeftIcon/ArrowSquareDownLeftIcon.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Svg, Path } from '../_Svg';
2+
import type { IconComponent } from '..';
3+
import useIconProps from '../useIconProps';
4+
5+
const ArrowSquareDownLeftIcon: IconComponent = ({ size, color, ...styledProps }) => {
6+
const { height, width, iconColor } = useIconProps({ size, color });
7+
8+
return (
9+
<Svg {...styledProps} width={width} height={height} viewBox="0 0 24 24" fill="none">
10+
<Path
11+
d="M8 10.5C8 9.94772 8.44772 9.5 9 9.5C9.55228 9.5 10 9.94772 10 10.5V12.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L11.4142 14H13.5C14.0523 14 14.5 14.4477 14.5 15C14.5 15.5523 14.0523 16 13.5 16H9.00069C8.99969 16 8.998 16 8.997 16C8.72313 15.9992 8.47515 15.8883 8.29502 15.7092C8.2936 15.7078 8.29219 15.7064 8.29078 15.705C8.19595 15.6096 8.12432 15.4999 8.07588 15.3828C8.02699 15.2649 8 15.1356 8 15V10.5Z"
12+
fill={iconColor}
13+
/>
14+
<Path
15+
fillRule="evenodd"
16+
clipRule="evenodd"
17+
d="M4.5 21.25C3.5335 21.25 2.75 20.4665 2.75 19.5V4.5C2.75 3.5335 3.5335 2.75 4.5 2.75H19.5C20.4665 2.75 21.25 3.5335 21.25 4.5V19.5C21.25 20.4665 20.4665 21.25 19.5 21.25H4.5ZM4.75 19.25H19.25V4.75H4.75V19.25Z"
18+
fill={iconColor}
19+
/>
20+
</Svg>
21+
);
22+
};
23+
24+
export default ArrowSquareDownLeftIcon;

‎packages/blade/src/components/Icons/ArrowSquareDownLeftIcon/ArrowSquareDownLeftIcon.web.test.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ArrowSquareDownLeftIcon from './';
2+
import renderWithTheme from '~utils/testing/renderWithTheme.web';
3+
4+
describe('<ArrowSquareDownLeftIcon />', () => {
5+
it('should render ArrowSquareDownLeftIcon', () => {
6+
const { container } = renderWithTheme(
7+
<ArrowSquareDownLeftIcon color="feedback.icon.neutral.intense" size="large" />,
8+
);
9+
expect(container).toMatchSnapshot();
10+
});
11+
});

‎packages/blade/src/components/Icons/ArrowSquareDownLeftIcon/__snapshots__/ArrowSquareDownLeftIcon.native.test.tsx.snap

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<ArrowSquareDownLeftIcon /> should render ArrowSquareDownLeftIcon 1`] = `
4+
<View
5+
style={
6+
{
7+
"flex": 1,
8+
}
9+
}
10+
>
11+
<RNSVGSvgView
12+
accessibilityElementsHidden={true}
13+
align="xMidYMid"
14+
bbHeight="20px"
15+
bbWidth="20px"
16+
data-blade-component="icon"
17+
fill="none"
18+
focusable={false}
19+
height="20px"
20+
importantForAccessibility="no-hide-descendants"
21+
meetOrSlice={0}
22+
minX={0}
23+
minY={0}
24+
style={
25+
[
26+
{
27+
"backgroundColor": "transparent",
28+
"borderWidth": 0,
29+
},
30+
[
31+
{},
32+
],
33+
{
34+
"flex": 0,
35+
"height": 20,
36+
"width": 20,
37+
},
38+
]
39+
}
40+
vbHeight={24}
41+
vbWidth={24}
42+
width="20px"
43+
>
44+
<RNSVGGroup
45+
fill={null}
46+
propList={
47+
[
48+
"fill",
49+
]
50+
}
51+
>
52+
<RNSVGPath
53+
d="M8 10.5C8 9.94772 8.44772 9.5 9 9.5C9.55228 9.5 10 9.94772 10 10.5V12.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L11.4142 14H13.5C14.0523 14 14.5 14.4477 14.5 15C14.5 15.5523 14.0523 16 13.5 16H9.00069C8.99969 16 8.998 16 8.997 16C8.72313 15.9992 8.47515 15.8883 8.29502 15.7092C8.2936 15.7078 8.29219 15.7064 8.29078 15.705C8.19595 15.6096 8.12432 15.4999 8.07588 15.3828C8.02699 15.2649 8 15.1356 8 15V10.5Z"
54+
fill={
55+
{
56+
"payload": 4280563015,
57+
"type": 0,
58+
}
59+
}
60+
propList={
61+
[
62+
"fill",
63+
]
64+
}
65+
/>
66+
<RNSVGPath
67+
clipRule={0}
68+
d="M4.5 21.25C3.5335 21.25 2.75 20.4665 2.75 19.5V4.5C2.75 3.5335 3.5335 2.75 4.5 2.75H19.5C20.4665 2.75 21.25 3.5335 21.25 4.5V19.5C21.25 20.4665 20.4665 21.25 19.5 21.25H4.5ZM4.75 19.25H19.25V4.75H4.75V19.25Z"
69+
fill={
70+
{
71+
"payload": 4280563015,
72+
"type": 0,
73+
}
74+
}
75+
fillRule={0}
76+
propList={
77+
[
78+
"fill",
79+
"fillRule",
80+
]
81+
}
82+
/>
83+
</RNSVGGroup>
84+
</RNSVGSvgView>
85+
</View>
86+
`;

‎packages/blade/src/components/Icons/ArrowSquareDownLeftIcon/__snapshots__/ArrowSquareDownLeftIcon.web.test.tsx.snap

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<ArrowSquareDownLeftIcon /> should render ArrowSquareDownLeftIcon 1`] = `
4+
<div>
5+
<svg
6+
aria-hidden="true"
7+
class="Svgweb__StyledSvg-vcmjs8-0"
8+
data-blade-component="icon"
9+
fill="none"
10+
height="20px"
11+
viewBox="0 0 24 24"
12+
width="20px"
13+
>
14+
<path
15+
d="M8 10.5C8 9.94772 8.44772 9.5 9 9.5C9.55228 9.5 10 9.94772 10 10.5V12.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L11.4142 14H13.5C14.0523 14 14.5 14.4477 14.5 15C14.5 15.5523 14.0523 16 13.5 16H9.00069C8.99969 16 8.998 16 8.997 16C8.72313 15.9992 8.47515 15.8883 8.29502 15.7092C8.2936 15.7078 8.29219 15.7064 8.29078 15.705C8.19595 15.6096 8.12432 15.4999 8.07588 15.3828C8.02699 15.2649 8 15.1356 8 15V10.5Z"
16+
data-blade-component="svg-path"
17+
fill="hsla(211, 33%, 21%, 1)"
18+
/>
19+
<path
20+
clip-rule="evenodd"
21+
d="M4.5 21.25C3.5335 21.25 2.75 20.4665 2.75 19.5V4.5C2.75 3.5335 3.5335 2.75 4.5 2.75H19.5C20.4665 2.75 21.25 3.5335 21.25 4.5V19.5C21.25 20.4665 20.4665 21.25 19.5 21.25H4.5ZM4.75 19.25H19.25V4.75H4.75V19.25Z"
22+
data-blade-component="svg-path"
23+
fill="hsla(211, 33%, 21%, 1)"
24+
fill-rule="evenodd"
25+
/>
26+
</svg>
27+
</div>
28+
`;

‎packages/blade/src/components/Icons/ArrowSquareDownLeftIcon/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './ArrowSquareDownLeftIcon';

‎packages/blade/src/components/Icons/ArrowSquareDownRightIcon/ArrowSquareDownRightIcon.native.test.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ArrowSquareDownRightIcon from '.';
2+
import renderWithTheme from '~utils/testing/renderWithTheme.native';
3+
4+
describe('<ArrowSquareDownRightIcon />', () => {
5+
it('should render ArrowSquareDownRightIcon', () => {
6+
const renderTree = renderWithTheme(
7+
<ArrowSquareDownRightIcon color="feedback.icon.neutral.intense" size="large" />,
8+
).toJSON();
9+
expect(renderTree).toMatchSnapshot();
10+
});
11+
});

0 commit comments

Comments
 (0)