@asd20/ui 3.2.822 → 3.2.823

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.822",
8
+ "version": "3.2.823",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
@@ -86,6 +86,34 @@ export default {
86
86
  width: 60%;
87
87
  }
88
88
  }
89
+ &--fullpage {
90
+ --width: 100%;
91
+ --height: 2%;
92
+ border-radius: var(--website-shape__radius);
93
+ &__content {
94
+ min-height: 10vh;
95
+ }
96
+ &::before,
97
+ &::after {
98
+ content: '';
99
+ display: block;
100
+ position: absolute;
101
+ background: white;
102
+ left: space(1);
103
+ z-index: 1;
104
+ border-radius: 3px;
105
+ }
106
+ &::before {
107
+ bottom: space(2);
108
+ height: space(0.5);
109
+ width: 80%;
110
+ }
111
+ &::after {
112
+ bottom: space(1);
113
+ height: space(0.5);
114
+ width: 60%;
115
+ }
116
+ }
89
117
  }
90
118
 
91
119
  @keyframes skeleton {
@@ -1,34 +1,38 @@
1
1
  <template>
2
2
  <div class="asd20-district-home-template">
3
3
  <!-- Skip Nav -->
4
- <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>
4
+ <div>
5
+ <asd20-skeleton v-if="!_isAuthenticated" preset="fullpage"/>
6
+ <div v-else>
7
+ <!-- Skip Nav -->
8
+ <asd20-skip-to />
9
+
10
+ <!-- Site Navigation -->
11
+ <asd20-site-navigation
12
+ :navigation="navigation"
13
+ :action-items="actionItems"
14
+ @update:menuOpen="$emit('update:menuOpen', $event)"
15
+ :menu-open="menuOpen"
16
+ @update:searchOpen="$emit('update:searchOpen', $event)"
17
+ :search-open="searchOpen"
18
+ :organization="organization"
19
+ :organization-options="organizationOptions"
20
+ >
21
+ </asd20-site-navigation>
18
22
 
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>
23
+ <!-- Banner Notifications -->
24
+ <client-only>
25
+ <asd20-notification-group
26
+ :notifications="activeNotificationsByType.banner"
27
+ group-type="banner"
28
+ @dismiss="$emit('dismiss-notification', $event)"
29
+ @toggle-all="$emit('toggle-all')"
30
+ ></asd20-notification-group>
31
+ </client-only>
28
32
 
29
- <!-- Page Header -->
33
+ <!-- Page Header -->
30
34
 
31
- <!-- <asd20-choice-header
35
+ <!-- <asd20-choice-header
32
36
  id="page-header"
33
37
  v-if="pageHeaderContent"
34
38
  v-bind="pageHeaderContent"
@@ -58,66 +62,66 @@
58
62
  </template>
59
63
  </asd20-choice-header> -->
60
64
 
61
- <!-- Headers -->
62
- <section class="logo-header">
63
- <client-only>
64
- <asd20-organization-picker
65
- :organization-options="organizationOptions"
66
- :organization="organization"
67
- ></asd20-organization-picker>
68
- </client-only>
69
- <slot name="top" />
70
- <template>
71
- <div
72
- :class="
73
- activeNotificationsByType.floating.length > 0
74
- ? 'double-notification-wrapper'
75
- : 'notification-wrapper'
76
- "
77
- >
65
+ <!-- Headers -->
66
+ <section class="logo-header">
78
67
  <client-only>
79
- <a
80
- class="weather-link"
81
- href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
82
- >
83
- <asd20-notification-group
84
- :notifications="activeNotificationsByType.status"
85
- group-type="status"
86
- @dismiss="$emit('dismiss-notification', $event)"
87
- @toggle-all="$emit('toggle-all')"
88
- />
89
- </a>
68
+ <asd20-organization-picker
69
+ :organization-options="organizationOptions"
70
+ :organization="organization"
71
+ ></asd20-organization-picker>
90
72
  </client-only>
91
-
92
- <client-only>
93
- <Asd20LanguageTranslation
73
+ <slot name="top" />
74
+ <template>
75
+ <div
94
76
  :class="
95
- activeNotificationsByType.status.length > 0
96
- ? ''
97
- : 'translation-button-adjust'
77
+ activeNotificationsByType.floating.length > 0
78
+ ? 'double-notification-wrapper'
79
+ : 'notification-wrapper'
98
80
  "
99
- v-if="languageCode"
100
- reversed
101
- :languageCode="languageCode"
102
- v-on="$listeners"
103
- />
104
- </client-only>
105
-
106
- <client-only>
107
- <asd20-notification-group
108
- class="asd20-notification-group--floating"
109
- :notifications="activeNotificationsByType.floating"
110
- :total-dismissed-notifications="totalDismissedNotifications"
111
- group-type="floating"
112
- @dismiss="$emit('dismiss-notification', $event)"
113
- @toggle-all="$emit('toggle-all')"
114
- ></asd20-notification-group>
115
- </client-only>
116
- </div>
117
- </template>
118
- </section>
119
-
120
- <!-- <asd20-primary-header
81
+ >
82
+ <client-only>
83
+ <a
84
+ class="weather-link"
85
+ href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
86
+ >
87
+ <asd20-notification-group
88
+ :notifications="activeNotificationsByType.status"
89
+ group-type="status"
90
+ @dismiss="$emit('dismiss-notification', $event)"
91
+ @toggle-all="$emit('toggle-all')"
92
+ />
93
+ </a>
94
+ </client-only>
95
+
96
+ <client-only>
97
+ <Asd20LanguageTranslation
98
+ :class="
99
+ activeNotificationsByType.status.length > 0
100
+ ? ''
101
+ : 'translation-button-adjust'
102
+ "
103
+ v-if="languageCode"
104
+ reversed
105
+ :languageCode="languageCode"
106
+ v-on="$listeners"
107
+ />
108
+ </client-only>
109
+
110
+ <client-only>
111
+ <asd20-notification-group
112
+ class="asd20-notification-group--floating"
113
+ :notifications="activeNotificationsByType.floating"
114
+ :total-dismissed-notifications="totalDismissedNotifications"
115
+ group-type="floating"
116
+ @dismiss="$emit('dismiss-notification', $event)"
117
+ @toggle-all="$emit('toggle-all')"
118
+ ></asd20-notification-group>
119
+ </client-only>
120
+ </div>
121
+ </template>
122
+ </section>
123
+
124
+ <!-- <asd20-primary-header
121
125
  id="page-header"
122
126
  heading="Apply for School Choice"
123
127
  lead="We are now accepting applications for students living in, and out of, our district for the 2022-23 school year."
@@ -134,7 +138,7 @@
134
138
  >
135
139
  </asd20-primary-header> -->
136
140
 
137
- <!-- <asd20-secondary-header
141
+ <!-- <asd20-secondary-header
138
142
  heading="Register for Kindergarten"
139
143
  lead="Early Kindergarten registration is now open."
140
144
  :call-to-action="{
@@ -143,7 +147,7 @@
143
147
  }"
