@salutejs/plasma-new-hope 0.78.0-canary.1195.8913931601.0 → 0.78.0-canary.1195.8924860991.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Button/Button.styles.js +1 -0
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Drawer/Drawer.js +1 -0
- package/cjs/components/Drawer/Drawer.js.map +1 -1
- package/cjs/components/IconButton/IconButton.css +11 -12
- package/cjs/components/IconButton/IconButton.js +18 -52
- package/cjs/components/IconButton/IconButton.js.map +1 -1
- package/cjs/components/IconButton/IconButton.styles.js +6 -15
- package/cjs/components/IconButton/IconButton.styles.js.map +1 -1
- package/cjs/components/IconButton/IconButton.styles_1hknr37.css +1 -0
- package/cjs/components/IconButton/IconButton.tokens.js +0 -4
- package/cjs/components/IconButton/IconButton.tokens.js.map +1 -1
- package/cjs/index.css +1 -2
- package/cjs/index.js +0 -1
- package/cjs/index.js.map +1 -1
- package/es/components/Button/Button.styles.js +1 -0
- package/es/components/Button/Button.styles.js.map +1 -1
- package/es/components/Drawer/Drawer.js +1 -0
- package/es/components/Drawer/Drawer.js.map +1 -1
- package/es/components/IconButton/IconButton.css +11 -12
- package/es/components/IconButton/IconButton.js +19 -53
- package/es/components/IconButton/IconButton.js.map +1 -1
- package/es/components/IconButton/IconButton.styles.js +7 -15
- package/es/components/IconButton/IconButton.styles.js.map +1 -1
- package/es/components/IconButton/IconButton.styles_1hknr37.css +1 -0
- package/es/components/IconButton/IconButton.tokens.js +1 -4
- package/es/components/IconButton/IconButton.tokens.js.map +1 -1
- package/es/index.css +1 -2
- package/es/index.js +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Button/Button.styles.js +10 -2
- package/styled-components/cjs/components/IconButton/IconButton.js +18 -57
- package/styled-components/cjs/components/IconButton/IconButton.styles.js +5 -12
- package/styled-components/cjs/components/IconButton/IconButton.tokens.js +1 -4
- package/styled-components/cjs/components/IconButton/index.js +0 -6
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +5 -1
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +5 -1
- package/styled-components/es/components/Button/Button.styles.js +10 -2
- package/styled-components/es/components/IconButton/IconButton.js +19 -55
- package/styled-components/es/components/IconButton/IconButton.styles.js +5 -10
- package/styled-components/es/components/IconButton/IconButton.tokens.js +0 -3
- package/styled-components/es/components/IconButton/index.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +5 -1
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +5 -1
- package/types/components/Button/Button.styles.d.ts +1 -0
- package/types/components/Button/Button.styles.d.ts.map +1 -1
- package/types/components/IconButton/IconButton.d.ts +10 -5
- package/types/components/IconButton/IconButton.d.ts.map +1 -1
- package/types/components/IconButton/IconButton.styles.d.ts +1 -2
- package/types/components/IconButton/IconButton.styles.d.ts.map +1 -1
- package/types/components/IconButton/IconButton.tokens.d.ts +0 -3
- package/types/components/IconButton/IconButton.tokens.d.ts.map +1 -1
- package/types/components/IconButton/index.d.ts +1 -2
- package/types/components/IconButton/index.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -1
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -1
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
- package/cjs/components/IconButton/IconButton.styles_12iyaye.css +0 -2
- package/cjs/components/IconButton/variations/_disabled/base.js +0 -9
- package/cjs/components/IconButton/variations/_disabled/base.js.map +0 -1
- package/cjs/components/IconButton/variations/_disabled/base_x642ct.css +0 -1
- package/cjs/components/IconButton/variations/_focused/base.js +0 -9
- package/cjs/components/IconButton/variations/_focused/base.js.map +0 -1
- package/cjs/components/IconButton/variations/_focused/base_x642ct.css +0 -1
- package/cjs/components/IconButton/variations/_size/base.js +0 -9
- package/cjs/components/IconButton/variations/_size/base.js.map +0 -1
- package/cjs/components/IconButton/variations/_size/base_x642ct.css +0 -1
- package/cjs/components/IconButton/variations/_view/base.js +0 -9
- package/cjs/components/IconButton/variations/_view/base.js.map +0 -1
- package/cjs/components/IconButton/variations/_view/base_x642ct.css +0 -1
- package/es/components/IconButton/IconButton.styles_12iyaye.css +0 -2
- package/es/components/IconButton/variations/_disabled/base.js +0 -5
- package/es/components/IconButton/variations/_disabled/base.js.map +0 -1
- package/es/components/IconButton/variations/_disabled/base_x642ct.css +0 -1
- package/es/components/IconButton/variations/_focused/base.js +0 -5
- package/es/components/IconButton/variations/_focused/base.js.map +0 -1
- package/es/components/IconButton/variations/_focused/base_x642ct.css +0 -1
- package/es/components/IconButton/variations/_size/base.js +0 -5
- package/es/components/IconButton/variations/_size/base.js.map +0 -1
- package/es/components/IconButton/variations/_size/base_x642ct.css +0 -1
- package/es/components/IconButton/variations/_view/base.js +0 -5
- package/es/components/IconButton/variations/_view/base.js.map +0 -1
- package/es/components/IconButton/variations/_view/base_x642ct.css +0 -1
- package/styled-components/cjs/components/IconButton/IconButton.types.js +0 -5
- package/styled-components/cjs/components/IconButton/variations/_disabled/base.js +0 -8
- package/styled-components/cjs/components/IconButton/variations/_disabled/tokens.json +0 -1
- package/styled-components/cjs/components/IconButton/variations/_focused/base.js +0 -8
- package/styled-components/cjs/components/IconButton/variations/_focused/tokens.json +0 -1
- package/styled-components/cjs/components/IconButton/variations/_size/base.js +0 -8
- package/styled-components/cjs/components/IconButton/variations/_size/tokens.json +0 -1
- package/styled-components/cjs/components/IconButton/variations/_view/base.js +0 -8
- package/styled-components/cjs/components/IconButton/variations/_view/tokens.json +0 -1
- package/styled-components/es/components/IconButton/IconButton.types.js +0 -1
- package/styled-components/es/components/IconButton/variations/_disabled/base.js +0 -2
- package/styled-components/es/components/IconButton/variations/_disabled/tokens.json +0 -1
- package/styled-components/es/components/IconButton/variations/_focused/base.js +0 -2
- package/styled-components/es/components/IconButton/variations/_focused/tokens.json +0 -1
- package/styled-components/es/components/IconButton/variations/_size/base.js +0 -2
- package/styled-components/es/components/IconButton/variations/_size/tokens.json +0 -1
- package/styled-components/es/components/IconButton/variations/_view/base.js +0 -2
- package/styled-components/es/components/IconButton/variations/_view/tokens.json +0 -1
- package/types/components/IconButton/IconButton.types.d.ts +0 -13
- package/types/components/IconButton/IconButton.types.d.ts.map +0 -1
- package/types/components/IconButton/variations/_disabled/base.d.ts +0 -2
- package/types/components/IconButton/variations/_disabled/base.d.ts.map +0 -1
- package/types/components/IconButton/variations/_focused/base.d.ts +0 -2
- package/types/components/IconButton/variations/_focused/base.d.ts.map +0 -1
- package/types/components/IconButton/variations/_size/base.d.ts +0 -2
- package/types/components/IconButton/variations/_size/base.d.ts.map +0 -1
- package/types/components/IconButton/variations/_view/base.d.ts +0 -2
- package/types/components/IconButton/variations/_view/base.d.ts.map +0 -1
@@ -1,57 +1,16 @@
|
|
1
|
-
import {
|
2
|
-
import
|
3
|
-
import {
|
4
|
-
import {
|
5
|
-
import {
|
6
|
-
import { base as base$
|
7
|
-
import { base as base$
|
8
|
-
import { base
|
9
|
-
import { base as base$4 } from './variations/_focused/base.js';
|
1
|
+
import { buttonRoot } from '../Button/Button.js';
|
2
|
+
import { base as base$1 } from '../Button/variations/_view/base.js';
|
3
|
+
import { base as base$2 } from '../Button/variations/_size/base.js';
|
4
|
+
import { base as base$3 } from '../Button/variations/_disabled/base.js';
|
5
|
+
import { base as base$4 } from '../Button/variations/_focused/base.js';
|
6
|
+
import { base as base$5 } from '../Button/variations/_blurred/base.js';
|
7
|
+
import { base as base$6 } from '../Button/variations/_stretching/base.js';
|
8
|
+
import { base } from './IconButton.styles.js';
|
10
9
|
|
11
|
-
var
|
12
|
-
var iconButtonRoot = function iconButtonRoot(Root) {
|
13
|
-
return /*#__PURE__*/forwardRef(function (props, ref) {
|
14
|
-
var children = props.children,
|
15
|
-
view = props.view,
|
16
|
-
size = props.size,
|
17
|
-
icon = props.icon,
|
18
|
-
isLoading = props.isLoading,
|
19
|
-
loader = props.loader,
|
20
|
-
pin = props.pin,
|
21
|
-
disabled = props.disabled,
|
22
|
-
focused = props.focused,
|
23
|
-
outlined = props.outlined,
|
24
|
-
className = props.className,
|
25
|
-
style = props.style,
|
26
|
-
rest = _objectWithoutProperties(props, _excluded);
|
27
|
-
return /*#__PURE__*/React.createElement(Root, {
|
28
|
-
view: view,
|
29
|
-
size: size,
|
30
|
-
focused: focused,
|
31
|
-
disabled: disabled,
|
32
|
-
className: classes.iconButtonItem
|
33
|
-
}, /*#__PURE__*/React.createElement(IconButtonStyled, _extends({
|
34
|
-
view: view,
|
35
|
-
size: size,
|
36
|
-
loader: loader,
|
37
|
-
isLoading: isLoading,
|
38
|
-
pin: pin,
|
39
|
-
disabled: disabled,
|
40
|
-
focused: focused,
|
41
|
-
outlined: outlined,
|
42
|
-
ref: ref,
|
43
|
-
square: true // Временное решение
|
44
|
-
,
|
45
|
-
stretching: "fixed" // Не работает не понятное почему
|
46
|
-
,
|
47
|
-
className: cx(className),
|
48
|
-
style: style
|
49
|
-
}, rest), icon || children));
|
50
|
-
});
|
51
|
-
};
|
10
|
+
var iconButtonRoot = buttonRoot;
|
52
11
|
var iconButtonConfig = {
|
53
|
-
name: '
|
54
|
-
tag: '
|
12
|
+
name: 'IconButton',
|
13
|
+
tag: 'button',
|
55
14
|
layout: iconButtonRoot,
|
56
15
|
base: base,
|
57
16
|
variations: {
|
@@ -67,11 +26,18 @@ var iconButtonConfig = {
|
|
67
26
|
},
|
68
27
|
focused: {
|
69
28
|
css: base$4
|
29
|
+
},
|
30
|
+
blurred: {
|
31
|
+
css: base$5
|
32
|
+
},
|
33
|
+
stretching: {
|
34
|
+
css: base$6
|
70
35
|
}
|
71
36
|
},
|
72
37
|
defaults: {
|
73
38
|
view: 'secondary',
|
74
|
-
size: 'm'
|
39
|
+
size: 'm',
|
40
|
+
stretching: 'fixed'
|
75
41
|
}
|
76
42
|
};
|
77
43
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { buttonRoot } from '../Button';\nimport { base as viewCSS } from '../Button/variations/_view/base';\nimport { base as sizeCSS } from '../Button/variations/_size/base';\nimport { base as disabledCSS } from '../Button/variations/_disabled/base';\nimport { base as focusedCSS } from '../Button/variations/_focused/base';\nimport { base as blurredCSS } from '../Button/variations/_blurred/base';\nimport { base as stretchingCSS } from '../Button/variations/_stretching/base';\n\nimport { base } from './IconButton.styles';\n\nexport const iconButtonRoot = buttonRoot;\n\nexport const iconButtonConfig = {\n name: 'IconButton',\n tag: 'button',\n layout: iconButtonRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n focused: {\n css: focusedCSS,\n },\n blurred: {\n css: blurredCSS,\n },\n stretching: {\n css: stretchingCSS,\n },\n },\n defaults: {\n view: 'secondary',\n size: 'm',\n stretching: 'fixed',\n },\n};\n"],"names":["iconButtonRoot","buttonRoot","iconButtonConfig","name","tag","layout","base","variations","view","css","viewCSS","size","sizeCSS","disabled","disabledCSS","attrs","focused","focusedCSS","blurred","blurredCSS","stretching","stretchingCSS","defaults"],"mappings":";;;;;;;;;AAUO,IAAMA,cAAc,GAAGC,WAAU;AAEjC,IAAMC,gBAAgB,GAAG;AAC5BC,EAAAA,IAAI,EAAE,YAAY;AAClBC,EAAAA,GAAG,EAAE,QAAQ;AACbC,EAAAA,MAAM,EAAEL,cAAc;AACtBM,EAAAA,IAAI,EAAJA,IAAI;AACJC,EAAAA,UAAU,EAAE;AACRC,IAAAA,IAAI,EAAE;AACFC,MAAAA,GAAG,EAAEC,MAAAA;KACR;AACDC,IAAAA,IAAI,EAAE;AACFF,MAAAA,GAAG,EAAEG,MAAAA;KACR;AACDC,IAAAA,QAAQ,EAAE;AACNJ,MAAAA,GAAG,EAAEK,MAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;KACV;AACDC,IAAAA,OAAO,EAAE;AACLP,MAAAA,GAAG,EAAEQ,MAAAA;KACR;AACDC,IAAAA,OAAO,EAAE;AACLT,MAAAA,GAAG,EAAEU,MAAAA;KACR;AACDC,IAAAA,UAAU,EAAE;AACRX,MAAAA,GAAG,EAAEY,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNd,IAAAA,IAAI,EAAE,WAAW;AACjBG,IAAAA,IAAI,EAAE,GAAG;AACTS,IAAAA,UAAU,EAAE,OAAA;AAChB,GAAA;AACJ;;;;"}
|
@@ -1,20 +1,12 @@
|
|
1
|
-
import './IconButton.
|
2
|
-
import
|
1
|
+
import './IconButton.styles_1hknr37.css';
|
2
|
+
import 'react';
|
3
|
+
import '../../utils/react.js';
|
4
|
+
import '@linaria/react';
|
5
|
+
import 'focus-visible';
|
3
6
|
import '@linaria/core';
|
4
|
-
import
|
5
|
-
import { buttonConfig } from '../Button/Button.js';
|
7
|
+
import '@salutejs/plasma-core';
|
6
8
|
|
7
|
-
var mergedConfig = /*#__PURE__*/mergeConfig(buttonConfig);
|
8
|
-
var Button = /*#__PURE__*/component(mergedConfig);
|
9
9
|
var base = "b1ua728l";
|
10
|
-
var _exp2 = function _exp2() {
|
11
|
-
return Button;
|
12
|
-
};
|
13
|
-
var IconButtonStyled = /*#__PURE__*/styled(_exp2())({
|
14
|
-
name: "IconButtonStyled",
|
15
|
-
"class": "i5roq7j",
|
16
|
-
propsAsIs: true
|
17
|
-
});
|
18
10
|
|
19
|
-
export {
|
11
|
+
export { base };
|
20
12
|
//# sourceMappingURL=IconButton.styles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"IconButton.styles.js","sources":["../../../src/components/IconButton/IconButton.styles.ts"],"sourcesContent":["import {
|
1
|
+
{"version":3,"file":"IconButton.styles.js","sources":["../../../src/components/IconButton/IconButton.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { buttonTokens } from '../Button';\nimport { baseContent as buttonBase } from '../Button/Button.styles';\n\nimport { tokens } from './IconButton.tokens';\n\nexport const mappingOverride = `\n ${buttonTokens.buttonPadding}: 0;\n\n ${buttonTokens.buttonColor}: var(${tokens.iconButtonColor});\n ${buttonTokens.buttonBackgroundColor}: var(${tokens.iconButtonBackgroundColor});\n\n ${buttonTokens.buttonColorHover}: var(${tokens.iconButtonColorHover});\n ${buttonTokens.buttonBackgroundColorHover}: var(${tokens.iconButtonBackgroundColorHover});\n\n ${buttonTokens.buttonColorActive}: var(${tokens.iconButtonColorActive});\n ${buttonTokens.buttonBackgroundColorActive}: var(${tokens.iconButtonBackgroundColorActive});\n\n\n ${buttonTokens.buttonFontFamily}: var(${tokens.iconButtonFontFamily});\n ${buttonTokens.buttonFontSize}: var(${tokens.iconButtonFontSize});\n ${buttonTokens.buttonFontStyle}: var(${tokens.iconButtonFontStyle});\n ${buttonTokens.buttonFontWeight}:var(${tokens.iconButtonFontWeight});\n ${buttonTokens.buttonLetterSpacing}: var(${tokens.iconButtonLetterSpacing});\n ${buttonTokens.buttonLineHeight}: var(${tokens.iconButtonLineHeight});\n\n ${buttonTokens.buttonWidth}: var(${tokens.iconButtonWidth});\n ${buttonTokens.buttonHeight}: var(${tokens.iconButtonHeight});\n ${buttonTokens.buttonRadius}: var(${tokens.iconButtonRadius});\n\n ${buttonTokens.buttonDisabledOpacity}: var(${tokens.iconButtonDisabledOpacity});\n ${buttonTokens.buttonFocusColor}: var(${tokens.iconButtonFocusColor});\n\n ${buttonTokens.buttonSpinnerSize}: var(${tokens.iconButtonSpinnerSize});\n ${buttonTokens.buttonSpinnerColor}: var(${tokens.iconButtonSpinnerColor});\n`;\n\nexport const base = css`\n ${buttonBase};\n ${mappingOverride};\n`;\n"],"names":["base"],"mappings":";;;;;;;AAsCO,IAAMA,IAAI,GAGhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.b1ua728l{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.b1ua728l{-webkit-text-decoration:none;text-decoration:none;}.b1ua728l.b1ua728l.button-square{width:var(--plasma-button-height);padding:0;}.b1ua728l: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);}.b1ua728l: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);}.b1ua728l:focus{outline:none;}.b1ua728l::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;}.b1ua728l.focus-visible:focus::before,.b1ua728l[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.b1ua728l[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.b1ua728l[disabled]:hover,.b1ua728l[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.b1ua728l.button-stretching-fixed{width:var(--plasma-button-width);}.b1ua728l.button-stretching-filled{width:100%;}.b1ua728l.button-stretching-auto{width:auto;}
|
@@ -1,6 +1,3 @@
|
|
1
|
-
var classes = {
|
2
|
-
iconButtonItem: 'icon-button-item'
|
3
|
-
};
|
4
1
|
var tokens = {
|
5
2
|
iconButtonColor: '--plasma-icon-button-color',
|
6
3
|
iconButtonBackgroundColor: '--plasma-icon-button-background-color',
|
@@ -27,5 +24,5 @@ var tokens = {
|
|
27
24
|
iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
|
28
25
|
};
|
29
26
|
|
30
|
-
export {
|
27
|
+
export { tokens };
|
31
28
|
//# sourceMappingURL=IconButton.tokens.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"IconButton.tokens.js","sources":["../../../src/components/IconButton/IconButton.tokens.ts"],"sourcesContent":["export const
|
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,8 +14,7 @@
|
|
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
|
-
.
|
18
|
-
.IconButton_styles_12iyaye_i5roq7j__f373d2de{--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);}
|
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;}
|
19
18
|
|
20
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);}
|
21
20
|
|
package/es/index.js
CHANGED
@@ -17,7 +17,7 @@ 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
19
|
export { iconButtonConfig, iconButtonRoot } from './components/IconButton/IconButton.js';
|
20
|
-
export {
|
20
|
+
export { tokens as iconButtonTokens } from './components/IconButton/IconButton.tokens.js';
|
21
21
|
export { buttonGroupConfig, buttonGroupRoot } from './components/ButtonGroup/ButtonGroup.js';
|
22
22
|
export { classes as buttonGroupClasses, tokens as buttonGroupTokens } from './components/ButtonGroup/ButtonGroup.tokens.js';
|
23
23
|
export { chipConfig, chipRoot } from './components/Chip/Chip.js';
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.78.0-canary.1195.
|
3
|
+
"version": "0.78.0-canary.1195.8924860991.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": "
|
105
|
+
"gitHead": "ed82cea053cbdda95006aeda1bbac67fb1cba80f"
|
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");
|
@@ -1,67 +1,21 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
5
4
|
value: true
|
6
5
|
});
|
7
6
|
exports.iconButtonRoot = exports.iconButtonConfig = void 0;
|
8
|
-
var
|
9
|
-
var
|
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");
|
10
14
|
var _IconButton = /*#__PURE__*/require("./IconButton.styles");
|
11
|
-
var
|
12
|
-
var _base = /*#__PURE__*/require("./variations/_view/base");
|
13
|
-
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
14
|
-
var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
15
|
-
var _base4 = /*#__PURE__*/require("./variations/_focused/base");
|
16
|
-
var _excluded = ["children", "view", "size", "icon", "isLoading", "loader", "pin", "disabled", "focused", "outlined", "className", "style"];
|
17
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
18
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
19
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
20
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
21
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
22
|
-
var iconButtonRoot = exports.iconButtonRoot = function iconButtonRoot(Root) {
|
23
|
-
return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
24
|
-
var children = props.children,
|
25
|
-
view = props.view,
|
26
|
-
size = props.size,
|
27
|
-
icon = props.icon,
|
28
|
-
isLoading = props.isLoading,
|
29
|
-
loader = props.loader,
|
30
|
-
pin = props.pin,
|
31
|
-
disabled = props.disabled,
|
32
|
-
focused = props.focused,
|
33
|
-
outlined = props.outlined,
|
34
|
-
className = props.className,
|
35
|
-
style = props.style,
|
36
|
-
rest = _objectWithoutProperties(props, _excluded);
|
37
|
-
return /*#__PURE__*/_react["default"].createElement(Root, {
|
38
|
-
view: view,
|
39
|
-
size: size,
|
40
|
-
focused: focused,
|
41
|
-
disabled: disabled,
|
42
|
-
className: _IconButton2.classes.iconButtonItem
|
43
|
-
}, /*#__PURE__*/_react["default"].createElement(_IconButton.IconButtonStyled, _extends({
|
44
|
-
view: view,
|
45
|
-
size: size,
|
46
|
-
loader: loader,
|
47
|
-
isLoading: isLoading,
|
48
|
-
pin: pin,
|
49
|
-
disabled: disabled,
|
50
|
-
focused: focused,
|
51
|
-
outlined: outlined,
|
52
|
-
ref: ref,
|
53
|
-
square: true // Временное решение
|
54
|
-
,
|
55
|
-
stretching: "fixed" // Не работает не понятное почему
|
56
|
-
,
|
57
|
-
className: (0, _utils.cx)(className),
|
58
|
-
style: style
|
59
|
-
}, rest), icon || children));
|
60
|
-
});
|
61
|
-
};
|
15
|
+
var iconButtonRoot = exports.iconButtonRoot = _Button.buttonRoot;
|
62
16
|
var iconButtonConfig = exports.iconButtonConfig = {
|
63
|
-
name: '
|
64
|
-
tag: '
|
17
|
+
name: 'IconButton',
|
18
|
+
tag: 'button',
|
65
19
|
layout: iconButtonRoot,
|
66
20
|
base: _IconButton.base,
|
67
21
|
variations: {
|
@@ -77,10 +31,17 @@ var iconButtonConfig = exports.iconButtonConfig = {
|
|
77
31
|
},
|
78
32
|
focused: {
|
79
33
|
css: _base4.base
|
34
|
+
},
|
35
|
+
blurred: {
|
36
|
+
css: _base5.base
|
37
|
+
},
|
38
|
+
stretching: {
|
39
|
+
css: _base6.base
|
80
40
|
}
|
81
41
|
},
|
82
42
|
defaults: {
|
83
43
|
view: 'secondary',
|
84
|
-
size: 'm'
|
44
|
+
size: 'm',
|
45
|
+
stretching: 'fixed'
|
85
46
|
}
|
86
47
|
};
|
@@ -1,19 +1,12 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
5
4
|
value: true
|
6
5
|
});
|
7
|
-
exports.
|
8
|
-
var _styledComponents = /*#__PURE__*/
|
9
|
-
var _engines = /*#__PURE__*/require("../../engines");
|
6
|
+
exports.mappingOverride = exports.base = void 0;
|
7
|
+
var _styledComponents = /*#__PURE__*/require("styled-components");
|
10
8
|
var _Button = /*#__PURE__*/require("../Button");
|
9
|
+
var _Button2 = /*#__PURE__*/require("../Button/Button.styles");
|
11
10
|
var _IconButton = /*#__PURE__*/require("./IconButton.tokens");
|
12
|
-
|
13
|
-
|
14
|
-
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Button.buttonConfig);
|
15
|
-
var Button = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
16
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&&.", "{display:inline-flex;}"], _IconButton.classes.iconButtonItem);
|
17
|
-
var IconButtonStyled = exports.IconButtonStyled = /*#__PURE__*/(0, _styledComponents["default"])(Button).withConfig({
|
18
|
-
componentId: "plasma-new-hope__sc-bil9m7-0"
|
19
|
-
})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Button.buttonTokens.buttonColor, _IconButton.tokens.iconButtonColor, _Button.buttonTokens.buttonBackgroundColor, _IconButton.tokens.iconButtonBackgroundColor, _Button.buttonTokens.buttonColorHover, _IconButton.tokens.iconButtonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _IconButton.tokens.iconButtonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _IconButton.tokens.iconButtonColorActive, _Button.buttonTokens.buttonBackgroundColorActive, _IconButton.tokens.iconButtonBackgroundColorActive, _Button.buttonTokens.buttonFontFamily, _IconButton.tokens.iconButtonFontFamily, _Button.buttonTokens.buttonFontSize, _IconButton.tokens.iconButtonFontSize, _Button.buttonTokens.buttonFontStyle, _IconButton.tokens.iconButtonFontStyle, _Button.buttonTokens.buttonFontWeight, _IconButton.tokens.iconButtonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _IconButton.tokens.iconButtonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _IconButton.tokens.iconButtonLineHeight, _Button.buttonTokens.buttonWidth, _IconButton.tokens.iconButtonWidth, _Button.buttonTokens.buttonHeight, _IconButton.tokens.iconButtonHeight, _Button.buttonTokens.buttonRadius, _IconButton.tokens.iconButtonRadius, _Button.buttonTokens.buttonDisabledOpacity, _IconButton.tokens.iconButtonDisabledOpacity, _Button.buttonTokens.buttonFocusColor, _IconButton.tokens.iconButtonFocusColor, _Button.buttonTokens.buttonSpinnerSize, _IconButton.tokens.iconButtonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _IconButton.tokens.iconButtonSpinnerColor);
|
11
|
+
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");
|
12
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";"], _Button2.baseContent, mappingOverride);
|
@@ -3,10 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.tokens =
|
7
|
-
var classes = exports.classes = {
|
8
|
-
iconButtonItem: 'icon-button-item'
|
9
|
-
};
|
6
|
+
exports.tokens = void 0;
|
10
7
|
var tokens = exports.tokens = {
|
11
8
|
iconButtonColor: '--plasma-icon-button-color',
|
12
9
|
iconButtonBackgroundColor: '--plasma-icon-button-background-color',
|
@@ -3,12 +3,6 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
Object.defineProperty(exports, "iconButtonClasses", {
|
7
|
-
enumerable: true,
|
8
|
-
get: function get() {
|
9
|
-
return _IconButton2.classes;
|
10
|
-
}
|
11
|
-
});
|
12
6
|
Object.defineProperty(exports, "iconButtonConfig", {
|
13
7
|
enumerable: true,
|
14
8
|
get: function get() {
|
package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js
CHANGED
@@ -31,7 +31,7 @@ var config = exports.config = {
|
|
31
31
|
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),
|
32
32
|
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),
|
33
33
|
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),
|
34
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.
|
34
|
+
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),
|
35
35
|
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),
|
36
36
|
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),
|
37
37
|
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)
|
package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx
CHANGED
@@ -61,5 +61,9 @@ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
|
|
61
61
|
focused: true,
|
62
62
|
isLoading: false,
|
63
63
|
},
|
64
|
-
render: (args) =>
|
64
|
+
render: (args) => (
|
65
|
+
<IconButton {...args}>
|
66
|
+
<IconChevronLeft size={getSizeForIcon(args.size)} />
|
67
|
+
</IconButton>
|
68
|
+
),
|
65
69
|
};
|
package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js
CHANGED
@@ -31,7 +31,7 @@ var config = exports.config = {
|
|
31
31
|
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),
|
32
32
|
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),
|
33
33
|
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),
|
34
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.
|
34
|
+
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),
|
35
35
|
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),
|
36
36
|
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),
|
37
37
|
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)
|
package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx
CHANGED
@@ -61,5 +61,9 @@ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
|
|
61
61
|
focused: true,
|
62
62
|
isLoading: false,
|
63
63
|
},
|
64
|
-
render: (args) =>
|
64
|
+
render: (args) => (
|
65
|
+
<IconButton {...args}>
|
66
|
+
<IconChevronLeft size={getSizeForIcon(args.size)} />
|
67
|
+
</IconButton>
|
68
|
+
),
|
65
69
|
};
|
@@ -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");
|