gatsby-core-theme 44.6.3 → 44.6.4

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/package.json +1 -1
  3. package/src/components/atoms/notifications/index.js +2 -1
  4. package/src/components/atoms/notifications/notification-items/cards-v2/index.js +45 -44
  5. package/src/components/atoms/notifications/notification-items/cards-v2/notification-items.module.scss +236 -242
  6. package/src/components/atoms/notifications/notification-items/spotlight/index.js +0 -12
  7. package/src/images/icons/articleIcon.js +28 -0
  8. package/src/images/icons/closeIcon.js +25 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## [44.6.4](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.6.3...v44.6.4) (2025-11-10)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * updated notification pannel ([44321da](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/44321dada97997559f35eb718e40cec23849fd51))
7
+
8
+
9
+ * Merge branch 'en-215-changes-to-notification-pannel' into 'master' ([cc1575b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/cc1575bf22e22fe28ae5b831f48f78fb712a0fc2))
10
+
1
11
  ## [44.6.3](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.6.2...v44.6.3) (2025-11-06)
2
12
 
3
13
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gatsby-core-theme",
3
- "version": "44.6.3",
3
+ "version": "44.6.4",
4
4
  "description": "Gatsby Theme NPM Package",
5
5
  "author": "",
6
6
  "license": "ISC",
package/src/components/atoms/notifications/index.js CHANGED
@@ -5,6 +5,7 @@ import { NavigationContext } from "gatsby-core-theme/src/components/organisms/na
5
5
  import SpotlightItems from "./notification-items/spotlight";
6
6
  import CardsItems from "./notification-items/cards-v2";
7
7
  import BellIcon from "~images/icons/bell";
8
+ import CloseIcon from "~images/icons/closeIcon";
8
9
  import styles from "./notifications.module.scss";
9
10
  import useTranslate from "../../../hooks/useTranslate/useTranslate";
10
11
 
@@ -69,7 +70,7 @@ const Notifications = ({ section }) => {
69
70
  )}
70
71
  tabIndex={0}
71
72
  >
72
- <BellIcon />
73
+ {openNotification ? <CloseIcon /> : <BellIcon />}
73
74
  </div>
