@skbkontur/react-ui 0.0.0-5188be76c1 → 0.0.0-53ccdcbfcc

package/components/Clickable/Clickable.d.ts

@@ -0,0 +1,95 @@
+import React, { CSSProperties } from 'react';
+import { HTMLProps } from 'react-ui/typings/html';
+import { SizeProp } from '../../lib/types/props';
+import { PolymorphicForwardRefExoticComponent, PolymorphicPropsWithRef } from '../../typings/react-ref';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { ThemeIn } from '../../lib/theming/Theme';
+export declare const CLICKABLE_DEFAULT_ELEMENT = "button";
+interface ClickableOwnProps extends CommonProps, Partial<Pick<HTMLProps['a'], 'rel' | 'href'>>, Partial<Pick<HTMLProps['button'], 'type'>> {
+    /**
+     * Стиль контрола.
+     *
+     * Возможные значения: `"default"`, `"success"`, `"danger"`, `"grayed"`, `"primary"`, `"pay"`, `"text"`, `"backless"`.
+     */
+    use?: 'default' | 'success' | 'danger' | 'grayed' | 'primary' | 'pay' | 'text' | 'backless';
+    /**
+     * Определяет как будет выглядеть контрол, не влияет на семантику.
+     */
+    view?: 'button' | 'link' | 'custom';
+    /**
+     * Размер контрола.
+     *
+     * Возможные значения: `"small"`, `"medium"`, `"large"`.
+     */
+    size?: SizeProp;
+    /**
+     * Позвоялет перевести контрол в состояние загрузки.
+     */
+    isLoading?: boolean;
+    /**
+     * Позволяет отключить контрол.
+     */
+    isDisabled?: boolean;
+    /**
+     * Применяет к кнопке стили псеводкласса :active.
+     */
+    isActive?: boolean;
+    /**
+     * Позволяет задать иконку слева от контрола.
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Позволяет задать иконку справа от контрола.
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Объект, в который можно передать переменные темы.
+     * Он будет объединён с темой из контекста.
+     */
+    theme?: ThemeIn;
+    /**
+     * CSS-свойство `width`.
+     */
+    width?: CSSProperties['width'];
+    /**
+     * CSS-свойство `text-align`.
+     */
+    align?: CSSProperties['textAlign'];
+    /**
+     * Состояние валидации при предупреждении.
+     */
+    isWarning?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     */
+    isError?: boolean;
+    /**
+     * Превращает кнопку в кнопку со стрелкой.
+     */
+    arrow?: 'left' | 'right';
+    /**
+     * Сужает кнопку.
+     */
+    isNarrow?: boolean;
+    /**
+     * Убирает обводку у кнопки.
+     */
+    isBorderless?: boolean;
+    /**
+     * @ignore
+     *
+     * Меняет скругления при использованиии <Clickable> внутри <Group>.
+     */
+    corners?: CSSProperties;
+}
+export declare type ClickableProps<T extends React.ElementType = typeof CLICKABLE_DEFAULT_ELEMENT> = PolymorphicPropsWithRef<ClickableOwnProps, T>;
+export declare const ClickableDataTids: {
+    readonly root: "Clickable__root";
+    readonly spinner: "Clickable__spinner";
+};
+/**
+ * Это гибридный контрол, который позволяет создавать ссылки и кнопки с любым семантическим тегом.
+ */
+export declare const Clickable: PolymorphicForwardRefExoticComponent<ClickableOwnProps, typeof CLICKABLE_DEFAULT_ELEMENT>;
+export declare const isClickable: (child: React.ReactNode) => child is React.ReactElement<ClickableOwnProps, string | React.JSXElementConstructor<any>>;
+export {};

package/components/Clickable/Clickable.md

