@salutejs/plasma-new-hope 0.77.0-canary.1195.8816269500.0 → 0.77.0-canary.1196.8813424993.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (115) hide show
  1. package/cjs/index.css +0 -3
  2. package/cjs/index.js +0 -6
  3. package/cjs/index.js.map +1 -1
  4. package/es/index.css +0 -3
  5. package/es/index.js +0 -2
  6. package/es/index.js.map +1 -1
  7. package/package.json +4 -4
  8. package/styled-components/cjs/index.js +0 -11
  9. package/styled-components/es/index.js +0 -1
  10. package/types/index.d.ts +0 -1
  11. package/types/index.d.ts.map +1 -1
  12. package/cjs/components/IconButton/IconButton.css +0 -25
  13. package/cjs/components/IconButton/IconButton.js +0 -84
  14. package/cjs/components/IconButton/IconButton.js.map +0 -1
  15. package/cjs/components/IconButton/IconButton.styles.js +0 -25
  16. package/cjs/components/IconButton/IconButton.styles.js.map +0 -1
  17. package/cjs/components/IconButton/IconButton.styles_12iyaye.css +0 -2
  18. package/cjs/components/IconButton/IconButton.tokens.js +0 -36
  19. package/cjs/components/IconButton/IconButton.tokens.js.map +0 -1
  20. package/cjs/components/IconButton/variations/_disabled/base.js +0 -9
  21. package/cjs/components/IconButton/variations/_disabled/base.js.map +0 -1
  22. package/cjs/components/IconButton/variations/_disabled/base_x642ct.css +0 -1
  23. package/cjs/components/IconButton/variations/_focused/base.js +0 -9
  24. package/cjs/components/IconButton/variations/_focused/base.js.map +0 -1
  25. package/cjs/components/IconButton/variations/_focused/base_x642ct.css +0 -1
  26. package/cjs/components/IconButton/variations/_size/base.js +0 -9
  27. package/cjs/components/IconButton/variations/_size/base.js.map +0 -1
  28. package/cjs/components/IconButton/variations/_size/base_x642ct.css +0 -1
  29. package/cjs/components/IconButton/variations/_view/base.js +0 -9
  30. package/cjs/components/IconButton/variations/_view/base.js.map +0 -1
  31. package/cjs/components/IconButton/variations/_view/base_x642ct.css +0 -1
  32. package/es/components/IconButton/IconButton.css +0 -25
  33. package/es/components/IconButton/IconButton.js +0 -79
  34. package/es/components/IconButton/IconButton.js.map +0 -1
  35. package/es/components/IconButton/IconButton.styles.js +0 -20
  36. package/es/components/IconButton/IconButton.styles.js.map +0 -1
  37. package/es/components/IconButton/IconButton.styles_12iyaye.css +0 -2
  38. package/es/components/IconButton/IconButton.tokens.js +0 -31
  39. package/es/components/IconButton/IconButton.tokens.js.map +0 -1
  40. package/es/components/IconButton/variations/_disabled/base.js +0 -5
  41. package/es/components/IconButton/variations/_disabled/base.js.map +0 -1
  42. package/es/components/IconButton/variations/_disabled/base_x642ct.css +0 -1
  43. package/es/components/IconButton/variations/_focused/base.js +0 -5
  44. package/es/components/IconButton/variations/_focused/base.js.map +0 -1
  45. package/es/components/IconButton/variations/_focused/base_x642ct.css +0 -1
  46. package/es/components/IconButton/variations/_size/base.js +0 -5
  47. package/es/components/IconButton/variations/_size/base.js.map +0 -1
  48. package/es/components/IconButton/variations/_size/base_x642ct.css +0 -1
  49. package/es/components/IconButton/variations/_view/base.js +0 -5
  50. package/es/components/IconButton/variations/_view/base.js.map +0 -1
  51. package/es/components/IconButton/variations/_view/base_x642ct.css +0 -1
  52. package/styled-components/cjs/components/IconButton/IconButton.js +0 -86
  53. package/styled-components/cjs/components/IconButton/IconButton.styles.js +0 -19
  54. package/styled-components/cjs/components/IconButton/IconButton.tokens.js +0 -34
  55. package/styled-components/cjs/components/IconButton/IconButton.types.js +0 -5
  56. package/styled-components/cjs/components/IconButton/index.js +0 -31
  57. package/styled-components/cjs/components/IconButton/variations/_disabled/base.js +0 -8
  58. package/styled-components/cjs/components/IconButton/variations/_disabled/tokens.json +0 -1
  59. package/styled-components/cjs/components/IconButton/variations/_focused/base.js +0 -8
  60. package/styled-components/cjs/components/IconButton/variations/_focused/tokens.json +0 -1
  61. package/styled-components/cjs/components/IconButton/variations/_size/base.js +0 -8
  62. package/styled-components/cjs/components/IconButton/variations/_size/tokens.json +0 -1
  63. package/styled-components/cjs/components/IconButton/variations/_view/base.js +0 -8
  64. package/styled-components/cjs/components/IconButton/variations/_view/tokens.json +0 -1
  65. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +0 -46
  66. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js +0 -11
  67. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +0 -65
  68. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +0 -46
  69. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.js +0 -11
  70. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +0 -65
  71. package/styled-components/es/components/IconButton/IconButton.js +0 -77
  72. package/styled-components/es/components/IconButton/IconButton.styles.js +0 -11
  73. package/styled-components/es/components/IconButton/IconButton.tokens.js +0 -28
  74. package/styled-components/es/components/IconButton/IconButton.types.js +0 -1
  75. package/styled-components/es/components/IconButton/index.js +0 -2
  76. package/styled-components/es/components/IconButton/variations/_disabled/base.js +0 -2
  77. package/styled-components/es/components/IconButton/variations/_disabled/tokens.json +0 -1
  78. package/styled-components/es/components/IconButton/variations/_focused/base.js +0 -2
  79. package/styled-components/es/components/IconButton/variations/_focused/tokens.json +0 -1
  80. package/styled-components/es/components/IconButton/variations/_size/base.js +0 -2
  81. package/styled-components/es/components/IconButton/variations/_size/tokens.json +0 -1
  82. package/styled-components/es/components/IconButton/variations/_view/base.js +0 -2
  83. package/styled-components/es/components/IconButton/variations/_view/tokens.json +0 -1
  84. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +0 -40
  85. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.js +0 -5
  86. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +0 -65
  87. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js +0 -40
  88. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js +0 -5
  89. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +0 -65
  90. package/types/components/IconButton/IconButton.d.ts +0 -30
  91. package/types/components/IconButton/IconButton.d.ts.map +0 -1
  92. package/types/components/IconButton/IconButton.styles.d.ts +0 -4
  93. package/types/components/IconButton/IconButton.styles.d.ts.map +0 -1
  94. package/types/components/IconButton/IconButton.tokens.d.ts +0 -29
  95. package/types/components/IconButton/IconButton.tokens.d.ts.map +0 -1
  96. package/types/components/IconButton/IconButton.types.d.ts +0 -13
  97. package/types/components/IconButton/IconButton.types.d.ts.map +0 -1
  98. package/types/components/IconButton/index.d.ts +0 -4
  99. package/types/components/IconButton/index.d.ts.map +0 -1
  100. package/types/components/IconButton/variations/_disabled/base.d.ts +0 -2
  101. package/types/components/IconButton/variations/_disabled/base.d.ts.map +0 -1
  102. package/types/components/IconButton/variations/_focused/base.d.ts +0 -2
  103. package/types/components/IconButton/variations/_focused/base.d.ts.map +0 -1
  104. package/types/components/IconButton/variations/_size/base.d.ts +0 -2
  105. package/types/components/IconButton/variations/_size/base.d.ts.map +0 -1
  106. package/types/components/IconButton/variations/_view/base.d.ts +0 -2
  107. package/types/components/IconButton/variations/_view/base.d.ts.map +0 -1
  108. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts +0 -39
  109. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map +0 -1
  110. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +0 -33
  111. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +0 -1
  112. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts +0 -39
  113. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map +0 -1
  114. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +0 -33
  115. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +0 -1
