@salutejs/plasma-new-hope 0.78.0-dev.0 → 0.79.0-canary.1195.9053577477.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (75) hide show
  1. package/cjs/components/Button/Button.styles.js +1 -0
  2. package/cjs/components/Button/Button.styles.js.map +1 -1
  3. package/cjs/components/Drawer/Drawer.js +1 -0
  4. package/cjs/components/Drawer/Drawer.js.map +1 -1
  5. package/cjs/components/IconButton/IconButton.css +24 -0
  6. package/cjs/components/IconButton/IconButton.js +50 -0
  7. package/cjs/components/IconButton/IconButton.js.map +1 -0
  8. package/cjs/components/IconButton/IconButton.styles.js +16 -0
  9. package/cjs/components/IconButton/IconButton.styles.js.map +1 -0
  10. package/cjs/components/IconButton/IconButton.styles_1hknr37.css +1 -0
  11. package/cjs/components/IconButton/IconButton.tokens.js +32 -0
  12. package/cjs/components/IconButton/IconButton.tokens.js.map +1 -0
  13. package/cjs/index.css +2 -0
  14. package/cjs/index.js +5 -0
  15. package/cjs/index.js.map +1 -1
  16. package/es/components/Button/Button.styles.js +1 -0
  17. package/es/components/Button/Button.styles.js.map +1 -1
  18. package/es/components/Drawer/Drawer.js +1 -0
  19. package/es/components/Drawer/Drawer.js.map +1 -1
  20. package/es/components/IconButton/IconButton.css +24 -0
  21. package/es/components/IconButton/IconButton.js +45 -0
  22. package/es/components/IconButton/IconButton.js.map +1 -0
  23. package/es/components/IconButton/IconButton.styles.js +12 -0
  24. package/es/components/IconButton/IconButton.styles.js.map +1 -0
  25. package/es/components/IconButton/IconButton.styles_1hknr37.css +1 -0
  26. package/es/components/IconButton/IconButton.tokens.js +28 -0
  27. package/es/components/IconButton/IconButton.tokens.js.map +1 -0
  28. package/es/index.css +2 -0
  29. package/es/index.js +2 -0
  30. package/es/index.js.map +1 -1
  31. package/package.json +2 -2
  32. package/styled-components/cjs/components/Button/Button.styles.js +10 -2
  33. package/styled-components/cjs/components/IconButton/IconButton.js +47 -0
  34. package/styled-components/cjs/components/IconButton/IconButton.styles.js +13 -0
  35. package/styled-components/cjs/components/IconButton/IconButton.tokens.js +31 -0
  36. package/styled-components/cjs/components/IconButton/index.js +25 -0
  37. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +45 -0
  38. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js +11 -0
  39. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +71 -0
  40. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +45 -0
  41. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.js +11 -0
  42. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +71 -0
  43. package/styled-components/cjs/index.js +11 -0
  44. package/styled-components/es/components/Button/Button.styles.js +10 -2
  45. package/styled-components/es/components/IconButton/IconButton.js +41 -0
  46. package/styled-components/es/components/IconButton/IconButton.styles.js +8 -0
  47. package/styled-components/es/components/IconButton/IconButton.tokens.js +25 -0
  48. package/styled-components/es/components/IconButton/index.js +2 -0
  49. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +39 -0
  50. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.js +5 -0
  51. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +71 -0
  52. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js +39 -0
  53. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js +5 -0
  54. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +71 -0
  55. package/styled-components/es/index.js +1 -0
  56. package/types/components/Button/Button.styles.d.ts +1 -0
  57. package/types/components/Button/Button.styles.d.ts.map +1 -1
  58. package/types/components/IconButton/IconButton.d.ts +35 -0
  59. package/types/components/IconButton/IconButton.d.ts.map +1 -0
  60. package/types/components/IconButton/IconButton.styles.d.ts +3 -0
  61. package/types/components/IconButton/IconButton.styles.d.ts.map +1 -0
  62. package/types/components/IconButton/IconButton.tokens.d.ts +26 -0
  63. package/types/components/IconButton/IconButton.tokens.d.ts.map +1 -0
  64. package/types/components/IconButton/index.d.ts +3 -0
  65. package/types/components/IconButton/index.d.ts.map +1 -0
  66. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts +38 -0
  67. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map +1 -0
  68. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +32 -0
  69. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -0
  70. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts +38 -0
  71. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map +1 -0
  72. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +32 -0
  73. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -0
  74. package/types/index.d.ts +1 -0
  75. package/types/index.d.ts.map +1 -1