@@ -0,0 +1,210 @@
+По умолчанию `<Clickable>` рендерится в виде кнопки с тегом `<button>`.
+
+<br/>
+<br/>
+
+Это можно изменить при помощи пропов `as` и `view`:
+
+— `as ('button' | 'a')` — изменяет корневой тег, а также при отсутствии `view` задаёт внешний вид;
+
+— `view ('button' | 'link')` — изменяет внешний вид контрола.
+```jsx harmony
+import { Gapped, Clickable, clickableStyles } from '@skbkontur/react-ui';
+import { XIcon } from '@skbkontur/icons/icons/XIcon';
+
+const bgStyle = {
+  backgroundImage: `linear-gradient(to right, rgba(130, 130, 130, 0.5) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(130, 130, 130, 0.5) 1px, transparent 1px)`,
+  backgroundSize: `16px 16px`,
+  backgroundPosition: `-8px -8px`,
+  padding: 16
+};
+
+<>
+  <p>Ссылки</p>
+  <Gapped gap={15}>
+    <Clickable as="a" href="/">Default</Clickable>
+    <Clickable as="a" use="success" href="/">Success</Clickable>
+    <Clickable as="a" use="danger" href="/">Danger</Clickable>
+    <Clickable as="a" use="grayed" href="/">Grayed</Clickable>
+    <Clickable as="a" isError href="/">Error</Clickable>
+    <Clickable as="a" isDisabled href="/">Disabled</Clickable>
+  </Gapped>
+
+  <p>Кнопки</p>
+  <Gapped vertical>
+    <Gapped>
+      <Clickable use="default">Default</Clickable>
+      <Clickable use="primary">Primary</Clickable>
+      <Clickable use="success">Success</Clickable>
+      <Clickable use="danger">Danger</Clickable>
+      <Clickable use="pay">Pay</Clickable>
+      <Clickable use="text">Text</Clickable>
+      <Clickable use="backless">Backless</Clickable>
+      <Clickable isBorderless>Borderless</Clickable>
+      <Clickable isWarning>Warning</Clickable>
+      <Clickable isError>Error</Clickable>
+      <Clickable use="default" isDisabled>Disabled</Clickable>
+    </Gapped>
+    <Gapped style={bgStyle}>
+      <Clickable use="default">Default</Clickable>
+      <Clickable use="primary">Primary</Clickable>
+      <Clickable use="success">Success</Clickable>
+      <Clickable use="danger">Danger</Clickable>
+      <Clickable use="pay">Pay</Clickable>
+      <Clickable use="text">Text</Clickable>
+      <Clickable use="backless">Backless</Clickable>
+      <Clickable isBorderless>Borderless</Clickable>
+      <Clickable isWarning>Warning</Clickable>
+      <Clickable isError>Error</Clickable>
+      <Clickable use="default" isDisabled>Disabled</Clickable>
+    </Gapped>
+  </Gapped>
+
+  <p>Гибриды</p>
+  <Gapped>
+    <Clickable as="a" view="button" href="/" >Ссылка, но выглядит как кнопка</Clickable>
+    <Clickable as="button" view="link">Кнопка, но выглядит как ссылка</Clickable>
+    <Clickable
+      as="button"
+      view="custom"
+    >
+      <div
+        style={{
+          background: '#3498db',
+          color: 'white',
+          padding: '10px 7.5px',
+          borderRadius: '5px'
+        }}
+      >Кастомный элемент с тегом кнопки и базовыми возможностями Clickable</div>
+    </Clickable>
+  </Gapped>
+</>
+```
+
+Вы можете использовать любой тег в качестве основы для `<Clickable>` (с помощью `as`), но в таком случае вам придётся самостоятельно реализовывать доступность контрола. Поэтому мы рекомендуем использовать только `a` и `button`, если у вас нет весомой причины для использования другого тега.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable as="div" view="button">
+    Это div, но он выглядит как кнопка
+  </Clickable>
+  <Clickable as="div" view="link">
+    Это span, но он выглядит как ссылка
+  </Clickable>
+</Gapped>
+```
+
+В чём польза от кастомного вида (`view="custom"`) по сравнению с оборачиванием в нативную кнопку или ссылку?
+
+Мы уже сбросили все мещающие стили, сделали компонент доступным для пользователей с ограниченными возможностями, а также позаботились о таких приятных мелочах как: корректная обработка отключенного состояния, `data-tid` на корне и обработка `rel` на основе значения из `href`.
+```jsx harmony
+<Clickable
+  style={{
+    display: 'inline-block',
+    align: 'center',
+    background: '#151515',
+    color: 'white',
+    boxShadow: '-12px 12px 0 0 #ED6742',
+    padding: '20px 10px',
+    borderRadius: '15px',
+    margin: '30px',
+  }}
+  as="a"
+  href="https://kontur.ru/"
+  view="custom"
+  >
+  <div style={{ fontSize: '20px' }}>Контур</div>
+  <div style={{ fontSize: '25px', fontWeight: '500' }}>Экосистема для бизнеса</div>
+</Clickable>
+```
+
+У `<Clickable>` могут быть иконки сразу с обеих сторон, наличие/отсутствие иконок также влияет на отображение в состоянии загрузки.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
+
+const [isLoading, setIsLoading] = React.useState(false);
+
+<Gapped gap={20} vertical>
+  <Clickable use={isLoading ? 'danger' : 'success'} onClick={() => setIsLoading(!isLoading)}>
+    {isLoading ? 'Остановить загрузку!!!' : 'Начать загрузку!'}
+  </Clickable>
+
+  <Gapped gap={15}>
+    <Clickable isLoading={isLoading} as="a" href="/" leftIcon={<XIcon16Regular />}>
+      Иконка слева
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/" leftIcon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>
+      Иконка и там, и там
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/" rightIcon={<XIcon16Regular />}>
+      Иконка справа
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/">
+      Без иконки
+    </Clickable>
+  </Gapped>
+
+  <Gapped gap={15}>
+    <Clickable isLoading={isLoading} leftIcon={<XIcon16Regular />}>
+      Иконка слева
+    </Clickable>
+    <Clickable isLoading={isLoading} leftIcon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>
+      Иконка и там, и там
+    </Clickable>
+    <Clickable isLoading={isLoading} rightIcon={<XIcon16Regular />}>
+      Иконка справа
+    </Clickable>
+    <Clickable isLoading={isLoading}>
+      Без иконки
+    </Clickable>
+  </Gapped>
+</Gapped>
+```
+
+`<Clickable>` в виде кнопки может быть в одном из трёх размеров: `small`, `medium` или `large`.
+```jsx harmony
+<div style={{
+    display: "flex",
+    alignItems: "end",
+    justifyContent: "space-between",
+    width: "330px"
+  }}>
+  <Clickable size="small">Маленькая</Clickable>
+  <Clickable size="medium">Средняя</Clickable>
+  <Clickable size="large">Большая</Clickable>
+</div>
+```
+
+`Clickable` в виде кнопки может превращаться в кнопки-ссылки, размер стрелок меняется в зависимости от размера кнопки.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable arrow="left">Стрелка влево</Clickable>
+  <Clickable arrow="right">Стрелка вправо</Clickable>
+</Gapped>
+```
+
+Пример ссылок ведущих на внешние ресурсы.
+
+_Примечание_:
+
+Если в контрол `<Clickable>` передана ссылка, ведущая на внешний ресурс, то `<Clickable>` неявно добавит атрибут `rel` со значением необходимым для внешних ссылок, при этом не трогая атрибут `target`.
+
+Открытие ссылки в новой вкладке остаётся на усмотрение разработчика.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable as="a" href="https://kontur.ru/">
+    Откроется <span style={{ color: "#e3071c" }}>в этой</span> вкладке
+  </Clickable>
+  <Clickable as="a" target="_blank" href="https://kontur.ru/">
+    Откроется <span style={{ color: "#3f9726" }}>в новой</span> вкладке
+  </Clickable>
+</Gapped>
+```

