@asd20/ui 3.2.428 → 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 CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.428",
8
+ "version": "3.2.431",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
@@ -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
- 70deg,
471
+ 30deg,
466
472
  rgba(6, 11, 31, 0.7) 10%,
467
- rgba(6, 11, 31, 0.5) 40%,
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: 50%;
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>
@@ -52,13 +52,6 @@
52
52
  </template>
53
53
  <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
54
54
  </asd20-image-header>
55
-
56
- <asd20-feeds-section
57
- :announcements="announcements"
58
- :announcements-feed-props="announcementsFeedProps"
59
- @announcements-in-view="$emit('announcements-in-view')"
60
- ></asd20-feeds-section>
61
-
62
55
  <!-- Page Content -->
63
56
  <asd20-page-content
64
57
  :primary-messages="wayFindingPrimaryMessages"
@@ -77,10 +70,19 @@
77
70
  ></asd20-notification-group>
78
71
  </client-only>
79
72
  </template>
73
+ <!-- Announcement Feed -->
74
+ <template slot="before">
75
+ <asd20-feeds-section
76
+ :announcements="announcements"
77
+ :announcements-feed-props="announcementsFeedProps"
78
+ @announcements-in-view="$emit('announcements-in-view')"
79
+ ></asd20-feeds-section>
80
+ </template>
80
81
 
81
82
  <slot></slot>
82
83
  </asd20-page-content>
83
84
 
85
+ <!-- Feeds -->
84
86
  <asd20-feeds-section
85
87
  :stories="stories"
86
88
  :stories-feed-props="storiesFeedProps"
@@ -211,10 +213,52 @@ export default {
211
213
  }
212
214
  }
213
215
  }
216
+ .asd20-page-content {
217
+ .notification-group--inline {
218
+ margin-bottom: space(1);
219
+ }
220
+ .asd20-feeds-section {
221
+ margin-top: space(2);
222
+ .asd20-swiper-feed:first-child {
223
+ padding-top: space(2);
224
+ padding-bottom: space(1);
225
+ &::after {
226
+ top: space(1);
227
+ }
228
+ }
229
+ .asd20-swiper-feed:last-child {
230
+ // margin-top: space(-1);
231
+ padding-bottom: space(2);
232
+ &::after {
233
+ bottom: space(1);
234
+ }
235
+ }
236
+ }
237
+ }
238
+ .asd20-feeds-section {
239
+ margin-top: space(1);
240
+ .asd20-swiper-feed:first-child {
241
+ padding-top: space(2);
242
+ padding-bottom: space(1);
243
+ &::after {
244
+ top: space(1);
245
+ }
246
+ }
247
+ .asd20-swiper-feed:last-child {
248
+ // margin-top: space(-1);
249
+ padding-bottom: space(2);
250
+ &::after {
251
+ bottom: space(1);
252
+ }
253
+ }
254
+ }
214
255
  }
215
256
 
216
257
  @media (min-width: 1024px) {
217
258
  .asd20-template-wayfinding-image {
259
+ @include template-desktop;
260
+ margin-left: space(3);
261
+ margin-top: space(0);
218
262
  .asd20-notification-group--floating {
219
263
  position: absolute;
220
264
  top: space(1);
@@ -226,11 +270,15 @@ export default {
226
270
  // }
227
271
  // }
228
272
  }
229
- @include template-desktop;
230
- margin-left: space(3);
231
- margin-top: 0;
232
273
  .asd20-page-content {
233
- margin-top: space(0);
274
+ .notification-group--inline {
275
+ flex-basis: 100%;
276
+ margin: space(2) space(3) space(0) space(3);
277
+
278
+ .notification:last-child {
279
+ margin-bottom: space(1);
280
+ }
281
+ }
234
282
  }
235
283
  }
236
284
  }
@@ -2292,7 +2292,7 @@
2292
2292
  "id": "f42b1984-29f1-419b-a23a-3245c6647b3e",
2293
2293
  "title": "Announcement Feed",
2294
2294
  "type": "text",
2295
- "value": null,
2295
+ "value": "[{\"title\":\"District Announcements\",\"link\":\"/district-announcements\",\"keywords\":\"\",\"categories\":[],\"tags\":[\"District Homepage\"],\"organizations\":[\"26eaf390-d8ab-11e9-a3a8-5de5bba4f125\"]}]",
2296
2296
  "validationPattern": null,
2297
2297
  "required": false
2298
2298
  },