@veracity/vui 2.8.4-rc.0 → 2.8.4

package/dist/cjs/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAuHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UA0IX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/cjs/button/button.js

@@ -102,6 +102,29 @@ exports.Button = (0, core_1.vui)((props, ref) => {
     const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
     const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
     const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
+    let ariaLabel = 'vui-button';
+    if (title) {
+        ariaLabel = title;
+    }
+    else {
+        if ((0, utils_1.isString)(text)) {
+            ariaLabel = text;
+        }
+        else if ((0, utils_1.isReactText)(text)) {
+            ariaLabel = text.toString();
+        }
+        else {
+            if ((0, utils_1.isString)(icon)) {
+                ariaLabel = icon;
+            }
+            else if ((0, utils_1.isString)(iconLeft)) {
+                ariaLabel = iconLeft;
+            }
+            else if ((0, utils_1.isString)(iconRight)) {
+                ariaLabel = iconRight;
+            }
+        }
+    }
     const disabledProps = disabled
         ? {
             'aria-disabled': disabled,
@@ -123,7 +146,7 @@ exports.Button = (0, core_1.vui)((props, ref) => {
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(context_2.ButtonProvider, { value: context },
-        react_1.default.createElement(exports.ButtonBase, Object.assign({ "aria-label": title ? undefined : 'button', borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, title: title, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
+        react_1.default.createElement(exports.ButtonBase, Object.assign({ "aria-label": ariaLabel, borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, title: title, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
             hasState && (react_1.default.createElement(StateWrapper, Object.assign({ onClick: (e) => e.stopPropagation() }, stateProps),
                 react_1.default.createElement(buttonIcon_1.default, Object.assign({ m: "auto" }, stateIconProps)))),
             react_1.default.createElement(Content, null,

package/dist/cjs/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAyBpE,eAAO,MAAM,YAAY,ulJAkBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAqFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAyBpE,eAAO,MAAM,YAAY,ulJAiBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAuFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/checkbox/checkbox.js

@@ -65,7 +65,6 @@ const CheckboxInput = core_1.styled.input `
   z-index: 1;
 `;
 exports.CheckboxBase = core_1.styled.labelBox `
-  align-items: center;
   cursor: pointer;
   display: inline-flex;
   width: fit-content;
@@ -96,9 +95,10 @@ exports.Checkbox = (0, core_1.vui)((props, ref) => {
     const styles = (0, core_1.useStyleConfig)('Checkbox', mergedProps);
     const _d = styles.control, { color: controlColor, hoverColor } = _d, controlStyles = __rest(_d, ["color", "hoverColor"]);
     const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;
-    const controlMr = children || label ? 1 : 0;
+    const controlMr = children || label ? '12px' : 0;
     const color = controlColor ? controlColor : consts_1.checkboxColors.main;
     const controlHoverColor = hoverColor ? hoverColor : consts_1.checkboxColors.hover;
+    const isLongLabel = label && (label === null || label === void 0 ? void 0 : label.length) >= 60;
     (0, react_1.useEffect)(() => {
         checked !== undefined && setIsChecked(checked);
     }, [checked]);
@@ -109,9 +109,9 @@ exports.Checkbox = (0, core_1.vui)((props, ref) => {
     const aliasedProps = (0, utils_1.filterUndefined)({
         'aria-disabled': disabled
     });
-    return (react_1.default.createElement(exports.CheckboxBase, Object.assign({ className: (0, utils_1.cs)('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest),
+    return (react_1.default.createElement(exports.CheckboxBase, Object.assign({ alignItems: isLongLabel ? 'flex-start' : 'center', className: (0, utils_1.cs)('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest),
         react_1.default.createElement(CheckboxControl, Object.assign({ bg: "white", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, role: "none" }, controlStyles),
             react_1.default.createElement(CheckboxInput, Object.assign({ "aria-label": label ? label : 'input-checkbox', className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox" }, { checked, defaultChecked, disabled, id, name, required, value }, inputProps)),
-            react_1.default.createElement(icon_1.default, { className: "vui-checkboxIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, Object.assign({ className: "vui-checkboxLabel", lineHeight: "normal" }, styles.label), label)))));
+            react_1.default.createElement(icon_1.default, { className: "vui-checkboxIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, Object.assign({ className: "vui-checkboxLabel", lineHeight: isLongLabel ? '26px' : 'normal' }, styles.label), label)))));
 });
 exports.default = exports.Checkbox;

package/dist/cjs/image/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/image/image.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,eAAO,MAAM,SAAS,+HAIrB,CAAA;AAED,gDAAgD;AAChD,eAAO,MAAM,KAAK,mDAKhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/image/image.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,eAAO,MAAM,SAAS,+HAIrB,CAAA;AAED,gDAAgD;AAChD,eAAO,MAAM,KAAK,mDAchB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/cjs/image/image.js

@@ -25,8 +25,8 @@ exports.ImageBase = core_1.styled.imgBox `
 `;
 /** Displays an image. Includes base styling. */
 exports.Image = (0, core_1.vui)((props, ref) => {
-    const _a = (0, core_1.omitThemingProps)(props), { className } = _a, rest = __rest(_a, ["className"]);
+    const _a = (0, core_1.omitThemingProps)(props), { alt, className, title } = _a, rest = __rest(_a, ["alt", "className", "title"]);
     const styles = (0, core_1.useStyleConfig)('Image', props);
-    return react_1.default.createElement(exports.ImageBase, Object.assign({ alt: "VUI image", className: (0, utils_1.cs)('vui-image', className), ref: ref }, styles, rest));
+    return (react_1.default.createElement(exports.ImageBase, Object.assign({ alt: alt ? alt : title ? title : '', className: (0, utils_1.cs)('vui-image', className), ref: ref, title: title }, styles, rest)));
 });
 exports.default = exports.Image;

package/dist/esm/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAuHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UA0IX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/esm/button/button.js

@@ -61,6 +61,29 @@ export const Button = vui((props, ref) => {
     const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
     const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
     const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
+    let ariaLabel = 'vui-button';
+    if (title) {
+        ariaLabel = title;
+    }
+    else {
+        if (isString(text)) {
+            ariaLabel = text;
+        }
+        else if (isReactText(text)) {
+            ariaLabel = text.toString();
+        }
+        else {
+            if (isString(icon)) {
+                ariaLabel = icon;
+            }
+            else if (isString(iconLeft)) {
+                ariaLabel = iconLeft;
+            }
+            else if (isString(iconRight)) {
+                ariaLabel = iconRight;
+            }
+        }
+    }
     const disabledProps = disabled
         ? {
             'aria-disabled': disabled,
@@ -82,7 +105,7 @@ export const Button = vui((props, ref) => {
         w: isFullWidth ? '100%' : undefined
     });
     return (React.createElement(ButtonProvider, { value: context },
-        React.createElement(ButtonBase, { "aria-label": title ? undefined : 'button', borderWidth: border, className: cs('vui-button', className, isActive && activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, title: title, type: "button", variant: variant, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },
+        React.createElement(ButtonBase, { "aria-label": ariaLabel, borderWidth: border, className: cs('vui-button', className, isActive && activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, title: title, type: "button", variant: variant, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },
             hasState && (React.createElement(StateWrapper, { onClick: (e) => e.stopPropagation(), ...stateProps },
                 React.createElement(ButtonIcon, { m: "auto", ...stateIconProps }))),
             React.createElement(Content, null,

package/dist/esm/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAyBpE,eAAO,MAAM,YAAY,ulJAkBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAqFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAyBpE,eAAO,MAAM,YAAY,ulJAiBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAuFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/esm/checkbox/checkbox.js

@@ -25,7 +25,6 @@ const CheckboxInput = styled.input `
   z-index: 1;
 `;
 export const CheckboxBase = styled.labelBox `
-  align-items: center;
   cursor: pointer;
   display: inline-flex;
   width: fit-content;
@@ -55,9 +54,10 @@ export const Checkbox = vui((props, ref) => {
     const styles = useStyleConfig('Checkbox', mergedProps);
     const { color: controlColor, hoverColor, ...controlStyles } = styles.control;
     const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;
-    const controlMr = children || label ? 1 : 0;
+    const controlMr = children || label ? '12px' : 0;
     const color = controlColor ? controlColor : checkboxColors.main;
     const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover;
+    const isLongLabel = label && label?.length >= 60;
     useEffect(() => {
         checked !== undefined && setIsChecked(checked);
     }, [checked]);
@@ -68,11 +68,11 @@ export const Checkbox = vui((props, ref) => {
     const aliasedProps = filterUndefined({
         'aria-disabled': disabled
     });
-    return (React.createElement(CheckboxBase, { className: cs('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref, ...styles.container, ...aliasedProps, ...rest },
+    return (React.createElement(CheckboxBase, { alignItems: isLongLabel ? 'flex-start' : 'center', className: cs('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref, ...styles.container, ...aliasedProps, ...rest },
         React.createElement(CheckboxControl, { bg: "white", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, role: "none", ...controlStyles },
             React.createElement(CheckboxInput, { "aria-label": label ? label : 'input-checkbox', className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),
             React.createElement(Icon, { className: "vui-checkboxIcon", h: "100%", name: icon, w: "100%" })),
         children ??
-            (label && (React.createElement(T, { className: "vui-checkboxLabel", lineHeight: "normal", ...styles.label }, label)))));
+            (label && (React.createElement(T, { className: "vui-checkboxLabel", lineHeight: isLongLabel ? '26px' : 'normal', ...styles.label }, label)))));
 });
 export default Checkbox;

package/dist/esm/image/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/image/image.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,eAAO,MAAM,SAAS,+HAIrB,CAAA;AAED,gDAAgD;AAChD,eAAO,MAAM,KAAK,mDAKhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/image/image.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,eAAO,MAAM,SAAS,+HAIrB,CAAA;AAED,gDAAgD;AAChD,eAAO,MAAM,KAAK,mDAchB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/esm/image/image.js

@@ -8,8 +8,8 @@ export const ImageBase = styled.imgBox `
 `;
 /** Displays an image. Includes base styling. */
 export const Image = vui((props, ref) => {
-    const { className, ...rest } = omitThemingProps(props);
+    const { alt, className, title, ...rest } = omitThemingProps(props);
     const styles = useStyleConfig('Image', props);
-    return React.createElement(ImageBase, { alt: "VUI image", className: cs('vui-image', className), ref: ref, ...styles, ...rest });
+    return (React.createElement(ImageBase, { alt: alt ? alt : title ? title : '', className: cs('vui-image', className), ref: ref, title: title, ...styles, ...rest }));
 });
 export default Image;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.8.4-rc.0",
+  "version": "2.8.4",
   "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",

package/src/button/button.tsx

@@ -98,6 +98,25 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
   const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px'
   const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px'
 
+  let ariaLabel = 'vui-button'
+  if (title) {
+    ariaLabel = title
+  } else {
+    if (isString(text)) {
+      ariaLabel = text
+    } else if (isReactText(text)) {
+      ariaLabel = text.toString()
+    } else {
+      if (isString(icon)) {
+        ariaLabel = icon
+      } else if (isString(iconLeft)) {
+        ariaLabel = iconLeft
+      } else if (isString(iconRight)) {
+        ariaLabel = iconRight
+      }
+    }
+  }
+
   const disabledProps = disabled
     ? {
         'aria-disabled': disabled,
@@ -123,7 +142,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
   return (
     <ButtonProvider value={context}>
       <ButtonBase
-        aria-label={title ? undefined : 'button'}
+        aria-label={ariaLabel}
         borderWidth={border}
         className={cs('vui-button', className, isActive && activeClassName)}
         disabled={disabled}

package/src/checkbox/checkbox.tsx

@@ -30,7 +30,6 @@ const CheckboxInput = styled.input`
 `
 
 export const CheckboxBase = styled.labelBox<CheckboxStyleProps>`
-  align-items: center;
   cursor: pointer;
   display: inline-flex;
   width: fit-content;
@@ -82,9 +81,10 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
   const { color: controlColor, hoverColor, ...controlStyles } = styles.control
 
   const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp
-  const controlMr = children || label ? 1 : 0
+  const controlMr = children || label ? '12px' : 0
   const color = controlColor ? controlColor : checkboxColors.main
   const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover
+  const isLongLabel = label && label?.length >= 60
 
   useEffect(() => {
     checked !== undefined && setIsChecked(checked)
@@ -101,6 +101,7 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
 
   return (
     <CheckboxBase
+      alignItems={isLongLabel ? 'flex-start' : 'center'}
       className={cs('vui-checkbox', className)}
       controlHoverColor={controlHoverColor}
       ref={ref}
@@ -132,7 +133,7 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
 
       {children ??
         (label && (
-          <T className="vui-checkboxLabel" lineHeight="normal" {...styles.label}>
+          <T className="vui-checkboxLabel" lineHeight={isLongLabel ? '26px' : 'normal'} {...styles.label}>
             {label}
           </T>
         ))}

package/src/image/image.tsx

@@ -12,10 +12,19 @@ export const ImageBase = styled.imgBox`
 
 /** Displays an image. Includes base styling. */
 export const Image = vui<'img', ImageProps>((props, ref) => {
-  const { className, ...rest } = omitThemingProps(props)
+  const { alt, className, title, ...rest } = omitThemingProps(props)
   const styles = useStyleConfig('Image', props)
 
-  return <ImageBase alt="VUI image" className={cs('vui-image', className)} ref={ref} {...styles} {...rest} />
+  return (
+    <ImageBase
+      alt={alt ? alt : title ? title : ''}
+      className={cs('vui-image', className)}
+      ref={ref}
+      title={title}
+      {...styles}
+      {...rest}
+    />
+  )
 })
 
 export default Image