From db8da7ffc02cd8e550a70c8f4ce2c68d21de6491 Mon Sep 17 00:00:00 2001 From: dchiamp Date: Thu, 19 Jun 2025 18:58:58 -0700 Subject: [PATCH 01/98] adds components list --- COMPONENTS.md | 1163 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1163 insertions(+) create mode 100644 COMPONENTS.md diff --git a/COMPONENTS.md b/COMPONENTS.md new file mode 100644 index 000000000..fc23a1299 --- /dev/null +++ b/COMPONENTS.md @@ -0,0 +1,1163 @@ +# UCLA Components list + +## Buttons and Interface + +[] ButtonText +A minimal button with just text, possibly with variants like underline or subtle. + +- label: string +- variant?: 'default' | 'underline' | 'subtle' +- onClick: Function + +[] ButtonStacked +A vertical stack of buttons, likely for grouped filter or action options. + +- buttons: Array<{ label: string, isActive: boolean }> +- onClick: Function(index: number) + +[] ButtonDropdown +Button paired with a dropdown menu indicator (carat or arrow). + +- label: string +- isOpen: boolean +- onToggle: Function +- options: string[] +- onSelect: Function(option: string) + +[] ButtonTag +Used as labeled categories or tags, possibly dismissible. + +- label: string +- isActive: boolean +- onClick: Function +- onRemove?: Function + +[] Breadcrumb + +[] BreadcrumbPill +Pill-shaped breadcrumb element, possibly for filter chips or nav breadcrumbs. + +- label: string +- onRemove?: Function +- to?: string + +[] BreadcrumbBar +Full breadcrumb bar with one or more breadcrumb items. + +- crumbs: Array<{ label: string, to?: string }> +- current: string + +[] ButtonIconOnly +Just an icon button, used for tooltips, mobile actions, etc. + +- icon: string +- ariaLabel: string +- onClick: Function + +[] PaginationControl +Numbered pagination UI with previous/next arrows. + +- currentPage: number +- totalPages: number +- onPageChange: Function(newPage: number) + +[] SectionLabel +Non-interactive text element that might be grouped with buttons (e.g. “RESEARCH”). + +- text: string +- tag?: string ('h2', 'span', etc.) + +[] ButtonSubLink +Secondary inline button or link, often used for minimal navigation or contextual actions. + +- label: string +- href: string +- variant?: 'default' | 'subtle' +- icon?: string + +[] LibraryLogoButton +Branded button or label pairing logo with text. + +- logoSrc: string +- label: string +- to?: string + +[] PaginationNav +Interactive pagination component with numbered buttons, previous/next navigation, and ellipsis for long ranges. + +- currentPage: number +- totalPages: number +- showEdges?: boolean (e.g. show first/last page) +- siblingCount?: number (how many pages around current to show) + +[] CTAHexButton +Prominent hex-shaped call-to-action button with icon and label. + +- label: string +- icon?: string +- to: string +- variant?: 'primary' | 'secondary' + +[] SearchResultsCount +Displays the number of results returned in a search. + +- count: number +- label?: string (default: "Results") +- prefix?: string (e.g. "Catalog") +- animate?: boolean + +[] RefineSearchPanel +Collapsible panel of dropdown filters for refining search results. + +- filters: Array<{ +  label: string, +  options: Array, +  selected: string | string[], +  multi?: boolean +}> +- onFilterChange: Function(label: string, selected: string | string[]) +- defaultOpen?: string[] (filters to open by default) + +[] FiltersDropdown +Collapsible panel of dropdown filters for refining search results with multiple options + +- name: string +- searchField: string +- default: string +- options: string[] +- onFilterChange: Function(label: string, selected: string | string[]) +- defaultOpen?: string[] (filters to open by default) +[] ResultsList +Displays a list of categories with associated result counts. + +- items: Array<{ label: string, count: number, href?: string }> +- highlight?: string[] (optional: bold or emphasize certain terms) +- onClick?: Function(label: string) + +[] AlphabeticalBrowseBy +Interactive list to sort results Alphabetically + +- selectedLetterProp: String, +- displayAll: Boolean, + +## Dropdowns + +[] DropdownSingleSelect +Reusable dropdown with configurable button label and menu options. + +- label: string +- options: Array +- selected: string +- onSelect: Function(option: string) + +[] SideMenuAccordionPod +Expandable side menu category pod with grouped buttons and optional metadata (e.g. counts). + +- categories: Array<{ label: string, buttons: Array<{ title: string, count: number }> }> +- onSelect: Function(buttonTitle: string) + +[] ButtonDropdownSearch +Set of dropdowns to filter/search content by fields like “Title” or “Subject.” + +- label: string +- options: Array +- selected: string +- onSelect: Function(option: string) + +[] ButtonSubCategoryPod +Grouped buttons with category tags and close/removal options. + +- items: Array<{ title: string, count: number, removable?: boolean }> +- onRemove: Function(item: string) + +[] ButtonUCLALibrariesDropdown +Dropdown for selecting from multiple library collections. Appears in tag-chip format. + +- label: string +- libraries: Array +- onSelect: Function(library: string) + +[] YearRangeFilter or DateFilter +Range selector with start and end year inputs and a confirm button. + +- minYear: number +- maxYear: number +- selectedRange: { start: number, end: number } +- onConfirm: Function(range: { start: number, end: number }) + + + + + +## Accordions + +[] BentoPod +Displays a summary of a library or collection and a list of associated assets. Includes a collapsible "More/Less Results" toggle. + +- title: string +- description: string +- buttonLabel: string +- items: Array<{ +  title: string, +  type: string, +  date: string, +  program: string +}> +- showMoreLabel: string +- showLessLabel: string +- isExpanded: boolean +- onToggle: Function + + +[] NotesAccordion +Expandable section for showing grouped text content like notes and captions. Can optionally display an excerpt pod. + +- sections: Array<{ +  label: string, +  content: string | ExcerptPod +}> +- isExpanded: boolean +- onToggle: Function + +[] ExcerptPod +Highlighted or emphasized snippet of text content within another component (like Notes). Often includes links and formatted text. + +- content: string (HTML or rich text) +- label?: string +- background?: boolean + +## Blocks + +[] AssetFeaturedImage +Responsive image grid for displaying key visuals of an asset. May allow selection or highlight. + +- images: Array +- aspectRatio?: number + +[] AssetPod +Vertical media block representing a digital library asset. Contains metadata, linked collection name, and optional image gallery. + +- title: string +- date: string +- resourceType: string +- description: string +- collection: [{ name: string, href: string }] +- thumbnails: Array +- isCondensed?: boolean + +[] BlockAsset +Card for an individual digital library asset. + +- image: string +- title: string +- date: string +- description: string +- href: string + +[] SearchResult +Horizontal row layout for a single digital asset, including image, metadata fields, and links. + +- title: string +- description: string +- date: string +- resourceType: string +- collection: { name: string, href: string } +- image: string +- onClick?: Function + + +[] BlockCollection +Visual card for a digital collection or category. + +- image: string +- title: string +- description: string +- href: string + +[] MetadataTable +Tabular list of metadata key-value pairs (e.g. Rights Contact, Rights Holder). + +- items: Array<{ label: string, value: string | string[] }> +- title?: string + +[] BlockMediaViewer +Embeds an IIIF viewer, image, or video with optional caption. + +- title?: string +- type: 'iiif' | 'image' | 'video' +- src: string +- caption?: string +- alt?: string +- fullscreen?: boolean +- zoomable?: boolean + +[] BlockRichText +(Already defined previously — reused here for body copy.) + +- content: string (HTML or PortableText) +- align?: 'left' | 'center' + +[] SectionHeader +Reused section heading (also already defined under `BlockTitle`). + +- text: string +- level?: 'h2' | 'h3' +- id?: string (used for anchor targets) + +[] BlockButtonList +Vertical or horizontal list of buttons linking to specific tools or resources. + +- buttons: Array<{ label: string, href: string, variant?: string }> + + +## Grids + +[] GridAssets +- items: [BlockAsset] + +[] GridCollections +- items: [BlockCollection] + +## Search + +[] SearchField +Composed search input and submit button. Likely wraps `EntryField` and `ButtonSubmit`. + +- modelValue: string +- placeholder: string +- onSearch: Function(value: string) +- autoFocus?: boolean + +[] EntryField +Basic labeled input field for user entry. Can be reused for search or other forms. + +- label: string +- modelValue: string +- placeholder?: string +- onInput: Function(value: string) + +[] ButtonSubmit +Search submit button, typically displayed as a magnifying glass icon. + +- onClick: Function +- icon?: string (defaults to magnifying glass) + +[] Flash +Placeholder or quick-access UI element — possibly for suggestions or previous searches. + +- content?: string | slot +- onClick?: Function + + +## Bento Box + +[] BentoBoxResult +Horizontal scrollable container of `BentoPod` items, grouped under a title like "More search results." Includes optional draggable scrollbar. + +- title: string +- items: Array<{ +  image: string, +  count: number, +  title: string, +  description: string, +  to: string +}> +- showDragger: boolean +- onScroll?: Function + + +[] Dragger +A draggable horizontal scrollbar component. Should be synced with scroll container state and optionally labeled with a property. + +- trackWidth: number +- thumbWidth: number +- position: number +- label?: string +- onDrag: Function(newPosition: number) + + +## Header + +[] Banner +Universal top banner with UCLA branding. Often pinned to the top of all pages, may contain global notices or links. + +- label: string +- link?: string +- backgroundColor?: string +- textColor?: string +- isSticky?: boolean + + +[] Header +Primary site navigation including logo, main links, and utility search bar. + +- logo: { label: string, href: string } +- navLinks: Array<{ label: string, href: string }> +- searchPlaceholder: string +- searchModel: string +- onSearch: Function +- searchFilters?: Array +- selectedFilter?: string +- onFilterChange?: Function + + +## Footer + +[] Footer +Main site footer for UCLA Library, assembling social links, navigation, and newsletter signup. + +- socialLinks: Array<{ label: string, href: string }> +- legalLinks: Array<{ label: string, href: string }> +- copyright?: string +- newsletter + +[] NewsletterSignup +Standalone newsletter form for email subscription. + +- headline: string +- description: string +- placeholder: string +- buttonLabel: string +- onSubmit: Function(email: string) +- status?: 'idle' | 'success' | 'error' + + +# Detail Pages + +[] DetailHeader +Top navigation bar for asset pages, including pagination, collection name, and back-to-search link. + +- currentIndex: number +- totalResults: number +- collection: { name: string, href: string } +- onBack: Function +- onNext: Function +- onPrev: Function + +[] DetailMedia +Large asset viewer for images or media, with zoom/download/fullscreen buttons. + +- title: string +- imageSrc: string +- caption?: string +- allowDownload?: boolean +- allowFullscreen?: boolean + +[] DetailOverview +Two-column layout for structured metadata. Used for "Item Overview" and "Find this Item." + +- left: Array<{ label: string, value: string | VNode }> +- right: Array<{ label: string, value: string | VNode }> + +[] SectionKeywords +Displays a list of linked subjects, genres, and related tags. + +- title?: string +- keywords: Array<{ label: string, href?: string }> + + +[] CollectionOverview +Introductory section for a collection page with title, summary text, and preview image. + +- title: string +- itemCount: number +- description: string +- image: string +- ctaLabel: string +- ctaHref: string + +[] CollectionFind +Displays linked metadata for locating a collection, including identifiers and URLs. + +- title?: string (default: "Find this Collection") +- repository: { label: string, href: string } +- localId: string +- ark: string +- opacUrl?: string +- findingAidUrl?: string +- manifestUrl?: { icon?: string, href: string, copyButtonLabel?: string } + +# Pages + +[] BannerFeatured +Displays a full-width or responsive image, possibly with optional alt text or caption. +Has a la + +- src: string +- alt?: string +- layout?: 'full' | 'constrained' +- direction?: 'left' | 'right' +- decoration?: boolean (e.g. angled stripes or shapes) + +[] BlockTitle +Standalone heading block. + +- text: string +- level?: 'h1' | 'h2' | 'h3' +- color?: string +- align?: 'left' | 'center' + + +[] BlockButtons +One or more call-to-action buttons in a horizontal or vertical stack. + +- buttons: Array<{ label: string, href: string, variant?: 'primary' | 'secondary' }> +- align?: 'left' | 'center' + +[] ContentSection +Flexible container that wraps image, title, text, and buttons in various arrangements. + +- image?: BannerFeatured +- title?: BlockTitle +- text?: BlockRichText +- buttons?: BlockButtons +- reverse?: boolean +- backgroundColor?: string + + +[] BlockAnchorNav +Sidebar or inline nav with jump links to sections on the same page. + +- title?: string (e.g. "Topics Covered") +- items: Array<{ label: string, href: string }> +- sticky?: boolean + + + +# Missing: +Filters +ButtonCTA +HeaderMainResponsive +MediaItem +MediaGallery +TableWithHeader +TabToggle + + +[] SearchFilterButtons +A component that renders a list of toggle buttons for filter categories, and conditionally includes a single checkbox. Emits events on interaction. + +- items: Item[] + Array of filter items. Each item should have `inputType`, `label`, `esFieldName`, `isVisible`, and optional `class`. + +- singleCheckboxState: boolean + Controls the checked state of the optional single checkbox filter. + +- toggle(index: number): void + Emitted when a toggleable item is clicked. + +- update:single-checkbox-state(state: boolean): void + Syncs the single checkbox's state with external state. + +- single-checkbox-checked(esFieldName: string): void + Emitted when the single checkbox is checked or unchecked. + +[] SingleCheckbox +A stylized checkbox component with internal state syncing and emit behavior for two-way binding and tracking user input. + +- label: string + The visible label displayed next to the checkbox. + +- selected: boolean + Controls the checked state of the checkbox (v-model compatible). + +- update:selected(state: boolean): void + Emitted when the checkbox is toggled, for two-way binding. + +- input-selected(): void + Emitted on user interaction with the checkbox, useful for analytics or additional logic. + + + +[] SectionRemoveSearchFilters +Displays a list of active search filters with an option to remove them. Filters are parsed from a keyed object of arrays and rendered using `BlockRemoveSearchFilter`. + +- filters: { [key: string]: string[] } + Object of active filters, where each key maps to an array of selected values. + +- update:filters(filters: object): void + Emitted when a filter is removed, passing the updated filters object. + +- remove-selected(): void + Emitted when any filter is removed, useful for triggering external updates. + +[] TabList +A tabbed navigation component with animated glider, keyboard support, dynamic icons, and slot-based content. Active tab state syncs with the route query param `view`. + +- alignment: 'left' | 'center' | 'right' + Controls alignment of the tab buttons. Default is `'left'`. + +- initialTab: number + Sets the initially active tab index. Default is `0`. + +- + Optional slot for rendering filter controls above the tab list. + +- + Default slot for tab panel content. Each tab is determined by the slot’s `title`, `icon`, and `content` props. + +- Tab Items (passed via default slot) must define: + - title: string – Label for the tab button and used in `aria` attributes. + - icon: 'icon-calendar' | 'icon-list' – Optional. Maps to a predefined icon. + - content: VNode – Displayed when the tab is active. + +🔁 Behavior: +- Supports keyboard navigation with `ArrowLeft` and `ArrowRight`. +- Clicking a tab updates the `view` query param in the URL. +- The animated glider adapts to tab size and window resizing. +- The component uses the `useTheme` composable to style tabs. +- Provides `activeTabTitle` via Vue `provide`. + + + +[] BlockEventDetail +Displays date, time, and location details for an event. Supports theming logic and formatting utilities for flexible display. + +- startDate?: string + The event's start date. Used in formatted display. + +- endDate?: string + The event's end date. If provided, creates a date range. + +- time?: string + The event start time (e.g., '13:00'). Formatted for display. + +- ongoing: boolean + If true, shows 'Ongoing' instead of a specific date. + +- locations: BlockEventDetailLocation[] + A list of event locations. Each location may include `title`, `url`, `uri`, or `publicUrl`. + + BlockEventDetailLocation object: + - title: string – Required display label. + - url/publicUrl/uri?: string – Destination URL for SmartLink. + +Behavior: +- Uses `formatDates` and `formatTimes` utility functions. +- Supports themed conditional logic (e.g., showing "Multiple Locations" under the `ftva` theme). +- Opens links in new tabs for `ftva` theme. +- Integrates with `SmartLink` for routing compatibility. + +🔌 Slots: +- `` — Optional slot to render additional content under the main layout. + + +[] BlockTag +A compact label or pill-style tag component that optionally displays an icon and supports primary/secondary and highlighted visual states. + +- label: string + Text displayed within the tag. Defaults to an empty string. + +- iconName?: string + Optional key for one of the predefined FTVA icons. Maps to an internal icon lookup table. + +- isSecondary: boolean + Applies secondary styling when true. Defaults to false (primary style). + +- isHighlighted: boolean + Applies a "highlighted" visual treatment when true. Defaults to false. + +Behavior: +- Uses the current theme via `useTheme` to apply scoped styling classes. +- Supports a fixed set of icons (e.g., `SvgIconFilm`, `SvgIconTV`, etc.) mapped via `iconName`. + + +[] ButtonHide +A vertically-stacked button that displays an icon above a label. Commonly used for "See Less" or collapse actions. Styled with theme colors and hover transitions. + +- text: string + Label text displayed under the icon. Defaults to `'See Less'`. + +Behavior: +- Renders a decorative molecule stroke behind a centered collapse icon. +- Uses scoped `scss` for positioning, transitions, and hover color changes. +- Built-in hover state transitions icon stroke color and text color. + +[] ButtonLink +A styled anchor/button component that renders a labeled link with optional icons, styling variants, and download behavior. Built on top of SmartLink for internal/external routing. + +- to: string + The destination URL or route. + +- label: string + The button's visible text label. + +- iconName?: string + Used to specify a particular icon. Ignored for internal links. Supports values like `'svg-external-link'`, `'svg-download'`, `'icon-close'`. + +- isSecondary: boolean + Applies secondary button styling. Default is false. + +- isTertiary: boolean + Applies tertiary button styling. Default is false. + +- isQuaternary: boolean + Applies quaternary button styling. Default is false. + +- isDownload: boolean + If true, adds a `download` attribute to the link and uses a download icon. + +- linkTarget?: string + Optional target for the link (e.g. `_blank`). + +Behavior: +- Icon selection is determined automatically based on link type (`internal`, `external`, `download`) and `iconName`. +- Shows different icon types: + - `SvgArrowRight` for internal links + - `SvgExternalLink` for external links + - `SvgArrowDownload` if `isDownload` is true + - `IconClose` if `iconName` is `'icon-close'` +- Applies themed classes from `useTheme`. +- Contains a `.hover` span to manage animated or transition-based hover states. + +Slots: +- `` — Optional custom content inside the link (e.g. additional icon or badge). + +[] ButtonMore +A compact call-to-action button with a right arrow icon and decorative background. Commonly used for "See More" interactions. + +- text: string + Text label for the button. Defaults to `'See More'`. + +- to: string + Destination URL or route for the `SmartLink`. + +Behavior: +- Wraps a `SmartLink` for internal or external routing. +- Displays a molecule stroke graphic and a right arrow icon. +- Designed for compact, centered layouts. + +[] DividerGeneral +A horizontal divider element with optional style modifiers. + +- isBold: boolean + Adds a thicker or more prominent visual weight to the divider. Defaults to false. + +- isTertiary: boolean + Applies an alternate tertiary style variant. Defaults to false. + +Behavior: +- Applies dynamic class names based on props: `is-bold`, `is-tertiary`. +- Renders as a styled `
` with no content. + +[] BlockDivider +A conditional wrapper that renders a `DividerWayFinder` component based on `block.horizontalDivider`. + +- block: FlexibleHorizontalDividerBlock + A content block object. If `block.horizontalDivider` is truthy, the divider will render. + +Behavior: +- Delegates rendering to the `DividerWayFinder` component. +- Commonly used in page builders or dynamic content regions where dividers are optional. + +[] DividerWayFinder +A themed horizontal divider that adjusts color and style based on either a passed prop or the current route path. + +- color?: string + Optional section identifier (e.g., `'visit'`, `'about'`, `'help'`, `'ftva'`). If not provided, the section is inferred from the current route path using `getSectionName`. + +Behavior: +- Dynamically assigns a class like `color-[section]` to theme the divider. +- Reactively updates when the route changes. +- Uses `useTheme` for additional contextual styling. +- Renders two nested divs: one solid, one dotted, for visual layering. + +[] MastheadPrimary +A branded header section featuring the UCLA Library logo and a search interface. + +- linkItems: SearchLinkItemType[] + List of quick search links passed to the `SearchHome` component. + +- advancedSearchLink: SearchLinkItemType + Link configuration for the advanced search option, also passed to `SearchHome`. + +Behavior: +- Renders the UCLA Library underline logo using an async SVG import. +- Delegates search functionality to the `SearchHome` child component. +- Typically used as the top section of a homepage or landing page. + +[] MastheadSecondary +A flexible masthead component that supports optional hero imagery, title, rich text content, and visual theming. + +- hasMolecules: boolean + Controls whether a background molecule graphic is shown (only if no hero image). Default is true. + +- title: string (required) + The main heading text, rendered as HTML inside an `

` tag. + +- text?: string + Optional rich text content displayed below the title. + +- theme?: string + Used to apply specific visual variants (e.g., `'meap'` applies the `theme-meap` class). + +- heroImage?: MediaItemType + Optional image object to render as a responsive hero image. + +Behavior: +- Adds class `has-molecule` when `hasMolecules` is true and no hero image is present. +- Adds class `has-slot` if default slot content is injected (currently tracked but not used in the template). +- Adds `theme-meap` class if `theme` is `'meap'`. +- Renders child components: `ResponsiveImage` for media and `RichText` for description content. + +[] HeaderSmart +A responsive header wrapper that dynamically loads the appropriate header component based on screen width, and syncs navigation data from the global store. + +- title: string + Optional title passed down to the rendered header component. + +Behavior: +- Displays the `SiteBrandBar` at the top. +- Dynamically chooses between `HeaderMain` (desktop) and `HeaderMainResponsive` (mobile) using screen width. +- Reads primary and secondary navigation menus from the global Pinia store (`GlobalStore`). +- Reacts to store updates and screen size changes in real-time. +- Applies `mobile-header` or `desktop-header` class based on layout. + +Child components: +- `SiteBrandBar` +- `HeaderMain` or `HeaderMainResponsive` + +[] HeaderMain +The primary desktop header layout, including navigation, search, and optional themed actions like a Donate button. + +- primaryItems: NavPrimaryItemType[] + List of items for the primary navigation menu, passed to `NavPrimary`. + +- secondaryItems: NavSecondaryItemType[] + List of items for the secondary navigation menu, passed to `NavSecondary`. + +Behavior: +- Uses `useTheme` to determine whether to show optional features: + - If theme is `'ftva'`, search (`NavSearch`) and a "Donate" button (`ButtonLink`) are shown. +- Passes themed class to the root `
`. +- Injects `NavSearch` into the `#additional-menu` slot of `NavPrimary`. +- Injects a "Donate" link into the `#additional-mobile-menu-items` slot if applicable. +- Displays `NavSecondary` only when `secondaryItems` are provided. + +Child components: +- `NavPrimary` +- `NavSecondary` +- `NavSearch` (conditional) +- `ButtonLink` (conditional) + + +[] SiteBrandBar +A compact branded header strip that displays either the UCLA logo or theme-specific text, with optional call-to-action button support. + +Behavior: +- Uses `useTheme` to determine rendering logic and appearance. + - For theme `'ftva'`: + - Displays `'UCLA Film & Television Archive'` text instead of the logo. + - Adds a "Donate" button linking to `/donate`. + - For other themes: + - Defaults to rendering the UCLA logo. + +- Always links to the UCLA homepage (`https://www.ucla.edu`) in a new tab. +- Includes visually hidden text for accessibility. + +Child components: +- `SvgLogoUcla` (conditionally rendered) +- `ButtonLink` (conditionally rendered) + +[] FooterLinks +A themed footer section that renders grouped navigation links fetched from global store state. + +Behavior: +- Retrieves `footerLinks` data from the global Pinia store (`GlobalStore.footerLinks.nodes`). +- Expects each node to have: + - `category`: string – Section heading. + - `children`: array of links with `name` and `to` values. + +- Renders a heading (`

