@salutejs/plasma-new-hope 0.262.0-canary.1767.13257914746.0 → 0.262.0-canary.1770.13273833712.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (238) hide show
  1. package/cjs/components/Autocomplete/Autocomplete.css +5 -5
  2. package/cjs/components/Combobox/ComboboxNew/Combobox.css +5 -5
  3. package/cjs/components/Combobox/ComboboxOld/Combobox.css +4 -4
  4. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +4 -4
  5. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +4 -4
  6. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +4 -4
  7. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +4 -4
  8. package/cjs/components/DatePicker/RangeDate/RangeDate.css +6 -6
  9. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +6 -6
  10. package/cjs/components/DatePicker/SingleDate/SingleDate.css +5 -5
  11. package/cjs/components/Dropdown/Dropdown.css +4 -4
  12. package/cjs/components/Dropdown/ui/DropdownOld/DropdownOld.css +4 -4
  13. package/cjs/components/Pagination/Pagination.css +5 -5
  14. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +5 -5
  15. package/cjs/components/Popover/Popover.css +4 -4
  16. package/cjs/components/Popover/Popover.styles.js +1 -1
  17. package/cjs/components/Popover/Popover.styles.js.map +1 -1
  18. package/cjs/components/Popover/Popover.styles_15l7isk.css +4 -0
  19. package/cjs/components/Popover/Popover.tokens.js +0 -1
  20. package/cjs/components/Popover/Popover.tokens.js.map +1 -1
  21. package/cjs/components/Range/Range.css +6 -6
  22. package/cjs/components/Range/Range.styles.js.map +1 -1
  23. package/cjs/components/Range/Range.tokens.js +2 -0
  24. package/cjs/components/Range/Range.tokens.js.map +1 -1
  25. package/cjs/components/Range/variations/_readonly/base.js +1 -1
  26. package/cjs/components/Range/variations/_readonly/base.js.map +1 -1
  27. package/{es/components/Range/variations/_readonly/base_8q1gx8.css → cjs/components/Range/variations/_readonly/base_1jlqwtc.css} +1 -1
  28. package/cjs/components/Select/Select.css +5 -5
  29. package/cjs/components/Select/ui/Target/Target.css +5 -5
  30. package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +5 -5
  31. package/cjs/components/Slider/Slider.css +5 -5
  32. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +5 -5
  33. package/cjs/components/TextArea/TextArea.js +9 -7
  34. package/cjs/components/TextArea/TextArea.js.map +1 -1
  35. package/cjs/components/TextArea/TextArea.tokens.js +1 -0
  36. package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
  37. package/cjs/components/TextArea/ui/Hint/Hint.css +4 -4
  38. package/cjs/components/TextArea/variations/_read-only/base.js +9 -0
  39. package/cjs/components/TextArea/variations/_read-only/base.js.map +1 -0
  40. package/cjs/components/TextArea/variations/_read-only/base_vx1mwu.css +1 -0
  41. package/cjs/components/TextField/ui/Hint/Hint.css +4 -4
  42. package/cjs/components/TextField/variations/_read-only/base.js +1 -1
  43. package/cjs/components/TextField/variations/_read-only/base.js.map +1 -1
  44. package/{es/components/TextField/variations/_read-only/base_oizdmx.css → cjs/components/TextField/variations/_read-only/base_bvfe3o.css} +1 -1
  45. package/cjs/index.css +8 -6
  46. package/emotion/cjs/components/Popover/Popover.styles.js +4 -4
  47. package/emotion/cjs/components/Popover/Popover.tokens.js +0 -1
  48. package/emotion/cjs/components/Range/Range.styles.js +10 -10
  49. package/emotion/cjs/components/Range/Range.tokens.js +2 -0
  50. package/emotion/cjs/components/Range/variations/_readonly/base.js +1 -1
  51. package/emotion/cjs/components/TextArea/TextArea.js +10 -8
  52. package/emotion/cjs/components/TextArea/TextArea.tokens.js +1 -0
  53. package/emotion/cjs/components/TextArea/variations/_read-only/base.js +10 -0
  54. package/emotion/cjs/components/TextArea/variations/_read-only/tokens.json +1 -0
  55. package/emotion/cjs/components/TextField/variations/_read-only/base.js +1 -1
  56. package/emotion/cjs/components/_Icon/Icon.assets/Lock.js +26 -0
  57. package/emotion/cjs/components/_Icon/Icons/IconLock.js +24 -0
  58. package/emotion/cjs/components/_Icon/index.js +7 -0
  59. package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -1
  60. package/emotion/cjs/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
  61. package/emotion/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx +1 -3
  62. package/emotion/cjs/examples/plasma_b2c/components/Range/Range.config.js +7 -7
  63. package/emotion/cjs/examples/plasma_b2c/components/Range/Range.stories.tsx +1 -1
  64. package/emotion/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +16 -13
  65. package/emotion/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +71 -20
  66. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +22 -22
  67. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +92 -26
  68. package/emotion/cjs/examples/plasma_web/components/Popover/Popover.config.js +1 -1
  69. package/emotion/cjs/examples/plasma_web/components/Popover/Popover.stories.tsx +1 -3
  70. package/emotion/cjs/examples/plasma_web/components/Range/Range.config.js +7 -7
  71. package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +72 -20
  72. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +22 -22
  73. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +85 -25
  74. package/emotion/es/components/Popover/Popover.styles.js +4 -4
  75. package/emotion/es/components/Popover/Popover.tokens.js +0 -1
  76. package/emotion/es/components/Range/Range.styles.js +10 -10
  77. package/emotion/es/components/Range/Range.tokens.js +2 -0
  78. package/emotion/es/components/Range/variations/_readonly/base.js +1 -1
  79. package/emotion/es/components/TextArea/TextArea.js +6 -4
  80. package/emotion/es/components/TextArea/TextArea.tokens.js +1 -0
  81. package/emotion/es/components/TextArea/variations/_read-only/base.js +4 -0
  82. package/emotion/es/components/TextArea/variations/_read-only/tokens.json +1 -0
  83. package/emotion/es/components/TextField/variations/_read-only/base.js +2 -2
  84. package/emotion/es/components/_Icon/Icon.assets/Lock.js +19 -0
  85. package/emotion/es/components/_Icon/Icons/IconLock.js +17 -0
  86. package/emotion/es/components/_Icon/index.js +1 -0
  87. package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -1
  88. package/emotion/es/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
  89. package/emotion/es/examples/plasma_b2c/components/Popover/Popover.stories.tsx +1 -3
  90. package/emotion/es/examples/plasma_b2c/components/Range/Range.config.js +7 -7
  91. package/emotion/es/examples/plasma_b2c/components/Range/Range.stories.tsx +1 -1
  92. package/emotion/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +16 -13
  93. package/emotion/es/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +71 -20
  94. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +22 -22
  95. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +92 -26
  96. package/emotion/es/examples/plasma_web/components/Popover/Popover.config.js +1 -1
  97. package/emotion/es/examples/plasma_web/components/Popover/Popover.stories.tsx +1 -3
  98. package/emotion/es/examples/plasma_web/components/Range/Range.config.js +7 -7
  99. package/emotion/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +72 -20
  100. package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +22 -22
  101. package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +85 -25
  102. package/es/components/Autocomplete/Autocomplete.css +5 -5
  103. package/es/components/Combobox/ComboboxNew/Combobox.css +5 -5
  104. package/es/components/Combobox/ComboboxOld/Combobox.css +4 -4
  105. package/es/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +4 -4
  106. package/es/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +4 -4
  107. package/es/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +4 -4
  108. package/es/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +4 -4
  109. package/es/components/DatePicker/RangeDate/RangeDate.css +6 -6
  110. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +6 -6
  111. package/es/components/DatePicker/SingleDate/SingleDate.css +5 -5
  112. package/es/components/Dropdown/Dropdown.css +4 -4
  113. package/es/components/Dropdown/ui/DropdownOld/DropdownOld.css +4 -4
  114. package/es/components/Pagination/Pagination.css +5 -5
  115. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +5 -5
  116. package/es/components/Popover/Popover.css +4 -4
  117. package/es/components/Popover/Popover.styles.js +1 -1
  118. package/es/components/Popover/Popover.styles.js.map +1 -1
  119. package/es/components/Popover/Popover.styles_15l7isk.css +4 -0
  120. package/es/components/Popover/Popover.tokens.js +0 -1
  121. package/es/components/Popover/Popover.tokens.js.map +1 -1
  122. package/es/components/Range/Range.css +6 -6
  123. package/es/components/Range/Range.styles.js.map +1 -1
  124. package/es/components/Range/Range.tokens.js +2 -0
  125. package/es/components/Range/Range.tokens.js.map +1 -1
  126. package/es/components/Range/variations/_readonly/base.js +1 -1
  127. package/es/components/Range/variations/_readonly/base.js.map +1 -1
  128. package/{cjs/components/Range/variations/_readonly/base_8q1gx8.css → es/components/Range/variations/_readonly/base_1jlqwtc.css} +1 -1
  129. package/es/components/Select/Select.css +5 -5
  130. package/es/components/Select/ui/Target/Target.css +5 -5
  131. package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +5 -5
  132. package/es/components/Slider/Slider.css +5 -5
  133. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +5 -5
  134. package/es/components/TextArea/TextArea.js +9 -7
  135. package/es/components/TextArea/TextArea.js.map +1 -1
  136. package/es/components/TextArea/TextArea.tokens.js +1 -0
  137. package/es/components/TextArea/TextArea.tokens.js.map +1 -1
  138. package/es/components/TextArea/ui/Hint/Hint.css +4 -4
  139. package/es/components/TextArea/variations/_read-only/base.js +5 -0
  140. package/es/components/TextArea/variations/_read-only/base.js.map +1 -0
  141. package/es/components/TextArea/variations/_read-only/base_vx1mwu.css +1 -0
  142. package/es/components/TextField/ui/Hint/Hint.css +4 -4
  143. package/es/components/TextField/variations/_read-only/base.js +1 -1
  144. package/es/components/TextField/variations/_read-only/base.js.map +1 -1
  145. package/{cjs/components/TextField/variations/_read-only/base_oizdmx.css → es/components/TextField/variations/_read-only/base_bvfe3o.css} +1 -1
  146. package/es/index.css +8 -6
  147. package/package.json +2 -2
  148. package/styled-components/cjs/components/Popover/Popover.styles.js +3 -3
  149. package/styled-components/cjs/components/Popover/Popover.tokens.js +0 -1
  150. package/styled-components/cjs/components/Range/Range.tokens.js +2 -0
  151. package/styled-components/cjs/components/Range/variations/_readonly/base.js +1 -1
  152. package/styled-components/cjs/components/TextArea/TextArea.js +9 -7
  153. package/styled-components/cjs/components/TextArea/TextArea.tokens.js +1 -0
  154. package/styled-components/cjs/components/TextArea/variations/_read-only/base.js +10 -0
  155. package/styled-components/cjs/components/TextArea/variations/_read-only/tokens.json +1 -0
  156. package/styled-components/cjs/components/TextField/variations/_read-only/base.js +1 -1
  157. package/styled-components/cjs/components/_Icon/Icon.assets/Lock.js +26 -0
  158. package/styled-components/cjs/components/_Icon/Icons/IconLock.js +24 -0
  159. package/styled-components/cjs/components/_Icon/index.js +7 -0
  160. package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -1
  161. package/styled-components/cjs/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
  162. package/styled-components/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx +1 -3
  163. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.config.js +1 -1
  164. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.stories.tsx +1 -1
  165. package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +3 -0
  166. package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +71 -20
  167. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +7 -7
  168. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +92 -26
  169. package/styled-components/cjs/examples/plasma_web/components/Popover/Popover.config.js +1 -1
  170. package/styled-components/cjs/examples/plasma_web/components/Popover/Popover.stories.tsx +1 -3
  171. package/styled-components/cjs/examples/plasma_web/components/Range/Range.config.js +1 -1
  172. package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +72 -20
  173. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +7 -7
  174. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +85 -25
  175. package/styled-components/es/components/Popover/Popover.styles.js +3 -3
  176. package/styled-components/es/components/Popover/Popover.tokens.js +0 -1
  177. package/styled-components/es/components/Range/Range.tokens.js +2 -0
  178. package/styled-components/es/components/Range/variations/_readonly/base.js +1 -1
  179. package/styled-components/es/components/TextArea/TextArea.js +5 -3
  180. package/styled-components/es/components/TextArea/TextArea.tokens.js +1 -0
  181. package/styled-components/es/components/TextArea/variations/_read-only/base.js +4 -0
  182. package/styled-components/es/components/TextArea/variations/_read-only/tokens.json +1 -0
  183. package/styled-components/es/components/TextField/variations/_read-only/base.js +2 -2
  184. package/styled-components/es/components/_Icon/Icon.assets/Lock.js +19 -0
  185. package/styled-components/es/components/_Icon/Icons/IconLock.js +17 -0
  186. package/styled-components/es/components/_Icon/index.js +1 -0
  187. package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -1
  188. package/styled-components/es/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
  189. package/styled-components/es/examples/plasma_b2c/components/Popover/Popover.stories.tsx +1 -3
  190. package/styled-components/es/examples/plasma_b2c/components/Range/Range.config.js +1 -1
  191. package/styled-components/es/examples/plasma_b2c/components/Range/Range.stories.tsx +1 -1
  192. package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +3 -0
  193. package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +71 -20
  194. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +7 -7
  195. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +92 -26
  196. package/styled-components/es/examples/plasma_web/components/Popover/Popover.config.js +1 -1
  197. package/styled-components/es/examples/plasma_web/components/Popover/Popover.stories.tsx +1 -3
  198. package/styled-components/es/examples/plasma_web/components/Range/Range.config.js +1 -1
  199. package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +72 -20
  200. package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +7 -7
  201. package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +85 -25
  202. package/types/components/Popover/Popover.styles.d.ts.map +1 -1
  203. package/types/components/Popover/Popover.tokens.d.ts +0 -1
  204. package/types/components/Popover/Popover.tokens.d.ts.map +1 -1
  205. package/types/components/Range/Range.tokens.d.ts +2 -0
  206. package/types/components/Range/Range.tokens.d.ts.map +1 -1
  207. package/types/components/Range/variations/_readonly/base.d.ts.map +1 -1
  208. package/types/components/TextArea/TextArea.d.ts +3 -2
  209. package/types/components/TextArea/TextArea.d.ts.map +1 -1
  210. package/types/components/TextArea/TextArea.tokens.d.ts +1 -0
  211. package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
  212. package/types/components/TextArea/variations/_read-only/base.d.ts +2 -0
  213. package/types/components/TextArea/variations/_read-only/base.d.ts.map +1 -0
  214. package/types/components/TextField/variations/_read-only/base.d.ts.map +1 -1
  215. package/types/components/_Icon/Icon.assets/Lock.d.ts +4 -0
  216. package/types/components/_Icon/Icon.assets/Lock.d.ts.map +1 -0
  217. package/types/components/_Icon/Icons/IconLock.d.ts +4 -0
  218. package/types/components/_Icon/Icons/IconLock.d.ts.map +1 -0
  219. package/types/components/_Icon/index.d.ts +1 -0
  220. package/types/components/_Icon/index.d.ts.map +1 -1
  221. package/types/examples/plasma_b2c/components/Popover/Popover.config.d.ts.map +1 -1
  222. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts.map +1 -1
  223. package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts +3 -0
  224. package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts.map +1 -1
  225. package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts +3 -0
  226. package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts.map +1 -1
  227. package/types/examples/plasma_web/components/Popover/Popover.config.d.ts.map +1 -1
  228. package/types/examples/plasma_web/components/Range/Range.config.d.ts.map +1 -1
  229. package/cjs/components/Popover/Popover.styles_ji8em4.css +0 -4
  230. package/emotion/cjs/examples/plasma_b2c/components/Popover/style.css +0 -4
  231. package/emotion/cjs/examples/plasma_web/components/Popover/style.css +0 -4
  232. package/emotion/es/examples/plasma_b2c/components/Popover/style.css +0 -4
  233. package/emotion/es/examples/plasma_web/components/Popover/style.css +0 -4
  234. package/es/components/Popover/Popover.styles_ji8em4.css +0 -4
  235. package/styled-components/cjs/examples/plasma_b2c/components/Popover/style.css +0 -4
  236. package/styled-components/cjs/examples/plasma_web/components/Popover/style.css +0 -4
  237. package/styled-components/es/examples/plasma_b2c/components/Popover/style.css +0 -4
  238. package/styled-components/es/examples/plasma_web/components/Popover/style.css +0 -4
