@via-profit/ui-kit 0.1.0-rc.19 → 0.1.0-rc.20

package/Button/ButtonPlain.d.ts

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

package/Button/ButtonPlain.js

@@ -0,0 +1,102 @@
+"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-color: ${({ $background, disabled }) => {
+    switch (true) {
+        case disabled:
+            return $background.darken(10).toString();
+        default:
+            return $background.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-color: ${$background.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 { $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 = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $background,
+                    $color: $background.contrast(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(StyledPlainButton, Object.assign({ "$color": $color, "$background": $background, disabled: disabled }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonPlain);

package/Button/index.d.ts

@@ -1,22 +1,23 @@
 import React from 'react';
 import { ButtonStandardProps } from './ButtonStandard';
 import { ButtonOutlinedProps } from './ButtonOutlined';
-export type ButtonProps = (ButtonStandardProps | ButtonOutlinedProps) & {
+import { ButtonPlainProps } from './ButtonPlain';
+export type ButtonProps = (ButtonStandardProps | ButtonOutlinedProps | ButtonPlainProps) & {
     /**
      * Button style variant\
-     * Allowed variants: `standard` or `outlined`\
+     * Allowed variants: `standard` ,`outlined` or `plain`\
      * \
      * **Default**: `standard`
      */
-    readonly variant?: 'standard' | 'outlined';
+    readonly variant?: 'standard' | 'outlined' | 'plain';
 };
 declare const _default: React.ForwardRefExoticComponent<import("./ButtonBase").ButtonBaseProps & {
     /**
      * Button style variant\
-     * Allowed variants: `standard` or `outlined`\
+     * Allowed variants: `standard` ,`outlined` or `plain`\
      * \
      * **Default**: `standard`
      */
-    readonly variant?: "standard" | "outlined" | undefined;
+    readonly variant?: "standard" | "outlined" | "plain" | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/index.js

@@ -17,11 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const ButtonStandard_1 = __importDefault(require("./ButtonStandard"));
 const ButtonOutlined_1 = __importDefault(require("./ButtonOutlined"));
+const ButtonPlain_1 = __importDefault(require("./ButtonPlain"));
 const Button = (props, ref) => {
     const { variant } = props, buttonProps = __rest(props, ["variant"]);
     if (variant === 'outlined') {
         return react_1.default.createElement(ButtonOutlined_1.default, Object.assign({}, buttonProps, { ref: ref }));
     }
+    if (variant === 'plain') {
+        return react_1.default.createElement(ButtonPlain_1.default, Object.assign({}, buttonProps, { ref: ref }));
+    }
     return react_1.default.createElement(ButtonStandard_1.default, Object.assign({}, buttonProps, { ref: ref }));
 };
 exports.default = react_1.default.forwardRef(Button);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.19",
+  "version": "0.1.0-rc.20",
   "description": "UI Kit",
   "repository": {
     "type": "git",