Skip to content

Commit 7e52853

Browse files
authored
feat: APP-352 buying options filter (#2575)
1 parent 5b7107d commit 7e52853

File tree

47 files changed

+1498
-1300
lines changed

Some content is hidden

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

47 files changed

+1498
-1300
lines changed

web-components/src/components/icons/CryptoIcon.tsx

Lines changed: 6 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -4,106 +4,24 @@ export default function CryptoIcon(
44
props: React.SVGProps<SVGSVGElement>,
55
): JSX.Element {
66
return (
7-
<svg
8-
data-testid="CryptoIcon"
9-
viewBox="0 0 29 16"
10-
width="29"
11-
height="16"
12-
{...props}
13-
>
14-
<circle cx="8.5" cy="8" r="8" fill="white" />
7+
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" {...props}>
8+
<circle cx="8.68359" cy="8.5" r="8" fill="white" />
159
<path
16-
d="M8.5 16C12.9183 16 16.5 12.4183 16.5 8C16.5 3.58172 12.9183 0 8.5 0C4.08172 0 0.5 3.58172 0.5 8C0.5 12.4183 4.08172 16 8.5 16Z"
10+
d="M8.68359 16.5C13.1019 16.5 16.6836 12.9183 16.6836 8.5C16.6836 4.08172 13.1019 0.5 8.68359 0.5C4.26532 0.5 0.683594 4.08172 0.683594 8.5C0.683594 12.9183 4.26532 16.5 8.68359 16.5Z"
1711
fill="#2775CA"
1812
/>
1913
<path
20-
d="M7.02515 13.6008C7.02515 13.7893 6.8732 13.8961 6.69591 13.8396C4.2393 13.0603 2.46649 10.7853 2.46649 8.08934C2.46649 5.39961 4.2393 3.11838 6.69591 2.33911C6.87953 2.28255 7.02515 2.38939 7.02515 2.57792V3.04925C7.02515 3.17494 6.93018 3.31948 6.80988 3.36347C4.86612 4.07361 3.47953 5.9275 3.47953 8.08934C3.47953 10.2575 4.86612 12.1051 6.80988 12.8089C6.93018 12.8529 7.02515 12.9975 7.02515 13.1231V13.6008Z"
14+
d="M7.2071 14.1008C7.2071 14.2893 7.05514 14.3962 6.87786 14.3396C4.42125 13.5603 2.64844 11.2854 2.64844 8.58938C2.64844 5.89966 4.42125 3.61842 6.87786 2.83916C7.06147 2.7826 7.2071 2.88943 7.2071 3.07796V3.54929C7.2071 3.67498 7.11212 3.81952 6.99183 3.86351C5.04806 4.57365 3.66147 6.42755 3.66147 8.58938C3.66147 10.7575 5.04806 12.6051 6.99183 13.309C7.11212 13.353 7.2071 13.4975 7.2071 13.6232V14.1008Z"
2115
fill="white"
2216
/>
2317
<path
24-
d="M8.99108 11.8185C8.99108 11.9553 8.87865 12.0671 8.74124 12.0671H8.24157C8.10416 12.0671 7.99174 11.9553 7.99174 11.8185V11.0354C6.89872 10.8863 6.36782 10.2834 6.22416 9.45057C6.19918 9.30763 6.31161 9.18332 6.45526 9.18332H7.02363C7.1423 9.18332 7.24224 9.27034 7.26722 9.38221C7.3734 9.8732 7.66071 10.2523 8.53513 10.2523C9.17845 10.2523 9.64064 9.89184 9.64064 9.35735C9.64064 8.82285 9.37207 8.61775 8.4227 8.46238C7.02363 8.27592 6.36157 7.8533 6.36157 6.76566C6.36157 5.92662 7.0049 5.26782 7.99174 5.13109V4.36042C7.99174 4.22369 8.10416 4.11182 8.24157 4.11182H8.74124C8.87865 4.11182 8.99108 4.22369 8.99108 4.36042V5.14974C9.79679 5.29268 10.3089 5.74638 10.4776 6.50462C10.5088 6.64757 10.3964 6.77809 10.2465 6.77809H9.72184C9.60941 6.77809 9.51573 6.70351 9.4845 6.59785C9.34084 6.11929 8.99732 5.90798 8.39772 5.90798C7.73566 5.90798 7.39214 6.22494 7.39214 6.67243C7.39214 7.14478 7.58576 7.38095 8.60383 7.5239C9.97792 7.71035 10.6899 8.1019 10.6899 9.26412C10.6899 10.1467 10.0279 10.8614 8.99732 11.023V11.8185H8.99108Z"
18+
d="M9.17275 12.3184C9.17275 12.4552 9.06032 12.567 8.92291 12.567H8.42324C8.28584 12.567 8.17341 12.4552 8.17341 12.3184V11.5353C7.08039 11.3862 6.54949 10.7833 6.40583 9.95048C6.38085 9.80753 6.49328 9.68323 6.63693 9.68323H7.2053C7.32397 9.68323 7.42391 9.77024 7.44889 9.88212C7.55507 10.3731 7.84238 10.7522 8.7168 10.7522C9.36012 10.7522 9.82231 10.3918 9.82231 9.85726C9.82231 9.32276 9.55374 9.11766 8.60437 8.96228C7.2053 8.77583 6.54324 8.35321 6.54324 7.26557C6.54324 6.42653 7.18657 5.76773 8.17341 5.631V4.86033C8.17341 4.7236 8.28584 4.61172 8.42324 4.61172H8.92291C9.06032 4.61172 9.17275 4.7236 9.17275 4.86033V5.64964C9.97846 5.79259 10.4906 6.24629 10.6593 7.00453C10.6905 7.14748 10.5781 7.278 10.4282 7.278H9.90351C9.79109 7.278 9.6974 7.20341 9.66617 7.09776C9.52251 6.6192 9.17899 6.40788 8.57939 6.40788C7.91733 6.40788 7.57381 6.72485 7.57381 7.17234C7.57381 7.64469 7.76743 7.88086 8.7855 8.02381C10.1596 8.21026 10.8716 8.60181 10.8716 9.76403C10.8716 10.6466 10.2096 11.3613 9.17899 11.5229V12.3184H9.17275Z"
2519
fill="white"
2620
/>
2721
<path
28-
d="M10.3041 13.8395C10.1205 13.8962 9.97485 13.7892 9.97485 13.6005V13.1286C9.97485 12.9902 10.0572 12.8581 10.1901 12.8141C12.1276 12.1095 13.5205 10.2535 13.5205 8.08934C13.5205 5.91885 12.1339 4.06922 10.1901 3.3646C10.0698 3.32056 9.97485 3.17587 9.97485 3.05004V2.5782C9.97485 2.38946 10.1268 2.28251 10.3041 2.33913C12.7607 3.10666 14.5335 5.39039 14.5335 8.08305C14.5335 10.782 12.7607 13.0594 10.3041 13.8395Z"
22+
d="M10.4894 14.3396C10.3058 14.3962 10.1602 14.2893 10.1602 14.1005V13.6287C10.1602 13.4903 10.2425 13.3582 10.3754 13.3141C12.3129 12.6095 13.7058 10.7536 13.7058 8.58938C13.7058 6.4189 12.3192 4.56927 10.3754 3.86465C10.2551 3.82061 10.1602 3.67591 10.1602 3.55009V3.07824C10.1602 2.8895 10.3121 2.78255 10.4894 2.83917C12.946 3.60671 14.7188 5.89043 14.7188 8.58309C14.7188 11.282 12.946 13.5595 10.4894 14.3396Z"
2923
fill="white"
3024
/>
31-
<circle cx="20.5" cy="8" r="8" fill="url(#paint0_linear_0_1)" />
32-
<path
33-
fill-rule="evenodd"
34-
clip-rule="evenodd"
35-
d="M20.5 15.3744C24.5727 15.3744 27.8743 12.0528 27.8743 7.95537C27.8743 3.85797 24.5727 0.536377 20.5 0.536377C16.4273 0.536377 13.1257 3.85797 13.1257 7.95537C13.1257 12.0528 16.4273 15.3744 20.5 15.3744ZM20.5 14.7487C24.2272 14.7487 27.2486 11.7072 27.2486 7.95537C27.2486 4.20354 24.2272 1.16208 20.5 1.16208C16.7729 1.16208 13.7514 4.20354 13.7514 7.95537C13.7514 11.7072 16.7729 14.7487 20.5 14.7487Z"
36-
fill="white"
37-
/>
38-
<path
39-
d="M19.8177 6.31647V6.32243L19.2575 3.36675L18.7927 3.21777L18.5007 3.61107L19.8177 6.31647Z"
40-
fill="white"
41-
/>
42-
<path
43-
d="M20.1216 5.08292L20.3599 6.22706L20.6162 5.06505L20.3659 4.89819L20.1216 5.08292Z"
44-
fill="white"
45-
/>
46-
<path
47-
d="M21.8914 5.28564L21.5875 5.31544L21.23 6.44766L22.0166 5.55976L21.8914 5.28564Z"
48-
fill="white"
49-
/>
50-
<path
51-
d="M24.4895 5.52399V5.04131L24.0188 4.89233L21.8139 6.96012L24.4895 5.52399Z"
52-
fill="white"
53-
/>
54-
<path
55-
d="M19.1026 6.74545L18.4471 5.76221L18.459 5.78604L18.4471 5.76221L18.1491 5.80988L18.1015 6.10783L19.1026 6.74545Z"
56-
fill="white"
57-
/>
58-
<path
59-
d="M23.3216 7.74658L22.1476 7.97898L23.3216 8.23522L23.5003 7.9909L23.3216 7.74658Z"
60-
fill="white"
61-
/>
62-
<path
63-
d="M18.5782 7.98489L15.5629 7.60352L15.2709 7.99681L15.5629 8.39011L18.5782 7.98489Z"
64-
fill="white"
65-
/>
66-
<path
67-
d="M17.4638 8.64052L17.3745 8.92059L17.6188 9.09937L18.6616 8.51538L17.4638 8.64052Z"
68-
fill="white"
69-
/>
70-
<path
71-
d="M17.8095 9.46891L17.7975 9.76686L18.0836 9.86817L18.9178 8.99219L17.8095 9.46891Z"
72-
fill="white"
73-
/>
74-
<path
75-
d="M19.3111 9.39722L18.4232 10.1779L18.5007 10.4639L18.8046 10.4758L19.3111 9.39722Z"
76-
fill="white"
77-
/>
78-
<path
79-
d="M20.3659 9.74292L20.1275 10.899L20.3719 11.0718L20.6162 10.893L20.3659 9.74292Z"
80-
fill="white"
81-
/>
82-
<path
83-
d="M24.4955 10.4462L21.8139 9.02197L24.0307 11.0778L24.4955 10.9289V10.4462Z"
84-
fill="white"
85-
/>
86-
<path
87-
d="M21.5399 10.6665L20.938 9.65942L21.075 10.8155L21.3611 10.9049L21.5399 10.6665Z"
88-
fill="white"
89-
/>
90-
<path
91-
d="M19.8236 9.65942L18.5186 12.3708L18.8106 12.7641L19.2754 12.6151L19.8236 9.65942Z"
92-
fill="white"
93-
/>
94-
<defs>
95-
<linearGradient
96-
id="paint0_linear_0_1"
97-
x1="16.7011"
98-
y1="15.0168"
99-
x2="22.824"
100-
y2="-5.84682e-07"
101-
gradientUnits="userSpaceOnUse"
102-
>
103-
<stop stop-color="#3FAD6C" />
104-
<stop offset="1" stop-color="#6EC2B7" />
105-
</linearGradient>
106-
</defs>
10725
</svg>
10826
);
10927
}
Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/* eslint-disable lingui/no-unlocalized-strings */
2+
3+
export default function CryptoRegenIcon(
4+
props: React.SVGProps<SVGSVGElement>,
5+
): JSX.Element {
6+
return (
7+
<svg
8+
data-testid="CryptoRegenIcon"
9+
viewBox="0 0 29 16"
10+
width="29"
11+
height="16"
12+
{...props}
13+
>
14+
<circle cx="8.5" cy="8" r="8" fill="white" />
15+
<path
16+
d="M8.5 16C12.9183 16 16.5 12.4183 16.5 8C16.5 3.58172 12.9183 0 8.5 0C4.08172 0 0.5 3.58172 0.5 8C0.5 12.4183 4.08172 16 8.5 16Z"
17+
fill="#2775CA"
18+
/>
19+
<path
20+
d="M7.02515 13.6008C7.02515 13.7893 6.8732 13.8961 6.69591 13.8396C4.2393 13.0603 2.46649 10.7853 2.46649 8.08934C2.46649 5.39961 4.2393 3.11838 6.69591 2.33911C6.87953 2.28255 7.02515 2.38939 7.02515 2.57792V3.04925C7.02515 3.17494 6.93018 3.31948 6.80988 3.36347C4.86612 4.07361 3.47953 5.9275 3.47953 8.08934C3.47953 10.2575 4.86612 12.1051 6.80988 12.8089C6.93018 12.8529 7.02515 12.9975 7.02515 13.1231V13.6008Z"
21+
fill="white"
22+
/>
23+
<path
24+
d="M8.99108 11.8185C8.99108 11.9553 8.87865 12.0671 8.74124 12.0671H8.24157C8.10416 12.0671 7.99174 11.9553 7.99174 11.8185V11.0354C6.89872 10.8863 6.36782 10.2834 6.22416 9.45057C6.19918 9.30763 6.31161 9.18332 6.45526 9.18332H7.02363C7.1423 9.18332 7.24224 9.27034 7.26722 9.38221C7.3734 9.8732 7.66071 10.2523 8.53513 10.2523C9.17845 10.2523 9.64064 9.89184 9.64064 9.35735C9.64064 8.82285 9.37207 8.61775 8.4227 8.46238C7.02363 8.27592 6.36157 7.8533 6.36157 6.76566C6.36157 5.92662 7.0049 5.26782 7.99174 5.13109V4.36042C7.99174 4.22369 8.10416 4.11182 8.24157 4.11182H8.74124C8.87865 4.11182 8.99108 4.22369 8.99108 4.36042V5.14974C9.79679 5.29268 10.3089 5.74638 10.4776 6.50462C10.5088 6.64757 10.3964 6.77809 10.2465 6.77809H9.72184C9.60941 6.77809 9.51573 6.70351 9.4845 6.59785C9.34084 6.11929 8.99732 5.90798 8.39772 5.90798C7.73566 5.90798 7.39214 6.22494 7.39214 6.67243C7.39214 7.14478 7.58576 7.38095 8.60383 7.5239C9.97792 7.71035 10.6899 8.1019 10.6899 9.26412C10.6899 10.1467 10.0279 10.8614 8.99732 11.023V11.8185H8.99108Z"
25+
fill="white"
26+
/>
27+
<path
28+
d="M10.3041 13.8395C10.1205 13.8962 9.97485 13.7892 9.97485 13.6005V13.1286C9.97485 12.9902 10.0572 12.8581 10.1901 12.8141C12.1276 12.1095 13.5205 10.2535 13.5205 8.08934C13.5205 5.91885 12.1339 4.06922 10.1901 3.3646C10.0698 3.32056 9.97485 3.17587 9.97485 3.05004V2.5782C9.97485 2.38946 10.1268 2.28251 10.3041 2.33913C12.7607 3.10666 14.5335 5.39039 14.5335 8.08305C14.5335 10.782 12.7607 13.0594 10.3041 13.8395Z"
29+
fill="white"
30+
/>
31+
<circle cx="20.5" cy="8" r="8" fill="url(#paint0_linear_0_1)" />
32+
<path
33+
fill-rule="evenodd"
34+
clip-rule="evenodd"
35+
d="M20.5 15.3744C24.5727 15.3744 27.8743 12.0528 27.8743 7.95537C27.8743 3.85797 24.5727 0.536377 20.5 0.536377C16.4273 0.536377 13.1257 3.85797 13.1257 7.95537C13.1257 12.0528 16.4273 15.3744 20.5 15.3744ZM20.5 14.7487C24.2272 14.7487 27.2486 11.7072 27.2486 7.95537C27.2486 4.20354 24.2272 1.16208 20.5 1.16208C16.7729 1.16208 13.7514 4.20354 13.7514 7.95537C13.7514 11.7072 16.7729 14.7487 20.5 14.7487Z"
36+
fill="white"
37+
/>
38+
<path
39+
d="M19.8177 6.31647V6.32243L19.2575 3.36675L18.7927 3.21777L18.5007 3.61107L19.8177 6.31647Z"
40+
fill="white"
41+
/>
42+
<path
43+
d="M20.1216 5.08292L20.3599 6.22706L20.6162 5.06505L20.3659 4.89819L20.1216 5.08292Z"
44+
fill="white"
45+
/>
46+
<path
47+
d="M21.8914 5.28564L21.5875 5.31544L21.23 6.44766L22.0166 5.55976L21.8914 5.28564Z"
48+
fill="white"
49+
/>
50+
<path
51+
d="M24.4895 5.52399V5.04131L24.0188 4.89233L21.8139 6.96012L24.4895 5.52399Z"
52+
fill="white"
53+
/>
54+
<path
55+
d="M19.1026 6.74545L18.4471 5.76221L18.459 5.78604L18.4471 5.76221L18.1491 5.80988L18.1015 6.10783L19.1026 6.74545Z"
56+
fill="white"
57+
/>
58+
<path
59+
d="M23.3216 7.74658L22.1476 7.97898L23.3216 8.23522L23.5003 7.9909L23.3216 7.74658Z"
60+
fill="white"
61+
/>
62+
<path
63+
d="M18.5782 7.98489L15.5629 7.60352L15.2709 7.99681L15.5629 8.39011L18.5782 7.98489Z"
64+
fill="white"
65+
/>
66+
<path
67+
d="M17.4638 8.64052L17.3745 8.92059L17.6188 9.09937L18.6616 8.51538L17.4638 8.64052Z"
68+
fill="white"
69+
/>
70+
<path
71+
d="M17.8095 9.46891L17.7975 9.76686L18.0836 9.86817L18.9178 8.99219L17.8095 9.46891Z"
72+
fill="white"
73+
/>
74+
<path
75+
d="M19.3111 9.39722L18.4232 10.1779L18.5007 10.4639L18.8046 10.4758L19.3111 9.39722Z"
76+
fill="white"
77+
/>
78+
<path
79+
d="M20.3659 9.74292L20.1275 10.899L20.3719 11.0718L20.6162 10.893L20.3659 9.74292Z"
80+
fill="white"
81+
/>
82+
<path
83+
d="M24.4955 10.4462L21.8139 9.02197L24.0307 11.0778L24.4955 10.9289V10.4462Z"
84+
fill="white"
85+
/>
86+
<path
87+
d="M21.5399 10.6665L20.938 9.65942L21.075 10.8155L21.3611 10.9049L21.5399 10.6665Z"
88+
fill="white"
89+
/>
90+
<path
91+
d="M19.8236 9.65942L18.5186 12.3708L18.8106 12.7641L19.2754 12.6151L19.8236 9.65942Z"
92+
fill="white"
93+
/>
94+
<defs>
95+
<linearGradient
96+
id="paint0_linear_0_1"
97+
x1="16.7011"
98+
y1="15.0168"
99+
x2="22.824"
100+
y2="-5.84682e-07"
101+
gradientUnits="userSpaceOnUse"
102+
>
103+
<stop stop-color="#3FAD6C" />
104+
<stop offset="1" stop-color="#6EC2B7" />
105+
</linearGradient>
106+
</defs>
107+
</svg>
108+
);
109+
}

web-components/src/components/icons/icons.stories.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import CreditsIssuedIcon from './CreditsIssued';
3838
import CreditsRetiredIcon from './CreditsRetired';
3939
import CreditsTradeableIcon from './CreditsTradeable';
4040
import CryptoIcon from './CryptoIcon';
41+
import CryptoRegenIcon from './CryptoRegenIcon';
4142
import CurrentCreditsIcon from './CurrentCreditsIcon';
4243
import DocumentIcon from './DocumentIcon';
4344
import { DraftDocumentIcon } from './DraftDocumentIcon';
@@ -395,6 +396,7 @@ export const allIcons = (): JSX.Element => (
395396
<LabeledIcon icon={<USFlagIcon />} label="USFlagIcon" />
396397
<LabeledIcon icon={<CreditCardIcon />} label="CreditCardIcon" />
397398
<LabeledIcon icon={<CryptoIcon />} label="CryptoIcon" />
399+
<LabeledIcon icon={<CryptoRegenIcon />} label="CryptoRegenIcon" />
398400
<LabeledIcon icon={<PaymentInfoIcon />} label="PaymentInfoIcon" />
399401
<LabeledIcon icon={<ShoppingBagIcon />} label="ShoppingBagIcon" />
400402
<LabeledIcon icon={<ReceiptIcon />} label="ReceiptIcon" />

web-components/src/components/molecules/ProjectTag/ProjectTag.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const ProjectTag = ({
3737
]}
3838
onClick={onClick}
3939
>
40-
{isImageType(icon) && (
40+
{icon && isImageType(icon) && (
4141
<Box
4242
component="img"
4343
src={icon.src}
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { ImageType } from '../../../types/shared/imageType';
22

33
export type ProjectTagType = {
4-
icon: ImageType | JSX.Element;
4+
icon?: ImageType | JSX.Element;
55
name: string;
66
};
77

88
export function isImageType(icon: ImageType | JSX.Element): icon is ImageType {
9-
return (icon as ImageType).src !== undefined;
9+
return icon && (icon as ImageType).src !== undefined;
1010
}

web-components/src/components/organisms/ProjectFilters/ProjectFilter.TagFilter.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Theme } from '../../../theme/muiTheme';
55
import { ProjectTag } from '../../molecules/ProjectTag/ProjectTag';
66

77
interface TagFilterProps {
8-
icon: JSX.Element;
8+
icon?: JSX.Element;
99
name: string;
1010
isSelected: boolean;
1111
onClick?: () => void;
@@ -29,7 +29,7 @@ export default function TagFilter({
2929
sx = {},
3030
}: TagFilterProps) {
3131
// add isSelected prop to icon
32-
const iconWithProps = cloneElement(icon, { isSelected });
32+
const iconWithProps = icon && cloneElement(icon, { isSelected });
3333
return (
3434
<ProjectTag
3535
sx={{

web-components/src/components/organisms/ProjectFilters/ProjectFilters.CheckboxFilter.tsx

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,36 @@ import { Box, FormControlLabel } from '@mui/material';
22
import Checkbox from 'web-components/src/components/inputs/new/CheckBox/Checkbox';
33

44
export default function CheckboxFilter({
5-
icon,
5+
startIcon,
6+
endIcon,
67
name,
78
isSelected,
89
onChange,
10+
disabled,
911
}: {
10-
icon: JSX.Element;
11-
name: string;
12+
startIcon?: JSX.Element;
13+
endIcon?: JSX.Element;
14+
name: string | JSX.Element;
1215
isSelected: boolean;
1316
onChange?: () => void;
17+
disabled?: boolean;
1418
}) {
1519
return (
1620
<FormControlLabel
17-
control={<Checkbox checked={isSelected} onChange={onChange} />}
21+
disabled={disabled}
22+
className="ml-0 mb-[12px]"
23+
control={
24+
<Checkbox
25+
checked={isSelected}
26+
onChange={onChange}
27+
className="p-0 pr-[13px]"
28+
/>
29+
}
1830
label={
1931
<Box display="flex" flexWrap="nowrap" alignItems="center">
32+
<span className="flex mr-5">{startIcon}</span>
2033
{name}
21-
{icon}
34+
<span className="flex ml-5">{endIcon}</span>
2235
</Box>
2336
}
2437
sx={{ mb: 2, '& .MuiFormControlLabel-label': { fontSize: '14px' } }}

0 commit comments

Comments
 (0)