@@ -8,12 +8,14 @@ import { textAreaConfig } from '../../../../components/TextArea';
8
8
  import { mergeConfig } from '../../../../engines';
9
9
  import { WithTheme, argTypesFromConfig } from '../../../_helpers';
10
10
  import type { PopoverPlacement } from '../Popover/Popover';
11
+ import { IconLock } from '../../../../components/_Icon';
11
12
 
12
13
  import { config } from './TextArea.config';
13
14
  import { TextArea } from './TextArea';
14
15
 
15
16
  const labelPlacements = ['inner', 'outer'];
16
17
  const sizes = ['xs', 's', 'm', 'l'];
18
+ const views = ['default', 'positive', 'warning', 'negative'];
17
19
  const hintViews = ['default'];
18
20
  const hintSizes = ['m', 's'];
19
21
  const hintTriggers = ['hover', 'click'];
@@ -37,6 +39,16 @@ const placements: Array<PopoverPlacement> = [
37
39
  'auto',
38
40
  ];
39
41
 
42
+ const getIcon = (IconComponent: React.ReactElement, size: string, readOnly = false) => {
43
+ const iconSize = size === 'xs' ? 'xs' : 's';
44
+
45
+ if (readOnly) {
46
+ return <IconLock size={iconSize} color="var(--text-secondary)" style={{ opacity: 0.4 }} />;
47
+ }
48
+
49
+ return <IconComponent size={iconSize} color="inherit" />;
50
+ };
51
+
40
52
  type StoryTextAreaPropsCustom = {
41
53
  hasHint?: boolean;
42
54
  enableContentRight?: boolean;
@@ -60,19 +72,25 @@ const meta: Meta<StoryTextAreaProps> = {
60
72
  control: {
61
73
  type: 'boolean',
62
74
  },
63
- if: { arg: 'optional', truthy: false },
75
+ if: {
76
+ arg: 'optional',
77
+ truthy: false,
78
+ },
64
79
  },
65
80
  optional: {
66
81
  control: {
67
82
  type: 'boolean',
68
83
  },
69
- if: { arg: 'required', truthy: false },
84
+ if: {
85
+ arg: 'required',
86
+ truthy: false,
87
+ },
70
88
  },
71
89
  size: {
72
90
  options: sizes,
73
91
  defaultValue: 'm',
74
92
  control: {
75
- type: 'select',
93
+ type: 'inline-radio',
76
94
  },
77
95
  },
78
96
  view: {
@@ -91,19 +109,28 @@ const meta: Meta<StoryTextAreaProps> = {
91
109
  control: {
92
110
  type: 'boolean',
93
111
  },
94
- if: { arg: 'clear', truthy: true },
112
+ if: {
113
+ arg: 'clear',
114
+ truthy: true,
115
+ },
95
116
  },
96
117
  cols: {
97
118
  control: {
98
119
  type: 'number',
99
120
  },
100
- if: { arg: 'clear', truthy: false },
121
+ if: {
122
+ arg: 'clear',
123
+ truthy: false,
124
+ },
101
125
  },
102
126
  rows: {
103
127
  control: {
104
128
  type: 'number',
105
129
  },
106
- if: { arg: 'clear', truthy: false },
130
+ if: {
131
+ arg: 'clear',
132
+ truthy: false,
133
+ },
107
134
  },
108
135
  hasHint: {
109
136
  control: {
@@ -112,47 +139,65 @@ const meta: Meta<StoryTextAreaProps> = {
112
139
  },
113
140
  hintText: {
114
141
  control: { type: 'text' },
115
- if: { arg: 'hasHint', truthy: true },
142
+ if: {
143
+ arg: 'hasHint',
144
+ truthy: true,
145
+ },
116
146
  },
117
147
  hintView: {
118
148
  options: hintViews,
119
149
  control: {
120
150
  type: 'select',
121
151
  },
122
- if: { arg: 'hasHint', truthy: true },
152
+ if: {
153
+ arg: 'hasHint',
154
+ truthy: true,
155
+ },
123
156
  },
124
157
  hintSize: {
125
158
  options: hintSizes,
126
159
  control: {
127
160
  type: 'select',
128
161
  },
129
- if: { arg: 'hasHint', truthy: true },
162
+ if: {
163
+ arg: 'hasHint',
164
+ truthy: true,
165
+ },
130
166
  },
131
167
  hintTrigger: {
132
168
  options: hintTriggers,
133
169
  control: {
134
170
  type: 'inline-radio',
135
171
  },
136
- if: { arg: 'hasHint', truthy: true },
172
+ if: {
173
+ arg: 'hasHint',
174
+ truthy: true,
175
+ },
137
176
  },
138
177
  hintPlacement: {
139
178
  options: placements,
140
179
  control: {
141
180
  type: 'select',
142
181
  },
143
- if: { arg: 'hasHint', truthy: true },
182
+ if: {
183
+ arg: 'hasHint',
184
+ truthy: true,
185
+ },
144
186
  mappers: placements,
145
187
  },
146
188
  hintHasArrow: {
147
189
  control: { type: 'boolean' },
148
- if: { arg: 'hasHint', truthy: true },
190
+ if: {
191
+ arg: 'hasHint',
192
+ truthy: true,
193
+ },
149
194
  },
150
195
  hintWidth: {
151
196
  control: { type: 'text' },
152
- if: { arg: 'hasHint', truthy: true },
153
- },
154
- helperText: {
155
- control: { type: 'text' },
197
+ if: {
198
+ arg: 'hasHint',
199
+ truthy: true,
200
+ },
156
201
  },
157
202
  width: {
158
203
  control: { type: 'text' },
@@ -171,6 +216,7 @@ const meta: Meta<StoryTextAreaProps> = {
171
216
  },
172
217
  ...disableProps([
173
218
  'helperBlock',
219
+ 'helperText',
174
220
  '$isFocused',
175
221
  'contentRight',
176
222
  'autoComplete',
@@ -194,6 +240,7 @@ const meta: Meta<StoryTextAreaProps> = {
194
240
  'hintOffset',
195
241
  'hintContentLeft',
196
242
  'hintView',
243
+ 'hintOpened',
197
244
  ]),
198
245
  },
199
246
  args: {
@@ -237,19 +284,24 @@ const onBlur = action('onBlur');
237
284
  const StoryDefault = (props: StoryTextAreaProps) => {
238
285
  const [value, setValue] = useState('Значение поля');
239
286
 
240
- const iconSize = props.size === 'xs' ? 'xs' : 's';
241
-
242
287
  return (
243
288
  <TextArea
244
289
  value={value}
245
- contentRight={props.enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
290
+ contentRight={
291
+ props.enableContentRight || props.readOnly
292
+ ? getIcon(IconPlaceholder, props.size, props.readOnly)
293
+ : undefined
294
+ }
246
295
  onChange={(e) => {
247
296
  setValue(e.target.value);
248
297
  onChange(e);
249
298
  }}
250
299
  onFocus={onFocus}
251
300
  onBlur={onBlur}
252
- style={{ width: '70%', margin: '0 auto' }}
301
+ style={{
302
+ width: '70%',
303
+ margin: '0 auto',
304
+ }}
253
305
  {...props}
254
306
  />
255
307
  );
@@ -33,12 +33,12 @@ var config = exports.config = {
33
33
  "true": /*#__PURE__*/(0, _styledComponents.css)([""])
34
34
  },
35
35
  chipView: {
36
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
37
- secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
38
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
39
- positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
40
- warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
41
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly)
36
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
37
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
38
+ accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
39
+ positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
40
+ warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
41
+ negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly)
42
42
  },
43
43
  hintView: {
44
44
  "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-hard-m,0px 4px 12px 0px rgba(0,0,0,0.16),0px 1px 4px 0px rgba(0,0,0,0.08));", ":var(--text-primary);", ":var(--surface-solid-card);"], _TextField.textFieldTokens.tooltipBackgroundColor, _TextField.textFieldTokens.tooltipBoxShadow, _TextField.textFieldTokens.tooltipColor, _TextField.textFieldTokens.tooltipArrowBackground)
@@ -51,7 +51,7 @@ var config = exports.config = {
51
51
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _TextField.textFieldTokens.disabledOpacity)
52
52
  },
53
53
  readOnly: {
54
- "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.borderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _TextField.textFieldTokens.titleCaptionColorReadOnly, _TextField.textFieldTokens.labelColorReadOnly)
54
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);"], _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _TextField.textFieldTokens.titleCaptionColorReadOnly, _TextField.textFieldTokens.labelColorReadOnly, _TextField.textFieldTokens.dividerColorReadOnly)
55
55
  }
56
56
  }
57
57
  };
@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
4
4
  import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { WithTheme } from '../../../_helpers';
7
- import { IconCross } from '../../../../components/_Icon';
7
+ import { IconCross, IconLock } from '../../../../components/_Icon';
8
8
  import type { PopoverPlacement } from '../Popover/Popover';
9
9
 
10
10
  import { TextField } from './TextField';
@@ -43,6 +43,16 @@ const placements: Array<PopoverPlacement> = [
43
43
  'auto',
44
44
  ];
45
45
 
46
+ const getIcon = (IconComponent: React.ReactElement, size: string, readOnly = false) => {
47
+ const iconSize = size === 'xs' ? 'xs' : 's';
48
+
49
+ if (readOnly) {
50
+ return <IconLock size={iconSize} color="var(--text-secondary)" style={{ opacity: 0.4 }} />;
51
+ }
52
+
53
+ return <IconComponent size={iconSize} color="inherit" />;
54
+ };
55
+
46
56
  const meta: Meta<typeof TextField> = {
47
57
  title: 'web/Data Entry/TextField',
48
58
  component: TextField,
@@ -58,19 +68,28 @@ const meta: Meta<typeof TextField> = {
58
68
  control: {
59
69
  type: 'boolean',
60
70
  },
61
- if: { arg: 'optional', truthy: false },
71
+ if: {
72
+ arg: 'optional',
73
+ truthy: false,
74
+ },
62
75
  },
63
76
  optional: {
64
77
  control: {
65
78
  type: 'boolean',
66
79
  },
67
- if: { arg: 'required', truthy: false },
80
+ if: {
81
+ arg: 'required',
82
+ truthy: false,
83
+ },
68
84
  },
69
85
  hasDivider: {
70
86
  control: {
71
87
  type: 'boolean',
72
88
  },
73
- if: { arg: 'clear', truthy: true },
89
+ if: {
90
+ arg: 'clear',
91
+ truthy: true,
92
+ },
74
93
  },
75
94
  view: {
76
95
  options: views,
@@ -93,7 +112,10 @@ const meta: Meta<typeof TextField> = {
93
112
  control: {
94
113
  type: 'boolean',
95
114
  },
96
- if: { arg: 'labelPlacement', eq: 'inner' },
115
+ if: {
116
+ arg: 'labelPlacement',
117
+ eq: 'inner',
118
+ },
97
119
  },
98
120
  size: {
99
121
  options: sizes,
@@ -103,51 +125,75 @@ const meta: Meta<typeof TextField> = {
103
125
  },
104
126
  hintText: {
105
127
  control: { type: 'text' },
106
- if: { arg: 'hasHint', truthy: true },
128
+ if: {
129
+ arg: 'hasHint',
130
+ truthy: true,
131
+ },
107
132
  },
108
133
  hintView: {
109
134
  options: hintViews,
110
135
  control: {
111
136
  type: 'select',
112
137
  },
113
- if: { arg: 'hasHint', truthy: true },
138
+ if: {
139
+ arg: 'hasHint',
140
+ truthy: true,
141
+ },
114
142
  },
115
143
  hintSize: {
116
144
  options: hintSizes,
117
145
  control: {
118
146
  type: 'select',
119
147
  },
120
- if: { arg: 'hasHint', truthy: true },
148
+ if: {
149
+ arg: 'hasHint',
150
+ truthy: true,
151
+ },
121
152
  },
122
153
  hintTargetPlacement: {
123
154
  options: hintTargetPlacements,
124
155
  control: {
125
156
  type: 'inline-radio',
126
157
  },
127
- if: { arg: 'hasHint', truthy: true },
158
+ if: {
159
+ arg: 'hasHint',
160
+ truthy: true,
161
+ },
128
162
  },
129
163
  hintTrigger: {
130
164
  options: hintTriggers,
131
165
  control: {
132
166
  type: 'inline-radio',
133
167
  },
134
- if: { arg: 'hasHint', truthy: true },
168
+ if: {
169
+ arg: 'hasHint',
170
+ truthy: true,
171
+ },
135
172
  },
136
173
  hintPlacement: {
137
174
  options: placements,
138
175
  control: {
139
176
  type: 'select',
140
177
  },
141
- if: { arg: 'hasHint', truthy: true },
178
+ if: {
179
+ arg: 'hasHint',
180
+ truthy: true,
181
+ },
142
182
  mappers: placements,
143
183
  },
144
184
  hintHasArrow: {
145
185
  control: { type: 'boolean' },
146
- if: { arg: 'hasHint', truthy: true },
186
+ if: {
187
+ arg: 'hasHint',
188
+ truthy: true,
189
+ },
147
190
  },
148
191
  hintWidth: {
149
192
  control: { type: 'text' },
150
- if: { arg: 'hasHint', truthy: true },
193
+ if: {
194
+ arg: 'hasHint',
195
+ truthy: true,
196
+ },
151
197
  },
152
198
  chipType: {
153
199
  control: 'select',
@@ -183,19 +229,28 @@ type StoryPropsDefault = Omit<
183
229
  enableContentRight: boolean;
184
230
  };
185
231
 
186
- const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsDefault) => {
232
+ const StoryDemo = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsDefault) => {
187
233
  const [text, setText] = useState('Значение поля');
188
234
 
189
- const iconSize = rest.size === 'xs' ? 'xs' : 's';
235
+ const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
190
236
 
191
237
  return (
192
- <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '70%', margin: '0 auto' }}>
238
+ <div
239
+ style={{
240
+ display: 'flex',
241
+ flexDirection: 'column',
242
+ gap: '2rem',
243
+ width: '70%',
244
+ margin: '0 auto',
245
+ }}
246
+ >
193
247
  <TextField
194
248
  {...rest}
195
249
  enumerationType="plain"
196
250
  value={text}
197
- contentLeft={enableContentLeft ? <IconCross color="inherit" size={iconSize} /> : undefined}
198
- contentRight={enableContentRight ? <IconCross color="inherit" size={iconSize} /> : undefined}
251
+ readOnly={readOnly}
252
+ contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
253
+ contentRight={contentRight}
199
254
  view={view}
200
255
  onChange={(e) => {
201
256
  setText(e.target.value);
@@ -211,9 +266,10 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
211
266
  label="Uncontrolled TextField"
212
267
  defaultValue="Дефолтное значение"
213
268
  enumerationType="plain"
214
- contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
215
- contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
269
+ contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
270
+ contentRight={contentRight}
216
271
  view={view}
272
+ readOnly={readOnly}
217
273
  onFocus={onFocus}
218
274
  onBlur={onBlur}
219
275
  onSearch={onSearch}
@@ -285,10 +341,10 @@ type StoryPropsChips = Omit<
285
341
  enableContentRight: boolean;
286
342
  };
287
343
 
288
- const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsChips) => {
344
+ const StoryChips = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsChips) => {
289
345
  const [text, setText] = useState('Значение поля');
290
346
 
291
- const iconSize = rest.size === 'xs' ? 'xs' : 's';
347
+ const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
292
348
 
293
349
  const validateChip = (value) => (value === '1 value' ? { view: 'negative' } : {});
294
350
 
@@ -297,9 +353,10 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
297
353
  {...rest}
298
354
  enumerationType="chip"
299
355
  value={text}
300
- contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
301
- contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
356
+ contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
357
+ contentRight={contentRight}
302
358
  view={view}
359
+ readOnly={readOnly}
303
360
  onChange={(e) => {
304
361
  setText(e.target.value);
305
362
  onChange(e.target.value);
@@ -308,7 +365,10 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
308
365
  onBlur={onBlur}
309
366
  onChangeChips={onChipsChange}
310
367
  chipValidator={validateChip}
311
- style={{ width: '70%', margin: '0 auto' }}
368
+ style={{
369
+ width: '70%',
370
+ margin: '0 auto',
371
+ }}
312
372
  />
313
373
  );
314
374
  };
@@ -9,10 +9,10 @@ export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
9
9
  })(["display:inline-block;&.", "{position:absolute;top:0;left:0;width:100%;height:100%;", "{width:100%;height:100%;display:block;}}"], classes.targetAsRef, StyledRoot);
10
10
  export var StyledArrow = /*#__PURE__*/styled.div.withConfig({
11
11
  componentId: "plasma-new-hope__sc-tnpyex-2"
12
- })(["width:var(", ");height:var(", ");&::before{position:absolute;width:var(", ");height:var(", ");mask-image:var(", ");background:var(", ");content:'';transform:rotate(0deg);}"], tokens.arrowMaskWidth, tokens.arrowMaskHeight, tokens.arrowMaskWidth, tokens.arrowMaskHeight, tokens.arrowMaskImage, tokens.arrowBackground);
12
+ })(["width:var(", ");height:var(", ");&::before{position:absolute;width:var(", ");height:var(", ");mask-image:var(", ");background:var(", ");content:'';transform:rotate(0deg);}"], /*#__PURE__*/String(tokens.arrowMaskWidth), /*#__PURE__*/String(tokens.arrowMaskHeight), /*#__PURE__*/String(tokens.arrowMaskWidth), /*#__PURE__*/String(tokens.arrowMaskHeight), /*#__PURE__*/String(tokens.arrowMaskImage), /*#__PURE__*/String(tokens.arrowBackground));
13
13
  export var StyledPopover = /*#__PURE__*/styled.div.withConfig({
14
14
  componentId: "plasma-new-hope__sc-tnpyex-3"
15
- })(["position:absolute;z-index:", ";opacity:0;visibility:hidden;box-shadow:var(", ");&.", "{transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}&.", "{opacity:1;visibility:visible;}&:before{content:'';display:block;position:absolute;background:transparent;}&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .", ",&[data-popper-placement^='right-start'] > .", "{top:var(", ") !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .", ",&[data-popper-placement^='right-end'] > .", "{top:unset !important;bottom:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top'],&[data-popper-placement^='top-start'],&[data-popper-placement^='top-end']{&:before{top:unset;left:0;right:0;height:var(", ");bottom:calc(-1 * var(", "));}}&[data-popper-placement^='bottom'],&[data-popper-placement^='bottom-start'],&[data-popper-placement^='bottom-end']{&:before{top:calc(-1 * var(", "));left:0;right:0;bottom:var(", ");height:var(", ");}}&[data-popper-placement^='left'],&[data-popper-placement^='left-start'],&[data-popper-placement^='left-end']{&:before{width:var(", ");height:100%;top:0;right:calc(-1 * var(", "));bottom:0;}}&[data-popper-placement^='right'],&[data-popper-placement^='right-start'],&[data-popper-placement^='right-end']{&:before{width:var(", ");height:100%;top:0;left:calc(-1 * var(", "));bottom:0;}}"], function (_ref) {
15
+ })(["position:absolute;z-index:", ";opacity:0;visibility:hidden;&.", "{transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}&.", "{opacity:1;visibility:visible;}&:before{content:'';display:block;position:absolute;background:transparent;}&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .", ",&[data-popper-placement^='right-start'] > .", "{top:var(", ") !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .", ",&[data-popper-placement^='right-end'] > .", "{top:unset !important;bottom:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top'],&[data-popper-placement^='top-start'],&[data-popper-placement^='top-end']{&:before{top:unset;left:0;right:0;height:var(", ");bottom:calc(-1 * var(", "));}}&[data-popper-placement^='bottom'],&[data-popper-placement^='bottom-start'],&[data-popper-placement^='bottom-end']{&:before{top:calc(-1 * var(", "));left:0;right:0;bottom:var(", ");height:var(", ");}}&[data-popper-placement^='left'],&[data-popper-placement^='left-start'],&[data-popper-placement^='left-end']{&:before{width:var(", ");height:100%;top:0;right:calc(-1 * var(", "));bottom:0;}}&[data-popper-placement^='right'],&[data-popper-placement^='right-start'],&[data-popper-placement^='right-end']{&:before{width:var(", ");height:100%;top:0;left:calc(-1 * var(", "));bottom:0;}}"], function (_ref) {
16
16
  var zIndex = _ref.zIndex;
17
17
  return zIndex || DEFAULT_Z_INDEX;
18
- }, tokens.boxShadow, classes.animate, classes.open, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, classes.arrow, tokens.arrowEdgeMargin, classes.arrow, classes.arrow, tokens.arrowEdgeMargin, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight);
18
+ }, classes.animate, classes.open, classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, classes.arrow, /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, classes.arrow, /*#__PURE__*/String(tokens.arrowEdgeMargin), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight));
@@ -8,7 +8,6 @@ export var classes = {
8
8
  animate: 'popover-animate'
9
9
  };
