@veracity/vui 2.29.0 → 2.29.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.29.0",
+  "version": "2.29.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
@@ -51,4 +51,4 @@
     "dist",
     "src"
   ]
-}
+}

package/src/link/link.tsx

@@ -8,33 +8,46 @@ import { LinkProps } from './link.types'
 import LinkIcon from './linkIcon'
 import LinkText from './linkText'
 
+const linkSwipeAnimation = `
+  @keyframes linkSwipe {
+    from {
+      background-size: 0 1px;
+    }
+    to {
+      background-size: 100% 1px;
+    }
+  }
+`
+
 export const LinkBase = styled.aBox.attrs((props: LinkProps) => ({
   isUnderlined: props.isUnderlined || false,
 }))`
-  align-items: center;
-  border-radius: none;
+  ${linkSwipeAnimation}
+  display: inline;
   cursor: pointer;
-  display: inline-flex;
-  line-height: normal;
+  position: relative;
+  line-height: 1.5;
   outline: none;
   width: fit-content;
+  text-decoration: none;
 
-  &:not(.vui-listItemLink) > span {
-    text-decoration-line: ${props => (props.isUnderlined ? 'underline' : 'none')};
-    text-decoration-thickness: 1px;
-    text-underline-offset: 2px;
+  &:not(.vui-linkNoUnderline) span {
+    position: relative;
+    background: linear-gradient(to right, currentcolor, currentcolor);
+    background-size: ${({ isUnderlined }) => (isUnderlined ? '100% 1px' : '0 1px')};
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+    text-decoration: none;
+    padding-bottom: 2px;
+    line-height: 1;
   }
 
-  &:not(.vui-listItemLink) > span:hover {
-    text-decoration-line: underline;
-    text-decoration-thickness: ${props => (props.isUnderlined ? '2px' : '1px')};
+  &:hover span {
+    animation: linkSwipe 0.3s ease forwards;
+    background-size: 100% 1px;
   }
 `
 
-/**
- * Displays a link item. Handles different underline scenarios and opening external links in new tab.
- * Exposes some props to the children via context.
- */
 export const Link = vui<'a', LinkProps>((props, ref) => {
   const {
     children,
@@ -63,7 +76,9 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
   return (
     <LinkProvider value={context}>
       <LinkBase
+        alignItems={iconLeft || iconRight ? 'center' : undefined}
         className={cs('vui-link', className)}
+        display={iconLeft || iconRight ? 'inline-flex' : 'inline'}
         focusRing={2}
         isUnderlined={isUnderlined}
         ref={ref}

package/src/list/listItem.tsx

@@ -12,7 +12,7 @@ import ListText from './listText'
 const ListItemLink = vui<'a', LinkProps>((props, ref) => (
   <Link
     borderRadius="none"
-    className="vui-listItemLink"
+    className="vui-listItemLink vui-linkNoUnderline"
     h="100%"
     px={2}
     ref={ref}