Skip to content

Commit ac03eb2

Browse files
alireza-sharifpouralireza-sharifpour
authored
Merge pull request #99 from Giveth/add-Estimated-icon
Add estimated icon
2 parents 2f6b3ed + 0c6841c commit ac03eb2

30 files changed

+381
-794
lines changed

‎.eslintrc

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
{
2-
"extends": [
3-
"next/core-web-vitals",
4-
"plugin:@next/next/recommended",
5-
"plugin:prettier/recommended" ],
2+
"parser": "@typescript-eslint/parser",
3+
"extends": ["plugin:prettier/recommended"],
64
"rules": {
75
"prettier/prettier": [
86
"error",

‎package.json

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@giveth/ui-design-system",
3-
"version": "1.11.24",
3+
"version": "1.11.25",
44
"files": [
55
"/lib"
66
],
@@ -35,9 +35,13 @@
3535
"@types/node": "^20",
3636
"@types/react": "^18",
3737
"@types/react-dom": "^18",
38-
"eslint": "^8",
39-
"eslint-config-next": "14.1.0",
38+
"@typescript-eslint/eslint-plugin": "^7.5.0",
39+
"@typescript-eslint/parser": "^7.5.0",
40+
"eslint": "^8.57.0",
41+
"eslint-config-prettier": "^9.1.0",
42+
"eslint-plugin-prettier": "^5.1.3",
4043
"eslint-plugin-storybook": "^0.8.0",
44+
"prettier": "^3.2.5",
4145
"storybook": "^7.6.17",
4246
"typescript": "^5"
4347
},

‎src/components/buttonLinks/ButtonLink.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,91 +22,91 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
2222
? css`
2323
color: ${brandColors.giv[400]};
2424
background-color: ${brandColors.giv[500]};
25-
`
25+
`
2626
: css`
2727
color: ${neutralColors.gray[100]};
2828
background-color: ${brandColors.pinky[500]};
29-
`;
29+
`;
3030
case 'secondary':
3131
return props.disabled
3232
? css`
3333
color: ${brandColors.giv[400]};
3434
background-color: ${brandColors.giv[500]};
35-
`
35+
`
3636
: css`
3737
color: ${neutralColors.gray[100]};
3838
background-color: ${brandColors.giv[500]};
39-
`;
39+
`;
4040
case 'texty':
4141
return props.disabled
4242
? css`
4343
color: ${brandColors.giv[500]};
4444
background-color: unset;
4545
padding: 8px 24px;
46-
`
46+
`
4747
: css`
4848
color: ${brandColors.deep[100]};
4949
background-color: unset;
5050
padding: 8px 24px;
51-
`;
51+
`;
5252
case 'texty-gray':
5353
return props.disabled
5454
? css`
5555
color: ${neutralColors.gray[500]};
5656
background-color: unset;
5757
padding: 8px 24px;
5858
opacity: 0.5;
59-
`
59+
`
6060
: css`
6161
color: ${neutralColors.gray[500]};
6262
background-color: unset;
6363
padding: 8px 24px;
64-
`;
64+
`;
6565
case 'texty-primary':
6666
return props.disabled
6767
? css`
6868
color: ${brandColors.pinky[500]};
6969
background-color: unset;
7070
padding: 8px 24px;
7171
opacity: 0.5;
72-
`
72+
`
7373
: css`
7474
color: ${brandColors.pinky[500]};
7575
background-color: unset;
7676
padding: 8px 24px;
77-
`;
77+
`;
7878
case 'texty-secondary':
7979
return props.disabled
8080
? css`
8181
color: ${brandColors.giv[500]};
8282
background-color: unset;
8383
padding: 8px 24px;
8484
opacity: 0.5;
85-
`
85+
`
8686
: css`
8787
color: ${brandColors.giv[500]};
8888
background-color: unset;
8989
padding: 8px 24px;
90-
`;
90+
`;
9191
9292
default:
9393
return props.disabled
9494
? css`
9595
color: ${brandColors.giv[400]};
9696
background-color: ${brandColors.giv[500]};
97-
`
97+
`
9898
: css`
9999
color: ${neutralColors.gray[100]};
100100
background-color: ${brandColors.pinky[500]};
101-
`;
101+
`;
102102
}
103103
}}
104104
${props =>
105105
props.disabled
106106
? ''
107107
: css`
108108
cursor: pointer;
109-
`}
109+
`}
110110
:hover {
111111
${props => {
112112
if (props.disabled) return '';

‎src/components/buttonLinks/OutlineButtonLink.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
99
border: 2px solid;
1010
border-radius: 48px;
1111
padding: ${props => (props.size === 'large' ? '22px' : '14px')} 24px;
12-
transition: color 0.3s ease, border-color 0.3s ease,
12+
transition:
13+
color 0.3s ease,
14+
border-color 0.3s ease,
1315
background-color 0.3s ease;
1416
background-color: unset;
1517
display: flex;
@@ -24,31 +26,31 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
2426
? css`
2527
color: ${brandColors.giv[500]};
2628
border-color: ${brandColors.giv[500]};
27-
`
29+
`
2830
: css`
2931
color: ${brandColors.pinky[400]};
3032
border-color: ${brandColors.pinky[400]};
31-
`;
33+
`;
3234
case 'secondary':
3335
return props.disabled
3436
? css`
3537
color: ${brandColors.giv[500]};
3638
border-color: ${brandColors.giv[500]};
37-
`
39+
`
3840
: css`
3941
color: ${brandColors.giv['000']};
4042
border-color: ${brandColors.giv['000']};
41-
`;
43+
`;
4244
default:
4345
return props.disabled
4446
? css`
4547
color: ${brandColors.giv[500]};
4648
border-color: ${brandColors.giv[500]};
47-
`
49+
`
4850
: css`
4951
color: ${brandColors.pinky[400]};
5052
border-color: ${brandColors.pinky[400]};
51-
`;
53+
`;
5254
}
5355
}}
5456
${props => (props.disabled ? '' : 'cursor: pointer;')}

‎src/components/buttons/Button.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
1010
border: 0 solid;
1111
border-radius: 48px;
1212
padding: ${props => (props.size === 'large' ? '24px' : '16px')} 24px;
13-
transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
13+
transition:
14+
background-color 0.3s ease,
15+
color 0.3s ease,
16+
opacity 0.3s ease;
1417
display: flex;
1518
justify-content: center;
1619
align-items: center;

‎src/components/buttons/OutlineButton.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
1010
border: 2px solid;
1111
border-radius: 48px;
1212
padding: ${props => (props.size === 'large' ? '22px' : '14px')} 24px;
13-
transition: color 0.3s ease, border-color 0.3s ease,
13+
transition:
14+
color 0.3s ease,
15+
border-color 0.3s ease,
1416
background-color 0.3s ease;
1517
background: unset;
1618
display: flex;
@@ -26,41 +28,41 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
2628
? css`
2729
color: ${brandColors.pinky[300]};
2830
border-color: ${brandColors.pinky[300]};
29-
`
31+
`
3032
: css`
3133
color: ${brandColors.pinky[400]};
3234
border-color: ${brandColors.pinky[400]};
33-
`;
35+
`;
3436
case 'secondary':
3537
return props.disabled
3638
? css`
3739
color: ${brandColors.giv[500]};
3840
border-color: ${brandColors.giv[500]};
3941
opacity: 0.4;
40-
`
42+
`
4143
: css`
4244
color: ${brandColors.giv['000']};
4345
border-color: ${brandColors.giv['000']};
44-
`;
46+
`;
4547
default:
4648
return props.disabled
4749
? css`
4850
color: ${brandColors.giv[500]};
4951
border-color: ${brandColors.giv[500]};
5052
opacity: 0.4;
51-
`
53+
`
5254
: css`
5355
color: ${brandColors.pinky[400]};
5456
border-color: ${brandColors.pinky[400]};
55-
`;
57+
`;
5658
}
5759
}}
5860
${props =>
5961
props.disabled
6062
? ''
6163
: css`
6264
cursor: pointer;
63-
`}
65+
`}
6466
:hover {
6567
${props => {
6668
if (props.disabled) return '';

‎src/components/icons/Estimated/Estimated.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
import { IconEstimated16 } from './Estimated16';
4+
import { IconEstimated24 } from './Estimated24';
5+
import { IconEstimated32 } from './Estimated32';
6+
7+
export const IconEstimated: FC<IIconProps> = ({
8+
size = 16,
9+
color = 'currentColor',
10+
}) => {
11+
switch (size.toString()) {
12+
case '16':
13+
return <IconEstimated16 color={color} />;
14+
case '24':
15+
return <IconEstimated24 color={color} />;
16+
case '32':
17+
return <IconEstimated32 color={color} />;
18+
default:
19+
return <IconEstimated24 size={size} color={color} />;
20+
}
21+
};

‎src/components/icons/Estimated/Estimated16.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
4+
export const IconEstimated16: FC<IIconProps> = ({ color = 'currentColor' }) => (
5+
<svg
6+
width='16'
7+
height='16'
8+
viewBox='0 0 16 16'
9+
fill='none'
10+
xmlns='http://www.w3.org/2000/svg'
11+
>
12+
<path
13+
d='M0 1.33333C0 0.596953 0.596954 0 1.33333 0H14.6667C15.403 0 16 0.596954 16 1.33333V14.6667C16 15.403 15.403 16 14.6667 16H1.33333C0.596953 16 0 15.403 0 14.6667V1.33333Z'
14+
fill={color}
15+
/>
16+
<path
17+
d='M2.65799 10.0879C2.29372 10.0879 1.99376 9.79504 2.0115 9.4312C2.05267 8.58655 2.20441 7.88554 2.46671 7.32817C2.79423 6.63221 3.21942 6.12575 3.7423 5.80879C4.27092 5.49182 4.82827 5.33333 5.41435 5.33333C6.00043 5.33333 6.5348 5.48837 7.01745 5.79845C7.50585 6.10164 8.0632 6.58053 8.68951 7.23514C9.1147 7.67614 9.45371 7.98622 9.70653 8.16537C9.96509 8.34453 10.2466 8.43411 10.5512 8.43411C11.0453 8.43411 11.436 8.2205 11.7233 7.79328C11.8886 7.54364 12.0044 7.23019 12.0708 6.85293C12.1608 6.34139 12.562 5.91215 13.0814 5.91215C13.5902 5.91215 14.012 6.3215 13.972 6.82875C13.9144 7.55831 13.7682 8.17268 13.5333 8.67183C13.2115 9.36779 12.7863 9.87425 12.2577 10.1912C11.7291 10.5082 11.1717 10.6667 10.5856 10.6667C9.99957 10.6667 9.4652 10.5151 8.98255 10.2119C8.49989 9.90181 7.94254 9.41947 7.31049 8.76486C6.89104 8.32386 6.55204 8.01378 6.29347 7.83463C6.03491 7.65547 5.75336 7.56589 5.44883 7.56589C4.98341 7.56589 4.59843 7.76227 4.2939 8.15504C4.07578 8.43673 3.94034 8.85614 3.88758 9.41325C3.85255 9.7831 3.55926 10.0879 3.18775 10.0879H2.65799Z'
18+
fill='white'
19+
/>
20+
</svg>
21+
);

‎src/components/icons/Estimated/Estimated24.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
4+
export const IconEstimated24: FC<IIconProps> = ({
5+
color = 'currentColor',
6+
size = 24,
7+
}) => (
8+
<svg
9+
width={size}
10+
height={size}
11+
viewBox='0 0 24 24'
12+
fill='none'
13+
xmlns='http://www.w3.org/2000/svg'
14+
>
15+
<path
16+
d='M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2Z'
17+
fill={color}
18+
/>
19+
<path
20+
d='M3.98698 15.1318C3.44057 15.1318 2.99065 14.6926 3.01725 14.1468C3.07901 12.8798 3.30661 11.8283 3.70006 10.9922C4.19134 9.94832 4.82913 9.18863 5.61345 8.71318C6.40638 8.23773 7.2424 8 8.12153 8C9.00065 8 9.8022 8.23256 10.5262 8.69767C11.2588 9.15246 12.0948 9.8708 13.0343 10.8527C13.6721 11.5142 14.1806 11.9793 14.5598 12.2481C14.9476 12.5168 15.37 12.6512 15.8268 12.6512C16.568 12.6512 17.1541 12.3307 17.585 11.6899C17.8328 11.3155 18.0065 10.8453 18.1061 10.2794C18.2412 9.51208 18.843 8.86822 19.6221 8.86822C20.3854 8.86822 21.018 9.48225 20.958 10.2431C20.8716 11.3375 20.6523 12.259 20.2999 13.0078C19.8173 14.0517 19.1795 14.8114 18.3866 15.2868C17.5936 15.7623 16.7576 16 15.8785 16C14.9994 16 14.1978 15.7726 13.4738 15.3178C12.7498 14.8527 11.9138 14.1292 10.9657 13.1473C10.3366 12.4858 9.82805 12.0207 9.44021 11.7519C9.05236 11.4832 8.63004 11.3488 8.17324 11.3488C7.47511 11.3488 6.89765 11.6434 6.44085 12.2326C6.11367 12.6551 5.91051 13.2842 5.83137 14.1199C5.77882 14.6747 5.33889 15.1318 4.78163 15.1318H3.98698Z'
21+
fill='white'
22+
/>
23+
</svg>
24+
);

‎src/components/icons/Estimated/Estimated32.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
4+
export const IconEstimated32: FC<IIconProps> = ({ color = 'currentColor' }) => (
5+
<svg
6+
width='32'
7+
height='32'
8+
viewBox='0 0 32 32'
9+
fill='none'
10+
xmlns='http://www.w3.org/2000/svg'
11+
>
12+
<path
13+
d='M0 2.66667C0 1.19391 1.19391 0 2.66667 0H29.3333C30.8061 0 32 1.19391 32 2.66667V29.3333C32 30.8061 30.8061 32 29.3333 32H2.66667C1.19391 32 0 30.8061 0 29.3333V2.66667Z'
14+
fill={color}
15+
/>
16+
<path
17+
d='M5.31598 20.1757C4.58743 20.1757 3.98753 19.5901 4.023 18.8624C4.10535 17.1731 4.40882 15.7711 4.93342 14.6563C5.58845 13.2644 6.43884 12.2515 7.48459 11.6176C8.54184 10.9836 9.65654 10.6667 10.8287 10.6667C12.0009 10.6667 13.0696 10.9767 14.0349 11.5969C15.0117 12.2033 16.1264 13.1611 17.379 14.4703C18.2294 15.3523 18.9074 15.9724 19.4131 16.3307C19.9302 16.6891 20.4933 16.8682 21.1023 16.8682C22.0906 16.8682 22.8721 16.441 23.4467 15.5866C23.7771 15.0873 24.0087 14.4604 24.1415 13.7059C24.3216 12.6828 25.124 11.8243 26.1628 11.8243C27.1805 11.8243 28.024 12.643 27.944 13.6575C27.8288 15.1166 27.5364 16.3454 27.0666 17.3437C26.423 18.7356 25.5726 19.7485 24.5154 20.3824C23.4582 21.0164 22.3435 21.3333 21.1713 21.3333C19.9991 21.3333 18.9304 21.0301 17.9651 20.4238C16.9998 19.8036 15.8851 18.8389 14.621 17.5297C13.7821 16.6477 13.1041 16.0276 12.5869 15.6693C12.0698 15.3109 11.5067 15.1318 10.8977 15.1318C9.96682 15.1318 9.19687 15.5245 8.5878 16.3101C8.15157 16.8735 7.88068 17.7123 7.77515 18.8265C7.7051 19.5662 7.11852 20.1757 6.3755 20.1757H5.31598Z'
18+
fill='white'
19+
/>
20+
</svg>
21+
);

0 commit comments

Comments
 (0)