package/components/Clickable/Clickable.styles/Clickable.styles.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject;
+
+import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+export var clickableGlobalClasses = prefix('clickable')({
+  text: 'text'
+});
+export var generalStyles = memoizeStyle({
+  root: function root(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      all: unset;\n      cursor: pointer;\n\n      &:focus-visible {\n        /*\n          The box-shadow property is not visible in Windows high-contrast themes\n          So we need to define transparent outline which will be visible in those themes\n\n          Source: https://stackoverflow.com/a/52616313\n        */\n        outline: 2px solid transparent;\n        box-shadow: 0px 0px 0px 2px ", ";\n      }\n    "])), t.borderColorFocus);
+  }
+});

package/components/Clickable/Clickable.styles/Clickable.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Clickable.styles.ts"],"names":["css","memoizeStyle","prefix","clickableGlobalClasses","text","generalStyles","root","t","borderColorFocus"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,EAA4BC,MAA5B,QAA0C,2BAA1C;;;;;;;;AAQA,OAAO,IAAMC,sBAAsB,GAAGD,MAAM,CAAC,WAAD,CAAN,CAAoB;AACxDE,EAAAA,IAAI,EAAE,MADkD,EAApB,CAA/B;;;AAIP,OAAO,IAAMC,aAAa,GAAGJ,YAAY,CAAC;AACxCK,EAAAA,IADwC,gBACnCC,CADmC,EACzB;AACb,WAAOP,GAAP;;;;;;;;;;;;AAYkCO,IAAAA,CAAC,CAACC,gBAZpC;;;AAeD,GAjBuC,EAAD,CAAlC","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\n\nimport { ClickableProps } from './Clickable';\n\nexport interface GetStylesBase extends Pick<ClickableProps, 'use'> {\n  theme: Theme;\n}\n\nexport const clickableGlobalClasses = prefix('clickable')({\n  text: 'text',\n});\n\nexport const generalStyles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      all: unset;\n      cursor: pointer;\n\n      &:focus-visible {\n        /*\n          The box-shadow property is not visible in Windows high-contrast themes\n          So we need to define transparent outline which will be visible in those themes\n\n          Source: https://stackoverflow.com/a/52616313\n        */\n        outline: 2px solid transparent;\n        box-shadow: 0px 0px 0px 2px ${t.borderColorFocus};\n      }\n    `;\n  },\n});\n"]}