`) for each category and a list of links underneath. +- Falls back to an empty list and logs a warning if no footer data is available. +- Applies theme-based styling classes from `useTheme`. + +Child components: +- `SmartLink` – Used for all link rendering. + +[] FooterMain +The primary footer container that conditionally renders sponsor sections, link groups, subscription forms, and legal text based on theme context. + +Behavior: +- Applies a theme-based class via `useTheme`. +- Renders subcomponents based on theme: + - `FooterSponsor` is shown if no theme is set. + - `FooterLinks` is shown only if a theme is present. + - `FooterPrimary` always renders; receives `form` and `isMicrosite` props. + - `form` is true if the theme is `'ftva'`, enabling a newsletter signup form. + - `FooterSock` always renders as the final section (e.g. copyright). + +Child components: +- `FooterSponsor` (optional) +- `FooterPrimary` +- `FooterLinks` (optional) +- `FooterSock` + +[] FooterSponsor +Displays a sponsor acknowledgment message and a list of supporting organizations, pulled from global store data. + +Behavior: +- Pulls `footerSponsor` data from the Pinia `GlobalStore`. +- Expects `footerSponsor.funders` to be an array of funder objects with: + - funderName: string + - funderLogo: object (media asset) + - funderUrl: string + +- If no sponsor data is present, logs a message and renders nothing. +- Always displays static supporting text: + "The UCLA Library Modern Endangered Archives Program is supported by Arcadia." + +Child components: +- `BlockSponsor` – Rendered once per funder in the list. + +[] FooterPrimary +The primary content area of the site footer. Displays a logo, social media links, press links, and a Mailchimp-powered newsletter signup form. Appearance and content vary by theme. + +- form: boolean + Controls whether the newsletter subscription form is displayed. Defaults to true. + +- isMicrosite: boolean + If true, links the logo to the external UCLA Library homepage. If false, links internally to the root path. Defaults to false. + +Behavior: +- Pulls social and press links from `footerPrimary` in the Pinia `GlobalStore`. +- Adjusts UI based on theme from `useTheme`. For `ftva`: + - Displays custom label and message in form. + - Uses `caretRight` as the submit button icon. + - Displays branded social media icons (YouTube, Instagram, X/Twitter, Facebook). +- Uses default UCLA Library logo unless theme is `ftva`, in which case a custom logo is rendered. +- Includes invisible spam-trap input for bot protection. + +Child components: +- `SmartLink` – Used for internal routing. +- `component :is` – Dynamically renders SVG icons for logos and buttons. + +[] FooterSock +The bottom-most section of the site footer, displaying copyright and +additional legal or policy-related links. + +Behavior: +- Displays the current year dynamically using JavaScript's `Date` API. +- Pulls footer sock links from the Pinia `GlobalStore` (`footerSock.nodes`). +- Applies theme-based classes via `useTheme`. +- Logs a warning if footer data is missing from the store. + +Child components: +- `SmartLink` – Used to render each link with support for external or internal navigation. + +[] BlockRichText +A flexible content block that displays an optional section title and a block of rich text content. + +- block: FlexibleRichText + Object containing the content and optional title. Should include: + - sectionTitle?: string – Optional HTML-rendered heading. + - richText: string – Rich text content to render. + +Behavior: +- If `block.sectionTitle` is provided, it is rendered as a styled `

