forstok-ui-lib 8.3.19 → 8.3.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -2
- package/dist/index.js +45 -45
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +10 -10
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/images/icons/headphone.svg +4 -0
- package/src/components/icon/styles.ts +250 -227
- package/src/components/icon/typed.ts +104 -105
- package/src/components/table/index.tsx +141 -80
package/package.json
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
2
|
+
<svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C9.09267 6 6.75 8.32878 6.75 11.1841V13.0101C7.08842 12.8438 7.46887 12.75 7.875 12.75C9.35881 12.75 10.5 14.0021 10.5 15.4688L10.5 16.7812C10.5 18.2479 9.35881 19.5 7.875 19.5C6.39119 19.5 5.25 18.2479 5.25 16.7812V16.5V15.4688V11.1841C5.25 7.48477 8.27991 4.5 12 4.5C15.7201 4.5 18.75 7.48477 18.75 11.1841L18.75 15.4673C18.75 15.4678 18.75 15.4683 18.75 15.4688V16.5V16.7812C18.75 18.2479 17.6088 19.5 16.125 19.5C14.6412 19.5 13.5 18.2479 13.5 16.7812V15.4688C13.5 14.0021 14.6412 12.75 16.125 12.75C16.5311 12.75 16.9116 12.8438 17.25 13.0101L17.25 11.1841C17.25 8.32878 14.9073 6 12 6ZM17.25 15.4677C17.2495 14.7603 16.712 14.25 16.125 14.25C15.5377 14.25 15 14.7607 15 15.4688V16.7812C15 17.4893 15.5377 18 16.125 18C16.7123 18 17.25 17.4893 17.25 16.7812V16.5V15.4688C17.25 15.4684 17.25 15.4681 17.25 15.4677ZM6.75 16.5V15.4688C6.75 14.7607 7.28774 14.25 7.875 14.25C8.46226 14.25 9 14.7607 9 15.4688L9 16.7812C9 17.4893 8.46226 18 7.875 18C7.28774 18 6.75 17.4893 6.75 16.7812V16.5Z" fill="#080341"/>
|
|
4
|
+
</svg>
|
|
@@ -1,109 +1,110 @@
|
|
|
1
|
-
import type { MouseEvent } from
|
|
2
|
-
import styled, { css } from
|
|
1
|
+
import type { MouseEvent } from "react";
|
|
2
|
+
import styled, { css } from "styled-components";
|
|
3
3
|
|
|
4
|
-
import IconSearch from
|
|
5
|
-
import IconCheck from
|
|
6
|
-
import IconCheckGrey from
|
|
7
|
-
import IconArrowLeftBlue from
|
|
8
|
-
import IconWarning from
|
|
9
|
-
import IconAlert from
|
|
10
|
-
import IconArrowUpload from
|
|
11
|
-
import IconTrash from
|
|
12
|
-
import IconArrowLeft from
|
|
13
|
-
import IconArrowLeftDouble from
|
|
14
|
-
import IconArrowRight from
|
|
15
|
-
import IconArrowRightDouble from
|
|
16
|
-
import IconCalendar from
|
|
17
|
-
import IconQuestion from
|
|
18
|
-
import IconSortby from
|
|
19
|
-
import IconNotificationDownload from
|
|
20
|
-
import IconNotificationUpload from
|
|
21
|
-
import IconBar from
|
|
22
|
-
import IconClose from
|
|
23
|
-
import IconArrow from
|
|
24
|
-
import IconArrowDown from
|
|
25
|
-
import IconDiscount from
|
|
26
|
-
import IconCash from
|
|
27
|
-
import IconCredit from
|
|
28
|
-
import IconDebit from
|
|
29
|
-
import IconBank from
|
|
30
|
-
import IconQRIS from
|
|
31
|
-
import IconWallet from
|
|
32
|
-
import IconDelivery from
|
|
33
|
-
import IconSuccess from
|
|
34
|
-
import IconEmail from
|
|
35
|
-
import IconPrint from
|
|
36
|
-
import IconBarcode from
|
|
37
|
-
import IconPerson from
|
|
38
|
-
import IconPersonRed from
|
|
39
|
-
import IconCart from
|
|
40
|
-
import IconBack from
|
|
41
|
-
import IconTime from
|
|
42
|
-
import IconDot from
|
|
43
|
-
import IconDashboardLeftNav from
|
|
44
|
-
import IconDashboardActiveLeftNav from
|
|
45
|
-
import IconAiLeftNav from
|
|
46
|
-
import IconAiActiveLeftNav from
|
|
47
|
-
import IconChatLeftNav from
|
|
48
|
-
import IconChatActiveLeftNav from
|
|
49
|
-
import IconReportingLeftNav from
|
|
50
|
-
import IconReportingActiveLeftNav from
|
|
51
|
-
import IconIntegrationLeftNav from
|
|
52
|
-
import IconIntegrationActiveLeftNav from
|
|
53
|
-
import IconSettingLeftNav from
|
|
54
|
-
import IconSettingActiveLeftNav from
|
|
55
|
-
import IconCustomerLeftNav from
|
|
56
|
-
import IconCustomerActiveLeftNav from
|
|
57
|
-
import IconMarketingLeftNav from
|
|
58
|
-
import IconMarketingActiveLeftNav from
|
|
59
|
-
import IconProductLeftNav from
|
|
60
|
-
import IconInventoryLeftNav from
|
|
61
|
-
import IconOrderLeftNav from
|
|
62
|
-
import IconProductActiveLeftNav from
|
|
63
|
-
import IconInventoryActiveLeftNav from
|
|
64
|
-
import IconOrderActiveLeftNav from
|
|
65
|
-
import IconPriceLeftNav from
|
|
66
|
-
import IconPriceActiveLeftNav from
|
|
67
|
-
import IconInvoiceLeftNav from
|
|
68
|
-
import IconInvoiceActiveLeftNav from
|
|
69
|
-
import IconWarningChat from
|
|
70
|
-
import IconCheckChat from
|
|
71
|
-
import IconCheckChatBlue from
|
|
72
|
-
import IconPhone from
|
|
73
|
-
import IconLocation from
|
|
74
|
-
import IconEdit from
|
|
75
|
-
import IconAgent from
|
|
76
|
-
import IconReport from
|
|
77
|
-
import IconActivityLogLeftNav from
|
|
78
|
-
import IconActivityLogActiveLeftNav from
|
|
79
|
-
import IconGender from
|
|
80
|
-
import IconBirthday from
|
|
81
|
-
import IconAttach from
|
|
82
|
-
import IconSmile from
|
|
83
|
-
import IconVoucherLeftNav from
|
|
84
|
-
import IconVoucherActiveLeftNav from
|
|
85
|
-
import IconAnalyticLeftNav from
|
|
86
|
-
import IconAnalyticActiveLeftNav from
|
|
87
|
-
import IconLabelLeftNav from
|
|
88
|
-
import IconLabelActiveLeftNav from
|
|
89
|
-
import IconQuestions from
|
|
90
|
-
import IconFaq from
|
|
91
|
-
import IconApi from
|
|
92
|
-
import IconGift from
|
|
93
|
-
import IconDocument from
|
|
94
|
-
import IconVideo from
|
|
95
|
-
import IconImage from
|
|
96
|
-
import IconEmoji from
|
|
97
|
-
import IconPrice from
|
|
98
|
-
import IconThumb from
|
|
99
|
-
import IconClipboard from
|
|
100
|
-
import IconReload from
|
|
101
|
-
import IconArrowDownGrey from
|
|
102
|
-
import IconCross from
|
|
103
|
-
import IconLinkGreen from
|
|
104
|
-
import IconInfo from
|
|
4
|
+
import IconSearch from "../../assets/images/icons/search.svg";
|
|
5
|
+
import IconCheck from "../../assets/images/icons/checkmark-tick.svg";
|
|
6
|
+
import IconCheckGrey from "../../assets/images/icons/checkmark-tick-grey.svg";
|
|
7
|
+
import IconArrowLeftBlue from "../../assets/images/icons/arrow-left-blue.svg";
|
|
8
|
+
import IconWarning from "../../assets/images/icons/warning.svg";
|
|
9
|
+
import IconAlert from "../../assets/images/icons/alert.svg";
|
|
10
|
+
import IconArrowUpload from "../../assets/images/icons/arrow-upload.svg";
|
|
11
|
+
import IconTrash from "../../assets/images/icons/trash.svg";
|
|
12
|
+
import IconArrowLeft from "../../assets/images/icons/arrow-left.svg";
|
|
13
|
+
import IconArrowLeftDouble from "../../assets/images/icons/arrow-left-double.svg";
|
|
14
|
+
import IconArrowRight from "../../assets/images/icons/arrow-right.svg";
|
|
15
|
+
import IconArrowRightDouble from "../../assets/images/icons/arrow-right-double.svg";
|
|
16
|
+
import IconCalendar from "../../assets/images/icons/calendar.svg";
|
|
17
|
+
import IconQuestion from "../../assets/images/icons/question.svg";
|
|
18
|
+
import IconSortby from "../../assets/images/icons/sortby.svg";
|
|
19
|
+
import IconNotificationDownload from "../../assets/images/icons/notif-download-white.svg";
|
|
20
|
+
import IconNotificationUpload from "../../assets/images/icons/notif-upload-white.svg";
|
|
21
|
+
import IconBar from "../../assets/images/icons/humberbars.svg";
|
|
22
|
+
import IconClose from "../../assets/images/icons/close.svg";
|
|
23
|
+
import IconArrow from "../../assets/images/icons/arrow.svg";
|
|
24
|
+
import IconArrowDown from "../../assets/images/icons/arrow-down.svg";
|
|
25
|
+
import IconDiscount from "../../assets/images/icons/discount.svg";
|
|
26
|
+
import IconCash from "../../assets/images/icons/cash.svg";
|
|
27
|
+
import IconCredit from "../../assets/images/icons/credit.svg";
|
|
28
|
+
import IconDebit from "../../assets/images/icons/debit.svg";
|
|
29
|
+
import IconBank from "../../assets/images/icons/bank.svg";
|
|
30
|
+
import IconQRIS from "../../assets/images/icons/qris.svg";
|
|
31
|
+
import IconWallet from "../../assets/images/icons/wallet.svg";
|
|
32
|
+
import IconDelivery from "../../assets/images/icons/delivery.svg";
|
|
33
|
+
import IconSuccess from "../../assets/images/icons/success.svg";
|
|
34
|
+
import IconEmail from "../../assets/images/icons/email.svg";
|
|
35
|
+
import IconPrint from "../../assets/images/icons/print.svg";
|
|
36
|
+
import IconBarcode from "../../assets/images/icons/barcode.svg";
|
|
37
|
+
import IconPerson from "../../assets/images/icons/person.svg";
|
|
38
|
+
import IconPersonRed from "../../assets/images/icons/person-red.svg";
|
|
39
|
+
import IconCart from "../../assets/images/icons/cart.svg";
|
|
40
|
+
import IconBack from "../../assets/images/icons/back.svg";
|
|
41
|
+
import IconTime from "../../assets/images/icons/time.svg";
|
|
42
|
+
import IconDot from "../../assets/images/icons/dot.svg";
|
|
43
|
+
import IconDashboardLeftNav from "../../assets/images/navs/left/dashboard.svg";
|
|
44
|
+
import IconDashboardActiveLeftNav from "../../assets/images/navs/left/dashboard-active.svg";
|
|
45
|
+
import IconAiLeftNav from "../../assets/images/navs/left/ai.svg";
|
|
46
|
+
import IconAiActiveLeftNav from "../../assets/images/navs/left/ai-active.svg";
|
|
47
|
+
import IconChatLeftNav from "../../assets/images/navs/left/chats.svg";
|
|
48
|
+
import IconChatActiveLeftNav from "../../assets/images/navs/left/chats-active.svg";
|
|
49
|
+
import IconReportingLeftNav from "../../assets/images/navs/left/reporting.svg";
|
|
50
|
+
import IconReportingActiveLeftNav from "../../assets/images/navs/left/reporting-active.svg";
|
|
51
|
+
import IconIntegrationLeftNav from "../../assets/images/navs/left/integrations.svg";
|
|
52
|
+
import IconIntegrationActiveLeftNav from "../../assets/images/navs/left/integrations-active.svg";
|
|
53
|
+
import IconSettingLeftNav from "../../assets/images/navs/left/settings.svg";
|
|
54
|
+
import IconSettingActiveLeftNav from "../../assets/images/navs/left/settings-active.svg";
|
|
55
|
+
import IconCustomerLeftNav from "../../assets/images/navs/left/customers.svg";
|
|
56
|
+
import IconCustomerActiveLeftNav from "../../assets/images/navs/left/customers-active.svg";
|
|
57
|
+
import IconMarketingLeftNav from "../../assets/images/navs/left/marketing.svg";
|
|
58
|
+
import IconMarketingActiveLeftNav from "../../assets/images/navs/left/marketing-active.svg";
|
|
59
|
+
import IconProductLeftNav from "../../assets/images/navs/left/products.svg";
|
|
60
|
+
import IconInventoryLeftNav from "../../assets/images/navs/left/inventory.svg";
|
|
61
|
+
import IconOrderLeftNav from "../../assets/images/navs/left/order.svg";
|
|
62
|
+
import IconProductActiveLeftNav from "../../assets/images/navs/left/products-active.svg";
|
|
63
|
+
import IconInventoryActiveLeftNav from "../../assets/images/navs/left/inventory-active.svg";
|
|
64
|
+
import IconOrderActiveLeftNav from "../../assets/images/navs/left/order-active.svg";
|
|
65
|
+
import IconPriceLeftNav from "../../assets/images/navs/left/price.svg";
|
|
66
|
+
import IconPriceActiveLeftNav from "../../assets/images/navs/left/price-active.svg";
|
|
67
|
+
import IconInvoiceLeftNav from "../../assets/images/navs/left/invoice.svg";
|
|
68
|
+
import IconInvoiceActiveLeftNav from "../../assets/images/navs/left/invoice-active.svg";
|
|
69
|
+
import IconWarningChat from "../../assets/images/icons/warning-agent.svg";
|
|
70
|
+
import IconCheckChat from "../../assets/images/icons/check.svg";
|
|
71
|
+
import IconCheckChatBlue from "../../assets/images/icons/check-blue.svg";
|
|
72
|
+
import IconPhone from "../../assets/images/icons/phone.svg";
|
|
73
|
+
import IconLocation from "../../assets/images/icons/location.svg";
|
|
74
|
+
import IconEdit from "../../assets/images/icons/edit.svg";
|
|
75
|
+
import IconAgent from "../../assets/images/icons/agent.svg";
|
|
76
|
+
import IconReport from "../../assets/images/icons/report.svg";
|
|
77
|
+
import IconActivityLogLeftNav from "../../assets/images/navs/left/activity-log.svg";
|
|
78
|
+
import IconActivityLogActiveLeftNav from "../../assets/images/navs/left/activity-log-active.svg";
|
|
79
|
+
import IconGender from "../../assets/images/icons/gender.svg";
|
|
80
|
+
import IconBirthday from "../../assets/images/icons/birthday.svg";
|
|
81
|
+
import IconAttach from "../../assets/images/icons/attach.svg";
|
|
82
|
+
import IconSmile from "../../assets/images/icons/smile.svg";
|
|
83
|
+
import IconVoucherLeftNav from "../../assets/images/navs/left/voucher.svg";
|
|
84
|
+
import IconVoucherActiveLeftNav from "../../assets/images/navs/left/voucher-active.svg";
|
|
85
|
+
import IconAnalyticLeftNav from "../../assets/images/navs/left/analytic.svg";
|
|
86
|
+
import IconAnalyticActiveLeftNav from "../../assets/images/navs/left/analytic-active.svg";
|
|
87
|
+
import IconLabelLeftNav from "../../assets/images/navs/left/label.svg";
|
|
88
|
+
import IconLabelActiveLeftNav from "../../assets/images/navs/left/label-active.svg";
|
|
89
|
+
import IconQuestions from "../../assets/images/help/questions.svg";
|
|
90
|
+
import IconFaq from "../../assets/images/help/faq.svg";
|
|
91
|
+
import IconApi from "../../assets/images/help/api.svg";
|
|
92
|
+
import IconGift from "../../assets/images/help/gift-box.svg";
|
|
93
|
+
import IconDocument from "../../assets/images/icons/document.svg";
|
|
94
|
+
import IconVideo from "../../assets/images/icons/video.svg";
|
|
95
|
+
import IconImage from "../../assets/images/icons/image.svg";
|
|
96
|
+
import IconEmoji from "../../assets/images/icons/emoji.svg";
|
|
97
|
+
import IconPrice from "../../assets/images/icons/price.svg";
|
|
98
|
+
import IconThumb from "../../assets/images/icons/thumb.svg";
|
|
99
|
+
import IconClipboard from "../../assets/images/icons/clipboard.svg";
|
|
100
|
+
import IconReload from "../../assets/images/icons/reload.svg";
|
|
101
|
+
import IconArrowDownGrey from "../../assets/images/icons/arrow-down-grey.svg";
|
|
102
|
+
import IconCross from "../../assets/images/icons/checkmark-x.svg";
|
|
103
|
+
import IconLinkGreen from "../../assets/images/icons/link-green.svg";
|
|
104
|
+
import IconInfo from "../../assets/images/icons/info.svg";
|
|
105
|
+
import IconHeadphone from "../../assets/images/icons/headphone.svg";
|
|
105
106
|
|
|
106
|
-
import { IconMode, IconName } from
|
|
107
|
+
import { IconMode, IconName } from "./typed";
|
|
107
108
|
|
|
108
109
|
const NotificationStyled = css`
|
|
109
110
|
width: 44px;
|
|
@@ -115,165 +116,187 @@ const NotificationStyled = css`
|
|
|
115
116
|
display: grid;
|
|
116
117
|
align-items: center;
|
|
117
118
|
justify-content: center;
|
|
118
|
-
|
|
119
|
+
`;
|
|
119
120
|
|
|
120
121
|
const iconStyles = {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
122
|
+
search: IconSearch,
|
|
123
|
+
check: IconCheck,
|
|
124
|
+
"check-grey": IconCheckGrey,
|
|
125
|
+
"arrow-left-blue": IconArrowLeftBlue,
|
|
126
|
+
edit: IconEdit,
|
|
127
|
+
arrow: IconArrow,
|
|
128
|
+
discount: IconDiscount,
|
|
129
|
+
cash: IconCash,
|
|
130
|
+
credit: IconCredit,
|
|
131
|
+
debit: IconDebit,
|
|
132
|
+
bank: IconBank,
|
|
133
|
+
qris: IconQRIS,
|
|
134
|
+
wallet: IconWallet,
|
|
135
|
+
delivery: IconDelivery,
|
|
136
|
+
success: IconSuccess,
|
|
137
|
+
email: IconEmail,
|
|
138
|
+
print: IconPrint,
|
|
139
|
+
warning: IconWarning,
|
|
140
|
+
alert: IconAlert,
|
|
141
|
+
barcode: IconBarcode,
|
|
142
|
+
"arrow-upload": IconArrowUpload,
|
|
143
|
+
trash: IconTrash,
|
|
144
|
+
"arrow-left": IconArrowLeft,
|
|
145
|
+
"arrow-left-double": IconArrowLeftDouble,
|
|
146
|
+
"arrow-right": IconArrowRight,
|
|
147
|
+
"arrow-right-double": IconArrowRightDouble,
|
|
148
|
+
"arrow-down": IconArrowDown,
|
|
149
|
+
calendar: IconCalendar,
|
|
150
|
+
question: IconQuestion,
|
|
151
|
+
sortby: IconSortby,
|
|
152
|
+
NotificationDownload: IconNotificationDownload,
|
|
153
|
+
NotificationUpload: IconNotificationUpload,
|
|
154
|
+
bar: IconBar,
|
|
155
|
+
close: IconClose,
|
|
156
|
+
person: IconPerson,
|
|
157
|
+
"person-red": IconPersonRed,
|
|
158
|
+
cart: IconCart,
|
|
159
|
+
back: IconBack,
|
|
160
|
+
time: IconTime,
|
|
161
|
+
dot: IconDot,
|
|
162
|
+
"dashboard-left-nav": IconDashboardLeftNav,
|
|
163
|
+
"dashboard-active-left-nav": IconDashboardActiveLeftNav,
|
|
164
|
+
"chat-left-nav": IconChatLeftNav,
|
|
165
|
+
"chat-active-left-nav": IconChatActiveLeftNav,
|
|
166
|
+
"ai-left-nav": IconAiLeftNav,
|
|
167
|
+
"ai-active-left-nav": IconAiActiveLeftNav,
|
|
168
|
+
"reporting-left-nav": IconReportingLeftNav,
|
|
169
|
+
"reporting-active-left-nav": IconReportingActiveLeftNav,
|
|
170
|
+
"activity-log-left-nav": IconActivityLogLeftNav,
|
|
171
|
+
"activity-log-active-left-nav": IconActivityLogActiveLeftNav,
|
|
172
|
+
"integration-left-nav": IconIntegrationLeftNav,
|
|
173
|
+
"integration-active-left-nav": IconIntegrationActiveLeftNav,
|
|
174
|
+
"setting-left-nav": IconSettingLeftNav,
|
|
175
|
+
"setting-active-left-nav": IconSettingActiveLeftNav,
|
|
176
|
+
"customer-left-nav": IconCustomerLeftNav,
|
|
177
|
+
"customer-active-left-nav": IconCustomerActiveLeftNav,
|
|
178
|
+
"marketing-left-nav": IconMarketingLeftNav,
|
|
179
|
+
"marketing-active-left-nav": IconMarketingActiveLeftNav,
|
|
180
|
+
"product-left-nav": IconProductLeftNav,
|
|
181
|
+
"product-active-left-nav": IconProductActiveLeftNav,
|
|
182
|
+
"inventory-left-nav": IconInventoryLeftNav,
|
|
183
|
+
"inventory-active-left-nav": IconInventoryActiveLeftNav,
|
|
184
|
+
"order-left-nav": IconOrderLeftNav,
|
|
185
|
+
"order-active-left-nav": IconOrderActiveLeftNav,
|
|
186
|
+
"price-left-nav": IconPriceLeftNav,
|
|
187
|
+
"price-active-left-nav": IconPriceActiveLeftNav,
|
|
188
|
+
"invoice-left-nav": IconInvoiceLeftNav,
|
|
189
|
+
"invoice-active-left-nav": IconInvoiceActiveLeftNav,
|
|
190
|
+
"warning-chat": IconWarningChat,
|
|
191
|
+
"check-chat": IconCheckChat,
|
|
192
|
+
"check-chat-blue": IconCheckChatBlue,
|
|
193
|
+
phone: IconPhone,
|
|
194
|
+
location: IconLocation,
|
|
195
|
+
agent: IconAgent,
|
|
196
|
+
report: IconReport,
|
|
197
|
+
gender: IconGender,
|
|
198
|
+
birthday: IconBirthday,
|
|
199
|
+
attach: IconAttach,
|
|
200
|
+
smile: IconSmile,
|
|
201
|
+
"voucher-left-nav": IconVoucherLeftNav,
|
|
202
|
+
"voucher-active-left-nav": IconVoucherActiveLeftNav,
|
|
203
|
+
"analytic-left-nav": IconAnalyticLeftNav,
|
|
204
|
+
"analytic-active-left-nav": IconAnalyticActiveLeftNav,
|
|
205
|
+
"label-left-nav": IconLabelLeftNav,
|
|
206
|
+
"label-active-left-nav": IconLabelActiveLeftNav,
|
|
207
|
+
questions: IconQuestions,
|
|
208
|
+
faq: IconFaq,
|
|
209
|
+
api: IconApi,
|
|
210
|
+
gift: IconGift,
|
|
211
|
+
document: IconDocument,
|
|
212
|
+
video: IconVideo,
|
|
213
|
+
image: IconImage,
|
|
214
|
+
emoji: IconEmoji,
|
|
215
|
+
price: IconPrice,
|
|
216
|
+
thumb: IconThumb,
|
|
217
|
+
clipboard: IconClipboard,
|
|
218
|
+
reload: IconReload,
|
|
219
|
+
"arrow-down-grey": IconArrowDownGrey,
|
|
220
|
+
cross: IconCross,
|
|
221
|
+
"link-green": IconLinkGreen,
|
|
222
|
+
info: IconInfo,
|
|
223
|
+
headphone: IconHeadphone,
|
|
224
|
+
} as const;
|
|
223
225
|
const modeStyles = {
|
|
224
226
|
filter: css`
|
|
225
227
|
position: relative;
|
|
226
228
|
`,
|
|
227
229
|
disabled: css`
|
|
228
|
-
&,
|
|
230
|
+
&,
|
|
229
231
|
&:before {
|
|
230
|
-
opacity: .7;
|
|
232
|
+
opacity: 0.7;
|
|
231
233
|
}
|
|
232
|
-
|
|
233
|
-
}
|
|
234
|
-
const getIconContainerStyled = ({
|
|
235
|
-
$
|
|
236
|
-
|
|
237
|
-
|
|
234
|
+
`,
|
|
235
|
+
};
|
|
236
|
+
const getIconContainerStyled = ({
|
|
237
|
+
$mode,
|
|
238
|
+
$name,
|
|
239
|
+
$width,
|
|
240
|
+
onClick,
|
|
241
|
+
}: {
|
|
242
|
+
$mode?: IconMode;
|
|
243
|
+
$name: IconName;
|
|
244
|
+
$width?: string | number;
|
|
245
|
+
onClick?: (e: MouseEvent<HTMLElement>) => void;
|
|
246
|
+
}) => css`
|
|
247
|
+
${$name &&
|
|
248
|
+
css`
|
|
249
|
+
&:before {
|
|
250
|
+
content: url(${iconStyles[$name]});
|
|
238
251
|
}
|
|
239
252
|
`}
|
|
240
253
|
|
|
241
|
-
${$name ===
|
|
242
|
-
|
|
254
|
+
${$name === "question" &&
|
|
255
|
+
css`
|
|
256
|
+
&:before {
|
|
243
257
|
filter: grayscale(100%);
|
|
244
258
|
}
|
|
245
259
|
`}
|
|
246
260
|
|
|
247
|
-
${$name ===
|
|
248
|
-
|
|
261
|
+
${$name === "link-green" &&
|
|
262
|
+
css`
|
|
263
|
+
&:before {
|
|
249
264
|
position: relative;
|
|
250
265
|
top: 3px;
|
|
251
266
|
left: -2px;
|
|
252
267
|
}
|
|
253
268
|
`}
|
|
254
269
|
|
|
255
|
-
${($name ===
|
|
270
|
+
${($name === "NotificationDownload" || $name === "NotificationUpload") &&
|
|
271
|
+
css`
|
|
256
272
|
${NotificationStyled}
|
|
257
273
|
`}
|
|
258
274
|
|
|
259
|
-
${$width &&
|
|
260
|
-
|
|
261
|
-
|
|
275
|
+
${$width &&
|
|
276
|
+
css`
|
|
277
|
+
&:before {
|
|
278
|
+
width: ${$width};
|
|
262
279
|
height: ${$width};
|
|
263
280
|
}
|
|
264
281
|
`}
|
|
265
282
|
|
|
266
|
-
${onClick &&
|
|
283
|
+
${onClick &&
|
|
284
|
+
css`
|
|
267
285
|
cursor: pointer;
|
|
268
286
|
`}
|
|
269
287
|
|
|
270
288
|
${$mode && modeStyles[$mode]}
|
|
271
|
-
|
|
289
|
+
`;
|
|
272
290
|
|
|
273
|
-
export const IconContainer = styled.i<{
|
|
291
|
+
export const IconContainer = styled.i<{
|
|
292
|
+
$mode?: IconMode;
|
|
293
|
+
$name: IconName;
|
|
294
|
+
$width?: string | number;
|
|
295
|
+
onClick?: (e: MouseEvent<HTMLElement>) => void;
|
|
296
|
+
}>`
|
|
274
297
|
display: inline-block;
|
|
275
298
|
&:before {
|
|
276
299
|
display: grid;
|
|
277
300
|
}
|
|
278
301
|
${getIconContainerStyled}
|
|
279
|
-
|
|
302
|
+
`;
|