package/components/Clickable/Clickable.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/Clickable.styles.js",
+  "module": "Clickable.styles",
+  "types": "../Clickable.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/Clickable.styles.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '../../lib/theming/Theme';
+import { ClickableProps } from './Clickable';
+export interface GetStylesBase extends Pick<ClickableProps, 'use'> {
+    theme: Theme;
+}
+export declare const clickableGlobalClasses: {
+    text: string;
+};
+export declare const generalStyles: {
+    root(t: Theme): string;
+};

package/components/Clickable/ClickableButton/ClickableButton.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ClickableButtonArrow } from "../ClickableButtonArrow";
+import { ClickableButtonCaption } from "../ClickableButtonCaption";
+import { ClickableButtonOutline } from "../ClickableButtonOutline";
+export var ClickableButton = function ClickableButton(_ref) {
+  var leftIcon = _ref.leftIcon,
+      rightIcon = _ref.rightIcon,
+      isDisabled = _ref.isDisabled,
+      isLoading = _ref.isLoading,
+      isFocused = _ref.isFocused,
+      size = _ref.size,
+      isWarning = _ref.isWarning,
+      isError = _ref.isError,
+      arrow = _ref.arrow,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClickableButtonOutline, {
+    isFocused: isFocused,
+    isDisabled: isDisabled,
+    isWarning: isWarning,
+    isError: isError
+  }), arrow && /*#__PURE__*/React.createElement(ClickableButtonArrow, {
+    arrow: arrow,
+    size: size
+  }), /*#__PURE__*/React.createElement(ClickableButtonCaption, {
+    leftIcon: leftIcon,
+    rightIcon: rightIcon,
+    isDisabled: isDisabled,
+    isLoading: isLoading,
+    size: size
+  }, children));
+};