144
148
  ></asd20-secondary-header> -->
145
149
 
146
- <!-- <asd20-tertiary-header
150
+ <!-- <asd20-tertiary-header
147
151
  heading="Attend our Job Fair"
148
152
  lead="We're hiring and hope you can attend our Job Fair on March 5, 2022, from 9 a.m. – 3 p.m."
149
153
  :call-to-action="{
@@ -152,11 +156,17 @@
152
156
  label: 'Register for our Job Fair',
153
157
  }"
154
158
  ></asd20-tertiary-header> -->
155
- <asd20-primary-header v-if="messages.length > 0" :messages="messages" />
156
- <asd20-secondary-header v-if="messages.length > 1" :messages="messages" />
157
- <asd20-tertiary-header v-if="messages.length > 2" :messages="messages" />
158
-
159
- <!-- <asd20-return-to-school-header
159
+ <asd20-primary-header v-if="messages.length > 0" :messages="messages" />
160
+ <asd20-secondary-header
161
+ v-if="messages.length > 1"
162
+ :messages="messages"
163
+ />
164
+ <asd20-tertiary-header
165
+ v-if="messages.length > 2"
166
+ :messages="messages"
167
+ />
168
+
169
+ <!-- <asd20-return-to-school-header
160
170
  id="page-header"
161
171
  v-if="pageHeaderContent"
162
172
  v-bind="pageHeaderContent"
@@ -186,7 +196,7 @@
186
196
  </template>
187
197
  </asd20-return-to-school-header> -->
188
198
 
189
- <!-- <asd20-page-content
199
+ <!-- <asd20-page-content
190
200
  :primary-messages="primaryMessages"
191
201
  :secondary-messages="secondaryMessages"
192
202
  >
@@ -198,36 +208,38 @@
198
208
  />
199
209
  </asd20-page-content> -->
200
210
 
