@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-bb4cbfe9c6

package/components/Button/Button.d.ts

@@ -1,61 +1,119 @@
 import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
 export declare type ButtonSize = 'small' | 'medium' | 'large';
 export declare type ButtonType = 'button' | 'submit' | 'reset';
 export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';
-export interface ButtonProps {
+export interface ButtonProps extends CommonProps {
     /** @ignore */
     _noPadding?: boolean;
     /** @ignore */
     _noRightPadding?: boolean;
     /**
-     * Визуально нажатое состояние.
+     * Применяет к кнопке стили псевдокласса `:active`.
      */
     active?: boolean;
-    /** `type TextAlignProperty = "inherit" | "initial" | "unset" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start"` */
+    /**
+     * CSS-свойство `text-align`.
+     */
     align?: React.CSSProperties['textAlign'];
     /**
-     * Кнопка со стрелкой.
-     *
-     * `type ButtonArrow = boolean | "left"`
+     * Превращает обычную кнопку в кнопку со стрелкой.
      */
     arrow?: boolean | 'left';
+    /**
+     * Даёт кнопке фокус после окончания загрузки страницы.
+     */
     autoFocus?: boolean;
+    /**
+     * Убирает обводку у кнопки.
+     */
     borderless?: boolean;
+    /**
+     * @ignore
+     */
     checked?: boolean;
     children?: React.ReactNode;
     /** @ignore */
     corners?: number;
+    /**
+     * Отключенное состояние кнопки.
+     */
     disabled?: boolean;
     /** @ignore */
     disableFocus?: boolean;
+    /**
+     * Cостояние валидации при ошибке.
+     */
     error?: boolean;
-    focused?: boolean;
     /**
      * Иконка слева от текста кнопки.
      */
     icon?: React.ReactElement<any>;
+    /**
+     * Переводит кнопку в состояние загрузки.
+     */
     loading?: boolean;
+    /**
+     * Сужает кнопку.
+     */
     narrow?: boolean;
+    /**
+     * HTML-событие `onblur`.
+     */
     onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onclick`.
+     */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onfocus`.
+     */
     onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `keydown`.
+     */
     onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onmouseenter`.
+     */
     onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `mouseleave`.
+     */
     onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onmouseover`.
+     */
     onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
-    /** `type ButtonSize = "small" | "medium" | "large"` */
+    /**
+     * Задаёт размер кнопки.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
+     */
     size?: ButtonSize;
-    /** `type ButtonType = "button" | "submit" | "reset"` */
+    /**
+     * HTML-атрибут `type`.
+     */
     type?: ButtonType;
     /**
-     * Вариант использования. Влияет на цвет кнопки.
+     * HTML-атрибут `title`.
+     */
+    title?: string;
+    /**
+     * Стиль кнопки.
      *
-     * `type ButtonUse = "default" | "primary" | "success" | "danger" | "pay" | "link"`
+     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`.
      */
     use?: ButtonUse;
     /** @ignore */
     visuallyFocused?: boolean;
+    /**
+     * Cостояние валидации при предупреждении.
+     */
     warning?: boolean;
+    /**
+     * CSS-свойство `width`.
+     */
     width?: number | string;
 }
 export interface ButtonState {
@@ -69,16 +127,20 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
     static BOTTOM_RIGHT: number;
     static BOTTOM_LEFT: number;
     static defaultProps: {
-        use: string;
-        size: string;
-        type: string;
+        use: ButtonUse;
+        size: ButtonSize;
+        type: ButtonType;
     };
     state: {
         focusedByTab: boolean;
     };
     private theme;
     private node;
+    private setRootNode;
     componentDidMount(): void;
+    static getDerivedStateFromProps(props: ButtonProps): {
+        focusedByTab: boolean;
+    } | null;
     /**
      * @public
      */
@@ -89,9 +151,12 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
     blur(): void;
     render(): JSX.Element;
     private renderMain;
+    private getLoadingSpinner;
     private getSizeClassName;
+    private getSizeIconClassName;
+    private getSizeWrapClassName;
     private handleFocus;
     private handleBlur;
     private _ref;
 }
-export declare const isButton: (child: React.ReactChild) => child is React.ReactElement<ButtonProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const isButton: (child: React.ReactChild) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;

package/components/Button/Button.md

@@ -1,89 +1,104 @@
-Button example
-
-```jsx harmony
-import OkIcon from '@skbkontur/react-icons/Ok';
-import { Button } from '@skbkontur/react-ui';
-
-<Button icon={<OkIcon />}>Ok</Button>;
-```
-
-Button has different use styles
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button use="default">Default</Button>
-  <Button use="primary">Primary</Button>
-  <Button use="success">Success</Button>
-  <Button use="danger">Danger</Button>
-  <Button use="pay">Pay</Button>
-  <Button use="link">Link</Button>
-</Gapped>;
-```
-
-Button can have different sizes
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button size="small">Small</Button>
-  <Button size="medium">Medium</Button>
-  <Button size="large">Large</Button>
-</Gapped>;
-```
-
-Кнопки-стрелки
-
-```jsx harmony
-import { Gapped, Button } from '@skbkontur/react-ui';
-
-<Gapped gap={25}>
-  <Gapped gap={5}>
-    <Button arrow="left" size="medium">
-      Назад
-    </Button>
-    <Button arrow size="medium">
-      Далее
-    </Button>
-  </Gapped>
-  <Gapped gap={5}>
-    <Button arrow="left" size="large">
-      Назад
-    </Button>
-    <Button arrow size="large">
-      Далее
-    </Button>
-  </Gapped>
-</Gapped>;
-```
-
-Кнопка в сочетании со спиннером
-
-```jsx harmony
-import OkIcon from '@skbkontur/react-icons/Ok';
-import { Button, Spinner } from '@skbkontur/react-ui';
-
-const initialState = {
-  loading: false,
-  success: false,
-};
-
-const delay = (time = 0) => data => new Promise(resolve => setTimeout(resolve, time, data));
-
-const handleLoadingStart = () => {
-  delay(2000)()
-    .then(() => new Promise(resolve => setState({ loading: false, success: true }, resolve)))
-    .then(delay(1000))
-    .then(() => setState({ success: false }));
-};
-
-const handleClick = () => {
-  setState({ loading: true, success: false }, handleLoadingStart);
-};
-
-<Button width={150} onClick={handleClick} disabled={state.loading}>
-  {state.loading ? <Spinner type="mini" caption={null} /> : state.success ? <OkIcon /> : 'Сохранить'}
-</Button>;
-```
+Базовый пример кнопки.
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Button>Создать отчёт</Button>;
+```
+
+У кнопки есть различные стили.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Button use="default">Default</Button>
+  <Button use="primary">Primary</Button>
+  <Button use="success">Success</Button>
+  <Button use="danger">Danger</Button>
+  <Button use="pay">Pay</Button>
+  <Button use="link">Link</Button>
+</Gapped>;
+```
+
+Пример кнопки с иконкой.
+
+```jsx harmony
+import PrintIcon from '@skbkontur/react-icons/Print';
+import { Button } from '@skbkontur/react-ui';
+
+<Button icon={<PrintIcon />}>Напечатать</Button>;
+```
+
+У кнопки есть 3 стандартных размера.
+
+```jsx harmony
+<div
+  style={{
+    display: "flex",
+    alignItems: "end",
+    justifyContent: "space-between",
+    width: "330px"
+  }}>
+  <Button size="small">Маленькая</Button>
+  <Button size="medium">Средняя</Button>
+  <Button size="large">Большая</Button>
+</div>
+```
+
+Кнопки в виде стрелок.
+
+```jsx harmony
+import { Gapped, Button } from '@skbkontur/react-ui';
+
+<Gapped gap={25}>
+  <Gapped gap={5}>
+    <Button arrow="left" size="medium">
+      Назад
+    </Button>
+    <Button arrow size="medium">
+      Далее
+    </Button>
+  </Gapped>
+</Gapped>;
+```
+
+Кнопка в состоянии загрузки.
+
+**Поведение:**
+
+Кнопка на время нахождения в состоянии загрузки отключается.
+
+Если в кнопке есть иконка, на время загрузки иконка заменяется на спиннер, если иконки нет - весь контент кнопки заменяется на спиннер.
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+import BookmarkIcon from '@skbkontur/react-icons/Bookmark';
+
+const [loading, setLoading] = React.useState(false);
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const handleLoadingStart = () => {
+  delay(2000)()
+    .then(() => {
+      setLoading(false);
+    })
+};
+
+const handleClick = () => {
+  setLoading(true);
+  handleLoadingStart();
+};
+
+<Gapped>
+  <Button width={150} onClick={handleClick} loading={loading}>
+    Сохранить
+  </Button>
+  <Button icon={<BookmarkIcon />} width={150} onClick={handleClick} loading={loading}>
+    Сохранить
+  </Button>
+</Gapped>
+
+```

package/components/Button/Button.mixins/Button.mixins.js

@@ -1,88 +1,32 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n    ", "::before {\n      content: '';\n      display: block;\n      position: absolute;\n      top: ", ";\n      left: -207px;\n      right: -72px;\n      height: ", ";\n      background: ", ";\n      background-size: 41px 100%;\n      opacity: 0.2;\n      transform: translateX(50px) rotate(-44.3deg);\n      animation: ", " 1s linear infinite;\n    }\n\n    ", "::before {\n      top: ", ";\n      left: ", ";\n      animation-direction: reverse;\n      transform: translateX(42px) rotate(-44.3deg);\n      animation-delay: ", ";\n    }\n  "]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n    ", " {\n      top: ", ";\n      right: ", ";\n      height: ", ";\n      width: ", ";\n      transform: ", ";\n      overflow: hidden;\n    }\n\n    ", " {\n      left: ", ";\n      transform: rotate(232deg) skewX(25deg) skewY(8deg) !important;\n    }\n  "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n    font-size: ", " !important;\n\n    &:not(", ") {\n      height: ", ";\n      padding: ", ";\n      line-height: ", ";\n\n      &", " {\n        padding: ", ";\n      }\n    }\n  "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n    &:active,\n    &", " {\n      background: ", ";\n      box-shadow: ", ";\n\n      ", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      ", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n    }\n  "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n    &:hover {\n      background: ", ";\n      box-shadow: ", ";\n      border-color: ", ";\n\n      ", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      ", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n    }\n  "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n    background: ", ";\n    color: ", ";\n    box-shadow: ", ";\n    border: ", ";\n\n    &:not(", ") ", " {\n      background: ", ";\n      box-shadow: ", ";\n    }\n\n    &:not(", ") ", " {\n      background: ", ";\n      box-shadow: ", ";\n    }\n  "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css } from "..\\..\\..\\lib\\theming\\Emotion";
-import { shift } from "..\\..\\..\\lib\\styles\\DimensionFunctions";
+import { css } from "../../../lib/theming/Emotion";
+import { shift } from "../../../lib/styles/DimensionFunctions";
+import { globalClasses } from "../Button.styles";
 
-var getBtnPadding = function getBtnPadding(fontSize, paddingY, paddingX, additionalOffset) {
+var getBtnPadding = function getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, additionalOffset) {
   if (additionalOffset === void 0) {
     additionalOffset = 0;
   }
 
   var paddingTop = paddingY;
   var paddingBottom = paddingY;
+  var offset = parseInt(fontFamilyCompensation) || 0;
 
   var shiftUp = function shiftUp(top, bottom, offset) {
     return [shift(top, "" + -offset), shift(bottom, "" + offset)];
   };
 
-  if (fontSize === '16px') {
-    var _shiftUp = shiftUp(paddingTop, paddingBottom, 1);
+  if (fontSize === '16px' && offset) {
+    var _shiftUp = shiftUp(paddingTop, paddingBottom, offset);
 
     paddingTop = _shiftUp[0];
     paddingBottom = _shiftUp[1];
   }
 
-  if (additionalOffset) {
+  if (additionalOffset && offset) {
     var _shiftUp2 = shiftUp(paddingTop, paddingBottom, additionalOffset);
 
     paddingTop = _shiftUp2[0];
@@ -92,21 +36,23 @@ var getBtnPadding = function getBtnPadding(fontSize, paddingY, paddingX, additio
   return paddingTop + " " + paddingX + " " + paddingBottom;
 };
 
-export var buttonUseMixin = function buttonUseMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, arrowBackgroundStart, arrowBackgroundEnd, shadow, shadowArrow, shadowArrowLeft, color, border, selectorChecked, selectorArrow, selectorArrowLeft) {
-  return css(_templateObject(), btnBackgroundStart === btnBackgroundEnd && btnBackground ? btnBackground : "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")", color, shadow, border, selectorChecked, selectorArrow, arrowBackgroundStart === arrowBackgroundEnd ? arrowBackgroundStart : "linear-gradient(to bottom right, " + arrowBackgroundStart + ", " + arrowBackgroundEnd + ")", shadowArrow, selectorChecked, selectorArrowLeft, arrowBackgroundStart === arrowBackgroundEnd ? arrowBackgroundStart : "linear-gradient(to top left, " + arrowBackgroundStart + ", " + arrowBackgroundEnd + ")", shadowArrowLeft);
+export var buttonUseMixin = function buttonUseMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderBottomColor, borderWidth) {
+  var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 0 ", ";\n    }\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", color, borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "", globalClasses.arrowHelper, borderWidth, borderColor);
 };
-export var buttonHoverMixin = function buttonHoverMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, arrowBackgroundStart, arrowBackgroundEnd, btnShadow, arrowShadow, arrowLeftShadow, btnBorder, selectorArrow, selectorArrowLeft) {
-  return css(_templateObject2(), btnBackgroundStart === btnBackgroundEnd && btnBackground ? btnBackground : "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")", btnShadow, btnBorder, selectorArrow, arrowBackgroundStart === arrowBackgroundEnd ? arrowBackgroundStart : "linear-gradient(to bottom right, " + arrowBackgroundStart + ", " + arrowBackgroundEnd + ")", arrowShadow, selectorArrowLeft, arrowBackgroundStart === arrowBackgroundEnd ? arrowBackgroundStart : "linear-gradient(to top left, " + arrowBackgroundStart + ", " + arrowBackgroundEnd + ")", arrowLeftShadow);
+export var buttonHoverMixin = function buttonHoverMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, borderColor, borderBottomColor, borderWidth) {
+  var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    &:hover {\n      background-color: ", ";\n      background-image: ", ";\n      box-shadow: 0 0 0 ", " ", "", ";\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n      }\n    }\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "", globalClasses.arrowHelper, borderWidth, borderColor);
 };
-export var buttonActiveMixin = function buttonActiveMixin(btnBackground, arrowBackground, arrowLeftBackground, btnShadow, arrowShadow, arrowLeftShadow, selectorActive, selectorArrow, selectorArrowLeft) {
-  return css(_templateObject3(), selectorActive, btnBackground, btnShadow, selectorArrow, arrowBackground, arrowShadow, selectorArrowLeft, arrowLeftBackground, arrowLeftShadow);
+export var buttonActiveMixin = function buttonActiveMixin(btnBackground, btnShadow, borderColor, borderTopColor, borderWidth, arrowBgImage) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    background-image: none;\n    background-color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", ";\n    }\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n\n      &.", " {\n        background-image: ", ";\n      }\n    }\n  "])), btnBackground, borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "", globalClasses.innerShadow, btnShadow, globalClasses.arrowHelper, borderWidth, borderColor, globalClasses.arrowHelperTop, arrowBgImage);
 };
-export var buttonSizeMixin = function buttonSizeMixin(fontSize, height, heightShift, lineHeight, paddingX, paddingY, selectorLink, selectorFallback) {
-  return css(_templateObject4(), fontSize, selectorLink, shift(height, heightShift), getBtnPadding(fontSize, paddingY, paddingX), lineHeight, selectorFallback, getBtnPadding(fontSize, paddingY, paddingX, 1));
+export var buttonSizeMixin = function buttonSizeMixin(fontSize, lineHeight, paddingX, paddingY, fontFamilyCompensation) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", ";\n    line-height: ", ";\n  "])), fontSize, getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation), lineHeight);
 };
-export var buttonArrowMixin = function buttonArrowMixin(top, left, right, size, transform, selectorArrow, selectorArrowLeft) {
-  return css(_templateObject5(), selectorArrow, top, right, size, size, transform, selectorArrowLeft, left);
+export var buttonSizeMixinIE11 = function buttonSizeMixinIE11(fontSize, paddingX, paddingY, fontFamilyCompensation) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    padding: ", ";\n    line-height: normal;\n  "])), getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1));
 };
-export var buttonLoadingArrowMixin = function buttonLoadingArrowMixin(top, leftArrowTop, left, height, background, delay, btn_loading_arrow, selectorArrow, selectorArrowLeft) {
-  return css(_templateObject6(), selectorArrow, top, height, background, btn_loading_arrow, selectorArrowLeft, leftArrowTop, left, delay);
+export var arrowOutlineMixin = function arrowOutlineMixin(insetWidth, outlineColor, outlineWidth, insetColor) {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    .", " {\n      &.", " {\n        box-shadow: inset -", " ", " 0 0 ", ", ", " 0 0 0 ", " !important; // override :active styles\n      }\n\n      &.", " {\n        box-shadow: inset -", " -", " 0 0 ", ", ", " 0 0 0 ", " !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ", ";\n        right: ", ";\n        left: ", ";\n      }\n      &.", ":before {\n        bottom: ", ";\n      }\n    }\n  "])), globalClasses.arrowHelper, globalClasses.arrowHelperTop, insetWidth, insetWidth, insetColor, outlineWidth, outlineColor, globalClasses.arrowHelperBottom, insetWidth, insetWidth, insetColor, outlineWidth, outlineColor, insetWidth, insetWidth, insetWidth, globalClasses.arrowHelperBottom, insetWidth);
 };

package/components/Button/Button.mixins/Button.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.mixins.ts"],"names":["css","shift","getBtnPadding","fontSize","paddingY","paddingX","additionalOffset","paddingTop","paddingBottom","shiftUp","top","bottom","offset","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","arrowBackgroundStart","arrowBackgroundEnd","shadow","shadowArrow","shadowArrowLeft","color","border","selectorChecked","selectorArrow","selectorArrowLeft","buttonHoverMixin","btnShadow","arrowShadow","arrowLeftShadow","btnBorder","buttonActiveMixin","arrowBackground","arrowLeftBackground","selectorActive","buttonSizeMixin","height","heightShift","lineHeight","selectorLink","selectorFallback","buttonArrowMixin","left","right","size","transform","buttonLoadingArrowMixin","leftArrowTop","background","delay","btn_loading_arrow"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\r\nimport { shift } from '../../lib/styles/DimensionFunctions';\r\n\r\nconst getBtnPadding = (fontSize: string, paddingY: string, paddingX: string, additionalOffset = 0): string => {\r\n  let paddingTop = paddingY;\r\n  let paddingBottom = paddingY;\r\n\r\n  const shiftUp = (top: string, bottom: string, offset: number) => {\r\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\r\n  };\r\n\r\n  if (fontSize === '16px') {\r\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, 1);\r\n  }\r\n  if (additionalOffset) {\r\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\r\n  }\r\n\r\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\r\n};\r\n\r\nexport const buttonUseMixin = (\r\n  btnBackground: string,\r\n  btnBackgroundStart: string,\r\n  btnBackgroundEnd: string,\r\n  arrowBackgroundStart: string,\r\n  arrowBackgroundEnd: string,\r\n  shadow: string,\r\n  shadowArrow: string,\r\n  shadowArrowLeft: string,\r\n  color: string,\r\n  border: string,\r\n  selectorChecked: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    background: ${btnBackgroundStart === btnBackgroundEnd && btnBackground\r\n      ? btnBackground\r\n      : `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})`};\r\n    color: ${color};\r\n    box-shadow: ${shadow};\r\n    border: ${border};\r\n\r\n    &:not(${selectorChecked}) ${selectorArrow} {\r\n      background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n        ? arrowBackgroundStart\r\n        : `linear-gradient(to bottom right, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n      box-shadow: ${shadowArrow};\r\n    }\r\n\r\n    &:not(${selectorChecked}) ${selectorArrowLeft} {\r\n      background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n        ? arrowBackgroundStart\r\n        : `linear-gradient(to top left, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n      box-shadow: ${shadowArrowLeft};\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonHoverMixin = (\r\n  btnBackground: string,\r\n  btnBackgroundStart: string,\r\n  btnBackgroundEnd: string,\r\n  arrowBackgroundStart: string,\r\n  arrowBackgroundEnd: string,\r\n  btnShadow: string,\r\n  arrowShadow: string,\r\n  arrowLeftShadow: string,\r\n  btnBorder: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    &:hover {\r\n      background: ${btnBackgroundStart === btnBackgroundEnd && btnBackground\r\n        ? btnBackground\r\n        : `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})`};\r\n      box-shadow: ${btnShadow};\r\n      border-color: ${btnBorder};\r\n\r\n      ${selectorArrow} {\r\n        background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n          ? arrowBackgroundStart\r\n          : `linear-gradient(to bottom right, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n        box-shadow: ${arrowShadow};\r\n      }\r\n\r\n      ${selectorArrowLeft} {\r\n        background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n          ? arrowBackgroundStart\r\n          : `linear-gradient(to top left, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n        box-shadow: ${arrowLeftShadow};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonActiveMixin = (\r\n  btnBackground: string,\r\n  arrowBackground: string,\r\n  arrowLeftBackground: string,\r\n  btnShadow: string,\r\n  arrowShadow: string,\r\n  arrowLeftShadow: string,\r\n  selectorActive: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    &:active,\r\n    &${selectorActive} {\r\n      background: ${btnBackground};\r\n      box-shadow: ${btnShadow};\r\n\r\n      ${selectorArrow} {\r\n        background: ${arrowBackground};\r\n        box-shadow: ${arrowShadow};\r\n      }\r\n\r\n      ${selectorArrowLeft} {\r\n        background: ${arrowLeftBackground};\r\n        box-shadow: ${arrowLeftShadow};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonSizeMixin = (\r\n  fontSize: string,\r\n  height: string,\r\n  heightShift: string,\r\n  lineHeight: string,\r\n  paddingX: string,\r\n  paddingY: string,\r\n  selectorLink: string,\r\n  selectorFallback: string,\r\n) => {\r\n  return css`\r\n    font-size: ${fontSize} !important;\r\n\r\n    &:not(${selectorLink}) {\r\n      height: ${shift(height, heightShift)};\r\n      padding: ${getBtnPadding(fontSize, paddingY, paddingX)};\r\n      line-height: ${lineHeight};\r\n\r\n      &${selectorFallback} {\r\n        padding: ${getBtnPadding(fontSize, paddingY, paddingX, 1)};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonArrowMixin = (\r\n  top: string,\r\n  left: string,\r\n  right: string,\r\n  size: string,\r\n  transform: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    ${selectorArrow} {\r\n      top: ${top};\r\n      right: ${right};\r\n      height: ${size};\r\n      width: ${size};\r\n      transform: ${transform};\r\n      overflow: hidden;\r\n    }\r\n\r\n    ${selectorArrowLeft} {\r\n      left: ${left};\r\n      transform: rotate(232deg) skewX(25deg) skewY(8deg) !important;\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonLoadingArrowMixin = (\r\n  top: string,\r\n  leftArrowTop: string,\r\n  left: string,\r\n  height: string,\r\n  background: string,\r\n  delay: string,\r\n  btn_loading_arrow: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    ${selectorArrow}::before {\r\n      content: '';\r\n      display: block;\r\n      position: absolute;\r\n      top: ${top};\r\n      left: -207px;\r\n      right: -72px;\r\n      height: ${height};\r\n      background: ${background};\r\n      background-size: 41px 100%;\r\n      opacity: 0.2;\r\n      transform: translateX(50px) rotate(-44.3deg);\r\n      animation: ${btn_loading_arrow} 1s linear infinite;\r\n    }\r\n\r\n    ${selectorArrowLeft}::before {\r\n      top: ${leftArrowTop};\r\n      left: ${left};\r\n      animation-direction: reverse;\r\n      transform: translateX(42px) rotate(-44.3deg);\r\n      animation-delay: ${delay};\r\n    }\r\n  `;\r\n};\r\n"]}
+{"version":3,"sources":["Button.mixins.ts"],"names":["css","shift","globalClasses","getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","arrowHelper","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (\n  fontSize: string,\n  paddingY: string,\n  paddingX: string,\n  fontFamilyCompensation: string,\n  additionalOffset = 0,\n): string => {\n  let paddingTop = paddingY;\n  let paddingBottom = paddingY;\n  const offset = parseInt(fontFamilyCompensation) || 0;\n\n  const shiftUp = (top: string, bottom: string, offset: number) => {\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n  };\n\n  if (fontSize === '16px' && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n  }\n  if (additionalOffset && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n  }\n\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    color: ${color};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    &:hover {\n      background-color: ${hasGradient ? `initial` : btnBackground};\n      background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n      box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n      .${globalClasses.arrowHelper} {\n        box-shadow: ${borderWidth} 0 0 ${borderColor};\n      }\n    }\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: string,\n  borderTopColor: string,\n  borderWidth: string,\n  arrowBgImage: string,\n) => {\n  return css`\n    background-image: none;\n    background-color: ${btnBackground};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``};\n\n    .${globalClasses.innerShadow} {\n      box-shadow: ${btnShadow};\n    }\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n      &.${globalClasses.arrowHelperTop} {\n        background-image: ${arrowBgImage};\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  fontSize: string,\n  lineHeight: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = (\n  fontSize: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n    line-height: normal;\n  `;\n};\n\nexport const arrowOutlineMixin = (\n  insetWidth: string,\n  outlineColor: string,\n  outlineWidth: string,\n  insetColor: string,\n) => {\n  return css`\n    .${globalClasses.arrowHelper} {\n      &.${globalClasses.arrowHelperTop} {\n        box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      &.${globalClasses.arrowHelperBottom} {\n        box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ${insetWidth};\n        right: ${insetWidth};\n        left: ${insetWidth};\n      }\n      &.${globalClasses.arrowHelperBottom}:before {\n        bottom: ${insetWidth};\n      }\n    }\n  `;\n};\n"]}

package/components/Button/Button.mixins/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Button\\Button.mixins.js",
+  "main": "../../../cjs/components/Button/Button.mixins.js",
   "module": "Button.mixins",
-  "types": "..\\Button.mixins.d.ts",
+  "types": "../Button.mixins.d.ts",
   "sideEffects": false
 }

package/components/Button/Button.mixins.d.ts

@@ -1,6 +1,6 @@
-export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, arrowBackgroundStart: string, arrowBackgroundEnd: string, shadow: string, shadowArrow: string, shadowArrowLeft: string, color: string, border: string, selectorChecked: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, arrowBackgroundStart: string, arrowBackgroundEnd: string, btnShadow: string, arrowShadow: string, arrowLeftShadow: string, btnBorder: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonActiveMixin: (btnBackground: string, arrowBackground: string, arrowLeftBackground: string, btnShadow: string, arrowShadow: string, arrowLeftShadow: string, selectorActive: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonSizeMixin: (fontSize: string, height: string, heightShift: string, lineHeight: string, paddingX: string, paddingY: string, selectorLink: string, selectorFallback: string) => string;
-export declare const buttonArrowMixin: (top: string, left: string, right: string, size: string, transform: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonLoadingArrowMixin: (top: string, leftArrowTop: string, left: string, height: string, background: string, delay: string, btn_loading_arrow: string, selectorArrow: string, selectorArrowLeft: string) => string;
+export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderTopColor: string, borderWidth: string, arrowBgImage: string) => string;
+export declare const buttonSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const buttonSizeMixinIE11: (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const arrowOutlineMixin: (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string) => string;