package/components/Clickable/ClickableButton/ClickableButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButton.tsx"],"names":["React","ClickableButtonArrow","ClickableButtonCaption","ClickableButtonOutline","ClickableButton","leftIcon","rightIcon","isDisabled","isLoading","isFocused","size","isWarning","isError","arrow","children"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,oBAAT,QAAqC,wBAArC;AACA,SAASC,sBAAT,QAAuC,0BAAvC;AACA,SAASC,sBAAT,QAAuC,0BAAvC;;;;;;;;;;AAUA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;;;;;;;;;;;AAWH,KAV1BC,QAU0B,QAV1BA,QAU0B,CAT1BC,SAS0B,QAT1BA,SAS0B,CAR1BC,UAQ0B,QAR1BA,UAQ0B,CAP1BC,SAO0B,QAP1BA,SAO0B,CAN1BC,SAM0B,QAN1BA,SAM0B,CAL1BC,IAK0B,QAL1BA,IAK0B,CAJ1BC,SAI0B,QAJ1BA,SAI0B,CAH1BC,OAG0B,QAH1BA,OAG0B,CAF1BC,KAE0B,QAF1BA,KAE0B,CAD1BC,QAC0B,QAD1BA,QAC0B;AAC1B;AACE;AACE,wBAAC,sBAAD,IAAwB,SAAS,EAAEL,SAAnC,EAA8C,UAAU,EAAEF,UAA1D,EAAsE,SAAS,EAAEI,SAAjF,EAA4F,OAAO,EAAEC,OAArG,GADF;AAEGC,IAAAA,KAAK,iBAAI,oBAAC,oBAAD,IAAsB,KAAK,EAAEA,KAA7B,EAAoC,IAAI,EAAEH,IAA1C,GAFZ;AAGE,wBAAC,sBAAD;AACE,MAAA,QAAQ,EAAEL,QADZ;AAEE,MAAA,SAAS,EAAEC,SAFb;AAGE,MAAA,UAAU,EAAEC,UAHd;AAIE,MAAA,SAAS,EAAEC,SAJb;AAKE,MAAA,IAAI,EAAEE,IALR;;AAOGI,IAAAA,QAPH,CAHF,CADF;;;;AAeD,CA3BM","sourcesContent":["import React from 'react';\n\nimport { ClickableProps } from './Clickable';\nimport { ClickableButtonArrow } from './ClickableButtonArrow';\nimport { ClickableButtonCaption } from './ClickableButtonCaption';\nimport { ClickableButtonOutline } from './ClickableButtonOutline';\n\nexport interface ClickableButtonProps\n  extends Pick<\n    ClickableProps,\n    'leftIcon' | 'rightIcon' | 'isDisabled' | 'isLoading' | 'size' | 'arrow' | 'children' | 'isWarning' | 'isError'\n  > {\n  isFocused?: boolean;\n}\n\nexport const ClickableButton = ({\n  leftIcon,\n  rightIcon,\n  isDisabled,\n  isLoading,\n  isFocused,\n  size,\n  isWarning,\n  isError,\n  arrow,\n  children,\n}: ClickableButtonProps) => {\n  return (\n    <>\n      <ClickableButtonOutline isFocused={isFocused} isDisabled={isDisabled} isWarning={isWarning} isError={isError} />\n      {arrow && <ClickableButtonArrow arrow={arrow} size={size} />}\n      <ClickableButtonCaption\n        leftIcon={leftIcon}\n        rightIcon={rightIcon}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        size={size}\n      >\n        {children}\n      </ClickableButtonCaption>\n    </>\n  );\n};\n"]}

package/components/Clickable/ClickableButton/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButton.js",
+  "module": "ClickableButton",
+  "types": "../ClickableButton.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButton.d.ts

