@asd20/ui 3.2.698 → 3.2.699

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/organisms/Asd20WidgetsSection/index.vue +92 -79
  3. package/src/components/templates/Asd20WayfindingImageTemplate/index.vue +1 -0
  4. package/src/mixins/mockPageMixin.js +2 -2
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.698",
8
+ "version": "3.2.699",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
package/src/components/organisms/Asd20WidgetsSection/index.vue CHANGED
@@ -1,30 +1,46 @@
1
1
  <template>
2
2
  <section class="asd20-widgets-section" role="complementary">
3
3
  <slot name="before" />
4
-
5
- <asd20-department-contact-card
6
- class="relatedDepartment"
7
- v-if="group"
8
- :group="group"
9
- />
10
-
11
- <asd20-people-list
12
- class="relatedPeople"
13
- v-if="peopleFeedProps && people.length > 0 && !noPeople"
14
- :people="people"
15
- v-bind="peopleFeedProps"
4
+ <asd20-link-list
5
+ v-if="relatedLinks.length > 5"
6
+ class="related-links-wide"
7
+ :links="relatedLinks"
8
+ v-bind="relatedLinksProps"
16
9
  :multi-column="full"
17
- :max-height="people.length > 8 ? '50vh' : 'auto'"
10
+ max-height="1000px"
18
11
  />
19
12
 
20
- <asd20-link-list
21
- class="relatedPages"
22
- v-if="relatedPages"
23
- :links="relatedPages"
24
- v-bind="relatedPagesProps"
25
- />
13
+ <div class="widgets-wrapper">
14
+ <asd20-department-contact-card
15
+ class="relatedDepartment"
16
+ v-if="group"
17
+ :group="group"
18
+ />
19
+ <asd20-people-list
20
+ class="relatedPeople"
21
+ v-if="peopleFeedProps && people.length > 0 && !noPeople"
22
+ :people="people"
23
+ v-bind="peopleFeedProps"
24
+ :multi-column="full"
25
+ max-height="400px"
26
+ />
27
+ <asd20-link-list
28
+ class="relatedPages"
29
+ v-if="relatedPages"
30
+ :links="relatedPages"
31
+ v-bind="relatedPagesProps"
32
+ max-height="400px"
33
+ />
34
+ <asd20-link-list
35
+ v-if="relatedLinks.length <= 5"
36
+ class="relatedLinks"
37
+ :links="relatedLinks"
38
+ v-bind="relatedLinksProps"
39
+ :multi-column="full"
40
+ max-height="400px"
41
+ />
26
42
 
27
- <!-- <intersect v-if="eventsFeedProps" @enter="$emit('events-in-view')">
43
+ <!-- <intersect v-if="eventsFeedProps" @enter="$emit('events-in-view')">
28
44
  <asd20-event-list
29
45
  v-bind="eventsFeedProps"
30
46
  :events="events"
@@ -32,24 +48,17 @@
32
48
  />
33
49
  </intersect> -->
34
50
 
35
- <asd20-link-list
36
- class="relatedLinks"
37
- :links="relatedLinks"
38
- v-bind="relatedLinksProps"
39
- :multi-column="full"
40
- :max-height="relatedLinks.length > 8 && filesFeedProps ? '50vh' : 'auto'"
41
- />
42
-
43
- <intersect v-if="filesFeedProps" @enter="$emit('files-in-view')">
44
- <asd20-file-list
45
- v-if="filesFeedProps && !noFiles"
46
- class="relatedFiles"
47
- v-bind="filesFeedProps"
48
- :files="files"
49
- :multi-column="full"
50
- :max-height="files.length > 8 ? '50vh' : 'auto'"
51
- />
52
- </intersect>
51
+ <intersect v-if="filesFeedProps" @enter="$emit('files-in-view')">
52
+ <asd20-file-list
53
+ v-if="filesFeedProps && !noFiles"
54
+ class="relatedFiles"
55
+ v-bind="filesFeedProps"
56
+ :files="files"
57
+ :multi-column="full"
58
+ max-height="400px"
59
+ />
60
+ </intersect>
61
+ </div>
53
62
 
54
63
  <slot />
55
64
  </section>
