@veracity/vui 2.0.1 → 2.0.3

package/dist/cjs/header/headerNotifications.js

@@ -22,7 +22,7 @@ const utils_1 = require("../utils");
 const context_1 = require("./context");
 const Badge = core_1.styled.spanBox `
   align-items: center;
-  background-color: red.70;
+  background-color: hsl(357, 83%, 60%);
   border-radius: round;
   color: white;
   display: flex;
@@ -41,7 +41,7 @@ exports.HeaderNotifications = (0, core_1.vui)((props, ref) => {
     const { children, className, count = 0, url } = props, rest = __rest(props, ["children", "className", "count", "url"]);
     const { links } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).notifications;
-    return (react_1.default.createElement(button_1.default, Object.assign({ as: "a", className: (0, utils_1.cs)('vui-headerNotifications', className), href: url !== null && url !== void 0 ? url : links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "text" }, styles.container, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(button_1.default, Object.assign({ as: "a", className: (0, utils_1.cs)('vui-headerNotifications', className), href: url !== null && url !== void 0 ? url : links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "tertiaryDark" }, styles.container, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(button_1.default.Icon, { name: "falBell" }),
         count > 0 && react_1.default.createElement(Badge, null, count < 100 ? count : '99+')))));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAiBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA+HV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA+HV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}

package/dist/cjs/input/input.js

@@ -61,8 +61,7 @@ exports.InputBase = core_1.styled.divBox `
   width: 100%;
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 `;
@@ -75,7 +74,7 @@ exports.Input = (0, core_1.vui)((props, ref) => {
     var _a, _b, _c, _d;
     const { autoComplete, autoFocus, children, className, colorScheme, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, isInvalid, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size, state = '', stateMapping, step, type = 'text', value, variant } = props, rest = __rest(props, ["autoComplete", "autoFocus", "children", "className", "colorScheme", "defaultValue", "disabled", "errorText", "iconLeft", "iconRight", "id", "input", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "helpText", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "size", "state", "stateMapping", "step", "type", "value", "variant"]);
     const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
-    const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue);
+    const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue || '');
     const states = Object.assign(Object.assign({}, consts_1.inputStateMapping), stateMapping);
     const computedColorScheme = (0, utils_1.filterUndefined)({
         colorScheme: (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : (isInvalid ? consts_1.redColor : undefined)) !== null && _a !== void 0 ? _a : (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme
@@ -95,7 +94,7 @@ exports.Input = (0, core_1.vui)((props, ref) => {
     });
     (0, react_1.useEffect)(() => {
         var _a;
-        setValueInternal(value);
+        setValueInternal(value !== null && value !== void 0 ? value : '');
         setCount(((_a = `${value}`) === null || _a === void 0 ? void 0 : _a.length) ? `${value}`.length : 0);
     }, [value]);
     return (react_1.default.createElement(context_1.InputProvider, { value: context },

package/dist/esm/header/headerNotifications.js

@@ -5,7 +5,7 @@ import { cs } from '../utils';
 import { useHeaderContext } from './context';
 const Badge = styled.spanBox `
   align-items: center;
-  background-color: red.70;
+  background-color: hsl(357, 83%, 60%);
   border-radius: round;
   color: white;
   display: flex;
@@ -23,7 +23,7 @@ export const HeaderNotifications = vui((props, ref) => {
     const { children, className, count = 0, url, ...rest } = props;
     const { links } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext()).notifications;
-    return (React.createElement(Button, { as: "a", className: cs('vui-headerNotifications', className), href: url ?? links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "text", ...styles.container, ...rest }, children ?? (React.createElement(React.Fragment, null,
+    return (React.createElement(Button, { as: "a", className: cs('vui-headerNotifications', className), href: url ?? links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "tertiaryDark", ...styles.container, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(Button.Icon, { name: "falBell" }),
         count > 0 && React.createElement(Badge, null, count < 100 ? count : '99+')))));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAiBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA+HV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA+HV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}

package/dist/esm/input/input.js

@@ -21,8 +21,7 @@ export const InputBase = styled.divBox `
   width: 100%;
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 `;
@@ -34,7 +33,7 @@ export const InputBase = styled.divBox `
 export const Input = vui((props, ref) => {
     const { autoComplete, autoFocus, children, className, colorScheme, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, isInvalid, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size, state = '', stateMapping, step, type = 'text', value, variant, ...rest } = props;
     const [count, setCount] = useState(getInitialCount(props));
-    const [valueInternal, setValueInternal] = useState(defaultValue);
+    const [valueInternal, setValueInternal] = useState(defaultValue || '');
     const states = { ...inputStateMapping, ...stateMapping };
     const computedColorScheme = filterUndefined({
         colorScheme: colorScheme ?? (isInvalid ? redColor : undefined) ?? states[state]?.colorScheme
@@ -53,7 +52,7 @@ export const Input = vui((props, ref) => {
         focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
     useEffect(() => {
-        setValueInternal(value);
+        setValueInternal(value ?? '');
         setCount(`${value}`?.length ? `${value}`.length : 0);
     }, [value]);
     return (React.createElement(InputProvider, { value: context },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "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/header/headerNotifications.tsx

@@ -8,7 +8,7 @@ import { HeaderNotificationsProps } from './header.types'
 
 const Badge = styled.spanBox`
   align-items: center;
-  background-color: red.70;
+  background-color: hsl(357, 83%, 60%);
   border-radius: round;
   color: white;
   display: flex;
@@ -39,7 +39,7 @@ export const HeaderNotifications = vui<'a', HeaderNotificationsProps>((props, re
       px="7px"
       ref={ref}
       title="Notifications"
-      variant="text"
+      variant="tertiaryDark"
       {...styles.container}
       {...rest}
     >

package/src/input/input.tsx

@@ -24,8 +24,7 @@ export const InputBase = styled.divBox`
   width: 100%;
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 `
@@ -78,7 +77,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
   } = props
 
   const [count, setCount] = useState(getInitialCount(props))
-  const [valueInternal, setValueInternal] = useState(defaultValue)
+  const [valueInternal, setValueInternal] = useState(defaultValue || '')
   const states = { ...inputStateMapping, ...stateMapping }
   const computedColorScheme = filterUndefined({
     colorScheme: colorScheme ?? (isInvalid ? redColor : undefined) ?? states[state]?.colorScheme
@@ -105,7 +104,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
   })
 
   useEffect(() => {
-    setValueInternal(value)
+    setValueInternal(value ?? '')
     setCount(`${value}`?.length ? `${value}`.length : 0)
   }, [value])