## Background

The idea of this issue is to make interactions on UA website more delightful through the use of hover, scroll, activation, and other kinds of user interaction.

It is important to note that all motion should be disabled for users who prefer reduced motion. We should also give more consideration to the differences of input methods.

This is somewhat of an open issue that will continue to be updated as designs are figured out.

## Explorations

@spbrown6 and I thought a good place to start with this could be the link-box component. On hover, it could scale up slightly and gain a drop shadow.

I'd like us to investigate animating underlines and backgrounds as well, since we'll likely be able to work some of those things in.

enhancement

Minerva 1.6.0

Refresh micro-interactions

## Background

This is an ongoing effort that started with https://github.com/UA-Stratcom/minerva/issues/537

## Description

- We need to add a new category of tokens for shadows
- This new category will have three tokens detailed below
- A new SCSS function to insert the tokens is needed, as well as any applicable mixins
- Utility classes for the shadows should also be added

```
shadow--small: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
shadow--medium: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
shadow--large: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
```

In addition, new test cases should be added to the test suite to ensure the new functions are returning the correct values and token names.


Add support for shadows

## Background

Users who are unaware of ctl+f search and mobile users could benefit from a search bar component that searches that individual page for selected criteria (headings only, all content...). This would be especially useful for text-heavy pages such as FAQ's.

## Description

A search bar that populates results from the active page as a user types and scrolls to the selected item on click. 

## Workarounds

The site-wide search bar can list many irrelevant results. Users may not be aware of browser page search features.

## Mockups / Proposed solution

ChatGPT has provided a working prototype on this page below. It was instructed to create a search bar for a single wordpress page that searches headings on that page, in the style of ua.edu. It was also instructed to contain all necessary code to a single custom html block.

[https://dev-ua-3sandbox.pantheonsite.io/in-page-search-bar/](https://dev-ua-3sandbox.pantheonsite.io/in-page-search-bar/
)
## ChatGPT's Code

```
<div id="headingSearchContainer">
  <input type="text" id="headingSearch" placeholder="Search Legends" />
  <ul id="searchResults"></ul>
</div>

<style>
#headingSearchContainer {
  max-width: 700px;
  margin: 48px auto;
  padding: 24px 28px;
  background-color: #fff;
  border-left: 6px solid #990000;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
}

#headingSearch {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 6px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#headingSearch:focus {
  border-color: #990000;
  box-shadow: 0 0 0 3px rgba(153, 0, 0, 0.2);
  outline: none;
}

#searchResults {
  margin-top: 18px;
  list-style: none;
  padding: 0;
}

#searchResults li {
  margin-bottom: 10px;
}

#searchResults a {
  display: block;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-left: 4px solid #990000;
  border-radius: 4px;
  text-decoration: none;
  color: #990000;
  font-weight: 600;
  transition: background-color 0.25s, color 0.25s;
}

#searchResults a:hover {
  background-color: #f2eaea;
  color: #660000;
}

#searchResults li.no-results {
  color: #777;
  font-style: italic;
  padding: 12px 8px;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const input = document.getElementById("headingSearch");
  const results = document.getElementById("searchResults");
  const headings = Array.from(document.querySelectorAll("h2, h3, h4, h5, h6"));

  input.addEventListener("input", function () {
    const query = this.value.trim().toLowerCase();
    results.innerHTML = "";

    if (query.length < 2) return;

    const matches = headings.filter(h =>
      h.textContent.toLowerCase().includes(query)
    );

    if (matches.length === 0) {
      const li = document.createElement("li");
      li.textContent = "No matches found.";
      li.classList.add("no-results");
      results.appendChild(li);
    }

    matches.forEach(h => {
      const li = document.createElement("li");
      const link = document.createElement("a");

      if (!h.id) {
        h.id = "heading-" + Math.random().toString(36).substr(2, 9);
      }

      link.href = "#" + h.id;
      link.textContent = h.textContent;
      li.appendChild(link);
      results.appendChild(li);
    });
  });
});
</script>
```

design

In-Page Search Bar Component

The context for this is that I'm working on a NextJS project that depends on persistent state management. Next handles navigation between pages using their own Link component. I wanted to make a fork of the LinkBox component, modified slightly to use Next Link instead of our built in link utility. When I copied over the source for the component, and updated all of the imports to pull from '@UA-Stratcom/minerva', typescript had several issues.

## Description

When installing minerva as a package, it would be helpful to be able to import type declarations for use in custom components or to extend minerva components, respecting the component interfaces. To do this, one would expect to import the type like below:

```tsx
import type { icon } from "@UA-Stratcom/minerva";
```

However this doesn't work, as the types themselves are not exported in the compiled types.d.ts file that is distributed with the package.

## How to Reproduce

Steps to reproduce the behavior:

1. Create a NextJS app (you can use the starter template)
2. Try creating a new component, but using one of Minerva's types in the props
3. Import the type from Minerva using the syntax above
4. See errors

