@asd20/ui 3.2.430 → 3.2.431
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/package.json +1 -1
- package/src/components/organisms/Asd20ImageHeader/index.vue +22 -3
- package/src/components/templates/Asd20DistrictVideoTemplate/index.vue +2 -2
- package/src/components/templates/Asd20WayfindingAlternateTemplate/index.stories.js +65 -0
- package/src/components/templates/Asd20WayfindingAlternateTemplate/index.vue +253 -0
- package/src/components/templates/Asd20WayfindingImageTemplate/index.vue +3 -0
package/package.json
CHANGED
|
@@ -71,6 +71,12 @@
|
|
|
71
71
|
v-if="publishDateTime"
|
|
72
72
|
:dateTime="publishDateTime"
|
|
73
73
|
/>
|
|
74
|
+
<br />
|
|
75
|
+
<span v-if="modifiedDateTime" class="date-prefix">Updated:</span>
|
|
76
|
+
<asd20-formatted-date
|
|
77
|
+
v-if="modifiedDateTime"
|
|
78
|
+
:dateTime="modifiedDateTime"
|
|
79
|
+
/>
|
|
74
80
|
<asd20-tag-group v-if="categories.length" :tags="categories" />
|
|
75
81
|
<slot name="meta" />
|
|
76
82
|
</div>
|
|
@@ -462,9 +468,9 @@ export default {
|
|
|
462
468
|
width: 100%;
|
|
463
469
|
height: 100%;
|
|
464
470
|
background: linear-gradient(
|
|
465
|
-
|
|
471
|
+
30deg,
|
|
466
472
|
rgba(6, 11, 31, 0.7) 10%,
|
|
467
|
-
rgba(6, 11, 31, 0.5)
|
|
473
|
+
rgba(6, 11, 31, 0.5) 50%,
|
|
468
474
|
transparent 70%
|
|
469
475
|
);
|
|
470
476
|
}
|
|
@@ -478,7 +484,7 @@ export default {
|
|
|
478
484
|
left: 0;
|
|
479
485
|
}
|
|
480
486
|
&__title-content {
|
|
481
|
-
max-width:
|
|
487
|
+
max-width: 80%;
|
|
482
488
|
}
|
|
483
489
|
|
|
484
490
|
&::after {
|
|
@@ -523,6 +529,16 @@ export default {
|
|
|
523
529
|
|
|
524
530
|
@media (min-width: 1024px) {
|
|
525
531
|
.asd20-image-header {
|
|
532
|
+
.add-fade {
|
|
533
|
+
&::before {
|
|
534
|
+
background: linear-gradient(
|
|
535
|
+
70deg,
|
|
536
|
+
rgba(6, 11, 31, 0.7) 10%,
|
|
537
|
+
rgba(6, 11, 31, 0.5) 40%,
|
|
538
|
+
transparent 70%
|
|
539
|
+
);
|
|
540
|
+
}
|
|
541
|
+
}
|
|
526
542
|
&::v-deep .asd20-picker {
|
|
527
543
|
display: flex;
|
|
528
544
|
margin: space(1) auto space(1) 0;
|
|
@@ -550,6 +566,9 @@ export default {
|
|
|
550
566
|
order: 2;
|
|
551
567
|
}
|
|
552
568
|
}
|
|
569
|
+
&__title-content {
|
|
570
|
+
max-width: 50%;
|
|
571
|
+
}
|
|
553
572
|
|
|
554
573
|
.back {
|
|
555
574
|
padding: 0;
|
|
@@ -88,10 +88,10 @@
|
|
|
88
88
|
<slot name="page-footer" />
|
|
89
89
|
|
|
90
90
|
<!-- analytics requested by Kyle Blakely -->
|
|
91
|
-
<img
|
|
91
|
+
<!-- <img
|
|
92
92
|
src="https://jelly.mdhv.io/v1/star.gif?pid=ipUavA655F50RvTSoYZIJU2vFFFB&src=mh&evt=hi"
|
|
93
93
|
alt=""
|
|
94
|
-
/>
|
|
94
|
+
/> -->
|
|
95
95
|
</asd20-page-footer>
|
|
96
96
|
</div>
|
|
97
97
|
</template>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { storiesOf } from '@storybook/vue'
|
|
2
|
+
import { withKnobs, boolean } from '@storybook/addon-knobs'
|
|
3
|
+
|
|
4
|
+
import mockPageMixin from '../../../mixins/mockPageMixin'
|
|
5
|
+
|
|
6
|
+
import Asd20WayfindingAlternateTemplate from '.'
|
|
7
|
+
import pageQueryResult from '../../../data/page-queries/landing-page-query-result.json'
|
|
8
|
+
import notifications from '../../../data/messages/notifications'
|
|
9
|
+
|
|
10
|
+
const info = {
|
|
11
|
+
summary: 'Wayfinding Alternate Page Template',
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const wrapper = {
|
|
15
|
+
mixins: [mockPageMixin],
|
|
16
|
+
components: {
|
|
17
|
+
Asd20WayfindingAlternateTemplate,
|
|
18
|
+
},
|
|
19
|
+
watch: {
|
|
20
|
+
languageCode(newValue, oldValue) {
|
|
21
|
+
console.log(newValue, oldValue)
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
|
|
25
|
+
data: () => ({ pageQueryResult, languageCode: 'es' }),
|
|
26
|
+
|
|
27
|
+
computed: {
|
|
28
|
+
activeNotificationsByType() {
|
|
29
|
+
const empty = {
|
|
30
|
+
inline: [],
|
|
31
|
+
banner: [],
|
|
32
|
+
floating: [],
|
|
33
|
+
status: [],
|
|
34
|
+
}
|
|
35
|
+
return boolean('Show Notifications', true)
|
|
36
|
+
? notifications || empty
|
|
37
|
+
: empty
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
const stories = storiesOf('Templates - Asd20WayfindingAlternateTemplate', module)
|
|
44
|
+
stories.addDecorator(withKnobs)
|
|
45
|
+
|
|
46
|
+
stories.add(
|
|
47
|
+
'Default',
|
|
48
|
+
() => ({
|
|
49
|
+
...wrapper,
|
|
50
|
+
template: `
|
|
51
|
+
<Asd20WayfindingAlternateTemplate
|
|
52
|
+
v-bind="templateProps"
|
|
53
|
+
:menu-open.sync="menuOpen"
|
|
54
|
+
:search-open.sync="searchOpen"
|
|
55
|
+
|
|
56
|
+
@announcements-in-view="loadAnnouncements"
|
|
57
|
+
@stories-in-view="loadStories"
|
|
58
|
+
@events-in-view="loadEvents"
|
|
59
|
+
@files-in-view="loadFiles"
|
|
60
|
+
@people-in-view="loadPeople"
|
|
61
|
+
:languageCode.sync="languageCode"
|
|
62
|
+
/>`,
|
|
63
|
+
}),
|
|
64
|
+
{ info }
|
|
65
|
+
)
|
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="asd20-template-wayfinding-alternate">
|
|
3
|
+
<!-- Skip Nav -->
|
|
4
|
+
<asd20-skip-to></asd20-skip-to>
|
|
5
|
+
|
|
6
|
+
<!-- Site Navigation -->
|
|
7
|
+
<asd20-site-navigation
|
|
8
|
+
:navigation="navigation"
|
|
9
|
+
:action-items="actionItems"
|
|
10
|
+
@update:menuOpen="$emit('update:menuOpen', $event)"
|
|
11
|
+
:menu-open="menuOpen"
|
|
12
|
+
@update:searchOpen="$emit('update:searchOpen', $event)"
|
|
13
|
+
:search-open="searchOpen"
|
|
14
|
+
:organization="organization"
|
|
15
|
+
:organization-options="organizationOptions"
|
|
16
|
+
>
|
|
17
|
+
</asd20-site-navigation>
|
|
18
|
+
|
|
19
|
+
<!-- Banner Notifications -->
|
|
20
|
+
<client-only>
|
|
21
|
+
<asd20-notification-group
|
|
22
|
+
:notifications="activeNotificationsByType.banner"
|
|
23
|
+
group-type="banner"
|
|
24
|
+
@dismiss="$emit('dismiss-notification', $event)"
|
|
25
|
+
@toggle-all="$emit('toggle-all')"
|
|
26
|
+
></asd20-notification-group>
|
|
27
|
+
</client-only>
|
|
28
|
+
|
|
29
|
+
<!-- Page Header -->
|
|
30
|
+
<asd20-page-header
|
|
31
|
+
id="page-header"
|
|
32
|
+
v-show="pageHeaderContent"
|
|
33
|
+
v-bind="pageHeaderContent"
|
|
34
|
+
:organization="organization"
|
|
35
|
+
:organization-options="organizationOptions"
|
|
36
|
+
:languageCode="languageCode"
|
|
37
|
+
v-on="$listeners"
|
|
38
|
+
:breadcrumb-links="breadcrumbLinks"
|
|
39
|
+
>
|
|
40
|
+
<!-- Floating Notifications -->
|
|
41
|
+
<template slot="top">
|
|
42
|
+
<client-only>
|
|
43
|
+
<asd20-notification-group
|
|
44
|
+
class="asd20-notification-group--floating"
|
|
45
|
+
:notifications="activeNotificationsByType.floating"
|
|
46
|
+
:total-dismissed-notifications="totalDismissedNotifications"
|
|
47
|
+
group-type="floating"
|
|
48
|
+
@dismiss="$emit('dismiss-notification', $event)"
|
|
49
|
+
@toggle-all="$emit('toggle-all')"
|
|
50
|
+
></asd20-notification-group>
|
|
51
|
+
</client-only>
|
|
52
|
+
</template>
|
|
53
|
+
<!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
|
|
54
|
+
</asd20-page-header>
|
|
55
|
+
|
|
56
|
+
<!-- Page Content -->
|
|
57
|
+
<asd20-page-content
|
|
58
|
+
:primary-messages="wayFindingPrimaryMessages"
|
|
59
|
+
:secondary-messages="secondaryMessages"
|
|
60
|
+
omit-body-content
|
|
61
|
+
grid
|
|
62
|
+
>
|
|
63
|
+
<!-- Inline-Notifications -->
|
|
64
|
+
<template slot="before">
|
|
65
|
+
<client-only>
|
|
66
|
+
<asd20-notification-group
|
|
67
|
+
:notifications="activeNotificationsByType.inline"
|
|
68
|
+
group-type="inline"
|
|
69
|
+
@dismiss="$emit('dismiss-notification', $event)"
|
|
70
|
+
@toggle-all="$emit('toggle-all')"
|
|
71
|
+
></asd20-notification-group>
|
|
72
|
+
</client-only>
|
|
73
|
+
</template>
|
|
74
|
+
<!-- Feeds -->
|
|
75
|
+
<template slot="before">
|
|
76
|
+
<asd20-feeds-section
|
|
77
|
+
:announcements="announcements"
|
|
78
|
+
:announcements-feed-props="announcementsFeedProps"
|
|
79
|
+
@announcements-in-view="$emit('announcements-in-view')"
|
|
80
|
+
:stories="stories"
|
|
81
|
+
:stories-feed-props="storiesFeedProps"
|
|
82
|
+
@stories-in-view="$emit('stories-in-view')"
|
|
83
|
+
:events="events"
|
|
84
|
+
:events-feed-props="eventsFeedProps"
|
|
85
|
+
@events-in-view="$emit('events-in-view')"
|
|
86
|
+
></asd20-feeds-section>
|
|
87
|
+
</template>
|
|
88
|
+
|
|
89
|
+
<slot></slot>
|
|
90
|
+
</asd20-page-content>
|
|
91
|
+
|
|
92
|
+
<!-- Bottom Widgets -->
|
|
93
|
+
<asd20-widgets-section
|
|
94
|
+
v-if="
|
|
95
|
+
widgetsSectionProps.footer ||
|
|
96
|
+
widgetsSectionProps.sidebar ||
|
|
97
|
+
$slots.widgets
|
|
98
|
+
"
|
|
99
|
+
v-bind="{ ...widgetsSectionProps.footer, ...widgetsSectionProps.sidebar }"
|
|
100
|
+
@events-in-view="$emit('events-in-view')"
|
|
101
|
+
@files-in-view="$emit('files-in-view')"
|
|
102
|
+
@people-in-view="$emit('people-in-view')"
|
|
103
|
+
full
|
|
104
|
+
><slot name="widgets"
|
|
105
|
+
/></asd20-widgets-section>
|
|
106
|
+
|
|
107
|
+
<slot name="before-footer" />
|
|
108
|
+
|
|
109
|
+
<!-- Quick Links -->
|
|
110
|
+
<asd20-quicklinks-menu slot="before-footer" :quick-links="quickLinks">
|
|
111
|
+
<slot name="quicklinks-menu" />
|
|
112
|
+
</asd20-quicklinks-menu>
|
|
113
|
+
|
|
114
|
+
<!-- Footer -->
|
|
115
|
+
<asd20-page-footer
|
|
116
|
+
:organization="organization"
|
|
117
|
+
:socialLinks="socialLinks"
|
|
118
|
+
:disclosureLinks="disclosureLinks"
|
|
119
|
+
:websiteLogoProps="websiteLogoProps"
|
|
120
|
+
>
|
|
121
|
+
<slot name="page-footer" />
|
|
122
|
+
</asd20-page-footer>
|
|
123
|
+
</div>
|
|
124
|
+
</template>
|
|
125
|
+
|
|
126
|
+
<script>
|
|
127
|
+
// Components
|
|
128
|
+
import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
|
|
129
|
+
import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
|
|
130
|
+
|
|
131
|
+
import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
|
|
132
|
+
import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
|
|
133
|
+
|
|
134
|
+
import Asd20WidgetsSection from '../../../components/organisms/Asd20WidgetsSection'
|
|
135
|
+
import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
|
|
136
|
+
// import Asd20MediaSection from '../../../components/organisms/Asd20MediaSection'
|
|
137
|
+
|
|
138
|
+
import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
|
|
139
|
+
import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
|
|
140
|
+
import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
|
|
141
|
+
|
|
142
|
+
// import Intersect from 'vue-intersect'
|
|
143
|
+
|
|
144
|
+
// Mixins
|
|
145
|
+
import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
|
|
146
|
+
|
|
147
|
+
export default {
|
|
148
|
+
name: 'Asd20WayfindingAlternateTemplate',
|
|
149
|
+
mixins: [pageTemplateMixin],
|
|
150
|
+
components: {
|
|
151
|
+
Asd20PageContent,
|
|
152
|
+
Asd20SkipTo,
|
|
153
|
+
Asd20PageHeader,
|
|
154
|
+
Asd20PageFooter,
|
|
155
|
+
Asd20SiteNavigation,
|
|
156
|
+
Asd20WidgetsSection,
|
|
157
|
+
Asd20FeedsSection,
|
|
158
|
+
Asd20NotificationGroup,
|
|
159
|
+
Asd20QuicklinksMenu,
|
|
160
|
+
// Asd20MediaSection,
|
|
161
|
+
},
|
|
162
|
+
computed: {
|
|
163
|
+
wayFindingPrimaryMessages() {
|
|
164
|
+
// wayfinding page
|
|
165
|
+
return (
|
|
166
|
+
this.messages
|
|
167
|
+
// Remove the first message, limit
|
|
168
|
+
.slice(
|
|
169
|
+
1,
|
|
170
|
+
Math.min(this.messages.length, this.primaryMessageLimit + 1)
|
|
171
|
+
)
|
|
172
|
+
)
|
|
173
|
+
},
|
|
174
|
+
},
|
|
175
|
+
}
|
|
176
|
+
</script>
|
|
177
|
+
|
|
178
|
+
<style lang="scss">
|
|
179
|
+
@import '../../../design/_variables.scss';
|
|
180
|
+
@import '../../../design/_mixins.scss';
|
|
181
|
+
@import '../../../design/_typography.scss';
|
|
182
|
+
@import '../../../design/_template.scss';
|
|
183
|
+
@import '../../../design/_print.scss';
|
|
184
|
+
@import '../../../design/tokens.css';
|
|
185
|
+
|
|
186
|
+
.asd20-template-wayfinding-alternate {
|
|
187
|
+
@include typography;
|
|
188
|
+
@include template;
|
|
189
|
+
display: flex;
|
|
190
|
+
flex-direction: column;
|
|
191
|
+
flex-grow: 1;
|
|
192
|
+
flex-shrink: 0;
|
|
193
|
+
overflow: hidden;
|
|
194
|
+
margin-top: space(2.25);
|
|
195
|
+
.asd20-notification-group--floating {
|
|
196
|
+
position: absolute;
|
|
197
|
+
top: space(2);
|
|
198
|
+
.bell {
|
|
199
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
|
|
200
|
+
svg {
|
|
201
|
+
fill: var(--color__accent) !important;
|
|
202
|
+
}
|
|
203
|
+
span {
|
|
204
|
+
background: var(--color__accent) !important;
|
|
205
|
+
top: inherit !important;
|
|
206
|
+
right: inherit !important;
|
|
207
|
+
width: 1.2rem !important;
|
|
208
|
+
height: 1.2rem !important;
|
|
209
|
+
font-size: 0.75rem !important;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
.asd20-feeds-section {
|
|
214
|
+
margin-top: space(2);
|
|
215
|
+
.asd20-swiper-feed:first-child {
|
|
216
|
+
padding-top: space(2);
|
|
217
|
+
padding-bottom: space(1);
|
|
218
|
+
&::after {
|
|
219
|
+
top: space(1);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
.asd20-swiper-feed:last-child {
|
|
223
|
+
// margin-top: space(-1);
|
|
224
|
+
padding-bottom: space(2);
|
|
225
|
+
&::after {
|
|
226
|
+
bottom: space(1);
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
@media (min-width: 1024px) {
|
|
233
|
+
.asd20-template-wayfinding-alternate {
|
|
234
|
+
.asd20-notification-group--floating {
|
|
235
|
+
position: absolute;
|
|
236
|
+
top: space(1);
|
|
237
|
+
// .bell {
|
|
238
|
+
// span {
|
|
239
|
+
// background: var(--color__accent);
|
|
240
|
+
// top: -0.6em !important;
|
|
241
|
+
// right: -0.6em !important;
|
|
242
|
+
// }
|
|
243
|
+
// }
|
|
244
|
+
}
|
|
245
|
+
@include template-desktop;
|
|
246
|
+
margin-left: space(3);
|
|
247
|
+
margin-top: 0;
|
|
248
|
+
.asd20-page-content {
|
|
249
|
+
margin-top: space(0);
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
</style>
|
|
@@ -70,6 +70,7 @@
|
|
|
70
70
|
></asd20-notification-group>
|
|
71
71
|
</client-only>
|
|
72
72
|
</template>
|
|
73
|
+
<!-- Announcement Feed -->
|
|
73
74
|
<template slot="before">
|
|
74
75
|
<asd20-feeds-section
|
|
75
76
|
:announcements="announcements"
|
|
@@ -80,6 +81,8 @@
|
|
|
80
81
|
|
|
81
82
|
<slot></slot>
|
|
82
83
|
</asd20-page-content>
|
|
84
|
+
|
|
85
|
+
<!-- Feeds -->
|
|
83
86
|
<asd20-feeds-section
|
|
84
87
|
:stories="stories"
|
|
85
88
|
:stories-feed-props="storiesFeedProps"
|