` using `v-html`. +- Delegates rendering of `block.richText` to the `RichText` component. + +Child components: +- `RichText` + + +[] BlockPullQuote +A stylized block for displaying a quoted passage with optional attribution. Styled according to the current theme. + +- text: string + Rich text content representing the quote body. Rendered via the `RichText` component. + +- attribution?: string + Optional attribution text (e.g., author or source). Rendered with a preceding em dash. + +Behavior: +- Applies a theme-based class using `useTheme`. +- Renders a wrapper with two sections: + - `.quote` for the main quoted content. + - `.attribution-block` for optional attribution text. + +Child components: +- `RichText` + +[] BlockMediaViewer +An interactive lightbox-style carousel for displaying a gallery of media items with optional captions, credits, and links. Can render inline or as an overlay modal. + +- items: MediaGalleryItemType[] (required) + Array of media items. Each item can include: + - item: media source (image, video, embed) + - captionTitle?: string + - captionText?: string + - credit?: string + - linkText?: string + - linkUrl?: string + - coverImage?: object + - embedCode?: string + +- selectedItem?: number + Index of the initially selected slide. Defaults to `0`. + +- inline?: boolean + If true, the component is rendered inline; otherwise it appears as a modal overlay. Defaults to false. + +Emits: +- `closeModal` – Triggered when the user closes the modal. + +Behavior: +- Uses `vue3-carousel` for slide navigation and `MediaItem` for individual media rendering. +- Includes custom next/prev controls and a pagination bullet indicator. +- Renders a `SmartLink` button if a media item includes `linkUrl` and `linkText`. +- Applies theming and `object-fit` styling based on the current theme (`cover` for `ftva`, otherwise `contain`). +- Allows additional content injection via a default `` scoped with `selectionIndex`. + +Child components: +- `MediaItem` +- `SmartLink` +- Carousel & Slide (from `vue3-carousel`) +- Various SVG icons (navigation, close, external link, etc.) + + +[] NavBreadcrumb +A flexible, responsive breadcrumb component that supports both a legacy prop-based pattern and a dynamic route-based pattern. Supports truncation, theming, and mobile optimization. + +- to?: string + Optional legacy-mode parent route link. Used in conjunction with `parentTitle`. + +- parentTitle?: string + Optional legacy-mode parent breadcrumb title. Used in conjunction with `to`. + +- title?: string + Optional final breadcrumb label. Used as the current page label if no route-based title is available. + +Behavior: +- Legacy pattern: if all three props (`to`, `parentTitle`, `title`) are provided, it renders a two-item breadcrumb using only those values. +- Dynamic pattern: parses the current route path into individual breadcrumb segments. +- On mobile, displays only the parent breadcrumb. +- On desktop, collapses breadcrumbs if there are more than 4 segments, showing only the first and last 2 with an expandable `...` button. +- Breadcrumb items are normalized (e.g., `hyphenated-path` becomes `hyphenated path`) and decoded. +- Automatically strips trailing date segments (e.g., `00-00-00`) from URLs. +- Emits a link click handler to prevent parent titles from being overridden by the final route-based title. +- Applies theme-based styling from `useTheme`. + +Child components: +- `SmartLink` – Used for navigable breadcrumb segments. +- `SvgIconCaretRight` – Shown between breadcrumb segments. + +[] PaginationNav +A responsive, theme-aware pagination component that supports legacy navigation links or dynamically generated page buttons. Works with route query parameters and can be customized with a callback. + +- nextTo?: string + Optional static link for the "Next" button. If provided, disables dynamic logic. + +- previousTo?: string + Optional static link for the "Previous" button. If provided, disables dynamic logic. + +- pages?: number + Total number of pages. + +- initialCurrentPage?: number + The current active page. Defaults to 1 if not specified. + +- generateLinkCallback?: Function + Optional callback for generating the `to` link for each page number. Receives `(pageNumber, queryParams)` as arguments. + +Emits: +- `changePage(pageNumber: number)` – Triggered when a new page is selected dynamically. + +Behavior: +- Calculates how many page buttons fit in the container based on button width and available space. +- If too many pages to show at once, it truncates with `...` and ensures the current page is centered. +- In mobile or constrained views, trims to show minimal buttons. +- Applies `first-page` or `last-page` classes when relevant. +- Handles `SmartLink` routing with fallbacks for legacy props. +- Supports slotless operation with full internal state control. + +Child components: +- `SmartLink` – For dynamic and static navigation. +- `SvgIconArrowRight` – Used for navigation arrows. + +[] TableRow +A dynamic and theme-aware table row component that renders a specified number of columns using named slots. + +- numCells: number + The number of `` cells to render in the row. Defaults to `0`. + +Slots: +- ``, ``, etc. + Provide content for each column based on its index. The number of columns is defined by `numCells`. + +Behavior: +- Applies a theme-based class using `useTheme`. +- Each cell receives a class name like `column-1`, `column-2`, etc., for styling and layout control. +- Does not render cells if `numCells` is `0`. + + + + + + +# Checklist: + +# 📋 Component Checklist + +| Component Name | Developer | Status | exists? | Notes | +|----------------------------|-----------|-------------|---------|--------------------------------| +| ButtonText | | ☐ Complete | [ ] | | +| ButtonStacked | | ☐ Complete | [ ] | | +| ButtonDropdown | | ☐ Complete | [ ] | | +| ButtonTag | | ☐ Complete | [ ] | | +| BreadcrumbPill | | ☐ Complete | [ ] | | +| BreadcrumbBar | | ☐ Complete | [ ] | | +| ButtonIconOnly | | ☐ Complete | [ ] | | +| PaginationControl | | ☐ Complete | [ ] | | +| SectionLabel | | ☐ Complete | [ ] | | +| ButtonSubLink | | ☐ Complete | [ ] | | +| LibraryLogoButton | | ☐ Complete | [ ] | | +| PaginationNav | | ☐ Complete | [ ] | | +| CTAHexButton | | ☐ Complete | [ ] | | +| SearchResultsCount | | ☐ Complete | [ ] | | +| RefineSearchPanel | | ☐ Complete | [ ] | | +| FiltersDropdown | | ☐ Complete | [x] | | +| ResultsList | | ☐ Complete | [ ] | aka: CategoryList | +| DropdownSingleSelect | | ☐ Complete | [x] | | +| SideMenuAccordionPod | | ☐ Complete | [ ] | | +| ButtonDropdownSearch | | ☐ Complete | [ ] | | +| ButtonSubCategoryPod | | ☐ Complete | [ ] | | +| ButtonUCLALibrariesDropdown| | ☐ Complete | [ ] | | +| YearRangeFilter | | ☐ Complete | [x] | aka DateFilter? | +| BentoPod | | ☐ Complete | [ ] | | +| NotesAccordion | | ☐ Complete | [ ] | | +| ExcerptPod | | ☐ Complete | [ ] | | +| AssetFeaturedImage | | ☐ Complete | [ ] | | +| AssetPod | | ☐ Complete | [ ] | | +| BlockAsset | | ☐ Complete | [ ] | | +| SearchResult | | ☐ Complete | [x] | | +| BlockCollection | | ☐ Complete | [ ] | | +| MetadataTable | | ☐ Complete | [ ] | | +| BlockMediaViewer | | ☐ Complete | [ ] | | +| BlockRichText | | ☐ Complete | [ ] | | +| SectionHeader | | ☐ Complete | [x] | | +| BlockButtonList | | ☐ Complete | [ ] | | +| GridAssets | | ☐ Complete | [ ] | | +| GridCollections | | ☐ Complete | [ ] | | +| SearchField | | ☐ Complete | [x] | | +| EntryField | | ☐ Complete | [ ] | | +| ButtonSubmit | | ☐ Complete | [ ] | | +| Flash | | ☐ Complete | [ ] | | +| BentoBoxResult | | ☐ Complete | [ ] | | +| Dragger | | ☐ Complete | [ ] | | +| Banner | | ☐ Complete | [ ] | | +| Header | | ☐ Complete | [x] | aka: HeaderSite | +| Footer | | ☐ Complete | [ ] | | +| NewsletterSignup | | ☐ Complete | [ ] | | +| DetailHeader | | ☐ Complete | [ ] | aka: ItemHeaderBar | +| DetailMedia | | ☐ Complete | [ ] | aka: ViewerMedia | +| DetailOverview | | ☐ Complete | [ ] | aka: MetadataSplitPanel | +| SectionKeywords | | ☐ Complete | [ ] | | +| CollectionOverview | | ☐ Complete | [ ] | | +| CollectionFind | | ☐ Complete | [ ] | aka: CollectionReferencePanel | +| BannerFeatured | | ☐ Complete | [x] | | +| BlockTitle | | ☐ Complete | [ ] | | +| BlockButtons | | ☐ Complete | [ ] | | +| ContentSection | | ☐ Complete | [ ] | | +| BlockAnchorNav | | ☐ Complete | [ ] | aka: In-page TOC | +|AlphabeticalBrowseBy | | ☐ Complete | [x] | | \ No newline at end of file From bd57d86054b7906360c41c3ba770c5eae9d5f2db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Fri, 20 Jun 2025 18:14:09 +0200 Subject: [PATCH 02/98] Update COMPONENTS.md --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index fc23a1299..8cdac4d8c 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -15,7 +15,7 @@ A vertical stack of buttons, likely for grouped filter or action options. - buttons: Array<{ label: string, isActive: boolean }> - onClick: Function(index: number) -[] ButtonDropdown +[] ButtonDropdown (Svebor) Button paired with a dropdown menu indicator (carat or arrow). - label: string @@ -1160,4 +1160,4 @@ Behavior: | BlockButtons | | ☐ Complete | [ ] | | | ContentSection | | ☐ Complete | [ ] | | | BlockAnchorNav | | ☐ Complete | [ ] | aka: In-page TOC | -|AlphabeticalBrowseBy | | ☐ Complete | [x] | | \ No newline at end of file +|AlphabeticalBrowseBy | | ☐ Complete | [x] | | From 4fa76ad6c3817c7a9e367f72f7aebb8b75dde4e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Fri, 20 Jun 2025 18:22:09 +0200 Subject: [PATCH 03/98] Update COMPONENTS.md --- COMPONENTS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index 8cdac4d8c..efb4be90b 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -16,6 +16,7 @@ A vertical stack of buttons, likely for grouped filter or action options. - onClick: Function(index: number) [] ButtonDropdown (Svebor) + Button paired with a dropdown menu indicator (carat or arrow). - label: string From b4dc86dec09ba1e243753fc423c8b7cf60f3975e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Mon, 23 Jun 2025 18:04:43 +0200 Subject: [PATCH 04/98] Update COMPONENTS.md --- COMPONENTS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index efb4be90b..01134a6d2 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -15,7 +15,7 @@ A vertical stack of buttons, likely for grouped filter or action options. - buttons: Array<{ label: string, isActive: boolean }> - onClick: Function(index: number) -[] ButtonDropdown (Svebor) +[] ButtonDropdown Button paired with a dropdown menu indicator (carat or arrow). @@ -157,7 +157,7 @@ Expandable side menu category pod with grouped buttons and optional metadata (e. - categories: Array<{ label: string, buttons: Array<{ title: string, count: number }> }> - onSelect: Function(buttonTitle: string) -[] ButtonDropdownSearch +[] ButtonDropdownSearch Set of dropdowns to filter/search content by fields like “Title” or “Subject.” - label: string @@ -404,7 +404,7 @@ Primary site navigation including logo, main links, and utility search bar. ## Footer -[] Footer +[] Footer (Svebor) Main site footer for UCLA Library, assembling social links, navigation, and newsletter signup. - socialLinks: Array<{ label: string, href: string }> From 285e079b8a0440334705a79203248221d0331a8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Mon, 23 Jun 2025 20:46:26 +0200 Subject: [PATCH 05/98] Update COMPONENTS.md --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 01134a6d2..727a4d069 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -404,7 +404,7 @@ Primary site navigation including logo, main links, and utility search bar. ## Footer -[] Footer (Svebor) +[] Footer Main site footer for UCLA Library, assembling social links, navigation, and newsletter signup. - socialLinks: Array<{ label: string, href: string }> From 213a6406a1b85d2fb56e52965ac33ddef8537500 Mon Sep 17 00:00:00 2001 From: dchiamp Date: Mon, 23 Jun 2025 13:28:16 -0700 Subject: [PATCH 06/98] adds notes --- NOTES.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 NOTES.md diff --git a/NOTES.md b/NOTES.md new file mode 100644 index 000000000..5b88cf2bf --- /dev/null +++ b/NOTES.md @@ -0,0 +1,11 @@ +Designs: +https://www.figma.com/design/CDhWDARLb36ftkQce1LyLC/Breakpoints?node-id=1-25&m=dev + +https://www.figma.com/design/CDhWDARLb36ftkQce1LyLC/Breakpoints?node-id=1-26&p=f&m=dev + +Read in Recording: +https://drive.google.com/file/d/17tiGmE4aax-faoo5Rjue2Idbx3OGCFGa/view?usp=sharing + +Relevant Links +https://www.library.ucla.edu/ +https://digital.library.ucla.edu/catalog/ark:/21198/z1x98m6j \ No newline at end of file From 3004c746d09e6293442659774b595ff7db4ba965 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Tue, 24 Jun 2025 18:05:53 +0200 Subject: [PATCH 07/98] Update COMPONENTS.md --- COMPONENTS.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 727a4d069..aee4187ec 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -2,13 +2,16 @@ ## Buttons and Interface -[] ButtonText +[] ButtonText (Svebor) A minimal button with just text, possibly with variants like underline or subtle. - label: string - variant?: 'default' | 'underline' | 'subtle' - onClick: Function +[] ButtonPageView (Svebor) + A button that displayes items as a grid with more or less info + [] ButtonStacked A vertical stack of buttons, likely for grouped filter or action options. @@ -728,7 +731,7 @@ Behavior: - Displays a molecule stroke graphic and a right arrow icon. - Designed for compact, centered layouts. -[] DividerGeneral +[x] DividerGeneral A horizontal divider element with optional style modifiers. - isBold: boolean @@ -1102,8 +1105,10 @@ Behavior: | Component Name | Developer | Status | exists? | Notes | |----------------------------|-----------|-------------|---------|--------------------------------| -| ButtonText | | ☐ Complete | [ ] | | +| ButtonText |Svebor | ☐ Complete | [x] | Needs a font change | +| DividerGeneral |Svebor | ☐ Complete | [x] | | | ButtonStacked | | ☐ Complete | [ ] | | +| ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | | ButtonDropdown | | ☐ Complete | [ ] | | | ButtonTag | | ☐ Complete | [ ] | | | BreadcrumbPill | | ☐ Complete | [ ] | | From e9556375888f6f7caae7da58350b94d2f1cd486e Mon Sep 17 00:00:00 2001 From: Austin Blanchard Date: Tue, 24 Jun 2025 14:14:00 -0700 Subject: [PATCH 08/98] claimed component --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index aee4187ec..8d2cf6714 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -1112,7 +1112,7 @@ Behavior: | ButtonDropdown | | ☐ Complete | [ ] | | | ButtonTag | | ☐ Complete | [ ] | | | BreadcrumbPill | | ☐ Complete | [ ] | | -| BreadcrumbBar | | ☐ Complete | [ ] | | +| BreadcrumbBar |Austin | ☐ Complete | [ ] | | | ButtonIconOnly | | ☐ Complete | [ ] | | | PaginationControl | | ☐ Complete | [ ] | | | SectionLabel | | ☐ Complete | [ ] | | From d5e45d11091a02ea499632c214b9c42c22a58228 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Wed, 25 Jun 2025 15:20:57 +0200 Subject: [PATCH 09/98] Update COMPONENTS.md --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 8d2cf6714..20f836b9b 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -58,7 +58,7 @@ Just an icon button, used for tooltips, mobile actions, etc. - ariaLabel: string - onClick: Function -[] PaginationControl +[x] PaginationControl (svebor) Numbered pagination UI with previous/next arrows. - currentPage: number @@ -1114,7 +1114,7 @@ Behavior: | BreadcrumbPill | | ☐ Complete | [ ] | | | BreadcrumbBar |Austin | ☐ Complete | [ ] | | | ButtonIconOnly | | ☐ Complete | [ ] | | -| PaginationControl | | ☐ Complete | [ ] | | +| PaginationControl |Svebor | ☐ Complete | [x] | Needs a slight style/functionlity change | | SectionLabel | | ☐ Complete | [ ] | | | ButtonSubLink | | ☐ Complete | [ ] | | | LibraryLogoButton | | ☐ Complete | [ ] | | From d49eaf57cd8f8ccf0bd4ed39220125458cf3663c Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 25 Jun 2025 16:44:44 +0200 Subject: [PATCH 10/98] claim a component --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 20f836b9b..0d5d4a780 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -18,7 +18,7 @@ A vertical stack of buttons, likely for grouped filter or action options. - buttons: Array<{ label: string, isActive: boolean }> - onClick: Function(index: number) -[] ButtonDropdown +[] ButtonDropdown (Luka) Button paired with a dropdown menu indicator (carat or arrow). From 4b6cccf2208d4d005ebd5a15a8a4f87eb606cce1 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 25 Jun 2025 16:45:27 +0200 Subject: [PATCH 11/98] claim a component --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 0d5d4a780..f3275fab5 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -1109,7 +1109,7 @@ Behavior: | DividerGeneral |Svebor | ☐ Complete | [x] | | | ButtonStacked | | ☐ Complete | [ ] | | | ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | -| ButtonDropdown | | ☐ Complete | [ ] | | +| ButtonDropdown |Luka | ☐ Complete | [ ] | | | ButtonTag | | ☐ Complete | [ ] | | | BreadcrumbPill | | ☐ Complete | [ ] | | | BreadcrumbBar |Austin | ☐ Complete | [ ] | | From bfa79d4794fad5201fd266c1952e303a9ea8fc0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Wed, 25 Jun 2025 18:26:17 +0200 Subject: [PATCH 12/98] Update COMPONENTS.md --- COMPONENTS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index f3275fab5..07fd6876e 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -86,7 +86,7 @@ Branded button or label pairing logo with text. - label: string - to?: string -[] PaginationNav +[x] PaginationNav (svebor) Interactive pagination component with numbered buttons, previous/next navigation, and ellipsis for long ranges. - currentPage: number @@ -1046,7 +1046,7 @@ Child components: - `SmartLink` – Used for navigable breadcrumb segments. - `SvgIconCaretRight` – Shown between breadcrumb segments. -[] PaginationNav +[x] PaginationNav (svebor) A responsive, theme-aware pagination component that supports legacy navigation links or dynamically generated page buttons. Works with route query parameters and can be customized with a callback. - nextTo?: string @@ -1118,7 +1118,7 @@ Behavior: | SectionLabel | | ☐ Complete | [ ] | | | ButtonSubLink | | ☐ Complete | [ ] | | | LibraryLogoButton | | ☐ Complete | [ ] | | -| PaginationNav | | ☐ Complete | [ ] | | +| PaginationNav |Svebor | ☐ Complete | [x] |Adjusted the styles and a little bit of logic | | CTAHexButton | | ☐ Complete | [ ] | | | SearchResultsCount | | ☐ Complete | [ ] | | | RefineSearchPanel | | ☐ Complete | [ ] | | From 4852133f2cda8866f20e890225ac976e0506a459 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Wed, 25 Jun 2025 18:30:38 +0200 Subject: [PATCH 13/98] Update COMPONENTS.md --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 07fd6876e..7c4e76071 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -94,7 +94,7 @@ Interactive pagination component with numbered buttons, previous/next navigation - showEdges?: boolean (e.g. show first/last page) - siblingCount?: number (how many pages around current to show) -[] CTAHexButton +[x] CTAHexButton (svebor) Prominent hex-shaped call-to-action button with icon and label. - label: string @@ -1119,7 +1119,7 @@ Behavior: | ButtonSubLink | | ☐ Complete | [ ] | | | LibraryLogoButton | | ☐ Complete | [ ] | | | PaginationNav |Svebor | ☐ Complete | [x] |Adjusted the styles and a little bit of logic | -| CTAHexButton | | ☐ Complete | [ ] | | +| CTAHexButton |Svebor | ☐ Complete | [x] |Exists, ready to use | | SearchResultsCount | | ☐ Complete | [ ] | | | RefineSearchPanel | | ☐ Complete | [ ] | | | FiltersDropdown | | ☐ Complete | [x] | | From 212097496fc7760d30c0f934c2954cf603cc69d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Wed, 25 Jun 2025 18:33:31 +0200 Subject: [PATCH 14/98] Update COMPONENTS.md --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 7c4e76071..aae0ae9b6 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -102,7 +102,7 @@ Prominent hex-shaped call-to-action button with icon and label. - to: string - variant?: 'primary' | 'secondary' -[] SearchResultsCount +[] SearchResultsCount (svebor) Displays the number of results returned in a search. - count: number @@ -1120,7 +1120,7 @@ Behavior: | LibraryLogoButton | | ☐ Complete | [ ] | | | PaginationNav |Svebor | ☐ Complete | [x] |Adjusted the styles and a little bit of logic | | CTAHexButton |Svebor | ☐ Complete | [x] |Exists, ready to use | -| SearchResultsCount | | ☐ Complete | [ ] | | +| SearchResultsCount |Svebor | ☐ Complete | [ ] |WIP | | RefineSearchPanel | | ☐ Complete | [ ] | | | FiltersDropdown | | ☐ Complete | [x] | | | ResultsList | | ☐ Complete | [ ] | aka: CategoryList | From c5d0581397f6f5b2bbef5c40076e41973a466f51 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 25 Jun 2025 19:12:00 +0200 Subject: [PATCH 15/98] take a component --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index aae0ae9b6..be74743e6 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -340,7 +340,7 @@ Basic labeled input field for user entry. Can be reused for search or other form - placeholder?: string - onInput: Function(value: string) -[] ButtonSubmit +[] ButtonSubmit(Luka) Search submit button, typically displayed as a magnifying glass icon. - onClick: Function @@ -1147,7 +1147,7 @@ Behavior: | GridCollections | | ☐ Complete | [ ] | | | SearchField | | ☐ Complete | [x] | | | EntryField | | ☐ Complete | [ ] | | -| ButtonSubmit | | ☐ Complete | [ ] | | +| ButtonSubmit |Luka | ☐ Complete | [ ] | | | Flash | | ☐ Complete | [ ] | | | BentoBoxResult | | ☐ Complete | [ ] | | | Dragger | | ☐ Complete | [ ] | | From af0a6b36d02b554e23602d607ad77eda30f32d7c Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 25 Jun 2025 21:59:04 +0200 Subject: [PATCH 16/98] take a component --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index be74743e6..34f0f42cd 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -324,7 +324,7 @@ Vertical or horizontal list of buttons linking to specific tools or resources. ## Search -[] SearchField +[] SearchField (Luka) Composed search input and submit button. Likely wraps `EntryField` and `ButtonSubmit`. - modelValue: string @@ -1145,7 +1145,7 @@ Behavior: | BlockButtonList | | ☐ Complete | [ ] | | | GridAssets | | ☐ Complete | [ ] | | | GridCollections | | ☐ Complete | [ ] | | -| SearchField | | ☐ Complete | [x] | | +| SearchField |Luka | ☐ Complete | [x] | | | EntryField | | ☐ Complete | [ ] | | | ButtonSubmit |Luka | ☐ Complete | [ ] | | | Flash | | ☐ Complete | [ ] | | From 2e73be717ddb2f54910893f070f88d330fef0be3 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 25 Jun 2025 21:59:39 +0200 Subject: [PATCH 17/98] take a component --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 34f0f42cd..97f0f46d5 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -332,7 +332,7 @@ Composed search input and submit button. Likely wraps `EntryField` and `ButtonSu - onSearch: Function(value: string) - autoFocus?: boolean -[] EntryField +[] EntryField(Luka) Basic labeled input field for user entry. Can be reused for search or other forms. - label: string @@ -1146,7 +1146,7 @@ Behavior: | GridAssets | | ☐ Complete | [ ] | | | GridCollections | | ☐ Complete | [ ] | | | SearchField |Luka | ☐ Complete | [x] | | -| EntryField | | ☐ Complete | [ ] | | +| EntryField |Luka | ☐ Complete | [ ] | | | ButtonSubmit |Luka | ☐ Complete | [ ] | | | Flash | | ☐ Complete | [ ] | | | BentoBoxResult | | ☐ Complete | [ ] | | From 88bfe5ec9f140777eb56093411ddadba09dd4751 Mon Sep 17 00:00:00 2001 From: Austin Blanchard Date: Wed, 25 Jun 2025 13:28:11 -0700 Subject: [PATCH 18/98] Update COMPONENTS.md --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 97f0f46d5..5a5490eeb 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -79,7 +79,7 @@ Secondary inline button or link, often used for minimal navigation or contextual - variant?: 'default' | 'subtle' - icon?: string -[] LibraryLogoButton +[] LibraryLogoButton (austin) Branded button or label pairing logo with text. - logoSrc: string @@ -1117,7 +1117,7 @@ Behavior: | PaginationControl |Svebor | ☐ Complete | [x] | Needs a slight style/functionlity change | | SectionLabel | | ☐ Complete | [ ] | | | ButtonSubLink | | ☐ Complete | [ ] | | -| LibraryLogoButton | | ☐ Complete | [ ] | | +| LibraryLogoButton |Austin | ☐ Complete | [ ] | | | PaginationNav |Svebor | ☐ Complete | [x] |Adjusted the styles and a little bit of logic | | CTAHexButton |Svebor | ☐ Complete | [x] |Exists, ready to use | | SearchResultsCount |Svebor | ☐ Complete | [ ] |WIP | From 22b88d7e8fc5cddb908d7000d5a780c16057eec8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Thu, 26 Jun 2025 17:39:21 +0200 Subject: [PATCH 19/98] Update COMPONENTS.md --- COMPONENTS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 5a5490eeb..d90d46b05 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -213,7 +213,7 @@ Displays a summary of a library or collection and a list of associated assets. I - onToggle: Function -[] NotesAccordion +[] NotesAccordion(svebor) Expandable section for showing grouped text content like notes and captions. Can optionally display an excerpt pod. - sections: Array<{ @@ -1120,7 +1120,7 @@ Behavior: | LibraryLogoButton |Austin | ☐ Complete | [ ] | | | PaginationNav |Svebor | ☐ Complete | [x] |Adjusted the styles and a little bit of logic | | CTAHexButton |Svebor | ☐ Complete | [x] |Exists, ready to use | -| SearchResultsCount |Svebor | ☐ Complete | [ ] |WIP | +| SearchResultsCount |Svebor | ☐ Complete | [ ] |Made a PR | | RefineSearchPanel | | ☐ Complete | [ ] | | | FiltersDropdown | | ☐ Complete | [x] | | | ResultsList | | ☐ Complete | [ ] | aka: CategoryList | @@ -1131,7 +1131,7 @@ Behavior: | ButtonUCLALibrariesDropdown| | ☐ Complete | [ ] | | | YearRangeFilter | | ☐ Complete | [x] | aka DateFilter? | | BentoPod | | ☐ Complete | [ ] | | -| NotesAccordion | | ☐ Complete | [ ] | | +| NotesAccordion |Svebor | ☐ Complete | [ ] | WIP | | ExcerptPod | | ☐ Complete | [ ] | | | AssetFeaturedImage | | ☐ Complete | [ ] | | | AssetPod | | ☐ Complete | [ ] | | From 498ab737c651f6039f99065e7263de7f606fc408 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Mon, 30 Jun 2025 11:47:34 +0200 Subject: [PATCH 20/98] Adjust the component name - already exists --- COMPONENTS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index d90d46b05..0b0462b25 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -86,7 +86,7 @@ Branded button or label pairing logo with text. - label: string - to?: string -[x] PaginationNav (svebor) +[x] SectionPagination (svebor) Interactive pagination component with numbered buttons, previous/next navigation, and ellipsis for long ranges. - currentPage: number @@ -1046,7 +1046,7 @@ Child components: - `SmartLink` – Used for navigable breadcrumb segments. - `SvgIconCaretRight` – Shown between breadcrumb segments. -[x] PaginationNav (svebor) +[x] SectionPagination (svebor) A responsive, theme-aware pagination component that supports legacy navigation links or dynamically generated page buttons. Works with route query parameters and can be customized with a callback. - nextTo?: string @@ -1118,7 +1118,7 @@ Behavior: | SectionLabel | | ☐ Complete | [ ] | | | ButtonSubLink | | ☐ Complete | [ ] | | | LibraryLogoButton |Austin | ☐ Complete | [ ] | | -| PaginationNav |Svebor | ☐ Complete | [x] |Adjusted the styles and a little bit of logic | +| SectionPagination |Svebor | ☐ Complete | [x] |Adjusted the styles and a little bit of logic | | CTAHexButton |Svebor | ☐ Complete | [x] |Exists, ready to use | | SearchResultsCount |Svebor | ☐ Complete | [ ] |Made a PR | | RefineSearchPanel | | ☐ Complete | [ ] | | From 95a1121943cc017396926f745f4a0ef98276ee1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Mon, 30 Jun 2025 18:43:09 +0200 Subject: [PATCH 21/98] UCLA - NotesAccordion --- .../src/lib-components/NotesAccordion.vue | 167 ++++++++++++++++++ .../src/stories/NotesAccordion.stories.js | 47 +++++ 2 files changed, 214 insertions(+) create mode 100644 packages/vue-component-library/src/lib-components/NotesAccordion.vue create mode 100644 packages/vue-component-library/src/stories/NotesAccordion.stories.js diff --git a/packages/vue-component-library/src/lib-components/NotesAccordion.vue b/packages/vue-component-library/src/lib-components/NotesAccordion.vue new file mode 100644 index 000000000..8c55f78d4 --- /dev/null +++ b/packages/vue-component-library/src/lib-components/NotesAccordion.vue @@ -0,0 +1,167 @@ + + + + + diff --git a/packages/vue-component-library/src/stories/NotesAccordion.stories.js b/packages/vue-component-library/src/stories/NotesAccordion.stories.js new file mode 100644 index 000000000..f73f5ef33 --- /dev/null +++ b/packages/vue-component-library/src/stories/NotesAccordion.stories.js @@ -0,0 +1,47 @@ +import NotesAccordion from '@/lib-components/NotesAccordion.vue' + +export default { + title: 'Funkhaus / NotesAccordion', + component: NotesAccordion, + argTypes: { + title: { control: 'text', description: 'Accordion title (HTML allowed)' }, + text: { control: 'text', description: 'Accordion content (HTML allowed)' }, + labelOpen: { control: 'text', description: 'Label when open' }, + labelClose: { control: 'text', description: 'Label when closed' }, + }, + args: { + title: 'Accordion Title', + text: 'This is the accordion content. You can use HTML here.', + labelOpen: 'Show Less', + labelClose: 'Show More', + }, +} + +const Template = (args, { updateArgs }) => ({ + components: { NotesAccordion }, + setup() { + return { args } + }, + template: ` + + `, +}) + +export const Default = Template.bind({}) +Default.args = { + labelOpen: 'Show Less', + labelClose: 'Show More', + text: 'This is the accordion content. You can use HTML here.', +} + +export const MoreText = Template.bind({}) +MoreText.args = { + labelOpen: 'Show Less', + labelClose: 'Show More', + text: 'IInani oratio numquam ea ius, per nihil mollis percipitur te. Mundi omittam fastidii ius ex. Mel ex everti consequat, sit equidem corrumpit adversarium cu. Sed an facer utroque. Pro dictas praesent delicatissimi in, ceteros nostrum blandit cu nec. Audire iisque id vis, sea cu omnes democritum temporibus.Eu vel dicam soluta, id omnis impetus pro. Error vocibus tacimates vim ut. Est in eirmod oblique.Inani oratio numquam ea ius, per nihil mollis percipitur te. Mundi omittam fastidii ius ex. Mel ex everti consequat, sit equidem corrumpit adversarium cu. Sed an facer utroque. Pro dictas praesent delicatissimi in, ceteros nostrum blandit cu nec. Audire iisque id vis, sea cu omnes democritum temporibus.Eu vel dicam soluta, id omnis impetus pro. Error vocibus tacimates vim ut. Est in eirmod oblique.', +} \ No newline at end of file From 09c2fd02070ad048b28c5c1d7e3f60a017efac61 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Tue, 1 Jul 2025 18:31:45 +0200 Subject: [PATCH 22/98] take a component --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 0b0462b25..c87013acb 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -28,7 +28,7 @@ Button paired with a dropdown menu indicator (carat or arrow). - options: string[] - onSelect: Function(option: string) -[] ButtonTag +[] ButtonTag (Luka) Used as labeled categories or tags, possibly dismissible. - label: string From 0c75f77f17d58e7901a27f716c4ad91a06ec4961 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Tue, 1 Jul 2025 18:32:05 +0200 Subject: [PATCH 23/98] take a component --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index c87013acb..19fa27519 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -1110,7 +1110,7 @@ Behavior: | ButtonStacked | | ☐ Complete | [ ] | | | ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | | ButtonDropdown |Luka | ☐ Complete | [ ] | | -| ButtonTag | | ☐ Complete | [ ] | | +| ButtonTag |Luka | ☐ Complete | [ ] | | | BreadcrumbPill | | ☐ Complete | [ ] | | | BreadcrumbBar |Austin | ☐ Complete | [ ] | | | ButtonIconOnly | | ☐ Complete | [ ] | | From a7bf5fa1a18b57a5f3254b9839a2b1ea7e02a2df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Tue, 1 Jul 2025 19:01:56 +0200 Subject: [PATCH 24/98] Update COMPONENTS.md - marks footer as already existing --- COMPONENTS.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 19fa27519..7a4a3f954 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -407,7 +407,7 @@ Primary site navigation including logo, main links, and utility search bar. ## Footer -[] Footer +[x] Footer Main site footer for UCLA Library, assembling social links, navigation, and newsletter signup. - socialLinks: Array<{ label: string, href: string }> @@ -415,7 +415,7 @@ Main site footer for UCLA Library, assembling social links, navigation, and news - copyright?: string - newsletter -[] NewsletterSignup +[x] NewsletterSignup Standalone newsletter form for email subscription. - headline: string @@ -879,7 +879,7 @@ Behavior: Child components: - `SmartLink` – Used for all link rendering. -[] FooterMain +[x] FooterMain The primary footer container that conditionally renders sponsor sections, link groups, subscription forms, and legal text based on theme context. Behavior: @@ -897,7 +897,7 @@ Child components: - `FooterLinks` (optional) - `FooterSock` -[] FooterSponsor +[x] FooterSponsor Displays a sponsor acknowledgment message and a list of supporting organizations, pulled from global store data. Behavior: @@ -914,7 +914,7 @@ Behavior: Child components: - `BlockSponsor` – Rendered once per funder in the list. -[] FooterPrimary +[x] FooterPrimary The primary content area of the site footer. Displays a logo, social media links, press links, and a Mailchimp-powered newsletter signup form. Appearance and content vary by theme. - form: boolean @@ -936,7 +936,7 @@ Child components: - `SmartLink` – Used for internal routing. - `component :is` – Dynamically renders SVG icons for logos and buttons. -[] FooterSock +[x] FooterSock The bottom-most section of the site footer, displaying copyright and additional legal or policy-related links. @@ -1153,7 +1153,7 @@ Behavior: | Dragger | | ☐ Complete | [ ] | | | Banner | | ☐ Complete | [ ] | | | Header | | ☐ Complete | [x] | aka: HeaderSite | -| Footer | | ☐ Complete | [ ] | | +| Footer | | ☐ Complete | [x] | | | NewsletterSignup | | ☐ Complete | [ ] | | | DetailHeader | | ☐ Complete | [ ] | aka: ItemHeaderBar | | DetailMedia | | ☐ Complete | [ ] | aka: ViewerMedia | From 069c12362e9782098a0459a3b69b772489696c9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Mon, 7 Jul 2025 18:27:37 +0200 Subject: [PATCH 25/98] Update COMPONENTS.md --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 7a4a3f954..4202ecb12 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -223,7 +223,7 @@ Expandable section for showing grouped text content like notes and captions. Can - isExpanded: boolean - onToggle: Function -[] ExcerptPod +[] ExcerptPod (Svebor) Highlighted or emphasized snippet of text content within another component (like Notes). Often includes links and formatted text. - content: string (HTML or rich text) From cdb4a86c134a148c8da515dbd6d0eada59fead07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Mon, 7 Jul 2025 19:34:48 +0200 Subject: [PATCH 26/98] Update COMPONENTS.md --- COMPONENTS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index 4202ecb12..bb13a40e6 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -224,6 +224,7 @@ Expandable section for showing grouped text content like notes and captions. Can - onToggle: Function [] ExcerptPod (Svebor) + Highlighted or emphasized snippet of text content within another component (like Notes). Often includes links and formatted text. - content: string (HTML or rich text) From 3bb30e348a3e910bb1c63106c5560af01d0b2057 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Mon, 7 Jul 2025 21:17:23 +0200 Subject: [PATCH 27/98] ExcerptPod clean up/unify prop defininitions create ExcerptPod component --- .../src/lib-components/ExcerptPod.vue | 123 +++++++++++++ .../src/lib-components/NotesAccordion.vue | 170 ++++++++++-------- .../src/stories/ExcerptPod.stories.js | 71 ++++++++ .../src/stories/NotesAccordion.stories.js | 52 +++--- 4 files changed, 316 insertions(+), 100 deletions(-) create mode 100644 packages/vue-component-library/src/lib-components/ExcerptPod.vue create mode 100644 packages/vue-component-library/src/stories/ExcerptPod.stories.js diff --git a/packages/vue-component-library/src/lib-components/ExcerptPod.vue b/packages/vue-component-library/src/lib-components/ExcerptPod.vue new file mode 100644 index 000000000..1dc2d26c7 --- /dev/null +++ b/packages/vue-component-library/src/lib-components/ExcerptPod.vue @@ -0,0 +1,123 @@ + + + + + diff --git a/packages/vue-component-library/src/lib-components/NotesAccordion.vue b/packages/vue-component-library/src/lib-components/NotesAccordion.vue index 8c55f78d4..615c8994e 100644 --- a/packages/vue-component-library/src/lib-components/NotesAccordion.vue +++ b/packages/vue-component-library/src/lib-components/NotesAccordion.vue @@ -1,97 +1,108 @@ diff --git a/packages/vue-component-library/src/stories/ExcerptPod.stories.js b/packages/vue-component-library/src/stories/ExcerptPod.stories.js new file mode 100644 index 000000000..f8953e092 --- /dev/null +++ b/packages/vue-component-library/src/stories/ExcerptPod.stories.js @@ -0,0 +1,71 @@ +import ExcerptPod from '@/lib-components/ExcerptPod.vue' + +export default { + title: 'Funkhaus / ExcerptPod', + component: ExcerptPod, + argTypes: { + title: { control: 'text', description: 'Accordion title (HTML allowed)' }, + text: { control: 'text', description: 'Accordion content (HTML allowed)' }, + accordions: { control: 'object', description: 'Array of accordion sections' }, + labelOpen: { control: 'text', description: 'Label when open' }, + labelClose: { control: 'text', description: 'Label when closed' }, + } +} + +const Template = (args) => ({ + components: { ExcerptPod }, + setup() { + return { args } + }, + template: ` + + `, +}) + +export const Default = Template.bind({}) +Default.args = { + title: 'Notes', + subtitle: 'Subtitle goes hereeee', + text: 'PAIN PILLS-These pills Danny Thomas takes for his voice cause pain in one place, his purse.', + accordions: [ + { + title: 'Accordion Section', + text: 'Accordion content goes here. It can be as long as you want, and it can include HTML tags.', + } + ], + labelOpen: 'Show Less', + labelClose: 'Show More', +} +export const EmptyProps = Template.bind({}) +EmptyProps.args = { + ...Default.args, + accordions: [{}], +} + +export const MoreSections = Template.bind({}) +MoreSections.args = { + ...Default.args, + accordions: [ + { + title: 'Section 1', + text: 'First section content.', + }, + { + title: 'Section 2', + text: 'Second section content.', + }, + { + title: 'Section 3', + text: 'Third section content.', + }, + ], + labelOpen: 'Collapse All', + labelClose: 'Expand All', +} \ No newline at end of file diff --git a/packages/vue-component-library/src/stories/NotesAccordion.stories.js b/packages/vue-component-library/src/stories/NotesAccordion.stories.js index f73f5ef33..8fd535f06 100644 --- a/packages/vue-component-library/src/stories/NotesAccordion.stories.js +++ b/packages/vue-component-library/src/stories/NotesAccordion.stories.js @@ -4,28 +4,20 @@ export default { title: 'Funkhaus / NotesAccordion', component: NotesAccordion, argTypes: { - title: { control: 'text', description: 'Accordion title (HTML allowed)' }, - text: { control: 'text', description: 'Accordion content (HTML allowed)' }, + items: { control: 'object', description: 'Array of accordion sections' }, labelOpen: { control: 'text', description: 'Label when open' }, labelClose: { control: 'text', description: 'Label when closed' }, - }, - args: { - title: 'Accordion Title', - text: 'This is the accordion content. You can use HTML here.', - labelOpen: 'Show Less', - labelClose: 'Show More', - }, + } } -const Template = (args, { updateArgs }) => ({ +const Template = (args) => ({ components: { NotesAccordion }, setup() { return { args } }, template: ` @@ -34,14 +26,30 @@ const Template = (args, { updateArgs }) => ({ export const Default = Template.bind({}) Default.args = { - labelOpen: 'Show Less', - labelClose: 'Show More', - text: 'This is the accordion content. You can use HTML here.', -} + items: [ + { + title: 'Background', + text: 'IInani oratio numquam ea ius, per nihil mollis percipitur te. Mundi omittam fastidii ius ex. Mel ex everti consequat, sit equidem corrumpit adversarium cu. Sed an facer utroque. Pro dictas praesent delicatissimi in, ceteros nostrum blandit cu nec. Audire iisque id vis, sea cu omnes democritum temporibus.Eu vel dicam soluta, id omnis impetus pro. Error vocibus tacimates vim ut. Est in eirmod oblique.Inani oratio numquam ea ius, per nihil mollis percipitur te. Mundi omittam fastidii ius ex. Mel ex everti consequat, sit equidem corrumpit adversarium cu. Sed an facer utroque. Pro dictas praesent delicatissimi in, ceteros nostrum blandit cu nec. Audire iisque id vis, sea cu omnes democritum temporibus.Eu vel dicam soluta, id omnis impetus pro. Error vocibus tacimates vim ut. Est in eirmod oblique.', + }, + ] +} -export const MoreText = Template.bind({}) -MoreText.args = { - labelOpen: 'Show Less', - labelClose: 'Show More', - text: 'IInani oratio numquam ea ius, per nihil mollis percipitur te. Mundi omittam fastidii ius ex. Mel ex everti consequat, sit equidem corrumpit adversarium cu. Sed an facer utroque. Pro dictas praesent delicatissimi in, ceteros nostrum blandit cu nec. Audire iisque id vis, sea cu omnes democritum temporibus.Eu vel dicam soluta, id omnis impetus pro. Error vocibus tacimates vim ut. Est in eirmod oblique.Inani oratio numquam ea ius, per nihil mollis percipitur te. Mundi omittam fastidii ius ex. Mel ex everti consequat, sit equidem corrumpit adversarium cu. Sed an facer utroque. Pro dictas praesent delicatissimi in, ceteros nostrum blandit cu nec. Audire iisque id vis, sea cu omnes democritum temporibus.Eu vel dicam soluta, id omnis impetus pro. Error vocibus tacimates vim ut. Est in eirmod oblique.', -} \ No newline at end of file +export const MoreSections = Template.bind({}) +MoreSections.args = { + items: [ + { + title: 'Section 1', + text: 'First section content.', + }, + { + title: 'Section 2', + text: 'Second section content.', + }, + { + title: 'Section 3', + text: 'Third section content.', + }, + ], + labelOpen: 'Collapse All', + labelClose: 'Expand All', +} \ No newline at end of file From 8a2983753bfdc06587d643c24b5ad32baf13fe49 Mon Sep 17 00:00:00 2001 From: Austin Blanchard Date: Mon, 7 Jul 2025 15:12:12 -0700 Subject: [PATCH 28/98] Update COMPONENTS.md --- COMPONENTS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index bb13a40e6..3dfe1b748 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -65,7 +65,7 @@ Numbered pagination UI with previous/next arrows. - totalPages: number - onPageChange: Function(newPage: number) -[] SectionLabel +[] SectionLabel (austin) Non-interactive text element that might be grouped with buttons (e.g. “RESEARCH”). - text: string @@ -1113,10 +1113,10 @@ Behavior: | ButtonDropdown |Luka | ☐ Complete | [ ] | | | ButtonTag |Luka | ☐ Complete | [ ] | | | BreadcrumbPill | | ☐ Complete | [ ] | | -| BreadcrumbBar |Austin | ☐ Complete | [ ] | | +| BreadcrumbBar | | ☐ Complete | [ ] | | | ButtonIconOnly | | ☐ Complete | [ ] | | | PaginationControl |Svebor | ☐ Complete | [x] | Needs a slight style/functionlity change | -| SectionLabel | | ☐ Complete | [ ] | | +| SectionLabel |Austin | ☐ Complete | [ ] | | | ButtonSubLink | | ☐ Complete | [ ] | | | LibraryLogoButton |Austin | ☐ Complete | [ ] | | | SectionPagination |Svebor | ☐ Complete | [x] |Adjusted the styles and a little bit of logic | From 7bdfa7a01c9fab22f80155e1bbfb386e703485bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Tue, 8 Jul 2025 09:47:59 +0200 Subject: [PATCH 29/98] Update COMPONENTS.md - marking BentoPod --- COMPONENTS.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 3dfe1b748..c080afa6a 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -195,7 +195,8 @@ Range selector with start and end year inputs and a confirm button. ## Accordions -[] BentoPod +[] BentoPod (Svebor) + Displays a summary of a library or collection and a list of associated assets. Includes a collapsible "More/Less Results" toggle. - title: string @@ -1131,8 +1132,8 @@ Behavior: | ButtonSubCategoryPod | | ☐ Complete | [ ] | | | ButtonUCLALibrariesDropdown| | ☐ Complete | [ ] | | | YearRangeFilter | | ☐ Complete | [x] | aka DateFilter? | -| BentoPod | | ☐ Complete | [ ] | | -| NotesAccordion |Svebor | ☐ Complete | [ ] | WIP | +| BentoPod |Svebor | ☐ Complete | [ ] | WIP | +| NotesAccordion |Svebor | ☐ Complete | [ ] | in a PR | | ExcerptPod | | ☐ Complete | [ ] | | | AssetFeaturedImage | | ☐ Complete | [ ] | | | AssetPod | | ☐ Complete | [ ] | | From bc0154d9bc8318d45bc478aba44f2be0c8e58459 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Tue, 8 Jul 2025 16:08:08 +0200 Subject: [PATCH 30/98] add component --- COMPONENTS.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index c080afa6a..62155c804 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -36,6 +36,14 @@ Used as labeled categories or tags, possibly dismissible. - onClick: Function - onRemove?: Function +[] ButtonRemoveSearchFilter (Luka) +Wraps ButtonTag, adds X icon on the right which invokes onRemove + +- title: string +- isSelected: boolean +- iconName: string; +- onRemove?: Function + [] Breadcrumb [] BreadcrumbPill From 597ef571d351b0ecc87b11d5683dd64160265f34 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Tue, 8 Jul 2025 16:09:34 +0200 Subject: [PATCH 31/98] add component --- COMPONENTS.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 62155c804..201cd59c9 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -1120,7 +1120,8 @@ Behavior: | ButtonStacked | | ☐ Complete | [ ] | | | ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | | ButtonDropdown |Luka | ☐ Complete | [ ] | | -| ButtonTag |Luka | ☐ Complete | [ ] | | +| ButtonTag |Luka | ☐ Complete | [x] | aka: BlockTag | +| ButtonRemoveSearchFilter |Luka | ☐ Complete | [x] | aka: BlockRemoveSearchFilter | | BreadcrumbPill | | ☐ Complete | [ ] | | | BreadcrumbBar | | ☐ Complete | [ ] | | | ButtonIconOnly | | ☐ Complete | [ ] | | From 02aafc72d019c401a58cb85e6c1bd34a61db40da Mon Sep 17 00:00:00 2001 From: Austin Blanchard Date: Tue, 8 Jul 2025 15:22:46 -0700 Subject: [PATCH 32/98] Update COMPONENTS.md --- COMPONENTS.md | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 201cd59c9..c3f23fe0f 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -36,14 +36,6 @@ Used as labeled categories or tags, possibly dismissible. - onClick: Function - onRemove?: Function -[] ButtonRemoveSearchFilter (Luka) -Wraps ButtonTag, adds X icon on the right which invokes onRemove - -- title: string -- isSelected: boolean -- iconName: string; -- onRemove?: Function - [] Breadcrumb [] BreadcrumbPill @@ -203,8 +195,7 @@ Range selector with start and end year inputs and a confirm button. ## Accordions -[] BentoPod (Svebor) - +[] BentoPod Displays a summary of a library or collection and a list of associated assets. Includes a collapsible "More/Less Results" toggle. - title: string @@ -259,7 +250,7 @@ Vertical media block representing a digital library asset. Contains metadata, li - thumbnails: Array - isCondensed?: boolean -[] BlockAsset +[] BlockAsset (austin) Card for an individual digital library asset. - image: string @@ -326,7 +317,7 @@ Vertical or horizontal list of buttons linking to specific tools or resources. ## Grids -[] GridAssets +[] GridAssets (austin) - items: [BlockAsset] [] GridCollections @@ -1120,8 +1111,7 @@ Behavior: | ButtonStacked | | ☐ Complete | [ ] | | | ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | | ButtonDropdown |Luka | ☐ Complete | [ ] | | -| ButtonTag |Luka | ☐ Complete | [x] | aka: BlockTag | -| ButtonRemoveSearchFilter |Luka | ☐ Complete | [x] | aka: BlockRemoveSearchFilter | +| ButtonTag |Luka | ☐ Complete | [ ] | | | BreadcrumbPill | | ☐ Complete | [ ] | | | BreadcrumbBar | | ☐ Complete | [ ] | | | ButtonIconOnly | | ☐ Complete | [ ] | | @@ -1141,12 +1131,12 @@ Behavior: | ButtonSubCategoryPod | | ☐ Complete | [ ] | | | ButtonUCLALibrariesDropdown| | ☐ Complete | [ ] | | | YearRangeFilter | | ☐ Complete | [x] | aka DateFilter? | -| BentoPod |Svebor | ☐ Complete | [ ] | WIP | -| NotesAccordion |Svebor | ☐ Complete | [ ] | in a PR | +| BentoPod | | ☐ Complete | [ ] | | +| NotesAccordion |Svebor | ☐ Complete | [ ] | WIP | | ExcerptPod | | ☐ Complete | [ ] | | | AssetFeaturedImage | | ☐ Complete | [ ] | | | AssetPod | | ☐ Complete | [ ] | | -| BlockAsset | | ☐ Complete | [ ] | | +| BlockAsset |Austin | ☐ Complete | [ ] | | | SearchResult | | ☐ Complete | [x] | | | BlockCollection | | ☐ Complete | [ ] | | | MetadataTable | | ☐ Complete | [ ] | | @@ -1154,7 +1144,7 @@ Behavior: | BlockRichText | | ☐ Complete | [ ] | | | SectionHeader | | ☐ Complete | [x] | | | BlockButtonList | | ☐ Complete | [ ] | | -| GridAssets | | ☐ Complete | [ ] | | +| GridAssets |Austin | ☐ Complete | [ ] | | | GridCollections | | ☐ Complete | [ ] | | | SearchField |Luka | ☐ Complete | [x] | | | EntryField |Luka | ☐ Complete | [ ] | | From e675c1b176e0867873708cf609fb08ad84ab57cf Mon Sep 17 00:00:00 2001 From: Austin Blanchard Date: Tue, 8 Jul 2025 15:27:10 -0700 Subject: [PATCH 33/98] Update COMPONENTS.md --- COMPONENTS.md | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index c3f23fe0f..078c11167 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -36,6 +36,14 @@ Used as labeled categories or tags, possibly dismissible. - onClick: Function - onRemove?: Function +[] ButtonRemoveSearchFilter (Luka) +Wraps ButtonTag, adds X icon on the right which invokes onRemove + +- title: string +- isSelected: boolean +- iconName: string; +- onRemove?: Function + [] Breadcrumb [] BreadcrumbPill @@ -195,7 +203,7 @@ Range selector with start and end year inputs and a confirm button. ## Accordions -[] BentoPod +[] BentoPod (Svebor) Displays a summary of a library or collection and a list of associated assets. Includes a collapsible "More/Less Results" toggle. - title: string @@ -1111,7 +1119,8 @@ Behavior: | ButtonStacked | | ☐ Complete | [ ] | | | ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | | ButtonDropdown |Luka | ☐ Complete | [ ] | | -| ButtonTag |Luka | ☐ Complete | [ ] | | +| ButtonTag |Luka | ☐ Complete | [x] | aka: BlockTag | +| ButtonRemoveSearchFilter |Luka | ☐ Complete | [x] | aka: BlockRemoveSearchFilter | | BreadcrumbPill | | ☐ Complete | [ ] | | | BreadcrumbBar | | ☐ Complete | [ ] | | | ButtonIconOnly | | ☐ Complete | [ ] | | @@ -1131,8 +1140,8 @@ Behavior: | ButtonSubCategoryPod | | ☐ Complete | [ ] | | | ButtonUCLALibrariesDropdown| | ☐ Complete | [ ] | | | YearRangeFilter | | ☐ Complete | [x] | aka DateFilter? | -| BentoPod | | ☐ Complete | [ ] | | -| NotesAccordion |Svebor | ☐ Complete | [ ] | WIP | +| BentoPod |Svebor | ☐ Complete | [ ] | WIP | +| NotesAccordion |Svebor | ☐ Complete | [ ] | in a PR | | ExcerptPod | | ☐ Complete | [ ] | | | AssetFeaturedImage | | ☐ Complete | [ ] | | | AssetPod | | ☐ Complete | [ ] | | From 2933c6de822ab8ecfe05f8de605350fccae584a2 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 9 Jul 2025 21:53:52 +0200 Subject: [PATCH 34/98] take a component --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 078c11167..37f12044f 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -247,7 +247,7 @@ Responsive image grid for displaying key visuals of an asset. May allow selectio - images: Array - aspectRatio?: number -[] AssetPod +[] AssetPod (Luka) Vertical media block representing a digital library asset. Contains metadata, linked collection name, and optional image gallery. - title: string From d5c665aa9d443640ca23c603d1e1f96a5e5c27c9 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 9 Jul 2025 21:56:39 +0200 Subject: [PATCH 35/98] take a component --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 37f12044f..81f99d33a 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -46,7 +46,7 @@ Wraps ButtonTag, adds X icon on the right which invokes onRemove [] Breadcrumb -[] BreadcrumbPill +[] BreadcrumbPill (Luka) Pill-shaped breadcrumb element, possibly for filter chips or nav breadcrumbs. - label: string From e539e14d409989352e74e131db384095ec9043b1 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 9 Jul 2025 21:59:01 +0200 Subject: [PATCH 36/98] fix component description --- COMPONENTS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index 81f99d33a..b3af55e78 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -47,6 +47,7 @@ Wraps ButtonTag, adds X icon on the right which invokes onRemove [] Breadcrumb [] BreadcrumbPill (Luka) + Pill-shaped breadcrumb element, possibly for filter chips or nav breadcrumbs. - label: string From 4808e2db9f64aa52bed7798d906f89710907adb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Thu, 10 Jul 2025 21:48:55 +0200 Subject: [PATCH 37/98] Update COMPONENTS.md Component exists --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index b3af55e78..eb7b6a430 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -873,7 +873,7 @@ Child components: - `SvgLogoUcla` (conditionally rendered) - `ButtonLink` (conditionally rendered) -[] FooterLinks +[x] FooterLinks A themed footer section that renders grouped navigation links fetched from global store state. Behavior: From e372e04c335d9a6640546112a0c5b3c5dc6662f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Thu, 10 Jul 2025 21:55:15 +0200 Subject: [PATCH 38/98] Update COMPONENTS.md --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index eb7b6a430..d8af78eb3 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -288,7 +288,7 @@ Visual card for a digital collection or category. - description: string - href: string -[] MetadataTable +[] MetadataTable (Svebor) Tabular list of metadata key-value pairs (e.g. Rights Contact, Rights Holder). - items: Array<{ label: string, value: string | string[] }> From 7d5d656b9183268412b5dce6b4bb11bbc95c0511 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Fri, 11 Jul 2025 19:42:16 +0200 Subject: [PATCH 39/98] change component's name --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index d8af78eb3..3711900f0 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -248,7 +248,7 @@ Responsive image grid for displaying key visuals of an asset. May allow selectio - images: Array - aspectRatio?: number -[] AssetPod (Luka) +[] BlockAssetPod (Luka) Vertical media block representing a digital library asset. Contains metadata, linked collection name, and optional image gallery. - title: string @@ -1145,7 +1145,7 @@ Behavior: | NotesAccordion |Svebor | ☐ Complete | [ ] | in a PR | | ExcerptPod | | ☐ Complete | [ ] | | | AssetFeaturedImage | | ☐ Complete | [ ] | | -| AssetPod | | ☐ Complete | [ ] | | +| BlockAssetPod |Luka | ☐ Complete | [ ] | | | BlockAsset |Austin | ☐ Complete | [ ] | | | SearchResult | | ☐ Complete | [x] | | | BlockCollection | | ☐ Complete | [ ] | | From ed656cfc033933f2b2039a921a4fcf54b5514a1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Mon, 14 Jul 2025 17:12:17 +0200 Subject: [PATCH 40/98] 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 --- COMPONENTS.md | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 3711900f0..04fd8112f 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -2,7 +2,7 @@ ## Buttons and Interface -[] ButtonText (Svebor) +[] ButtonText A minimal button with just text, possibly with variants like underline or subtle. - label: string @@ -364,9 +364,16 @@ Placeholder or quick-access UI element — possibly for suggestions or previous ## Bento Box - -[] BentoBoxResult -Horizontal scrollable container of `BentoPod` items, grouped under a title like "More search results." Includes optional draggable scrollbar. +[] BentoBoxBlock (Svebor) +A block type component, lives inside the `BentoBoxResult`. + - image: string, + - count: number, + - title: string, + - description: string, + - to: string + +[] BentoBoxResult (Svebor) +Horizontal scrollable container of `BentoPod`(Aka: BentoBoxBlock - new addition to he list) items, grouped under a title like "More search results." Includes optional draggable scrollbar. - title: string - items: Array<{ @@ -1115,8 +1122,8 @@ Behavior: | Component Name | Developer | Status | exists? | Notes | |----------------------------|-----------|-------------|---------|--------------------------------| -| ButtonText |Svebor | ☐ Complete | [x] | Needs a font change | -| DividerGeneral |Svebor | ☐ Complete | [x] | | +| ButtonText | | ☐ Complete | [x] | Needs a font change | +| DividerGeneral | | ☐ Complete | [x] | | | ButtonStacked | | ☐ Complete | [ ] | | | ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | | ButtonDropdown |Luka | ☐ Complete | [ ] | | @@ -1125,11 +1132,11 @@ Behavior: | BreadcrumbPill | | ☐ Complete | [ ] | | | BreadcrumbBar | | ☐ Complete | [ ] | | | ButtonIconOnly | | ☐ Complete | [ ] | | -| PaginationControl |Svebor | ☐ Complete | [x] | Needs a slight style/functionlity change | +| PaginationControl |Svebor | ☐ Complete | [x] | | | SectionLabel |Austin | ☐ Complete | [ ] | | | ButtonSubLink | | ☐ Complete | [ ] | | | LibraryLogoButton |Austin | ☐ Complete | [ ] | | -| SectionPagination |Svebor | ☐ Complete | [x] |Adjusted the styles and a little bit of logic | +| SectionPagination |Svebor | ☐ Complete | [x] |Adjusted the styles and a little bit of logic | | CTAHexButton |Svebor | ☐ Complete | [x] |Exists, ready to use | | SearchResultsCount |Svebor | ☐ Complete | [ ] |Made a PR | | RefineSearchPanel | | ☐ Complete | [ ] | | @@ -1141,15 +1148,15 @@ Behavior: | ButtonSubCategoryPod | | ☐ Complete | [ ] | | | ButtonUCLALibrariesDropdown| | ☐ Complete | [ ] | | | YearRangeFilter | | ☐ Complete | [x] | aka DateFilter? | -| BentoPod |Svebor | ☐ Complete | [ ] | WIP | -| NotesAccordion |Svebor | ☐ Complete | [ ] | in a PR | -| ExcerptPod | | ☐ Complete | [ ] | | +| BentoPod |Svebor | ☐ Complete | [ ] | Made a PR | +| NotesAccordion |Svebor | ☐ Complete | [ ] | Made a PR | +| ExcerptPod |Svebor | ☐ Complete | [ ] | In the notes-accordion PR | | AssetFeaturedImage | | ☐ Complete | [ ] | | | BlockAssetPod |Luka | ☐ Complete | [ ] | | | BlockAsset |Austin | ☐ Complete | [ ] | | | SearchResult | | ☐ Complete | [x] | | | BlockCollection | | ☐ Complete | [ ] | | -| MetadataTable | | ☐ Complete | [ ] | | +| MetadataTable |Svebor | ☐ Complete | [ ] | Made a PR | | BlockMediaViewer | | ☐ Complete | [ ] | | | BlockRichText | | ☐ Complete | [ ] | | | SectionHeader | | ☐ Complete | [x] | | @@ -1160,12 +1167,12 @@ Behavior: | EntryField |Luka | ☐ Complete | [ ] | | | ButtonSubmit |Luka | ☐ Complete | [ ] | | | Flash | | ☐ Complete | [ ] | | -| BentoBoxResult | | ☐ Complete | [ ] | | +| BentoBoxBlock |Svebor | ☐ Complete | [ ] |WIP | +| BentoBoxResult |Svebor | ☐ Complete | [ ] |WIP | | Dragger | | ☐ Complete | [ ] | | | Banner | | ☐ Complete | [ ] | | | Header | | ☐ Complete | [x] | aka: HeaderSite | -| Footer | | ☐ Complete | [x] | | -| NewsletterSignup | | ☐ Complete | [ ] | | +| NewsletterSignup | | ☐ Complete | [x] | Exists in footer-primary | | DetailHeader | | ☐ Complete | [ ] | aka: ItemHeaderBar | | DetailMedia | | ☐ Complete | [ ] | aka: ViewerMedia | | DetailOverview | | ☐ Complete | [ ] | aka: MetadataSplitPanel | @@ -1177,4 +1184,4 @@ Behavior: | BlockButtons | | ☐ Complete | [ ] | | | ContentSection | | ☐ Complete | [ ] | | | BlockAnchorNav | | ☐ Complete | [ ] | aka: In-page TOC | -|AlphabeticalBrowseBy | | ☐ Complete | [x] | | +| AlphabeticalBrowseBy | | ☐ Complete | [x] | | From 877fb6535ce7dfc83efe2c92b3e6d7b2f60cd328 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Mon, 14 Jul 2025 21:03:34 +0200 Subject: [PATCH 41/98] take a component --- COMPONENTS.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index 04fd8112f..d9a96e95f 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -332,6 +332,9 @@ Vertical or horizontal list of buttons linking to specific tools or resources. [] GridCollections - items: [BlockCollection] +[] GridAssetPod (Luka) +- items: [BlockAssetPod] + ## Search [] SearchField (Luka) @@ -1163,6 +1166,7 @@ Behavior: | BlockButtonList | | ☐ Complete | [ ] | | | GridAssets |Austin | ☐ Complete | [ ] | | | GridCollections | | ☐ Complete | [ ] | | +| GridAssetPod |Luka | ☐ Complete | [ ] | | | SearchField |Luka | ☐ Complete | [x] | | | EntryField |Luka | ☐ Complete | [ ] | | | ButtonSubmit |Luka | ☐ Complete | [ ] | | From 741d21ebe84f4f6897dc1d55ba816c9c63747078 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Tue, 15 Jul 2025 16:34:56 +0200 Subject: [PATCH 42/98] Update NotesAccordion.vue --- .../src/lib-components/NotesAccordion.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vue-component-library/src/lib-components/NotesAccordion.vue b/packages/vue-component-library/src/lib-components/NotesAccordion.vue index 615c8994e..53cbaed3d 100644 --- a/packages/vue-component-library/src/lib-components/NotesAccordion.vue +++ b/packages/vue-component-library/src/lib-components/NotesAccordion.vue @@ -73,7 +73,8 @@ function setTextRef(idx: number, el: HTMLElement | null) { textRefs.value[idx] = el } -// Lifecycle Hooks +// Lifecycle Hook + onMounted(() => { measureTextHeight() window.addEventListener("resize", measureTextHeight) From 348494bc131124632131753a53edb93ef76d470b Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Tue, 15 Jul 2025 17:26:23 +0200 Subject: [PATCH 43/98] take a component --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index d9a96e95f..c25d7fefe 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -1132,8 +1132,8 @@ Behavior: | ButtonDropdown |Luka | ☐ Complete | [ ] | | | ButtonTag |Luka | ☐ Complete | [x] | aka: BlockTag | | ButtonRemoveSearchFilter |Luka | ☐ Complete | [x] | aka: BlockRemoveSearchFilter | -| BreadcrumbPill | | ☐ Complete | [ ] | | -| BreadcrumbBar | | ☐ Complete | [ ] | | +| BreadcrumbPill |Luka | ☐ Complete | [ ] | | +| BreadcrumbBar |Luka | ☐ Complete | [ ] | | | ButtonIconOnly | | ☐ Complete | [ ] | | | PaginationControl |Svebor | ☐ Complete | [x] | | | SectionLabel |Austin | ☐ Complete | [ ] | | From edc66005c7fe009f3e598e3b9e40a2de87bce38a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Tue, 15 Jul 2025 19:38:06 +0200 Subject: [PATCH 44/98] clean up --- .../vue-component-library/src/lib-components/NotesAccordion.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue-component-library/src/lib-components/NotesAccordion.vue b/packages/vue-component-library/src/lib-components/NotesAccordion.vue index 53cbaed3d..90b1b16f1 100644 --- a/packages/vue-component-library/src/lib-components/NotesAccordion.vue +++ b/packages/vue-component-library/src/lib-components/NotesAccordion.vue @@ -40,7 +40,7 @@ const textHeight = ref(0) const classes = computed(() => ["notes-accordion", { "is-open": isOpen.value }]) const dynamicLabel = computed(() => - isOpen.value ? props.labelOpen || "Less" : props.labelClose || "More" + isOpen.value ? props.labelOpen : props.labelClose ) const wrapperStyles = computed(() => ({ From 0ffe1432dce95103590593f4271c456fbeceb044 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Tue, 15 Jul 2025 20:12:04 +0200 Subject: [PATCH 45/98] Clean up props --- .../src/lib-components/ExcerptPod.vue | 7 +------ .../src/lib-components/NotesAccordion.vue | 8 +------- 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/packages/vue-component-library/src/lib-components/ExcerptPod.vue b/packages/vue-component-library/src/lib-components/ExcerptPod.vue index 1dc2d26c7..a42ea2c26 100644 --- a/packages/vue-component-library/src/lib-components/ExcerptPod.vue +++ b/packages/vue-component-library/src/lib-components/ExcerptPod.vue @@ -20,12 +20,7 @@ const props = withDefaults(defineProps(), { title: "", subtitle: "", text: "", - accordions: () => [ - { - title: "", - text: "", - }, - ], + accordions: () => [], labelOpen: "", labelClose: "", }) diff --git a/packages/vue-component-library/src/lib-components/NotesAccordion.vue b/packages/vue-component-library/src/lib-components/NotesAccordion.vue index 90b1b16f1..a3a664e6e 100644 --- a/packages/vue-component-library/src/lib-components/NotesAccordion.vue +++ b/packages/vue-component-library/src/lib-components/NotesAccordion.vue @@ -21,12 +21,7 @@ type NotesAccordionItem = { labelClose?: string } const props = withDefaults(defineProps(), { - items: () => [ - { - title: "", - text: "", - }, - ], + items: () => [], labelOpen: "Less", labelClose: "More", }) @@ -74,7 +69,6 @@ function setTextRef(idx: number, el: HTMLElement | null) { } // Lifecycle Hook - onMounted(() => { measureTextHeight() window.addEventListener("resize", measureTextHeight) From 45e6cf7bb963b4c5e1f55879819dc6c7e9d00096 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 18:53:30 +0200 Subject: [PATCH 46/98] take a component --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index c25d7fefe..ecd40ecf3 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -54,7 +54,7 @@ Pill-shaped breadcrumb element, possibly for filter chips or nav breadcrumbs. - onRemove?: Function - to?: string -[] BreadcrumbBar +[] BreadcrumbBar (Luka) Full breadcrumb bar with one or more breadcrumb items. - crumbs: Array<{ label: string, to?: string }> From 183375c7af9086e76dd3bd26c3794b8c4cabf4fb Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 19:56:34 +0200 Subject: [PATCH 47/98] remove AssetFeaturedImage definition --- COMPONENTS.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index ecd40ecf3..dd8c03832 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -242,11 +242,6 @@ Highlighted or emphasized snippet of text content within another component (like ## Blocks -[] AssetFeaturedImage -Responsive image grid for displaying key visuals of an asset. May allow selection or highlight. - -- images: Array -- aspectRatio?: number [] BlockAssetPod (Luka) Vertical media block representing a digital library asset. Contains metadata, linked collection name, and optional image gallery. @@ -1154,7 +1149,6 @@ Behavior: | BentoPod |Svebor | ☐ Complete | [ ] | Made a PR | | NotesAccordion |Svebor | ☐ Complete | [ ] | Made a PR | | ExcerptPod |Svebor | ☐ Complete | [ ] | In the notes-accordion PR | -| AssetFeaturedImage | | ☐ Complete | [ ] | | | BlockAssetPod |Luka | ☐ Complete | [ ] | | | BlockAsset |Austin | ☐ Complete | [ ] | | | SearchResult | | ☐ Complete | [x] | | From ee9dd92aa4b960bb3721e48919530c78c8b835e4 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 20:12:31 +0200 Subject: [PATCH 48/98] take a component --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index dd8c03832..d628160ed 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -498,7 +498,7 @@ Displays linked metadata for locating a collection, including identifiers and UR # Pages -[] BannerFeatured +[] BannerFeatured (Luka) Displays a full-width or responsive image, possibly with optional alt text or caption. Has a la @@ -1177,7 +1177,7 @@ Behavior: | SectionKeywords | | ☐ Complete | [ ] | | | CollectionOverview | | ☐ Complete | [ ] | | | CollectionFind | | ☐ Complete | [ ] | aka: CollectionReferencePanel | -| BannerFeatured | | ☐ Complete | [x] | | +| BannerFeatured |Luka | ☐ Complete | [x] | | | BlockTitle | | ☐ Complete | [ ] | | | BlockButtons | | ☐ Complete | [ ] | | | ContentSection | | ☐ Complete | [ ] | | From 62919e616ad082fac9001d280cedd10e6eeead5b Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 20:19:58 +0200 Subject: [PATCH 49/98] take a components --- COMPONENTS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index d628160ed..359971ec0 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -508,7 +508,7 @@ Has a la - direction?: 'left' | 'right' - decoration?: boolean (e.g. angled stripes or shapes) -[] BlockTitle +[] BlockTitle (Luka) Standalone heading block. - text: string @@ -517,13 +517,13 @@ Standalone heading block. - align?: 'left' | 'center' -[] BlockButtons +[] BlockButtons (Luka) One or more call-to-action buttons in a horizontal or vertical stack. - buttons: Array<{ label: string, href: string, variant?: 'primary' | 'secondary' }> - align?: 'left' | 'center' -[] ContentSection +[] ContentSection (Luka) Flexible container that wraps image, title, text, and buttons in various arrangements. - image?: BannerFeatured From 51430d6b4da5dc6bae37a21f5f019d6864e42976 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 20:20:30 +0200 Subject: [PATCH 50/98] take a components --- COMPONENTS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 359971ec0..8d196fddb 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -1178,8 +1178,8 @@ Behavior: | CollectionOverview | | ☐ Complete | [ ] | | | CollectionFind | | ☐ Complete | [ ] | aka: CollectionReferencePanel | | BannerFeatured |Luka | ☐ Complete | [x] | | -| BlockTitle | | ☐ Complete | [ ] | | -| BlockButtons | | ☐ Complete | [ ] | | -| ContentSection | | ☐ Complete | [ ] | | +| BlockTitle |Luka | ☐ Complete | [ ] | | +| BlockButtons |Luka | ☐ Complete | [ ] | | +| ContentSection |Luka | ☐ Complete | [ ] | | | BlockAnchorNav | | ☐ Complete | [ ] | aka: In-page TOC | | AlphabeticalBrowseBy | | ☐ Complete | [x] | | From f6de8908fec177f02b94bafefa9687b62d0ef940 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 20:22:05 +0200 Subject: [PATCH 51/98] take a component --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 8d196fddb..d6e0c4e92 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -443,7 +443,7 @@ Standalone newsletter form for email subscription. # Detail Pages -[] DetailHeader +[] DetailHeader (Luka) Top navigation bar for asset pages, including pagination, collection name, and back-to-search link. - currentIndex: number @@ -1171,7 +1171,7 @@ Behavior: | Banner | | ☐ Complete | [ ] | | | Header | | ☐ Complete | [x] | aka: HeaderSite | | NewsletterSignup | | ☐ Complete | [x] | Exists in footer-primary | -| DetailHeader | | ☐ Complete | [ ] | aka: ItemHeaderBar | +| DetailHeader |Luka | ☐ Complete | [ ] | aka: ItemHeaderBar | | DetailMedia | | ☐ Complete | [ ] | aka: ViewerMedia | | DetailOverview | | ☐ Complete | [ ] | aka: MetadataSplitPanel | | SectionKeywords | | ☐ Complete | [ ] | | From 76226de639c0e2e477f5fc13f274deb981cd9ee7 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 20:27:57 +0200 Subject: [PATCH 52/98] take a component --- COMPONENTS.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index d6e0c4e92..4d9176d95 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -475,7 +475,8 @@ Displays a list of linked subjects, genres, and related tags. - keywords: Array<{ label: string, href?: string }> -[] CollectionOverview +[] CollectionOverview (Luka) + Introductory section for a collection page with title, summary text, and preview image. - title: string @@ -1175,7 +1176,7 @@ Behavior: | DetailMedia | | ☐ Complete | [ ] | aka: ViewerMedia | | DetailOverview | | ☐ Complete | [ ] | aka: MetadataSplitPanel | | SectionKeywords | | ☐ Complete | [ ] | | -| CollectionOverview | | ☐ Complete | [ ] | | +| CollectionOverview |Luka | ☐ Complete | [ ] | | | CollectionFind | | ☐ Complete | [ ] | aka: CollectionReferencePanel | | BannerFeatured |Luka | ☐ Complete | [x] | | | BlockTitle |Luka | ☐ Complete | [ ] | | From d78dda6255392e6b8e554d00619621fa2a00d154 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 20:29:59 +0200 Subject: [PATCH 53/98] add a new line --- COMPONENTS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index 4d9176d95..b92ae1d41 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -519,6 +519,7 @@ Standalone heading block. [] BlockButtons (Luka) + One or more call-to-action buttons in a horizontal or vertical stack. - buttons: Array<{ label: string, href: string, variant?: 'primary' | 'secondary' }> From 7388620aaba67473db15fbe0d67b312f5874ddbf Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 20:37:13 +0200 Subject: [PATCH 54/98] add detailed component description --- COMPONENTS.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index b92ae1d41..ef4999160 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -463,12 +463,15 @@ Large asset viewer for images or media, with zoom/download/fullscreen buttons. - allowFullscreen?: boolean [] DetailOverview +note: This seem like a grid component containing "MetadataTable" as blocks. It seeem like this grid can have a complex layout so let's talk about it before someone decides to take this component. + Two-column layout for structured metadata. Used for "Item Overview" and "Find this Item." - left: Array<{ label: string, value: string | VNode }> - right: Array<{ label: string, value: string | VNode }> [] SectionKeywords +This seem like a redundant - we already have this component named "MetadaTable". Delete this component definition ("SectionKeyword") after checking if MetadataTable has everything needed for displaying "Keywords" Displays a list of linked subjects, genres, and related tags. - title?: string From 63b619b8b496971e0682813b70494b635839b927 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 20:41:11 +0200 Subject: [PATCH 55/98] add detailed component description --- COMPONENTS.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index ef4999160..180f8f3f4 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -490,6 +490,8 @@ Introductory section for a collection page with title, summary text, and preview - ctaHref: string [] CollectionFind +This component seems like it should be MetadataTable as well. Please let's talk about this component before someone decides to take it. + Displays linked metadata for locating a collection, including identifiers and URLs. - title?: string (default: "Find this Collection") From e277dbeb3bb9f3a00bc0c2db0b533b50a7c1f125 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 20:49:06 +0200 Subject: [PATCH 56/98] take a component --- COMPONENTS.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 180f8f3f4..0ecd8b9d4 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -541,7 +541,8 @@ Flexible container that wraps image, title, text, and buttons in various arrange - backgroundColor?: string -[] BlockAnchorNav +[] BlockAnchorNav (Luka) + Sidebar or inline nav with jump links to sections on the same page. - title?: string (e.g. "Topics Covered") From 08e03ecbc3a8515906f3b2d01d8804fa5d49dba3 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 16 Jul 2025 20:58:01 +0200 Subject: [PATCH 57/98] update component description --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 0ecd8b9d4..36ff32cdb 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -471,7 +471,7 @@ Two-column layout for structured metadata. Used for "Item Overview" and "Find th - right: Array<{ label: string, value: string | VNode }> [] SectionKeywords -This seem like a redundant - we already have this component named "MetadaTable". Delete this component definition ("SectionKeyword") after checking if MetadataTable has everything needed for displaying "Keywords" +This seem redundant - we already have this component named "MetadaTable". Delete this component definition ("SectionKeyword") after checking if MetadataTable has everything needed for displaying "SectionKeywords" Displays a list of linked subjects, genres, and related tags. - title?: string From 0ee907ab9810add5de2936d5b31f15aaf9dff51f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Thu, 17 Jul 2025 16:39:03 +0200 Subject: [PATCH 58/98] Adds a button component --- COMPONENTS.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index 36ff32cdb..cf9d8efe8 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -1,6 +1,8 @@ # UCLA Components list ## Buttons and Interface +[] ButtonIIIf (Svebor) +A single svg button, changes the color of letter svgs on hover [] ButtonText A minimal button with just text, possibly with variants like underline or subtle. From 864171d9092cfcb1d700bd5c3b63e99f13e02e1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Thu, 17 Jul 2025 16:39:16 +0200 Subject: [PATCH 59/98] Update COMPONENTS.md --- COMPONENTS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index cf9d8efe8..aeeb52cbb 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -2,6 +2,7 @@ ## Buttons and Interface [] ButtonIIIf (Svebor) + A single svg button, changes the color of letter svgs on hover [] ButtonText From 1bb618a25349343385e24d85177ab0d8c0d3a285 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Thu, 17 Jul 2025 17:06:55 +0200 Subject: [PATCH 60/98] Update COMPONENTS.md --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index aeeb52cbb..98b83e451 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -1,8 +1,8 @@ # UCLA Components list ## Buttons and Interface -[] ButtonIIIf (Svebor) - +[] ButtonIIIf () +- need to add this svg to their svg repo A single svg button, changes the color of letter svgs on hover [] ButtonText From 54df91db1d0b10bea39a3c966e28f75023c8d571 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Thu, 17 Jul 2025 17:23:01 +0200 Subject: [PATCH 61/98] Update COMPONENTS.md --- COMPONENTS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index 98b83e451..c9a655638 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -3,6 +3,7 @@ ## Buttons and Interface [] ButtonIIIf () - need to add this svg to their svg repo + A single svg button, changes the color of letter svgs on hover [] ButtonText From 0ed4fbbac781b0d080faf3b940376c8e3ede4793 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Thu, 17 Jul 2025 17:23:34 +0200 Subject: [PATCH 62/98] Clean up components.md --- COMPONENTS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index c9a655638..65753ee0b 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -14,6 +14,7 @@ A minimal button with just text, possibly with variants like underline or subtle - onClick: Function [] ButtonPageView (Svebor) + A button that displayes items as a grid with more or less info [] ButtonStacked From b06efac524960607dcb8b74be289db06ad12d041 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Mon, 21 Jul 2025 15:53:39 +0200 Subject: [PATCH 63/98] Taking the block-collection component --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 65753ee0b..475276751 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -280,7 +280,7 @@ Horizontal row layout for a single digital asset, including image, metadata fiel - onClick?: Function -[] BlockCollection +[] BlockCollection (Svebor) Visual card for a digital collection or category. - image: string From d31c91fff0f49225f4ddf48d2663b54dfb36f435 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Mon, 21 Jul 2025 16:26:20 +0200 Subject: [PATCH 64/98] Taking the grid-collections component as well. --- COMPONENTS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 475276751..b6329be11 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -329,7 +329,7 @@ Vertical or horizontal list of buttons linking to specific tools or resources. [] GridAssets (austin) - items: [BlockAsset] -[] GridCollections +[] GridCollections (svebor) - items: [BlockCollection] [] GridAssetPod (Luka) @@ -1165,14 +1165,14 @@ Behavior: | BlockAssetPod |Luka | ☐ Complete | [ ] | | | BlockAsset |Austin | ☐ Complete | [ ] | | | SearchResult | | ☐ Complete | [x] | | -| BlockCollection | | ☐ Complete | [ ] | | +| BlockCollection |Svebor | ☐ Complete | [ ] | | | MetadataTable |Svebor | ☐ Complete | [ ] | Made a PR | | BlockMediaViewer | | ☐ Complete | [ ] | | | BlockRichText | | ☐ Complete | [ ] | | | SectionHeader | | ☐ Complete | [x] | | | BlockButtonList | | ☐ Complete | [ ] | | | GridAssets |Austin | ☐ Complete | [ ] | | -| GridCollections | | ☐ Complete | [ ] | | +| GridCollections |Svebor | ☐ Complete | [ ] | | | GridAssetPod |Luka | ☐ Complete | [ ] | | | SearchField |Luka | ☐ Complete | [x] | | | EntryField |Luka | ☐ Complete | [ ] | | From 94304d50a62f443e6d0c925d788b1b5c126e3b92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Mon, 21 Jul 2025 17:57:34 +0200 Subject: [PATCH 65/98] Update COMPONENTS.md --- COMPONENTS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index b6329be11..8f072230c 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -391,6 +391,7 @@ Horizontal scrollable container of `BentoPod`(Aka: BentoBoxBlock - new addition [] Dragger +NOTE: This seems like it's the `BentoBoxResult` component, that components has the dragger built into it. A draggable horizontal scrollbar component. Should be synced with scroll container state and optionally labeled with a property. - trackWidth: number From e62667418e40fae3c68be0c4aef989c9dff0070a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Wed, 23 Jul 2025 11:02:43 +0200 Subject: [PATCH 66/98] move the component styles to the theme files --- .../src/lib-components/ExcerptPod.vue | 61 +-------------- .../src/lib-components/NotesAccordion.vue | 75 +------------------ .../src/styles/dlc/_excerpt-pod.scss | 60 +++++++++++++++ .../src/styles/dlc/_notes-accordion.scss | 72 ++++++++++++++++++ 4 files changed, 135 insertions(+), 133 deletions(-) create mode 100644 packages/vue-component-library/src/styles/dlc/_excerpt-pod.scss create mode 100644 packages/vue-component-library/src/styles/dlc/_notes-accordion.scss diff --git a/packages/vue-component-library/src/lib-components/ExcerptPod.vue b/packages/vue-component-library/src/lib-components/ExcerptPod.vue index a42ea2c26..d7ca3a16d 100644 --- a/packages/vue-component-library/src/lib-components/ExcerptPod.vue +++ b/packages/vue-component-library/src/lib-components/ExcerptPod.vue @@ -55,64 +55,5 @@ const showAccordion = computed(() => { diff --git a/packages/vue-component-library/src/lib-components/NotesAccordion.vue b/packages/vue-component-library/src/lib-components/NotesAccordion.vue index a3a664e6e..f034eda5d 100644 --- a/packages/vue-component-library/src/lib-components/NotesAccordion.vue +++ b/packages/vue-component-library/src/lib-components/NotesAccordion.vue @@ -100,77 +100,6 @@ onUnmounted(() => {

- diff --git a/packages/vue-component-library/src/styles/dlc/_excerpt-pod.scss b/packages/vue-component-library/src/styles/dlc/_excerpt-pod.scss new file mode 100644 index 000000000..ec048f791 --- /dev/null +++ b/packages/vue-component-library/src/styles/dlc/_excerpt-pod.scss @@ -0,0 +1,60 @@ +.excerpt-pod { + display: flex; + flex-direction: column; + gap: 24px; + + .info { + display: flex; + gap: 10vw; + } + + .title { + margin: 0; + + font-family: var(--font-primary); + font-size: 21px; + font-weight: 700; + line-height: 120%; /* 25.2px */ + } + + .subtitle { + min-width: 200px; + margin: 0; + + font-family: var(--font-secondary); + font-size: 16px; + font-weight: 400; + line-height: 160%; /* 25.6px */ + letter-spacing: 0.16px; + } + + .text-excerpt { + display: flex; + flex-direction: column; + gap: 5px; + width: 100%; + } + + .text { + font-family: var(--font-secondary); + font-size: 16px; + font-weight: 400; + line-height: 150%; /* 24px */ + } + + // Hovers + @media #{has-hover} { + } + + // Breakpoints + @media #{$extra-large} { + } + @media #{$medium} { + } + @media #{$small} { + .info { + flex-direction: column; + gap: 16px; + } + } +} diff --git a/packages/vue-component-library/src/styles/dlc/_notes-accordion.scss b/packages/vue-component-library/src/styles/dlc/_notes-accordion.scss new file mode 100644 index 000000000..c63ac68f4 --- /dev/null +++ b/packages/vue-component-library/src/styles/dlc/_notes-accordion.scss @@ -0,0 +1,72 @@ +.notes-accordion { + position: relative; + + font-family: var(--font-primary); + color: var(--color-black); + + .btn { + padding: 5px 5px 5px 0; + box-sizing: border-box; + + font-size: 18px; + font-weight: 400; + line-height: normal; + + display: flex; + align-items: center; + } + .caret-icon { + transition: transform 0.5s ease-in-out; + width: 30px; + height: auto; + } + + .wrapper { + position: relative; + + margin-bottom: 0; + + overflow: hidden; + height: 0; + transition: height 0.5s ease-in-out, margin-bottom 0.5s ease-in-out; + } + .text-wrapper { + display: flex; + flex-direction: column; + gap: 5px; + } + .title { + font-size: 16px; + font-weight: 600; + line-height: 150%; /* 24px */ + } + .text { + font-size: 16px; + font-weight: 400; + line-height: 150%; /* 24px */ + color: var(--color-text-primary); + } + + &.is-open { + .wrapper { + margin-bottom: 25px; + } + .caret-icon { + transform: rotate(180deg); + } + } +} + +// Transitions +.fade-label-enter-active, +.fade-label-leave-active { + transition: opacity 0.15s ease-in-out; +} +.fade-label-enter-from, +.fade-label-leave-to { + opacity: 0; +} +.fade-label-enter-to, +.fade-label-leave-from { + opacity: 1; +} From 279744a9b81dda1b40fda12e8896562d3a294c01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Wed, 23 Jul 2025 16:53:35 +0200 Subject: [PATCH 67/98] Clean up component list --- COMPONENTS.md | 119 +++++++++----------------------------------------- 1 file changed, 20 insertions(+), 99 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 8f072230c..602bdcf11 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -2,8 +2,7 @@ ## Buttons and Interface [] ButtonIIIf () -- need to add this svg to their svg repo - +- need to add this svg to The UCLA svg repo A single svg button, changes the color of letter svgs on hover [] ButtonText @@ -15,7 +14,7 @@ A minimal button with just text, possibly with variants like underline or subtle [] ButtonPageView (Svebor) - A button that displayes items as a grid with more or less info + A button that displayes items as a grid or list [] ButtonStacked A vertical stack of buttons, likely for grouped filter or action options. @@ -108,7 +107,7 @@ Interactive pagination component with numbered buttons, previous/next navigation - showEdges?: boolean (e.g. show first/last page) - siblingCount?: number (how many pages around current to show) -[x] CTAHexButton (svebor) +[x] CTAHexButton Prominent hex-shaped call-to-action button with icon and label. - label: string @@ -140,11 +139,12 @@ Collapsible panel of dropdown filters for refining search results. Collapsible panel of dropdown filters for refining search results with multiple options - name: string -- searchField: string +- searchField: string - default: string - options: string[] - onFilterChange: Function(label: string, selected: string | string[]) - defaultOpen?: string[] (filters to open by default) + [] ResultsList Displays a list of categories with associated result counts. @@ -195,7 +195,7 @@ Dropdown for selecting from multiple library collections. Appears in tag-chip fo - libraries: Array - onSelect: Function(library: string) -[] YearRangeFilter or DateFilter +[] YearRangeFilter or DateFilter Range selector with start and end year inputs and a confirm button. - minYear: number @@ -203,10 +203,6 @@ Range selector with start and end year inputs and a confirm button. - selectedRange: { start: number, end: number } - onConfirm: Function(range: { start: number, end: number }) - - - - ## Accordions [] BentoPod (Svebor) @@ -226,7 +222,6 @@ Displays a summary of a library or collection and a list of associated assets. I - isExpanded: boolean - onToggle: Function - [] NotesAccordion(svebor) Expandable section for showing grouped text content like notes and captions. Can optionally display an excerpt pod. @@ -247,7 +242,6 @@ Highlighted or emphasized snippet of text content within another component (like ## Blocks - [] BlockAssetPod (Luka) Vertical media block representing a digital library asset. Contains metadata, linked collection name, and optional image gallery. @@ -279,7 +273,6 @@ Horizontal row layout for a single digital asset, including image, metadata fiel - image: string - onClick?: Function - [] BlockCollection (Svebor) Visual card for a digital collection or category. @@ -323,7 +316,6 @@ Vertical or horizontal list of buttons linking to specific tools or resources. - buttons: Array<{ label: string, href: string, variant?: string }> - ## Grids [] GridAssets (austin) @@ -365,8 +357,8 @@ Placeholder or quick-access UI element — possibly for suggestions or previous - content?: string | slot - onClick?: Function - ## Bento Box + [] BentoBoxBlock (Svebor) A block type component, lives inside the `BentoBoxResult`. - image: string, @@ -389,7 +381,6 @@ Horizontal scrollable container of `BentoPod`(Aka: BentoBoxBlock - new addition - showDragger: boolean - onScroll?: Function - [] Dragger NOTE: This seems like it's the `BentoBoxResult` component, that components has the dragger built into it. A draggable horizontal scrollbar component. Should be synced with scroll container state and optionally labeled with a property. @@ -400,7 +391,6 @@ A draggable horizontal scrollbar component. Should be synced with scroll contain - label?: string - onDrag: Function(newPosition: number) - ## Header [] Banner @@ -412,7 +402,6 @@ Universal top banner with UCLA branding. Often pinned to the top of all pages, m - textColor?: string - isSticky?: boolean - [] Header Primary site navigation including logo, main links, and utility search bar. @@ -425,7 +414,6 @@ Primary site navigation including logo, main links, and utility search bar. - selectedFilter?: string - onFilterChange?: Function - ## Footer [x] Footer @@ -483,7 +471,6 @@ Displays a list of linked subjects, genres, and related tags. - title?: string - keywords: Array<{ label: string, href?: string }> - [] CollectionOverview (Luka) Introductory section for a collection page with title, summary text, and preview image. @@ -528,9 +515,7 @@ Standalone heading block. - color?: string - align?: 'left' | 'center' - [] BlockButtons (Luka) - One or more call-to-action buttons in a horizontal or vertical stack. - buttons: Array<{ label: string, href: string, variant?: 'primary' | 'secondary' }> @@ -546,17 +531,13 @@ Flexible container that wraps image, title, text, and buttons in various arrange - reverse?: boolean - backgroundColor?: string - [] BlockAnchorNav (Luka) - Sidebar or inline nav with jump links to sections on the same page. - title?: string (e.g. "Topics Covered") - items: Array<{ label: string, href: string }> - sticky?: boolean - - # Missing: Filters ButtonCTA @@ -566,22 +547,17 @@ MediaGallery TableWithHeader TabToggle - [] SearchFilterButtons A component that renders a list of toggle buttons for filter categories, and conditionally includes a single checkbox. Emits events on interaction. - items: Item[] Array of filter items. Each item should have `inputType`, `label`, `esFieldName`, `isVisible`, and optional `class`. - - singleCheckboxState: boolean Controls the checked state of the optional single checkbox filter. - - toggle(index: number): void Emitted when a toggleable item is clicked. - - update:single-checkbox-state(state: boolean): void Syncs the single checkbox's state with external state. - - single-checkbox-checked(esFieldName: string): void Emitted when the single checkbox is checked or unchecked. @@ -590,27 +566,20 @@ A stylized checkbox component with internal state syncing and emit behavior for - label: string The visible label displayed next to the checkbox. - - selected: boolean Controls the checked state of the checkbox (v-model compatible). - - update:selected(state: boolean): void Emitted when the checkbox is toggled, for two-way binding. - - input-selected(): void Emitted on user interaction with the checkbox, useful for analytics or additional logic. - - [] SectionRemoveSearchFilters Displays a list of active search filters with an option to remove them. Filters are parsed from a keyed object of arrays and rendered using `BlockRemoveSearchFilter`. - filters: { [key: string]: string[] } Object of active filters, where each key maps to an array of selected values. - - update:filters(filters: object): void Emitted when a filter is removed, passing the updated filters object. - - remove-selected(): void Emitted when any filter is removed, useful for triggering external updates. @@ -619,16 +588,12 @@ A tabbed navigation component with animated glider, keyboard support, dynamic ic - alignment: 'left' | 'center' | 'right' Controls alignment of the tab buttons. Default is `'left'`. - - initialTab: number Sets the initially active tab index. Default is `0`. - - Optional slot for rendering filter controls above the tab list. - - Default slot for tab panel content. Each tab is determined by the slot’s `title`, `icon`, and `content` props. - - Tab Items (passed via default slot) must define: - title: string – Label for the tab button and used in `aria` attributes. - icon: 'icon-calendar' | 'icon-list' – Optional. Maps to a predefined icon. @@ -641,27 +606,21 @@ A tabbed navigation component with animated glider, keyboard support, dynamic ic - The component uses the `useTheme` composable to style tabs. - Provides `activeTabTitle` via Vue `provide`. - - [] BlockEventDetail Displays date, time, and location details for an event. Supports theming logic and formatting utilities for flexible display. - startDate?: string The event's start date. Used in formatted display. - - endDate?: string The event's end date. If provided, creates a date range. - - time?: string The event start time (e.g., '13:00'). Formatted for display. - - ongoing: boolean If true, shows 'Ongoing' instead of a specific date. - - locations: BlockEventDetailLocation[] A list of event locations. Each location may include `title`, `url`, `uri`, or `publicUrl`. - - BlockEventDetailLocation object: + + [] BlockEventDetailLocation object: - title: string – Required display label. - url/publicUrl/uri?: string – Destination URL for SmartLink. @@ -670,23 +629,18 @@ Behavior: - Supports themed conditional logic (e.g., showing "Multiple Locations" under the `ftva` theme). - Opens links in new tabs for `ftva` theme. - Integrates with `SmartLink` for routing compatibility. - 🔌 Slots: - `` — Optional slot to render additional content under the main layout. - [] BlockTag A compact label or pill-style tag component that optionally displays an icon and supports primary/secondary and highlighted visual states. - label: string Text displayed within the tag. Defaults to an empty string. - - iconName?: string Optional key for one of the predefined FTVA icons. Maps to an internal icon lookup table. - - isSecondary: boolean Applies secondary styling when true. Defaults to false (primary style). - - isHighlighted: boolean Applies a "highlighted" visual treatment when true. Defaults to false. @@ -694,13 +648,11 @@ Behavior: - Uses the current theme via `useTheme` to apply scoped styling classes. - Supports a fixed set of icons (e.g., `SvgIconFilm`, `SvgIconTV`, etc.) mapped via `iconName`. - [] ButtonHide A vertically-stacked button that displays an icon above a label. Commonly used for "See Less" or collapse actions. Styled with theme colors and hover transitions. - text: string Label text displayed under the icon. Defaults to `'See Less'`. - Behavior: - Renders a decorative molecule stroke behind a centered collapse icon. - Uses scoped `scss` for positioning, transitions, and hover color changes. @@ -711,25 +663,18 @@ A styled anchor/button component that renders a labeled link with optional icons - to: string The destination URL or route. - - label: string The button's visible text label. - - iconName?: string Used to specify a particular icon. Ignored for internal links. Supports values like `'svg-external-link'`, `'svg-download'`, `'icon-close'`. - - isSecondary: boolean Applies secondary button styling. Default is false. - - isTertiary: boolean Applies tertiary button styling. Default is false. - - isQuaternary: boolean Applies quaternary button styling. Default is false. - - isDownload: boolean If true, adds a `download` attribute to the link and uses a download icon. - - linkTarget?: string Optional target for the link (e.g. `_blank`). @@ -742,7 +687,7 @@ Behavior: - `IconClose` if `iconName` is `'icon-close'` - Applies themed classes from `useTheme`. - Contains a `.hover` span to manage animated or transition-based hover states. - + Slots: - `` — Optional custom content inside the link (e.g. additional icon or badge). @@ -751,7 +696,6 @@ A compact call-to-action button with a right arrow icon and decorative backgroun - text: string Text label for the button. Defaults to `'See More'`. - - to: string Destination URL or route for the `SmartLink`. @@ -765,7 +709,6 @@ A horizontal divider element with optional style modifiers. - isBold: boolean Adds a thicker or more prominent visual weight to the divider. Defaults to false. - - isTertiary: boolean Applies an alternate tertiary style variant. Defaults to false. @@ -783,7 +726,7 @@ Behavior: - Delegates rendering to the `DividerWayFinder` component. - Commonly used in page builders or dynamic content regions where dividers are optional. -[] DividerWayFinder +[x] DividerWayFinder A themed horizontal divider that adjusts color and style based on either a passed prop or the current route path. - color?: string @@ -800,7 +743,6 @@ A branded header section featuring the UCLA Library logo and a search interface. - linkItems: SearchLinkItemType[] List of quick search links passed to the `SearchHome` component. - - advancedSearchLink: SearchLinkItemType Link configuration for the advanced search option, also passed to `SearchHome`. @@ -814,16 +756,12 @@ A flexible masthead component that supports optional hero imagery, title, rich t - hasMolecules: boolean Controls whether a background molecule graphic is shown (only if no hero image). Default is true. - - title: string (required) The main heading text, rendered as HTML inside an `

` tag. - - text?: string Optional rich text content displayed below the title. - - theme?: string Used to apply specific visual variants (e.g., `'meap'` applies the `theme-meap` class). - - heroImage?: MediaItemType Optional image object to render as a responsive hero image. @@ -855,7 +793,6 @@ The primary desktop header layout, including navigation, search, and optional th - primaryItems: NavPrimaryItemType[] List of items for the primary navigation menu, passed to `NavPrimary`. - - secondaryItems: NavSecondaryItemType[] List of items for the secondary navigation menu, passed to `NavSecondary`. @@ -884,7 +821,6 @@ Behavior: - Adds a "Donate" button linking to `/donate`. - For other themes: - Defaults to rendering the UCLA logo. - - Always links to the UCLA homepage (`https://www.ucla.edu`) in a new tab. - Includes visually hidden text for accessibility. @@ -935,7 +871,6 @@ Behavior: - funderName: string - funderLogo: object (media asset) - funderUrl: string - - If no sponsor data is present, logs a message and renders nothing. - Always displays static supporting text: "The UCLA Library Modern Endangered Archives Program is supported by Arcadia." @@ -948,7 +883,6 @@ The primary content area of the site footer. Displays a logo, social media links - form: boolean Controls whether the newsletter subscription form is displayed. Defaults to true. - - isMicrosite: boolean If true, links the logo to the external UCLA Library homepage. If false, links internally to the root path. Defaults to false. @@ -993,13 +927,11 @@ Behavior: Child components: - `RichText` - [] BlockPullQuote A stylized block for displaying a quoted passage with optional attribution. Styled according to the current theme. - text: string Rich text content representing the quote body. Rendered via the `RichText` component. - - attribution?: string Optional attribution text (e.g., author or source). Rendered with a preceding em dash. @@ -1025,10 +957,9 @@ An interactive lightbox-style carousel for displaying a gallery of media items w - linkUrl?: string - coverImage?: object - embedCode?: string - + - selectedItem?: number Index of the initially selected slide. Defaults to `0`. - - inline?: boolean If true, the component is rendered inline; otherwise it appears as a modal overlay. Defaults to false. @@ -1054,10 +985,8 @@ A flexible, responsive breadcrumb component that supports both a legacy prop-bas - to?: string Optional legacy-mode parent route link. Used in conjunction with `parentTitle`. - - parentTitle?: string Optional legacy-mode parent breadcrumb title. Used in conjunction with `to`. - - title?: string Optional final breadcrumb label. Used as the current page label if no route-based title is available. @@ -1075,21 +1004,17 @@ Child components: - `SmartLink` – Used for navigable breadcrumb segments. - `SvgIconCaretRight` – Shown between breadcrumb segments. -[x] SectionPagination (svebor) +[x] SectionPagination A responsive, theme-aware pagination component that supports legacy navigation links or dynamically generated page buttons. Works with route query parameters and can be customized with a callback. - nextTo?: string Optional static link for the "Next" button. If provided, disables dynamic logic. - - previousTo?: string Optional static link for the "Previous" button. If provided, disables dynamic logic. - - pages?: number Total number of pages. - - initialCurrentPage?: number The current active page. Defaults to 1 if not specified. - - generateLinkCallback?: Function Optional callback for generating the `to` link for each page number. Receives `(pageNumber, queryParams)` as arguments. @@ -1124,10 +1049,6 @@ Behavior: - Does not render cells if `numCells` is `0`. - - - - # Checklist: # 📋 Component Checklist @@ -1144,12 +1065,12 @@ Behavior: | BreadcrumbPill |Luka | ☐ Complete | [ ] | | | BreadcrumbBar |Luka | ☐ Complete | [ ] | | | ButtonIconOnly | | ☐ Complete | [ ] | | -| PaginationControl |Svebor | ☐ Complete | [x] | | +| PaginationControl |Svebor | ☐ Complete | [ ] | | | SectionLabel |Austin | ☐ Complete | [ ] | | | ButtonSubLink | | ☐ Complete | [ ] | | | LibraryLogoButton |Austin | ☐ Complete | [ ] | | -| SectionPagination |Svebor | ☐ Complete | [x] |Adjusted the styles and a little bit of logic | -| CTAHexButton |Svebor | ☐ Complete | [x] |Exists, ready to use | +| SectionPagination |Svebor | ☐ Complete | [ ] |Adjusted the styles and a little bit of logic | +| CTAHexButton |Svebor | ☐ Complete | [ ] |Exists, ready to use | | SearchResultsCount |Svebor | ☐ Complete | [ ] |Made a PR | | RefineSearchPanel | | ☐ Complete | [ ] | | | FiltersDropdown | | ☐ Complete | [x] | | @@ -1166,21 +1087,21 @@ Behavior: | BlockAssetPod |Luka | ☐ Complete | [ ] | | | BlockAsset |Austin | ☐ Complete | [ ] | | | SearchResult | | ☐ Complete | [x] | | -| BlockCollection |Svebor | ☐ Complete | [ ] | | +| BlockCollection |Svebor | ☐ Complete | [ ] | Made a PR | | MetadataTable |Svebor | ☐ Complete | [ ] | Made a PR | | BlockMediaViewer | | ☐ Complete | [ ] | | | BlockRichText | | ☐ Complete | [ ] | | | SectionHeader | | ☐ Complete | [x] | | | BlockButtonList | | ☐ Complete | [ ] | | | GridAssets |Austin | ☐ Complete | [ ] | | -| GridCollections |Svebor | ☐ Complete | [ ] | | +| GridCollections |Svebor | ☐ Complete | [ ] | Made a PR | | GridAssetPod |Luka | ☐ Complete | [ ] | | | SearchField |Luka | ☐ Complete | [x] | | | EntryField |Luka | ☐ Complete | [ ] | | | ButtonSubmit |Luka | ☐ Complete | [ ] | | | Flash | | ☐ Complete | [ ] | | -| BentoBoxBlock |Svebor | ☐ Complete | [ ] |WIP | -| BentoBoxResult |Svebor | ☐ Complete | [ ] |WIP | +| BentoBoxBlock |Svebor | ☐ Complete | [ ] |Made a PR | +| BentoBoxResult |Svebor | ☐ Complete | [ ] |Made a PR | | Dragger | | ☐ Complete | [ ] | | | Banner | | ☐ Complete | [ ] | | | Header | | ☐ Complete | [x] | aka: HeaderSite | From 82e05669db274fac4e5394fbf366aa98a57b2a89 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 23 Jul 2025 17:40:21 +0200 Subject: [PATCH 68/98] add spacing --- COMPONENTS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index 602bdcf11..07a6c0ba5 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -33,6 +33,7 @@ Button paired with a dropdown menu indicator (carat or arrow). - onSelect: Function(option: string) [] ButtonTag (Luka) + Used as labeled categories or tags, possibly dismissible. - label: string From d24c55302f3f147fe48554cc6cb79c647e4c8096 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 23 Jul 2025 17:41:54 +0200 Subject: [PATCH 69/98] add spacing --- COMPONENTS.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index 07a6c0ba5..d41da2680 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -42,6 +42,7 @@ Used as labeled categories or tags, possibly dismissible. - onRemove?: Function [] ButtonRemoveSearchFilter (Luka) + Wraps ButtonTag, adds X icon on the right which invokes onRemove - title: string @@ -60,6 +61,7 @@ Pill-shaped breadcrumb element, possibly for filter chips or nav breadcrumbs. - to?: string [] BreadcrumbBar (Luka) + Full breadcrumb bar with one or more breadcrumb items. - crumbs: Array<{ label: string, to?: string }> @@ -244,6 +246,7 @@ Highlighted or emphasized snippet of text content within another component (like ## Blocks [] BlockAssetPod (Luka) + Vertical media block representing a digital library asset. Contains metadata, linked collection name, and optional image gallery. - title: string @@ -326,11 +329,13 @@ Vertical or horizontal list of buttons linking to specific tools or resources. - items: [BlockCollection] [] GridAssetPod (Luka) + - items: [BlockAssetPod] ## Search [] SearchField (Luka) + Composed search input and submit button. Likely wraps `EntryField` and `ButtonSubmit`. - modelValue: string @@ -339,6 +344,7 @@ Composed search input and submit button. Likely wraps `EntryField` and `ButtonSu - autoFocus?: boolean [] EntryField(Luka) + Basic labeled input field for user entry. Can be reused for search or other forms. - label: string @@ -347,6 +353,7 @@ Basic labeled input field for user entry. Can be reused for search or other form - onInput: Function(value: string) [] ButtonSubmit(Luka) + Search submit button, typically displayed as a magnifying glass icon. - onClick: Function @@ -439,6 +446,7 @@ Standalone newsletter form for email subscription. # Detail Pages [] DetailHeader (Luka) + Top navigation bar for asset pages, including pagination, collection name, and back-to-search link. - currentIndex: number @@ -499,6 +507,7 @@ Displays linked metadata for locating a collection, including identifiers and UR # Pages [] BannerFeatured (Luka) + Displays a full-width or responsive image, possibly with optional alt text or caption. Has a la @@ -509,6 +518,7 @@ Has a la - decoration?: boolean (e.g. angled stripes or shapes) [] BlockTitle (Luka) + Standalone heading block. - text: string @@ -517,12 +527,14 @@ Standalone heading block. - align?: 'left' | 'center' [] BlockButtons (Luka) + One or more call-to-action buttons in a horizontal or vertical stack. - buttons: Array<{ label: string, href: string, variant?: 'primary' | 'secondary' }> - align?: 'left' | 'center' [] ContentSection (Luka) + Flexible container that wraps image, title, text, and buttons in various arrangements. - image?: BannerFeatured @@ -533,6 +545,7 @@ Flexible container that wraps image, title, text, and buttons in various arrange - backgroundColor?: string [] BlockAnchorNav (Luka) + Sidebar or inline nav with jump links to sections on the same page. - title?: string (e.g. "Topics Covered") From 0f9c0aadda9c119c14a33895fc8e82bb2229f4e1 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Wed, 6 Aug 2025 18:46:46 +0200 Subject: [PATCH 70/98] update component name --- COMPONENTS.md | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index d41da2680..ac5ec940c 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -247,15 +247,15 @@ Highlighted or emphasized snippet of text content within another component (like [] BlockAssetPod (Luka) -Vertical media block representing a digital library asset. Contains metadata, linked collection name, and optional image gallery. +Horizontal row layout for a single digital asset, including image, metadata fields, and links. - title: string +- description: string - date: string - resourceType: string -- description: string -- collection: [{ name: string, href: string }] -- thumbnails: Array -- isCondensed?: boolean +- collection: { name: string, href: string } +- image: string +- onClick?: Function [] BlockAsset (austin) Card for an individual digital library asset. @@ -266,17 +266,6 @@ Card for an individual digital library asset. - description: string - href: string -[] SearchResult -Horizontal row layout for a single digital asset, including image, metadata fields, and links. - -- title: string -- description: string -- date: string -- resourceType: string -- collection: { name: string, href: string } -- image: string -- onClick?: Function - [] BlockCollection (Svebor) Visual card for a digital collection or category. @@ -1100,7 +1089,6 @@ Behavior: | ExcerptPod |Svebor | ☐ Complete | [ ] | In the notes-accordion PR | | BlockAssetPod |Luka | ☐ Complete | [ ] | | | BlockAsset |Austin | ☐ Complete | [ ] | | -| SearchResult | | ☐ Complete | [x] | | | BlockCollection |Svebor | ☐ Complete | [ ] | Made a PR | | MetadataTable |Svebor | ☐ Complete | [ ] | Made a PR | | BlockMediaViewer | | ☐ Complete | [ ] | | From a10aa204a8ee5c42c82b3bc558fb57f7b9aa44de Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Mon, 11 Aug 2025 18:22:51 +0200 Subject: [PATCH 71/98] Update Button definition --- COMPONENTS.md | 27 ++++----------------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index ac5ec940c..fc97c8acd 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -5,24 +5,19 @@ - need to add this svg to The UCLA svg repo A single svg button, changes the color of letter svgs on hover -[] ButtonText -A minimal button with just text, possibly with variants like underline or subtle. +[] Button - label: string -- variant?: 'default' | 'underline' | 'subtle' +- variant?: 'primary' | 'secondary' | 'tertiary' +- outline?: true/false - onClick: Function [] ButtonPageView (Svebor) A button that displayes items as a grid or list -[] ButtonStacked -A vertical stack of buttons, likely for grouped filter or action options. -- buttons: Array<{ label: string, isActive: boolean }> -- onClick: Function(index: number) - -[] ButtonDropdown (Luka) +[] ButtonDropdown () Button paired with a dropdown menu indicator (carat or arrow). @@ -67,13 +62,6 @@ Full breadcrumb bar with one or more breadcrumb items. - crumbs: Array<{ label: string, to?: string }> - current: string -[] ButtonIconOnly -Just an icon button, used for tooltips, mobile actions, etc. - -- icon: string -- ariaLabel: string -- onClick: Function - [x] PaginationControl (svebor) Numbered pagination UI with previous/next arrows. @@ -87,13 +75,6 @@ Non-interactive text element that might be grouped with buttons (e.g. “RESEARC - text: string - tag?: string ('h2', 'span', etc.) -[] ButtonSubLink -Secondary inline button or link, often used for minimal navigation or contextual actions. - -- label: string -- href: string -- variant?: 'default' | 'subtle' -- icon?: string [] LibraryLogoButton (austin) Branded button or label pairing logo with text. From 7f9084ec2d5161f64c7d518fd15cdb496e8a4f01 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Mon, 11 Aug 2025 18:25:47 +0200 Subject: [PATCH 72/98] Update COMPONENTS.md --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index fc97c8acd..e4b7901a1 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -8,7 +8,7 @@ A single svg button, changes the color of letter svgs on hover [] Button - label: string -- variant?: 'primary' | 'secondary' | 'tertiary' +- variant?: 'primary' | 'secondary' - outline?: true/false - onClick: Function From 4b9de5d43aafb8a4c94f8814071fa18b952ccf4e Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Mon, 11 Aug 2025 18:32:27 +0200 Subject: [PATCH 73/98] Update COMPONENTS.md --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index e4b7901a1..5fb89a422 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -5,7 +5,7 @@ - need to add this svg to The UCLA svg repo A single svg button, changes the color of letter svgs on hover -[] Button +[] Button() - label: string - variant?: 'primary' | 'secondary' From f3b329fc5e0d7ee7f3601ae5d83ae863c4274275 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Mon, 11 Aug 2025 18:41:57 +0200 Subject: [PATCH 74/98] Remove duplicates --- COMPONENTS.md | 24 +----------------------- 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 5fb89a422..91721520b 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -13,20 +13,9 @@ A single svg button, changes the color of letter svgs on hover - onClick: Function [] ButtonPageView (Svebor) - A button that displayes items as a grid or list -[] ButtonDropdown () - -Button paired with a dropdown menu indicator (carat or arrow). - -- label: string -- isOpen: boolean -- onToggle: Function -- options: string[] -- onSelect: Function(option: string) - [] ButtonTag (Luka) Used as labeled categories or tags, possibly dismissible. @@ -129,12 +118,6 @@ Collapsible panel of dropdown filters for refining search results with multiple - onFilterChange: Function(label: string, selected: string | string[]) - defaultOpen?: string[] (filters to open by default) -[] ResultsList -Displays a list of categories with associated result counts. - -- items: Array<{ label: string, count: number, href?: string }> -- highlight?: string[] (optional: bold or emphasize certain terms) -- onClick?: Function(label: string) [] AlphabeticalBrowseBy Interactive list to sort results Alphabetically @@ -1039,26 +1022,21 @@ Behavior: | Component Name | Developer | Status | exists? | Notes | |----------------------------|-----------|-------------|---------|--------------------------------| -| ButtonText | | ☐ Complete | [x] | Needs a font change | +| Button | | ☐ Complete | [x] | Needs a font change | | DividerGeneral | | ☐ Complete | [x] | | -| ButtonStacked | | ☐ Complete | [ ] | | | ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | -| ButtonDropdown |Luka | ☐ Complete | [ ] | | | ButtonTag |Luka | ☐ Complete | [x] | aka: BlockTag | | ButtonRemoveSearchFilter |Luka | ☐ Complete | [x] | aka: BlockRemoveSearchFilter | | BreadcrumbPill |Luka | ☐ Complete | [ ] | | | BreadcrumbBar |Luka | ☐ Complete | [ ] | | -| ButtonIconOnly | | ☐ Complete | [ ] | | | PaginationControl |Svebor | ☐ Complete | [ ] | | | SectionLabel |Austin | ☐ Complete | [ ] | | -| ButtonSubLink | | ☐ Complete | [ ] | | | LibraryLogoButton |Austin | ☐ Complete | [ ] | | | SectionPagination |Svebor | ☐ Complete | [ ] |Adjusted the styles and a little bit of logic | | CTAHexButton |Svebor | ☐ Complete | [ ] |Exists, ready to use | | SearchResultsCount |Svebor | ☐ Complete | [ ] |Made a PR | | RefineSearchPanel | | ☐ Complete | [ ] | | | FiltersDropdown | | ☐ Complete | [x] | | -| ResultsList | | ☐ Complete | [ ] | aka: CategoryList | | DropdownSingleSelect | | ☐ Complete | [x] | | | SideMenuAccordionPod | | ☐ Complete | [ ] | | | ButtonDropdownSearch | | ☐ Complete | [ ] | | From 2f4300d2d775d559bb741812c6a28b1beb731535 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Mon, 11 Aug 2025 18:50:56 +0200 Subject: [PATCH 75/98] remove duplicates --- COMPONENTS.md | 67 +-------------------------------------------------- 1 file changed, 1 insertion(+), 66 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 91721520b..f7ac2c09c 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -135,11 +135,6 @@ Reusable dropdown with configurable button label and menu options. - selected: string - onSelect: Function(option: string) -[] SideMenuAccordionPod -Expandable side menu category pod with grouped buttons and optional metadata (e.g. counts). - -- categories: Array<{ label: string, buttons: Array<{ title: string, count: number }> }> -- onSelect: Function(buttonTitle: string) [] ButtonDropdownSearch Set of dropdowns to filter/search content by fields like “Title” or “Subject.” @@ -149,12 +144,6 @@ Set of dropdowns to filter/search content by fields like “Title” or “Subje - selected: string - onSelect: Function(option: string) -[] ButtonSubCategoryPod -Grouped buttons with category tags and close/removal options. - -- items: Array<{ title: string, count: number, removable?: boolean }> -- onRemove: Function(item: string) - [] ButtonUCLALibrariesDropdown Dropdown for selecting from multiple library collections. Appears in tag-chip format. @@ -268,11 +257,6 @@ Reused section heading (also already defined under `BlockTitle`). - level?: 'h2' | 'h3' - id?: string (used for anchor targets) -[] BlockButtonList -Vertical or horizontal list of buttons linking to specific tools or resources. - -- buttons: Array<{ label: string, href: string, variant?: string }> - ## Grids [] GridAssets (austin) @@ -312,12 +296,6 @@ Search submit button, typically displayed as a magnifying glass icon. - onClick: Function - icon?: string (defaults to magnifying glass) -[] Flash -Placeholder or quick-access UI element — possibly for suggestions or previous searches. - -- content?: string | slot -- onClick?: Function - ## Bento Box [] BentoBoxBlock (Svebor) @@ -342,15 +320,6 @@ Horizontal scrollable container of `BentoPod`(Aka: BentoBoxBlock - new addition - showDragger: boolean - onScroll?: Function -[] Dragger -NOTE: This seems like it's the `BentoBoxResult` component, that components has the dragger built into it. -A draggable horizontal scrollbar component. Should be synced with scroll container state and optionally labeled with a property. - -- trackWidth: number -- thumbWidth: number -- position: number -- label?: string -- onDrag: Function(newPosition: number) ## Header @@ -418,20 +387,6 @@ Large asset viewer for images or media, with zoom/download/fullscreen buttons. - allowDownload?: boolean - allowFullscreen?: boolean -[] DetailOverview -note: This seem like a grid component containing "MetadataTable" as blocks. It seeem like this grid can have a complex layout so let's talk about it before someone decides to take this component. - -Two-column layout for structured metadata. Used for "Item Overview" and "Find this Item." - -- left: Array<{ label: string, value: string | VNode }> -- right: Array<{ label: string, value: string | VNode }> - -[] SectionKeywords -This seem redundant - we already have this component named "MetadaTable". Delete this component definition ("SectionKeyword") after checking if MetadataTable has everything needed for displaying "SectionKeywords" -Displays a list of linked subjects, genres, and related tags. - -- title?: string -- keywords: Array<{ label: string, href?: string }> [] CollectionOverview (Luka) @@ -444,19 +399,6 @@ Introductory section for a collection page with title, summary text, and preview - ctaLabel: string - ctaHref: string -[] CollectionFind -This component seems like it should be MetadataTable as well. Please let's talk about this component before someone decides to take it. - -Displays linked metadata for locating a collection, including identifiers and URLs. - -- title?: string (default: "Find this Collection") -- repository: { label: string, href: string } -- localId: string -- ark: string -- opacUrl?: string -- findingAidUrl?: string -- manifestUrl?: { icon?: string, href: string, copyButtonLabel?: string } - # Pages [] BannerFeatured (Luka) @@ -1022,7 +964,7 @@ Behavior: | Component Name | Developer | Status | exists? | Notes | |----------------------------|-----------|-------------|---------|--------------------------------| -| Button | | ☐ Complete | [x] | Needs a font change | +| Button | | ☐ Complete | [x] | | | DividerGeneral | | ☐ Complete | [x] | | | ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | | ButtonTag |Luka | ☐ Complete | [x] | aka: BlockTag | @@ -1038,9 +980,7 @@ Behavior: | RefineSearchPanel | | ☐ Complete | [ ] | | | FiltersDropdown | | ☐ Complete | [x] | | | DropdownSingleSelect | | ☐ Complete | [x] | | -| SideMenuAccordionPod | | ☐ Complete | [ ] | | | ButtonDropdownSearch | | ☐ Complete | [ ] | | -| ButtonSubCategoryPod | | ☐ Complete | [ ] | | | ButtonUCLALibrariesDropdown| | ☐ Complete | [ ] | | | YearRangeFilter | | ☐ Complete | [x] | aka DateFilter? | | BentoPod |Svebor | ☐ Complete | [ ] | Made a PR | @@ -1060,19 +1000,14 @@ Behavior: | SearchField |Luka | ☐ Complete | [x] | | | EntryField |Luka | ☐ Complete | [ ] | | | ButtonSubmit |Luka | ☐ Complete | [ ] | | -| Flash | | ☐ Complete | [ ] | | | BentoBoxBlock |Svebor | ☐ Complete | [ ] |Made a PR | | BentoBoxResult |Svebor | ☐ Complete | [ ] |Made a PR | -| Dragger | | ☐ Complete | [ ] | | | Banner | | ☐ Complete | [ ] | | | Header | | ☐ Complete | [x] | aka: HeaderSite | | NewsletterSignup | | ☐ Complete | [x] | Exists in footer-primary | | DetailHeader |Luka | ☐ Complete | [ ] | aka: ItemHeaderBar | | DetailMedia | | ☐ Complete | [ ] | aka: ViewerMedia | -| DetailOverview | | ☐ Complete | [ ] | aka: MetadataSplitPanel | -| SectionKeywords | | ☐ Complete | [ ] | | | CollectionOverview |Luka | ☐ Complete | [ ] | | -| CollectionFind | | ☐ Complete | [ ] | aka: CollectionReferencePanel | | BannerFeatured |Luka | ☐ Complete | [x] | | | BlockTitle |Luka | ☐ Complete | [ ] | | | BlockButtons |Luka | ☐ Complete | [ ] | | From 2cde0d3a5e002248cd0a1015828ceebf341e12fe Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Mon, 11 Aug 2025 18:51:19 +0200 Subject: [PATCH 76/98] remove duplicates --- COMPONENTS.md | 1 - 1 file changed, 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index f7ac2c09c..0d7119531 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -993,7 +993,6 @@ Behavior: | BlockMediaViewer | | ☐ Complete | [ ] | | | BlockRichText | | ☐ Complete | [ ] | | | SectionHeader | | ☐ Complete | [x] | | -| BlockButtonList | | ☐ Complete | [ ] | | | GridAssets |Austin | ☐ Complete | [ ] | | | GridCollections |Svebor | ☐ Complete | [ ] | Made a PR | | GridAssetPod |Luka | ☐ Complete | [ ] | | From df42ca4af0acbaa95c15d07c7bfa9be684f978bc Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Mon, 11 Aug 2025 22:16:19 +0200 Subject: [PATCH 77/98] Remove already existing components --- COMPONENTS.md | 514 +------------------------------------------------- 1 file changed, 4 insertions(+), 510 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 0d7119531..9905a081d 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -15,6 +15,8 @@ A single svg button, changes the color of letter svgs on hover [] ButtonPageView (Svebor) A button that displayes items as a grid or list +[] DividerGeneral (Exists) + This component already exists [] ButtonTag (Luka) @@ -447,515 +449,6 @@ Sidebar or inline nav with jump links to sections on the same page. - items: Array<{ label: string, href: string }> - sticky?: boolean -# Missing: -Filters -ButtonCTA -HeaderMainResponsive -MediaItem -MediaGallery -TableWithHeader -TabToggle - -[] SearchFilterButtons -A component that renders a list of toggle buttons for filter categories, and conditionally includes a single checkbox. Emits events on interaction. - -- items: Item[] - Array of filter items. Each item should have `inputType`, `label`, `esFieldName`, `isVisible`, and optional `class`. -- singleCheckboxState: boolean - Controls the checked state of the optional single checkbox filter. -- toggle(index: number): void - Emitted when a toggleable item is clicked. -- update:single-checkbox-state(state: boolean): void - Syncs the single checkbox's state with external state. -- single-checkbox-checked(esFieldName: string): void - Emitted when the single checkbox is checked or unchecked. - -[] SingleCheckbox -A stylized checkbox component with internal state syncing and emit behavior for two-way binding and tracking user input. - -- label: string - The visible label displayed next to the checkbox. -- selected: boolean - Controls the checked state of the checkbox (v-model compatible). -- update:selected(state: boolean): void - Emitted when the checkbox is toggled, for two-way binding. -- input-selected(): void - Emitted on user interaction with the checkbox, useful for analytics or additional logic. - -[] SectionRemoveSearchFilters -Displays a list of active search filters with an option to remove them. Filters are parsed from a keyed object of arrays and rendered using `BlockRemoveSearchFilter`. - -- filters: { [key: string]: string[] } - Object of active filters, where each key maps to an array of selected values. -- update:filters(filters: object): void - Emitted when a filter is removed, passing the updated filters object. -- remove-selected(): void - Emitted when any filter is removed, useful for triggering external updates. - -[] TabList -A tabbed navigation component with animated glider, keyboard support, dynamic icons, and slot-based content. Active tab state syncs with the route query param `view`. - -- alignment: 'left' | 'center' | 'right' - Controls alignment of the tab buttons. Default is `'left'`. -- initialTab: number - Sets the initially active tab index. Default is `0`. -- - Optional slot for rendering filter controls above the tab list. -- - Default slot for tab panel content. Each tab is determined by the slot’s `title`, `icon`, and `content` props. -- Tab Items (passed via default slot) must define: - - title: string – Label for the tab button and used in `aria` attributes. - - icon: 'icon-calendar' | 'icon-list' – Optional. Maps to a predefined icon. - - content: VNode – Displayed when the tab is active. - -🔁 Behavior: -- Supports keyboard navigation with `ArrowLeft` and `ArrowRight`. -- Clicking a tab updates the `view` query param in the URL. -- The animated glider adapts to tab size and window resizing. -- The component uses the `useTheme` composable to style tabs. -- Provides `activeTabTitle` via Vue `provide`. - -[] BlockEventDetail -Displays date, time, and location details for an event. Supports theming logic and formatting utilities for flexible display. - -- startDate?: string - The event's start date. Used in formatted display. -- endDate?: string - The event's end date. If provided, creates a date range. -- time?: string - The event start time (e.g., '13:00'). Formatted for display. -- ongoing: boolean - If true, shows 'Ongoing' instead of a specific date. -- locations: BlockEventDetailLocation[] - A list of event locations. Each location may include `title`, `url`, `uri`, or `publicUrl`. - - [] BlockEventDetailLocation object: - - title: string – Required display label. - - url/publicUrl/uri?: string – Destination URL for SmartLink. - -Behavior: -- Uses `formatDates` and `formatTimes` utility functions. -- Supports themed conditional logic (e.g., showing "Multiple Locations" under the `ftva` theme). -- Opens links in new tabs for `ftva` theme. -- Integrates with `SmartLink` for routing compatibility. -🔌 Slots: -- `` — Optional slot to render additional content under the main layout. - -[] BlockTag -A compact label or pill-style tag component that optionally displays an icon and supports primary/secondary and highlighted visual states. - -- label: string - Text displayed within the tag. Defaults to an empty string. -- iconName?: string - Optional key for one of the predefined FTVA icons. Maps to an internal icon lookup table. -- isSecondary: boolean - Applies secondary styling when true. Defaults to false (primary style). -- isHighlighted: boolean - Applies a "highlighted" visual treatment when true. Defaults to false. - -Behavior: -- Uses the current theme via `useTheme` to apply scoped styling classes. -- Supports a fixed set of icons (e.g., `SvgIconFilm`, `SvgIconTV`, etc.) mapped via `iconName`. - -[] ButtonHide -A vertically-stacked button that displays an icon above a label. Commonly used for "See Less" or collapse actions. Styled with theme colors and hover transitions. - -- text: string - Label text displayed under the icon. Defaults to `'See Less'`. -Behavior: -- Renders a decorative molecule stroke behind a centered collapse icon. -- Uses scoped `scss` for positioning, transitions, and hover color changes. -- Built-in hover state transitions icon stroke color and text color. - -[] ButtonLink -A styled anchor/button component that renders a labeled link with optional icons, styling variants, and download behavior. Built on top of SmartLink for internal/external routing. - -- to: string - The destination URL or route. -- label: string - The button's visible text label. -- iconName?: string - Used to specify a particular icon. Ignored for internal links. Supports values like `'svg-external-link'`, `'svg-download'`, `'icon-close'`. -- isSecondary: boolean - Applies secondary button styling. Default is false. -- isTertiary: boolean - Applies tertiary button styling. Default is false. -- isQuaternary: boolean - Applies quaternary button styling. Default is false. -- isDownload: boolean - If true, adds a `download` attribute to the link and uses a download icon. -- linkTarget?: string - Optional target for the link (e.g. `_blank`). - -Behavior: -- Icon selection is determined automatically based on link type (`internal`, `external`, `download`) and `iconName`. -- Shows different icon types: - - `SvgArrowRight` for internal links - - `SvgExternalLink` for external links - - `SvgArrowDownload` if `isDownload` is true - - `IconClose` if `iconName` is `'icon-close'` -- Applies themed classes from `useTheme`. -- Contains a `.hover` span to manage animated or transition-based hover states. - -Slots: -- `` — Optional custom content inside the link (e.g. additional icon or badge). - -[] ButtonMore -A compact call-to-action button with a right arrow icon and decorative background. Commonly used for "See More" interactions. - -- text: string - Text label for the button. Defaults to `'See More'`. -- to: string - Destination URL or route for the `SmartLink`. - -Behavior: -- Wraps a `SmartLink` for internal or external routing. -- Displays a molecule stroke graphic and a right arrow icon. -- Designed for compact, centered layouts. - -[x] DividerGeneral -A horizontal divider element with optional style modifiers. - -- isBold: boolean - Adds a thicker or more prominent visual weight to the divider. Defaults to false. -- isTertiary: boolean - Applies an alternate tertiary style variant. Defaults to false. - -Behavior: -- Applies dynamic class names based on props: `is-bold`, `is-tertiary`. -- Renders as a styled `
` with no content. - -[] BlockDivider -A conditional wrapper that renders a `DividerWayFinder` component based on `block.horizontalDivider`. - -- block: FlexibleHorizontalDividerBlock - A content block object. If `block.horizontalDivider` is truthy, the divider will render. - -Behavior: -- Delegates rendering to the `DividerWayFinder` component. -- Commonly used in page builders or dynamic content regions where dividers are optional. - -[x] DividerWayFinder -A themed horizontal divider that adjusts color and style based on either a passed prop or the current route path. - -- color?: string - Optional section identifier (e.g., `'visit'`, `'about'`, `'help'`, `'ftva'`). If not provided, the section is inferred from the current route path using `getSectionName`. - -Behavior: -- Dynamically assigns a class like `color-[section]` to theme the divider. -- Reactively updates when the route changes. -- Uses `useTheme` for additional contextual styling. -- Renders two nested divs: one solid, one dotted, for visual layering. - -[] MastheadPrimary -A branded header section featuring the UCLA Library logo and a search interface. - -- linkItems: SearchLinkItemType[] - List of quick search links passed to the `SearchHome` component. -- advancedSearchLink: SearchLinkItemType - Link configuration for the advanced search option, also passed to `SearchHome`. - -Behavior: -- Renders the UCLA Library underline logo using an async SVG import. -- Delegates search functionality to the `SearchHome` child component. -- Typically used as the top section of a homepage or landing page. - -[] MastheadSecondary -A flexible masthead component that supports optional hero imagery, title, rich text content, and visual theming. - -- hasMolecules: boolean - Controls whether a background molecule graphic is shown (only if no hero image). Default is true. -- title: string (required) - The main heading text, rendered as HTML inside an `

` tag. -- text?: string - Optional rich text content displayed below the title. -- theme?: string - Used to apply specific visual variants (e.g., `'meap'` applies the `theme-meap` class). -- heroImage?: MediaItemType - Optional image object to render as a responsive hero image. - -Behavior: -- Adds class `has-molecule` when `hasMolecules` is true and no hero image is present. -- Adds class `has-slot` if default slot content is injected (currently tracked but not used in the template). -- Adds `theme-meap` class if `theme` is `'meap'`. -- Renders child components: `ResponsiveImage` for media and `RichText` for description content. - -[] HeaderSmart -A responsive header wrapper that dynamically loads the appropriate header component based on screen width, and syncs navigation data from the global store. - -- title: string - Optional title passed down to the rendered header component. - -Behavior: -- Displays the `SiteBrandBar` at the top. -- Dynamically chooses between `HeaderMain` (desktop) and `HeaderMainResponsive` (mobile) using screen width. -- Reads primary and secondary navigation menus from the global Pinia store (`GlobalStore`). -- Reacts to store updates and screen size changes in real-time. -- Applies `mobile-header` or `desktop-header` class based on layout. - -Child components: -- `SiteBrandBar` -- `HeaderMain` or `HeaderMainResponsive` - -[] HeaderMain -The primary desktop header layout, including navigation, search, and optional themed actions like a Donate button. - -- primaryItems: NavPrimaryItemType[] - List of items for the primary navigation menu, passed to `NavPrimary`. -- secondaryItems: NavSecondaryItemType[] - List of items for the secondary navigation menu, passed to `NavSecondary`. - -Behavior: -- Uses `useTheme` to determine whether to show optional features: - - If theme is `'ftva'`, search (`NavSearch`) and a "Donate" button (`ButtonLink`) are shown. -- Passes themed class to the root `
`. -- Injects `NavSearch` into the `#additional-menu` slot of `NavPrimary`. -- Injects a "Donate" link into the `#additional-mobile-menu-items` slot if applicable. -- Displays `NavSecondary` only when `secondaryItems` are provided. - -Child components: -- `NavPrimary` -- `NavSecondary` -- `NavSearch` (conditional) -- `ButtonLink` (conditional) - - -[] SiteBrandBar -A compact branded header strip that displays either the UCLA logo or theme-specific text, with optional call-to-action button support. - -Behavior: -- Uses `useTheme` to determine rendering logic and appearance. - - For theme `'ftva'`: - - Displays `'UCLA Film & Television Archive'` text instead of the logo. - - Adds a "Donate" button linking to `/donate`. - - For other themes: - - Defaults to rendering the UCLA logo. -- Always links to the UCLA homepage (`https://www.ucla.edu`) in a new tab. -- Includes visually hidden text for accessibility. - -Child components: -- `SvgLogoUcla` (conditionally rendered) -- `ButtonLink` (conditionally rendered) - -[x] FooterLinks -A themed footer section that renders grouped navigation links fetched from global store state. - -Behavior: -- Retrieves `footerLinks` data from the global Pinia store (`GlobalStore.footerLinks.nodes`). -- Expects each node to have: - - `category`: string – Section heading. - - `children`: array of links with `name` and `to` values. - -- Renders a heading (`

`) for each category and a list of links underneath. -- Falls back to an empty list and logs a warning if no footer data is available. -- Applies theme-based styling classes from `useTheme`. - -Child components: -- `SmartLink` – Used for all link rendering. - -[x] FooterMain -The primary footer container that conditionally renders sponsor sections, link groups, subscription forms, and legal text based on theme context. - -Behavior: -- Applies a theme-based class via `useTheme`. -- Renders subcomponents based on theme: - - `FooterSponsor` is shown if no theme is set. - - `FooterLinks` is shown only if a theme is present. - - `FooterPrimary` always renders; receives `form` and `isMicrosite` props. - - `form` is true if the theme is `'ftva'`, enabling a newsletter signup form. - - `FooterSock` always renders as the final section (e.g. copyright). - -Child components: -- `FooterSponsor` (optional) -- `FooterPrimary` -- `FooterLinks` (optional) -- `FooterSock` - -[x] FooterSponsor -Displays a sponsor acknowledgment message and a list of supporting organizations, pulled from global store data. - -Behavior: -- Pulls `footerSponsor` data from the Pinia `GlobalStore`. -- Expects `footerSponsor.funders` to be an array of funder objects with: - - funderName: string - - funderLogo: object (media asset) - - funderUrl: string -- If no sponsor data is present, logs a message and renders nothing. -- Always displays static supporting text: - "The UCLA Library Modern Endangered Archives Program is supported by Arcadia." - -Child components: -- `BlockSponsor` – Rendered once per funder in the list. - -[x] FooterPrimary -The primary content area of the site footer. Displays a logo, social media links, press links, and a Mailchimp-powered newsletter signup form. Appearance and content vary by theme. - -- form: boolean - Controls whether the newsletter subscription form is displayed. Defaults to true. -- isMicrosite: boolean - If true, links the logo to the external UCLA Library homepage. If false, links internally to the root path. Defaults to false. - -Behavior: -- Pulls social and press links from `footerPrimary` in the Pinia `GlobalStore`. -- Adjusts UI based on theme from `useTheme`. For `ftva`: - - Displays custom label and message in form. - - Uses `caretRight` as the submit button icon. - - Displays branded social media icons (YouTube, Instagram, X/Twitter, Facebook). -- Uses default UCLA Library logo unless theme is `ftva`, in which case a custom logo is rendered. -- Includes invisible spam-trap input for bot protection. - -Child components: -- `SmartLink` – Used for internal routing. -- `component :is` – Dynamically renders SVG icons for logos and buttons. - -[x] FooterSock -The bottom-most section of the site footer, displaying copyright and -additional legal or policy-related links. - -Behavior: -- Displays the current year dynamically using JavaScript's `Date` API. -- Pulls footer sock links from the Pinia `GlobalStore` (`footerSock.nodes`). -- Applies theme-based classes via `useTheme`. -- Logs a warning if footer data is missing from the store. - -Child components: -- `SmartLink` – Used to render each link with support for external or internal navigation. - -[] BlockRichText -A flexible content block that displays an optional section title and a block of rich text content. - -- block: FlexibleRichText - Object containing the content and optional title. Should include: - - sectionTitle?: string – Optional HTML-rendered heading. - - richText: string – Rich text content to render. - -Behavior: -- If `block.sectionTitle` is provided, it is rendered as a styled `

` using `v-html`. -- Delegates rendering of `block.richText` to the `RichText` component. - -Child components: -- `RichText` - -[] BlockPullQuote -A stylized block for displaying a quoted passage with optional attribution. Styled according to the current theme. - -- text: string - Rich text content representing the quote body. Rendered via the `RichText` component. -- attribution?: string - Optional attribution text (e.g., author or source). Rendered with a preceding em dash. - -Behavior: -- Applies a theme-based class using `useTheme`. -- Renders a wrapper with two sections: - - `.quote` for the main quoted content. - - `.attribution-block` for optional attribution text. - -Child components: -- `RichText` - -[] BlockMediaViewer -An interactive lightbox-style carousel for displaying a gallery of media items with optional captions, credits, and links. Can render inline or as an overlay modal. - -- items: MediaGalleryItemType[] (required) - Array of media items. Each item can include: - - item: media source (image, video, embed) - - captionTitle?: string - - captionText?: string - - credit?: string - - linkText?: string - - linkUrl?: string - - coverImage?: object - - embedCode?: string - -- selectedItem?: number - Index of the initially selected slide. Defaults to `0`. -- inline?: boolean - If true, the component is rendered inline; otherwise it appears as a modal overlay. Defaults to false. - -Emits: -- `closeModal` – Triggered when the user closes the modal. - -Behavior: -- Uses `vue3-carousel` for slide navigation and `MediaItem` for individual media rendering. -- Includes custom next/prev controls and a pagination bullet indicator. -- Renders a `SmartLink` button if a media item includes `linkUrl` and `linkText`. -- Applies theming and `object-fit` styling based on the current theme (`cover` for `ftva`, otherwise `contain`). -- Allows additional content injection via a default `` scoped with `selectionIndex`. - -Child components: -- `MediaItem` -- `SmartLink` -- Carousel & Slide (from `vue3-carousel`) -- Various SVG icons (navigation, close, external link, etc.) - - -[] NavBreadcrumb -A flexible, responsive breadcrumb component that supports both a legacy prop-based pattern and a dynamic route-based pattern. Supports truncation, theming, and mobile optimization. - -- to?: string - Optional legacy-mode parent route link. Used in conjunction with `parentTitle`. -- parentTitle?: string - Optional legacy-mode parent breadcrumb title. Used in conjunction with `to`. -- title?: string - Optional final breadcrumb label. Used as the current page label if no route-based title is available. - -Behavior: -- Legacy pattern: if all three props (`to`, `parentTitle`, `title`) are provided, it renders a two-item breadcrumb using only those values. -- Dynamic pattern: parses the current route path into individual breadcrumb segments. -- On mobile, displays only the parent breadcrumb. -- On desktop, collapses breadcrumbs if there are more than 4 segments, showing only the first and last 2 with an expandable `...` button. -- Breadcrumb items are normalized (e.g., `hyphenated-path` becomes `hyphenated path`) and decoded. -- Automatically strips trailing date segments (e.g., `00-00-00`) from URLs. -- Emits a link click handler to prevent parent titles from being overridden by the final route-based title. -- Applies theme-based styling from `useTheme`. - -Child components: -- `SmartLink` – Used for navigable breadcrumb segments. -- `SvgIconCaretRight` – Shown between breadcrumb segments. - -[x] SectionPagination -A responsive, theme-aware pagination component that supports legacy navigation links or dynamically generated page buttons. Works with route query parameters and can be customized with a callback. - -- nextTo?: string - Optional static link for the "Next" button. If provided, disables dynamic logic. -- previousTo?: string - Optional static link for the "Previous" button. If provided, disables dynamic logic. -- pages?: number - Total number of pages. -- initialCurrentPage?: number - The current active page. Defaults to 1 if not specified. -- generateLinkCallback?: Function - Optional callback for generating the `to` link for each page number. Receives `(pageNumber, queryParams)` as arguments. - -Emits: -- `changePage(pageNumber: number)` – Triggered when a new page is selected dynamically. - -Behavior: -- Calculates how many page buttons fit in the container based on button width and available space. -- If too many pages to show at once, it truncates with `...` and ensures the current page is centered. -- In mobile or constrained views, trims to show minimal buttons. -- Applies `first-page` or `last-page` classes when relevant. -- Handles `SmartLink` routing with fallbacks for legacy props. -- Supports slotless operation with full internal state control. - -Child components: -- `SmartLink` – For dynamic and static navigation. -- `SvgIconArrowRight` – Used for navigation arrows. - -[] TableRow -A dynamic and theme-aware table row component that renders a specified number of columns using named slots. - -- numCells: number - The number of `` cells to render in the row. Defaults to `0`. - -Slots: -- ``, ``, etc. - Provide content for each column based on its index. The number of columns is defined by `numCells`. - -Behavior: -- Applies a theme-based class using `useTheme`. -- Each cell receives a class name like `column-1`, `column-2`, etc., for styling and layout control. -- Does not render cells if `numCells` is `0`. # Checklist: @@ -964,6 +457,7 @@ Behavior: | Component Name | Developer | Status | exists? | Notes | |----------------------------|-----------|-------------|---------|--------------------------------| +| ButtonIIIF | | ☐ Complete | [ ] | | | Button | | ☐ Complete | [x] | | | DividerGeneral | | ☐ Complete | [x] | | | ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | @@ -979,6 +473,7 @@ Behavior: | SearchResultsCount |Svebor | ☐ Complete | [ ] |Made a PR | | RefineSearchPanel | | ☐ Complete | [ ] | | | FiltersDropdown | | ☐ Complete | [x] | | +| AlphabeticalBrowseBy | | ☐ Complete | [x] | | | DropdownSingleSelect | | ☐ Complete | [x] | | | ButtonDropdownSearch | | ☐ Complete | [ ] | | | ButtonUCLALibrariesDropdown| | ☐ Complete | [ ] | | @@ -1012,4 +507,3 @@ Behavior: | BlockButtons |Luka | ☐ Complete | [ ] | | | ContentSection |Luka | ☐ Complete | [ ] | | | BlockAnchorNav | | ☐ Complete | [ ] | aka: In-page TOC | -| AlphabeticalBrowseBy | | ☐ Complete | [x] | | From 9287f6d600a0b09dff3e49253a2ee87022d355ad Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Tue, 12 Aug 2025 22:32:21 +0200 Subject: [PATCH 78/98] take a component --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 9905a081d..3792f87f3 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -5,7 +5,7 @@ - need to add this svg to The UCLA svg repo A single svg button, changes the color of letter svgs on hover -[] Button() +[] Button(Luka) - label: string - variant?: 'primary' | 'secondary' @@ -458,7 +458,7 @@ Sidebar or inline nav with jump links to sections on the same page. | Component Name | Developer | Status | exists? | Notes | |----------------------------|-----------|-------------|---------|--------------------------------| | ButtonIIIF | | ☐ Complete | [ ] | | -| Button | | ☐ Complete | [x] | | +| Button |Luka | ☐ Complete | [] | | | DividerGeneral | | ☐ Complete | [x] | | | ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | | ButtonTag |Luka | ☐ Complete | [x] | aka: BlockTag | From 33787b811800cf1bf79b3b53f3d61d52b6fe11c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Thu, 14 Aug 2025 12:38:53 +0200 Subject: [PATCH 79/98] update package --- packages/vue-component-library/package.json | 4 ++-- pnpm-lock.yaml | 19 ++++++++++--------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/vue-component-library/package.json b/packages/vue-component-library/package.json index da995d96f..0a3e74c30 100644 --- a/packages/vue-component-library/package.json +++ b/packages/vue-component-library/package.json @@ -80,7 +80,7 @@ "sass": "^1.79.5", "storybook": "^7.4.1", "typescript": "catalog:", - "ucla-library-design-tokens": "^5.33.0", + "ucla-library-design-tokens": "^5.36.1", "video.js": "^8.5.2", "vite": "catalog:", "vite-plugin-dts": "^4.5.0", @@ -107,4 +107,4 @@ "engines": { "pnpm": "^9.12.1" } -} +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9a5d21cf0..9464a44e1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -215,8 +215,8 @@ importers: specifier: 'catalog:' version: 5.8.2 ucla-library-design-tokens: - specifier: ^5.33.0 - version: 5.33.0 + specifier: ^5.36.1 + version: 5.36.1 video.js: specifier: ^8.5.2 version: 8.21.0 @@ -5031,6 +5031,7 @@ packages: eslint-plugin-i@2.28.1: resolution: {integrity: sha512-a4oVt0j3ixNhGhvV4XF6NS7OWRFK2rrJ0Q5C4S2dSRb8FxZi31J0uUd5WJLL58wnVJ/OiQ1BxiXnFA4dWQO1Cg==} engines: {node: '>=12'} + deprecated: Please migrate to the brand new `eslint-plugin-import-x` instead peerDependencies: eslint: ^7.2.0 || ^8 @@ -8670,8 +8671,8 @@ packages: engines: {node: '>=14.17'} hasBin: true - ucla-library-design-tokens@5.33.0: - resolution: {integrity: sha512-AaaqfRvhIhySrT80dJKmajaR0BwpcbhQiZrCVKaY32UelY8b1xdwT7W4oThDizdU8i54hCCadZeFNvsSOjUtlw==} + ucla-library-design-tokens@5.36.1: + resolution: {integrity: sha512-OHjUrd2TUaAfCXaOWAUn3ie1VCkRU4FedIpFV+dEQEaABFbu/GG9xvhJyg0zNBjObtSS2qrG1WtH5urkYD+WJw==} ufo@1.5.4: resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==} @@ -9185,8 +9186,8 @@ packages: vue-bundle-renderer@2.1.1: resolution: {integrity: sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==} - vue-component-type-helpers@2.2.10: - resolution: {integrity: sha512-iDUO7uQK+Sab2tYuiP9D1oLujCWlhHELHMgV/cB13cuGbG4qwkLHvtfWb6FzvxrIOPDnU0oHsz2MlQjhYDeaHA==} + vue-component-type-helpers@3.0.5: + resolution: {integrity: sha512-uoNZaJ+a1/zppa/Vgmi8zIOP2PHXDN2rT8NyF+zQRK6ZG94lNB9prcV0GdLJbY9i9lrD47JOVIH92SaiA7oJ1A==} vue-demi@0.14.10: resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} @@ -12901,7 +12902,7 @@ snapshots: ts-dedent: 2.2.0 type-fest: 2.19.0 vue: 3.5.13(typescript@5.8.2) - vue-component-type-helpers: 2.2.10 + vue-component-type-helpers: 3.0.5 transitivePeerDependencies: - encoding - supports-color @@ -19349,7 +19350,7 @@ snapshots: typescript@5.8.2: {} - ucla-library-design-tokens@5.33.0: {} + ucla-library-design-tokens@5.36.1: {} ufo@1.5.4: {} @@ -19931,7 +19932,7 @@ snapshots: dependencies: ufo: 1.5.4 - vue-component-type-helpers@2.2.10: {} + vue-component-type-helpers@3.0.5: {} vue-demi@0.14.10(vue@3.5.13(typescript@5.8.2)): dependencies: From fe7041b82796e2fc94b246b2d86f178643d78ab5 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Fri, 15 Aug 2025 09:33:36 +0200 Subject: [PATCH 80/98] add a component --- COMPONENTS.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/COMPONENTS.md b/COMPONENTS.md index 3792f87f3..64a08da26 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -450,6 +450,16 @@ Sidebar or inline nav with jump links to sections on the same page. - sticky?: boolean +[] PanelAnchorNav (Luka) + +A floating anchor navigation panel that appears after the user scrolls one full viewport height (100vh). +An icon is shown on the right side of the screen; clicking it opens a side panel with jump links to sections on the same page. + +- title?: string (e.g. "Topics Covered") +- items: Array<{ label: string, href: string }> + + + # Checklist: @@ -507,3 +517,4 @@ Sidebar or inline nav with jump links to sections on the same page. | BlockButtons |Luka | ☐ Complete | [ ] | | | ContentSection |Luka | ☐ Complete | [ ] | | | BlockAnchorNav | | ☐ Complete | [ ] | aka: In-page TOC | +| PanelAnchorNav | | ☐ Complete | [ ] | aka: In-page TOC | From 05911afe93a1ca60509d8f1c300343768882cb3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Fri, 15 Aug 2025 09:43:27 +0200 Subject: [PATCH 81/98] Take a component --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 64a08da26..52ad27794 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -1,7 +1,7 @@ # UCLA Components list ## Buttons and Interface -[] ButtonIIIf () +[] ButtonIIIf (Svebor) - need to add this svg to The UCLA svg repo A single svg button, changes the color of letter svgs on hover From 92f95f40f40a9adaba5b07c7edf0840024482f19 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Fri, 15 Aug 2025 10:43:02 +0200 Subject: [PATCH 82/98] adjust prop for block anchor nav --- COMPONENTS.md | 1 - 1 file changed, 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 52ad27794..27ba4d0f5 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -447,7 +447,6 @@ Sidebar or inline nav with jump links to sections on the same page. - title?: string (e.g. "Topics Covered") - items: Array<{ label: string, href: string }> -- sticky?: boolean [] PanelAnchorNav (Luka) From b876c8680e855f387ac4010b44d3bec1aca33340 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Fri, 15 Aug 2025 10:44:04 +0200 Subject: [PATCH 83/98] take a component --- COMPONENTS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 27ba4d0f5..8567163a9 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -515,5 +515,5 @@ An icon is shown on the right side of the screen; clicking it opens a side panel | BlockTitle |Luka | ☐ Complete | [ ] | | | BlockButtons |Luka | ☐ Complete | [ ] | | | ContentSection |Luka | ☐ Complete | [ ] | | -| BlockAnchorNav | | ☐ Complete | [ ] | aka: In-page TOC | -| PanelAnchorNav | | ☐ Complete | [ ] | aka: In-page TOC | +| BlockAnchorNav |Luka | ☐ Complete | [ ] | | +| PanelAnchorNav |Luka | ☐ Complete | [ ] | | From 1d0497d954415027e98f34ed79b668208d773ec8 Mon Sep 17 00:00:00 2001 From: Luka Vuk <61590027+lux-v@users.noreply.github.com> Date: Mon, 18 Aug 2025 17:49:05 +0200 Subject: [PATCH 84/98] Update COMPONENTS.md --- COMPONENTS.md | 39 ++++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 8567163a9..622962854 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -98,7 +98,8 @@ Displays the number of results returned in a search. - prefix?: string (e.g. "Catalog") - animate?: boolean -[] RefineSearchPanel +[] RefineSearchPanel () + Collapsible panel of dropdown filters for refining search results. - filters: Array<{ @@ -110,7 +111,8 @@ Collapsible panel of dropdown filters for refining search results. - onFilterChange: Function(label: string, selected: string | string[]) - defaultOpen?: string[] (filters to open by default) -[] FiltersDropdown +[] FiltersDropdown () + Collapsible panel of dropdown filters for refining search results with multiple options - name: string @@ -121,7 +123,8 @@ Collapsible panel of dropdown filters for refining search results with multiple - defaultOpen?: string[] (filters to open by default) -[] AlphabeticalBrowseBy +[] AlphabeticalBrowseBy () + Interactive list to sort results Alphabetically - selectedLetterProp: String, @@ -129,7 +132,8 @@ Interactive list to sort results Alphabetically ## Dropdowns -[] DropdownSingleSelect +[] DropdownSingleSelect() + Reusable dropdown with configurable button label and menu options. - label: string @@ -138,7 +142,8 @@ Reusable dropdown with configurable button label and menu options. - onSelect: Function(option: string) -[] ButtonDropdownSearch +[] ButtonDropdownSearch () + Set of dropdowns to filter/search content by fields like “Title” or “Subject.” - label: string @@ -146,14 +151,16 @@ Set of dropdowns to filter/search content by fields like “Title” or “Subje - selected: string - onSelect: Function(option: string) -[] ButtonUCLALibrariesDropdown +[] ButtonUCLALibrariesDropdown () + Dropdown for selecting from multiple library collections. Appears in tag-chip format. - label: string - libraries: Array - onSelect: Function(library: string) -[] YearRangeFilter or DateFilter +[] YearRangeFilter or DateFilter () + Range selector with start and end year inputs and a confirm button. - minYear: number @@ -230,12 +237,13 @@ Visual card for a digital collection or category. - href: string [] MetadataTable (Svebor) + Tabular list of metadata key-value pairs (e.g. Rights Contact, Rights Holder). - items: Array<{ label: string, value: string | string[] }> - title?: string -[] BlockMediaViewer +[] BlockMediaViewer () Embeds an IIIF viewer, image, or video with optional caption. - title?: string @@ -325,7 +333,8 @@ Horizontal scrollable container of `BentoPod`(Aka: BentoBoxBlock - new addition ## Header -[] Banner +[] Banner () + Universal top banner with UCLA branding. Often pinned to the top of all pages, may contain global notices or links. - label: string @@ -334,7 +343,8 @@ Universal top banner with UCLA branding. Often pinned to the top of all pages, m - textColor?: string - isSticky?: boolean -[] Header +[] Header () + Primary site navigation including logo, main links, and utility search bar. - logo: { label: string, href: string } @@ -348,7 +358,8 @@ Primary site navigation including logo, main links, and utility search bar. ## Footer -[x] Footer +[x] Footer () + Main site footer for UCLA Library, assembling social links, navigation, and newsletter signup. - socialLinks: Array<{ label: string, href: string }> @@ -356,7 +367,8 @@ Main site footer for UCLA Library, assembling social links, navigation, and news - copyright?: string - newsletter -[x] NewsletterSignup +[x] NewsletterSignup () + Standalone newsletter form for email subscription. - headline: string @@ -380,7 +392,8 @@ Top navigation bar for asset pages, including pagination, collection name, and b - onNext: Function - onPrev: Function -[] DetailMedia +[] DetailMedia () + Large asset viewer for images or media, with zoom/download/fullscreen buttons. - title: string From 4a3040fa7fceb30e9fe2fb71a38291a9d72cf9e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Tue, 19 Aug 2025 15:11:53 +0200 Subject: [PATCH 85/98] Taking the DropdownSingleSelect --- COMPONENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 622962854..b82133a6e 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -132,7 +132,7 @@ Interactive list to sort results Alphabetically ## Dropdowns -[] DropdownSingleSelect() +[] DropdownSingleSelect(Svebor) Reusable dropdown with configurable button label and menu options. From f72144cc7ec339a939f7d592dd232461c76899c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Wed, 20 Aug 2025 16:34:15 +0200 Subject: [PATCH 86/98] Take the ButtonDropdownSearch component --- COMPONENTS.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index b82133a6e..2776215a1 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -142,7 +142,7 @@ Reusable dropdown with configurable button label and menu options. - onSelect: Function(option: string) -[] ButtonDropdownSearch () +[] ButtonDropdownSearch (Svebor) Set of dropdowns to filter/search content by fields like “Title” or “Subject.” @@ -480,7 +480,7 @@ An icon is shown on the right side of the screen; clicking it opens a side panel | Component Name | Developer | Status | exists? | Notes | |----------------------------|-----------|-------------|---------|--------------------------------| | ButtonIIIF | | ☐ Complete | [ ] | | -| Button |Luka | ☐ Complete | [] | | +| Button |Luka | ☐ Complete | [ ] | | | DividerGeneral | | ☐ Complete | [x] | | | ButtonPageView |Svebor | ☐ Complete | [ ] | Made a PR | | ButtonTag |Luka | ☐ Complete | [x] | aka: BlockTag | @@ -496,8 +496,8 @@ An icon is shown on the right side of the screen; clicking it opens a side panel | RefineSearchPanel | | ☐ Complete | [ ] | | | FiltersDropdown | | ☐ Complete | [x] | | | AlphabeticalBrowseBy | | ☐ Complete | [x] | | -| DropdownSingleSelect | | ☐ Complete | [x] | | -| ButtonDropdownSearch | | ☐ Complete | [ ] | | +| DropdownSingleSelect |Svebor | ☐ Complete | [ ] | | +| ButtonDropdownSearch |Svebor | ☐ Complete | [ ] | | | ButtonUCLALibrariesDropdown| | ☐ Complete | [ ] | | | YearRangeFilter | | ☐ Complete | [x] | aka DateFilter? | | BentoPod |Svebor | ☐ Complete | [ ] | Made a PR | From 3b3b82a35f5d0ee394a9fde135f3556732baa5e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Svebor=20Sori=C4=87?= <74537302+Sveb@users.noreply.github.com> Date: Fri, 22 Aug 2025 18:12:53 +0200 Subject: [PATCH 87/98] update PR with new spec.js files, uses the font mixins, adds the dlc theme. --- .../e2e/dropdown-single-select-funkhaus.cy.js | 0 .../src/lib-components/ExcerptPod.vue | 9 +- .../src/lib-components/NotesAccordion.vue | 12 ++- .../src/stories/ButtonDropdownSearch.spec.js | 0 .../src/stories/ExcerptPod.spec.js | 20 ++++ .../src/stories/ExcerptPod.stories.js | 99 +++++++++++-------- .../src/stories/NotesAccordion.spec.js | 20 ++++ .../src/stories/NotesAccordion.stories.js | 81 ++++++++------- .../src/styles/dlc/_excerpt-pod.scss | 20 +--- .../src/styles/dlc/_notes-accordion.scss | 6 +- 10 files changed, 162 insertions(+), 105 deletions(-) create mode 100644 packages/vue-component-library/cypress/e2e/dropdown-single-select-funkhaus.cy.js create mode 100644 packages/vue-component-library/src/stories/ButtonDropdownSearch.spec.js create mode 100644 packages/vue-component-library/src/stories/ExcerptPod.spec.js create mode 100644 packages/vue-component-library/src/stories/NotesAccordion.spec.js diff --git a/packages/vue-component-library/cypress/e2e/dropdown-single-select-funkhaus.cy.js b/packages/vue-component-library/cypress/e2e/dropdown-single-select-funkhaus.cy.js new file mode 100644 index 000000000..e69de29bb diff --git a/packages/vue-component-library/src/lib-components/ExcerptPod.vue b/packages/vue-component-library/src/lib-components/ExcerptPod.vue index d7ca3a16d..72819afe2 100644 --- a/packages/vue-component-library/src/lib-components/ExcerptPod.vue +++ b/packages/vue-component-library/src/lib-components/ExcerptPod.vue @@ -2,6 +2,9 @@ // Imports import { defineProps, computed } from "vue" import NotesAccordion from "@/lib-components/NotesAccordion.vue" +import { useTheme } from "@/composables/useTheme" + +const theme = useTheme() // Props type ExcerptPodProps = { @@ -25,9 +28,9 @@ const props = withDefaults(defineProps(), { labelClose: "", }) -// Data - // Computed +const classes = computed(() => ["excerpt-pod", theme?.value || ""]) + const showAccordion = computed(() => { return ( props.accordions.length > 0 && @@ -37,7 +40,7 @@ const showAccordion = computed(() => {