@veracity/vui 2.28.7 → 2.28.8-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.28.7",
+  "version": "2.28.8-beta.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",
@@ -9,6 +9,7 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "scripts": {
     "clean": "rimraf .turbo dist node_modules",
+    "prebuild": "tsc -p tsconfig.json",
     "build": "tsc -p tsconfig.json && tsc -p tsconfig.legacy.json",
     "dev": "tsc --watch -p tsconfig.json",
     "eslint": "eslint \"src/**/*.{ts,tsx}\"",

package/src/copyToClipboard/copyToClipboard.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
-
 import Button from '../button'
 import { vui } from '../core'
+import { IconProp } from '../icon'
 import { cs } from '../utils'
 import { CopyToClipboardProps } from './copyToClipboard.types'
 import { useCopyToClipboard } from './useCopyToClipboard'
 
+const defaultIcon: IconProp = 'falCopy'
+
 /**
  * A helper button component.
  *
@@ -15,16 +16,16 @@ import { useCopyToClipboard } from './useCopyToClipboard'
  *
  */
 export const CopyToClipboard = vui<'button', CopyToClipboardProps>((props, ref) => {
-  const { disabled, copyText, className, size = 'sm', variant = 'tertiaryDark', ...rest } = props
+  const { disabled, copyText, className, icon = defaultIcon, size = 'sm', variant = 'tertiaryDark', ...rest } = props
 
   const { copy, isCopyDisabled } = useCopyToClipboard(copyText)
 
   return (
     <Button
-      aria-label="copy to clipboard"
+      aria-label={`Copy to clipboard ${copyText}`}
       className={cs('vui-copy-to-clipboard', className)}
       disabled={disabled || isCopyDisabled}
-      icon="falCopy"
+      icon={icon}
       onClick={() => copy()}
       ref={ref}
       size={size}

package/src/copyToClipboard/copyToClipboard.types.ts

@@ -1,3 +1,4 @@
+import { IconProp } from '../icon'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
@@ -5,6 +6,8 @@ export type CopyToClipboardProps = SystemProps &
   ThemingProps<'Button'> & {
     /** Text string for copying */
     copyText: string
+    /** Icon @default falCopy  */
+    icon?: IconProp
     /** Button size @default "xs" */
     size?: 'xs' | 'sm' | 'md' | 'lg'
   }

package/src/input/consts.ts

@@ -64,3 +64,5 @@ export const helpTextSize = {
   lg: 'md',
   xl: 'md',
 } as const
+
+export const helpTextMargin = '60px' as const

package/src/input/input.tsx

@@ -7,7 +7,14 @@ import Label from '../label'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
 import AutoCompletePopover from './autoCompletePopover'
-import { clearIconSize, displayValueOnlyTextSize, helpTextSize, inputColors, inputStateMapping } from './consts'
+import {
+  clearIconSize,
+  displayValueOnlyTextSize,
+  helpTextMargin,
+  helpTextSize,
+  inputColors,
+  inputStateMapping,
+} from './consts'
 import { InputProvider } from './context'
 import { getInitialCount } from './helpers'
 import HelpText from './helpText'
@@ -230,7 +237,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
             </InputBase>
             {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}
             {!!errorText && (
-              <HelpText isError size={helpTextSize[size]}>
+              <HelpText isError mr={showCount ? helpTextMargin : undefined} size={helpTextSize[size]}>
                 {errorText}
               </HelpText>
             )}

package/src/link/link.tsx

@@ -17,25 +17,17 @@ export const LinkBase = styled.aBox.attrs((props: LinkProps) => ({
   display: inline-flex;
   line-height: normal;
   outline: none;
-  text-decoration: none;
-  transition-duration: instant;
   width: fit-content;
-  position: relative;
 
-  &:not(.vui-listItemLink) > span::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: ${props => (props.isUnderlined ? '1px' : 0)};
-    background-color: currentColor;
-    opacity: ${props => (props.isUnderlined ? 1 : 0)};
+  &:not(.vui-listItemLink) > span {
+    text-decoration-line: ${props => (props.isUnderlined ? 'underline' : 'none')};
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
   }
 
-  & > span:hover::after {
-    height: ${props => (props.isUnderlined ? 2 : 1)}px;
-    opacity: 1;
+  & > span:hover {
+    text-decoration-line: underline;
+    text-decoration-thickness: ${props => (props.isUnderlined ? '2px' : '1px')};
   }
 `
 
@@ -58,8 +50,8 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
     weight,
     ...rest
   } = props
-  const styles = useStyleConfig('Link', props)
 
+  const styles = useStyleConfig('Link', props)
   const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])
 
   const aliasedProps = filterUndefined({
@@ -80,7 +72,7 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
         {...rest}
       >
         {isString(iconLeft) ? <LinkIcon mr={1} name={iconLeft} /> : iconLeft}
-        <T position="relative">{children ?? (isReactText(text) ? <LinkText text={text} /> : text)}</T>
+        <T>{children ?? (isReactText(text) ? <LinkText text={text} /> : text)}</T>
         {isString(iconRight) ? <LinkIcon ml={1} name={iconRight} /> : iconRight}
       </LinkBase>
     </LinkProvider>
@@ -93,4 +85,5 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
 Link.Icon = LinkIcon
 Link.Text = LinkText
 Link.displayName = 'Link'
+
 export default Link

package/src/textarea/textarea.tsx

@@ -2,7 +2,7 @@ import { useEffect, useId, useState } from 'react'
 
 import { Box, Label } from '..'
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
-import { helpTextSize, inputColors } from '../input/consts'
+import { helpTextMargin, helpTextSize, inputColors } from '../input/consts'
 import HelpText from '../input/helpText'
 import T from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
@@ -157,14 +157,13 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
             {count} {maxLength ? `/ ${maxLength}` : null}
           </T>
         )}
-
-        {!!helpText && <HelpText size={helpTextSize['lg']}>{helpText}</HelpText>}
-        {!!errorText && (
-          <HelpText isError size={helpTextSize['lg']}>
-            {errorText}
-          </HelpText>
-        )}
       </TextareaBase>
+      {!!helpText && <HelpText size={helpTextSize['lg']}>{helpText}</HelpText>}
+      {!!errorText && (
+        <HelpText isError mr={showCount ? helpTextMargin : undefined} size={helpTextSize['lg']}>
+          {errorText}
+        </HelpText>
+      )}
     </Box>
   )
 })