74
75
  {openNotification &&
75
76
  (getNotifications()?.name === "cards_v2" ? (
package/src/components/atoms/notifications/notification-items/cards-v2/index.js CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  /* eslint-disable react/prop-types */
3
2
  /* eslint-disable react-hooks/rules-of-hooks */
4
3
  /* eslint-disable react/no-danger */
@@ -7,45 +6,56 @@ import PropTypes from "prop-types";
7
6
  import LazyImage from "~hooks/lazy-image";
8
7
  import keygen from "~helpers/keygen";
9
8
  import Link from "~hooks/link";
10
- import { imagePrettyUrl, getExtraField } from "~helpers/getters";
9
+ import {
10
+ imagePrettyUrl,
11
+ getExtraField,
12
+ textWordsLimit,
13
+ } from "~helpers/getters";
11
14
  import { getAltText, getImageFilename } from "~helpers/image";
15
+ import ArticleIcon from "../../../../../images/icons/articleIcon";
12
16
  import useTranslate from "~hooks/useTranslate/useTranslate";
13
- import CloseIcon from "~images/icons/close";
14
17
  import { getTimeAgo } from "~helpers/date-time";
15
18
  import styles from "./notification-items.module.scss";
16
19
 
17
- const CardsItems = ({ module, onClose, useBanner = false }) => {
20
+ const CardsItems = ({ module, onClose, wordLimit = 12 }) => {
18
21
  const { items } = module;
19
22
  const noNewUpdates = useTranslate("noNewUpdates", "No new items");
20
23
 
21
24
  const Content = ({ item }) => {
22
- const priorityImage = useBanner
23
- ? item?.banner || item?.relation?.logo?.fileName
24
- : item?.relation?.logo?.fileName;
25
- const img =
26
- getExtraField(item?.extra_fields, "notification_image") ||
27
- priorityImage ||
28
- "";
25
+ const isDefaultOrArticlePage = ["article", "page"].includes(
26
+ item?.relation_type
27
+ );
28
+
29
+ const img = item?.relation?.logo?.filename;
30
+
29
31
  const imageSrc = imagePrettyUrl(img, 40, 40);
30
32
  const fileName = getImageFilename(imageSrc);
31
33
 
32
34
  const TitleTag = item?.title_tag || "label";
35
+
36
+
33
37
  const ribbon = getExtraField(item?.extra_fields, "notification_ribbon");
38
+ const title = getExtraField(item?.extra_fields, "notification_title");
39
+ const subtitle = getExtraField(item?.extra_fields, "notification_subtitle");
34
40
 
35
- const timeData = getTimeAgo(
36
- item?.manual_updated_at ||
37
- item?.updated_at ||
38
- item?.manual_created_at ||
39
- item?.created_at
40
- ) || {};
41
+ const timeData =
42
+ getTimeAgo(
43
+ item?.manual_updated_at ||
44
+ item?.updated_at ||
45
+ item?.manual_created_at ||
46
+ item?.created_at
47
+ ) || {};
41
48
 
42
49
  const timeAgo = timeData
43
- ? `${timeData?.value} ${useTranslate(timeData?.key, timeData?.key?.replace("_", " "))}`
50
+ ? `${timeData?.value} ${useTranslate(
51
+ timeData?.key,
52
+ timeData?.key?.replace("_", " ")
53
+ )}`
44
54
  : "";
45
55
 
46
56
  return (
47
57
  <div className={styles.notificationContent}>
48
- {img && (
58
+ {!isDefaultOrArticlePage ? img && (
49
59
  <LazyImage
50
60
  width={40}
51
61
  height={40}
@@ -55,21 +65,26 @@ const CardsItems = ({ module, onClose, useBanner = false }) => {
55
65
  )}
56
66
  src={imageSrc}
57
67
  />
58
- )}
68
+ ) : <ArticleIcon />}
59
69
  <div className={styles.innerContent}>
60
- {item?.title && <TitleTag>{item?.title}</TitleTag>}
61
- {item?.description && (
62
- <div
63
- className={styles.subtitle}
64
- dangerouslySetInnerHTML={{ __html: item?.description }}
65
- />
70
+ {(item?.title || title) && (
71
+ <TitleTag>{title || item?.title}</TitleTag>
72
+ )}
73
+ {(item?.description || subtitle) && (
74
+ <p className={styles.subtitle}>
75
+ {textWordsLimit(
76
+ (subtitle || item?.description || "").replace(
77
+ /<\/?[^>]+(>|$)/g,
78
+ ""
79
+ ),
80
+ wordLimit
81
+ )}
82
+ </p>
66
83
  )}
67
84
  {item?.template && (
68
85
  <div className={styles.ribbonAndTime}>
69
86
  {ribbon && <span className={styles.ribbon}>{ribbon}</span>}
70
- <span className={styles.extraContent}>
71
- {timeAgo}
72
- </span>
87
+ <span className={styles.extraContent}>{timeAgo}</span>
73
88
  </div>
74
89
  )}
75
90
  </div>
@@ -80,20 +95,7 @@ const CardsItems = ({ module, onClose, useBanner = false }) => {
80
95
  return (
81
96
  <div className={styles.container || ""}>
82
97
  <div className={styles.notificationsContainer || ""}>
83
- <span>
84
- {useTranslate("latestUpdates", "Latest Updates")}
85
- <button
86
- type="button"
87
- onClick={onClose}
88
- className={styles.close || ""}
89
- aria-label={useTranslate(
90
- "ariaLabel-closeNotifications",
91
- "Close notifications"
92
- )}
93
- >
94
- <CloseIcon />
95
- </button>
96
- </span>
98
+ <span>{useTranslate("latestUpdates", "Latest Updates")}</span>
97
99
  {items?.length ? (
98
100
  <ul className={styles.notifications || ""}>
99
101
  {items.map((item) => (
@@ -137,7 +139,6 @@ CardsItems.propTypes = {
137
139
  items: PropTypes.arrayOf(PropTypes.shape({})),
138
140
  }),
139
141
  onClose: PropTypes.func,
140
- useBanner: PropTypes.bool,
141
142
  };
142
143
 
143
144
  export default CardsItems;
package/src/components/atoms/notifications/notification-items/cards-v2/notification-items.module.scss CHANGED
@@ -1,276 +1,270 @@
1
1
  .container {
2
- position: relative;
3
- position: fixed;
4
- left: 0;
5
- top: 7.6rem;
6
- background: #fff;
7
-
8
- @include min(tablet) {
9
- left: auto;
10
- top: calc(100% + 8px);
11
- right: 3.8rem;
12
- border-radius: 1rem;
13
- box-shadow: 0 8px 8px -4px rgb(27 27 28 / 4%), 0 20px 24px -4px rgb(27 27 28 / 7%);
14
- padding-bottom: 1px;
15
- }
16
-
17
- @include min(tablet) {
18
- position: absolute;
19
- right: 0;
20
- }
2
+ position: relative;
3
+ position: fixed;
4
+ left: 0;
5
+ top: 7.6rem;
6
+ background: #fff;
7
+
8
+ @include min(tablet) {
9
+ left: auto;
10
+ top: calc(100% + 8px);
11
+ right: 3.8rem;
12
+ border-radius: 1rem;
13
+ box-shadow: 0 8px 8px -4px rgb(27 27 28 / 4%),
14
+ 0 20px 24px -4px rgb(27 27 28 / 7%);
15
+ padding-bottom: 1px;
21
16
  }
22
-
23
- .notificationsContainer {
24
- width: 100vw;
25
- max-height: 58.4rem;
26
- padding: 1.6rem 1.6rem 2.4rem;
27
-
28
- @include flex-align(stretch, stretch);
29
- @include flex-direction(column);
30
-
31
- gap: 0.8rem;
32
- transition: 0.5s ease-in;
33
- overflow-y: hidden;
34
-
35
- &::-webkit-scrollbar {
36
- width: 4px;
37
- }
38
17
 
39
- &::-webkit-scrollbar-track {
40
- background: #e0e0e2;
41
-
42
- @include min(tablet) {
43
- border-radius: 0 10px 10px 0;
44
- }
45
- }
18
+ @include min(tablet) {
19
+ position: absolute;
20
+ right: 0;
21
+ }
22
+ }
23
+
24
+ .notificationsContainer {
25
+ width: 100vw;
26
+ max-height: 58.4rem;
27
+ padding: 1.6rem 1.6rem 2.4rem;
28
+
29
+ @include flex-align(stretch, stretch);
30
+ @include flex-direction(column);
31
+
32
+ gap: 0.8rem;
33
+ transition: 0.5s ease-in;
34
+ overflow-y: hidden;
35
+
36
+ &::-webkit-scrollbar {
37
+ width: 4px;
38
+ }
39
+
40
+ &::-webkit-scrollbar-track {
41
+ background: #e0e0e2;
46
42
 
47
- &::-webkit-scrollbar-thumb {
48
- background-color: #515156;
49
-
50
- @include min(tablet) {
51
- border-radius: 0 10px 10px 0;
52
- }
53
- }
54
-
55
43
  @include min(tablet) {
56
- border-radius: 4px;
57
- padding: 1.6rem;
58
- font-size: 1rem;
59
- z-index: 100;
60
- white-space: wrap;
61
- max-width: 40.6rem;
62
- width: 40.6rem;
63
- max-height: 60rem;
64
- }
65
-
66
- span {
67
- font-size: 1.8rem;
68
- font-weight: 600;
69
- color: #1b1b1c;
70
- line-height: 2.8rem;
71
- margin: 0;
72
- height: 3.2rem;
73
-
74
- @include flex-align(center, space-between);
44
+ border-radius: 0 10px 10px 0;
75
45
  }
76
46
  }
77
-
78
- .notifications {
79
- @include flex-align(stretch, flex-start);
80
- @include flex-direction(column);
81
-
82
- gap: 0.8rem;
83
- overflow-y: auto;
84
-
85
- &::-webkit-scrollbar {
86
- width: 4px;
87
- }
88
47
 
89
- &::-webkit-scrollbar-track {
90
- background: #e0e0e2;
91
- border-radius: 1rem;
92
- }
48
+ &::-webkit-scrollbar-thumb {
49
+ background-color: #515156;
93
50
 
94
- &::-webkit-scrollbar-thumb {
95
- background-color: #515156;
96
- border-radius: 1rem;
97
- }
98
-
99
51
  @include min(tablet) {
100
- max-height: 50.4rem;
52
+ border-radius: 0 10px 10px 0;
101
53
  }
102
54
  }
103
-
104
- .close {
105
- align-self: flex-start;
106
- padding-right: 1.6rem;
55
+
56
+ @include min(tablet) {
57
+ border-radius: 4px;
58
+ padding: 1.6rem;
59
+ font-size: 1rem;
60
+ z-index: 100;
61
+ white-space: wrap;
62
+ max-width: 40.6rem;
63
+ width: 40.6rem;
64
+ max-height: 60rem;
107
65
  }
108
-
109
- .triangle {
110
- @include min(tablet) {
111
- display: block;
66
+
67
+ span {
68
+ font-size: 1.8rem;
69
+ font-weight: 600;
70
+ color: #1b1b1c;
71
+ line-height: 2.8rem;
72
+ margin: 0;
73
+ height: 3.2rem;
74
+
75
+ @include flex-align(center, space-between);
76
+ }
77
+ }
78
+
79
+ .notifications {
80
+ @include flex-align(stretch, flex-start);
81
+ @include flex-direction(column);
82
+
83
+ gap: 0.8rem;
84
+ overflow-y: auto;
85
+
86
+ &::-webkit-scrollbar {
87
+ width: 4px;
88
+ }
89
+
90
+ &::-webkit-scrollbar-track {
91
+ background: #e0e0e2;
92
+ border-radius: 1rem;
93
+ }
94
+
95
+ &::-webkit-scrollbar-thumb {
96
+ background-color: #515156;
97
+ border-radius: 1rem;
98
+ }
99
+
100
+ @include min(tablet) {
101
+ max-height: 50.4rem;
102
+ }
103
+ }
104
+
105
+ .close {
106
+ align-self: flex-start;
107
+ padding-right: 1.6rem;
108
+ }
109
+
110
+ .triangle {
111
+ @include min(tablet) {
112
+ display: block;
113
+ position: absolute;
114
+ bottom: 99%;
115
+ left: 50%;
116
+ margin-top: -9px;
117
+ background-color: #fff;
118
+ width: 20px;
119
+ height: 20px;
120
+ border-top-right-radius: 5px;
121
+ transform: rotate(300deg) skewX(-30deg) scale(1, 0.866);
122
+ z-index: -1;
123
+
124
+ &::before,
125
+ &::after {
126
+ content: "";
112
127
  position: absolute;
113
- bottom: 99%;
114
- left: 50%;
115
- margin-top: -9px;
116
- background-color: #fff;
128
+ background-color: inherit;
117
129
  width: 20px;
118
130
  height: 20px;
119
131
  border-top-right-radius: 5px;
120
- transform: rotate(300deg) skewX(-30deg) scale(1, 0.866);
121
- z-index: -1;
122
-
123
- &::before,
124
- &::after {
125
- content: '';
126
- position: absolute;
127
- background-color: inherit;
128
- width: 20px;
129
- height: 20px;
130
- border-top-right-radius: 5px;
131
- }
132
-
133
- &::before {
134
- transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
135
- }
136
-
137
- &::after {
138
- transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
139
- }
140
132
  }
141
- }
142
-
143
- .notification {
144
- border-radius: 8px;
145
- background: #f4f4f4;
146
- gap: 0 0.8rem;
147
- position: relative;
148
- border: 1px solid transparent;
149
-
150
- &:hover {
151
- border-color: var(--primary-button-color, #6e33e5);
152
- background-color: #fbfaf9;
133
+
134
+ &::before {
135
+ transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707)
136
+ translate(0, -50%);
153
137
  }
154
138
 
155
139
  &::after {
156
- display: block;
157
- content: '';
158
- width: 6px;
159
- height: 6px;
160
- position: absolute;
161
- right: 1.6rem;
162
- top: 50%;
163
- transform: translateY(-50%);
164
- background-color: var(--primary-button-color, #6e33e5);
165
- border-radius: 100%;
140
+ transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
166
141
  }
167
142
  }
143
+ }
144
+
145
+ .notification {
146
+ border-radius: 8px;
147
+ background: #f4f4f4;
148
+ gap: 0 0.8rem;
149
+ position: relative;
150
+ border: 1px solid transparent;
168
151
 
169
- .notificationLink{
170
- padding: 1.2rem;
171
- width: 100%;
152
+ &:hover {
153
+ border-color: var(--primary-button-color, #6e33e5);
154
+ background-color: #fbfaf9;
172
155
  }
173
-
174
- .overlay {
175
- position: fixed;
176
- width: 100vw;
177
- height: calc(100vh);
178
- z-index: -1;
179
- opacity: 0.45;
180
- background: #0a0e19;
181
-
182
- @include min(tablet) {
183
- display: none;
184
- }
156
+
157
+ &::after {
158
+ display: block;
159
+ content: "";
160
+ width: 6px;
161
+ height: 6px;
162
+ position: absolute;
163
+ right: 1.6rem;
164
+ top: 50%;
165
+ transform: translateY(-50%);
166
+ background-color: var(--primary-button-color, #6e33e5);
167
+ border-radius: 100%;
185
168
  }
186
-
187
- .notificationContent {
188
- @include flex-align(stretch, stretch);
189
- @include flex-direction(row);
190
-
191
- column-gap: 0.8rem;
192
-
193
- img {
194
- width: 4rem;
195
- height: 4rem;
196
- grid-row: 1 / span 2;
197
- border-radius: 4px;
198
- }
199
-
200
- h2,
201
- h3,
202
- h4,
203
- h5,
204
- label {
205
- color: #1b1b1c;
206
- font-size: 1.4rem;
207
- font-weight: 600;
208
- line-height: 2.2rem;
209
- margin: 0;
210
- }
211
-
212
- > div {
213
- color: #f4f4f4;
214
- font-size: 1.2rem;
215
- font-weight: 400;
216
- line-height: 1.8rem;
217
- }
169
+ }
170
+
171
+ .notificationLink {
172
+ padding: 1.2rem;
173
+ width: 100%;
174
+ }
175
+
176
+ .overlay {
177
+ position: fixed;
178
+ width: 100vw;
179
+ height: calc(100vh);
180
+ z-index: -1;
181
+ opacity: 0.45;
182
+ background: #0a0e19;
183
+
184
+ @include min(tablet) {
185
+ display: none;
218
186
  }
187
+ }
188
+
189
+ .notificationContent {
190
+ @include flex-align(stretch, stretch);
191
+ @include flex-direction(row);
192
+
193
+ column-gap: 0.8rem;
219
194
 
220
- .innerContent{
221
- @include flex-direction(column);
195
+ img, svg {
196
+ width: 4rem;
197
+ height: 4rem;
198
+ grid-row: 1 / span 2;
199
+ border-radius: 4px;
222
200
  }
223
-
224
- .subtitle {
225
- margin-bottom: 0.8rem;
226
- grid-column: 2;
227
-
228
- > p {
229
- width: 26rem;
230
- white-space: nowrap;
231
- overflow: hidden;
232
- text-overflow: ellipsis;
233
- color: rgb(81 81 86);
234
- -webkit-line-clamp: 2;
235
- line-clamp: 2;
236
-
237
- @include max(mobile-m) {
238
- width: 20rem;
239
- }
240
- }
201
+
202
+ h2,
203
+ h3,
204
+ h4,
205
+ h5,
206
+ label {
207
+ color: #1b1b1c;
208
+ font-size: 1.4rem;
209
+ font-weight: 600;
210
+ line-height: 2.2rem;
211
+ margin: 0;
241
212
  }
242
-
243
- .ribbonAndTime {
244
- @include flex-align(center, flex-start);
245
213
 
246
- gap: 0.5rem;
247
- font-weight: 500;
248
- grid-column: 2;
249
- height: 1.9rem;
214
+ > div {
215
+ color: #f4f4f4;
216
+ font-size: 1.2rem;
217
+ font-weight: 400;
218
+ line-height: 1.8rem;
219
+ }
220
+ }
250
221
 
251
- .ribbon {
252
- border-radius: 100px;
253
- background: var(--primary-button-color, #6e33e5);
254
- padding: 4px 8px;
255
-
256
- @include flex-align(center, center);
257
-
258
- color: #fff;
259
- text-align: center;
260
- font-size: 0.9rem;
261
- font-weight: 700;
262
- line-height: 1.1rem;
263
- letter-spacing: 0.5px;
264
- text-transform: uppercase;
265
- height: 1.9rem;
266
- }
222
+ .innerContent {
223
+ @include flex-direction(column);
224
+ }
267
225
 
268
- .extraContent{
269
- background: transparent;
270
- color: #64646D;
271
- font-size: 1.2rem;
272
- font-weight: 500;
273
- line-height: 1.8rem;
274
- }
226
+ .subtitle {
227
+ margin-bottom: 0.8rem;
228
+ grid-column: 2;
229
+ width: 26rem;
230
+ text-overflow: ellipsis;
231
+ color: rgb(81 81 86);
232
+
233
+ @include max(mobile-m) {
234
+ width: 20rem;
235
+ }
236
+ }
237
+
238
+ .ribbonAndTime {
239
+ @include flex-align(center, flex-start);
240
+
241
+ gap: 0.5rem;
242
+ font-weight: 500;
243
+ grid-column: 2;
244
+ height: 1.9rem;
245
+
246
+ .ribbon {
247
+ border-radius: 100px;
248
+ background: var(--primary-button-color, #6e33e5);
249
+ padding: 4px 8px;
250
+
251
+ @include flex-align(center, center);
252
+
253
+ color: #fff;
254
+ text-align: center;
255
+ font-size: 0.9rem;
256
+ font-weight: 700;
257
+ line-height: 1.1rem;
258
+ letter-spacing: 0.5px;
259
+ text-transform: uppercase;
260
+ height: 1.9rem;
261
+ }
262
+
263
+ .extraContent {
264
+ background: transparent;
265
+ color: #64646d;
266
+ font-size: 1.2rem;
267
+ font-weight: 500;
268
+ line-height: 1.8rem;
275
269
  }
276
-
270
+ }
package/src/components/atoms/notifications/notification-items/spotlight/index.js CHANGED
@@ -6,7 +6,6 @@ import LazyImage from "~hooks/lazy-image";
6
6
  import keygen from "~helpers/keygen";
7
7
  import Link from "~hooks/link";
8
8
  import useTranslate from "~hooks/useTranslate/useTranslate";
9
- import CloseIcon from "~images/icons/close";
10
9
  import styles from "./notification-items.module.scss";
11
10
 
12
11
  const SpotlightItems = ({ module, onClose }) => {
@@ -54,17 +53,6 @@ const SpotlightItems = ({ module, onClose }) => {
54
53
  <div className={styles.notificationsContainer || ""}>
55
54
  <span>
56
55
  {useTranslate("latestUpdates", "Latest Updates")}
57
- <button
58
- type="button"
59
- onClick={onClose}
60
- className={styles.close || ""}
61
- aria-label={useTranslate(
62
- "ariaLabel-closeNotifications",
63
- "Close notifications"
64
- )}
65
- >
66
- <CloseIcon />
67
- </button>
68
56
  </span>
69
57
  {items?.length ? (
70
58
  <ul className={styles.notifications || ""}>
package/src/images/icons/articleIcon.js ADDED
@@ -0,0 +1,28 @@
1
+
2
+ import React from 'react';
3
+ import PropTypes from 'prop-types';
4
+
5
+ export default function ArticleIcon({ width = 40, height = 40, color = "#020202" }) {
6
+ return (
7
+ <svg
8
+ role="img"
9
+ aria-labelledby="articleIcon"
10
+ width={width}
11
+ height={height}
12
+ viewBox={`0 0 ${width} ${height}`}
13
+ fill="none"
14
+ xmlns="http://www.w3.org/2000/svg"
15
+ >
16
+ <path
17
+ d="M27.3636 13.4545C27.3636 13.2376 27.2774 13.0295 27.1239 12.8761C26.9705 12.7226 26.7624 12.6364 26.5455 12.6364H16.7273C16.5103 12.6364 16.3022 12.7226 16.1488 12.8761C15.9954 13.0295 15.9091 13.2375 15.9091 13.4545V26.5455C15.9091 26.8273 15.8576 27.103 15.7653 27.3636H26.5455C26.7624 27.3636 26.9705 27.2774 27.1239 27.1239C27.2774 26.9705 27.3636 26.7624 27.3636 26.5455V13.4545ZM22.4545 24.0909C22.9064 24.0909 23.2727 24.4572 23.2727 24.9091C23.2727 25.361 22.9064 25.7273 22.4545 25.7273H18.3636C17.9118 25.7273 17.5455 25.361 17.5455 24.9091C17.5455 24.4572 17.9118 24.0909 18.3636 24.0909H22.4545ZM24.9091 20.8182C25.361 20.8182 25.7273 21.1845 25.7273 21.6364C25.7273 22.0882 25.361 22.4545 24.9091 22.4545H18.3636C17.9118 22.4545 17.5455 22.0882 17.5455 21.6364C17.5455 21.1845 17.9118 20.8182 18.3636 20.8182H24.9091ZM24.9091 14.2727C25.361 14.2727 25.7273 14.639 25.7273 15.0909V18.3636C25.7273 18.8155 25.361 19.1818 24.9091 19.1818H18.3636C17.9118 19.1818 17.5455 18.8155 17.5455 18.3636V15.0909C17.5455 14.639 17.9118 14.2727 18.3636 14.2727H24.9091ZM19.1818 17.5455H24.0909V15.9091H19.1818V17.5455ZM12.6364 26.5455C12.6364 26.7624 12.7226 26.9705 12.8761 27.1239C13.0295 27.2774 13.2376 27.3636 13.4545 27.3636C13.6715 27.3636 13.8796 27.2774 14.033 27.1239C14.1865 26.9705 14.2727 26.7624 14.2727 26.5455V18.3636H13.4545C13.0064 18.3636 12.6364 18.7337 12.6364 19.1818V26.5455ZM29 26.5455C29 27.1964 28.7412 27.8206 28.2809 28.2809C27.8206 28.7412 27.1964 29 26.5455 29H13.4545C12.8036 29 12.1794 28.7412 11.7191 28.2809C11.2588 27.8206 11 27.1964 11 26.5455V19.1818C11 17.8299 12.1027 16.7273 13.4545 16.7273H14.2727V13.4545C14.2727 12.8036 14.5315 12.1794 14.9918 11.7191C15.4521 11.2588 16.0763 11 16.7273 11H26.5455C27.1964 11 27.8206 11.2588 28.2809 11.7191C28.7412 12.1794 29 12.8036 29 13.4545V26.5455Z"
18
+ fill={color}
19
+ />
20
+ </svg>
21
+ );
22
+ }
23
+
24
+ ArticleIcon.propTypes = {
25
+ width: PropTypes.number,
26
+ height: PropTypes.number,
27
+ color: PropTypes.string,
28
+ };
package/src/images/icons/closeIcon.js ADDED
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+
4
+ export default function CloseIcon({ width = 26, height = 26, color = '#000' }) {
5
+ return (
6
+ <svg
7
+ width={width}
8
+ height={height}
9
+ viewBox={`0 0 ${width} ${height}`}
10
+ fill="none"
11
+ xmlns="http://www.w3.org/2000/svg"
12
+ >
13
+ <path
14
+ d="M13.4099 12.0002L19.7099 5.71019C19.8982 5.52188 20.004 5.26649 20.004 5.00019C20.004 4.73388 19.8982 4.47849 19.7099 4.29019C19.5216 4.10188 19.2662 3.99609 18.9999 3.99609C18.7336 3.99609 18.4782 4.10188 18.2899 4.29019L11.9999 10.5902L5.70994 4.29019C5.52164 4.10188 5.26624 3.99609 4.99994 3.99609C4.73364 3.99609 4.47824 4.10188 4.28994 4.29019C4.10164 4.47849 3.99585 4.73388 3.99585 5.00019C3.99585 5.26649 4.10164 5.52188 4.28994 5.71019L10.5899 12.0002L4.28994 18.2902C4.19621 18.3831 4.12182 18.4937 4.07105 18.6156C4.02028 18.7375 3.99414 18.8682 3.99414 19.0002C3.99414 19.1322 4.02028 19.2629 4.07105 19.3848C4.12182 19.5066 4.19621 19.6172 4.28994 19.7102C4.3829 19.8039 4.4935 19.8783 4.61536 19.9291C4.73722 19.9798 4.86793 20.006 4.99994 20.006C5.13195 20.006 5.26266 19.9798 5.38452 19.9291C5.50638 19.8783 5.61698 19.8039 5.70994 19.7102L11.9999 13.4102L18.2899 19.7102C18.3829 19.8039 18.4935 19.8783 18.6154 19.9291C18.7372 19.9798 18.8679 20.006 18.9999 20.006C19.132 20.006 19.2627 19.9798 19.3845 19.9291C19.5064 19.8783 19.617 19.8039 19.7099 19.7102C19.8037 19.6172 19.8781 19.5066 19.9288 19.3848C19.9796 19.2629 20.0057 19.1322 20.0057 19.0002C20.0057 18.8682 19.9796 18.7375 19.9288 18.6156C19.8781 18.4937 19.8037 18.3831 19.7099 18.2902L13.4099 12.0002Z"
15
+ fill={color}
16
+ />
17
+ </svg>
18
+ );
19
+ }
20
+
21
+ CloseIcon.propTypes = {
22
+ width: PropTypes.number,
23
+ height: PropTypes.number,
24
+ color: PropTypes.string,
25
+ };