@@ -114,63 +123,67 @@ export default {
114
123
  @import '../../../design/_mixins.scss';
115
124
 
116
125
  .asd20-widgets-section {
117
- --minimum-column-width: 620px;
118
- --gutter: #{space(0.5)};
119
- display: flex;
120
- flex-direction: row;
121
- flex-wrap: wrap;
122
- // justify-content: space-between;
123
- margin: 0 calc(var(--gutter) * -1);
124
- height: min-content;
125
-
126
- &::v-deep > * {
127
- flex: 1 1 var(--minimum-column-width);
128
- margin: var(--gutter);
129
- // max-width: space(25);
126
+ &::v-deep .asd20-list__header {
127
+ border-bottom: 2px solid rgba(128, 128, 128, 0.1) !important;
130
128
  }
131
- &::v-deep .asd20-list-category {
132
- border-bottom: 1px solid rgba(128, 128, 128, 0.125) !important;
129
+ .related-links-wide {
130
+ margin-bottom: space(2);
133
131
  }
134
- &::v-deep .asd20-link-list.separated {
135
- .asd20-list-item:not(:first-child) {
136
- // border-top: 1px solid rgba(128, 128, 128, 0.125) !important;
137
- border-top: 1px solid rgba(128, 128, 128, 0.125) !important;
138
- }
139
- .asd20-list-category + .asd20-list-item {
140
- // border-top: none !important;
141
- border-top: 1px solid rgba(128, 128, 128, 0.125) !important;
132
+ .widgets-wrapper {
133
+ --minimum-column-width: 620px;
134
+ --gutter: #{space(0.5)};
135
+ display: flex;
136
+ flex-direction: row;
137
+ flex-wrap: wrap;
138
+ // justify-content: space-between;
139
+ margin: 0 calc(var(--gutter) * -1);
140
+ height: min-content;
141
+
142
+ &::v-deep > * {
143
+ flex: 1 1 var(--minimum-column-width);
144
+ margin: var(--gutter);
145
+ // max-width: space(25);
142
146
  }
143
147
  }
144
148
  }
145
149
 
146
150
  @media (max-width: 1023px) {
147
151
  .asd20-widgets-section {
148
- flex-direction: row;
149
- &::v-deep .asd20-list__header {
150
- padding: 0 space(0.75);
151
- }
152
- &::v-deep .asd20-list-category {
153
- padding-left: space(1);
154
- }
155
- &::v-deep .asd20-list-item {
156
- padding-left: space(1);
157
- padding-right: space(1);
152
+ .widgets-wrapper {
153
+ flex-direction: row;
154
+ &::v-deep .asd20-list__header {
155
+ padding: 0 space(0.75);
156
+ }
157
+ &::v-deep .asd20-list-category {
158
+ padding-left: space(1);
159
+ }
160
+ &::v-deep .asd20-list-item {
161
+ padding-left: space(1);
162
+ padding-right: space(1);
163
+ }
158
164
  }
159
165
  }
160
166
  }
161
167
 
162
168
  @media (min-width: 1024px) {
163
169
  .asd20-widgets-section {
164
- --minimum-column-width: 450px;
165
- --gutter: #{space(1)};
166
- &::v-deep .asd20-person-list {
170
+ .related-links-wide {
171
+ display: block;
172
+ margin-bottom: space(2);
173
+ }
174
+ .widgets-wrapper {
175
+ --minimum-column-width: 450px;
176
+ --gutter: #{space(1)};
177
+ &::v-deep .asd20-person-list {
178
+ max-width: 50vw;
179
+ }
180
+ }
181
+
182
+ .relatedDepartment,
183
+ .relatedPeople,
184
+ .relatedPages {
167
185
  max-width: 50vw;
168
186
  }
169
187
  }
170
- .relatedDepartment,
171
- .relatedPeople,
172
- .relatedPages {
173
- max-width: 50vw;
174
- }
175
188
  }
176
189
  </style>
package/src/components/templates/Asd20WayfindingImageTemplate/index.vue CHANGED
@@ -105,6 +105,7 @@
105
105
  widgetsSectionProps.sidebar ||
106
106
  $slots.widgets
107
107
  "
108
+ :related-links="relatedLinks"
108
109
  v-bind="{ ...widgetsSectionProps.footer, ...widgetsSectionProps.sidebar }"
109
110
  @events-in-view="$emit('events-in-view')"
110
111
  @files-in-view="$emit('files-in-view')"
package/src/mixins/mockPageMixin.js CHANGED
@@ -38,13 +38,13 @@ export default {
38
38
  'Donec id elit non mi porta gravida at eget metus.',
39
39
  }),
40
40
 
41
- Array(5).fill({
41
+ Array(2).fill({
42
42
  category: 'Image Links',
43
43
  type: 'Link',
44
44
  id: 'edd36f00-2373-11eb-88e6-97a01f897919',
45
45
  title: 'Gale eBooks',
46
46
  url: 'http://infotrac.galegroup.com/itweb/colo45028?db=GVRL',
47
- description: 'Has description. no image',
47
+ description: 'Has description and image',
48
48
  imageUrl:
49
49
  'https://asd20websitestorage.blob.core.windows.net/website-files/link-images/25d337f0-2374-11eb-88e6-97a01f897919/thumbnail-md/sora_250x250.jpg',
50
50
  expireDateTime: '2200-01-01T00:00:00+00:00',