@veracity/vui 2.8.3-rc.4 → 2.8.3-rc.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/button/button.d.ts.map +1 -1
  2. package/dist/cjs/button/button.js +24 -1
  3. package/dist/cjs/image/image.d.ts.map +1 -1
  4. package/dist/cjs/image/image.js +2 -2
  5. package/dist/esm/button/button.d.ts.map +1 -1
  6. package/dist/esm/button/button.js +24 -1
  7. package/dist/esm/image/image.d.ts.map +1 -1
  8. package/dist/esm/image/image.js +2 -2
  9. package/package.json +1 -1
  10. package/src/button/button.tsx +20 -1
  11. package/src/image/image.tsx +11 -2
package/dist/cjs/button/button.d.ts.map CHANGED
@@ -1 +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"}
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;UA0IX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
package/dist/cjs/button/button.js CHANGED
@@ -102,6 +102,29 @@ exports.Button = (0, core_1.vui)((props, ref) => {
102
102
  const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
103
103
  const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
104
104
  const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
105
+ let ariaLabel = 'vui-button';
106
+ if (title) {
107
+ ariaLabel = title;
108
+ }
109
+ else {
110
+ if ((0, utils_1.isString)(text)) {
111
+ ariaLabel = text;
112
+ }
113
+ else if ((0, utils_1.isReactText)(text)) {
114
+ ariaLabel = text.toString();
115
+ }
116
+ else {
117
+ if ((0, utils_1.isString)(icon)) {
118
+ ariaLabel = icon;
119
+ }
120
+ else if ((0, utils_1.isString)(iconLeft)) {
121
+ ariaLabel = iconLeft;
122
+ }
123
+ else if ((0, utils_1.isString)(iconRight)) {
124
+ ariaLabel = iconRight;
125
+ }
126
+ }
127
+ }
105
128
  const disabledProps = disabled
106
129
  ? {
107
130
  'aria-disabled': disabled,
@@ -123,7 +146,7 @@ exports.Button = (0, core_1.vui)((props, ref) => {
123
146
  w: isFullWidth ? '100%' : undefined
124
147
  });
125
148
  return (react_1.default.createElement(context_2.ButtonProvider, { value: context },
126
- 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),
149
+ 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),
127
150
  hasState && (react_1.default.createElement(StateWrapper, Object.assign({ onClick: (e) => e.stopPropagation() }, stateProps),
128
151
  react_1.default.createElement(buttonIcon_1.default, Object.assign({ m: "auto" }, stateIconProps)))),
129
152
  react_1.default.createElement(Content, null,
package/dist/cjs/image/image.d.ts.map CHANGED
@@ -1 +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"}
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,mDAchB,CAAA;AAEF,eAAe,KAAK,CAAA"}
package/dist/cjs/image/image.js CHANGED
@@ -25,8 +25,8 @@ exports.ImageBase = core_1.styled.imgBox `
25
25
  `;
26
26
  /** Displays an image. Includes base styling. */
27
27
  exports.Image = (0, core_1.vui)((props, ref) => {
28
- const _a = (0, core_1.omitThemingProps)(props), { className } = _a, rest = __rest(_a, ["className"]);
28
+ const _a = (0, core_1.omitThemingProps)(props), { className, title } = _a, rest = __rest(_a, ["className", "title"]);
29
29
  const styles = (0, core_1.useStyleConfig)('Image', props);
30
- return react_1.default.createElement(exports.ImageBase, Object.assign({ alt: "VUI image", className: (0, utils_1.cs)('vui-image', className), ref: ref }, styles, rest));
30
+ return (react_1.default.createElement(exports.ImageBase, Object.assign({ alt: title ? title : 'VUI image', className: (0, utils_1.cs)('vui-image', className), ref: ref, title: title }, styles, rest)));
31
31
  });
32
32
  exports.default = exports.Image;
package/dist/esm/button/button.d.ts.map CHANGED
@@ -1 +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"}
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;UA0IX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
package/dist/esm/button/button.js CHANGED
@@ -61,6 +61,29 @@ export const Button = vui((props, ref) => {
61
61
  const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
62
62
  const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
63
63
  const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
64
+ let ariaLabel = 'vui-button';
65
+ if (title) {
66
+ ariaLabel = title;
67
+ }
68
+ else {
69
+ if (isString(text)) {
70
+ ariaLabel = text;
71
+ }
72
+ else if (isReactText(text)) {
73
+ ariaLabel = text.toString();
74
+ }
75
+ else {
76
+ if (isString(icon)) {
77
+ ariaLabel = icon;
78
+ }
79
+ else if (isString(iconLeft)) {
80
+ ariaLabel = iconLeft;
81
+ }
82
+ else if (isString(iconRight)) {
83
+ ariaLabel = iconRight;
84
+ }
85
+ }
86
+ }
64
87
  const disabledProps = disabled
65
88
  ? {
66
89
  'aria-disabled': disabled,
@@ -82,7 +105,7 @@ export const Button = vui((props, ref) => {
82
105
  w: isFullWidth ? '100%' : undefined
83
106
  });
84
107
  return (React.createElement(ButtonProvider, { value: context },
85
- 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 },
108
+ 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 },
86
109
  hasState && (React.createElement(StateWrapper, { onClick: (e) => e.stopPropagation(), ...stateProps },
87
110
  React.createElement(ButtonIcon, { m: "auto", ...stateIconProps }))),
88
111
  React.createElement(Content, null,
package/dist/esm/image/image.d.ts.map CHANGED
@@ -1 +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"}
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,mDAchB,CAAA;AAEF,eAAe,KAAK,CAAA"}
package/dist/esm/image/image.js CHANGED
@@ -8,8 +8,8 @@ export const ImageBase = styled.imgBox `
8
8
  `;
9
9
  /** Displays an image. Includes base styling. */
10
10
  export const Image = vui((props, ref) => {
11
- const { className, ...rest } = omitThemingProps(props);
11
+ const { className, title, ...rest } = omitThemingProps(props);
12
12
  const styles = useStyleConfig('Image', props);
13
- return React.createElement(ImageBase, { alt: "VUI image", className: cs('vui-image', className), ref: ref, ...styles, ...rest });
13
+ return (React.createElement(ImageBase, { alt: title ? title : 'VUI image', className: cs('vui-image', className), ref: ref, title: title, ...styles, ...rest }));
14
14
  });
15
15
  export default Image;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veracity/vui",
3
- "version": "2.8.3-rc.4",
3
+ "version": "2.8.3-rc.6",
4
4
  "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
5
5
  "module": "./dist/esm/index.js",
6
6
  "main": "./dist/cjs/index.js",
package/src/button/button.tsx CHANGED
@@ -98,6 +98,25 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
98
98
  const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px'
99
99
  const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px'
100
100
 
101
+ let ariaLabel = 'vui-button'
102
+ if (title) {
103
+ ariaLabel = title
104
+ } else {
105
+ if (isString(text)) {
106
+ ariaLabel = text
107
+ } else if (isReactText(text)) {
108
+ ariaLabel = text.toString()
109
+ } else {
110
+ if (isString(icon)) {
111
+ ariaLabel = icon
112
+ } else if (isString(iconLeft)) {
113
+ ariaLabel = iconLeft
114
+ } else if (isString(iconRight)) {
115
+ ariaLabel = iconRight
116
+ }
117
+ }
118
+ }
119
+
101
120
  const disabledProps = disabled
102
121
  ? {
103
122
  'aria-disabled': disabled,
@@ -123,7 +142,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
123
142
  return (
124
143
  <ButtonProvider value={context}>
125
144
  <ButtonBase
126
- aria-label={title ? undefined : 'button'}
145
+ aria-label={ariaLabel}
127
146
  borderWidth={border}
128
147
  className={cs('vui-button', className, isActive && activeClassName)}
129
148
  disabled={disabled}
package/src/image/image.tsx CHANGED
@@ -12,10 +12,19 @@ export const ImageBase = styled.imgBox`
12
12
 
13
13
  /** Displays an image. Includes base styling. */
14
14
  export const Image = vui<'img', ImageProps>((props, ref) => {
15
- const { className, ...rest } = omitThemingProps(props)
15
+ const { className, title, ...rest } = omitThemingProps(props)
16
16
  const styles = useStyleConfig('Image', props)
17
17
 
18
- return <ImageBase alt="VUI image" className={cs('vui-image', className)} ref={ref} {...styles} {...rest} />
18
+ return (
19
+ <ImageBase
20
+ alt={title ? title : 'VUI image'}
21
+ className={cs('vui-image', className)}
22
+ ref={ref}
23
+ title={title}
24
+ {...styles}
25
+ {...rest}
26
+ />
27
+ )
19
28
  })
20
29
 
21
30
  export default Image