@@ -0,0 +1,5 @@
+import { ClickableProps } from './Clickable';
+export interface ClickableButtonProps extends Pick<ClickableProps, 'leftIcon' | 'rightIcon' | 'isDisabled' | 'isLoading' | 'size' | 'arrow' | 'children' | 'isWarning' | 'isError'> {
+    isFocused?: boolean;
+}
+export declare const ClickableButton: ({ leftIcon, rightIcon, isDisabled, isLoading, isFocused, size, isWarning, isError, arrow, children, }: ClickableButtonProps) => JSX.Element;

package/components/Clickable/ClickableButton.mixins/ClickableButton.mixins.js

@@ -0,0 +1,81 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import { shift } from "../../../lib/styles/DimensionFunctions";
+import { css } from "../../../lib/theming/Emotion";
+import { buttonGlobalClasses } from "../ClickableButton.styles";
+
+var getButtonPadding = function getButtonPadding(_ref) {
+  var fontSize = _ref.fontSize,
+      paddingY = _ref.paddingY,
+      paddingX = _ref.paddingX,
+      fontFamilyCompensation = _ref.fontFamilyCompensation,
+      _ref$additionalOffset = _ref.additionalOffset,
+      additionalOffset = _ref$additionalOffset === void 0 ? 0 : _ref$additionalOffset;
+  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' && offset) {
+    var _shiftUp = shiftUp(paddingTop, paddingBottom, offset);
+
+    paddingTop = _shiftUp[0];
+    paddingBottom = _shiftUp[1];
+  }
+
+  if (additionalOffset && offset) {
+    var _shiftUp2 = shiftUp(paddingTop, paddingBottom, additionalOffset);
+
+    paddingTop = _shiftUp2[0];
+    paddingBottom = _shiftUp2[1];
+  }
+
+  return paddingTop + " " + paddingX + " " + paddingBottom;
+};
+
+export var buttonUseMixin = function buttonUseMixin(_ref2) {
+  var btnBackground = _ref2.btnBackground,
+      btnBackgroundStart = _ref2.btnBackgroundStart,
+      btnBackgroundEnd = _ref2.btnBackgroundEnd,
+      color = _ref2.color,
+      borderColor = _ref2.borderColor,
+      borderBottomColor = _ref2.borderBottomColor,
+      borderWidth = _ref2.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    &[aria-disabled='false'],\n    :hover {\n      .", " svg,\n      .", " svg {\n        color: ", ";\n      }\n    }\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", color, borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "", buttonGlobalClasses.icon, buttonGlobalClasses.arrow, color);
+};
+export var buttonHoverMixin = function buttonHoverMixin(_ref3) {
+  var btnBackground = _ref3.btnBackground,
+      btnBackgroundStart = _ref3.btnBackgroundStart,
+      btnBackgroundEnd = _ref3.btnBackgroundEnd,
+      borderColor = _ref3.borderColor,
+      borderBottomColor = _ref3.borderBottomColor,
+      borderWidth = _ref3.borderWidth;
+  var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "");
+};
+export var buttonActiveMixin = function buttonActiveMixin(_ref4) {
+  var btnBackground = _ref4.btnBackground,
+      borderColor = _ref4.borderColor,
+      borderTopColor = _ref4.borderTopColor,
+      borderWidth = _ref4.borderWidth;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ", " !important; // override :hover styles\n      box-shadow: 0 0 0 ", " ", "", " !important; // override :hover styles\n    }\n  "])), btnBackground, borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "");
+};
+export var buttonSizeMixin = function buttonSizeMixin(_ref5) {
+  var fontSize = _ref5.fontSize,
+      lineHeight = _ref5.lineHeight,
+      paddingX = _ref5.paddingX,
+      paddingY = _ref5.paddingY,
+      fontFamilyCompensation = _ref5.fontFamilyCompensation;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", ";\n    line-height: ", ";\n  "])), fontSize, getButtonPadding({
+    fontSize: fontSize,
+    paddingY: paddingY,
+    paddingX: paddingX,
+    fontFamilyCompensation: fontFamilyCompensation
+  }), lineHeight);
+};