201
- <asd20-feeds-section
202
- :announcements="announcements"
203
- :announcements-feed-props="announcementsFeedProps"
204
- @announcements-in-view="$emit('announcements-in-view')"
205
- :stories="stories"
206
- :stories-feed-props="storiesFeedProps"
207
- @stories-in-view="$emit('stories-in-view')"
208
- :events="events"
209
- :events-feed-props="eventsFeedProps"
210
- @events-in-view="$emit('events-in-view')"
211
- ></asd20-feeds-section>
212
-
213
- <!-- <asd20-factoids-section
211
+ <asd20-feeds-section
212
+ :announcements="announcements"
213
+ :announcements-feed-props="announcementsFeedProps"
214
+ @announcements-in-view="$emit('announcements-in-view')"
215
+ :stories="stories"
216
+ :stories-feed-props="storiesFeedProps"
217
+ @stories-in-view="$emit('stories-in-view')"
218
+ :events="events"
219
+ :events-feed-props="eventsFeedProps"
220
+ @events-in-view="$emit('events-in-view')"
221
+ ></asd20-feeds-section>
222
+
223
+ <!-- <asd20-factoids-section
214
224
  v-if="factoids && factoids.length > 0"
215
225
  :factoids="factoids"
216
226
  /> -->
217
227
 
218
- <!-- Quick Links -->
219
- <asd20-quicklinks-menu :quickLinks="quickLinks">
220
- <slot name="quicklinks-menu" />
221
- </asd20-quicklinks-menu>
228
+ <!-- Quick Links -->
229
+ <asd20-quicklinks-menu :quickLinks="quickLinks">
230
+ <slot name="quicklinks-menu" />
231
+ </asd20-quicklinks-menu>
222
232
 
223
- <!-- Footer -->
224
- <asd20-page-footer
225
- :organization="organization"
226
- :socialLinks="socialLinks"
227
- :disclosureLinks="disclosureLinks"
228
- >
229
- <slot name="page-footer" />
230
- </asd20-page-footer>
233
+ <!-- Footer -->
234
+ <asd20-page-footer
235
+ :organization="organization"
236
+ :socialLinks="socialLinks"
237
+ :disclosureLinks="disclosureLinks"
238
+ >
239
+ <slot name="page-footer" />
240
+ </asd20-page-footer>
241
+ </div>
242
+ </div>
231
243
  </div>
232
244
  </template>
233
245
 
@@ -240,6 +252,7 @@ import scrollTrack from '../../../directives/scroll-track'
240
252
 
241
253
  // Components
242
254
  import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
255
+ import Asd20Skeleton from '../../../components/atoms/Asd20Skeleton'
243
256
  // import Asd20ReturnToSchoolHeader from '../../../components/organisms/Asd20ReturnToSchoolHeader'
244
257
  // import Asd20ChoiceHeader from '../../../components/organisms/Asd20ChoiceHeader'
245
258
  import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
@@ -256,11 +269,19 @@ import Asd20PrimaryHeader from '../../../components/organisms/Asd20PrimaryHeader
256
269
  import Asd20SecondaryHeader from '../../../components/organisms/Asd20SecondaryHeader'
257
270
  import Asd20TertiaryHeader from '../../../components/organisms/Asd20TertiaryHeader'
258
271
  import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
272
+ import globalPropMixinFactory from '../../../mixins/globalPropMixinFactory.js'
273
+
259
274
 
260
275
  export default {
261
276
  name: 'Asd20DistrictHomeTemplate',
262
277
 
263
- mixins: [pageTemplateMixin],
278
+ mixins: [
279
+ pageTemplateMixin,
280
+ globalPropMixinFactory('isAuthenticated', {
281
+ type: Boolean,
282
+ default: 'true',
283
+ }),
284
+ ],
264
285
 
265
286
  directives: { scrollTrack },
266
287
 
@@ -272,6 +293,7 @@ export default {
272
293
 
273
294
  components: {
274
295
  Asd20SkipTo,
296
+ Asd20Skeleton,
275
297
  // Asd20ReturnToSchoolHeader,
276
298
  // Asd20ChoiceHeader,
277
299
  // Asd20PageContent,
@@ -23,6 +23,7 @@ export default {
23
23
  events: this.events,
24
24
  files: this.files,
25
25
  selectedLanguageCode: 'en',
26
+ isAuthenticated: true,
26
27
  relatedLinks: [].concat(
27
28
  Array(3).fill({
28
29
  category: 'External',
@@ -17,6 +17,9 @@ export default {
17
17
  // just enought to display them in the picker
18
18
  organizationOptions: { type: Array, default: () => [] },
19
19
 
20
+ // Authentication
21
+ isAuthenticated: { type: Boolean, default: true },
22
+
20
23
  // Lanugage
21
24
  languageCode: { type: String, default: '' },
22
25