## Expected behavior

We should have a way for users to import our types for use in their own projects

## Screenshots

If applicable, add screenshots to help explain your problem.

## Additional context

I looked into this for quite a while late last night and I'm pretty sure there's some configuration issue in one of the files: `package.json` `rollup.config.js` or `tsconfig.json`

I tried asking Copilot and while it did provide some interesting advice, I think it doesn't understand the intricacies of how our package is built for distribution, since it passes through several steps.

## Side note

It would be very cool if we could figure out a way to easily use Next Link instead of our link utility without adding Next as a dependency. The only way I can imagine doing this would be either some global level configuration file, which seems extremely complicated, or find someway to replace our Link utility component with a custom one that wraps Next Link so that the props are all the same, just parsed and passed through to Next Link. I'm not sure how to get Minerva to recognize the new component as an override for the existing Link utility. Since our React projects are mostly in NextJS, it may make sense to dedicate some time to solving this issue.

An issue related to developer experience or operations

Can't import types from minerva when installed as a package

## Description

UA has held this very sharp edge design for about 5 years now, and recent concepts have floated the idea of rounded corners. We need to look at the design system as a whole and determine how rounded corners fit into the design system, and what it means for existing components and overall visual language.

Anything related to architecture / refactors / project structure

core

Evaluate addition of border radius

## Description

WordPress now supports box shadows in the editor, with several enabled by default. @spbrown6 and I talked about this briefly during the last all staff meeting, and decided we would look into how box shadow effects could be applied throughout the design system.

Box shadows don't necessarily have to be the feathered drop shadows that come to mind, they can be solid and bold or even outlined offsets.

We need to determine the following:

- Are box shadows permitted by the design system
- If so, what presets are there to choose from
- How should those presets be used
- Should they be worked into the default design of any components
- If not, what usage guidelines will we have for box shadows

There may be other questions we run into during this exploration, but those are the big ones that need to be addressed. Basically, how do box shadows fit in the design system.

Evaluate addition of box shadows

blocked

Development for Timeline component

## Description

A mockup should be produced following the Minerva design system with annotations for developer handoff. All designs will be considered, but a vertical layout will likely be the most straightforward. The timeline should account for arbitrary content length, a date, and an optional image.


Design for Timeline component

## Background

We've had a couple of requests for a timeline block, and even needed a solution for this on UA home. We ended up going with the workaround below, but it would be nice to have a full fledged component to handle this type of content.

## Description

This is a proposal for a new component that would allow users to display content along a timeline.

## Workarounds

Currently, there are probably multiple ways to display this information but the workaround we used on home was to use headings and content very much like a standard page.


A task related to planning / project management

planning

Timeline Component

## Description

This is a list of things we need to double check to make sure we're in line with the new WCAG 2.2 guidelines.

- [ ] 2.5.3 For UI components with labels that include text or images of text, the name attribute contains the text that is presented visually
- [x] 2.5.2 For functionality operated using a single pointer, one of the following is true: The down event is not used to trigger any action, the action can be aborted or the action can be undone, the up event reverses any outcome of the down event, or completing the action on the down event is essential
- [ ] 4.1.3 Status messages can be programmatically determined through role or properties such that they can be presented ti the user by assistive technology without receiving focus
- [ ] 1.4.11 Graphics and UI components must meet contrast guidelines
- [x] 1.4.12 When the following is set by the user: Line height at least 1.5, space between paragraphs at least 2em, letter spacing at least 0.12em and word spacing at least 0.16em, no part of the UI becomes unusable
- [ ] 1.4.13 This is a long one that pertains to content revealed on hover or focus

## Notes

For 2.5.3, we mostly just need to check any label elements and make sure the name attribute matches the text inside the label

For 2.5.2, we need to look through all of our JS and make sure nothing is triggered on the mouse down event

For 4.1.3, I need to do some more research on what exactly qualifies as a status message, but this will likely only apply to the alert banner on home. Its possible the Callout component could be used as a status message, so we may need to add a prop to that component to indicate if its an alert or not. I'm wary of this however because I fear content editors will abuse this option. If the Callout component gets this new prop, it should be a checkbox in the theme with a warning beneath it explaining what that checkbox is for and discourage it's use.

For 1.4.11, I need to do some research on what the WC3 classifies as a "UI Component". This could potentially be a lot of trouble if things like cards are included, and may require a re-think of how we handle the color system

For 1.4.13, I'm going to verify that applies to dropdowns on the main navigation. If it does, it may mean we have to change how this component functions.

## Important

This issue is not meant to fix any accessibility violations, only identify if a fix needs to be made. **If we discover anything in violation of these new guidelines, we should open a new accessibility issue to track it specifically.**

Use this thread to discuss these guidelines and their impact on our web framework.

Roadmap

Milestones

Minerva 1.6.0