feat: Add DetailHeader

[lux-v]

Component Created: DetailHeader.vue

Stories: ~/stories/DetailHeader.stories.js

Notes:

This PR uses a button implemented in this PR. So it might be a better idea to review the Button PR first.

Checklist:

• I checked that it is working locally in the dev server
• I checked that it is working locally in the storybook
• I checked that it is working locally in the
  library-website-nuxt dev server
• I added a screenshot of it working
• UX has reviewed and approved this
• I assigned this PR to someone on the dev team to review
• I used a conventional commit message
• I assigned myself to this PR

[Copilot]

Pull Request Overview

This PR introduces a new DetailHeader component for the UCLA library's Vue component library, along with supporting utilities and types. The component provides navigation controls for detail pages including previous/next links, results count, tag information, and an optional back button.

Key changes:

• Created DetailHeader component with navigation, results display, and tag information features
• Added utility functions for number formatting and pluralization
• Established TypeScript types for button components
• Updated existing SectionPagination component with formatting improvements

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
DetailHeader.vue	Main component implementing detail page header with navigation and metadata display
DetailHeader.stories.js	Storybook stories demonstrating various DetailHeader configurations
Button.vue	Reusable button component with multiple variants and states
Button.stories.js	Storybook stories for button component variations
pluralize.js	Utility functions for proper word pluralization
formatNumber.js	Utility for formatting numbers with locale-appropriate separators
button.types.ts	TypeScript definitions for button component props and enums
_detail-header.scss	Styling for the DetailHeader component
_button.scss	Styling for the Button component
SectionPagination.vue	Code formatting improvements (quotes and indentation)

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The condition v-if="totalResults" will hide the results display when totalResults is 0, but 0 is a valid result count that should be displayed. Consider changing to v-if="totalResults !== undefined && totalResults !== null" or v-if="typeof totalResults === 'number'" to show "0 results" when appropriate.

Suggested change

	<div v-if="totalResults" class="results-number">
	<div v-if="typeof totalResults === 'number'" class="results-number">

[Copilot]

The isNaN(num) check will return true for non-numeric types like strings, which may not be the intended behavior. Consider using Number.isNaN(num) instead, or add a type check like typeof num !== 'number' to be more explicit about the validation.

Suggested change

	if (num === null || num === undefined || isNaN(num)) {
	if (typeof num !== 'number' || Number.isNaN(num)) {

[Copilot]

The condition v-if="tag.name" could cause a runtime error if tag is undefined or null. Consider adding a null check: v-if="tag?.name" or v-if="tag && tag.name" to prevent accessing properties on undefined objects.

Suggested change

	<div class="tag" v-if="tag.name">
	<div class="tag" v-if="tag && tag.name">

[Copilot]

The totalResults prop allows negative numbers, which doesn't make sense for a results count. Consider adding validation or using a more restrictive type that ensures non-negative values.

Suggested change

totalResults?: number

[netlify]

❌ Deploy Preview for ucla-components-storybook failed. Why did it fail? →

Name	Link
🔨 Latest commit	d2c23a2
🔍 Latest deploy log	https://app.netlify.com/projects/ucla-components-storybook/deploys/690109b417827600081c35ce