10
10
  export var tokens = {
11
- boxShadow: '--plasma-popover-box-shadow',
12
11
  arrowMaskWidth: '--plasma-popover-arrow-mask-width',
13
12
  arrowMaskHeight: '--plasma-popover-arrow-mask-height',
14
13
  arrowMaskImage: '--plasma-popover-arrow-mask-image',
@@ -20,6 +20,7 @@ export var tokens = {
20
20
  /** Токены разделителя */
21
21
  dividerColor: '--plasma-range__divider-color',
22
22
  dividerColorReadOnly: '--plasma-range__divider-color-readonly',
23
+ dividerOpacityReadOnly: '--plasma-range__divider-opacity-readonly',
23
24
  dividerPadding: '--plasma-range__divider-padding',
24
25
  dividerFontFamily: '--plasma-range__divider-font-family',
25
26
  dividerFontStyle: '--plasma-range__divider-font-style',
@@ -30,6 +31,7 @@ export var tokens = {
30
31
  /** Токены слотов для контента */
31
32
  leftContentMargin: '--plasma-range__left-content-margin',
32
33
  rightContentMargin: '--plasma-range__right-content-margin',
34
+ rightContentOpacityReadOnly: '--plasma-range__right-content-opacity-readonly',
33
35
  /** Токены лейбла */
34
36
  labelColor: '--plasma-range__label-color',
35
37
  labelColorReadOnly: '--plasma-range__label-color-readonly',
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { tokens } from '../../Range.tokens';
3
3
  import { ContentWrapper, LeftHelper, StyledContentLeft, StyledContentRight, StyledDivider, StyledLabel } from '../../Range.styles';
4
- export var base = /*#__PURE__*/css(["&[readonly]{cursor:default;", "{background:var(", ");}", "{display:block;color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", ",", "{color:var(", ");}}"], ContentWrapper, tokens.backgroundReadOnly, StyledLabel, tokens.labelColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledDivider, tokens.dividerColorReadOnly, StyledContentLeft, StyledContentRight, tokens.textFieldColorReadOnly);
4
+ export var base = /*#__PURE__*/css(["&[readonly]{cursor:default;", "{background:var(", ");}", "{display:block;color:var(", ");}", "{color:var(", ");}", "{color:var(", ");opacity:var(", ");}", ",", "{color:var(", ");}", "{opacity:var(", ");}}"], ContentWrapper, tokens.backgroundReadOnly, StyledLabel, tokens.labelColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledDivider, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, StyledContentLeft, StyledContentRight, tokens.textFieldColorReadOnly, StyledContentRight, tokens.rightContentOpacityReadOnly);
@@ -30,6 +30,7 @@ import { classes } from './TextArea.tokens';
30
30
  import { base as viewCSS } from './variations/_view/base';
31
31
  import { base as sizeCSS } from './variations/_size/base';
32
32
  import { base as clearCSS } from './variations/_clear/base';
33
+ import { base as readOnlyCSS } from './variations/_read-only/base';
33
34
  import { base as disabledCSS } from './variations/_disabled/base';
34
35
  import { base as hintViewCSS } from './variations/_hint-view/base';
35
36
  import { base as hintSizeCSS } from './variations/_hint-size/base';
@@ -350,11 +351,12 @@ export var textAreaConfig = {
350
351
  css: clearCSS,
351
352
  attrs: true
352
353
  },
353
- disabled: {
354
- css: disabledCSS,
354
+ readOnly: {
355
+ css: readOnlyCSS,
355
356
  attrs: true
356
357
  },
357
- readOnly: {
358
+ disabled: {
359
+ css: disabledCSS,
358
360
  attrs: true
359
361
  },
360
362
  hintView: {
@@ -60,6 +60,7 @@ export var tokens = {
60
60
  /** Цвет текста для элемента textarea */
61
61
  inputColor: '--plasma-textarea-input-color',
62
62
  clearInputColor: '--plasma-textarea-input-clear-color',
63
+ inputColorReadOnly: '--plasma-textarea-input-color-read-only',
63
64
  /** Цвет текста для элемента textarea в состоянии focus */
64
65
  inputColorFocus: '--plasma-textarea-input-color-focus',
65
66
  /** Цвет каретки для элемента textarea */
@@ -0,0 +1,4 @@
1
+ import { css } from 'styled-components';
2
+ import { StyledTextArea } from '../../TextArea.styles';
3
+ import { tokens } from '../../TextArea.tokens';
4
+ export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");}}"], StyledTextArea, tokens.inputColorReadOnly);
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { classes, tokens } from '../../TextField.tokens';
3
- import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper, TitleCaption } from '../../TextField.styles';
4
- export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", " ", "{&:before{background-color:var(", ");}}", ":hover{background-color:var(", ");}", ":focus-within ", ",", "{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}", "{color:var(", ");}&.", " ", "{color:var(", ");}}"], InputWrapper, tokens.colorReadOnly, /*#__PURE__*/String(tokens.backgroundColorReadOnly), /*#__PURE__*/String(tokens.borderWidth), /*#__PURE__*/String(tokens.borderColorReadOnly), classes.hasDivider, InputWrapper, /*#__PURE__*/String(tokens.dividerColorReadOnly), InputWrapper, tokens.backgroundColorReadOnly, InputWrapper, InputPlaceholder, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, TitleCaption, tokens.titleCaptionColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, classes.outerLabelPlacement, Label, tokens.labelColorReadOnly);
3
+ import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper, StyledContentRight, TitleCaption } from '../../TextField.styles';
4
+ export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", " ", "{&:before{background-color:var(", ");}}", ":hover{background-color:var(", ");}", ":focus-within ", ",", "{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}", "{color:var(", ");}", ":hover,", ":active{cursor:default;color:var(", ",var(", "));}&.", " ", "{color:var(", ");}}"], InputWrapper, tokens.colorReadOnly, /*#__PURE__*/String(tokens.backgroundColorReadOnly), /*#__PURE__*/String(tokens.borderWidth), /*#__PURE__*/String(tokens.borderColorReadOnly), classes.hasDivider, InputWrapper, /*#__PURE__*/String(tokens.dividerColorReadOnly), InputWrapper, tokens.backgroundColorReadOnly, InputWrapper, InputPlaceholder, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, TitleCaption, tokens.titleCaptionColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledContentRight, StyledContentRight, tokens.contentSlotRightColor, tokens.contentSlotColor, classes.outerLabelPlacement, Label, tokens.labelColorReadOnly);