@@ -0,0 +1,28 @@
1
+ var tokens = {
2
+ iconButtonColor: '--plasma-icon-button-color',
3
+ iconButtonBackgroundColor: '--plasma-icon-button-background-color',
4
+ iconButtonColorHover: '--plasma-icon-button-color-hover',
5
+ iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
6
+ iconButtonColorActive: '--plasma-icon-button-color-active',
7
+ iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
8
+ iconButtonScaleHover: '--plasma-icon-button-scale-hover',
9
+ iconButtonScaleActive: '---plasma-icon-button-scale-active',
10
+ iconButtonHeight: '--plasma-icon-button-height',
11
+ iconButtonWidth: '--plasma-icon-button-width',
12
+ iconButtonPadding: '--plasma-icon-button-padding',
13
+ iconButtonRadius: '--plasma-icon-button-radius',
14
+ iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
15
+ iconButtonFontFamily: '--plasma-icon-button-font-family',
16
+ iconButtonFontSize: '--plasma-icon-button-font-size',
17
+ iconButtonFontStyle: '--plasma-icon-button-font-style',
18
+ iconButtonFontWeight: '--plasma-icon-button-font-weight',
19
+ iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
20
+ iconButtonLineHeight: '--plasma-icon-button-line-height',
21
+ iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
22
+ iconButtonFocusColor: '--plasma-icon-button-focus-color',
23
+ iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
24
+ iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
25
+ };
26
+
27
+ export { tokens };
28
+ //# sourceMappingURL=IconButton.tokens.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconButton.tokens.js","sources":["../../../src/components/IconButton/IconButton.tokens.ts"],"sourcesContent":["export const tokens = {\n iconButtonColor: '--plasma-icon-button-color',\n iconButtonBackgroundColor: '--plasma-icon-button-background-color',\n iconButtonColorHover: '--plasma-icon-button-color-hover',\n iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',\n iconButtonColorActive: '--plasma-icon-button-color-active',\n iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',\n\n iconButtonScaleHover: '--plasma-icon-button-scale-hover',\n iconButtonScaleActive: '---plasma-icon-button-scale-active',\n iconButtonHeight: '--plasma-icon-button-height',\n iconButtonWidth: '--plasma-icon-button-width',\n iconButtonPadding: '--plasma-icon-button-padding',\n iconButtonRadius: '--plasma-icon-button-radius',\n iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',\n\n iconButtonFontFamily: '--plasma-icon-button-font-family',\n iconButtonFontSize: '--plasma-icon-button-font-size',\n iconButtonFontStyle: '--plasma-icon-button-font-style',\n iconButtonFontWeight: '--plasma-icon-button-font-weight',\n iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',\n iconButtonLineHeight: '--plasma-icon-button-line-height',\n\n iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',\n iconButtonFocusColor: '--plasma-icon-button-focus-color',\n\n iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',\n iconButtonSpinnerSize: '--plasma-icon-button-spinner-size',\n};\n"],"names":["tokens","iconButtonColor","iconButtonBackgroundColor","iconButtonColorHover","iconButtonBackgroundColorHover","iconButtonColorActive","iconButtonBackgroundColorActive","iconButtonScaleHover","iconButtonScaleActive","iconButtonHeight","iconButtonWidth","iconButtonPadding","iconButtonRadius","iconButtonRadiusCircle","iconButtonFontFamily","iconButtonFontSize","iconButtonFontStyle","iconButtonFontWeight","iconButtonLetterSpacing","iconButtonLineHeight","iconButtonDisabledOpacity","iconButtonFocusColor","iconButtonSpinnerColor","iconButtonSpinnerSize"],"mappings":"AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,eAAe,EAAE,4BAA4B;AAC7CC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,8BAA8B,EAAE,6CAA6C;AAC7EC,EAAAA,qBAAqB,EAAE,mCAAmC;AAC1DC,EAAAA,+BAA+B,EAAE,8CAA8C;AAE/EC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,qBAAqB,EAAE,oCAAoC;AAC3DC,EAAAA,gBAAgB,EAAE,6BAA6B;AAC/CC,EAAAA,eAAe,EAAE,4BAA4B;AAC7CC,EAAAA,iBAAiB,EAAE,8BAA8B;AACjDC,EAAAA,gBAAgB,EAAE,6BAA6B;AAC/CC,EAAAA,sBAAsB,EAAE,oCAAoC;AAE5DC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,uBAAuB,EAAE,qCAAqC;AAC9DC,EAAAA,oBAAoB,EAAE,kCAAkC;AAExDC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,oBAAoB,EAAE,kCAAkC;AAExDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,qBAAqB,EAAE,mCAAA;AAC3B;;;;"}
package/es/index.css CHANGED
@@ -14,6 +14,8 @@
14
14
  .Button_styles_uqvh6u_l4dfhbg__b7cda4d5{position:absolute;}