@@ -1,65 +0,0 @@
1
- import React, { ComponentProps } from 'react';
2
- import type { StoryObj, Meta } from '@storybook/react';
3
-
4
- import { iconButtonConfig } from '../../../../components/IconButton';
5
- import { mergeConfig } from '../../../../engines';
6
- import { WithTheme, argTypesFromConfig } from '../../../_helpers';
7
- import { IconChevronLeft } from '../../../../components/_Icon';
8
-
9
- import { config } from './IconButton.config';
10
- import { IconButton } from './IconButton';
11
-
12
- const meta: Meta<typeof IconButton> = {
13
- title: 'plasma_web/IconButton',
14
- decorators: [WithTheme],
15
- component: IconButton,
16
- argTypes: {
17
- ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
18
- pin: {
19
- options: [
20
- 'square-square',
21
- 'square-clear',
22
- 'clear-square',
23
- 'clear-clear',
24
- 'clear-circle',
25
- 'circle-clear',
26
- 'circle-circle',
27
- '',
28
- ],
29
- control: {
30
- type: 'select',
31
- },
32
- table: { defaultValue: { summary: 'bottom' } },
33
- },
34
- },
35
- };
36
-
37
- export default meta;
38
-
39
- const getSizeForIcon = (size) => {
40
- if (size === 'mr') {
41
- return 'm';
42
- }
43
- if (size === 'lr') {
44
- return 'l';
45
- }
46
- if (size === 'sr') {
47
- return 's';
48
- }
49
- if (size === 'xsr') {
50
- return 'xs';
51
- }
52
- return size;
53
- };
54
-
55
- export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
56
- args: {
57
- children: <IconChevronLeft />,
58
- view: 'default',
59
- size: 'm',
60
- disabled: false,
61
- focused: true,
62
- isLoading: false,
63
- },
64
- render: (args) => <IconButton {...args} icon={<IconChevronLeft size={getSizeForIcon(args.size)} />} />,
65
- };
@@ -1,77 +0,0 @@
1
- var _excluded = ["children", "view", "size", "icon", "isLoading", "loader", "pin", "disabled", "focused", "outlined", "className", "style"];
2
- 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); }
3
- 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; }
4
- 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; }
5
- import React, { forwardRef } from 'react';
6
- import { cx } from '../../utils';
7
- import { base, IconButtonStyled } from './IconButton.styles';
8
- import { classes } from './IconButton.tokens';
9
- import { base as viewCSS } from './variations/_view/base';
10
- import { base as sizeCSS } from './variations/_size/base';
11
- import { base as disabledCSS } from './variations/_disabled/base';
12
- import { base as focusedCSS } from './variations/_focused/base';
13
- export var iconButtonRoot = function iconButtonRoot(Root) {
14
- return /*#__PURE__*/forwardRef(function (props, ref) {
15
- var children = props.children,
16
- view = props.view,
17
- size = props.size,
18
- icon = props.icon,
19
- isLoading = props.isLoading,
20
- loader = props.loader,
21
- pin = props.pin,
22
- disabled = props.disabled,
23
- focused = props.focused,
24
- outlined = props.outlined,
25
- className = props.className,
26
- style = props.style,
27
- rest = _objectWithoutProperties(props, _excluded);
28
- return /*#__PURE__*/React.createElement(Root, {
29
- view: view,
30
- size: size,
31
- focused: focused,
32
- disabled: disabled,
33
- className: classes.iconButtonItem
34
- }, /*#__PURE__*/React.createElement(IconButtonStyled, _extends({
35
- view: view,
36
- size: size,
37
- loader: loader,
38
- isLoading: isLoading,
39
- pin: pin,
40
- disabled: disabled,
41
- focused: focused,
42
- outlined: outlined,
43
- ref: ref,
44
- square: true // Временное решение
45
- ,
46
- stretching: "fixed" // Не работает не понятное почему
47
- ,
48
- className: cx(className),
49
- style: style
50
- }, rest), icon || children));
51
- });
52
- };
53
- export var iconButtonConfig = {
54
- name: 'Button',
55
- tag: 'div',
56
- layout: iconButtonRoot,
57
- base: base,
58
- variations: {
59
- view: {
60
- css: viewCSS
61
- },
62
- size: {
63
- css: sizeCSS
64
- },
65
- disabled: {
66
- css: disabledCSS,
67
- attrs: true
68
- },
69
- focused: {
70
- css: focusedCSS
71
- }
72
- },
73
- defaults: {
74
- view: 'secondary',
75
- size: 'm'
76
- }
77
- };
@@ -1,11 +0,0 @@
1
- import styled from 'styled-components';
2
- import { css } from 'styled-components';
3
- import { component, mergeConfig } from '../../engines';
4
- import { buttonConfig, buttonTokens } from '../Button';
5
- import { tokens, classes } from './IconButton.tokens';
6
- var mergedConfig = /*#__PURE__*/mergeConfig(buttonConfig);
7
- var Button = /*#__PURE__*/component(mergedConfig);
8
- export var base = /*#__PURE__*/css(["&&.", "{display:inline-flex;}"], classes.iconButtonItem);
9
- export var IconButtonStyled = /*#__PURE__*/styled(Button).withConfig({
10
- componentId: "plasma-new-hope__sc-bil9m7-0"
11
- })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], buttonTokens.buttonColor, tokens.iconButtonColor, buttonTokens.buttonBackgroundColor, tokens.iconButtonBackgroundColor, buttonTokens.buttonColorHover, tokens.iconButtonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.iconButtonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.iconButtonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.iconButtonBackgroundColorActive, buttonTokens.buttonFontFamily, tokens.iconButtonFontFamily, buttonTokens.buttonFontSize, tokens.iconButtonFontSize, buttonTokens.buttonFontStyle, tokens.iconButtonFontStyle, buttonTokens.buttonFontWeight, tokens.iconButtonFontWeight, buttonTokens.buttonLetterSpacing, tokens.iconButtonLetterSpacing, buttonTokens.buttonLineHeight, tokens.iconButtonLineHeight, buttonTokens.buttonWidth, tokens.iconButtonWidth, buttonTokens.buttonHeight, tokens.iconButtonHeight, buttonTokens.buttonRadius, tokens.iconButtonRadius, buttonTokens.buttonDisabledOpacity, tokens.iconButtonDisabledOpacity, buttonTokens.buttonFocusColor, tokens.iconButtonFocusColor, buttonTokens.buttonSpinnerSize, tokens.iconButtonSpinnerSize, buttonTokens.buttonSpinnerColor, tokens.iconButtonSpinnerColor);
@@ -1,28 +0,0 @@
1
- export var classes = {
2
- iconButtonItem: 'icon-button-item'
3
- };
4
- export var tokens = {
5
- iconButtonColor: '--plasma-icon-button-color',
6
- iconButtonBackgroundColor: '--plasma-icon-button-background-color',
7
- iconButtonColorHover: '--plasma-icon-button-color-hover',
8
- iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
9
- iconButtonColorActive: '--plasma-icon-button-color-active',
10
- iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
11
- iconButtonScaleHover: '--plasma-icon-button-scale-hover',
12
- iconButtonScaleActive: '---plasma-icon-button-scale-active',
13
- iconButtonHeight: '--plasma-icon-button-height',
14
- iconButtonWidth: '--plasma-icon-button-width',
15
- iconButtonPadding: '--plasma-icon-button-padding',
16
- iconButtonRadius: '--plasma-icon-button-radius',
17
- iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
18
- iconButtonFontFamily: '--plasma-icon-button-font-family',
19
- iconButtonFontSize: '--plasma-icon-button-font-size',
20
- iconButtonFontStyle: '--plasma-icon-button-font-style',
21
- iconButtonFontWeight: '--plasma-icon-button-font-weight',
22
- iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
23
- iconButtonLineHeight: '--plasma-icon-button-line-height',
24
- iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
25
- iconButtonFocusColor: '--plasma-icon-button-focus-color',
26
- iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
27
- iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
28
- };
@@ -1,2 +0,0 @@
1
- export { iconButtonRoot, iconButtonConfig } from './IconButton';
2
- export { tokens as iconButtonTokens, classes as iconButtonClasses } from './IconButton.tokens';
@@ -1,2 +0,0 @@
1
- import { css } from 'styled-components';
2
- export var base = /*#__PURE__*/css([""]);
@@ -1,2 +0,0 @@
1
- import { css } from 'styled-components';
2
- export var base = /*#__PURE__*/css([""]);
@@ -1,2 +0,0 @@
1
- import { css } from 'styled-components';
2
- export var base = /*#__PURE__*/css([""]);
@@ -1,2 +0,0 @@
1
- import { css } from 'styled-components';
2
- export var base = /*#__PURE__*/css([""]);
@@ -1,40 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { iconButtonTokens } from '../../../../components/IconButton';
3
- export var config = {
4
- defaults: {
5
- view: 'default',
6
- focused: 'true',
7
- size: 'm'
8
- },
9
- variations: {
10
- view: {
11
- "default": /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
12
- primary: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
13
- accent: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
14
- secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
15
- clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
16
- success: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
17
- warning: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
18
- critical: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
19
- dark: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
20
- black: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
21
- white: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive)
22
- },
23
- size: {
24
- l: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
25
- lr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
26
- m: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
27
- mr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
28
- s: /*#__PURE__*/css(["", ":2.5rem;", ":2.5remm;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
29
- sr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
30
- xs: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
31
- xsr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
32
- },
33
- disabled: {
34
- "true": /*#__PURE__*/css(["", ":0.4;"], iconButtonTokens.iconButtonDisabledOpacity)
35
- },
36
- focused: {
37
- "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], iconButtonTokens.iconButtonFocusColor)
38
- }
39
- }
40
- };
@@ -1,5 +0,0 @@
1
- import { iconButtonConfig } from '../../../../components/IconButton';
2
- import { component, mergeConfig } from '../../../../engines';
3
- import { config } from './IconButton.config';
4
- var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig, config);
5
- export var IconButton = /*#__PURE__*/component(mergedConfig);
@@ -1,65 +0,0 @@
1
- import React, { ComponentProps } from 'react';
2
- import type { StoryObj, Meta } from '@storybook/react';
3
-
4
- import { iconButtonConfig } from '../../../../components/IconButton';
5
- import { mergeConfig } from '../../../../engines';
6
- import { WithTheme, argTypesFromConfig } from '../../../_helpers';
7
- import { IconChevronLeft } from '../../../../components/_Icon';
8
-
9
- import { config } from './IconButton.config';
10
- import { IconButton } from './IconButton';
11
-
12
- const meta: Meta<typeof IconButton> = {
13
- title: 'plasma_b2c/IconButton',
14
- decorators: [WithTheme],
15
- component: IconButton,
16
- argTypes: {
17
- ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
18
- pin: {
19
- options: [
20
- 'square-square',
21
- 'square-clear',
22
- 'clear-square',
23
- 'clear-clear',
24
- 'clear-circle',
25
- 'circle-clear',
26
- 'circle-circle',
27
- '',
28
- ],
29
- control: {
30
- type: 'select',
31
- },
32
- table: { defaultValue: { summary: 'bottom' } },
33
- },
34
- },
35
- };
36
-
37
- export default meta;
38
-
39
- const getSizeForIcon = (size) => {
40
- if (size === 'mr') {
41
- return 'm';
42
- }
43
- if (size === 'lr') {
44
- return 'l';
45
- }
46
- if (size === 'sr') {
47
- return 's';
48
- }
49
- if (size === 'xsr') {
50
- return 'xs';
51
- }
52
- return size;
53
- };
54
-
55
- export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
56
- args: {
57
- children: <IconChevronLeft />,
58
- view: 'default',
59
- size: 'm',
60
- disabled: false,
61
- focused: true,
62
- isLoading: false,
63
- },
64
- render: (args) => <IconButton {...args} icon={<IconChevronLeft size={getSizeForIcon(args.size)} />} />,
65
- };
@@ -1,40 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { iconButtonTokens } from '../../../../components/IconButton';
3
- export var config = {
4
- defaults: {
5
- view: 'default',
6
- focused: 'true',
7
- size: 'm'
8
- },
9
- variations: {
10
- view: {
11
- "default": /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
12
- primary: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
13
- accent: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
14
- secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
15
- clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
16
- success: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
17
- warning: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
18
- critical: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
19
- dark: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
20
- black: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
21
- white: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive)
22
- },
23
- size: {
24
- l: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
25
- lr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
26
- m: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
27
- mr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
28
- s: /*#__PURE__*/css(["", ":2.5rem;", ":2.5remm;", ":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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
29
- sr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
30
- xs: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
31
- xsr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
32
- },
33
- disabled: {
34
- "true": /*#__PURE__*/css(["", ":0.4;"], iconButtonTokens.iconButtonDisabledOpacity)
35
- },
36
- focused: {
37
- "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], iconButtonTokens.iconButtonFocusColor)
38
- }
39
- }
40
- };
@@ -1,5 +0,0 @@
1
- import { iconButtonConfig } from '../../../../components/IconButton';
2
- import { component, mergeConfig } from '../../../../engines';
3
- import { config } from './IconButton.config';
4
- var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig, config);
5
- export var IconButton = /*#__PURE__*/component(mergedConfig);
@@ -1,65 +0,0 @@
1
- import React, { ComponentProps } from 'react';
2
- import type { StoryObj, Meta } from '@storybook/react';
3
-
4
- import { iconButtonConfig } from '../../../../components/IconButton';
5
- import { mergeConfig } from '../../../../engines';
6
- import { WithTheme, argTypesFromConfig } from '../../../_helpers';
7
- import { IconChevronLeft } from '../../../../components/_Icon';
8
-
9
- import { config } from './IconButton.config';
10
- import { IconButton } from './IconButton';
11
-
12
- const meta: Meta<typeof IconButton> = {
13
- title: 'plasma_web/IconButton',
14
- decorators: [WithTheme],
15
- component: IconButton,
16
- argTypes: {
17
- ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
18
- pin: {
19
- options: [
20
- 'square-square',
21
- 'square-clear',
22
- 'clear-square',
23
- 'clear-clear',
24
- 'clear-circle',
25
- 'circle-clear',
26
- 'circle-circle',
27
- '',
28
- ],
29
- control: {
30
- type: 'select',
31
- },
32
- table: { defaultValue: { summary: 'bottom' } },
33
- },
34
- },
35
- };
36
-
37
- export default meta;
38
-
39
- const getSizeForIcon = (size) => {
40
- if (size === 'mr') {
41
- return 'm';
42
- }
43
- if (size === 'lr') {
44
- return 'l';
45
- }
46
- if (size === 'sr') {
47
- return 's';
48
- }
49
- if (size === 'xsr') {
50
- return 'xs';
51
- }
52
- return size;
53
- };
54
-
55
- export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
56
- args: {
57
- children: <IconChevronLeft />,
58
- view: 'default',
59
- size: 'm',
60
- disabled: false,
61
- focused: true,
62
- isLoading: false,
63
- },
64
- render: (args) => <IconButton {...args} icon={<IconChevronLeft size={getSizeForIcon(args.size)} />} />,
65
- };
@@ -1,30 +0,0 @@
1
- import React from 'react';
2
- import type { RootProps } from '../../engines';
3
- import type { IconButtonProps } from './IconButton.types';
4
- export declare const iconButtonRoot: (Root: RootProps<HTMLButtonElement, IconButtonProps>) => React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
5
- export declare const iconButtonConfig: {
6
- name: string;
7
- tag: string;
8
- layout: (Root: RootProps<HTMLButtonElement, IconButtonProps>) => React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
9
- base: import("@linaria/core").LinariaClassName;
10
- variations: {
11
- view: {
12
- css: import("@linaria/core").LinariaClassName;
13
- };
14
- size: {
15
- css: import("@linaria/core").LinariaClassName;
16
- };
17
- disabled: {
18
- css: import("@linaria/core").LinariaClassName;
19
- attrs: boolean;
20
- };
21
- focused: {
22
- css: import("@linaria/core").LinariaClassName;
23
- };
24
- };
25
- defaults: {
26
- view: string;
27
- size: string;
28
- };
29
- };
30
- //# sourceMappingURL=IconButton.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAO1D,eAAO,MAAM,cAAc,SAAU,UAAU,iBAAiB,EAAE,eAAe,CAAC,8FAwC5E,CAAC;AAEP,eAAO,MAAM,gBAAgB;;;mBA1CQ,UAAU,iBAAiB,EAAE,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;CAkEjF,CAAC"}
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const base: import("@linaria/core").LinariaClassName;
3
- export declare const IconButtonStyled: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../engines/types").PropsType<import("../../engines/types").Variants> & import("../Button").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
4
- //# sourceMappingURL=IconButton.styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"IconButton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.styles.ts"],"names":[],"mappings":";AAWA,eAAO,MAAM,IAAI,0CAIhB,CAAC;AAEF,eAAO,MAAM,gBAAgB,4PA2B5B,CAAC"}
@@ -1,29 +0,0 @@
1
- export declare const classes: {
2
- iconButtonItem: string;
3
- };
4
- export declare const tokens: {
5
- iconButtonColor: string;
6
- iconButtonBackgroundColor: string;
7
- iconButtonColorHover: string;
8
- iconButtonBackgroundColorHover: string;
9
- iconButtonColorActive: string;
10
- iconButtonBackgroundColorActive: string;
11
- iconButtonScaleHover: string;
12
- iconButtonScaleActive: string;
13
- iconButtonHeight: string;
14
- iconButtonWidth: string;
15
- iconButtonPadding: string;
16
- iconButtonRadius: string;
17
- iconButtonRadiusCircle: string;
18
- iconButtonFontFamily: string;
19
- iconButtonFontSize: string;
20
- iconButtonFontStyle: string;
21
- iconButtonFontWeight: string;
22
- iconButtonLetterSpacing: string;
23
- iconButtonLineHeight: string;
24
- iconButtonDisabledOpacity: string;
25
- iconButtonFocusColor: string;
26
- iconButtonSpinnerColor: string;
27
- iconButtonSpinnerSize: string;
28
- };
29
- //# sourceMappingURL=IconButton.tokens.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"IconButton.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;CA4BlB,CAAC"}
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- import type { ButtonProps } from '../Button';
3
- declare type CustomIconButton = {
4
- /**
5
- * Иконка
6
- */
7
- icon?: React.ReactNode;
8
- };
9
- declare type OmitButtonProps = Omit<ButtonProps, 'text' | 'contentLeft' | 'contentRight' | 'stretch' | 'stretching' | 'square' | 'shiftLeft' | 'shiftRight' | 'blur'>;
10
- export interface IconButtonProps extends CustomIconButton, OmitButtonProps {
11
- }
12
- export {};
13
- //# sourceMappingURL=IconButton.types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"IconButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,aAAK,gBAAgB,GAAG;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,aAAK,eAAe,GAAG,IAAI,CACvB,WAAW,EACX,MAAM,GAAG,aAAa,GAAG,cAAc,GAAG,SAAS,GAAG,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CACtH,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,eAAe;CAAG"}
@@ -1,4 +0,0 @@
1
- export { iconButtonRoot, iconButtonConfig } from './IconButton';
2
- export type { IconButtonProps } from './IconButton.types';
3
- export { tokens as iconButtonTokens, classes as iconButtonClasses } from './IconButton.tokens';
4
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
@@ -1,2 +0,0 @@
1
- export declare const base: import("@linaria/core").LinariaClassName;
2
- //# sourceMappingURL=base.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconButton/variations/_disabled/base.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,0CAAQ,CAAC"}
@@ -1,2 +0,0 @@
1
- export declare const base: import("@linaria/core").LinariaClassName;
2
- //# sourceMappingURL=base.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconButton/variations/_focused/base.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,0CAAQ,CAAC"}
@@ -1,2 +0,0 @@
1
- export declare const base: import("@linaria/core").LinariaClassName;
2
- //# sourceMappingURL=base.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconButton/variations/_size/base.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,0CAAQ,CAAC"}