package/components/Clickable/ClickableButton.mixins/ClickableButton.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButton.mixins.ts"],"names":["shift","css","buttonGlobalClasses","getButtonPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","icon","arrow","buttonHoverMixin","buttonActiveMixin","borderTopColor","buttonSizeMixin","lineHeight"],"mappings":"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","sourcesContent":["import { shift } from '../../lib/styles/DimensionFunctions';\nimport { css } from '../../lib/theming/Emotion';\n\nimport { buttonGlobalClasses } from './ClickableButton.styles';\n\nconst getButtonPadding = ({\n  fontSize,\n  paddingY,\n  paddingX,\n  fontFamilyCompensation,\n  additionalOffset = 0,\n}: {\n  fontSize: string;\n  paddingY: string;\n  paddingX: string;\n  fontFamilyCompensation: string;\n  additionalOffset?: number;\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,\n  btnBackgroundStart,\n  btnBackgroundEnd,\n  color,\n  borderColor,\n  borderBottomColor,\n  borderWidth,\n}: {\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    &[aria-disabled='false'],\n    :hover {\n      .${buttonGlobalClasses.icon} svg,\n      .${buttonGlobalClasses.arrow} svg {\n        color: ${color};\n      }\n    }\n  `;\n};\n\nexport const buttonHoverMixin = ({\n  btnBackground,\n  btnBackgroundStart,\n  btnBackgroundEnd,\n  borderColor,\n  borderBottomColor,\n  borderWidth,\n}: {\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    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};\n\nexport const buttonActiveMixin = ({\n  btnBackground,\n  borderColor,\n  borderTopColor,\n  borderWidth,\n}: {\n  btnBackground: string;\n  borderColor: string;\n  borderTopColor?: string;\n  borderWidth: string;\n}) => {\n  return css`\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ${btnBackground} !important; // override :hover styles\n      box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``} !important; // override :hover styles\n    }\n  `;\n};\n\nexport const buttonSizeMixin = ({\n  fontSize,\n  lineHeight,\n  paddingX,\n  paddingY,\n  fontFamilyCompensation,\n}: {\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: ${getButtonPadding({ fontSize, paddingY, paddingX, fontFamilyCompensation })};\n    line-height: ${lineHeight};\n  `;\n};\n"]}

package/components/Clickable/ClickableButton.mixins/package.json

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

package/components/Clickable/ClickableButton.mixins.d.ts

@@ -0,0 +1,30 @@
+export declare const buttonUseMixin: ({ btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderBottomColor, borderWidth, }: {
+    btnBackground: string;
+    btnBackgroundStart?: string | undefined;
+    btnBackgroundEnd?: string | undefined;
+    color: string;
+    borderColor: string;
+    borderBottomColor?: string | undefined;
+    borderWidth: string;
+}) => string;
+export declare const buttonHoverMixin: ({ btnBackground, btnBackgroundStart, btnBackgroundEnd, borderColor, borderBottomColor, borderWidth, }: {
+    btnBackground: string;
+    btnBackgroundStart?: string | undefined;
+    btnBackgroundEnd?: string | undefined;
+    borderColor: string;
+    borderBottomColor?: string | undefined;
+    borderWidth: string;
+}) => string;
+export declare const buttonActiveMixin: ({ btnBackground, borderColor, borderTopColor, borderWidth, }: {
+    btnBackground: string;
+    borderColor: string;
+    borderTopColor?: string | undefined;
+    borderWidth: string;
+}) => string;
+export declare const buttonSizeMixin: ({ fontSize, lineHeight, paddingX, paddingY, fontFamilyCompensation, }: {
+    fontSize: string;
+    lineHeight: string;
+    paddingX: string;
+    paddingY: string;
+    fontFamilyCompensation: string;
+}) => string;