@via-profit/ui-kit 0.1.0-rc.17 → 0.1.0-rc.18

package/Button/ButtonBase.d.ts

@@ -24,6 +24,17 @@ export interface ButtonBaseProps extends Omit<ButtonNativeProps, 'color'> {
      * ```
      */
     readonly endIcon?: JSX.Element;
+    /**
+     * If true, then expect SVG icon as children. The button will be rendered as icon button
+     * Example:
+     * ```tsx
+     * <Button iconOnly>
+     *   <MyIconSVG />
+     * </Button>
+     * ```
+     `
+     */
+    readonly iconOnly?: ButtonContainerProps['iconOnly'];
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */

package/Button/ButtonBase.js

@@ -19,11 +19,11 @@ const ButtonIconWrapper_1 = __importDefault(require("./ButtonIconWrapper"));
 const ButtonTextWrapper_1 = __importDefault(require("./ButtonTextWrapper"));
 const ButtonContainer_1 = __importDefault(require("./ButtonContainer"));
 const ButtonBase = (props, ref) => {
-    const { children, startIcon, endIcon, color, overrides } = props, nativeProps = __rest(props, ["children", "startIcon", "endIcon", "color", "overrides"]);
+    const { children, startIcon, endIcon, color, overrides, iconOnly } = props, nativeProps = __rest(props, ["children", "startIcon", "endIcon", "color", "overrides", "iconOnly"]);
     const overridesMap = react_1.default.useMemo(() => (Object.assign({ TextWrapper: ButtonTextWrapper_1.default,
         IconWrapper: ButtonIconWrapper_1.default,
         Container: ButtonContainer_1.default }, overrides)), [overrides]);
-    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { ref: ref }),
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, 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, null, children),
         typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))));

package/Button/ButtonContainer.d.ts

@@ -4,11 +4,33 @@ export type ButtonContainerProps = React.ButtonHTMLAttributes<HTMLButtonElement>
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */
     readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * If true, then expect SVG icon as children. The button will be rendered as icon button
+     * Example:
+     * ```tsx
+     * <Button iconOnly>
+     *   <MyIconSVG />
+     * </Button>
+     * ```
+     `
+     */
+    readonly iconOnly?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */
     readonly color?: string | undefined;
+    /**
+     * If true, then expect SVG icon as children. The button will be rendered as icon button
+     * Example:
+     * ```tsx
+     * <Button iconOnly>
+     *   <MyIconSVG />
+     * </Button>
+     * ```
+     `
+     */
+    readonly iconOnly?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonContainer.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (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 StyledButton = styled_1.default.button `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   padding: 0.8em 1em;
@@ -39,6 +40,14 @@ const StyledButton = styled_1.default.button `
             return theme.color.textPrimary.toString();
     }
 }};
+  ${({ iconOnly, theme }) => iconOnly &&
+    (0, react_2.css) `
+      padding: 1em;
+      justify-content: center;
+      width: 2.6em;
+      height: 2.6em;
+      border-radius: ${theme.shape.radiusFactor * 3}em;
+    `}
 `;
 const ButtonContainer = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);

package/README.md

@@ -1,6 +1,6 @@
 ## Установка.
 
-для работы требуются следующие модули:
+Для работы требуются следующие модули:
 
 - react
 - react-dom
@@ -16,4 +16,4 @@ $ npm install @emotion/react @emotion/styled react react-dom react-modal react-p
 
 ```
 
-## Документация [здесь](./docs/introduction.md)
+## Документация [здесь](./docs/README.md)

package/package.json

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