@laerdal/life-react-components 1.0.1-dev.19.full → 1.0.1-dev.22.full
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/AuthPage/Information.js +4 -7
- package/dist/esm/AuthPage/Information.js.map +1 -1
- package/dist/esm/Banners/Banner.js +5 -5
- package/dist/esm/Banners/Banner.js.map +1 -1
- package/dist/esm/Banners/OverviewBanner.js +2 -2
- package/dist/esm/Banners/OverviewBanner.js.map +1 -1
- package/dist/esm/Breadcrumb/Breadcrumb.js +46 -20
- package/dist/esm/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/esm/Button/Iconbutton.js +4 -1
- package/dist/esm/Button/Iconbutton.js.map +1 -1
- package/dist/esm/Dropdown/CommonStyling.js +28 -28
- package/dist/esm/Dropdown/CommonStyling.js.map +1 -1
- package/dist/esm/Footer/Components/FooterDropdownLinks.js +9 -9
- package/dist/esm/Footer/Components/FooterDropdownLinks.js.map +1 -1
- package/dist/esm/Footer/Components/FooterNavSection.js +4 -8
- package/dist/esm/Footer/Components/FooterNavSection.js.map +1 -1
- package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js +4 -4
- package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/esm/Footer/Components/FooterTop.js +2 -2
- package/dist/esm/Footer/Components/FooterTop.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/Logo.js +8 -11
- package/dist/esm/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/RightSideNav.js +4 -3
- package/dist/esm/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/MenuLink.js +3 -6
- package/dist/esm/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js +10 -7
- package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js +5 -13
- package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js +4 -1
- package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/mobile/MobileMenu.js +6 -9
- package/dist/esm/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
- package/dist/esm/InputFields/DatepickerField.js +13 -14
- package/dist/esm/InputFields/DatepickerField.js.map +1 -1
- package/dist/esm/InputFields/components/SearchBarInput.js +11 -11
- package/dist/esm/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/esm/InputFields/components/SearchField.js +13 -11
- package/dist/esm/InputFields/components/SearchField.js.map +1 -1
- package/dist/esm/List/ListRow.js +5 -2
- package/dist/esm/List/ListRow.js.map +1 -1
- package/dist/esm/List/ListRowDropdown.js +4 -5
- package/dist/esm/List/ListRowDropdown.js.map +1 -1
- package/dist/esm/LoadingPage/GlobalLoadingPage.js +4 -3
- package/dist/esm/LoadingPage/GlobalLoadingPage.js.map +1 -1
- package/dist/esm/MiniProductCard/MiniProductCard.js +4 -5
- package/dist/esm/MiniProductCard/MiniProductCard.js.map +1 -1
- package/dist/esm/Modals/ModalDialog.js +22 -10
- package/dist/esm/Modals/ModalDialog.js.map +1 -1
- package/dist/esm/Paginator/Paginator.js +5 -6
- package/dist/esm/Paginator/Paginator.js.map +1 -1
- package/dist/esm/SkipToContent/SkipToContent.js +4 -5
- package/dist/esm/SkipToContent/SkipToContent.js.map +1 -1
- package/dist/esm/Switcher/MobileSwitcherMenu.js +4 -4
- package/dist/esm/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/esm/Switcher/SwitcherMenuItem.js +8 -9
- package/dist/esm/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/esm/Tabs/HorizontalTabs.js +7 -10
- package/dist/esm/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/esm/Toasters/Toast.js +1 -2
- package/dist/esm/Toasters/Toast.js.map +1 -1
- package/dist/esm/styles/typography.js +52 -1
- package/dist/esm/styles/typography.js.map +1 -1
- package/dist/js/AuthPage/Information.js +4 -2
- package/dist/js/AuthPage/Information.js.map +1 -1
- package/dist/js/Banners/Banner.js +2 -2
- package/dist/js/Banners/Banner.js.map +1 -1
- package/dist/js/Banners/OverviewBanner.js +3 -1
- package/dist/js/Banners/OverviewBanner.js.map +1 -1
- package/dist/js/Breadcrumb/Breadcrumb.d.ts +2 -0
- package/dist/js/Breadcrumb/Breadcrumb.js +46 -14
- package/dist/js/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/js/Button/Iconbutton.d.ts +1 -0
- package/dist/js/Button/Iconbutton.js +4 -1
- package/dist/js/Button/Iconbutton.js.map +1 -1
- package/dist/js/Dropdown/CommonStyling.js +4 -4
- package/dist/js/Dropdown/CommonStyling.js.map +1 -1
- package/dist/js/Footer/Components/FooterDropdownLinks.js +3 -3
- package/dist/js/Footer/Components/FooterDropdownLinks.js.map +1 -1
- package/dist/js/Footer/Components/FooterNavSection.js +4 -2
- package/dist/js/Footer/Components/FooterNavSection.js.map +1 -1
- package/dist/js/Footer/Components/FooterNewsletterAndSocialSection.js +2 -2
- package/dist/js/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/js/Footer/Components/FooterTop.js +3 -1
- package/dist/js/Footer/Components/FooterTop.js.map +1 -1
- package/dist/js/GlobalNavigationBar/Logo.js +9 -7
- package/dist/js/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/js/GlobalNavigationBar/RightSideNav.js +3 -1
- package/dist/js/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/js/GlobalNavigationBar/UserMenu/MenuLink.js +3 -1
- package/dist/js/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -1
- package/dist/js/GlobalNavigationBar/UserMenu/MobileUserMenu.js +4 -2
- package/dist/js/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
- package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js +4 -2
- package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/js/GlobalNavigationBar/mobile/CommonStyles.js +1 -1
- package/dist/js/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/js/GlobalNavigationBar/mobile/MobileMenu.d.ts +1 -1
- package/dist/js/GlobalNavigationBar/mobile/MobileMenu.js +4 -2
- package/dist/js/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
- package/dist/js/InputFields/DatepickerField.js +4 -2
- package/dist/js/InputFields/DatepickerField.js.map +1 -1
- package/dist/js/InputFields/components/SearchBarInput.js +4 -2
- package/dist/js/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/js/InputFields/components/SearchField.js +3 -1
- package/dist/js/InputFields/components/SearchField.js.map +1 -1
- package/dist/js/List/ListRow.js +3 -1
- package/dist/js/List/ListRow.js.map +1 -1
- package/dist/js/List/ListRowDropdown.js +3 -1
- package/dist/js/List/ListRowDropdown.js.map +1 -1
- package/dist/js/LoadingPage/GlobalLoadingPage.js +3 -1
- package/dist/js/LoadingPage/GlobalLoadingPage.js.map +1 -1
- package/dist/js/MiniProductCard/MiniProductCard.js +4 -2
- package/dist/js/MiniProductCard/MiniProductCard.js.map +1 -1
- package/dist/js/Modals/ModalDialog.d.ts +1 -1
- package/dist/js/Modals/ModalDialog.js +24 -10
- package/dist/js/Modals/ModalDialog.js.map +1 -1
- package/dist/js/Paginator/Paginator.js +3 -1
- package/dist/js/Paginator/Paginator.js.map +1 -1
- package/dist/js/SkipToContent/SkipToContent.js +3 -1
- package/dist/js/SkipToContent/SkipToContent.js.map +1 -1
- package/dist/js/Switcher/MobileSwitcherMenu.js +3 -1
- package/dist/js/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/js/Switcher/SwitcherMenuItem.js +3 -1
- package/dist/js/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/js/Tabs/HorizontalTabs.js +3 -1
- package/dist/js/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/js/Toasters/Toast.js +3 -3
- package/dist/js/Toasters/Toast.js.map +1 -1
- package/dist/js/styles/typography.d.ts +19 -6
- package/dist/js/styles/typography.js +80 -5
- package/dist/js/styles/typography.js.map +1 -1
- package/dist/umd/AuthPage/Information.js +6 -10
- package/dist/umd/AuthPage/Information.js.map +1 -1
- package/dist/umd/Banners/Banner.js +2 -2
- package/dist/umd/Banners/Banner.js.map +1 -1
- package/dist/umd/Banners/OverviewBanner.js +5 -6
- package/dist/umd/Banners/OverviewBanner.js.map +1 -1
- package/dist/umd/Breadcrumb/Breadcrumb.js +48 -22
- package/dist/umd/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/umd/Button/Iconbutton.js +4 -1
- package/dist/umd/Button/Iconbutton.js.map +1 -1
- package/dist/umd/Dropdown/CommonStyling.js +28 -28
- package/dist/umd/Dropdown/CommonStyling.js.map +1 -1
- package/dist/umd/Footer/Components/FooterDropdownLinks.js +8 -8
- package/dist/umd/Footer/Components/FooterDropdownLinks.js.map +1 -1
- package/dist/umd/Footer/Components/FooterNavSection.js +6 -11
- package/dist/umd/Footer/Components/FooterNavSection.js.map +1 -1
- package/dist/umd/Footer/Components/FooterNewsletterAndSocialSection.js +3 -3
- package/dist/umd/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/umd/Footer/Components/FooterTop.js +5 -6
- package/dist/umd/Footer/Components/FooterTop.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/Logo.js +10 -14
- package/dist/umd/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/RightSideNav.js +6 -6
- package/dist/umd/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/UserMenu/MenuLink.js +5 -9
- package/dist/umd/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js +12 -10
- package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js +7 -16
- package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/mobile/CommonStyles.js +4 -1
- package/dist/umd/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/mobile/MobileMenu.js +7 -11
- package/dist/umd/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
- package/dist/umd/InputFields/DatepickerField.js +15 -16
- package/dist/umd/InputFields/DatepickerField.js.map +1 -1
- package/dist/umd/InputFields/components/SearchBarInput.js +13 -14
- package/dist/umd/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/umd/InputFields/components/SearchField.js +15 -14
- package/dist/umd/InputFields/components/SearchField.js.map +1 -1
- package/dist/umd/List/ListRow.js +7 -5
- package/dist/umd/List/ListRow.js.map +1 -1
- package/dist/umd/List/ListRowDropdown.js +6 -8
- package/dist/umd/List/ListRowDropdown.js.map +1 -1
- package/dist/umd/LoadingPage/GlobalLoadingPage.js +6 -6
- package/dist/umd/LoadingPage/GlobalLoadingPage.js.map +1 -1
- package/dist/umd/MiniProductCard/MiniProductCard.js +6 -8
- package/dist/umd/MiniProductCard/MiniProductCard.js.map +1 -1
- package/dist/umd/Modals/ModalDialog.js +22 -10
- package/dist/umd/Modals/ModalDialog.js.map +1 -1
- package/dist/umd/Paginator/Paginator.js +7 -9
- package/dist/umd/Paginator/Paginator.js.map +1 -1
- package/dist/umd/SkipToContent/SkipToContent.js +6 -8
- package/dist/umd/SkipToContent/SkipToContent.js.map +1 -1
- package/dist/umd/Switcher/MobileSwitcherMenu.js +6 -7
- package/dist/umd/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/umd/Switcher/SwitcherMenuItem.js +10 -12
- package/dist/umd/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/umd/Tabs/HorizontalTabs.js +8 -12
- package/dist/umd/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/umd/Toasters/Toast.js +1 -2
- package/dist/umd/Toasters/Toast.js.map +1 -1
- package/dist/umd/styles/typography.js +62 -2
- package/dist/umd/styles/typography.js.map +1 -1
- package/package.json +1 -1
|
@@ -89,11 +89,10 @@
|
|
|
89
89
|
box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_400};
|
|
90
90
|
`;
|
|
91
91
|
const placeholderStyling = _styledComponents.css`
|
|
92
|
-
${(0, _typography.ComponentMStyling)(
|
|
92
|
+
${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
|
|
93
93
|
`;
|
|
94
94
|
const StyledField = exports.StyledField = _styledComponents2.default.div`
|
|
95
|
-
|
|
96
|
-
font-size: 16px;
|
|
95
|
+
${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
|
|
97
96
|
|
|
98
97
|
padding: 12px 16px;
|
|
99
98
|
height: 48px;
|
|
@@ -105,42 +104,44 @@
|
|
|
105
104
|
box-sizing: border-box;
|
|
106
105
|
border-radius: 4px;
|
|
107
106
|
cursor: pointer;
|
|
108
|
-
line-height: 16px;
|
|
109
107
|
|
|
110
108
|
display: flex;
|
|
111
109
|
align-items: center;
|
|
112
110
|
gap: 4px;
|
|
111
|
+
|
|
112
|
+
input{
|
|
113
|
+
font-size: inherit;
|
|
114
|
+
line-height: inherit;
|
|
115
|
+
color: inherit;
|
|
116
|
+
}
|
|
113
117
|
|
|
114
118
|
&::placeholder {
|
|
115
|
-
${(0, _typography.ComponentXXSStyling)(
|
|
119
|
+
${(0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
|
|
116
120
|
}
|
|
117
121
|
|
|
118
122
|
${_styles.BREAKPOINTS.MEDIUM} {
|
|
119
|
-
|
|
120
|
-
line-height: 16px;
|
|
123
|
+
${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
|
|
121
124
|
padding: 16px;
|
|
122
125
|
height: 56px;
|
|
123
126
|
&::placeholder {
|
|
124
|
-
|
|
127
|
+
${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
|
|
125
128
|
}
|
|
126
129
|
}
|
|
127
130
|
|
|
128
131
|
&.small {
|
|
129
|
-
|
|
130
|
-
line-height: 16px;
|
|
132
|
+
${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
|
|
131
133
|
padding: 12px 16px;
|
|
132
134
|
height: 48px;
|
|
133
135
|
&::placeholder {
|
|
134
|
-
|
|
136
|
+
${(0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
|
|
135
137
|
}
|
|
136
138
|
}
|
|
137
139
|
&.medium {
|
|
138
|
-
|
|
139
|
-
line-height: 18px;
|
|
140
|
+
${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
|
|
140
141
|
height: 56px;
|
|
141
142
|
padding: 16px;
|
|
142
143
|
&::placeholder {
|
|
143
|
-
|
|
144
|
+
${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
|
|
144
145
|
}
|
|
145
146
|
}
|
|
146
147
|
|
|
@@ -171,8 +172,8 @@
|
|
|
171
172
|
}
|
|
172
173
|
|
|
173
174
|
&.button {
|
|
174
|
-
|
|
175
|
-
|
|
175
|
+
${props => (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, props.disabled ? _styles.COLORS.neutral_300 : _styles.COLORS.neutral_600)}
|
|
176
|
+
|
|
176
177
|
box-sizing: border-box;
|
|
177
178
|
height: 32px;
|
|
178
179
|
padding: 0 8px;
|
|
@@ -180,9 +181,7 @@
|
|
|
180
181
|
min-width: initial;
|
|
181
182
|
border: none !important;
|
|
182
183
|
box-shadow: none;
|
|
183
|
-
font-weight: bold;
|
|
184
184
|
border-radius: 4px;
|
|
185
|
-
color: ${props => props.disabled ? _styles.COLORS.neutral_300 : _styles.COLORS.neutral_600};
|
|
186
185
|
|
|
187
186
|
&.expanded {
|
|
188
187
|
color: ${_styles.COLORS.neutral_800};
|
|
@@ -252,16 +251,11 @@
|
|
|
252
251
|
}
|
|
253
252
|
`;
|
|
254
253
|
const DropdownButton = exports.DropdownButton = _styledComponents2.default.button`
|
|
255
|
-
|
|
254
|
+
${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
|
|
256
255
|
|
|
257
256
|
position: relative;
|
|
258
257
|
text-decoration: none;
|
|
259
258
|
display: block;
|
|
260
|
-
font-family: Lato;
|
|
261
|
-
font-style: normal;
|
|
262
|
-
font-weight: normal;
|
|
263
|
-
font-size: 16px;
|
|
264
|
-
line-height: 120%;
|
|
265
259
|
height: 48px;
|
|
266
260
|
background-color: ${_styles.COLORS.white};
|
|
267
261
|
border: none;
|
|
@@ -276,18 +270,22 @@
|
|
|
276
270
|
width: calc(100% - 32px);
|
|
277
271
|
border-top: 1px solid #e5e5e5;
|
|
278
272
|
}
|
|
273
|
+
|
|
279
274
|
span {
|
|
280
275
|
margin: auto 0 auto 16px;
|
|
281
276
|
line-height: 48px;
|
|
282
277
|
}
|
|
278
|
+
|
|
283
279
|
div.item-content {
|
|
284
280
|
margin: auto 0 auto 16px;
|
|
285
281
|
line-height: 48px;
|
|
286
282
|
display: flex;
|
|
287
283
|
align-items: center;
|
|
284
|
+
|
|
288
285
|
div.item-label {
|
|
289
286
|
flex: 1 0 calc(100% - 40px);
|
|
290
287
|
}
|
|
288
|
+
|
|
291
289
|
div.item-icon {
|
|
292
290
|
flex: 1 0 40px;
|
|
293
291
|
display: flex;
|
|
@@ -299,6 +297,7 @@
|
|
|
299
297
|
|
|
300
298
|
&.active {
|
|
301
299
|
background: ${_styles.COLORS.neutral_20};
|
|
300
|
+
|
|
302
301
|
&::after {
|
|
303
302
|
position: absolute;
|
|
304
303
|
content: ' ';
|
|
@@ -308,24 +307,25 @@
|
|
|
308
307
|
left: 2px;
|
|
309
308
|
background-color: ${_styles.COLORS.primary_500};
|
|
310
309
|
|
|
311
|
-
border-
|
|
312
|
-
border-top-right-radius: 2px;
|
|
313
|
-
border-bottom-left-radius: 2px;
|
|
314
|
-
border-bottom-right-radius: 2px;
|
|
310
|
+
border-radius: 2px;
|
|
315
311
|
}
|
|
316
312
|
}
|
|
317
313
|
|
|
318
314
|
&.active:hover {
|
|
319
315
|
background-color: ${_styles.COLORS.primary_20};
|
|
316
|
+
|
|
320
317
|
svg {
|
|
321
318
|
color: ${_styles.COLORS.primary_600};
|
|
322
319
|
}
|
|
320
|
+
|
|
323
321
|
&::after {
|
|
324
322
|
background-color: ${_styles.COLORS.primary_500};
|
|
325
323
|
}
|
|
326
324
|
}
|
|
325
|
+
|
|
327
326
|
&.active:active {
|
|
328
327
|
background-color: ${_styles.COLORS.primary_100};
|
|
328
|
+
|
|
329
329
|
svg {
|
|
330
330
|
color: ${_styles.COLORS.primary_800};
|
|
331
331
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","StyledField","ComponentXXSStyling","BREAKPOINTS","MEDIUM","primary_200","primary_300","neutral_800","neutral_20","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContent","neutral_200","neutral_400","DropdownButton","button","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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BAAsBG,eAAOS,KAAM;AACnC;AACA;AACA,gBAAiBX,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,MAAAA,GAA0B,KAAO;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKA,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,4BAAAA,GAAgD,EAAI;AACpE;AACA,sBAAsBE,eAAOK,WAAY;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBL,eAAOS,KAAM;AAC/B;AACA;AACA;AACA;AACA,kBAAkBT,eAAO0B,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA,kBAAkB1B,eAAO2B,WAAY;AACrC;AAhDO,CAAA;AAmDA,QAAMC,cAAc,WAAdA,cAAc,GAAGhC,2BAAOiC,MAAO;AAC5C,WAAW7B,eAAOO,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBP,eAAOS,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIc,gCAAyB;AAC7B;AACA;AACA,kBAAkBvB,eAAOsB,UAAW;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BtB,eAAO8B,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB9B,eAAO+B,UAAW;AAC1C;AACA,eAAe/B,eAAOC,WAAY;AAClC;AACA;AACA,0BAA0BD,eAAO8B,WAAY;AAC7C;AACA;AACA;AACA,wBAAwB9B,eAAOgC,WAAY;AAC3C;AACA,eAAehC,eAAOE,WAAY;AAClC;AACA;AACA;AACA,0BAA0BF,eAAO8B,WAAY;AAC7C;AACA;AAlFO,CAAA;AAqFA,QAAMG,qBAAqB,WAArBA,qBAAqB,GAAGrC,2BAAOC,GAA8C;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,MAAAA,IAAgBA,KAAK,CAArBA,QAAAA,GAAAA,sBAAAA,GAA0D,kBAAoB;AAC9F,IAAKA,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,uBAAAA,GAA2C,EAAI;AAC/D;AACA;AACA;AACA,wBAAwBE,eAAO+B,UAAW;AAC1C,aAAa/B,eAAOkC,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBlC,eAAOgC,WAAY;AAC3C,aAAahC,eAAOE,WAAY;AAChC;AACA;AA5BO,EAAA","sourcesContent":["import styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles/typography';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n position: relative;\n display: inline-block;\n ${(props) => !props.isButton && 'width: 100%; min-width: 344px;'}\n ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n .icon {\n width: 24px;\n height: 24px;\n svg {\n cursor: pointer;\n }\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n input {\n color: ${COLORS.neutral_600} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n svg {\n color: ${COLORS.neutral_300} !important;\n }\n input {\n color: ${COLORS.neutral_300} !important;\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string }>`\n font-weight: normal;\n font-size: 16px;\n\n padding: 12px 16px;\n height: 48px;\n min-width: 344px;\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n line-height: 16px;\n\n display: flex;\n align-items: center;\n gap: 4px;\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n font-size: 18px;\n line-height: 16px;\n padding: 16px;\n height: 56px;\n &::placeholder {\n font-size: 14px;\n }\n }\n\n &.small {\n font-size: 16px;\n line-height: 16px;\n padding: 12px 16px;\n height: 48px;\n &::placeholder {\n font-size: 12px;\n }\n }\n &.medium {\n font-size: 18px;\n line-height: 18px;\n height: 56px;\n padding: 16px;\n &::placeholder {\n font-size: 14px;\n }\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n &:hover {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n cursor: pointer;\n }\n &:active {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.button {\n font-size: 16px !important;\n line-height: 20px !important;\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n font-weight: bold;\n border-radius: 4px;\n color: ${(props) => (props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)};\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.locked ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n`;\n\nconst ButtonDropdownContentStyling = css`\n min-width: 344px;\n right: 0;\n`;\n\nexport const DropdownContent = styled.div<{ isButton: boolean }>`\n display: none;\n position: absolute;\n background-color: ${COLORS.white};\n width: 100%;\n z-index: 1;\n margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n &.show {\n display: block;\n }\n\n &.up {\n top: auto;\n bottom: 100%;\n }\n\n ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n border: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n padding: 4px 0;\n\n max-height: 240px;\n overflow-y: auto;\n\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n cursor: pointer;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: ${COLORS.white};\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_200};\n border-radius: 8px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_400};\n }\n`;\n\nexport const DropdownButton = styled.button`\n color: ${COLORS.neutral_600};\n\n position: relative;\n text-decoration: none;\n display: block;\n font-family: Lato;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 120%;\n height: 48px;\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: transparent;\n width: 100%;\n text-align: left;\n\n &.show-divider-above > span,\n &.show-divider-above > div {\n display: block;\n width: calc(100% - 32px);\n border-top: 1px solid #e5e5e5;\n }\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n div.item-content {\n margin: auto 0 auto 16px;\n line-height: 48px;\n display: flex;\n align-items: center;\n div.item-label {\n flex: 1 0 calc(100% - 40px);\n }\n div.item-icon {\n flex: 1 0 40px;\n display: flex;\n justify-content: flex-end;\n }\n }\n\n ${CommonInteractionStyling};\n\n &.active {\n background: ${COLORS.neutral_20};\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: 2px;\n background-color: ${COLORS.primary_500};\n\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n }\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n svg {\n color: ${COLORS.primary_600};\n }\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n &.active:active {\n background-color: ${COLORS.primary_100};\n svg {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n`;\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n\n ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n \n &:hover .button,\n & > .button:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:focus .button,\n & > .button:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n outline: none;\n }\n\n &:active .button,\n & > .button:active {\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n}`;\n"],"file":"CommonStyling.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","StyledField","ComponentSStyling","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","primary_200","primary_300","neutral_800","neutral_20","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContent","neutral_200","neutral_400","DropdownButton","button","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling} from '../styles/typography';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n position: relative;\n display: inline-block;\n ${(props) => !props.isButton && 'width: 100%; min-width: 344px;'}\n ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n .icon {\n width: 24px;\n height: 24px;\n svg {\n cursor: pointer;\n }\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n input {\n color: ${COLORS.neutral_600} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n svg {\n color: ${COLORS.neutral_300} !important;\n }\n input {\n color: ${COLORS.neutral_300} !important;\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: 344px;\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n \n input{\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n &:hover {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n cursor: pointer;\n }\n &:active {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.locked ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n`;\n\nconst ButtonDropdownContentStyling = css`\n min-width: 344px;\n right: 0;\n`;\n\nexport const DropdownContent = styled.div<{ isButton: boolean }>`\n display: none;\n position: absolute;\n background-color: ${COLORS.white};\n width: 100%;\n z-index: 1;\n margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n &.show {\n display: block;\n }\n\n &.up {\n top: auto;\n bottom: 100%;\n }\n\n ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n border: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n padding: 4px 0;\n\n max-height: 240px;\n overflow-y: auto;\n\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n cursor: pointer;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: ${COLORS.white};\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_200};\n border-radius: 8px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_400};\n }\n`;\n\nexport const DropdownButton = styled.button`\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n position: relative;\n text-decoration: none;\n display: block;\n height: 48px;\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: transparent;\n width: 100%;\n text-align: left;\n\n &.show-divider-above > span,\n &.show-divider-above > div {\n display: block;\n width: calc(100% - 32px);\n border-top: 1px solid #e5e5e5;\n }\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n div.item-content {\n margin: auto 0 auto 16px;\n line-height: 48px;\n display: flex;\n align-items: center;\n\n div.item-label {\n flex: 1 0 calc(100% - 40px);\n }\n\n div.item-icon {\n flex: 1 0 40px;\n display: flex;\n justify-content: flex-end;\n }\n }\n\n ${CommonInteractionStyling};\n\n &.active {\n background: ${COLORS.neutral_20};\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: 2px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_600};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n svg {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n`;\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n\n ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n \n &:hover .button,\n & > .button:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:focus .button,\n & > .button:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n outline: none;\n }\n\n &:active .button,\n & > .button:active {\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n}`;\n"],"file":"CommonStyling.js"}
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
}
|
|
89
89
|
`;
|
|
90
90
|
const DropdownLinkBlock = _styledComponents2.default.button`
|
|
91
|
-
${(0, _typography.ComponentSStyling)(
|
|
91
|
+
${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white)}
|
|
92
92
|
|
|
93
93
|
display: ${props => props.width > 768 ? 'none' : 'flex'};
|
|
94
94
|
justify-content: space-between;
|
|
@@ -120,9 +120,7 @@
|
|
|
120
120
|
|
|
121
121
|
h3 {
|
|
122
122
|
margin: auto 0;
|
|
123
|
-
|
|
124
|
-
line-height: 24px;
|
|
125
|
-
font-weight: 400;
|
|
123
|
+
${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
|
|
126
124
|
}
|
|
127
125
|
|
|
128
126
|
.open {
|
|
@@ -147,11 +145,13 @@
|
|
|
147
145
|
}
|
|
148
146
|
|
|
149
147
|
a {
|
|
150
|
-
color: white;
|
|
151
148
|
text-decoration: none;
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
149
|
+
|
|
150
|
+
${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white)}
|
|
151
|
+
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
|
|
155
155
|
padding: 0 16px;
|
|
156
156
|
height: 48px;
|
|
157
157
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["Wrapper","styled","div","COLORS","neutral_100","DropdownLinkBlock","button","ComponentSStyling","ComponentTextStyle","props","neutral_20","primary_700","primary_100","primary_800","neutral_800","LinkBlock","width","FooterDropdownLinks","React","dropdownActive","setDropdownActive","navSection","item","Math"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,QAAMA,OAAO,GAAGC,2BAAOC,GAAI;AAC3B;AACA,0BAA0BC,eAAOC,WAAY;AAC7C;AACA;AACA,+BAA+BD,eAAOC,WAAY;AAClD;AANA,CAAA;AASA,QAAMC,iBAAiB,GAAGJ,2BAAOK,MAA0B;AAC3D,IAAIC,mCAAkBC
|
|
1
|
+
{"version":3,"sources":["../../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["Wrapper","styled","div","COLORS","neutral_100","DropdownLinkBlock","button","ComponentSStyling","ComponentTextStyle","props","neutral_20","primary_700","primary_100","primary_800","ComponentMStyling","neutral_800","LinkBlock","width","FooterDropdownLinks","React","dropdownActive","setDropdownActive","navSection","item","Math"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,QAAMA,OAAO,GAAGC,2BAAOC,GAAI;AAC3B;AACA,0BAA0BC,eAAOC,WAAY;AAC7C;AACA;AACA,+BAA+BD,eAAOC,WAAY;AAClD;AANA,CAAA;AASA,QAAMC,iBAAiB,GAAGJ,2BAAOK,MAA0B;AAC3D,IAAIC,mCAAkBC,2BAAD,IAAjBD,EAA2CJ,eAA1B,KAAjBI,CAAyD;AAC7D;AACA,aAAcE,KAAD,IAAYA,KAAK,CAALA,KAAAA,GAAAA,GAAAA,GAAAA,MAAAA,GAA6B,MAAQ;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBN,eAAOO,UAAW;AAC1C,aAAaP,eAAOQ,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBR,eAAOS,WAAY;AAC3C,aAAaT,eAAOU,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBN,2BAAD,OAAjBM,EAAiB,SAAjBA,CAAyD;AAC/D;AACA;AACA;AACA;AACA,0BAA0BX,eAAOO,UAAW;AAC5C,eAAeP,eAAOY,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AA7CA,CAAA;AAgDA,QAAMC,SAAS,GAAGf,2BAAOC,GAAuB;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,mCAAkBC,2BAAD,IAAjBD,EAA2CJ,eAA1B,KAAjBI,CAAyD;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BJ,eAAOO,UAAW;AAC5C,eAAeP,eAAOQ,WAAY;AAClC;AACA;AACA;AACA;AACA,0BAA0BR,eAAOO,UAAW;AAC5C;AACA;AACA;AACA;AACA;AACA,0BAA0BP,eAAOS,WAAY;AAC7C,eAAeT,eAAOU,WAAY;AAClC;AACA;AArCA,CAAA;;AA6CA,QAAMK,mBAAmB,GAAG,CAAC;AAAA,IAAA,UAAA;AAAcD,IAAAA;AAAd,GAAD,KAAkD;AAC5E,UAAM,CAAA,cAAA,EAAA,iBAAA,IAAsCE,KAAK,CAALA,QAAAA,CAA5C,KAA4CA,CAA5C;AACA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAmB,MAAA,KAAK,EAAxB,KAAA;AAAiC,MAAA,SAAS,EAAEC,cAAc,GAAA,MAAA,GAA1D,EAAA;AAA0E,MAAA,OAAO,EAAE,MAAMC,iBAAiB,CAAC,CAAD,cAAA;AAA1G,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAKC,UAAU,CADjB,MACE,CADF,EAEGF,cAAc,GAAA,aAAG,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA;AAAW,MAAA,IAAI,EAAC;AAAhB,KAAA,CAAH,GAAA,aAA+B,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,MAAA,IAAI,EAAC;AAAlB,KAAA,CAFhD,CADF,EAAA,aAKE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAW,MAAA,KAAK,EAAhB,KAAA;AAAyB,MAAA,SAAS,EAAEA,cAAc,GAAA,MAAA,GAAY;AAA9D,KAAA,EACGE,UAAU,CAAVA,KAAAA,CAAAA,GAAAA,CAAsBC,IAAD,IAAA,aACpB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,MAAA,GAAG,EAAG,gBAAeC,IAAI,CAAJA,KAAAA,CAAWA,IAAI,CAAJA,MAAAA,KAAXA,YAAAA,CAAxB,EAAA;AAAoE,MAAA,IAAI,EAAED,IAAI,CAA9E,EAAA;AAAmF,MAAA,MAAM,EAAzF,QAAA;AAAmG,MAAA,GAAG,EAAC;AAAvG,KAAA,EACGA,IAAI,CATf,KAQQ,CADDD,CADH,CALF,CADF;AAFF,GAAA;;;AAHEL,IAAAA,K;;oBAsBF,mB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\n\nconst Wrapper = styled.div`\n width: 100%;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n`;\n\nconst DropdownLinkBlock = styled.button<{ width: number }>`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n display: ${(props) => (props.width > 768 ? 'none' : 'flex')};\n justify-content: space-between;\n width: 100%;\n height: 48px;\n background-color: transparent;\n border: none;\n padding: 0 16px;\n\n &:hover,\n .open {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.primary_700};\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:focus {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n }\n\n h3 {\n margin: auto 0;\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n .open {\n h3 {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.neutral_800};\n }\n }\n\n svg {\n margin: auto 0;\n }\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n display: none;\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n &.show {\n display: flex;\n }\n\n a {\n text-decoration: none;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n \n display: flex;\n align-items: center;\n \n padding: 0 16px;\n height: 48px;\n\n &:hover {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.primary_700};\n cursor: pointer;\n }\n\n &:focus {\n background-color: ${COLORS.neutral_20};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n`;\n\ninterface FooterNavSectionProps {\n navSection: NavSection;\n width: number;\n}\n\nconst FooterDropdownLinks = ({ navSection, width }: FooterNavSectionProps) => {\n const [dropdownActive, setDropdownActive] = React.useState<boolean>(false);\n return (\n <Wrapper>\n <DropdownLinkBlock width={width} className={dropdownActive ? 'open' : ''} onClick={() => setDropdownActive(!dropdownActive)}>\n <h3>{navSection.header}</h3>\n {dropdownActive ? <ChevronUp size=\"24px\" /> : <ChevronDown size=\"24px\" />}\n </DropdownLinkBlock>\n <LinkBlock width={width} className={dropdownActive ? 'show' : ''}>\n {navSection.links.map((item) => (\n <a key={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`} href={item.to} target=\"_blank\" rel=\"noreferrer noopener\">\n {item.label}\n </a>\n ))}\n </LinkBlock>\n </Wrapper>\n );\n};\n\nexport default FooterDropdownLinks;\n"],"file":"FooterDropdownLinks.js"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "styled-components", "../../styles", "./FooterDropdownLinks"], factory);
|
|
3
|
+
define(["exports", "prop-types", "react", "styled-components", "../../styles", "./FooterDropdownLinks", "../../styles/typography"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("./FooterDropdownLinks"));
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("./FooterDropdownLinks"), require("../../styles/typography"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.FooterDropdownLinks);
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.FooterDropdownLinks, global.typography);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _FooterDropdownLinks) {
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _FooterDropdownLinks, _typography) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -109,18 +109,13 @@
|
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
h3 {
|
|
112
|
-
|
|
113
|
-
line-height: 24px;
|
|
114
|
-
font-weight: 400;
|
|
112
|
+
${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
|
|
115
113
|
}
|
|
116
114
|
|
|
117
115
|
a {
|
|
118
|
-
color: white;
|
|
119
116
|
text-decoration: none;
|
|
120
|
-
font-size: 16px;
|
|
121
|
-
line-height: 20px;
|
|
122
|
-
font-weight: 700;
|
|
123
117
|
padding: 8px 0px;
|
|
118
|
+
${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white)}
|
|
124
119
|
}
|
|
125
120
|
`;
|
|
126
121
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Footer/Components/FooterNavSection.tsx"],"names":["NavSection","styled","section","LinkBlock","div","props","BREAKPOINTS","MEDIUM","LARGE","XLARGE","mainId","FooterNavSection","navOptions","React","window","setWidth","width","index","no","link","Math"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/Footer/Components/FooterNavSection.tsx"],"names":["NavSection","styled","section","LinkBlock","div","props","BREAKPOINTS","MEDIUM","LARGE","XLARGE","ComponentLStyling","ComponentTextStyle","ComponentSStyling","COLORS","mainId","FooterNavSection","navOptions","React","window","setWidth","width","index","no","link","Math"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,QAAMA,UAAU,GAAGC,2BAAOC,OAAQ;AAClC;AACA;AACA;AACA;AACA;AACA;AANA,CAAA;AASA,QAAMC,SAAS,GAAGF,2BAAOG,GAAuB;AAChD,aAAcC,KAAD,IAAYA,KAAK,CAALA,KAAAA,IAAAA,GAAAA,GAAAA,MAAAA,GAA8B,MAAQ;AAC/D;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA,IAAID,oBAAYE,KAAM;AACtB;AACA;AACA,IAAIF,oBAAYG,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBC,2BAAD,OAAjBD,EAAiB,SAAjBA,CAAyD;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAME,mCAAkBD,2BAAD,IAAjBC,EAA2CC,eAA1B,KAAjBD,CAAyD;AAC/D;AA3BA,CAAA;;AAmCA,QAAMG,gBAAgB,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAA2C;AAClE,UAAM,CAAA,KAAA,EAAA,QAAA,IAAoBC,KAAK,CAALA,QAAAA,CAAuBC,MAAM,CAAvD,UAA0BD,CAA1B;AACAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,eAAA,YAAA,GAAwB;AACtBE,QAAAA,QAAQ,CAACD,MAAM,CAAfC,UAAQ,CAARA;AACD;;AACDD,MAAAA,MAAM,CAANA,gBAAAA,CAAAA,QAAAA,EAAAA,YAAAA;AAJFD,KAAAA;AAOA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EACG,UAAU,CAAV,QAAA,EAAA,GAAA,CAAyB,CAAA,EAAA,EAAA,KAAA,KAAe;AACvC,aAAOG,KAAK,GAALA,GAAAA,GAAAA,aACL,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAW,QAAA,GAAG,EAAG,aAAYC,KAA7B,EAAA;AAAsC,QAAA,KAAK,EAAED;AAA7C,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAKE,EAAE,CADT,MACE,CADF,EAEG,EAAE,CAAF,KAAA,CAAA,GAAA,CAAcC,IAAD,IAAA,aACZ,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,QAAA,GAAG,EAAG,gBAAeC,IAAI,CAAJA,KAAAA,CAAWA,IAAI,CAAJA,MAAAA,KAAXA,YAAAA,CAAxB,EAAA;AAAoE,QAAA,IAAI,EAAED,IAAI,CAA9E,EAAA;AAAmF,QAAA,MAAM,EAAEA,IAAI,CAAJA,MAAAA,IAA3F,QAAA;AAAoH,QAAA,GAAG,EAAC;AAAxH,OAAA,EACGA,IAAI,CALNH,KAID,CADD,CAFH,CADKA,GAAAA,aAUL,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAqB,QAAA,GAAG,EAAG,qBAAoBC,KAA/C,EAAA;AAAwD,QAAA,UAAU,EAAlE,EAAA;AAAwE,QAAA,KAAK,EAAED;AAA/E,OAAA,CAVF;AAHN,KAEK,CADH,CADF;AATF,GAAA;;;AAHEN,IAAAA,M;;oBAgCF,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\nimport FooterDropdownLinks from './FooterDropdownLinks';\nimport {NavOptions} from '../../types';\nimport {ComponentLStyling, ComponentSStyling} from '../../styles/typography';\n\nconst NavSection = styled.section`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n flex-flow: flex-start;\n color: white;\n margin-bottom: 12px;\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n display: ${(props) => (props.width <= 768 ? 'none' : 'flex')};\n flex-direction: column;\n font-weight: normal;\n width: 100%;\n\n ${BREAKPOINTS.MEDIUM} {\n padding: 0 24px 24px 0;\n width: calc(50% - 24px);\n }\n\n ${BREAKPOINTS.LARGE} {\n width: calc(33% - 24px);\n }\n ${BREAKPOINTS.XLARGE} {\n padding: 0 32px 32px 0;\n width: calc(33% - 32px);\n }\n\n h3 {\n ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n a {\n text-decoration: none;\n padding: 8px 0px;\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n }\n`;\n\ninterface FooterNavSectionProps {\n navOptions: NavOptions;\n mainId: string;\n}\n\nconst FooterNavSection = ({ navOptions }: FooterNavSectionProps) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n return (\n <NavSection>\n {navOptions.sections?.map((no, index) => {\n return width > 768 ? (\n <LinkBlock key={`LinkBlock_${index}`} width={width}>\n <h3>{no.header}</h3>\n {no.links.map((link) => (\n <a key={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`} href={link.to} target={link.target || '_blank'} rel=\"noreferrer noopener\">\n {link.label}\n </a>\n ))}\n </LinkBlock>\n ) : (\n <FooterDropdownLinks key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n );\n })}\n </NavSection>\n );\n};\n\nexport default FooterNavSection;\n"],"file":"FooterNavSection.js"}
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
label {
|
|
101
|
-
${(0, _typography.
|
|
101
|
+
${(0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white)}
|
|
102
102
|
margin-bottom: 2px;
|
|
103
103
|
}
|
|
104
104
|
div div {
|
|
@@ -155,8 +155,8 @@
|
|
|
155
155
|
h4 {
|
|
156
156
|
margin-top: 16px;
|
|
157
157
|
margin-bottom: 8px;
|
|
158
|
-
|
|
159
|
-
|
|
158
|
+
|
|
159
|
+
${(0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, 'inherit')}
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
${_styles.BREAKPOINTS.MEDIUM} {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","
|
|
1
|
+
{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentXXSStyling","ComponentTextStyle","COLORS","NewsletterEmail","NewsletterButton","button","white","ComponentLStyling","SocialMedia","ComponentXSStyling","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","FooterNewsletterAndSocialSection","React","value","setEmailInput","e","Math"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {Facebook, Twitter, Youtube} from '../../icons/systemicons/SystemIcons';\nimport {IconButton} from '../../Button';\nimport {\n ComponentLStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../../styles/typography';\n\nconst NewsletterAndSocial = styled.section`\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n }\n`;\n\nconst NewsletterEmailSection = styled.div`\n width: 100%;\n margin: 16px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 60%;\n margin: 16px 0 0 0;\n }\n\n label {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n margin-bottom: 2px;\n }\n div div {\n width: 100%;\n ${BREAKPOINTS.MEDIUM} {\n width: calc(100% - 82px);\n width: 288px;\n }\n }\n input {\n height: 48px;\n }\n`;\n\nconst NewsletterEmail = styled.div`\n display: flex;\n flex-direction: column;\n margin-top: 2px;\n margin: 2px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 2px 0 0 0;\n flex-direction: row;\n }\n`;\n\nconst NewsletterButton = styled.button`\n background: transparent;\n width: 100%;\n height: 40px;\n border: 2px solid ${COLORS.white};\n box-sizing: border-box;\n border-radius: 8px;\n margin: 8px 0 4px 0;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n ${BREAKPOINTS.MEDIUM} {\n width: 94px;\n margin: auto 0 4px 8px;\n }\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst SocialMedia = styled.div`\n color: ${COLORS.white};\n margin: 0 auto;\n\n button div {\n box-sizing: border-box;\n border-radius: 4px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 8px;\n \n ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 auto;\n button {\n margin: 0 0 0 12px;\n }\n }\n`;\n\nconst SocialMediaButtons = styled.div`\n display: flex;\n justify-content: center;\n\n button div {\n display: flex;\n background-color: transparent;\n color: ${COLORS.white};\n margin: 0 0 0 20px;\n\n svg {\n fill: ${COLORS.white};\n path {\n fill: ${COLORS.white};\n }\n }\n\n &:first-child {\n margin: 0;\n }\n &:hover {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n }\n &:active {\n background-color: ${COLORS.primary_800};\n color: ${COLORS.primary_100};\n }\n }\n a {\n &:focus {\n outline: none;\n div {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n outline: none;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ${COLORS.neutral_600};\n }\n }\n }\n\n ${BREAKPOINTS.MEDIUM} {\n justify-content: flex-end;\n }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n actionOnNewsletterSignup?: (email: string) => void;\n newsletterLabel: string;\n placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n const [emailInput, setEmailInput] = React.useState<string>('');\n return (\n <NewsletterAndSocial>\n <NewsletterEmailSection>\n <label>{newsletterLabel}</label>\n <NewsletterEmail>\n <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n <NewsletterButton onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n </NewsletterEmail>\n </NewsletterEmailSection>\n <SocialMedia>\n <h4>Follow us on social media</h4>\n <SocialMediaButtons>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Facebook />\n </IconButton>\n </a>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Twitter />\n </IconButton>\n </a>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Youtube />\n </IconButton>\n </a>\n </SocialMediaButtons>\n </SocialMedia>\n </NewsletterAndSocial>\n );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.js"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "styled-components", "animated-scroll-to", "../../styles", "../../GlobalNavigationBar/Logo", "../../icons/systemicons/SystemIcons"], factory);
|
|
3
|
+
define(["exports", "prop-types", "react", "styled-components", "animated-scroll-to", "../../styles", "../../GlobalNavigationBar/Logo", "../../icons/systemicons/SystemIcons", "../../styles/typography"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("animated-scroll-to"), require("../../styles"), require("../../GlobalNavigationBar/Logo"), require("../../icons/systemicons/SystemIcons"));
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("animated-scroll-to"), require("../../styles"), require("../../GlobalNavigationBar/Logo"), require("../../icons/systemicons/SystemIcons"), require("../../styles/typography"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.animatedScrollTo, global.styles, global.Logo, global.SystemIcons);
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.animatedScrollTo, global.styles, global.Logo, global.SystemIcons, global.typography);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react, _styledComponents, _animatedScrollTo, _styles, _Logo, _SystemIcons) {
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _styledComponents, _animatedScrollTo, _styles, _Logo, _SystemIcons, _typography) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -107,9 +107,8 @@
|
|
|
107
107
|
cursor: pointer;
|
|
108
108
|
}
|
|
109
109
|
span {
|
|
110
|
-
font-weight: bold;
|
|
111
|
-
font-size: 14px;
|
|
112
110
|
margin: 14px auto 0 auto;
|
|
111
|
+
${(0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.UppercaseBold, 'inherit')}
|
|
113
112
|
}
|
|
114
113
|
|
|
115
114
|
&:hover:not(:disabled) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["FooterTopSection","styled","section","ToTop","div","COLORS","primary_20","primary_700","primary_500","primary_100","primary_800","sitename","showBetaTag","toTopText","FooterTop","isPressingEnter","e","action","animateScrollTo","neutral_800","white"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,QAAMA,gBAAgB,GAAGC,2BAAOC,OAAQ;AACxC;AACA;AACA;AACA;AACA;AALA,CAAA;AAQA,QAAMC,KAAK,GAAGF,2BAAOG,GAAI;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["FooterTopSection","styled","section","ToTop","div","ComponentXSStyling","ComponentTextStyle","COLORS","primary_20","primary_700","primary_500","primary_100","primary_800","sitename","showBetaTag","toTopText","FooterTop","isPressingEnter","e","action","animateScrollTo","neutral_800","white"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,QAAMA,gBAAgB,GAAGC,2BAAOC,OAAQ;AACxC;AACA;AACA;AACA;AACA;AALA,CAAA;AAQA,QAAMC,KAAK,GAAGF,2BAAOG,GAAI;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,oCAAmBC,+BAAD,aAAlBD,EAAkB,SAAlBA,CAAgE;AACtE;AACA;AACA;AACA,wBAAwBE,eAAOC,UAAW;AAC1C;AACA;AACA,cAAcD,eAAOE,WAAY;AACjC;AACA;AACA,eAAeF,eAAOE,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,8BAA8BF,eAAOG,WAAY;AACjD;AACA;AACA;AACA,kBAAkBH,eAAOI,WAAY;AACrC;AACA;AACA;AACA,cAAcJ,eAAOK,WAAY;AACjC;AACA;AACA,eAAeL,eAAOK,WAAY;AAClC;AACA;AA/CA,CAAA;;AAwDA,QAAMI,SAAS,GAAG,CAAC;AAAA,IAAA,QAAA;AAAA,IAAA,WAAA;AAAyBD,IAAAA;AAAzB,GAAD,KAA0D;AAC1E,UAAME,eAAe,GAAIC,CAAD,IAAY;AAClC,UAAIA,CAAC,CAADA,GAAAA,KAAJ,OAAA,EAAuB;AACrBA,QAAAA,CAAC,CAADA,cAAAA;AACAA,QAAAA,CAAC,CAADA,eAAAA;AACA,eAAA,IAAA;AACD;;AACD,aAAA,KAAA;AANF,KAAA;;AAQA,UAAMC,MAAM,GAAG,MAAM;AACnBC,sCAAAA,CAAAA;AADF,KAAA;;AAGA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AACE,MAAA,IAAI,EAAEP,QAAQ,IADhB,EAAA;AAEE,MAAA,WAAW,EAFb,WAAA;AAGE,MAAA,KAAK,EAAEN,eAHT,KAAA;AAIE,MAAA,oBAAoB,EAJtB,IAAA;AAKE,MAAA,sBAAsB,EAAEA,eAL1B,KAAA;AAME,MAAA,YAAY,EAAEA,eAAOc;AANvB,KAAA,CADF,EAAA,aASE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAO,MAAA,QAAQ,EAAf,CAAA;AAAoB,MAAA,SAAS,EAAGH,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAqBE,MAArBF,EAAAA,GAA5C,IAAA;AAAmF,MAAA,OAAO,EAAEE;AAA5F,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,MAAA,IAAI,EAAjB,MAAA;AAAyB,MAAA,KAAK,EAAEZ,eAAOe;AAAvC,KAAA,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAZN,SAYM,CAFF,CATF,CADF;AAZF,GAAA;;;AALET,IAAAA,Q;AACAC,IAAAA,W;AACAC,IAAAA,S;;oBAiCF,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport animateScrollTo from 'animated-scroll-to';\n\nimport {COLORS} from '../../styles';\nimport Logo from '../../GlobalNavigationBar/Logo';\nimport {ArrowLineUp} from '../../icons/systemicons/SystemIcons';\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles/typography';\n\nconst FooterTopSection = styled.section`\n min-height: 8px;\n color: white;\n display: flex;\n flex-direction: row;\n margin-bottom: 16px;\n`;\n\nconst ToTop = styled.div`\n display: flex;\n flex-direction: column;\n margin: auto 0 auto auto;\n border-radius: 4px;\n height: 48px;\n width: 48px;\n padding: 8px;\n\n svg {\n margin: 0 auto;\n }\n\n &:hover {\n cursor: pointer;\n }\n span {\n margin: 14px auto 0 auto;\n ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\n }\n\n &:hover:not(:disabled) {\n background-color: ${COLORS.primary_20};\n svg path,\n svg {\n fill: ${COLORS.primary_700};\n }\n span {\n color: ${COLORS.primary_700};\n }\n }\n\n &:focus:not(:disabled) {\n outline: none;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n\n &:active:not(:disabled) {\n background: ${COLORS.primary_100};\n box-shadow: none;\n svg path,\n svg {\n fill: ${COLORS.primary_800};\n }\n span {\n color: ${COLORS.primary_800};\n }\n }\n`;\n\ninterface FooterTopProps {\n sitename?: string;\n showBetaTag?: boolean;\n toTopText: string;\n}\n\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n const action = () => {\n animateScrollTo(0);\n };\n return (\n <FooterTopSection>\n <Logo\n name={sitename || ''}\n showBetaTag={showBetaTag}\n color={COLORS.white}\n noSizeChangeOnMobile={true}\n betaTagBackgroundColor={COLORS.white}\n betaTagColor={COLORS.neutral_800}\n />\n <ToTop tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\n <ArrowLineUp size=\"24px\" color={COLORS.white} />\n <span>{toTopText}</span>\n </ToTop>\n </FooterTopSection>\n );\n};\n\nexport default FooterTop;\n"],"file":"FooterTop.js"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../assets", "../styles"], factory);
|
|
3
|
+
define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../assets", "../styles", "../styles/typography"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../assets"), require("../styles"));
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../assets"), require("../styles"), require("../styles/typography"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.assets, global.styles);
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.assets, global.styles, global.typography);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _assets, _styles) {
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _assets, _styles, _typography) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -119,27 +119,23 @@
|
|
|
119
119
|
margin-left: 12px;
|
|
120
120
|
padding-left: 12px;
|
|
121
121
|
border-left: 1px solid ${props => props.color || _styles.COLORS.black};
|
|
122
|
-
font-style: normal;
|
|
123
|
-
font-weight: 300;
|
|
124
|
-
font-size: ${props => props.noSizeChangeOnMobile ? '18px' : '14px'};
|
|
125
|
-
line-height: 140%;
|
|
126
122
|
letter-spacing: -0.02em;
|
|
127
|
-
|
|
123
|
+
|
|
124
|
+
${props => props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black)}
|
|
128
125
|
|
|
129
126
|
${_styles.BREAKPOINTS.MEDIUM} {
|
|
130
|
-
|
|
127
|
+
${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black)}
|
|
131
128
|
}
|
|
132
129
|
`;
|
|
133
130
|
const BetaTag = _styledComponents2.default.span`
|
|
134
131
|
background-color: ${props => props.backgroundColor || _styles.COLORS.accent2_500};
|
|
135
|
-
color: ${props => props.color || _styles.COLORS.white};
|
|
136
|
-
font-weight: bold;
|
|
137
|
-
font-size: 10px;
|
|
138
132
|
padding: 4px;
|
|
139
|
-
line-height: 12px;
|
|
140
133
|
margin-left: 8px;
|
|
141
134
|
margin-top: 2px;
|
|
142
135
|
border-left: none;
|
|
136
|
+
border-radius: 2px;
|
|
137
|
+
|
|
138
|
+
${props => (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.color || _styles.COLORS.white)}
|
|
143
139
|
`;
|
|
144
140
|
|
|
145
141
|
const Logo = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","styled","props","color","BREAKPOINTS","MEDIUM","LogoContainer","div","Name","span","COLORS","black","
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","styled","props","color","BREAKPOINTS","MEDIUM","LogoContainer","div","Name","span","COLORS","black","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","BetaTag","accent2_500","name","showBetaTag","onClick","to","noSizeChangeOnMobile","betaTagBackgroundColor","betaTagColor","Logo","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ${(props) => props.color};\n ${BREAKPOINTS.MEDIUM} {\n width: 88px;\n height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 12px;\n padding-left: 12px;\n border-left: 1px solid ${(props) => props.color || COLORS.black};\n letter-spacing: -0.02em;\n\n ${(props) => props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n padding: 4px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer>\n <StyledLink\n to={to || '/'}\n onMouseDown={(e: any) => e.preventDefault()}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
|