Skip to content

Commit 7f98621

Browse files
lux-vdChiampSvebaustinblanchardpghorpade
authored
feat: Add CollectionOverview (#852)
* adds components list * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * adds notes * Update COMPONENTS.md * claimed component * Update COMPONENTS.md * claim a component * claim a component * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * take a component * take a component * take a component * Update COMPONENTS.md * Update COMPONENTS.md * Adjust the component name - already exists * take a component * take a component * Update COMPONENTS.md - marks footer as already existing * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md - marking BentoPod * add component * add component * Update COMPONENTS.md * Update COMPONENTS.md * take a component * take a component * fix component description * Update COMPONENTS.md Component exists * Update COMPONENTS.md * change component's name * Update COMPONENTS.md Clean up the list somewhat - added a new component for the bento-box-result, as bento-bod is allready.a different component. - removed a footer component as it doesn't really exist. - added some checkboxes to taken/completed compoents * take a component * take a component * take a component * remove AssetFeaturedImage definition * take a component * take a components * take a components * take a component * take a component * add a new line * add detailed component description * add detailed component description * take a component * update component description * Adds a button component * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * Clean up components.md * Taking the block-collection component * Taking the grid-collections component as well. * Update COMPONENTS.md * Clean up component list * add spacing * add spacing * update component name * Update Button definition * Update COMPONENTS.md * Update COMPONENTS.md * Remove duplicates * remove duplicates * remove duplicates * Remove already existing components * take a component * add a component * Take a component * adjust prop for block anchor nav * take a component * Update COMPONENTS.md * Taking the DropdownSingleSelect * Take the ButtonDropdownSearch component * adding the correct packageMenager version for netlify to see. pnpm Netlify supports pnpm for Node.js 16.9.0 and later. If your site’s base directory includes a pnpm-lock.yaml file, we will run pnpm install to install the dependencies listed in your package.json. To specify a pnpm version, you can edit your package.json file: "packageManager": "[email protected]" This tells Corepack to use and download your preferred pnpm version instead of the default version that Netlify sets. * Update COMPONENTS.md * Marking a component as taken * Remove packageManager field from package.json * Update component statuses and remove completed items Updated the status of various components to reflect their existence and removed existing components from the list. * Update COMPONENTS.md * Taking the FiltersDropdown * Update COMPONENTS.md * Add note regarding existing header component tweaks Added a note about existing similar functionality that requires tweaks. * Update RefineSearchPanel ownership in COMPONENTS.md * Update DetailMedia component owner to Svebor * Update component list * Clarify CTAHexButton entry in COMPONENTS.md * Update COMPONENTS.md to remove and modify components Removed BlockMediaViewer and updated BlockRichText entry. Adjusted completion status for DetailMedia. * Update component status and ownership in COMPONENTS.md * Update component ownership in COMPONENTS.md * add collections overview * Delete NOTES.md * dummy * add sticky image --------- Co-authored-by: dchiamp <[email protected]> Co-authored-by: Svebor Sorić <[email protected]> Co-authored-by: Austin Blanchard <[email protected]> Co-authored-by: Parinita Mulak <[email protected]>
1 parent afad644 commit 7f98621

File tree

4 files changed

+455
-0
lines changed

4 files changed

+455
-0
lines changed

‎packages/vue-component-library/src/lib-components/CollectionOverview.vue‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<script setup lang="ts">
2+
// Imports
3+
import { computed } from 'vue'
4+
import type { BlockButtonsProps } from '@/types/components/blockButtons.types'
5+
import type { MediaItemType } from '@/types/types'
6+
import SearchResultsCount from '@/lib-components/SearchResultsCount.vue'
7+
import BlockButtons from '@/lib-components/BlockButtons.vue'
8+
import ResponsiveImage from '@/lib-components/ResponsiveImage.vue'
9+
import { useTheme } from '@/composables/useTheme'
10+
import { SearchResultsCountVariants } from '@/types/components/SearchResultsCountTypes'
11+
12+
interface CollectionOverviewProps {
13+
title: string
14+
subtitle?: string
15+
itemsCount?: number
16+
description?: string
17+
image: MediaItemType
18+
blockButtons?: BlockButtonsProps
19+
}
20+
21+
// Props
22+
const props = defineProps<CollectionOverviewProps>()
23+
24+
const theme = useTheme()
25+
26+
// Computed
27+
const labelParsed = computed(() => {
28+
if (props.itemsCount)
29+
return props.itemsCount > 1 ? 'items' : 'item'
30+
31+
return ''
32+
})
33+
34+
const hasButtons = computed(() => {
35+
return (
36+
props.blockButtons
37+
&& props.blockButtons.buttons
38+
&& props.blockButtons.buttons.length > 0
39+
)
40+
})
41+
const classes = computed(() => {
42+
return ['collection-overview', theme?.value]
43+
})
44+
</script>
45+
46+
<template>
47+
<section :class="classes">
48+
<template class="phone">
49+
<h2 class="title">
50+
{{ title }}
51+
</h2>
52+
53+
<SearchResultsCount
54+
v-if="itemsCount"
55+
:count="itemsCount"
56+
:suffix-label="labelParsed"
57+
label=""
58+
prefix=""
59+
:animate="true"
60+
class="search-results-count"
61+
:variant="SearchResultsCountVariants.HORIZONTAL"
62+
/>
63+
</template>
64+
65+
<div class="layout-container">
66+
<div class="meta">
67+
<template class="desktop">
68+
<h2 class="title">
69+
{{ title }}
70+
</h2>
71+
72+
<SearchResultsCount
73+
v-if="itemsCount"
74+
:count="itemsCount"
75+
:suffix-label="labelParsed"
76+
:animate="true"
77+
label=""
78+
prefix=""
79+
class="search-results-count"
80+
:variant="SearchResultsCountVariants.HORIZONTAL"
81+
/>
82+
</template>
83+
84+
<h3 v-if="subtitle" class="subtitle">
85+
{{ subtitle }}
86+
</h3>
87+
<div class="description" v-html="description" />
88+
89+
<BlockButtons
90+
v-if="blockButtons && hasButtons"
91+
:buttons="blockButtons.buttons"
92+
:align="blockButtons.align"
93+
:direction="blockButtons.direction"
94+
/>
95+
</div>
96+
<ResponsiveImage :media="image" class="image" />
97+
</div>
98+
</section>
99+
</template>
100+
101+
<style lang="scss" scoped>
102+
@import "@/styles/dlc/_collection-overview.scss";
103+
</style>

‎packages/vue-component-library/src/stories/CollectionOverview.spec.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
describe('Funkhaus / CollectionOverview', () => {
2+
it('Default', () => {
3+
cy.visit(
4+
'/iframe.html?id=funkhaus-collection-overview--default&args=&viewMode=story'
5+
)
6+
cy.get('.collection-overview').should('exist')
7+
cy.percySnapshot('Funkhaus / CollectionOverview')
8+
})
9+
})

‎packages/vue-component-library/src/stories/CollectionOverview.stories.js‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
import { computed } from 'vue'
2+
import CollectionOverview from '@/lib-components/CollectionOverview'
3+
import { ButtonLinkIcons } from '@/types/components/buttonLink.types'
4+
5+
// Import mock api data
6+
import * as API from '@/stories/mock-api.json'
7+
8+
// Storybook default settings
9+
export default {
10+
title: 'Funkhaus / Collection Overview',
11+
component: CollectionOverview,
12+
}
13+
14+
const pageTemplate = `
15+
<div class="page">
16+
17+
<collection-overview v-bind="props" />
18+
<div class="content-below" style="height: 80vh;" />
19+
20+
</div>
21+
`
22+
23+
// Variations of stories below
24+
export function Default() {
25+
return {
26+
components: { CollectionOverview },
27+
data() {
28+
return {
29+
props: {
30+
title: 'Los Angeles Times Photographic Collection ',
31+
subtitle: 'About this Collection',
32+
itemsCount: 21963,
33+
34+
blockButtons: {
35+
buttons: [
36+
{
37+
label: 'Click Here for UCLA Library Locations',
38+
to: '/help/more',
39+
iconName: ButtonLinkIcons.ARROW_RIGHT,
40+
},
41+
{ label: 'Contact Us', to: 'https://google.com' },
42+
],
43+
},
44+
description:
45+
'Collection consists of photonegatives documenting events and people in So. CA and photographic prints documenting events and people in So. CA, the US, and the world. The material originates from the Los Angeles Times newspaper and includes glass negatives (ca. 1918-1932), nitrate negatives (ca. 1925-45), and safety negatives (ca. 1935-1990). Also includes prints and negatives from the Los Angeles Times Orange County and San Diego bureaus.',
46+
image: API.image,
47+
},
48+
}
49+
},
50+
provide() {
51+
return {
52+
theme: computed(() => 'dlc'),
53+
}
54+
},
55+
template: pageTemplate,
56+
}
57+
}
58+
59+
export function WithoutButtons() {
60+
return {
61+
components: { CollectionOverview },
62+
data() {
63+
return {
64+
props: {
65+
title: 'Collection Overview',
66+
itemsCount: 150,
67+
description:
68+
'This is a collection overview without any buttons. It is used to demonstrate the component\'s basic functionality.',
69+
image: API.image,
70+
},
71+
}
72+
},
73+
provide() {
74+
return {
75+
theme: computed(() => 'dlc'),
76+
}
77+
},
78+
template: pageTemplate,
79+
}
80+
}
81+
82+
export function LongTextContent() {
83+
return {
84+
components: { CollectionOverview },
85+
data() {
86+
return {
87+
props: {
88+
title: 'The Comprehensive UCLA Library Special Collections: A Multifaceted Repository of Historical, Cultural, and Academic Resources Spanning Multiple Centuries',
89+
subtitle:
90+
'An Extensive Overview of Our Vast and Diverse Collection Holdings',
91+
itemsCount: 1250000,
92+
description: `
93+
<p>This extraordinary collection represents one of the most comprehensive academic library holdings in the western United States, encompassing over 1.25 million individual items across multiple formats, languages, and historical periods. The collection spans from ancient manuscripts and incunabula to contemporary digital archives, representing a continuous record of human knowledge and cultural expression.</p>
94+
95+
<p>The collection includes rare books dating back to the 15th century, including first editions of significant works in literature, science, philosophy, and the arts. Our manuscript collection contains personal papers of notable figures in California history, including politicians, artists, writers, and scientists who have shaped the cultural landscape of the American West.</p>
96+
97+
<p>In addition to traditional print materials, the collection features extensive holdings in photography, film, audio recordings, and digital media. The photographic archives alone contain over 500,000 images documenting the history of Los Angeles, California, and the broader American West from the mid-19th century to the present day.</p>
98+
99+
<p>The collection also includes significant holdings in area studies, with particular strength in Latin American, Asian American, and Middle Eastern materials. These collections support advanced research in ethnic studies, immigration history, and cross-cultural analysis, making them invaluable resources for scholars worldwide.</p>
100+
101+
<p>Special attention has been given to preserving materials related to social movements, including extensive documentation of the Civil Rights Movement, the Chicano Movement, the LGBTQ+ rights movement, and various labor movements that have shaped American society. These materials provide crucial primary sources for understanding the ongoing struggle for social justice and equality.</p>
102+
103+
<p>The digital components of the collection include born-digital materials, digitized versions of fragile originals, and interactive multimedia resources that enhance traditional research methods. These digital assets are continuously updated and expanded to reflect the evolving nature of scholarly communication and research practices.</p>
104+
`,
105+
image: API.image,
106+
blockButtons: {
107+
buttons: [
108+
{
109+
label: 'Advanced Search',
110+
to: '/search/advanced',
111+
iconName: ButtonLinkIcons.ARROW_RIGHT,
112+
},
113+
{
114+
label: 'Browse by Subject',
115+
to: '/collections/subjects',
116+
},
117+
{
118+
label: 'Request Materials',
119+
to: '/services/request',
120+
},
121+
{
122+
label: 'Digital Exhibits',
123+
to: '/exhibits/digital',
124+
},
125+
{
126+
label: 'Research Guides',
127+
to: '/guides/research',
128+
},
129+
],
130+
},
131+
},
132+
}
133+
},
134+
provide() {
135+
return {
136+
theme: computed(() => 'dlc'),
137+
}
138+
},
139+
template: pageTemplate,
140+
}
141+
}
142+
143+
export function MinimalContent() {
144+
return {
145+
components: { CollectionOverview },
146+
data() {
147+
return {
148+
props: {
149+
title: 'Simple Collection',
150+
image: API.image,
151+
},
152+
}
153+
},
154+
provide() {
155+
return {
156+
theme: computed(() => 'dlc'),
157+
}
158+
},
159+
template: pageTemplate,
160+
}
161+
}
162+
163+
export function NoSubtitle() {
164+
return {
165+
components: { CollectionOverview },
166+
data() {
167+
return {
168+
props: {
169+
title: 'Archival Materials Collection',
170+
itemsCount: 25000,
171+
description:
172+
'A comprehensive collection of archival materials including correspondence, photographs, legal documents, and other primary source materials.',
173+
image: API.image,
174+
blockButtons: {
175+
buttons: [
176+
{ label: 'Browse Archives', to: '/archives' },
177+
{
178+
label: 'Search Finding Aids',
179+
to: '/finding-aids',
180+
},
181+
],
182+
},
183+
},
184+
}
185+
},
186+
provide() {
187+
return {
188+
theme: computed(() => 'dlc'),
189+
}
190+
},
191+
template: pageTemplate,
192+
}
193+
}
194+
195+
export function VeryLongTitle() {
196+
return {
197+
components: { CollectionOverview },
198+
data() {
199+
return {
200+
props: {
201+
title: 'The UCLA Library Special Collections Department\'s Comprehensive Digital Archive of Southern California Historical Materials, Cultural Artifacts, and Academic Research Resources',
202+
subtitle:
203+
'Extensive Documentation of Regional History and Culture',
204+
itemsCount: 750000,
205+
description:
206+
'This collection represents the most comprehensive digital archive of Southern California historical materials available to researchers, students, and the general public.',
207+
image: API.image,
208+
blockButtons: {
209+
buttons: [
210+
{ label: 'Explore Collection', to: '/explore' },
211+
{ label: 'Research Tools', to: '/tools' },
212+
],
213+
},
214+
},
215+
}
216+
},
217+
provide() {
218+
return {
219+
theme: computed(() => 'dlc'),
220+
}
221+
},
222+
template: pageTemplate,
223+
}
224+
}
225+
226+
export function EdgeCaseEmptyStrings() {
227+
return {
228+
components: { CollectionOverview },
229+
data() {
230+
return {
231+
props: {
232+
title: 'Test Collection',
233+
subtitle: '',
234+
itemsCount: 0,
235+
description: '',
236+
image: API.image,
237+
blockButtons: {
238+
buttons: [],
239+
},
240+
},
241+
}
242+
},
243+
provide() {
244+
return {
245+
theme: computed(() => 'dlc'),
246+
}
247+
},
248+
template: pageTemplate,
249+
}
250+
}

0 commit comments

Comments
 (0)