@veracity/vui 2.28.7 → 2.28.8-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.28.7",
+  "version": "2.28.8-beta.0",
   "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/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>
   )
 })