15
15
  .Button_styles_uqvh6u_srdlazt__b7cda4d5{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
16
16
 
17
+ .IconButton_styles_1hknr37_b1ua728l__f14249fc{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}a.IconButton_styles_1hknr37_b1ua728l__f14249fc{-webkit-text-decoration:none;text-decoration:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonSquare__f14249fc{width:var(--plasma-button-height);padding:0;}.IconButton_styles_1hknr37_b1ua728l__f14249fc:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:focus{outline:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_focusVisible__f14249fc:focus::before,.IconButton_styles_1hknr37_b1ua728l__f14249fc[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:hover,.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFixed__f14249fc{width:var(--plasma-button-width);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFilled__f14249fc{width:100%;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingAuto__f14249fc{width:auto;}
18
+
17
19
  .base_6k3uip_b7jdqtc__e6616a37.base_6k3uip_buttonGroupOverrideStyles__e6616a37 .base_6k3uip_buttonItem__e6616a37{--plasma-button-color:var(--plasma-button-group-item-color);--plasma-button-background-color:var(--plasma-button-group-item-background-color);--plasma-button-color-hover:var(--plasma-button-group-item-color-hover);--plasma-button-background-color-hover:var(--plasma-button-group-item-background-color-hover);--plasma-button-color-active:var(--plasma-button-group-item-color-active);--plasma-button-background-color-active:var(--plasma-button-group-item-background-color-active);}
18
20
 
19
21
  .base_xxxewc_bc0nfse__e70323a1.base_xxxewc_buttonGroupOverrideStyles__e70323a1 .base_xxxewc_buttonItem__e70323a1{--plasma-button-height:var(--plasma-button-group-item-height);--plasma-button-padding:var(--plasma-button-group-item-padding);---plasma-button-scale-active:var(--plasma-button-group-item-scale-active);--plasma-button-scale-hover:var(--plasma-button-group-item-scale-hover);--plasma-button-font-family:var(--plasma-button-group-item-font-family);--plasma-button-font-size:var(--plasma-button-group-item-font-size);--plasma-button-font-style:var(--plasma-button-group-item-font-style);--plasma-button-font-weight:var(--plasma-button-group-item-font-weight);--plasma-button-letter-spacing:var(--plasma-button-group-item-letter-spacing);--plasma-button-line-height:var(--plasma-button-group-item-line-height);}
package/es/index.js CHANGED
@@ -16,6 +16,8 @@ export { useDidMountEffect } from './hooks/useDidMountEffect.js';
16
16
  export { composableStyle, cx } from './utils/index.js';
17
17
  export { buttonConfig, buttonRoot } from './components/Button/Button.js';
18
18
  export { classes as buttonClasses, tokens as buttonTokens } from './components/Button/Button.tokens.js';
19
+ export { iconButtonConfig, iconButtonRoot } from './components/IconButton/IconButton.js';
20
+ export { tokens as iconButtonTokens } from './components/IconButton/IconButton.tokens.js';
19
21
  export { buttonGroupConfig, buttonGroupRoot } from './components/ButtonGroup/ButtonGroup.js';
20
22
  export { classes as buttonGroupClasses, tokens as buttonGroupTokens } from './components/ButtonGroup/ButtonGroup.tokens.js';
21
23
  export { chipConfig, chipRoot } from './components/Chip/Chip.js';
package/es/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.78.0-dev.0",
3
+ "version": "0.79.0-canary.1195.9053577477.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -102,5 +102,5 @@
102
102
  "react-popper": "2.3.0",
103
103
  "storeon": "3.1.5"
104
104
  },
105
- "gitHead": "68f84c256b9cac1c45817d0d74e5745b5bd0c82e"
105
+ "gitHead": "0eaf3c7ba7715444159a726fc234c8352c410bf7"
106
106
  }
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.base = exports.StyledSpinner = exports.Loader = exports.LoadWrap = exports.ButtonText = void 0;
7
+ exports.baseContent = exports.base = exports.StyledSpinner = exports.Loader = exports.LoadWrap = exports.ButtonText = void 0;
8
8
  var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
9
9
  var _mixins = /*#__PURE__*/require("../../mixins");
10
10
  var _engines = /*#__PURE__*/require("../../engines");
@@ -38,4 +38,12 @@ var Loader = exports.Loader = /*#__PURE__*/_styledComponents["default"].div.with
38
38
  })(["position:absolute;"]);
39
39
  var StyledSpinner = exports.StyledSpinner = /*#__PURE__*/(0, _styledComponents["default"])(Spinner).withConfig({
40
40
  componentId: "plasma-new-hope__sc-9d9bqj-3"
41
- })(["", ":var(", ");", ":var(", ");"], _Spinner.spinnerTokens.size, _Button.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Button.tokens.buttonSpinnerColor);
41
+ })(["", ":var(", ");", ":var(", ");"], _Spinner.spinnerTokens.size, _Button.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Button.tokens.buttonSpinnerColor);
42
+
43
+ // INFO: Для возможности переиспользования стилей в других компонентах
44
+ var baseContent = exports.baseContent = /*#__PURE__*/"\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.".concat(String(_Button.classes.buttonSquare), " {\n width: var(").concat(_Button.tokens.buttonHeight, ");\n padding: 0;\n }\n\n color: var(").concat(_Button.tokens.buttonColor, ");\n background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n\n :hover {\n color: var(").concat(_Button.tokens.buttonColorHover, ", var(").concat(_Button.tokens.buttonColor, "));\n background-color: var(").concat(_Button.tokens.buttonBackgroundColorHover, ", var(").concat(_Button.tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(_Button.tokens.buttonScaleHover, ");\n }\n\n :active {\n color: var(").concat(_Button.tokens.buttonColorActive, ", var(").concat(_Button.tokens.buttonColor, "));\n background-color: var(").concat(_Button.tokens.buttonBackgroundColorActive, ", var(").concat(_Button.tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(_Button.tokens.buttonScaleActive, ");\n }\n\n height: var(").concat(_Button.tokens.buttonHeight, ");\n width: var(").concat(_Button.tokens.buttonWidth, ");\n\n /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n padding: 0 var(").concat(_Button.tokens.buttonPadding, ", calc(var(").concat(_Button.tokens.buttonHeight, ") * 1.618 / 4));\n\n font-family: var(").concat(_Button.tokens.buttonFontFamily, ");\n font-size: var(").concat(_Button.tokens.buttonFontSize, ");\n font-style: var(").concat(_Button.tokens.buttonFontStyle, ");\n font-weight: var(").concat(_Button.tokens.buttonFontWeight, ");\n letter-spacing: var(").concat(_Button.tokens.buttonLetterSpacing, ");\n line-height: var(").concat(_Button.tokens.buttonLineHeight, ");\n\n /* TODO: #710 make it token API ? */\n --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n :focus {\n outline: none;\n }\n\n ").concat((0, _mixins.addFocus)({
45
+ outlineOffset: '-0.125rem',
46
+ outlineSize: 'var(--plasma_private-btn-outline-size)',
47
+ outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
48
+ outlineColor: "var(".concat(_Button.tokens.buttonFocusColor, ")")
49
+ }), "\n\n &[disabled] {\n opacity: var(").concat(_Button.tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(_Button.tokens.buttonColor, ");\n background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(_Button.classes.fixedStretching, " {\n width: var(").concat(_Button.tokens.buttonWidth, ");\n }\n &.").concat(_Button.classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(_Button.classes.autoStretching, " {\n width: auto;\n }\n");
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.iconButtonRoot = exports.iconButtonConfig = void 0;
7
+ var _Button = /*#__PURE__*/require("../Button");
8
+ var _base = /*#__PURE__*/require("../Button/variations/_view/base");
9
+ var _base2 = /*#__PURE__*/require("../Button/variations/_size/base");
10
+ var _base3 = /*#__PURE__*/require("../Button/variations/_disabled/base");
11
+ var _base4 = /*#__PURE__*/require("../Button/variations/_focused/base");
12
+ var _base5 = /*#__PURE__*/require("../Button/variations/_blurred/base");
13
+ var _base6 = /*#__PURE__*/require("../Button/variations/_stretching/base");
14
+ var _IconButton = /*#__PURE__*/require("./IconButton.styles");
15
+ var iconButtonRoot = exports.iconButtonRoot = _Button.buttonRoot;
16
+ var iconButtonConfig = exports.iconButtonConfig = {
17
+ name: 'IconButton',
18
+ tag: 'button',
19
+ layout: iconButtonRoot,
20
+ base: _IconButton.base,
21
+ variations: {
22
+ view: {
23
+ css: _base.base
24
+ },
25
+ size: {
26
+ css: _base2.base
27
+ },
28
+ disabled: {
29
+ css: _base3.base,
30
+ attrs: true
31
+ },
32
+ focused: {
33
+ css: _base4.base
34
+ },
35
+ blurred: {
36
+ css: _base5.base
37
+ },
38
+ stretching: {
39
+ css: _base6.base
40
+ }
41
+ },
42
+ defaults: {
43
+ view: 'secondary',
44
+ size: 'm',
45
+ stretching: 'fixed'
46
+ }
47
+ };
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.mappingOverride = exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _Button = /*#__PURE__*/require("../Button");
9
+ var _Button2 = /*#__PURE__*/require("../Button/Button.styles");
10
+ var _IconButton = /*#__PURE__*/require("./IconButton.tokens");
11
+ // Переопределние токенов из Button
12
+ var mappingOverride = exports.mappingOverride = /*#__PURE__*/"\n ".concat(_Button.buttonTokens.buttonPadding, ": 0;\n\n ").concat(_Button.buttonTokens.buttonColor, ": var(").concat(_IconButton.tokens.iconButtonColor, ");\n ").concat(_Button.buttonTokens.buttonBackgroundColor, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColor, ");\n\n ").concat(_Button.buttonTokens.buttonColorHover, ": var(").concat(_IconButton.tokens.iconButtonColorHover, ");\n ").concat(_Button.buttonTokens.buttonBackgroundColorHover, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColorHover, ");\n\n ").concat(_Button.buttonTokens.buttonColorActive, ": var(").concat(_IconButton.tokens.iconButtonColorActive, ");\n ").concat(_Button.buttonTokens.buttonBackgroundColorActive, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColorActive, ");\n\n\n ").concat(_Button.buttonTokens.buttonFontFamily, ": var(").concat(_IconButton.tokens.iconButtonFontFamily, ");\n ").concat(_Button.buttonTokens.buttonFontSize, ": var(").concat(_IconButton.tokens.iconButtonFontSize, ");\n ").concat(_Button.buttonTokens.buttonFontStyle, ": var(").concat(_IconButton.tokens.iconButtonFontStyle, ");\n ").concat(_Button.buttonTokens.buttonFontWeight, ":var(").concat(_IconButton.tokens.iconButtonFontWeight, ");\n ").concat(_Button.buttonTokens.buttonLetterSpacing, ": var(").concat(_IconButton.tokens.iconButtonLetterSpacing, ");\n ").concat(_Button.buttonTokens.buttonLineHeight, ": var(").concat(_IconButton.tokens.iconButtonLineHeight, ");\n\n ").concat(_Button.buttonTokens.buttonWidth, ": var(").concat(_IconButton.tokens.iconButtonWidth, ");\n ").concat(_Button.buttonTokens.buttonHeight, ": var(").concat(_IconButton.tokens.iconButtonHeight, ");\n ").concat(_Button.buttonTokens.buttonRadius, ": var(").concat(_IconButton.tokens.iconButtonRadius, ");\n\n ").concat(_Button.buttonTokens.buttonDisabledOpacity, ": var(").concat(_IconButton.tokens.iconButtonDisabledOpacity, ");\n ").concat(_Button.buttonTokens.buttonFocusColor, ": var(").concat(_IconButton.tokens.iconButtonFocusColor, ");\n\n ").concat(_Button.buttonTokens.buttonSpinnerSize, ": var(").concat(_IconButton.tokens.iconButtonSpinnerSize, ");\n ").concat(_Button.buttonTokens.buttonSpinnerColor, ": var(").concat(_IconButton.tokens.iconButtonSpinnerColor, ");\n");
13
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";"], _Button2.baseContent, mappingOverride);
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.tokens = void 0;
7
+ var tokens = exports.tokens = {
8
+ iconButtonColor: '--plasma-icon-button-color',
9
+ iconButtonBackgroundColor: '--plasma-icon-button-background-color',
10
+ iconButtonColorHover: '--plasma-icon-button-color-hover',
11
+ iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
12
+ iconButtonColorActive: '--plasma-icon-button-color-active',
13
+ iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
14
+ iconButtonScaleHover: '--plasma-icon-button-scale-hover',
15
+ iconButtonScaleActive: '---plasma-icon-button-scale-active',
16
+ iconButtonHeight: '--plasma-icon-button-height',
17
+ iconButtonWidth: '--plasma-icon-button-width',
18
+ iconButtonPadding: '--plasma-icon-button-padding',
19
+ iconButtonRadius: '--plasma-icon-button-radius',
20
+ iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
21
+ iconButtonFontFamily: '--plasma-icon-button-font-family',
22
+ iconButtonFontSize: '--plasma-icon-button-font-size',
23
+ iconButtonFontStyle: '--plasma-icon-button-font-style',
24
+ iconButtonFontWeight: '--plasma-icon-button-font-weight',
25
+ iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
26
+ iconButtonLineHeight: '--plasma-icon-button-line-height',
27
+ iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
28
+ iconButtonFocusColor: '--plasma-icon-button-focus-color',
29
+ iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
30
+ iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
31
+ };
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "iconButtonConfig", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _IconButton.iconButtonConfig;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "iconButtonRoot", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _IconButton.iconButtonRoot;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "iconButtonTokens", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _IconButton2.tokens;
22
+ }
23
+ });
24
+ var _IconButton = /*#__PURE__*/require("./IconButton");
25
+ var _IconButton2 = /*#__PURE__*/require("./IconButton.tokens");
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.config = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
9
+ var config = exports.config = {
10
+ defaults: {
11
+ view: 'default',
12
+ focused: 'true',
13
+ size: 'm'
14
+ },
15
+ variations: {
16
+ view: {
17
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
18
+ accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
19
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
20
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
21
+ success: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
22
+ warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
23
+ critical: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
24
+ dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
25
+ black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
26
+ white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive)
27
+ },
28
+ size: {
29
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
30
+ lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
31
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":3rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
32
+ mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":3rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
33
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
34
+ sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
35
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
36
+ xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":2rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor)
37
+ },
38
+ disabled: {
39
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _IconButton.iconButtonTokens.iconButtonDisabledOpacity)
40
+ },
41
+ focused: {
42
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _IconButton.iconButtonTokens.iconButtonFocusColor)
43
+ }
44
+ }
45
+ };
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.IconButton = void 0;
7
+ var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
8
+ var _engines = /*#__PURE__*/require("../../../../engines");
9
+ var _IconButton2 = /*#__PURE__*/require("./IconButton.config");
10
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_IconButton.iconButtonConfig, _IconButton2.config);
11
+ var IconButton = exports.IconButton = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -0,0 +1,71 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import { disableProps } from '@salutejs/plasma-sb-utils';
4
+
5
+ import { iconButtonConfig } from '../../../../components/IconButton';
6
+ import { mergeConfig } from '../../../../engines';
7
+ import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
+ import { IconChevronLeft } from '../../../../components/_Icon';
9
+
10
+ import { config } from './IconButton.config';
11
+ import { IconButton } from './IconButton';
12
+
13
+ const meta: Meta<typeof IconButton> = {
14
+ title: 'plasma_b2c/IconButton',
15
+ decorators: [WithTheme],
16
+ component: IconButton,
17
+ argTypes: {
18
+ ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
19
+ pin: {
20
+ options: [
21
+ 'square-square',
22
+ 'square-clear',
23
+ 'clear-square',
24
+ 'clear-clear',
25
+ 'clear-circle',
26
+ 'circle-clear',
27
+ 'circle-circle',
28
+ '',
29
+ ],
30
+ control: {
31
+ type: 'select',
32
+ },
33
+ table: { defaultValue: { summary: 'bottom' } },
34
+ },
35
+ },
36
+ };
37
+
38
+ export default meta;
39
+
40
+ const getSizeForIcon = (size) => {
41
+ const map = {
42
+ mr: 's',
43
+ lr: 's',
44
+ m: 's',
45
+ l: 's',
46
+ sr: 's',
47
+ xsr: 'xs',
48
+ };
49
+ if (map[size]) {
50
+ return map[size];
51
+ }
52
+
53
+ return size;
54
+ };
55
+
56
+ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
57
+ args: {
58
+ children: <IconChevronLeft />,
59
+ view: 'default',
60
+ size: 'm',
61
+ disabled: false,
62
+ focused: true,
63
+ isLoading: false,
64
+ },
65
+ argTypes: { ...disableProps(['children']) },
66
+ render: (args) => (
67
+ <IconButton {...args}>
68
+ <IconChevronLeft size={getSizeForIcon(args.size)} />
69
+ </IconButton>
70
+ ),
71
+ };
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.config = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
9
+ var config = exports.config = {
10
+ defaults: {
11
+ view: 'default',
12
+ focused: 'true',
13
+ size: 'm'
14
+ },
15
+ variations: {
16
+ view: {
17
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
18
+ accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
19
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
20
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
21
+ success: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
22
+ warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
23
+ critical: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
24
+ dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
25
+ black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
26
+ white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive)
27
+ },
28
+ size: {
29
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
30
+ lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
31
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":3rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
32
+ mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":3rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
33
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
34
+ sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
35
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
36
+ xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":2rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor)
37
+ },
38
+ disabled: {
39
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _IconButton.iconButtonTokens.iconButtonDisabledOpacity)
40
+ },
41
+ focused: {
42
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _IconButton.iconButtonTokens.iconButtonFocusColor)
43
+ }
44
+ }
45
+ };
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.IconButton = void 0;
7
+ var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
8
+ var _engines = /*#__PURE__*/require("../../../../engines");
9
+ var _IconButton2 = /*#__PURE__*/require("./IconButton.config");
10
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_IconButton.iconButtonConfig, _IconButton2.config);
11
+ var IconButton = exports.IconButton = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -0,0 +1,71 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import { disableProps } from '@salutejs/plasma-sb-utils';
4
+
5
+ import { iconButtonConfig } from '../../../../components/IconButton';
6
+ import { mergeConfig } from '../../../../engines';
7
+ import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
+ import { IconChevronLeft } from '../../../../components/_Icon';
9
+
10
+ import { config } from './IconButton.config';
11
+ import { IconButton } from './IconButton';
12
+
13
+ const meta: Meta<typeof IconButton> = {
14
+ title: 'plasma_web/IconButton',
15
+ decorators: [WithTheme],
16
+ component: IconButton,
17
+ argTypes: {
18
+ ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
19
+ pin: {
20
+ options: [
21
+ 'square-square',
22
+ 'square-clear',
23
+ 'clear-square',
24
+ 'clear-clear',
25
+ 'clear-circle',
26
+ 'circle-clear',
27
+ 'circle-circle',
28
+ '',
29
+ ],
30
+ control: {
31
+ type: 'select',
32
+ },
33
+ table: { defaultValue: { summary: 'bottom' } },
34
+ },
35
+ },
36
+ };
37
+
38
+ export default meta;
39
+
40
+ const getSizeForIcon = (size) => {
41
+ const map = {
42
+ mr: 's',
43
+ lr: 's',
44
+ m: 's',
45
+ l: 's',
46
+ sr: 's',
47
+ xsr: 'xs',
48
+ };
49
+ if (map[size]) {
50
+ return map[size];
51
+ }
52
+
53
+ return size;
54
+ };
55
+
56
+ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
57
+ args: {
58
+ children: <IconChevronLeft />,
59
+ view: 'default',
60
+ size: 'm',
61
+ disabled: false,
62
+ focused: true,
63
+ isLoading: false,
64
+ },
65
+ argTypes: { ...disableProps(['children']) },
66
+ render: (args) => (
67
+ <IconButton {...args}>
68
+ <IconChevronLeft size={getSizeForIcon(args.size)} />
69
+ </IconButton>
70
+ ),
71
+ };
@@ -58,6 +58,17 @@ Object.keys(_Button).forEach(function (key) {
58
58
  }
59
59
  });
