## 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 2.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

It would be good for us to have a way to develop and test components that has JavaScript like we do now, in isolated environments with vanilla JS. But we would also benefit from having all of the component logic native in each React component.

This will require a non trivial restructuring of the way we approach development for these components, and I don't currently have any ideas. Just something we should look into.

research

Implement React based component logic while keeping tests for vanilla JS

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.

design

Anything related to architecture / refactors / project structure

core

Evaluate addition of border radius

## 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.

Review for WCAG 2.2 Compliance

## Background

Some event-driven communications could benefit from a countdown. This is something periodically requested as well, and its been tossed around as an idea in our team for a while.

## Description

A new component `<Countdown />` that provides a large text based clock countdown. The input would be the date-time to count down to and we can use front-end JS to populate the time.

It might be nice to include controls for the size / alignment of the countdown text as well as a control for content that should be shown when the countdown ends so that it's not just a zeroed out clock. To that end, it might be nice to allow editors to add content before and after the countdown timer as well.

## Workarounds

There's not really a good workaround for this right now. The most feasible would probably be to install a plugin that adds this kind of block. Editors could also add a more vague message like "X days to go!" that they update manually every day.

## Mockups / Proposed solution

We don't have a mockup for this yet. We can start off by just using 00:000:00:00:00 where the format would be years:days:hours:minutes:seconds. The text can use the xlarge font by default. We'll revisit the styling once we have a formal mockup


feature

Minerva 1.7.0

Countdown component

It would be great to have a component to generate SVG / CSS shape dividers, like the waves we have used on home. I found this app that looks promising, if we can create a component that takes in those properties and generates the shape.

https://www.shapedivider.app/

Shape divider

Because the UA System logo is required on all UA website and not as many sites use the SiteFooter as expected, we've redesigned the BrandFooter to include that mark. You can see the new design on legends.ua.edu. The BrandFooter needs to be updated to this version and the SiteFooter needs to be updated to not have the system logo. That will also make the usable SiteFooter content area larger.

BrandFooter & SiteFooter update

Components with their own issues will be added to this as children. Besides those, the following components are slated for a re-design

- [x] Details & Detail List
- [x] LinkList
- [x] PageSearch (add label / icon)
- [x] Pullquote
- [x] Social Links
- [x] Steps (review)
- [x] TagList (review or new TagIndex component?)
- [x] Breadcrumbs
- [ ] Pagination

There have also been ideas related to heading decorations and CSS shape dividers. We should also review all components for consistent state and link styling

Component redesigns

Sidebar redesign to play nice with rounded corners. Kyle also liked how the UA System site handles theirs on mobile. We might be able to position ours above the hero and collapse it on mobile like that too.

https://uasystem.edu/board

Roadmap

Milestones

Minerva 2.0

Minerva 1.7.0