@dnanpm/styleguide 3.7.2 → 3.8.1

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 (21) hide show
  1. package/CHANGELOG.md +561 -0
  2. package/README.md +22 -22
  3. package/build/cjs/components/Carousel/Carousel.d.ts +1 -1
  4. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts +5 -4
  5. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js +5 -3
  6. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.d.ts +3 -2
  7. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js +4 -2
  8. package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.d.ts +11 -2
  9. package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.js +8 -6
  10. package/build/cjs/components/PriorityNavigation/PriorityNavigation.js +1 -1
  11. package/build/cjs/components/ReadMore/ReadMore.js +1 -0
  12. package/build/es/components/Carousel/Carousel.d.ts +1 -1
  13. package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts +5 -4
  14. package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js +5 -3
  15. package/build/es/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.d.ts +3 -2
  16. package/build/es/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js +4 -2
  17. package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.d.ts +11 -2
  18. package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.js +8 -6
  19. package/build/es/components/PriorityNavigation/PriorityNavigation.js +2 -2
  20. package/build/es/components/ReadMore/ReadMore.js +1 -0
  21. package/package.json +8 -12
package/CHANGELOG.md ADDED
@@ -0,0 +1,561 @@
1
+ See [How to Changelog](https://oakdvcs.dna.fi/projects/DSG/repos/styleguide/browse/docs/HOW-TO-CHANGELOG.md) in DNA Styleguide repository for more information.
2
+
3
+ ## [Unreleased]
4
+
5
+ ### Added
6
+
7
+ ### Changed
8
+
9
+ ### Fixed
10
+
11
+ ### Deprecated
12
+
13
+ ### Removed
14
+
15
+ ### Security
16
+
17
+ ## [3.8.1] - 2024-10-04
18
+
19
+ ### Added
20
+
21
+ - Property `onCartButtonClick` to the `MainHeaderNavigation` component (@hicotech) ([STYLE-669](https://jira.dna.fi/browse/STYLE-669))
22
+
23
+ ### Changed
24
+
25
+ - Library version of `@dnanpm/icons` from `v2.0.1` to `v2.0.3` (@hicotech) ([STYLE-666](https://jira.dna.fi/browse/STYLE-666))
26
+ - Icon `ChevronDown` to `OvalChevronDown` for mobile dropdown button in `PriorityNavigation` component (@hicotech) ([STYLE-666](https://jira.dna.fi/browse/STYLE-666))
27
+ - Icon `ChevronUp` to `OvalChevronUp` for mobile dropdown button in `PriorityNavigation` component (@hicotech) ([STYLE-666](https://jira.dna.fi/browse/STYLE-666))
28
+ - Icon size for mobile dropdown button to `2.5rem` in `PriorityNavigation` component (@hicotech) ([STYLE-666](https://jira.dna.fi/browse/STYLE-666))
29
+
30
+ ### Fixed
31
+
32
+ - Collapsed content overflowing to button in `ReadMore` component (@hicotech) ([STYLE-688](https://jira.dna.fi/browse/STYLE-688))
33
+
34
+ ### Deprecated
35
+
36
+ - Property `minicartComponent` in the `MainHeaderNavigation` component (@hicotech) ([STYLE-668](https://jira.dna.fi/browse/STYLE-668))
37
+
38
+ ## [3.7.2] - 2024-08-26
39
+
40
+ ### Added
41
+
42
+ - New `Carousel` component (@hicotech) ([STYLE-491](https://jira.dna.fi/browse/STYLE-491))
43
+ - Property `id` to the `ReadMore` component (@hicotech) ([STYLE-497](https://jira.dna.fi/browse/STYLE-497))
44
+ - Property `isExpanded` to the `ReadMore` component (@hicotech) ([STYLE-497](https://jira.dna.fi/browse/STYLE-497))
45
+ - Property `buttonLabel` to the `ReadMore` component (@hicotech) ([STYLE-497](https://jira.dna.fi/browse/STYLE-497))
46
+ - Property `buttonPosition` to the `ReadMore` component (@hicotech) ([STYLE-497](https://jira.dna.fi/browse/STYLE-497))
47
+ - Property `data-testid` to the `ReadMore` component (@hicotech) ([STYLE-497](https://jira.dna.fi/browse/STYLE-497))
48
+ - New `Expander` component (@hicotech) ([STYLE-538](https://jira.dna.fi/browse/STYLE-538))
49
+
50
+ ### Changed
51
+
52
+ - Styling of `ReadMore` component (@hicotech) ([STYLE-497](https://jira.dna.fi/browse/STYLE-497))
53
+
54
+ ### Deprecated
55
+
56
+ - Internal state management of the `ReadMore` component (@hicotech) ([STYLE-661](https://jira.dna.fi/browse/STYLE-661))
57
+ - Property `seoInitExpanded` in the `ReadMore` component (@hicotech) ([STYLE-661](https://jira.dna.fi/browse/STYLE-661))
58
+ - Property `showMoreText` in the `ReadMore` component (@hicotech) ([STYLE-497](https://jira.dna.fi/browse/STYLE-497))
59
+ - Property `showLessText` in the `ReadMore` component (@hicotech) ([STYLE-497](https://jira.dna.fi/browse/STYLE-497))
60
+
61
+ ## [3.7.1] - 2024-08-05
62
+
63
+ ### Changed
64
+
65
+ - Position of close button in the `Drawer` component to be sticky (@kaylagordon-dna) ([STYLE-658](https://jira.dna.fi/browse/STYLE-658))
66
+
67
+ ### Fixed
68
+
69
+ - Internal typescript and build configurations causing types not being accessible (@hicotech) ([STYLE-659](https://jira.dna.fi/browse/STYLE-659))
70
+
71
+ ## [3.7.0] - 2024-07-29
72
+
73
+ ### Added
74
+
75
+ - Property `title` to the `Drawer` component (@kaylagordon-dna) ([STYLE-529](https://jira.dna.fi/browse/STYLE-529))
76
+ - Property `subtitle` to the `Drawer` component (@kaylagordon-dna) ([STYLE-529](https://jira.dna.fi/browse/STYLE-529))
77
+ - Property `variant` to the `Drawer` component (@kaylagordon-dna) ([STYLE-529](https://jira.dna.fi/browse/STYLE-529))
78
+ - Property `footer` to the `Drawer` component (@kaylagordon-dna) ([STYLE-529](https://jira.dna.fi/browse/STYLE-529))
79
+
80
+ ### Changed
81
+
82
+ - Internal `useResizeObserver` hook to use `borderBoxSize` instead of `contentRect` affecting `Accordion`, `AccordionItem` and `PriorityNavigation` components (@hicotech) ([STYLE-654](https://jira.dna.fi/browse/STYLE-654))
83
+ - Styling of the `Drawer` component (@kaylagordon-dna) ([STYLE-529](https://jira.dna.fi/browse/STYLE-529))
84
+ - Property `padding` of the `Drawer` component to be applicable to content (@kaylagordon-dna) ([STYLE-529](https://jira.dna.fi/browse/STYLE-529))
85
+
86
+ ### Fixed
87
+
88
+ - Layout of `PriorityNavigation` component (@hicotech) ([STYLE-654](https://jira.dna.fi/browse/STYLE-654))
89
+ - Layout of `PriorityNavigationItem` component (@hicotech) ([STYLE-654](https://jira.dna.fi/browse/STYLE-654))
90
+ - Incorrect overflow calculation in `PriorityNavigation` component (@hicotech) ([STYLE-654](https://jira.dna.fi/browse/STYLE-654))
91
+
92
+ ### Deprecated
93
+
94
+ - Property `margin` in the `Drawer` component (@kaylagordon-dna) ([STYLE-529](https://jira.dna.fi/browse/STYLE-529))
95
+
96
+ ## [3.6.0] - 2024-07-11
97
+
98
+ ### Added
99
+
100
+ - Property `isNarrowUnderlined` to `Tabs` component (@hicotech) ([STYLE-630](https://jira.dna.fi/browse/STYLE-630))
101
+ - Value `panel` to property `type` in `Tab` component (@hicotech) ([STYLE-631](https://jira.dna.fi/browse/STYLE-631))
102
+ - Value `box` to property `type` in `Tab` component (@hicotech) ([STYLE-650](https://jira.dna.fi/browse/STYLE-650))
103
+ - Property `onClick` to `Tabs` component (@hicotech) ([STYLE-651](https://jira.dna.fi/browse/STYLE-651))
104
+ - Property `isStateless` to `Tab` component (@hicotech) ([STYLE-651](https://jira.dna.fi/browse/STYLE-651))
105
+
106
+ ### Changed
107
+
108
+ - Gap between `Underlined` type tabs from `1.875rem` to `2.5rem` in `Tabs` component (@hicotech) ([STYLE-630](https://jira.dna.fi/browse/STYLE-630))
109
+ - Default value of property `type` from `default` to `box` in `Tab` component (@hicotech) ([STYLE-650](https://jira.dna.fi/browse/STYLE-650))
110
+ - Argument type of `onChange` callback from `tab: string` to `tab: string, e?: React.MouseEvent<HTMLElement>` in `Tab` component (@hicotech) ([STYLE-651](https://jira.dna.fi/browse/STYLE-651))
111
+
112
+ ### Fixed
113
+
114
+ - Style of element when `isActive` property is defined in `Tab` component (@hicotech) ([STYLE-630](https://jira.dna.fi/browse/STYLE-630))
115
+
116
+ ### Deprecated
117
+
118
+ - Value `default` of property `type` in `Tab` component (@hicotech) ([STYLE-650](https://jira.dna.fi/browse/STYLE-650))
119
+ - Property `onChange` in `Tabs` component (@hicotech) ([STYLE-651](https://jira.dna.fi/browse/STYLE-651))
120
+ - Prefix `tabs` in classes list in `Tabs` component (@hicotech) ([STYLE-652](https://jira.dna.fi/browse/STYLE-652))
121
+
122
+ ## [3.5.1] - 2024-06-20
123
+
124
+ ### Added
125
+
126
+ - Property `onClick` to `PriorityNavigation` component (@hicotech) ([STYLE-632](https://jira.dna.fi/browse/STYLE-632))
127
+ - Property `onKeyDown` to `PriorityNavigation` component (@hicotech) ([STYLE-632](https://jira.dna.fi/browse/STYLE-632))
128
+ - Property `onClick` to `PriorityNavigationItem` component (@hicotech) ([STYLE-632](https://jira.dna.fi/browse/STYLE-632))
129
+ - Property `onKeyDown` to `PriorityNavigationItem` component (@hicotech) ([STYLE-632](https://jira.dna.fi/browse/STYLE-632))
130
+
131
+ ### Changed
132
+
133
+ - Source URLs for DNA fonts (@samuellaisaar) ([STYLE-637](https://jira.dna.fi/browse/STYLE-637))
134
+
135
+ ### Fixed
136
+
137
+ - Event handlers not being fired when clicked on SVG in `ButtonIcon` component (@hicotech) ([STYLE-632](https://jira.dna.fi/browse/STYLE-632))
138
+ - Mobile navigation dropdown not closing after selecting and item in `PriorityNavigation` component (@hicotech) ([STYLE-632](https://jira.dna.fi/browse/STYLE-632))
139
+ - Mobile navigation dropdown not closing when clicked outside in `PriorityNavigation` component (@hicotech) ([STYLE-632](https://jira.dna.fi/browse/STYLE-632))
140
+ - Re-render issue in `PriorityNavigation` component (@hicotech) ([STYLE-632](https://jira.dna.fi/browse/STYLE-632))
141
+ - Styling issues in `PriorityNavigationItem` component (@hicotech) ([STYLE-632](https://jira.dna.fi/browse/STYLE-632))
142
+
143
+ ## [3.5.0] - 2024-05-17
144
+
145
+ ### Added
146
+
147
+ - Property `status` to `Textarea` component (@aanton-tieto) ([STYLE-625](https://jira.dna.fi/browse/STYLE-625))
148
+ - Property `errorMessage` to `Textarea` component (@aanton-tieto) ([STYLE-625](https://jira.dna.fi/browse/STYLE-625))
149
+ - Property `minDate` to `DateTimePicker` component (@aanton-tieto) ([STYLE-613](https://jira.dna.fi/browse/STYLE-613))
150
+ - Property `maxDate` to `DateTimePicker` component (@aanton-tieto) ([STYLE-613](https://jira.dna.fi/browse/STYLE-613))
151
+ - Property `isClearable` to `DateTimePicker` component (@aanton-tieto) ([STYLE-613](https://jira.dna.fi/browse/STYLE-613))
152
+
153
+ ### Changed
154
+
155
+ - Styling of the `Notification` component (@kaylagordon-dna) ([STYLE-607](https://jira.dna.fi/browse/STYLE-607))
156
+ - Styles for disabled date in `DateTimePicker` component (@aanton-tieto) ([STYLE-613](https://jira.dna.fi/browse/STYLE-613))
157
+
158
+ ## [3.4.0] - 2024-05-08
159
+
160
+ ### Added
161
+
162
+ - Property `id` to `Tabs` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
163
+ - Property `data-testid` to `Tabs` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
164
+ - Value `default` to property `type` in `Tabs` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
165
+ - Property `id` to `Tab` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
166
+ - Property `isActive` to `Tab` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
167
+ - Property `className` to `Tab` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
168
+ - Property `data-testid` to `Tab` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
169
+ - New `PriorityNavigation` component (@hicotech) ([STYLE-539](https://jira.dna.fi/browse/STYLE-539))
170
+ - New `PriorityNavigationItem` component (@hicotech) ([STYLE-539](https://jira.dna.fi/browse/STYLE-539))
171
+ - Property `isReversed` to `ButtonIcon` component (@hicotech) ([STYLE-539](https://jira.dna.fi/browse/STYLE-539))
172
+ - Property `isFullWidth` to `Tabs` component (@hicotech) ([STYLE-624](https://jira.dna.fi/browse/STYLE-624))
173
+
174
+ ### Changed
175
+
176
+ - Social media icons in `Footer` component (@kaylagordon-dna) ([STYLE-616](https://jira.dna.fi/browse/STYLE-616))
177
+ - Property `children` to be optional in `Tabs` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
178
+ - Default value for property `type` from `gray` to `default` in `Tabs` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
179
+ - Property `lang` to be optional in `SecondaryNavigation` component (@hicotech) ([STYLE-539](https://jira.dna.fi/browse/STYLE-539))
180
+ - Interface definition of `nextJSSecondaryNavLink` in `SecondaryNavigation` component (@hicotech) ([STYLE-539](https://jira.dna.fi/browse/STYLE-539))
181
+ - Internal `useResizeObserver` hook functionality affecting `Accordion` and `AccordionItem` components (@hicotech) ([STYLE-539](https://jira.dna.fi/browse/STYLE-539))
182
+
183
+ ### Deprecated
184
+
185
+ - Property `tabstyle` in `Tabs` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
186
+ - Tabstyle `gray` in `Tabs` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
187
+ - Property `activeTab` in `Tab` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
188
+ - Component `SecondaryNavigation` (@hicotech) ([STYLE-617](https://jira.dna.fi/browse/STYLE-617))
189
+
190
+ ### Removed
191
+
192
+ - Export of `Tablist` from `Tabs` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
193
+ - Export of `TabStyle` from `Tab` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
194
+ - Deprecation of `underlined` style in `Tabs` component (@hicotech) ([STYLE-496](https://jira.dna.fi/browse/STYLE-496))
195
+
196
+ ## [3.3.1] - 2024-05-06
197
+
198
+ ### Added
199
+
200
+ - New `InfoDialog` component (@inno-o) ([STYLE-608](https://jira.dna.fi/browse/STYLE-608))
201
+
202
+ ## [3.3.0] - 2024-04-15
203
+
204
+ ### Added
205
+
206
+ - New set of icons for `Icon` component (@hicotech) ([STYLE-502](https://jira.dna.fi/browse/STYLE-502))
207
+ - Peer dependency library `@dnanpm/icons` (@hicotech) ([STYLE-503](https://jira.dna.fi/browse/STYLE-503))
208
+
209
+ ### Changed
210
+
211
+ - Styling of `Footer` component (@j-lahtinen) ([STYLE-537](https://jira.dna.fi/browse/STYLE-537))
212
+ - Export property `headerMaxHeight` from `navigation` theme component (@aanton-tieto) ([STYLE-551](https://jira.dna.fi/browse/STYLE-551))
213
+ - Icon `hlChevronDown` to `ChevronDown` in `AccordionItem` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
214
+ - Icon `hlChevronUp` to `ChevronUp` in `AccordionItem` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
215
+ - Icon `hlX` to `Close` in `AccordionItem` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
216
+ - Icon `hlMinus` to `Minus` in `AmountSelector` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
217
+ - Icon `hlPlus` to `Plus` in `AmountSelector` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
218
+ - Icon `hlTrash` to `Trash` in `AmountSelector` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
219
+ - Icon `hlChevronDown` to `ChevronDown` in `ButtonArrow` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
220
+ - Icon `hlChevronLeft` to `ChevronLeft` in `ButtonArrow` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
221
+ - Icon `hlChevronRight` to `ChevronRight` in `ButtonArrow` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
222
+ - Icon `hlChevronUp` to `ChevronUp` in `ButtonArrow` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
223
+ - Icon `hlPen` to `EditUnderline` in `ButtonIcon` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
224
+ - Icon `hlChevronLeft` to `ChevronLeft` in `DateTimePicker` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
225
+ - Icon `hlChevronRight` to `ChevronRight` in `DateTimePicker` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
226
+ - Icon `hlX` to `Close` in `Drawer` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
227
+ - Icon `hlInfo` to `Info` in `EmptyState` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
228
+ - Icon `hlArrowForwardSmall` to `ArrowRight` in `Footer` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
229
+ - Icon `hlChevronDown` to `ChevronDown` in `Footer` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
230
+ - Icon `hlError` to `Error` in `Input` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
231
+ - Icon `hlEyeClosed` to `EyeClosed` in `Input` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
232
+ - Icon `hlEyeOpen` to `EyeOpen` in `Input` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
233
+ - Icon `hlLock` to `Lock` in `Input` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
234
+ - Icon `hlSuccess` to `Check` in `Input` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
235
+ - Icon `hlX` to `Close` in `Input` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
236
+ - Icon `hlArrowForwardSmall` to `ArrowRight` in `MainHeaderNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
237
+ - Icon `hlCart ` to `Cart` in `MainHeaderNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
238
+ - Icon `hlCartEmpty ` to `CartEmpty` in `MainHeaderNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
239
+ - Icon `hlChevronLeft` to `ChevronLeft` in `MainHeaderNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
240
+ - Icon `hlChevronRight` to `ChevronRight` in `MainHeaderNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
241
+ - Icon `hlExternal` to `Open` in `MainHeaderNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
242
+ - Icon `hlGlobe ` to `Globe` in `MainHeaderNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
243
+ - Icon `hlMagnifyingGlass ` to `Search` in `MainHeaderNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
244
+ - Icon `hlMenu` to `Menu` in `MainHeaderNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
245
+ - Icon `hlPerson ` to `User` in `MainHeaderNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
246
+ - Icon `hlX` to `Close` in `MainHeaderNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
247
+ - Icon `hlCart ` to `Cart` in `MainNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
248
+ - Icon `hlCartEmpty ` to `CartEmpty` in `MainNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
249
+ - Icon `hlChevronLeft` to `ChevronLeft` in `MainNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
250
+ - Icon `hlChevronRight` to `ChevronRight` in `MainNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
251
+ - Icon `hlGlobe ` to `Globe` in `MainNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
252
+ - Icon `hlMagnifyingGlass ` to `Search` in `MainNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
253
+ - Icon `hlMenu` to `Menu` in `MainNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
254
+ - Icon `hlPerson ` to `User` in `MainNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
255
+ - Icon `hlX` to `Close` in `MainNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
256
+ - Icon `hlX` to `Close` in `Modal` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
257
+ - Icon `hlCheck` to `Check` in `Notification` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
258
+ - Icon `hlError` to `Error` in `Notification` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
259
+ - Icon `hlInfo` to `Info` in `Notification` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
260
+ - Icon `hlWarning` to `Warning` in `Notification` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
261
+ - Icon `hlX` to `Close` in `Notification` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
262
+ - Icon `hlExclamationMark` to `Warning ` in `ProgressIndicator` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
263
+ - Icon `hlSuccess ` to `Check` in `ProgressIndicator` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
264
+ - Icon `hlChevronDown` to `ChevronDown` in `ReadMore` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
265
+ - Icon `hlChevronUp` to `ChevronUp` in `ReadMore` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
266
+ - Icon `hlMagnifyingGlass ` to `Search` in `Search` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
267
+ - Icon `hlX` to `Close` in `Search` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
268
+ - Icon `hlCheck` to `Check` in `SecondaryNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
269
+ - Icon `hlChevronDown` to `ChevronDown` in `SecondaryNavigation` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
270
+ - Icon `hlChevronDown` to `ChevronDown` in `Selectbox` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
271
+ - Icon `hlChevronUp` to `ChevronUp` in `Selectbox` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
272
+ - Icon `hlError` to `Error` in `Selectbox` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
273
+ - Icon `hlLock` to `Lock` in `Selectbox` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
274
+ - Icon `hlMagnifyingGlass` to `Search` in `Selectbox` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
275
+ - Icon `hlX` to `Close` in `Selectbox` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
276
+ - Icon `hlCheck` to `Check` in `Toaster` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
277
+ - Icon `hlError` to `Error` in `Toaster` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
278
+ - Icon `hlInfo` to `Info` in `Toaster` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
279
+ - Icon `hlWarning` to `Warning` in `Toaster` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
280
+ - Icon `hlX` to `Close` in `Toaster` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
281
+ - Icon `hlInfo` to `Info` in `Tooltip` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
282
+ - Icon `hlChevronDown` to `ChevronDown` in `TooltipMenu` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
283
+ - Icon size from `1.8rem` to `2rem` in `Toaster` component (@hicotech) ([STYLE-546](https://jira.dna.fi/browse/STYLE-546))
284
+
285
+ ### Fixed
286
+
287
+ - Max-height calculation for `MainHeaderNavigation` tooltip (@j-lahtinen) ([STYLE-542](https://jira.dna.fi/browse/STYLE-542))
288
+
289
+ ### Deprecated
290
+
291
+ - Hairline set of icons for `Icon` component (@hicotech) ([STYLE-504](https://jira.dna.fi/browse/STYLE-504))
292
+
293
+ ## [3.2.0] - 2024-01-31
294
+
295
+ ### Added
296
+
297
+ - Added Link icon (@aanton-tieto) ([STYLE-526](https://jira.dna.fi/browse/STYLE-526))
298
+ - Attribute `aria-checked` to `Checkbox` component (@samuellaisaar) ([STYLE-532](https://jira.dna.fi/browse/STYLE-532))
299
+ - New `DateTimePicker` component (@hicotech) ([STYLE-511](https://jira.dna.fi/browse/STYLE-511))
300
+ - Dependency library `react-datepicker` (@hicotech) ([STYLE-511](https://jira.dna.fi/browse/STYLE-511))
301
+ - New `MainHeaderNavigation` component (@j-lahtinen) ([STYLE-528](https://jira.dna.fi/browse/STYLE-528))
302
+ - Property `readonly` to `Input` component (@samuellaisaar) ([STYLE-457](https://jira.dna.fi/browse/STYLE-457))
303
+ - Property `onClearableButtonClick` to `Input` component (@hicotech) ([STYLE-511](https://jira.dna.fi/browse/STYLE-511))
304
+ - Internal unit test capabilities (@skosonen) ([STYLE-203](https://jira.dna.fi/browse/STYLE-203))
305
+
306
+ ### Changed
307
+
308
+ - Library version of `react` from `v17.0.1` to `v18.0.2` (@hicotech) ([STYLE-340](https://jira.dna.fi/browse/STYLE-340))
309
+ - Library version of `react-dom` from `v17.0.1` to `v18.0.2` (@hicotech) ([STYLE-340](https://jira.dna.fi/browse/STYLE-340))
310
+ - Library version of `react-styleguidist` from `v12.0.1` to `v13.1.1` (@hicotech) ([STYLE-340](https://jira.dna.fi/browse/STYLE-340))
311
+ - Peer dependency of `react` from `17.x` to `^17.x` (@hicotech) ([STYLE-340](https://jira.dna.fi/browse/STYLE-340))
312
+ - Peer dependency of `react-dom` from `17.x` to `^17.x` (@hicotech) ([STYLE-340](https://jira.dna.fi/browse/STYLE-340))
313
+ - Build configuration of the project (@hicotech) ([STYLE-340](https://jira.dna.fi/browse/STYLE-340))
314
+ - Versions of internal libraries used for building the project (@hicotech) ([STYLE-340](https://jira.dna.fi/browse/STYLE-340))
315
+ - Categories to be always open in desktop mode in `Footer` component (@j-lahtinen) ([STYLE-527](https://jira.dna.fi/browse/STYLE-527))
316
+ - Rules of internal ESLint configuration (@samuellaisaar) ([STYLE-435](https://jira.dna.fi/browse/STYLE-435))
317
+
318
+ ### Fixed
319
+
320
+ - Interface definition and ESLint issues for `SecondaryNavigation` component (@j-lahtinen) ([STYLE-370](https://jira.dna.fi/browse/STYLE-370))
321
+ - Interface definition and ESLint issues for `MainNavigation` component (@j-lahtinen) ([STYLE-369](https://jira.dna.fi/browse/STYLE-369))
322
+ - Incorrect `onBlur` event handler type for `Textarea` component (@samuellaisaar) ([STYLE-520](https://jira.dna.fi/browse/STYLE-520))
323
+ - Overflow issue with multiselect functionality for `Selectbox` component (@samuellaisaar) ([STYLE-485](https://jira.dna.fi/browse/STYLE-485))
324
+ - Interface definition and ESLint issues for `Footer` component (@j-lahtinen) ([STYLE-368](https://jira.dna.fi/browse/STYLE-368))
325
+ - Text of HTML input possibly overflowing to icons in `Input` component (@samuellaisaar) ([STYLE-523](https://jira.dna.fi/browse/STYLE-523))
326
+ - ESLint issues in utilities files (@samuellaisaar) ([STYLE-372](https://jira.dna.fi/browse/STYLE-372))
327
+
328
+ ### Deprecated
329
+
330
+ - Value `date` of property `type` in `Input` component (@hicotech) ([STYLE-535](https://jira.dna.fi/browse/STYLE-535))
331
+ - Value `month` of property `type` in `Input` component (@hicotech) ([STYLE-535](https://jira.dna.fi/browse/STYLE-535))
332
+ - Value `time` of property `type` in `Input` component (@hicotech) ([STYLE-535](https://jira.dna.fi/browse/STYLE-535))
333
+ - Value `week` of property `type` in `Input` component (@hicotech) ([STYLE-535](https://jira.dna.fi/browse/STYLE-535))
334
+
335
+ ## [3.1.0] - 2023-10-16
336
+
337
+ ### Added
338
+
339
+ - New `Drawer` component (@hicotech) ([STYLE-490](https://jira.dna.fi/browse/STYLE-490))
340
+ - New `Floater` component (@hicotech) ([STYLE-499](https://jira.dna.fi/browse/STYLE-499))
341
+ - New `Chip` component (@hicotech) ([STYLE-501](https://jira.dna.fi/browse/STYLE-501))
342
+ - New `Divider` component (@hicotech) ([STYLE-500](https://jira.dna.fi/browse/STYLE-500))
343
+ - New icon `hlCableTVCard` (@hicotech) ([STYLE-507](https://jira.dna.fi/browse/STYLE-507))
344
+ - New icon `hlHub` (@hicotech) ([STYLE-507](https://jira.dna.fi/browse/STYLE-507))
345
+ - New icon `hlLaptop` (@hicotech) ([STYLE-507](https://jira.dna.fi/browse/STYLE-507))
346
+ - New icon `hlLiveVideo` (@hicotech) ([STYLE-507](https://jira.dna.fi/browse/STYLE-507))
347
+ - New icon `hlPlaylist` (@hicotech) ([STYLE-507](https://jira.dna.fi/browse/STYLE-507))
348
+ - New `ButtonArrow` component (@hicotech) ([STYLE-509](https://jira.dna.fi/browse/STYLE-509))
349
+ - Property `position` to `Tooltip` component (@hicotech) ([STYLE-420](https://jira.dna.fi/browse/STYLE-420))
350
+ - Property `isClickable` to `Tooltip` component (@hicotech) ([STYLE-420](https://jira.dna.fi/browse/STYLE-420))
351
+ - Property `isHoverable` to `Tooltip` component (@hicotech) ([STYLE-420](https://jira.dna.fi/browse/STYLE-420))
352
+ - Property `data-testid` to `Tooltip` component (@hicotech) ([STYLE-420](https://jira.dna.fi/browse/STYLE-420))
353
+ - Property `hideTriggerElement` to `Tooltip` component (@hicotech) ([STYLE-420](https://jira.dna.fi/browse/STYLE-420))
354
+
355
+ ### Changed
356
+
357
+ - Internal webpack configuration after removal of `react-scripts` library (@hicotech) ([STYLE-390](https://jira.dna.fi/browse/STYLE-390))
358
+ - Versions of internal libraries used for building the project (@hicotech) ([STYLE-390](https://jira.dna.fi/browse/STYLE-390))
359
+ - Style of `default` type in `Pill` component to reflect hover and focus states (@hicotech) ([STYLE-514](https://jira.dna.fi/browse/STYLE-514))
360
+ - CSS specificity of `ButtonPrimary` styles one level lower (@hicotech) ([STYLE-512](https://jira.dna.fi/browse/STYLE-512))
361
+ - CSS specificity of `ButtonSecondary` styles one level lower (@hicotech) ([STYLE-512](https://jira.dna.fi/browse/STYLE-512))
362
+ - CSS specificity of `ButtonArrow` styles one level lower (@hicotech) ([STYLE-512](https://jira.dna.fi/browse/STYLE-512))
363
+ - CSS specificity of `ButtonRound` styles one level lower (@hicotech) ([STYLE-512](https://jira.dna.fi/browse/STYLE-512))
364
+ - Unit in `width` property from `rem` to `px` for svg element in `Checkbox` component (@hicotech) ([STYLE-517](https://jira.dna.fi/browse/STYLE-517))
365
+ - Unit in `height` property from `rem` to `px` for svg element in `Checkbox` component (@hicotech) ([STYLE-517](https://jira.dna.fi/browse/STYLE-517))
366
+ - Library version of `react-tooltip` from `4.1.0` to `5.21.5` (@hicotech) ([STYLE-420](https://jira.dna.fi/browse/STYLE-420))
367
+ - Styling of `Tooltip` component (@hicotech) ([STYLE-420](https://jira.dna.fi/browse/STYLE-420))
368
+ - Property `place` to `placement` in `Tooltip` component (@hicotech) ([STYLE-420](https://jira.dna.fi/browse/STYLE-420))
369
+ - Property `multiline` to `isMultiline` in `Tooltip` component (@hicotech) ([STYLE-420](https://jira.dna.fi/browse/STYLE-420))
370
+
371
+ ### Fixed
372
+
373
+ - Shorthand CSS property `inset` to its constituent properties for backwards compatibility in `Modal` component (@ozzell) ([STYLE-508](https://jira.dna.fi/browse/STYLE-508))
374
+ - Shorthand CSS property `inset` to its constituent properties for backwards compatibility in `Drawer` component (@ozzell) ([STYLE-508](https://jira.dna.fi/browse/STYLE-508))
375
+ - Interface definition for `MainNavigation` component (@j-lahtinen) ([STYLE-233](https://jira.dna.fi/browse/STYLE-233))
376
+
377
+ ### Deprecated
378
+
379
+ - Component `ButtonRound` (@hicotech) ([STYLE-509](https://jira.dna.fi/browse/STYLE-509))
380
+
381
+ ### Removed
382
+
383
+ - Library `react-scripts` from package.json (@hicotech) ([STYLE-390](https://jira.dna.fi/browse/STYLE-390))
384
+ - Property `width` from svg element in `DNALogo` component (@hicotech) ([STYLE-517](https://jira.dna.fi/browse/STYLE-517))
385
+ - Property `height` from svg element in `DNALogo` component (@hicotech) ([STYLE-517](https://jira.dna.fi/browse/STYLE-517))
386
+ - Property `width` from svg element in `Icon` component (@hicotech) ([STYLE-517](https://jira.dna.fi/browse/STYLE-517))
387
+ - Property `height` from svg element in `Icon` component (@hicotech) ([STYLE-517](https://jira.dna.fi/browse/STYLE-517))
388
+ - Interface definition of 3rd party library from `Tooltip` component (@hicotech) ([STYLE-420](https://jira.dna.fi/browse/STYLE-420))
389
+ - Component `Helper` (@hicotech) ([STYLE-403](https://jira.dna.fi/browse/STYLE-403))
390
+
391
+ ## [3.0.0] - 2023-05-24
392
+
393
+ ### Added
394
+
395
+ - Internal hook `useWindowSize` (@tholsti) ([STYLE-378](https://jira.dna.fi/browse/STYLE-378))
396
+ - CSS property `display: inline-flex` to `Icon` component (@hicotech) ([STYLE-382](https://jira.dna.fi/browse/STYLE-382))
397
+ - Icon `hlSuccess` as mirror of `hlCheck` icon (@hicotech) ([STYLE-382](https://jira.dna.fi/browse/STYLE-382))
398
+ - New DNA Color Scheme to `theme` (@hicotech) ([STYLE-385](https://jira.dna.fi/browse/STYLE-385))
399
+ - New radius config to `theme` (@hicotech) ([STYLE-386](https://jira.dna.fi/browse/STYLE-386))
400
+ - New `Box` component (@hicotech) ([STYLE-388](https://jira.dna.fi/browse/STYLE-388))
401
+ - New `Elevation` component as a shorthand to `Box` component (@hicotech) ([STYLE-388](https://jira.dna.fi/browse/STYLE-388))
402
+ - New `Pill` component with `checkbox` variant (@hicotech) ([STYLE-389](https://jira.dna.fi/browse/STYLE-389))
403
+ - New `Pill` component with `radiobutton` variant (@hicotech) ([STYLE-395](https://jira.dna.fi/browse/STYLE-395))
404
+ - Property `type` to `Accordion` component (@hicotech) ([STYLE-396](https://jira.dna.fi/browse/STYLE-396))
405
+ - Property `type` to `AccordionItem` component (@hicotech) ([STYLE-397](https://jira.dna.fi/browse/STYLE-397))
406
+ - New `box` and `panel` style types to `AccordionItem` component (@hicotech) ([STYLE-397](https://jira.dna.fi/browse/STYLE-397))
407
+ - Property `id` to `Button` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
408
+ - Property `id` to `ButtonPrimary` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
409
+ - Property `id` to `ButtonSecondary` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
410
+ - Property `id` to `ButtonRound` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
411
+ - Property `id` to `ButtonIcon` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
412
+ - Property `name` to `Button` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
413
+ - Property `name` to `ButtonPrimary` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
414
+ - Property `name` to `ButtonSecondary` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
415
+ - Property `name` to `ButtonRound` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
416
+ - Property `name` to `ButtonIcon` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
417
+ - Interface definition to `ButtonClose` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
418
+ - Property `name` to `Checkbox` component (@hicotech) ([STYLE-442](https://jira.dna.fi/browse/STYLE-442))
419
+ - Interface definition to `LabelText` component (@hicotech) ([STYLE-404](https://jira.dna.fi/browse/STYLE-404))
420
+ - Property `className` to `Textarea` component (@hicotech) ([STYLE-419](https://jira.dna.fi/browse/STYLE-419))
421
+ - Property `type` to `Label` component (@hicotech) ([STYLE-405](https://jira.dna.fi/browse/STYLE-405))
422
+ - Property `aria-label` to `ButtonClose` component (@j-lahtinen) ([STYLE-463](https://jira.dna.fi/browse/STYLE-463))
423
+ - New `Toaster` component (@j-lahtinen) ([STYLE-458](https://jira.dna.fi/browse/STYLE-458))
424
+ - Property `href` to `Button` component (@hicotech) ([STYLE-469](https://jira.dna.fi/browse/STYLE-469))
425
+ - Property `href` to `ButtonPrimary` component (@hicotech) ([STYLE-469](https://jira.dna.fi/browse/STYLE-469))
426
+ - Property `href` to `ButtonSecondary` component (@hicotech) ([STYLE-469](https://jira.dna.fi/browse/STYLE-469))
427
+ - Property `data-testid` to `ProgressIndicator` component (@hicotech) ([STYLE-411](https://jira.dna.fi/browse/STYLE-411))
428
+ - Property `onStepClick` to `ProgressIndicator` component (@hicotech) ([STYLE-411](https://jira.dna.fi/browse/STYLE-411))
429
+ - Property `id` to `EmptyState` component (@hicotech) ([STYLE-401](https://jira.dna.fi/browse/STYLE-401))
430
+ - Property `children` to `EmptyState` component (@hicotech) ([STYLE-401](https://jira.dna.fi/browse/STYLE-401))
431
+ - Property `className` to `EmptyState` component (@hicotech) ([STYLE-401](https://jira.dna.fi/browse/STYLE-401))
432
+ - Property `onBlur` to `Search` component (@hicotech) ([STYLE-414](https://jira.dna.fi/browse/STYLE-414))
433
+ - Property `onFocus` to `Search` component (@hicotech) ([STYLE-414](https://jira.dna.fi/browse/STYLE-414))
434
+ - Property `onKeyPress` to `Search` component (@hicotech) ([STYLE-414](https://jira.dna.fi/browse/STYLE-414))
435
+ - Property `onKeyDown` to `Search` component (@hicotech) ([STYLE-414](https://jira.dna.fi/browse/STYLE-414))
436
+ - Property `data-testid` to `Search` component (@hicotech) ([STYLE-414](https://jira.dna.fi/browse/STYLE-414))
437
+ - Interface definition to `NotificationBadge` component (@hicotech) ([STYLE-409](https://jira.dna.fi/browse/STYLE-409))
438
+ - Property `isDefaultChecked` to `Pill` component (@ozzell) ([STYLE-443](https://jira.dna.fi/browse/STYLE-443))
439
+ - Property `id` to `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
440
+ - Property `onRequestClose` to `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
441
+ - Property `contentLabel` to `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
442
+ - Property `isClosable` to `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
443
+ - Property `data-testid` to `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
444
+ - Icon `hlWrench` (@hicotech) ([STYLE-329](https://jira.dna.fi/browse/STYLE-329))
445
+
446
+ ### Changed
447
+
448
+ - Components `Footer` and `MainNavigation` to use internal hook `useWindowSize` instead of library `react-sizes` to detect device screen size (@tholsti) ([STYLE-378](https://jira.dna.fi/browse/STYLE-378))
449
+ - Styling of `Accordion` component (@hicotech) ([STYLE-396](https://jira.dna.fi/browse/STYLE-396))
450
+ - Styling of `AccordionItem` component (@hicotech) ([STYLE-397](https://jira.dna.fi/browse/STYLE-397))
451
+ - Default value of property `highlightSelected` to `true` only for `panel` type in `Accordion` component (@hicotech) ([STYLE-397](https://jira.dna.fi/browse/STYLE-397))
452
+ - Default value of property `highlightSelected` to `true` only for `panel` type in `AccordionItem` component (@hicotech) ([STYLE-397](https://jira.dna.fi/browse/STYLE-397))
453
+ - Styling of `Button` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
454
+ - Property `loading` passed down to button element to be `data-loading` in `Button` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
455
+ - Styling of `ButtonPrimary` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
456
+ - Property `loading` passed down to button element to be `data-loading` in `ButtonPrimary` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
457
+ - Styling of `ButtonSecondary` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
458
+ - Property `loading` passed down to button element to be `data-loading` in `ButtonSecondary` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
459
+ - Styling of `ButtonRound` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
460
+ - Property `loading` passed down to button element to be `data-loading` in `ButtonRound` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
461
+ - Name of `CloseButton` component to `ButtonClose` (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
462
+ - Styling of `ButtonClose` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
463
+ - Property `loading` passed down to button element to be `data-loading` in `ButtonClose` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
464
+ - Styling of `ButtonIcon` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
465
+ - Property `loading` passed down to button element to be `data-loading` in `ButtonIcon` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
466
+ - Property `icon` to be optional in `ButtonIcon` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
467
+ - Default value of property `icon` to `hlPen` in `ButtonIcon` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
468
+ - Property `showTextMobile` to `hideChildrenMobile` in `ButtonIcon` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
469
+ - Default value of property `hideChildrenMobile` to `false` in `ButtonIcon` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
470
+ - Styling of `Checkbox` component (@hicotech) ([STYLE-400](https://jira.dna.fi/browse/STYLE-400))
471
+ - Styling of `RadioButton` component (@hicotech) ([STYLE-412](https://jira.dna.fi/browse/STYLE-412))
472
+ - Styling of `Footer` component (@j-lahtinen) ([STYLE-402](https://jira.dna.fi/browse/STYLE-402))
473
+ - Styling of `SecondaryNavigation` component (@j-lahtinen) ([STYLE-415](https://jira.dna.fi/browse/STYLE-415))
474
+ - Styling of `Input` component (@hicotech) ([STYLE-404](https://jira.dna.fi/browse/STYLE-404))
475
+ - Default value of property `status` to `undefined` in `Input` component (@hicotech) ([STYLE-404](https://jira.dna.fi/browse/STYLE-404))
476
+ - Styling of `LabelText` component (@hicotech) ([STYLE-404](https://jira.dna.fi/browse/STYLE-404))
477
+ - Styling of `Textarea` component (@hicotech) ([STYLE-419](https://jira.dna.fi/browse/STYLE-419))
478
+ - Property `id` to be mandatory in `Textarea` component (@hicotech) ([STYLE-419](https://jira.dna.fi/browse/STYLE-419))
479
+ - Styling of `MainNavigation` component (@j-lahtinen) ([STYLE-406](https://jira.dna.fi/browse/STYLE-406))
480
+ - Styling of `AmountSelector` component (@hicotech) ([STYLE-398](https://jira.dna.fi/browse/STYLE-398))
481
+ - Styling of `Switch` component (@innocent-okeke) ([STYLE-417](https://jira.dna.fi/browse/STYLE-417))
482
+ - Styling of `Label` component (@hicotech) ([STYLE-405](https://jira.dna.fi/browse/STYLE-405))
483
+ - `ButtonClose` component element from anchor to button for better accessibility (@j-lahtinen) ([STYLE-460](https://jira.dna.fi/browse/STYLE-460))
484
+ - Swap `hlError` & `hlWarning` icons with each other (@j-lahtinen) ([STYLE-461](https://jira.dna.fi/browse/STYLE-461))
485
+ - Properties `type` and `disabled` to be ignored when property `href` is defined in `Button` component (@hicotech) ([STYLE-469](https://jira.dna.fi/browse/STYLE-469))
486
+ - Properties `type` and `disabled` to be ignored when property `href` is defined in `ButtonPrimary` component (@hicotech) ([STYLE-469](https://jira.dna.fi/browse/STYLE-469))
487
+ - Properties `type` and `disabled` to be ignored when property `href` is defined in `ButtonSecondary` component (@hicotech) ([STYLE-469](https://jira.dna.fi/browse/STYLE-469))
488
+ - Library version of `react-scripts` from `3.4.4` to `4.0.3` (@hicotech) ([STYLE-473](https://jira.dna.fi/browse/STYLE-473))
489
+ - Styling of `Notification` component (@hicotech) ([STYLE-408](https://jira.dna.fi/browse/STYLE-408))
490
+ - Styling of `PixelLoader` component (@hicotech) ([STYLE-410](https://jira.dna.fi/browse/STYLE-410))
491
+ - Styling of `Selectbox` component (@hicotech) ([STYLE-416](https://jira.dna.fi/browse/STYLE-416))
492
+ - Styling of `ProgressIndicator` component (@hicotech) ([STYLE-411](https://jira.dna.fi/browse/STYLE-411))
493
+ - Property type `steps` from `Steps[]` to `string[] | number` in `ProgressIndicator` component (@hicotech) ([STYLE-411](https://jira.dna.fi/browse/STYLE-411))
494
+ - Property `activeSlideIndex` to `activeStep` in `ProgressIndicator` component (@hicotech) ([STYLE-411](https://jira.dna.fi/browse/STYLE-411))
495
+ - Property `currentStatus` to `status` in `ProgressIndicator` component (@hicotech) ([STYLE-411](https://jira.dna.fi/browse/STYLE-411))
496
+ - Styling of `EmptyState` component (@hicotech) ([STYLE-401](https://jira.dna.fi/browse/STYLE-401))
497
+ - Property type `icon` from `React.ComponentType<Icon> | string` to `React.ComponentType<Icon>` in `EmptyState` component (@hicotech) ([STYLE-401](https://jira.dna.fi/browse/STYLE-401))
498
+ - Styling of `Search` component (@hicotech) ([STYLE-414](https://jira.dna.fi/browse/STYLE-414))
499
+ - Property `onClick` to `onButtonClick` in `Search` component (@hicotech) ([STYLE-414](https://jira.dna.fi/browse/STYLE-414))
500
+ - Styling of `NotificationBadge` component (@hicotech) ([STYLE-409](https://jira.dna.fi/browse/STYLE-409))
501
+ - Library version of `styled-components` from `v5.2.1` to `v5.3.6` (@ozzell) ([STYLE-494](https://jira.dna.fi/browse/STYLE-494))
502
+ - Library version of `react-modal` from `3.12.1` to `3.16.1` (@hicotech) ([STYLE-473](https://jira.dna.fi/browse/STYLE-473))
503
+ - Styling of `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
504
+ - Property `isOpen` to be mandatory in `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
505
+ - Default value of property `closeIcon` to `true` in `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
506
+ - Property `closeIcon` to `closeButton` in `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
507
+ - Value of property `data-testid` from `props.closeLabel` to `${data-testid}-close-button` for `ButtonClose` element in `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
508
+ - Styling of `Tablist` component (@hicotech) ([STYLE-418](https://jira.dna.fi/browse/STYLE-418))
509
+
510
+ ### Fixed
511
+
512
+ - Issue with `Footer` component signature revealing internal context props (@tholsti) ([STYLE-378](https://jira.dna.fi/browse/STYLE-378))
513
+
514
+ ### Deprecated
515
+
516
+ - Property `data-no-close` in `Button` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
517
+
518
+ ### Removed
519
+
520
+ - Library `react-sizes` from package.json (@tholsti) ([STYLE-378](https://jira.dna.fi/browse/STYLE-378))
521
+ - Obsolete property `children` from `Footer` component (@tholsti) ([STYLE-378](https://jira.dna.fi/browse/STYLE-378))
522
+ - Obsolete property `isMobileFooter` from `Footer` component (@tholsti) ([STYLE-378](https://jira.dna.fi/browse/STYLE-378))
523
+ - Obsolete property `nextJSLinkComponent` from `Footer` component (@tholsti) ([STYLE-378](https://jira.dna.fi/browse/STYLE-378))
524
+ - Obsolete property `isCollapsed` from `Footer` component (@tholsti) ([STYLE-378](https://jira.dna.fi/browse/STYLE-378))
525
+ - Obsolete property `setIsCollapsed` from `Footer` component (@tholsti) ([STYLE-378](https://jira.dna.fi/browse/STYLE-378))
526
+ - Obsolete property `isMobileMenu` from `MainNavigation` component (@tholsti) ([STYLE-378](https://jira.dna.fi/browse/STYLE-378))
527
+ - Component `Image` with no replacement (@tholsti) ([STYLE-364](https://jira.dna.fi/browse/STYLE-364))
528
+ - Component `ButtonTertiary` (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
529
+ - Component `ButtonIconPrimary` (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
530
+ - Type `string` from property `loading` in `Button` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
531
+ - Object property `button` from `theme` (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
532
+ - Type `string` from property `icon` in `ButtonIcon` component (@hicotech) ([STYLE-399](https://jira.dna.fi/browse/STYLE-399))
533
+ - React hook `useCallback` as wrapper for `onBlur` and `onChange` handlers in `Textarea` component (@hicotech) ([STYLE-419](https://jira.dna.fi/browse/STYLE-419))
534
+ - Obsolete property `color` from `Label` component (@hicotech) ([STYLE-405](https://jira.dna.fi/browse/STYLE-405))
535
+ - Obsolete property `morePadding` from `Label` component (@hicotech) ([STYLE-405](https://jira.dna.fi/browse/STYLE-405))
536
+ - Obsolete property `smallerFont` from `Label` component (@hicotech) ([STYLE-405](https://jira.dna.fi/browse/STYLE-405))
537
+ - Obsolete property `showIcon` from `Notification` component (@hicotech) ([STYLE-408](https://jira.dna.fi/browse/STYLE-408))
538
+ - Obsolete property `centered` from `Notification` component (@hicotech) ([STYLE-408](https://jira.dna.fi/browse/STYLE-408))
539
+ - Property `dropDownIndicator` from `Selectbox` component (@hicotech) ([STYLE-309](https://jira.dna.fi/browse/STYLE-309))
540
+ - Property `onStepChange` from `ProgressIndicator` component (@hicotech) ([STYLE-411](https://jira.dna.fi/browse/STYLE-411))
541
+ - Possibility to define cursor of specific step in `ProgressIndicator` component (@hicotech) ([STYLE-411](https://jira.dna.fi/browse/STYLE-411))
542
+ - Obsolete property `message` from `EmptyState` component (@hicotech) ([STYLE-401](https://jira.dna.fi/browse/STYLE-401))
543
+ - Property `isReactive` from `Search` component (@hicotech) ([STYLE-352](https://jira.dna.fi/browse/STYLE-352))
544
+ - Property `iconName` from `Search` component (@hicotech) ([STYLE-336](https://jira.dna.fi/browse/STYLE-336))
545
+ - Obsolete property `icon` from `Search` component (@hicotech) ([STYLE-414](https://jira.dna.fi/browse/STYLE-414))
546
+ - Obsolete property `iconSize` from `Search` component (@hicotech) ([STYLE-414](https://jira.dna.fi/browse/STYLE-414))
547
+ - Component `Ribbon` with no replacement (@hicotech) ([STYLE-413](https://jira.dna.fi/browse/STYLE-413))
548
+ - Component `Card` (@hicotech) ([STYLE-493](https://jira.dna.fi/browse/STYLE-493))
549
+ - Component `CardRow` (@hicotech) ([STYLE-493](https://jira.dna.fi/browse/STYLE-493))
550
+ - Interface definition of 3rd party library from `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
551
+ - Obsolete property `overflowContentVisible` from `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
552
+ - Obsolete property `padding` from `Modal` component (@hicotech) ([STYLE-407](https://jira.dna.fi/browse/STYLE-407))
553
+ - Property `left` from `Icon` component (@hicotech) ([STYLE-333](https://jira.dna.fi/browse/STYLE-333))
554
+ - Property `right` from `Icon` component (@hicotech) ([STYLE-333](https://jira.dna.fi/browse/STYLE-333))
555
+ - Property `on` from `Switch` component (@hicotech) ([STYLE-381](https://jira.dna.fi/browse/STYLE-381))
556
+ - Standard set of icons for `Icon` component (@hicotech) ([STYLE-329](https://jira.dna.fi/browse/STYLE-329))
557
+ - Duplicate icon `hlArrowSmallLeft` (@hicotech) ([STYLE-329](https://jira.dna.fi/browse/STYLE-329))
558
+ - Duplicate icon `hlArrowBack` (@hicotech) ([STYLE-329](https://jira.dna.fi/browse/STYLE-329))
559
+ - Duplicate icon `hlArrowSmallRight` (@hicotech) ([STYLE-329](https://jira.dna.fi/browse/STYLE-329))
560
+ - Duplicate icon `hlArrowForward` (@hicotech) ([STYLE-329](https://jira.dna.fi/browse/STYLE-329))
561
+ - Duplicate icon `hlArrowSmallUnder` (@hicotech) ([STYLE-329](https://jira.dna.fi/browse/STYLE-329))
package/README.md CHANGED
@@ -1,21 +1,33 @@
1
- # DNA Styleguide
2
-
3
- Styles and styled components for DNA.
1
+ DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
4
2
 
5
3
  ## Installation
6
4
 
7
- 1. Run install command in repository where styleguide should be added
8
- - Example
9
- ```shell
10
- npm install @dnanpm/styleguide
11
- ```
5
+ Run install command in repository where DNA Styleguide should be added
6
+
7
+ ```shell
8
+ npm install @dnanpm/styleguide
9
+ ```
10
+
11
+ ## Contribution
12
+
13
+ See [Contribution guide](https://oakdvcs.dna.fi/projects/DSG/repos/styleguide/browse/CONTRIBUTING.md) in DNA Styleguide repository for more information.
14
+
15
+ > [!NOTE]
16
+ > Requires access to DNA private repository!
17
+
18
+ ## Changelog
19
+
20
+ See [Changelog](https://oakdvcs.dna.fi/projects/DSG/repos/styleguide/browse/CHANGELOG.md) in DNA Styleguide repository for more information.
21
+
22
+ > [!NOTE]
23
+ > Requires access to DNA private repository!
12
24
 
13
25
  ## Usage example
14
26
 
15
27
  ### Theme
16
28
 
17
29
  ```js
18
- import { createStyled, theme as defaultTheme } from '@dnanpm/styleguide';
30
+ import { theme as defaultTheme } from '@dnanpm/styleguide';
19
31
 
20
32
  const color = {
21
33
  ...defaultTheme.color,
@@ -34,7 +46,6 @@ const theme = {
34
46
  };
35
47
 
36
48
  export type ThemeInterface = typeof theme;
37
- export const { styled, css } = createStyled<ThemeInterface>();
38
49
  export default theme;
39
50
  ```
40
51
 
@@ -54,7 +65,7 @@ class MyApp {
54
65
  }
55
66
  ```
56
67
 
57
- ### Button
68
+ ### Component
58
69
 
59
70
  ```js
60
71
  import { ButtonPrimary } from '@dnanpm/styleguide';
@@ -73,14 +84,3 @@ const MyComponent = ({
73
84
 
74
85
  export default MyComponent;
75
86
  ```
76
-
77
- ## IE11 Support NextJS
78
-
79
- In `next.config.js` you need to use [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) package to allow nextjs to be able to transpile styleguide and related es6 modules based on babel config.
80
-
81
- ```js
82
- // next.config.js
83
- const withTM = require('next-transpile-modules')(['@dnanpm/styleguide', "react-spring"]);
84
-
85
- module.exports = withTM();
86
- ```
package/build/cjs/components/Carousel/Carousel.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { MouseEvent, ReactNode } from 'react';
2
2
  import React from 'react';
3
- export interface Props {
3
+ interface Props {
4
4
  /**
5
5
  * Unique ID for the component
6
6
  */
package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { ReactNode } from 'react';
2
2
  import React from 'react';
3
- export interface MainNavTooltipMenuProps {
3
+ import type { MainHeaderNavigationProps } from '../MainHeaderNavigation';
4
+ interface MainNavTooltipMenuProps extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
4
5
  /** Aria-label for screen readers in mobile */
5
6
  ariaLabel?: string;
6
7
  /** Tooltip menu content */
@@ -90,7 +91,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
90
91
  E02: string;
91
92
  };
92
93
  sky: {
93
- default: string;
94
+ default: string; /** Mandatory Component provided as login content */
94
95
  E01: string;
95
96
  E02: string;
96
97
  };
@@ -103,7 +104,6 @@ export declare const IconContainer: import("styled-components").StyledComponent<
103
104
  default: string;
104
105
  };
105
106
  };
106
- /** This will define the global state object string. mandatory */
107
107
  focus: {
108
108
  dark: string;
109
109
  light: string;
@@ -111,6 +111,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
111
111
  transparency: {
112
112
  T0: string;
113
113
  T10: string;
114
+ /** This will define the global state object string. mandatory */
114
115
  T20: string;
115
116
  T30: string;
116
117
  T40: string;
@@ -189,5 +190,5 @@ export declare const IconContainer: import("styled-components").StyledComponent<
189
190
  isActive?: boolean | undefined;
190
191
  collapseSize: number;
191
192
  }, never>;
192
- declare const MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, }: MainNavTooltipMenuProps) => React.JSX.Element;
193
+ declare const MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps) => React.JSX.Element;
193
194
  export default MainNavTooltipMenu;
package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var tslib = require('tslib');
5
6
  var React = require('react');
6
7
  var useCloseOutsideOrElementClicked = require('../../../hooks/useCloseOutsideOrElementClicked.js');
7
8
  var useDocHeight = require('../../../hooks/useDocHeight.js');
@@ -10,9 +11,9 @@ var theme = require('../../../themes/theme.js');
10
11
  var navigation = require('../../../themes/themeComponents/navigation.js');
11
12
  var styledUtils = require('../../../utils/styledUtils.js');
12
13
  var Box = require('../../Box/Box.js');
14
+ var ButtonPrimary = require('../../Button/ButtonPrimary.js');
13
15
  var NavContext = require('../context/NavContext.js');
14
16
  var MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
15
- var ButtonPrimary = require('../../Button/ButtonPrimary.js');
16
17
 
17
18
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
19
 
@@ -83,7 +84,8 @@ const Caret = styled["default"].div `
83
84
  max-height: calc(var(--vh100, 100vh) - ${navigation.navMaxHeight});
84
85
  }
85
86
  `;
86
- const MainNavTooltipMenu = ({ ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme["default"].breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1, }) => {
87
+ const MainNavTooltipMenu = (_a) => {
88
+ var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme["default"].breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1 } = _a, props = tslib.__rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight", "zIndex"]);
87
89
  const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = React.useContext(NavContext["default"]);
88
90
  const ref = React.useRef(null);
89
91
  const globalStateKey = globalStateString;
@@ -109,7 +111,7 @@ const MainNavTooltipMenu = ({ ariaLabel, children, closeWhenTagClicked = [], con
109
111
  }
110
112
  });
111
113
  return (React__default["default"].createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
112
- globalStateKey === 'login' && !isLoggedIn ? (React__default["default"].createElement(ButtonPrimary["default"], { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default["default"].createElement(MainNavTooltipMenuExportedStyles["default"], { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: ContentComponent ? toggleState : undefined }, children)),
114
+ globalStateKey === 'login' && !isLoggedIn ? (React__default["default"].createElement(ButtonPrimary["default"], { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default["default"].createElement(MainNavTooltipMenuExportedStyles["default"], { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
113
115
  tooltipItems[globalStateKey] && ContentComponent && (React__default["default"].createElement(React__default["default"].Fragment, null,
114
116
  React__default["default"].createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
115
117
  React__default["default"].createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
package/build/cjs/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
- interface MinicartTooltipProps {
2
+ import type { MainHeaderNavigationProps } from '../MainHeaderNavigation';
3
+ interface MinicartTooltipProps extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
3
4
  minicartAmount: number;
4
5
  minicartLabel?: string;
5
6
  }
6
- declare const MinicartTooltip: ({ minicartAmount, minicartLabel }: MinicartTooltipProps) => React.JSX.Element;
7
+ declare const MinicartTooltip: ({ minicartAmount, minicartLabel, ...props }: MinicartTooltipProps) => React.JSX.Element;
7
8
  export default MinicartTooltip;
package/build/cjs/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var tslib = require('tslib');
5
6
  var icons = require('@dnanpm/icons');
6
7
  var React = require('react');
7
8
  var theme = require('../../../themes/theme.js');
@@ -15,9 +16,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
15
16
 
16
17
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
18
 
18
- const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
19
+ const MinicartTooltip = (_a) => {
20
+ var { minicartAmount, minicartLabel } = _a, props = tslib.__rest(_a, ["minicartAmount", "minicartLabel"]);
19
21
  const { navZIndex, minicartComponent: MinicartComponent } = React.useContext(NavContext["default"]);
20
- return (React__default["default"].createElement(MainNavTooltipMenu["default"], { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: MinicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme["default"].breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
22
+ return (React__default["default"].createElement(MainNavTooltipMenu["default"], { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], onCartButtonClick: props.onCartButtonClick, contentComponent: MinicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme["default"].breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
21
23
  React__default["default"].createElement(Icon["default"], { icon: icons.Cart, size: navigation.navIconSize }),
22
24
  React__default["default"].createElement("span", null, minicartLabel),
23
25
  minicartAmount > 0 && (React__default["default"].createElement(NotificationBadge["default"], { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from 'react';
1
+ import type { MouseEvent, ReactNode } from 'react';
2
2
  import React from 'react';
3
3
  import type { GlobalNavItems } from './types/globalNavProps';
4
4
  export interface MainHeaderNavigationProps {
@@ -16,8 +16,17 @@ export interface MainHeaderNavigationProps {
16
16
  minicart?: boolean;
17
17
  minicartText?: string;
18
18
  minicartAmount?: number;
19
+ /**
20
+ * Defines MinicartComponent when used. If minicart is true but component is not provided, shown as disabled element.
21
+ *
22
+ * @deprecated Use `onCartButtonClick` property instead
23
+ */
19
24
  minicartComponent?: ReactNode | boolean;
20
25
  showMinicart?: boolean;
26
+ /**
27
+ * On Cart button click callback
28
+ */
29
+ onCartButtonClick?: (e: MouseEvent<HTMLElement>) => void;
21
30
  showLoginTooltip?: boolean;
22
31
  languageSelector?: boolean;
23
32
  languageSelectorText?: string;
@@ -31,6 +40,6 @@ export interface MainHeaderNavigationProps {
31
40
  notificationText?: string;
32
41
  }
33
42
  /** @visibleName MainHeaderNavigation */
34
- declare const MainHeaderNavigation: ({ businessMenuAriaLabel, categoryCollectionText, className, collapseSize, currentUrl, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartComponent, minicartText, nextJSLinkComponent, notificationText, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, }: MainHeaderNavigationProps) => React.JSX.Element;
43
+ declare const MainHeaderNavigation: ({ businessMenuAriaLabel, categoryCollectionText, className, collapseSize, currentUrl, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartComponent, minicartText, nextJSLinkComponent, notificationText, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
35
44
  /** @component */
36
45
  export default MainHeaderNavigation;
package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var tslib = require('tslib');
5
6
  var icons = require('@dnanpm/icons');
6
7
  var ramda = require('ramda');
7
8
  var React = require('react');
@@ -132,8 +133,9 @@ const initiateScrollToHeader = (componentRef) => {
132
133
  }
133
134
  };
134
135
  /** @visibleName MainHeaderNavigation */
135
- const MainHeaderNavigation = ({ businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', className, collapseSize = 767, currentUrl = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030, }) => {
136
- var _a, _b, _c;
136
+ const MainHeaderNavigation = (_a) => {
137
+ var _b, _c, _d;
138
+ var { businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', className, collapseSize = 767, currentUrl = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = tslib.__rest(_a, ["businessMenuAriaLabel", "categoryCollectionText", "className", "collapseSize", "currentUrl", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
137
139
  const { isMobile } = useWindowSize["default"](collapseSize);
138
140
  const navigationEl = React.useRef(null);
139
141
  const key = ramda.prop('id');
@@ -289,8 +291,8 @@ const MainHeaderNavigation = ({ businessMenuAriaLabel = 'Sivustot', categoryColl
289
291
  setMenuLevel(Object.assign(Object.assign({}, menuLevel), { animate1: false, animate2: false, hideOnScroll: isShow }));
290
292
  }
291
293
  }, undefined, false, 200);
292
- const currentBusinessSite = (_a = items === null || items === void 0 ? void 0 : items.businessSelector) === null || _a === void 0 ? void 0 : _a.items.find(item => item.businessId === items.businessId);
293
- const languagesObject = (_b = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _b === void 0 ? void 0 : _b.urls;
294
+ const currentBusinessSite = (_b = items === null || items === void 0 ? void 0 : items.businessSelector) === null || _b === void 0 ? void 0 : _b.items.find(item => item.businessId === items.businessId);
295
+ const languagesObject = (_c = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _c === void 0 ? void 0 : _c.urls;
294
296
  const { resetMenuEvents } = navigationContext;
295
297
  const handleToggleClick = () => {
296
298
  resetMenuEvents();
@@ -303,7 +305,7 @@ const MainHeaderNavigation = ({ businessMenuAriaLabel = 'Sivustot', categoryColl
303
305
  React__default["default"].createElement(NavContext["default"].Provider, { value: navigationContext },
304
306
  React__default["default"].createElement(GlobalStyle, null),
305
307
  !items.mainNavigation && notificationText && (React__default["default"].createElement(Notification["default"], { type: "info" }, notificationText)),
306
- React__default["default"].createElement(BusinessMenu["default"], { ariaLabel: businessMenuAriaLabel, currentBusinessId: items.businessId, items: (_c = items.businessSelector) === null || _c === void 0 ? void 0 : _c.items, lang: language }),
308
+ React__default["default"].createElement(BusinessMenu["default"], { ariaLabel: businessMenuAriaLabel, currentBusinessId: items.businessId, items: (_d = items.businessSelector) === null || _d === void 0 ? void 0 : _d.items, lang: language }),
307
309
  React__default["default"].createElement(NavigationWrapper, { collapseSize: collapseSize },
308
310
  React__default["default"].createElement(globalNavStyles.LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA" },
309
311
  React__default["default"].createElement(DnaLogo["default"], { size: navigation.headerLogoSize })),
@@ -312,7 +314,7 @@ const MainHeaderNavigation = ({ businessMenuAriaLabel = 'Sivustot', categoryColl
312
314
  React__default["default"].createElement(globalNavStyles.HeaderIconContainer, { collapseSize: collapseSize },
313
315
  languagesObject && languageSelector && (React__default["default"].createElement(LanguageSelector["default"], { currentLanguage: language, languagesObject: languagesObject, languageSelectorLabel: languageSelectorText })),
314
316
  search && React__default["default"].createElement(PageSearch["default"], { searchLabel: searchText }),
315
- minicart && (React__default["default"].createElement(MinicartTooltip["default"], { minicartAmount: minicartAmount, minicartLabel: minicartText })),
317
+ minicart && (React__default["default"].createElement(MinicartTooltip["default"], { minicartAmount: minicartAmount, minicartLabel: minicartText, onCartButtonClick: props.onCartButtonClick })),
316
318
  login && React__default["default"].createElement(LoginTooltip["default"], { loginLabel: loginText, isLogged: isLoggedIn }),
317
319
  React__default["default"].createElement(MainNavTooltipMenu.IconContainer, { collapseSize: collapseSize, "data-testid": "header-mobile-menu-container" },
318
320
  React__default["default"].createElement(globalNavStyles.MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": "menu toggle", "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick },
package/build/cjs/components/PriorityNavigation/PriorityNavigation.js CHANGED
@@ -245,7 +245,7 @@ const PriorityNavigation = (_a) => {
245
245
  React__default["default"].createElement(ListsContainer, { ref: listsContainerRef },
246
246
  isMobile && selectedItem && (React__default["default"].createElement(MobileDropdown, { onClick: toggleMobileNavigation },
247
247
  selectedItem,
248
- React__default["default"].createElement(Icon["default"], { icon: isMobileNavigationOpen ? icons.ChevronUp : icons.ChevronDown }))),
248
+ React__default["default"].createElement(Icon["default"], { icon: isMobileNavigationOpen ? icons.OvalChevronUp : icons.OvalChevronDown, size: "2.5rem" }))),
249
249
  React__default["default"].createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen }, React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => React.isValidElement(navigationItem) &&
250
250
  navigationItem.type === PriorityNavigationItem["default"] && (React__default["default"].createElement(PriorityNavigationItem["default"], { id: navigationItem.props.id, key: navigationItem.key, onClick: navigationItem.props.onClick || props.onClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
251
251
  navigationItem.props.children,
package/build/cjs/components/ReadMore/ReadMore.js CHANGED
@@ -20,6 +20,7 @@ const Container = styled["default"].div `
20
20
  const Content = styled["default"].div `
21
21
  ${({ isExpanded, collapsedSize }) => !isExpanded &&
22
22
  `
23
+ overflow: hidden;
23
24
  max-height: ${collapsedSize};
24
25
  mask-image: linear-gradient(${theme["default"].color.background.white.default}, transparent);
25
26
  `}
package/build/es/components/Carousel/Carousel.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { MouseEvent, ReactNode } from 'react';
2
2
  import React from 'react';
3
- export interface Props {
3
+ interface Props {
4
4
  /**
5
5
  * Unique ID for the component
6
6
  */
package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { ReactNode } from 'react';
2
2
  import React from 'react';
3
- export interface MainNavTooltipMenuProps {
3
+ import type { MainHeaderNavigationProps } from '../MainHeaderNavigation';
4
+ interface MainNavTooltipMenuProps extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
4
5
  /** Aria-label for screen readers in mobile */
5
6
  ariaLabel?: string;
6
7
  /** Tooltip menu content */
@@ -90,7 +91,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
90
91
  E02: string;
91
92
  };
92
93
  sky: {
93
- default: string;
94
+ default: string; /** Mandatory Component provided as login content */
94
95
  E01: string;
95
96
  E02: string;
96
97
  };
@@ -103,7 +104,6 @@ export declare const IconContainer: import("styled-components").StyledComponent<
103
104
  default: string;
104
105
  };
105
106
  };
106
- /** This will define the global state object string. mandatory */
107
107
  focus: {
108
108
  dark: string;
109
109
  light: string;
@@ -111,6 +111,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
111
111
  transparency: {
112
112
  T0: string;
113
113
  T10: string;
114
+ /** This will define the global state object string. mandatory */
114
115
  T20: string;
115
116
  T30: string;
116
117
  T40: string;
@@ -189,5 +190,5 @@ export declare const IconContainer: import("styled-components").StyledComponent<
189
190
  isActive?: boolean | undefined;
190
191
  collapseSize: number;
191
192
  }, never>;
192
- declare const MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, }: MainNavTooltipMenuProps) => React.JSX.Element;
193
+ declare const MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps) => React.JSX.Element;
193
194
  export default MainNavTooltipMenu;
package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { __rest } from 'tslib';
1
2
  import React__default, { useContext, useRef, useEffect } from 'react';
2
3
  import useCloseOutsideOrElementClicked from '../../../hooks/useCloseOutsideOrElementClicked.js';
3
4
  import useDocHeight from '../../../hooks/useDocHeight.js';
@@ -6,9 +7,9 @@ import theme from '../../../themes/theme.js';
6
7
  import { IconContainerMinWidth, navIconSize, navMaxHeight } from '../../../themes/themeComponents/navigation.js';
7
8
  import { getMultipliedSize } from '../../../utils/styledUtils.js';
8
9
  import Box from '../../Box/Box.js';
10
+ import ButtonPrimary from '../../Button/ButtonPrimary.js';
9
11
  import NavContext from '../context/NavContext.js';
10
12
  import TooltipWrapper from './MainNavTooltipMenuExportedStyles.js';
11
- import ButtonPrimary from '../../Button/ButtonPrimary.js';
12
13
 
13
14
  const IconContainer = styled.div `
14
15
  margin: 0;
@@ -75,7 +76,8 @@ const Caret = styled.div `
75
76
  max-height: calc(var(--vh100, 100vh) - ${navMaxHeight});
76
77
  }
77
78
  `;
78
- const MainNavTooltipMenu = ({ ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1, }) => {
79
+ const MainNavTooltipMenu = (_a) => {
80
+ var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1 } = _a, props = __rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight", "zIndex"]);
79
81
  const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = useContext(NavContext);
80
82
  const ref = useRef(null);
81
83
  const globalStateKey = globalStateString;
@@ -101,7 +103,7 @@ const MainNavTooltipMenu = ({ ariaLabel, children, closeWhenTagClicked = [], con
101
103
  }
102
104
  });
103
105
  return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
104
- globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: ContentComponent ? toggleState : undefined }, children)),
106
+ globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
105
107
  tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(React__default.Fragment, null,
106
108
  React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
107
109
  React__default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
package/build/es/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
- interface MinicartTooltipProps {
2
+ import type { MainHeaderNavigationProps } from '../MainHeaderNavigation';
3
+ interface MinicartTooltipProps extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
3
4
  minicartAmount: number;
4
5
  minicartLabel?: string;
5
6
  }
6
- declare const MinicartTooltip: ({ minicartAmount, minicartLabel }: MinicartTooltipProps) => React.JSX.Element;
7
+ declare const MinicartTooltip: ({ minicartAmount, minicartLabel, ...props }: MinicartTooltipProps) => React.JSX.Element;
7
8
  export default MinicartTooltip;
package/build/es/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { __rest } from 'tslib';
1
2
  import { Cart } from '@dnanpm/icons';
2
3
  import React__default, { useContext } from 'react';
3
4
  import theme from '../../../themes/theme.js';
@@ -7,9 +8,10 @@ import NotificationBadge from '../../NotificationBadge/NotificationBadge.js';
7
8
  import NavContext from '../context/NavContext.js';
8
9
  import MainNavTooltipMenu from './MainNavTooltipMenu.js';
9
10
 
10
- const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
11
+ const MinicartTooltip = (_a) => {
12
+ var { minicartAmount, minicartLabel } = _a, props = __rest(_a, ["minicartAmount", "minicartLabel"]);
11
13
  const { navZIndex, minicartComponent: MinicartComponent } = useContext(NavContext);
12
- return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: MinicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
14
+ return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], onCartButtonClick: props.onCartButtonClick, contentComponent: MinicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
13
15
  React__default.createElement(Icon, { icon: Cart, size: navIconSize }),
14
16
  React__default.createElement("span", null, minicartLabel),
15
17
  minicartAmount > 0 && (React__default.createElement(NotificationBadge, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from 'react';
1
+ import type { MouseEvent, ReactNode } from 'react';
2
2
  import React from 'react';
3
3
  import type { GlobalNavItems } from './types/globalNavProps';
4
4
  export interface MainHeaderNavigationProps {
@@ -16,8 +16,17 @@ export interface MainHeaderNavigationProps {
16
16
  minicart?: boolean;
17
17
  minicartText?: string;
18
18
  minicartAmount?: number;
19
+ /**
20
+ * Defines MinicartComponent when used. If minicart is true but component is not provided, shown as disabled element.
21
+ *
22
+ * @deprecated Use `onCartButtonClick` property instead
23
+ */
19
24
  minicartComponent?: ReactNode | boolean;
20
25
  showMinicart?: boolean;
26
+ /**
27
+ * On Cart button click callback
28
+ */
29
+ onCartButtonClick?: (e: MouseEvent<HTMLElement>) => void;
21
30
  showLoginTooltip?: boolean;
22
31
  languageSelector?: boolean;
23
32
  languageSelectorText?: string;
@@ -31,6 +40,6 @@ export interface MainHeaderNavigationProps {
31
40
  notificationText?: string;
32
41
  }
33
42
  /** @visibleName MainHeaderNavigation */
34
- declare const MainHeaderNavigation: ({ businessMenuAriaLabel, categoryCollectionText, className, collapseSize, currentUrl, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartComponent, minicartText, nextJSLinkComponent, notificationText, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, }: MainHeaderNavigationProps) => React.JSX.Element;
43
+ declare const MainHeaderNavigation: ({ businessMenuAriaLabel, categoryCollectionText, className, collapseSize, currentUrl, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartComponent, minicartText, nextJSLinkComponent, notificationText, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
35
44
  /** @component */
36
45
  export default MainHeaderNavigation;
package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { __rest } from 'tslib';
1
2
  import { Close, Menu } from '@dnanpm/icons';
2
3
  import { prop, indexBy } from 'ramda';
3
4
  import React__default, { useRef, useMemo, useState, useEffect } from 'react';
@@ -124,8 +125,9 @@ const initiateScrollToHeader = (componentRef) => {
124
125
  }
125
126
  };
126
127
  /** @visibleName MainHeaderNavigation */
127
- const MainHeaderNavigation = ({ businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', className, collapseSize = 767, currentUrl = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030, }) => {
128
- var _a, _b, _c;
128
+ const MainHeaderNavigation = (_a) => {
129
+ var _b, _c, _d;
130
+ var { businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', className, collapseSize = 767, currentUrl = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = __rest(_a, ["businessMenuAriaLabel", "categoryCollectionText", "className", "collapseSize", "currentUrl", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
129
131
  const { isMobile } = useWindowSize(collapseSize);
130
132
  const navigationEl = useRef(null);
131
133
  const key = prop('id');
@@ -281,8 +283,8 @@ const MainHeaderNavigation = ({ businessMenuAriaLabel = 'Sivustot', categoryColl
281
283
  setMenuLevel(Object.assign(Object.assign({}, menuLevel), { animate1: false, animate2: false, hideOnScroll: isShow }));
282
284
  }
283
285
  }, undefined, false, 200);
284
- const currentBusinessSite = (_a = items === null || items === void 0 ? void 0 : items.businessSelector) === null || _a === void 0 ? void 0 : _a.items.find(item => item.businessId === items.businessId);
285
- const languagesObject = (_b = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _b === void 0 ? void 0 : _b.urls;
286
+ const currentBusinessSite = (_b = items === null || items === void 0 ? void 0 : items.businessSelector) === null || _b === void 0 ? void 0 : _b.items.find(item => item.businessId === items.businessId);
287
+ const languagesObject = (_c = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _c === void 0 ? void 0 : _c.urls;
286
288
  const { resetMenuEvents } = navigationContext;
287
289
  const handleToggleClick = () => {
288
290
  resetMenuEvents();
@@ -295,7 +297,7 @@ const MainHeaderNavigation = ({ businessMenuAriaLabel = 'Sivustot', categoryColl
295
297
  React__default.createElement(NavContext.Provider, { value: navigationContext },
296
298
  React__default.createElement(GlobalStyle, null),
297
299
  !items.mainNavigation && notificationText && (React__default.createElement(Notification, { type: "info" }, notificationText)),
298
- React__default.createElement(BusinessMenu, { ariaLabel: businessMenuAriaLabel, currentBusinessId: items.businessId, items: (_c = items.businessSelector) === null || _c === void 0 ? void 0 : _c.items, lang: language }),
300
+ React__default.createElement(BusinessMenu, { ariaLabel: businessMenuAriaLabel, currentBusinessId: items.businessId, items: (_d = items.businessSelector) === null || _d === void 0 ? void 0 : _d.items, lang: language }),
299
301
  React__default.createElement(NavigationWrapper, { collapseSize: collapseSize },
300
302
  React__default.createElement(LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA" },
301
303
  React__default.createElement(DnaLogo, { size: headerLogoSize })),
@@ -304,7 +306,7 @@ const MainHeaderNavigation = ({ businessMenuAriaLabel = 'Sivustot', categoryColl
304
306
  React__default.createElement(HeaderIconContainer, { collapseSize: collapseSize },
305
307
  languagesObject && languageSelector && (React__default.createElement(LanguageSelector, { currentLanguage: language, languagesObject: languagesObject, languageSelectorLabel: languageSelectorText })),
306
308
  search && React__default.createElement(PageSearch, { searchLabel: searchText }),
307
- minicart && (React__default.createElement(MinicartTooltip, { minicartAmount: minicartAmount, minicartLabel: minicartText })),
309
+ minicart && (React__default.createElement(MinicartTooltip, { minicartAmount: minicartAmount, minicartLabel: minicartText, onCartButtonClick: props.onCartButtonClick })),
308
310
  login && React__default.createElement(LoginTooltip, { loginLabel: loginText, isLogged: isLoggedIn }),
309
311
  React__default.createElement(IconContainer, { collapseSize: collapseSize, "data-testid": "header-mobile-menu-container" },
310
312
  React__default.createElement(MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": "menu toggle", "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick },
package/build/es/components/PriorityNavigation/PriorityNavigation.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __rest } from 'tslib';
2
- import { ChevronUp, ChevronDown, Check } from '@dnanpm/icons';
2
+ import { OvalChevronUp, OvalChevronDown, Check, ChevronUp, ChevronDown } from '@dnanpm/icons';
3
3
  import React__default, { useRef, useState, Children, useReducer, isValidElement, useEffect } from 'react';
4
4
  import useDebounce from '../../hooks/useDebounce.js';
5
5
  import useOutsideClick from '../../hooks/useOutsideClick.js';
@@ -237,7 +237,7 @@ const PriorityNavigation = (_a) => {
237
237
  React__default.createElement(ListsContainer, { ref: listsContainerRef },
238
238
  isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation },
239
239
  selectedItem,
240
- React__default.createElement(Icon, { icon: isMobileNavigationOpen ? ChevronUp : ChevronDown }))),
240
+ React__default.createElement(Icon, { icon: isMobileNavigationOpen ? OvalChevronUp : OvalChevronDown, size: "2.5rem" }))),
241
241
  React__default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen }, Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => isValidElement(navigationItem) &&
242
242
  navigationItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: navigationItem.props.id, key: navigationItem.key, onClick: navigationItem.props.onClick || props.onClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
243
243
  navigationItem.props.children,
package/build/es/components/ReadMore/ReadMore.js CHANGED
@@ -12,6 +12,7 @@ const Container = styled.div `
12
12
  const Content = styled.div `
13
13
  ${({ isExpanded, collapsedSize }) => !isExpanded &&
14
14
  `
15
+ overflow: hidden;
15
16
  max-height: ${collapsedSize};
16
17
  mask-image: linear-gradient(${theme.color.background.white.default}, transparent);
17
18
  `}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dnanpm/styleguide",
3
3
  "sideEffects": false,
4
- "version": "3.7.2",
4
+ "version": "v3.8.1",
5
5
  "main": "build/cjs/index.js",
6
6
  "module": "build/es/index.js",
7
7
  "jsnext:main": "build/es/index.js",
@@ -17,23 +17,19 @@
17
17
  ],
18
18
  "repository": {
19
19
  "type": "git",
20
- "url": "git+https://github.com/DNA-Online-Services/kauppa.git"
20
+ "url": "ssh://git@oakdvcs.dna.fi:7999/dsg/styleguide.git"
21
21
  },
22
22
  "scripts": {
23
+ "build": "rm -rf build && rollup -c",
24
+ "clean": "rm -rf node_modules build dnanpm-styleguide*.tgz",
23
25
  "eslint": "cross-env eslint --fix './**/*.{ts,tsx}'",
24
26
  "eslint:check": "cross-env eslint './**/*.{ts,tsx}'",
27
+ "format": "cross-env prettier --ignore-path .prettierignore --write --loglevel silent '**/*.{ts,tsx,js,json}'",
28
+ "format:check": "cross-env prettier --ignore-path .prettierignore --check '**/*.{ts,tsx,js,json}'",
29
+ "prepublishOnly": "npm run clean && npm ci && npm run eslint:check && npm run format:check && npm run build",
25
30
  "styleguide": "styleguidist server",
26
31
  "styleguide:build": "styleguidist build",
27
- "build": "rm -rf build && rollup -c",
28
- "clean": "rm -rf node_modules build dnanpm-styleguide*.tgz",
29
- "lock": "echo 'check if tarlock is too old,remove it,create own file with pid,ln it to tarlock,if it fails,loop until it doesnt'",
30
- "unlock": "echo 'check if its ours ,remove it and ours.'",
31
- "condtar": "npm run lock && ( [ -s dnanpm-styleguide-snapshot.tgz ] || npm run tar) && npm run unlock",
32
32
  "tar": "npm run clean && npm ci && npm run build && npm pack && mv dnanpm-styleguide*.tgz dnanpm-styleguide-snapshot.tgz",
33
- "prepublishOnly": "npm run clean && npm ci && npm run eslint:check && npm run build",
34
- "format": "cross-env prettier --ignore-path .prettierignore --write --loglevel silent '**/*.{ts,tsx,js,json}'",
35
- "format:check": "cross-env prettier --ignore-path .prettierignore --check '**/*.{ts,tsx,js,json}'",
36
- "preCommit": "npm run eslint:check && npm run format:check",
37
33
  "test": "cross-env jest --coverage"
38
34
  },
39
35
  "browserslist": [
@@ -47,7 +43,7 @@
47
43
  "@babel/preset-env": "^7.22.10",
48
44
  "@babel/preset-react": "^7.22.5",
49
45
  "@babel/preset-typescript": "^7.22.11",
50
- "@dnanpm/icons": "2.0.1",
46
+ "@dnanpm/icons": "2.0.3",
51
47
  "@rollup/plugin-commonjs": "^25.0.4",
52
48
  "@rollup/plugin-node-resolve": "^15.2.1",
53
49
  "@rollup/plugin-typescript": "^11.1.5",