60
60
  });
61
+ var _IconButton = /*#__PURE__*/require("./components/IconButton");
62
+ Object.keys(_IconButton).forEach(function (key) {
63
+ if (key === "default" || key === "__esModule") return;
64
+ if (key in exports && exports[key] === _IconButton[key]) return;
65
+ Object.defineProperty(exports, key, {
66
+ enumerable: true,
67
+ get: function get() {
68
+ return _IconButton[key];
69
+ }
70
+ });
71
+ });
61
72
  var _ButtonGroup = /*#__PURE__*/require("./components/ButtonGroup");
62
73
  Object.keys(_ButtonGroup).forEach(function (key) {
63
74
  if (key === "default" || key === "__esModule") return;
@@ -2,7 +2,7 @@ var _templateObject;
2
2
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
3
  import { css } from 'styled-components';
4
4
  import styled from 'styled-components';
5
- import { applyEllipsis } from '../../mixins';
5
+ import { applyEllipsis, addFocus } from '../../mixins';
6
6
  import { component, mergeConfig } from '../../engines';
7
7
  import { spinnerConfig, spinnerTokens } from '../Spinner';
8
8
  import { classes, tokens } from './Button.tokens';
@@ -31,4 +31,12 @@ export var Loader = /*#__PURE__*/styled.div.withConfig({
31
31
  })(["position:absolute;"]);
32
32
  export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
33
33
  componentId: "plasma-new-hope__sc-9d9bqj-3"
34
- })(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
34
+ })(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
35
+
36
+ // INFO: Для возможности переиспользования стилей в других компонентах
37
+ export var baseContent = /*#__PURE__*/"\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.".concat(String(classes.buttonSquare), " {\n width: var(").concat(tokens.buttonHeight, ");\n padding: 0;\n }\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n\n :hover {\n color: var(").concat(tokens.buttonColorHover, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorHover, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleHover, ");\n }\n\n :active {\n color: var(").concat(tokens.buttonColorActive, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorActive, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleActive, ");\n }\n\n height: var(").concat(tokens.buttonHeight, ");\n width: var(").concat(tokens.buttonWidth, ");\n\n /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n padding: 0 var(").concat(tokens.buttonPadding, ", calc(var(").concat(tokens.buttonHeight, ") * 1.618 / 4));\n\n font-family: var(").concat(tokens.buttonFontFamily, ");\n font-size: var(").concat(tokens.buttonFontSize, ");\n font-style: var(").concat(tokens.buttonFontStyle, ");\n font-weight: var(").concat(tokens.buttonFontWeight, ");\n letter-spacing: var(").concat(tokens.buttonLetterSpacing, ");\n line-height: var(").concat(tokens.buttonLineHeight, ");\n\n /* TODO: #710 make it token API ? */\n --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n :focus {\n outline: none;\n }\n\n ").concat(addFocus({
38
+ outlineOffset: '-0.125rem',
39
+ outlineSize: 'var(--plasma_private-btn-outline-size)',
40
+ outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
41
+ outlineColor: "var(".concat(tokens.buttonFocusColor, ")")
42
+ }), "\n\n &[disabled] {\n opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(classes.fixedStretching, " {\n width: var(").concat(tokens.buttonWidth, ");\n }\n &.").concat(classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(classes.autoStretching, " {\n width: auto;\n }\n");