@via-profit/ui-kit 0.2.6 → 0.4.0

package/Badge/BadgeStyled.js

@@ -0,0 +1,125 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const BadgeBase_1 = __importDefault(require("./BadgeBase"));
+const parseColor = (color, fallback) => {
+    try {
+        return Color_1.default.fromString(color);
+    }
+    catch (err) {
+        console.error(`invalid color value «${color}»`);
+        return fallback;
+    }
+};
+const getStandardColors = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return { $color: theme.color.accentPrimaryContrast, $background: theme.color.accentPrimary };
+        case color === 'secondary':
+            return {
+                $color: theme.color.accentSecondaryContrast,
+                $background: theme.color.accentSecondary,
+            };
+        case typeof color === 'undefined':
+        case color === 'default':
+            return { $background: theme.color.surface.darken(10), $color: theme.color.textPrimary };
+        default: {
+            const $background = parseColor(String(color), theme.color.surface);
+            return {
+                $background,
+                $color: $background.getContrast(theme.color.textPrimary) > 5
+                    ? theme.color.textPrimary
+                    : theme.color.surface,
+            };
+        }
+    }
+};
+const getOutlinedColors = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return { $color: theme.color.accentPrimary, $background: theme.color.accentPrimary };
+        case color === 'secondary':
+            return { $color: theme.color.accentSecondary, $background: theme.color.accentSecondary };
+        case typeof color === 'undefined':
+        case color === 'default':
+            return {
+                $color: Color_1.default.fromString(theme.color.textPrimary.toString()),
+                $background: theme.color.textPrimary.lighten(100),
+            };
+        default: {
+            const c = parseColor(String(color), theme.color.textPrimary);
+            return { $color: c, $background: c };
+        }
+    }
+};
+/**
+ * Both variants are one styled component: switching the variant (e.g. a toggling filter badge)
+ * must not remount the element, otherwise the focused badge loses the focus
+ */
+const StyledBadge = (0, styled_1.default)(BadgeBase_1.default) `
+  border-style: solid;
+  border-width: 0.14em;
+  border-color: ${({ $background }) => $background.toString()};
+
+  ${({ $variant, $color, $background, theme }) => $variant === 'outlined'
+    ? (0, react_2.css) `
+          color: ${$color.darken(30).toString()};
+          background-color: transparent;
+
+          &:focus-visible {
+            outline-style: solid;
+            outline-width: 0.14em;
+            outline-color: ${$background.rgbString()};
+          }
+        `
+    : (0, react_2.css) `
+          color: ${$color.toString()};
+          background-color: ${$background.toString()};
+
+          &:focus-visible {
+            outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
+        ? theme.color.textPrimary.toString()
+        : theme.color.accentPrimary.toString()};
+          }
+        `}
+
+  ${({ $clickable, $variant, $background }) => $clickable &&
+    (0, react_2.css) `
+      cursor: pointer;
+
+      &:hover {
+        ${$variant === 'outlined'
+        ? (0, react_2.css) `
+              background-color: ${$background.darken(20).alpha(0.1).toString()};
+            `
+        : (0, react_2.css) `
+              background-color: ${$background.darken(30).toString()};
+              border-color: ${$background.darken(30).toString()};
+            `}
+      }
+    `}
+`;
+const BadgeStyled = (props, ref) => {
+    const { children, color, variant = 'standard', onClick } = props, restProps = __rest(props, ["children", "color", "variant", "onClick"]);
+    const theme = (0, react_2.useTheme)();
+    const { $background, $color } = react_1.default.useMemo(() => variant === 'outlined' ? getOutlinedColors(color, theme) : getStandardColors(color, theme), [color, variant, theme]);
+    return (react_1.default.createElement(StyledBadge, Object.assign({ "$variant": variant, "$clickable": typeof onClick === 'function', "$color": $color, "$background": $background, color: color, variant: variant, onClick: onClick }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(BadgeStyled);

package/Badge/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BadgeStandardProps } from './BadgeStandard';
-import { BadgeOutlinedProps } from './BadgeOutlined';
+import type { BadgeStandardProps } from './BadgeStandard';
+import type { BadgeOutlinedProps } from './BadgeOutlined';
 export type BadgeProps = (BadgeStandardProps | BadgeOutlinedProps) & {
     /**
      * Badge style variant\

package/Badge/index.js

@@ -1,27 +1,10 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const BadgeStandard_1 = __importDefault(require("./BadgeStandard"));
-const BadgeOutlined_1 = __importDefault(require("./BadgeOutlined"));
-const Badge = (props, ref) => {
-    const { variant } = props, badgeProps = __rest(props, ["variant"]);
-    if (variant === 'outlined') {
-        return react_1.default.createElement(BadgeOutlined_1.default, Object.assign({}, badgeProps, { ref: ref }));
-    }
-    return react_1.default.createElement(BadgeStandard_1.default, Object.assign({}, badgeProps, { ref: ref }));
-};
+const BadgeStyled_1 = __importDefault(require("./BadgeStyled"));
+// One component for both variants, so changing the variant does not remount the badge
+const Badge = (props, ref) => (react_1.default.createElement(BadgeStyled_1.default, Object.assign({}, props, { ref: ref })));
 exports.default = react_1.default.forwardRef(Badge);

package/Button/ButtonBase.js

@@ -25,11 +25,15 @@ const ButtonBase = (props, ref) => {
         IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || ButtonIconWrapper_1.default,
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || ButtonContainer_1.default,
     }), [overrides]);
-    if (iconOnly &&
+    // Warn once when the combination appears, not on every render
+    const isIconOnlyWithIcons = Boolean(iconOnly) &&
         ((typeof startIcon !== 'undefined' && startIcon !== null) ||
-            (typeof endIcon !== 'undefined' && endIcon !== null))) {
-        console.warn('The «iconOnly» property should not be used simultaneously with «startIcon» and/or «endIcon»');
-    }
+            (typeof endIcon !== 'undefined' && endIcon !== null));
+    react_1.default.useEffect(() => {
+        if (isIconOnlyWithIcons) {
+            console.warn('The «iconOnly» property should not be used simultaneously with «startIcon» and/or «endIcon»');
+        }
+    }, [isIconOnlyWithIcons]);
     return (react_1.default.createElement(overridesMap.Container, Object.assign({ type: typeof type === 'undefined' ? 'button' : type }, nativeProps, { color: color, iconOnly: iconOnly, ref: ref }),
         typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
         react_1.default.createElement(overridesMap.TextWrapper, { iconOnly: iconOnly }, children),

package/Button/ButtonContainer.js

@@ -22,6 +22,8 @@ const StyledButton = styled_1.default.button `
   padding: 0.8em 1em;
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   font-size: 1em;
+  /* Buttons do not inherit the font by default */
+  font-family: inherit;
   border-width: 0;
   outline-style: solid;
   outline-color: transparent;

package/Button/ButtonIconWrapper.d.ts

@@ -9,6 +9,6 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     /**
      * Icon position
      */
-    readonly position: "start" | "end";
+    readonly position: "end" | "start";
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Button/ButtonOutlined.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonBaseProps } from './ButtonBase';
+import type { ButtonBaseProps } from './ButtonBase';
 export type ButtonOutlinedProps = ButtonBaseProps;
 declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonOutlined.js

@@ -1,87 +1,12 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Color_1 = __importDefault(require("../Color"));
-const ButtonBase_1 = __importDefault(require("./ButtonBase"));
-const StyledOutlinedButton = (0, styled_1.default)(ButtonBase_1.default) `
-  color: ${({ theme, disabled, $color }) => {
-    switch (true) {
-        case disabled:
-            return theme.color.textPrimary.alpha(0.4).toString();
-        default:
-            return $color.darken(30).toString();
-    }
-}};
-  border-color: ${({ theme, disabled, $color }) => {
-    switch (true) {
-        case disabled:
-            return theme.color.surface.darken(80).alpha(0.4).toString();
-        default:
-            return $color.toString();
-    }
-}};
-  background-color: transparent;
-  border-style: solid;
-  border-width: 0.14em;
-  ${({ disabled, $color, theme }) => !disabled &&
-    (0, react_2.css) `
-      &:hover {
-        background-color: ${$color.darken(20).alpha(0.1).toString()};
-      }
-      &:active {
-        background-color: ${$color.darken(50).alpha(0.3).toString()};
-      }
-      &:focus-visible {
-        outline-color: ${$color.rgbString() === theme.color.accentPrimary.rgbString()
-        ? theme.color.textPrimary.toString()
-        : theme.color.accentPrimary.toString()};
-      }
-    `};
-`;
-const ButtonOutlined = (props, ref) => {
-    const { children, disabled, color } = props, restProps = __rest(props, ["children", "disabled", "color"]);
-    const theme = (0, react_2.useTheme)();
-    const $color = react_1.default.useMemo(() => {
-        switch (true) {
-            case color === 'primary':
-                return theme.color.accentPrimary;
-            case color === 'secondary':
-                return theme.color.accentSecondary;
-            case typeof color === 'undefined':
-            case color === 'default':
-                return theme.color.textPrimary;
-            case typeof color === 'string': {
-                let c = theme.color.textPrimary;
-                try {
-                    if (color) {
-                        c = Color_1.default.fromString(color);
-                    }
-                }
-                catch (err) {
-                    console.error(`invalid color value «${color}»`);
-                }
-                return c;
-            }
-            default:
-                return theme.color.textPrimary;
-        }
-    }, [color, theme.color]);
-    return (react_1.default.createElement(StyledOutlinedButton, Object.assign({ disabled: disabled, "$color": $color }, restProps, { ref: ref }), children));
-};
+const ButtonStyled_1 = __importDefault(require("./ButtonStyled"));
+/**
+ * The button with the `outlined` variant. Prefer `<Button variant="outlined">`
+ */
+const ButtonOutlined = (props, ref) => react_1.default.createElement(ButtonStyled_1.default, Object.assign({}, props, { variant: "outlined", ref: ref }));
 exports.default = react_1.default.forwardRef(ButtonOutlined);

package/Button/ButtonPlain.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonBaseProps } from './ButtonBase';
+import type { ButtonBaseProps } from './ButtonBase';
 export type ButtonPlainProps = ButtonBaseProps;
 declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonPlain.js

@@ -1,92 +1,12 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Color_1 = __importDefault(require("../Color"));
-const ButtonBase_1 = __importDefault(require("./ButtonBase"));
-const StyledPlainButton = (0, styled_1.default)(ButtonBase_1.default) `
-  box-shadow: none;
-  color: ${({ $color, disabled }) => {
-    switch (true) {
-        case disabled:
-            return $color.alpha(0.4).toString();
-        default:
-            return $color.toString();
-    }
-}};
-  background: none;
-  ${({ disabled, theme, $color }) => !disabled &&
-    (0, react_2.css) `
-      &:hover {
-        color: ${$color.darken(30).toString()};
-        background-color: ${$color.alpha(0.1).toString()};
-      }
-      &:active {
-        color: ${$color.darken(80).toString()};
-        background-color: ${$color.alpha(0.3).toString()};
-      }
-      &:focus-visible {
-        outline-style: solid;
-        outline-width: 0.14em;
-        outline-color: ${$color.rgbString() === theme.color.accentPrimary.rgbString()
-        ? theme.color.textPrimary.toString()
-        : theme.color.accentPrimary.toString()};
-      }
-    `}
-`;
-const ButtonPlain = (props, ref) => {
-    const { children, disabled, color } = props, restProps = __rest(props, ["children", "disabled", "color"]);
-    const theme = (0, react_2.useTheme)();
-    const { $color } = react_1.default.useMemo(() => {
-        switch (true) {
-            case color === 'primary':
-                return {
-                    $color: theme.color.accentPrimary,
-                };
-            case color === 'secondary':
-                return {
-                    $color: theme.color.accentSecondary,
-                };
-            case typeof color === 'undefined':
-            case color === 'default':
-                return {
-                    $color: theme.color.textPrimary,
-                };
-            case typeof color === 'string': {
-                let $color = theme.color.textPrimary;
-                try {
-                    if (color) {
-                        $color = Color_1.default.fromString(color);
-                    }
-                }
-                catch (err) {
-                    console.error(`invalid color value «${color}»`);
-                }
-                return {
-                    $color,
-                };
-            }
-            default:
-                return {
-                    $color: theme.color.textPrimary,
-                };
-        }
-    }, [color, theme.color]);
-    return (react_1.default.createElement(StyledPlainButton, Object.assign({ "$color": $color, disabled: disabled }, restProps, { ref: ref }), children));
-};
+const ButtonStyled_1 = __importDefault(require("./ButtonStyled"));
+/**
+ * The button with the `plain` variant. Prefer `<Button variant="plain">`
+ */
+const ButtonPlain = (props, ref) => react_1.default.createElement(ButtonStyled_1.default, Object.assign({}, props, { variant: "plain", ref: ref }));
 exports.default = react_1.default.forwardRef(ButtonPlain);

package/Button/ButtonStandard.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonBaseProps } from './ButtonBase';
+import type { ButtonBaseProps } from './ButtonBase';
 export type ButtonStandardProps = ButtonBaseProps;
 declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonStandard.js

@@ -1,104 +1,12 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Color_1 = __importDefault(require("../Color"));
-const ButtonBase_1 = __importDefault(require("./ButtonBase"));
-const StyledStandardButton = (0, styled_1.default)(ButtonBase_1.default) `
-  color: ${({ $color, disabled }) => {
-    switch (true) {
-        case disabled:
-            return $color.alpha(0.4).toString();
-        default:
-            return $color.toString();
-    }
-}};
-  background-color: ${({ $background, disabled }) => {
-    switch (true) {
-        case disabled:
-            return $background.darken(40).toString();
-        default:
-            return $background.darken(10).toString();
-    }
-}};
-
-  ${({ disabled, $background, theme }) => !disabled &&
-    (0, react_2.css) `
-      &:hover {
-        background-color: ${$background.darken(30).toString()};
-      }
-      &:active {
-        background-color: ${$background.darken(80).toString()};
-      }
-      &:focus-visible {
-        outline-style: solid;
-        outline-width: 0.14em;
-        outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
-        ? theme.color.textPrimary.toString()
-        : theme.color.accentPrimary.toString()};
-      }
-    `}
-`;
-const ButtonStandard = (props, ref) => {
-    const { children, disabled, color } = props, restProps = __rest(props, ["children", "disabled", "color"]);
-    const theme = (0, react_2.useTheme)();
-    const { $background, $color } = react_1.default.useMemo(() => {
-        switch (true) {
-            case color === 'primary':
-                return {
-                    $color: theme.color.accentPrimaryContrast,
-                    $background: theme.color.accentPrimary,
-                };
-            case color === 'secondary':
-                return {
-                    $color: theme.color.accentSecondaryContrast,
-                    $background: theme.color.accentSecondary,
-                };
-            case typeof color === 'undefined':
-            case color === 'default':
-                return {
-                    $background: theme.color.surface,
-                    $color: theme.color.textPrimary,
-                };
-            case typeof color === 'string': {
-                let $background = theme.color.surface;
-                try {
-                    if (color) {
-                        $background = Color_1.default.fromString(color);
-                    }
-                }
-                catch (err) {
-                    console.error(`invalid color value «${color}»`);
-                }
-                return {
-                    $background,
-                    $color: ($background === null || $background === void 0 ? void 0 : $background.getContrast(theme.color.textPrimary.rgbString())) > 5
-                        ? theme.color.textPrimary
-                        : theme.color.surface,
-                };
-            }
-            default:
-                return {
-                    $background: theme.color.surface,
-                    $color: theme.color.textPrimary,
-                };
-        }
-    }, [color, theme.color]);
-    return (react_1.default.createElement(StyledStandardButton, Object.assign({ "$color": $color, "$background": $background, disabled: disabled }, restProps, { ref: ref }), children));
-};
+const ButtonStyled_1 = __importDefault(require("./ButtonStyled"));
+/**
+ * The button with the `standard` variant. Prefer `<Button variant="standard">`
+ */
+const ButtonStandard = (props, ref) => react_1.default.createElement(ButtonStyled_1.default, Object.assign({}, props, { variant: "standard", ref: ref }));
 exports.default = react_1.default.forwardRef(ButtonStandard);

package/Button/ButtonStyled.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ButtonBaseProps } from './ButtonBase';
+export type ButtonVariant = 'standard' | 'outlined' | 'plain';
+export type ButtonStyledProps = ButtonBaseProps & {
+    readonly variant?: ButtonVariant;
+};
+declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & {
+    readonly variant?: ButtonVariant | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;