@skbkontur/react-ui 0.0.0-a18e664e8f → 0.0.0-a2ba583fb2

package/components/Clickable/Clickable/Clickable.js

@@ -0,0 +1,165 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["size", "use", "type", "as", "arrow", "corners", "rel", "theme", "href", "isNarrow", "view", "leftIcon", "rightIcon", "onClick", "onFocus", "onBlur", "isLoading", "isDisabled", "isActive", "isBorderless", "width", "isWarning", "isError", "align", "style", "className", "children"];
+import React, { useCallback, useContext, useState } from 'react';
+import { globalObject } from '@skbkontur/global-object';
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { isReactUIComponent } from "../../../lib/utils";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { cx } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
+import { generalStyles } from "../Clickable.styles";
+import { getCurrentView, getRel } from "../utils";
+import { ClickableLink } from "../ClickableLink";
+import { ClickableButton } from "../ClickableButton";
+import { ClickableButtonWrapper } from "../ClickableButtonWrapper";
+import { getButtonSize, getButtonStyles } from "../ClickableButton.styles";
+import { getLinkStyles } from "../ClickableLink.styles";
+export var CLICKABLE_DEFAULT_ELEMENT = 'button';
+var COMPONENT_NAME = 'Clickable';
+export var ClickableDataTids = {
+  root: 'Clickable__root',
+  spinner: 'Clickable__spinner'
+};
+/**
+ * Это гибридный контрол, который позволяет создавать ссылки и кнопки с любым семантическим тегом.
+ */
+
+export var Clickable = forwardRefAndName(COMPONENT_NAME, function Clickable(_ref, ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      _ref$use = _ref.use,
+      use = _ref$use === void 0 ? 'default' : _ref$use,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      as = _ref.as,
+      arrow = _ref.arrow,
+      corners = _ref.corners,
+      rel = _ref.rel,
+      userTheme = _ref.theme,
+      href = _ref.href,
+      isNarrow = _ref.isNarrow,
+      view = _ref.view,
+      leftIcon = _ref.leftIcon,
+      rightIcon = _ref.rightIcon,
+      onClick = _ref.onClick,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      isLoading = _ref.isLoading,
+      isDisabled = _ref.isDisabled,
+      isActive = _ref.isActive,
+      isBorderless = _ref.isBorderless,
+      width = _ref.width,
+      isWarning = _ref.isWarning,
+      isError = _ref.isError,
+      align = _ref.align,
+      style = _ref.style,
+      className = _ref.className,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var Root = as != null ? as : CLICKABLE_DEFAULT_ELEMENT;
+  var contextTheme = useContext(ThemeContext);
+  var theme = userTheme ? ThemeFactory.create(userTheme, contextTheme) : contextTheme;
+  var buttonSize = getButtonSize({
+    size: size,
+    leftIcon: leftIcon,
+    rightIcon: rightIcon,
+    children: children,
+    theme: theme
+  });
+  var currentView = getCurrentView(view, as);
+  var isNotInteractive = !!isLoading || !!isDisabled;
+
+  var _useState = useState(false),
+      isFocused = _useState[0],
+      setIsFocused = _useState[1];
+
+  var isRootFocused = isFocused && !isNotInteractive;
+  var handleFocus = useCallback(function (e) {
+    if (!isNotInteractive) {
+      // focus event fires before keyDown eventlistener
+      // so we should check tabPressed in async way
+      globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
+        if (keyListener.isTabPressed) {
+          setIsFocused(true);
+        }
+      });
+    }
+
+    onFocus == null ? void 0 : onFocus(e);
+  }, [isNotInteractive]);
+  var handleBlur = useCallback(function (e) {
+    setIsFocused(false);
+
+    if (!isNotInteractive) {
+      onBlur == null ? void 0 : onBlur(e);
+    }
+  }, []);
+  var handleClick = useCallback(function (e) {
+    if (onClick && !isNotInteractive) {
+      onClick(e);
+    }
+  }, [onClick, isNotInteractive]);
+  var content = /*#__PURE__*/React.createElement(Root // the `key` prop needed so React can understand that we are working with the same content
+  // regardless of whether the wrapper presented or not
+  , _extends({
+    key: ClickableDataTids.root,
+    className: cx(generalStyles.root(theme), currentView === 'link' && getLinkStyles({
+      use: use,
+      isFocused: isFocused,
+      isNotInteractive: isNotInteractive,
+      theme: theme
+    }), currentView === 'button' && getButtonStyles({
+      use: use,
+      buttonSize: buttonSize,
+      theme: theme,
+      arrow: arrow,
+      size: size,
+      isNarrow: isNarrow,
+      isBorderless: isBorderless,
+      isFocused: isFocused,
+      isActive: isActive,
+      isNotInteractive: isNotInteractive
+    }), className),
+    type: Root === 'button' ? type : undefined,
+    rel: getRel(rel, href),
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onClick: handleClick,
+    style: _extends({
+      textAlign: align
+    }, corners, style),
+    "data-tid": ClickableDataTids.root,
+    "aria-disabled": isNotInteractive,
+    href: href,
+    ref: ref
+  }, rest), currentView === 'link' && /*#__PURE__*/React.createElement(ClickableLink, {
+    isLoading: isLoading,
+    isFocused: isRootFocused,
+    isError: isError,
+    leftIcon: leftIcon,
+    rightIcon: rightIcon
+  }, children), currentView === 'button' && /*#__PURE__*/React.createElement(ClickableButton, {
+    leftIcon: leftIcon,
+    rightIcon: rightIcon,
+    isDisabled: isDisabled,
+    isLoading: isLoading,
+    isFocused: isFocused,
+    isWarning: isWarning,
+    isError: isError,
+    arrow: arrow,
+    size: size
+  }, children));
+
+  if (currentView === 'button') {
+    return /*#__PURE__*/React.createElement(ClickableButtonWrapper, {
+      width: width,
+      size: size
+    }, content);
+  }
+
+  return content;
+});
+export var isClickable = isReactUIComponent(COMPONENT_NAME);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Clickable.tsx"],"names":["React","useCallback","useContext","useState","globalObject","ThemeFactory","ThemeContext","isReactUIComponent","forwardRefAndName","cx","keyListener","generalStyles","getCurrentView","getRel","ClickableLink","ClickableButton","ClickableButtonWrapper","getButtonSize","getButtonStyles","getLinkStyles","CLICKABLE_DEFAULT_ELEMENT","COMPONENT_NAME","ClickableDataTids","root","spinner","Clickable","ref","size","use","type","as","arrow","corners","rel","userTheme","theme","href","isNarrow","view","leftIcon","rightIcon","onClick","onFocus","onBlur","isLoading","isDisabled","isActive","isBorderless","width","isWarning","isError","align","style","className","children","rest","Root","contextTheme","create","buttonSize","currentView","isNotInteractive","isFocused","setIsFocused","isRootFocused","handleFocus","e","requestAnimationFrame","isTabPressed","handleBlur","handleClick","content","undefined","textAlign","isClickable"],"mappings":"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","sourcesContent":["import React, { CSSProperties, useCallback, useContext, useState } from 'react';\nimport { HTMLProps } from 'react-ui/typings/html';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { SizeProp } from '../../lib/types/props';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport {\n  PolymorphicForwardRefExoticComponent,\n  PolymorphicPropsWithoutRef,\n  PolymorphicPropsWithRef,\n} from '../../typings/react-ref';\nimport { isReactUIComponent } from '../../lib/utils';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { CommonProps } from '../../internal/CommonWrapper';\nimport { ThemeIn } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\n\nimport { generalStyles } from './Clickable.styles';\nimport { getCurrentView, getRel } from './utils';\nimport { ClickableLink } from './ClickableLink';\nimport { ClickableButton } from './ClickableButton';\nimport { ClickableButtonWrapper } from './ClickableButtonWrapper';\nimport { getButtonSize, getButtonStyles } from './ClickableButton.styles';\nimport { getLinkStyles } from './ClickableLink.styles';\n\nexport const CLICKABLE_DEFAULT_ELEMENT = 'button';\nconst COMPONENT_NAME = 'Clickable';\n\nexport type ClickableUse = 'default' | 'success' | 'danger' | 'grayed' | 'primary' | 'pay' | 'text' | 'backless';\nexport type ClickableSize = SizeProp;\ninterface ClickableOwnProps\n  extends CommonProps,\n    Partial<Pick<HTMLProps['a'], 'rel' | 'href'>>,\n    Partial<Pick<HTMLProps['button'], 'type'>> {\n  /**\n   * Стиль контрола.\n   *\n   * Возможные значения: `\"default\"`, `\"success\"`, `\"danger\"`, `\"grayed\"`, `\"primary\"`, `\"pay\"`, `\"text\"`, `\"backless\"`.\n   */\n  use?: ClickableUse;\n  /**\n   * Определяет как будет выглядеть контрол, не влияет на семантику.\n   */\n  view?: 'button' | 'link';\n  /**\n   * Размер контрола.\n   *\n   * Возможные значения: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: SizeProp;\n  /**\n   * Позвоялет перевести контрол в состояние загрузки.\n   */\n  isLoading?: boolean;\n  /**\n   * Позволяет отключить контрол.\n   */\n  isDisabled?: boolean;\n  /**\n   * Применяет к кнопке стили псеводкласса :active.\n   */\n  isActive?: boolean;\n  /**\n   * Позволяет задать иконку слева от контрола.\n   */\n  leftIcon?: React.ReactNode;\n  /**\n   * Позволяет задать иконку справа от контрола.\n   */\n  rightIcon?: React.ReactNode;\n  /**\n   * Объект, в который можно передать переменные темы.\n   * Он будет объединён с темой из контекста.\n   */\n  theme?: ThemeIn;\n  /**\n   * CSS-свойство `width`.\n   */\n  width?: CSSProperties['width'];\n  /**\n   * CSS-свойство `text-align`.\n   */\n  align?: CSSProperties['textAlign'];\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  isWarning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  isError?: boolean;\n  /**\n   * Превращает кнопку в кнопку со стрелкой.\n   */\n  arrow?: 'left' | 'right';\n  /**\n   * Сужает кнопку.\n   */\n  isNarrow?: boolean;\n  /**\n   * Убирает обводку у кнопки.\n   */\n  isBorderless?: boolean;\n  /**\n   * @ignore\n   *\n   * Меняет скругления при использованиии <Clickable> внутри <Group>.\n   */\n  corners?: CSSProperties;\n}\n\nexport type ClickableProps<T extends React.ElementType = typeof CLICKABLE_DEFAULT_ELEMENT> = PolymorphicPropsWithRef<\n  ClickableOwnProps,\n  T\n>;\n\nexport const ClickableDataTids = {\n  root: 'Clickable__root',\n  spinner: 'Clickable__spinner',\n} as const;\n\n/**\n * Это гибридный контрол, который позволяет создавать ссылки и кнопки с любым семантическим тегом.\n */\nexport const Clickable: PolymorphicForwardRefExoticComponent<ClickableOwnProps, typeof CLICKABLE_DEFAULT_ELEMENT> =\n  forwardRefAndName(COMPONENT_NAME, function Clickable<\n    T extends React.ElementType = typeof CLICKABLE_DEFAULT_ELEMENT,\n  >({ size = 'small', use = 'default', type = 'button', as, arrow, corners, rel, theme: userTheme, href, isNarrow, view, leftIcon, rightIcon, onClick, onFocus, onBlur, isLoading, isDisabled, isActive, isBorderless, width, isWarning, isError, align, style, className, children, ...rest }: PolymorphicPropsWithoutRef<ClickableOwnProps, T>, ref: React.ForwardedRef<Element>) {\n    const Root: React.ElementType = as ?? CLICKABLE_DEFAULT_ELEMENT;\n\n    const contextTheme = useContext(ThemeContext);\n    const theme = userTheme ? ThemeFactory.create(userTheme, contextTheme) : contextTheme;\n\n    const buttonSize = getButtonSize({ size, leftIcon, rightIcon, children, theme });\n    const currentView = getCurrentView(view, as);\n\n    const isNotInteractive = !!isLoading || !!isDisabled;\n\n    const [isFocused, setIsFocused] = useState(false);\n    const isRootFocused = isFocused && !isNotInteractive;\n    const handleFocus = useCallback(\n      (e: React.FocusEvent) => {\n        if (!isNotInteractive) {\n          // focus event fires before keyDown eventlistener\n          // so we should check tabPressed in async way\n          globalObject.requestAnimationFrame?.(() => {\n            if (keyListener.isTabPressed) {\n              setIsFocused(true);\n            }\n          });\n        }\n        onFocus?.(e);\n      },\n      [isNotInteractive],\n    );\n    const handleBlur = useCallback((e: React.FocusEvent) => {\n      setIsFocused(false);\n      if (!isNotInteractive) {\n        onBlur?.(e);\n      }\n    }, []);\n\n    const handleClick = useCallback(\n      (e: React.MouseEvent) => {\n        if (onClick && !isNotInteractive) {\n          onClick(e);\n        }\n      },\n      [onClick, isNotInteractive],\n    );\n\n    const content = (\n      <Root\n        // the `key` prop needed so React can understand that we are working with the same content\n        // regardless of whether the wrapper presented or not\n        key={ClickableDataTids.root}\n        className={cx(\n          generalStyles.root(theme),\n          currentView === 'link' && getLinkStyles({ use, isFocused, isNotInteractive, theme }),\n          currentView === 'button' &&\n            getButtonStyles({\n              use,\n              buttonSize,\n              theme,\n              arrow,\n              size,\n              isNarrow,\n              isBorderless,\n              isFocused,\n              isActive,\n              isNotInteractive,\n            }),\n          className,\n        )}\n        type={Root === 'button' ? type : undefined}\n        rel={getRel(rel, href)}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onClick={handleClick}\n        style={{ textAlign: align, ...corners, ...style }}\n        data-tid={ClickableDataTids.root}\n        aria-disabled={isNotInteractive}\n        href={href}\n        ref={ref}\n        {...rest}\n      >\n        {currentView === 'link' && (\n          <ClickableLink\n            isLoading={isLoading}\n            isFocused={isRootFocused}\n            isError={isError}\n            leftIcon={leftIcon}\n            rightIcon={rightIcon}\n          >\n            {children}\n          </ClickableLink>\n        )}\n        {currentView === 'button' && (\n          <ClickableButton\n            leftIcon={leftIcon}\n            rightIcon={rightIcon}\n            isDisabled={isDisabled}\n            isLoading={isLoading}\n            isFocused={isFocused}\n            isWarning={isWarning}\n            isError={isError}\n            arrow={arrow}\n            size={size}\n          >\n            {children}\n          </ClickableButton>\n        )}\n      </Root>\n    );\n\n    if (currentView === 'button') {\n      return (\n        <ClickableButtonWrapper width={width} size={size}>\n          {content}\n        </ClickableButtonWrapper>\n      );\n    }\n\n    return content;\n  });\n\nexport const isClickable = isReactUIComponent<ClickableOwnProps>(COMPONENT_NAME);\n"]}

package/components/Clickable/Clickable/package.json

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

package/components/Clickable/Clickable.d.ts

@@ -0,0 +1,97 @@
+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";
+export declare type ClickableUse = 'default' | 'success' | 'danger' | 'grayed' | 'primary' | 'pay' | 'text' | 'backless';
+export declare type ClickableSize = SizeProp;
+interface ClickableOwnProps extends CommonProps, Partial<Pick<HTMLProps['a'], 'rel' | 'href'>>, Partial<Pick<HTMLProps['button'], 'type'>> {
+    /**
+     * Стиль контрола.
+     *
+     * Возможные значения: `"default"`, `"success"`, `"danger"`, `"grayed"`, `"primary"`, `"pay"`, `"text"`, `"backless"`.
+     */
+    use?: ClickableUse;
+    /**
+     * Определяет как будет выглядеть контрол, не влияет на семантику.
+     */
+    view?: 'button' | 'link';
+    /**
+     * Размер контрола.
+     *
+     * Возможные значения: `"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,173 @@
+По умолчанию `<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>
+  </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>
+```
+
+У `<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;