@salutejs/plasma-new-hope 0.170.0-canary.1484.11388945571.0 → 0.170.0-canary.1488.11387414081.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (130) hide show
  1. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -19
  2. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
  3. package/cjs/components/ViewContainer/ViewContainer.js +38 -0
  4. package/cjs/components/ViewContainer/ViewContainer.js.map +1 -0
  5. package/cjs/components/ViewContainer/ViewContainer_yiqfcb.css +1 -0
  6. package/cjs/components/ViewContainer/_view/base.js +9 -0
  7. package/cjs/components/ViewContainer/_view/base.js.map +1 -0
  8. package/cjs/components/ViewContainer/_view/base_x642ct.css +1 -0
  9. package/cjs/index.css +2 -0
  10. package/cjs/index.js +3 -0
  11. package/cjs/index.js.map +1 -1
  12. package/emotion/cjs/components/Accordion/Accordion.template-doc.mdx +0 -32
  13. package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -19
  14. package/emotion/cjs/components/ViewContainer/ViewContainer.js +49 -0
  15. package/emotion/cjs/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
  16. package/emotion/cjs/components/ViewContainer/_view/base.js +8 -0
  17. package/emotion/cjs/components/ViewContainer/_view/tokens.json +1 -0
  18. package/emotion/cjs/components/ViewContainer/index.js +18 -0
  19. package/emotion/cjs/examples/_helpers.js +3 -14
  20. package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
  21. package/emotion/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +16 -0
  22. package/emotion/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +11 -0
  23. package/emotion/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  24. package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
  25. package/emotion/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +16 -0
  26. package/emotion/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.js +11 -0
  27. package/emotion/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  28. package/emotion/cjs/index.js +11 -0
  29. package/emotion/es/components/Accordion/Accordion.template-doc.mdx +0 -32
  30. package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.js +14 -20
  31. package/emotion/es/components/ViewContainer/ViewContainer.js +40 -0
  32. package/emotion/es/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
  33. package/emotion/es/components/ViewContainer/_view/base.js +2 -0
  34. package/emotion/es/components/ViewContainer/_view/tokens.json +1 -0
  35. package/emotion/es/components/ViewContainer/index.js +1 -0
  36. package/emotion/es/examples/_helpers.js +3 -14
  37. package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
  38. package/emotion/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +10 -0
  39. package/emotion/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +5 -0
  40. package/emotion/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  41. package/emotion/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
  42. package/emotion/es/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +10 -0
  43. package/emotion/es/examples/plasma_web/components/ViewContainer/ViewContainer.js +5 -0
  44. package/emotion/es/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  45. package/emotion/es/index.js +2 -1
  46. package/es/components/Accordion/ui/AccordionItem/AccordionItem.js +14 -20
  47. package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
  48. package/es/components/ViewContainer/ViewContainer.js +33 -0
  49. package/es/components/ViewContainer/ViewContainer.js.map +1 -0
  50. package/es/components/ViewContainer/ViewContainer_yiqfcb.css +1 -0
  51. package/es/components/ViewContainer/_view/base.js +5 -0
  52. package/es/components/ViewContainer/_view/base.js.map +1 -0
  53. package/es/components/ViewContainer/_view/base_x642ct.css +1 -0
  54. package/es/index.css +2 -0
  55. package/es/index.js +1 -0
  56. package/es/index.js.map +1 -1
  57. package/package.json +3 -2
  58. package/styled-components/cjs/components/Accordion/Accordion.template-doc.mdx +0 -32
  59. package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -19
  60. package/styled-components/cjs/components/ViewContainer/ViewContainer.js +40 -0
  61. package/styled-components/cjs/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
  62. package/styled-components/cjs/components/ViewContainer/_view/base.js +8 -0
  63. package/styled-components/cjs/components/ViewContainer/_view/tokens.json +1 -0
  64. package/styled-components/cjs/components/ViewContainer/index.js +18 -0
  65. package/styled-components/cjs/examples/_helpers.js +3 -14
  66. package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
  67. package/styled-components/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +16 -0
  68. package/styled-components/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +11 -0
  69. package/styled-components/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  70. package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
  71. package/styled-components/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +16 -0
  72. package/styled-components/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.js +11 -0
  73. package/styled-components/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  74. package/styled-components/cjs/index.js +11 -0
  75. package/styled-components/es/components/Accordion/Accordion.template-doc.mdx +0 -32
  76. package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js +14 -20
  77. package/styled-components/es/components/ViewContainer/ViewContainer.js +31 -0
  78. package/styled-components/es/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
  79. package/styled-components/es/components/ViewContainer/_view/base.js +2 -0
  80. package/styled-components/es/components/ViewContainer/_view/tokens.json +1 -0
  81. package/styled-components/es/components/ViewContainer/index.js +1 -0
  82. package/styled-components/es/examples/_helpers.js +3 -14
  83. package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
  84. package/styled-components/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +10 -0
  85. package/styled-components/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +5 -0
  86. package/styled-components/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  87. package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
  88. package/styled-components/es/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +10 -0
  89. package/styled-components/es/examples/plasma_web/components/ViewContainer/ViewContainer.js +5 -0
  90. package/styled-components/es/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
  91. package/styled-components/es/index.js +2 -1
  92. package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts +2 -17
  93. package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts.map +1 -1
  94. package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts +8 -16
  95. package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts.map +1 -1
  96. package/types/components/ViewContainer/ViewContainer.d.ts +26 -0
  97. package/types/components/ViewContainer/ViewContainer.d.ts.map +1 -0
  98. package/types/components/ViewContainer/_view/base.d.ts +2 -0
  99. package/types/components/ViewContainer/_view/base.d.ts.map +1 -0
  100. package/types/components/ViewContainer/index.d.ts +2 -0
  101. package/types/components/ViewContainer/index.d.ts.map +1 -0
  102. package/types/examples/_helpers.d.ts.map +1 -1
  103. package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.d.ts +9 -0
  104. package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.d.ts.map +1 -0
  105. package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.d.ts +8 -0
  106. package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.d.ts.map +1 -0
  107. package/types/examples/plasma_web/components/ViewContainer/ViewContainer.config.d.ts +9 -0
  108. package/types/examples/plasma_web/components/ViewContainer/ViewContainer.config.d.ts.map +1 -0
  109. package/types/examples/plasma_web/components/ViewContainer/ViewContainer.d.ts +8 -0
  110. package/types/examples/plasma_web/components/ViewContainer/ViewContainer.d.ts.map +1 -0
  111. package/types/index.d.ts +1 -0
  112. package/types/index.d.ts.map +1 -1
  113. package/emotion/cjs/examples/themes/declaration.d.ts +0 -4
  114. package/emotion/cjs/examples/themes/index.js +0 -15
  115. package/emotion/cjs/examples/themes/plasma_b2c.module.css +0 -984
  116. package/emotion/cjs/examples/themes/plasma_web.module.css +0 -984
  117. package/emotion/es/examples/themes/declaration.d.ts +0 -4
  118. package/emotion/es/examples/themes/index.js +0 -7
  119. package/emotion/es/examples/themes/plasma_b2c.module.css +0 -984
  120. package/emotion/es/examples/themes/plasma_web.module.css +0 -984
  121. package/styled-components/cjs/examples/themes/declaration.d.ts +0 -4
  122. package/styled-components/cjs/examples/themes/index.js +0 -15
  123. package/styled-components/cjs/examples/themes/plasma_b2c.module.css +0 -984
  124. package/styled-components/cjs/examples/themes/plasma_web.module.css +0 -984
  125. package/styled-components/es/examples/themes/declaration.d.ts +0 -4
  126. package/styled-components/es/examples/themes/index.js +0 -7
  127. package/styled-components/es/examples/themes/plasma_b2c.module.css +0 -984
  128. package/styled-components/es/examples/themes/plasma_web.module.css +0 -984
  129. package/types/examples/themes/index.d.ts +0 -6
  130. package/types/examples/themes/index.d.ts.map +0 -1
@@ -6,20 +6,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
6
6
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
7
7
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
8
8
  import React from 'react';
9
- import { themes } from './themes';
10
- export var WithTheme = function WithTheme(Story, context) {
11
- var _themes$themeName;
12
- var themeType = context.globals.theme;
13
- var themeName = context.title.split('/')[0];
14
- return /*#__PURE__*/React.createElement("div", {
15
- id: "theme-root",
16
- className: themes === null || themes === void 0 || (_themes$themeName = themes[themeName]) === null || _themes$themeName === void 0 ? void 0 : _themes$themeName[themeType],
17
- style: {
18
- padding: '1rem',
19
- minHeight: '100vh',
20
- boxSizing: 'border-box'
21
- }
22
- }, /*#__PURE__*/React.createElement(Story, null));
9
+ // TODO: Удалить в отдельном пр из всех компонент
10
+ export var WithTheme = function WithTheme(Story) {
11
+ return /*#__PURE__*/React.createElement(Story, null);
23
12
  };
24
13
  export function argTypesFromConfig(config) {
25
14
  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -1,4 +1,4 @@
1
- import React, { useState } from 'react';
1
+ import React from 'react';
2
2
  import type { ComponentProps, ReactNode } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,8 +7,6 @@ import { mergeConfig } from '../../../../engines';
7
7
  import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
8
  import { accordionConfig } from '../../../../components/Accordion';
9
9
  import { Pin } from '../../../../utils/roundness';
10
- import { IconButton } from '../IconButton/IconButton';
11
- import { IconPlus } from '../../../../components/_Icon';
12
10
 
13
11
  import { config } from './Accordion.config';
14
12
  import { Accordion, AccordionItem } from './Accordion';
@@ -93,63 +91,3 @@ export const Default: StoryObj<AccordionProps> = {
93
91
  );
94
92
  },
95
93
  };
96
-
97
- const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
98
-
99
- const ControlledAccordion = (props: AccordionProps) => {
100
- const args = { ...props, text: undefined };
101
- const [activeFirst, setActiveFirst] = useState(false);
102
- const [activeSecond, setActiveSecond] = useState(false);
103
- const [activeThree, setActiveThree] = useState(false);
104
-
105
- return (
106
- <Accordion {...args}>
107
- <AccordionItem
108
- contentRight={
109
- <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
110
- <IconPlus size={getSizeForIcon(args.size)} />
111
- </IconButton>
112
- }
113
- alignWithTitle={args.alignWithTitle}
114
- type={args.type}
115
- pin={args.pin}
116
- title={args.title}
117
- opened={activeFirst}
118
- >
119
- {args.body}
120
- </AccordionItem>
121
- <AccordionItem
122
- contentRight={
123
- <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
124
- <IconPlus size={getSizeForIcon(args.size)} />
125
- </IconButton>
126
- }
127
- alignWithTitle={args.alignWithTitle}
128
- type={args.type}
129
- pin={args.pin}
130
- title={args.title}
131
- opened={activeSecond}
132
- >
133
- {args.body}
134
- </AccordionItem>
135
- <AccordionItem
136
- contentRight={
137
- <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
138
- <IconPlus size={getSizeForIcon(args.size)} />
139
- </IconButton>
140
- }
141
- alignWithTitle={args.alignWithTitle}
142
- type={args.type}
143
- pin={args.pin}
144
- title={args.title}
145
- opened={activeThree}
146
- >
147
- {args.body}
148
- </AccordionItem>
149
- </Accordion>
150
- );
151
- };
152
-
153
- export const Controlled: StoryObj<AccordionProps> = {
154
- render: (props: AccordionProps) => ControlledAccordion(props),
155
- };
@@ -0,0 +1,10 @@
1
+ import { css } from '@emotion/react';
2
+ import { viewContainer } from '@salutejs/plasma-themes/tokens/plasma_b2c';
3
+ export var config = {
4
+ variations: {
5
+ view: {
6
+ onDark: /*#__PURE__*/css(viewContainer.dark, ";;label:plasma-new-hope__onDark;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9WaWV3Q29udGFpbmVyL1ZpZXdDb250YWluZXIuY29uZmlnLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU11QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfYjJjL2NvbXBvbmVudHMvVmlld0NvbnRhaW5lci9WaWV3Q29udGFpbmVyLmNvbmZpZy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHZpZXdDb250YWluZXIgfSBmcm9tICdAc2FsdXRlanMvcGxhc21hLXRoZW1lcy90b2tlbnMvcGxhc21hX2IyYyc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBvbkRhcms6IGNzc2BcbiAgICAgICAgICAgICAgICAke3ZpZXdDb250YWluZXIuZGFya31cbiAgICAgICAgICAgIGAsXG4gICAgICAgICAgICBvbkxpZ2h0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHt2aWV3Q29udGFpbmVyLmxpZ2h0fVxuICAgICAgICAgICAgYCxcbiAgICAgICAgfSxcbiAgICB9LFxufTtcbiJdfQ== */")),
7
+ onLight: /*#__PURE__*/css(viewContainer.light, ";;label:plasma-new-hope__onLight;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9WaWV3Q29udGFpbmVyL1ZpZXdDb250YWluZXIuY29uZmlnLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVN3QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfYjJjL2NvbXBvbmVudHMvVmlld0NvbnRhaW5lci9WaWV3Q29udGFpbmVyLmNvbmZpZy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHZpZXdDb250YWluZXIgfSBmcm9tICdAc2FsdXRlanMvcGxhc21hLXRoZW1lcy90b2tlbnMvcGxhc21hX2IyYyc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBvbkRhcms6IGNzc2BcbiAgICAgICAgICAgICAgICAke3ZpZXdDb250YWluZXIuZGFya31cbiAgICAgICAgICAgIGAsXG4gICAgICAgICAgICBvbkxpZ2h0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHt2aWV3Q29udGFpbmVyLmxpZ2h0fVxuICAgICAgICAgICAgYCxcbiAgICAgICAgfSxcbiAgICB9LFxufTtcbiJdfQ== */"))
8
+ }
9
+ }
10
+ };
@@ -0,0 +1,5 @@
1
+ import { viewContainerConfig } from '../../../../components/ViewContainer';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ import { config } from './ViewContainer.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(viewContainerConfig, config);
5
+ export var ViewContainer = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,65 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+
4
+ import { Button } from '../Button/Button';
5
+ import { TextField } from '../Textfield/Textfield';
6
+ import { Checkbox } from '../Checkbox/Checkbox';
7
+
8
+ import { ViewContainer } from './ViewContainer';
9
+
10
+ type StoryViewProps = ComponentProps<typeof ViewContainer>;
11
+
12
+ const meta: Meta<StoryViewProps> = {
13
+ title: 'plasma_b2c/ViewContainer',
14
+ };
15
+
16
+ export default meta;
17
+
18
+ type Story = StoryObj<StoryViewProps>;
19
+
20
+ const ViewExample = ({ view }: StoryViewProps) => {
21
+ const style = view
22
+ ? {
23
+ background: view === 'onDark' ? '#1a1a1a' : '#ededed',
24
+ color: view === 'onDark' ? 'white' : 'black',
25
+ }
26
+ : undefined;
27
+
28
+ return (
29
+ <>
30
+ <h4>view: {view ?? 'default'}</h4>
31
+ <div>
32
+ <ViewContainer
33
+ view={view}
34
+ style={{
35
+ ...style,
36
+ padding: '1rem',
37
+ borderRadius: '1rem',
38
+ display: 'flex',
39
+ flexDirection: 'column',
40
+ gap: '1rem',
41
+ }}
42
+ >
43
+ <h3 style={{ margin: 0 }}>Inside ViewContainer</h3>
44
+ <Button text="default Button" />
45
+ <Checkbox checked label="Label" />
46
+ <TextField value="Example Value" label="Label" labelPlacement="inner" />
47
+ </ViewContainer>
48
+ </div>
49
+ </>
50
+ );
51
+ };
52
+
53
+ export const Default: Story = {
54
+ render: () => {
55
+ return (
56
+ <>
57
+ <ViewExample />
58
+ <br />
59
+ <ViewExample view="onDark" />
60
+ <br />
61
+ <ViewExample view="onLight" />
62
+ </>
63
+ );
64
+ },
65
+ };
@@ -1,4 +1,4 @@
1
- import React, { useState } from 'react';
1
+ import React from 'react';
2
2
  import type { ComponentProps, ReactNode } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,8 +7,6 @@ import { mergeConfig } from '../../../../engines';
7
7
  import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
8
  import { accordionConfig } from '../../../../components/Accordion';
9
9
  import { Pin } from '../../../../utils/roundness';
10
- import { IconButton } from '../IconButton/IconButton';
11
- import { IconPlus } from '../../../../components/_Icon';
12
10
 
13
11
  import { config } from './Accordion.config';
14
12
  import { Accordion, AccordionItem } from './Accordion';
@@ -93,63 +91,3 @@ export const Default: StoryObj<AccordionProps> = {
93
91
  );
94
92
  },
95
93
  };
96
-
97
- const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
98
-
99
- const ControlledAccordion = (props: AccordionProps) => {
100
- const args = { ...props, text: undefined };
101
- const [activeFirst, setActiveFirst] = useState(false);
102
- const [activeSecond, setActiveSecond] = useState(false);
103
- const [activeThree, setActiveThree] = useState(false);
104
-
105
- return (
106
- <Accordion {...args}>
107
- <AccordionItem
108
- contentRight={
109
- <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
110
- <IconPlus size={getSizeForIcon(args.size)} />
111
- </IconButton>
112
- }
113
- alignWithTitle={args.alignWithTitle}
114
- type={args.type}
115
- pin={args.pin}
116
- title={args.title}
117
- opened={activeFirst}
118
- >
119
- {args.body}
120
- </AccordionItem>
121
- <AccordionItem
122
- contentRight={
123
- <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
124
- <IconPlus size={getSizeForIcon(args.size)} />
125
- </IconButton>
126
- }
127
- alignWithTitle={args.alignWithTitle}
128
- type={args.type}
129
- pin={args.pin}
130
- title={args.title}
131
- opened={activeSecond}
132
- >
133
- {args.body}
134
- </AccordionItem>
135
- <AccordionItem
136
- contentRight={
137
- <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
138
- <IconPlus size={getSizeForIcon(args.size)} />
139
- </IconButton>
140
- }
141
- alignWithTitle={args.alignWithTitle}
142
- type={args.type}
143
- pin={args.pin}
144
- title={args.title}
145
- opened={activeThree}
146
- >
147
- {args.body}
148
- </AccordionItem>
149
- </Accordion>
150
- );
151
- };
152
-
153
- export const Controlled: StoryObj<AccordionProps> = {
154
- render: (props: AccordionProps) => ControlledAccordion(props),
155
- };
@@ -0,0 +1,10 @@
1
+ import { css } from '@emotion/react';
2
+ import { viewContainer } from '@salutejs/plasma-themes/tokens/plasma_b2c';
3
+ export var config = {
4
+ variations: {
5
+ view: {
6
+ onDark: /*#__PURE__*/css(viewContainer.dark, ";;label:plasma-new-hope__onDark;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9WaWV3Q29udGFpbmVyL1ZpZXdDb250YWluZXIuY29uZmlnLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU11QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfd2ViL2NvbXBvbmVudHMvVmlld0NvbnRhaW5lci9WaWV3Q29udGFpbmVyLmNvbmZpZy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHZpZXdDb250YWluZXIgfSBmcm9tICdAc2FsdXRlanMvcGxhc21hLXRoZW1lcy90b2tlbnMvcGxhc21hX2IyYyc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBvbkRhcms6IGNzc2BcbiAgICAgICAgICAgICAgICAke3ZpZXdDb250YWluZXIuZGFya31cbiAgICAgICAgICAgIGAsXG4gICAgICAgICAgICBvbkxpZ2h0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHt2aWV3Q29udGFpbmVyLmxpZ2h0fVxuICAgICAgICAgICAgYCxcbiAgICAgICAgfSxcbiAgICB9LFxufTtcbiJdfQ== */")),
7
+ onLight: /*#__PURE__*/css(viewContainer.light, ";;label:plasma-new-hope__onLight;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9WaWV3Q29udGFpbmVyL1ZpZXdDb250YWluZXIuY29uZmlnLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVN3QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfd2ViL2NvbXBvbmVudHMvVmlld0NvbnRhaW5lci9WaWV3Q29udGFpbmVyLmNvbmZpZy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHZpZXdDb250YWluZXIgfSBmcm9tICdAc2FsdXRlanMvcGxhc21hLXRoZW1lcy90b2tlbnMvcGxhc21hX2IyYyc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBvbkRhcms6IGNzc2BcbiAgICAgICAgICAgICAgICAke3ZpZXdDb250YWluZXIuZGFya31cbiAgICAgICAgICAgIGAsXG4gICAgICAgICAgICBvbkxpZ2h0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHt2aWV3Q29udGFpbmVyLmxpZ2h0fVxuICAgICAgICAgICAgYCxcbiAgICAgICAgfSxcbiAgICB9LFxufTtcbiJdfQ== */"))
8
+ }
9
+ }
10
+ };
@@ -0,0 +1,5 @@
1
+ import { viewContainerConfig } from '../../../../components/ViewContainer';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ import { config } from './ViewContainer.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(viewContainerConfig, config);
5
+ export var ViewContainer = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,65 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+
4
+ import { Button } from '../Button/Button';
5
+ import { TextField } from '../Textfield/Textfield';
6
+ import { Checkbox } from '../Checkbox/Checkbox';
7
+
8
+ import { ViewContainer } from './ViewContainer';
9
+
10
+ type StoryViewProps = ComponentProps<typeof ViewContainer>;
11
+
12
+ const meta: Meta<StoryViewProps> = {
13
+ title: 'plasma_web/ViewContainer',
14
+ };
15
+
16
+ export default meta;
17
+
18
+ type Story = StoryObj<StoryViewProps>;
19
+
20
+ const ViewExample = ({ view }: StoryViewProps) => {
21
+ const style = view
22
+ ? {
23
+ background: view === 'onDark' ? '#1a1a1a' : '#ededed',
24
+ color: view === 'onDark' ? 'white' : 'black',
25
+ }
26
+ : undefined;
27
+
28
+ return (
29
+ <>
30
+ <h4>view: {view ?? 'default'}</h4>
31
+ <div>
32
+ <ViewContainer
33
+ view={view}
34
+ style={{
35
+ ...style,
36
+ padding: '1rem',
37
+ borderRadius: '1rem',
38
+ display: 'flex',
39
+ flexDirection: 'column',
40
+ gap: '1rem',
41
+ }}
42
+ >
43
+ <h3 style={{ margin: 0 }}>Inside ViewContainer</h3>
44
+ <Button text="default Button" />
45
+ <Checkbox checked label="Label" />
46
+ <TextField value="Example Value" label="Label" labelPlacement="inner" />
47
+ </ViewContainer>
48
+ </div>
49
+ </>
50
+ );
51
+ };
52
+
53
+ export const Default: Story = {
54
+ render: () => {
55
+ return (
56
+ <>
57
+ <ViewExample />
58
+ <br />
59
+ <ViewExample view="onDark" />
60
+ <br />
61
+ <ViewExample view="onLight" />
62
+ </>
63
+ );
64
+ },
65
+ };
@@ -60,4 +60,5 @@ export * from './components/Autocomplete';
60
60
  export * from './components/EmptyState';
61
61
  export * from './components/Editable';
62
62
  export * from './components/Mask';
63
- export * from './components/Attach';
63
+ export * from './components/Attach';
64
+ export * from './components/ViewContainer';
@@ -1,12 +1,12 @@
1
1
  import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
2
- import React, { forwardRef, useState, useRef, useEffect } from 'react';
2
+ import React, { useState, useRef, useEffect } from 'react';
3
3
  import { convertRoundnessMatrix } from '../../../../utils/roundness.js';
4
4
  import { classes, tokens } from '../../Accordion.tokens.js';
5
5
  import { cx } from '../../../../utils/index.js';
6
6
  import { StyledAccordionItem, StyledAccordionHeader, StyledAccordionHeaderLeft, StyledAccordionContentLeft, StyledAccordionTitle, StyledAccordionContentRight, StyledAccordionBodyAnimate, StyledAccordionBody, StyledArrow, StyledPlus, StyledMinus } from './AccordionItem.styles.js';
7
7
 
8
8
  var _StyledMinus, _StyledArrow;
9
- var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
9
+ var AccordionItem = function AccordionItem(_ref) {
10
10
  var _ref2;
11
11
  var value = _ref.value,
12
12
  contentRight = _ref.contentRight,
@@ -24,10 +24,8 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
24
24
  disabled = _ref.disabled,
25
25
  _ref$alignWithTitle = _ref.alignWithTitle,
26
26
  alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
27
- opened = _ref.opened,
28
27
  view = _ref.view,
29
- onChange = _ref.onChange,
30
- onClick = _ref.onClick;
28
+ onChange = _ref.onChange;
31
29
  var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index) !== null && _ref2 !== void 0 ? _ref2 : 0;
32
30
  var _useState = useState(),
33
31
  _useState2 = _slicedToArray(_useState, 2),
@@ -40,9 +38,6 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
40
38
  if (onChange) {
41
39
  onChange(key, !value);
42
40
  }
43
- if (onClick) {
44
- onClick(key, !value);
45
- }
46
41
  };
47
42
  var leftContentRef = useRef(null);
48
43
  useEffect(function () {
@@ -51,11 +46,11 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
51
46
  var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(tokens.accordionItemGap, "))") : 0;
52
47
  setLeftPadding(leftPaddingBody);
53
48
  }, [value, type, leftContentRef, setLeftPadding]);
54
- var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
55
- var StyledAnimationPlus = function StyledAnimationPlus() {
49
+ var openedBodyClass = value ? classes.accordionItemShowBody : undefined;
50
+ var StyledAnimationPLus = function StyledAnimationPLus() {
56
51
  return /*#__PURE__*/React.createElement(StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(StyledMinus, {
57
52
  size: "xs",
58
- color: "inherit"
53
+ color: "inhert"
59
54
  })), /*#__PURE__*/React.createElement(StyledMinus, {
60
55
  size: "xs",
61
56
  color: "inhert",
@@ -66,15 +61,14 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
66
61
  var disabledClass = disabled ? classes.accordionDisabled : '';
67
62
  var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/React.createElement(StyledArrow, {
68
63
  size: "xs",
69
- color: "inherit"
64
+ color: "inhert"
70
65
  })) : undefined;
71
- var leftContentRotate = type === 'arrow' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
72
- var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPlus, null) : undefined;
73
- var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
66
+ var leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;
67
+ var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
68
+ var rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;
74
69
  return /*#__PURE__*/React.createElement(StyledAccordionItem, {
75
70
  className: cx(classes.accordionItem, className, disabledClass),
76
71
  key: key,
77
- ref: outerRef,
78
72
  style: _objectSpread2({
79
73
  borderRadius: accordionBorderRadius
80
74
  }, style)
@@ -82,17 +76,17 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
82
76
  role: "tab",
83
77
  tabIndex: 0,
84
78
  onClick: handleOpen,
85
- "aria-expanded": opened !== null && opened !== void 0 ? opened : value,
79
+ "aria-expanded": value,
86
80
  "aria-controls": "accordion-item-section".concat(key),
87
81
  id: "accordion-item-".concat(key)
88
82
  }, /*#__PURE__*/React.createElement(StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(StyledAccordionContentLeft, {
89
83
  ref: leftContentRef,
90
84
  className: leftContentRotate
91
- }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), contentRight || /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
85
+ }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
92
86
  className: rightContentRotate
93
87
  }, rightContent && rightContent)), /*#__PURE__*/React.createElement(StyledAccordionBodyAnimate, {
94
88
  "aria-labelledby": "accordion-item-".concat(key),
95
- "aria-hidden": !(opened !== null && opened !== void 0 ? opened : value),
89
+ "aria-hidden": !value,
96
90
  id: "accordion-item-section".concat(key),
97
91
  className: cx(openedBodyClass),
98
92
  style: {
@@ -101,7 +95,7 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
101
95
  }, /*#__PURE__*/React.createElement(StyledAccordionBody, {
102
96
  className: classes.accordionItemBody
103
97
  }, children)));
104
- });
98
+ };
105
99
 
106
100
  export { AccordionItem };
107
101
  //# sourceMappingURL=AccordionItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\nimport { cx } from '../../../../utils';\n\nimport {\n StyledAccordionItem,\n StyledAccordionHeader,\n StyledAccordionBody,\n StyledAccordionTitle,\n StyledAccordionContentLeft,\n StyledAccordionHeaderLeft,\n StyledAccordionContentRight,\n StyledArrow,\n StyledMinus,\n StyledPlus,\n StyledAccordionBodyAnimate,\n} from './AccordionItem.styles';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(\n (\n {\n value,\n contentRight,\n contentLeft,\n title,\n pin = 'square-square',\n children,\n type = 'sign',\n index,\n className,\n style,\n eventKey,\n disabled,\n alignWithTitle = true,\n opened,\n view,\n onChange,\n onClick,\n },\n outerRef,\n ) => {\n const key = eventKey ?? index ?? 0;\n\n const [leftPadding, setLeftPadding] = useState<string | number | null>();\n\n const handleOpen = () => {\n if (disabled) {\n return;\n }\n if (onChange) {\n onChange(key, !value);\n }\n if (onClick) {\n onClick(key, !value);\n }\n };\n\n const leftContentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const leftContentWidth = leftContentRef?.current?.offsetWidth ?? 0;\n const leftPaddingBody =\n leftContentWidth && (alignWithTitle || view === 'clear')\n ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))`\n : 0;\n setLeftPadding(leftPaddingBody);\n }, [value, type, leftContentRef, setLeftPadding]);\n\n const openedBodyClass = opened ?? value ? classes.accordionItemShowBody : undefined;\n\n const StyledAnimationPlus = () => (\n <StyledPlus>\n <StyledMinus size=\"xs\" color=\"inherit\" />\n <StyledMinus\n size=\"xs\"\n color=\"inhert\"\n className={openedBodyClass ?? classes.accordionPlusAnimationElement}\n />\n </StyledPlus>\n );\n\n const accordionBorderRadius = convertRoundnessMatrix(pin, `var(${tokens.accordionItemBorderRadius})`, '1.5rem');\n const disabledClass = disabled ? classes.accordionDisabled : '';\n\n const leftContent = contentLeft ?? (type === 'arrow' ? <StyledArrow size=\"xs\" color=\"inherit\" /> : undefined);\n const leftContentRotate = type === 'arrow' && (opened ?? value) ? classes.accordionItemShowBody : undefined;\n\n const rightContent = contentRight ?? (type === 'sign' ? <StyledAnimationPlus /> : undefined);\n const rightContentRotate = type === 'sign' && (opened ?? value) ? classes.accordionItemShowBody : undefined;\n\n return (\n <StyledAccordionItem\n className={cx(classes.accordionItem, className, disabledClass)}\n key={key}\n ref={outerRef}\n style={{ borderRadius: accordionBorderRadius, ...style }}\n >\n <StyledAccordionHeader\n role=\"tab\"\n tabIndex={0}\n onClick={handleOpen}\n aria-expanded={opened ?? value}\n aria-controls={`accordion-item-section${key}`}\n id={`accordion-item-${key}`}\n >\n <StyledAccordionHeaderLeft>\n {leftContent && (\n <StyledAccordionContentLeft ref={leftContentRef} className={leftContentRotate}>\n {leftContent}\n </StyledAccordionContentLeft>\n )}\n <StyledAccordionTitle>{title}</StyledAccordionTitle>\n </StyledAccordionHeaderLeft>\n\n {contentRight || (\n <StyledAccordionContentRight className={rightContentRotate}>\n {rightContent && rightContent}\n </StyledAccordionContentRight>\n )}\n </StyledAccordionHeader>\n <StyledAccordionBodyAnimate\n aria-labelledby={`accordion-item-${key}`}\n aria-hidden={!(opened ?? value)}\n id={`accordion-item-section${key}`}\n className={cx(openedBodyClass)}\n style={{ paddingLeft: `${leftPadding}` }}\n >\n <StyledAccordionBody className={classes.accordionItemBody}>{children}</StyledAccordionBody>\n </StyledAccordionBodyAnimate>\n </StyledAccordionItem>\n );\n },\n);\n"],"names":["AccordionItem","forwardRef","_ref","outerRef","_ref2","value","contentRight","contentLeft","title","_ref$pin","pin","children","_ref$type","type","index","className","style","eventKey","disabled","_ref$alignWithTitle","alignWithTitle","opened","view","onChange","onClick","key","_useState","useState","_useState2","_slicedToArray","leftPadding","setLeftPadding","handleOpen","leftContentRef","useRef","useEffect","_leftContentRef$curre","_leftContentRef$curre2","leftContentWidth","current","offsetWidth","leftPaddingBody","concat","tokens","accordionItemGap","openedBodyClass","classes","accordionItemShowBody","undefined","StyledAnimationPlus","React","createElement","StyledPlus","_StyledMinus","StyledMinus","size","color","accordionPlusAnimationElement","accordionBorderRadius","convertRoundnessMatrix","accordionItemBorderRadius","disabledClass","accordionDisabled","leftContent","_StyledArrow","StyledArrow","leftContentRotate","rightContent","rightContentRotate","StyledAccordionItem","cx","accordionItem","ref","_objectSpread","borderRadius","StyledAccordionHeader","role","tabIndex","id","StyledAccordionHeaderLeft","StyledAccordionContentLeft","StyledAccordionTitle","StyledAccordionContentRight","StyledAccordionBodyAnimate","paddingLeft","StyledAccordionBody","accordionItemBody"],"mappings":"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"}
1
+ {"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\nimport { cx } from '../../../../utils';\n\nimport {\n StyledAccordionItem,\n StyledAccordionHeader,\n StyledAccordionBody,\n StyledAccordionTitle,\n StyledAccordionContentLeft,\n StyledAccordionHeaderLeft,\n StyledAccordionContentRight,\n StyledArrow,\n StyledMinus,\n StyledPlus,\n StyledAccordionBodyAnimate,\n} from './AccordionItem.styles';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n value,\n contentRight,\n contentLeft,\n title,\n pin = 'square-square',\n children,\n type = 'sign',\n index,\n className,\n style,\n eventKey,\n disabled,\n alignWithTitle = true,\n view,\n onChange,\n}) => {\n const key = eventKey ?? index ?? 0;\n\n const [leftPadding, setLeftPadding] = useState<string | number | null>();\n\n const handleOpen = () => {\n if (disabled) {\n return;\n }\n if (onChange) {\n onChange(key, !value);\n }\n };\n\n const leftContentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const leftContentWidth = leftContentRef?.current?.offsetWidth ?? 0;\n const leftPaddingBody =\n leftContentWidth && (alignWithTitle || view === 'clear')\n ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))`\n : 0;\n setLeftPadding(leftPaddingBody);\n }, [value, type, leftContentRef, setLeftPadding]);\n\n const openedBodyClass = value ? classes.accordionItemShowBody : undefined;\n\n const StyledAnimationPLus = () => (\n <StyledPlus>\n <StyledMinus size=\"xs\" color=\"inhert\" />\n <StyledMinus\n size=\"xs\"\n color=\"inhert\"\n className={openedBodyClass ?? classes.accordionPlusAnimationElement}\n />\n </StyledPlus>\n );\n\n const accordionBorderRadius = convertRoundnessMatrix(pin, `var(${tokens.accordionItemBorderRadius})`, '1.5rem');\n const disabledClass = disabled ? classes.accordionDisabled : '';\n\n const leftContent = contentLeft ?? (type === 'arrow' ? <StyledArrow size=\"xs\" color=\"inhert\" /> : undefined);\n const leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;\n\n const rightContent = contentRight ?? (type === 'sign' ? <StyledAnimationPLus /> : undefined);\n const rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;\n\n return (\n <StyledAccordionItem\n className={cx(classes.accordionItem, className, disabledClass)}\n key={key}\n style={{ borderRadius: accordionBorderRadius, ...style }}\n >\n <StyledAccordionHeader\n role=\"tab\"\n tabIndex={0}\n onClick={handleOpen}\n aria-expanded={value}\n aria-controls={`accordion-item-section${key}`}\n id={`accordion-item-${key}`}\n >\n <StyledAccordionHeaderLeft>\n {leftContent && (\n <StyledAccordionContentLeft ref={leftContentRef} className={leftContentRotate}>\n {leftContent}\n </StyledAccordionContentLeft>\n )}\n <StyledAccordionTitle>{title}</StyledAccordionTitle>\n </StyledAccordionHeaderLeft>\n\n <StyledAccordionContentRight className={rightContentRotate}>\n {rightContent && rightContent}\n </StyledAccordionContentRight>\n </StyledAccordionHeader>\n <StyledAccordionBodyAnimate\n aria-labelledby={`accordion-item-${key}`}\n aria-hidden={!value}\n id={`accordion-item-section${key}`}\n className={cx(openedBodyClass)}\n style={{ paddingLeft: `${leftPadding}` }}\n >\n <StyledAccordionBody className={classes.accordionItemBody}>{children}</StyledAccordionBody>\n </StyledAccordionBodyAnimate>\n </StyledAccordionItem>\n );\n};\n"],"names":["AccordionItem","_ref","_ref2","value","contentRight","contentLeft","title","_ref$pin","pin","children","_ref$type","type","index","className","style","eventKey","disabled","_ref$alignWithTitle","alignWithTitle","view","onChange","key","_useState","useState","_useState2","_slicedToArray","leftPadding","setLeftPadding","handleOpen","leftContentRef","useRef","useEffect","_leftContentRef$curre","_leftContentRef$curre2","leftContentWidth","current","offsetWidth","leftPaddingBody","concat","tokens","accordionItemGap","openedBodyClass","classes","accordionItemShowBody","undefined","StyledAnimationPLus","React","createElement","StyledPlus","_StyledMinus","StyledMinus","size","color","accordionPlusAnimationElement","accordionBorderRadius","convertRoundnessMatrix","accordionItemBorderRadius","disabledClass","accordionDisabled","leftContent","_StyledArrow","StyledArrow","leftContentRotate","rightContent","rightContentRotate","StyledAccordionItem","cx","accordionItem","_objectSpread","borderRadius","StyledAccordionHeader","role","tabIndex","onClick","id","StyledAccordionHeaderLeft","StyledAccordionContentLeft","ref","StyledAccordionTitle","StyledAccordionContentRight","StyledAccordionBodyAnimate","paddingLeft","StyledAccordionBody","accordionItemBody"],"mappings":"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"}
@@ -0,0 +1,33 @@
1
+ import './ViewContainer_yiqfcb.css';
2
+ import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
3
+ import React, { forwardRef } from 'react';
4
+ import { base as base$1 } from './_view/base.js';
5
+
6
+ var _excluded = ["children"];
7
+ var base = "bemjbnt";
8
+ var viewContainerRoot = function viewContainerRoot(Root) {
9
+ return /*#__PURE__*/forwardRef(function (props, ref) {
10
+ var children = props.children,
11
+ rest = _objectWithoutProperties(props, _excluded);
12
+ return /*#__PURE__*/React.createElement(Root, _extends({
13
+ ref: ref
14
+ }, rest), children);
15
+ });
16
+ };
17
+ var viewContainerConfig = {
18
+ name: 'ViewContainer',
19
+ tag: 'div',
20
+ layout: viewContainerRoot,
21
+ base: base,
22
+ variations: {
23
+ view: {
24
+ css: base$1
25
+ }
26
+ },
27
+ defaults: {
28
+ view: undefined
29
+ }
30
+ };
31
+
32
+ export { viewContainerConfig, viewContainerRoot };
33
+ //# sourceMappingURL=ViewContainer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ViewContainer.js","sources":["../../../src/components/ViewContainer/ViewContainer.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { css } from '@linaria/core';\n\nimport type { RootProps } from '../../engines/types';\n\nimport { base as viewCSS } from './_view/base';\n\nconst base = css`\n position: relative;\n`;\n\nexport type ViewContainerCustomProps = {\n /**\n * Вид компонента\n */\n view?: string;\n};\n\ntype ViewContainerProps = React.HTMLAttributes<HTMLDivElement> & ViewContainerCustomProps;\n\nexport const viewContainerRoot = (Root: RootProps<HTMLAnchorElement, ViewContainerProps>) =>\n forwardRef<HTMLAnchorElement, ViewContainerProps>((props, ref) => {\n const { children, ...rest } = props;\n\n return (\n <Root ref={ref} {...rest}>\n {children}\n </Root>\n );\n });\n\nexport const viewContainerConfig = {\n name: 'ViewContainer',\n tag: 'div',\n layout: viewContainerRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: undefined,\n },\n};\n"],"names":["base","viewContainerRoot","Root","forwardRef","props","ref","children","rest","_excluded","React","createElement","_extends","viewContainerConfig","name","tag","layout","variations","view","css","viewCSS","defaults","undefined"],"mappings":";;;;;AAOA,IAAMA,IAAI,GAET,SAAA,CAAA;IAWYC,iBAAiB,GAAGA,SAApBA,iBAAiBA,CAAIC,IAAsD,EAAA;AAAA,EAAA,oBACpFC,UAAU,CAAwC,UAACC,KAAK,EAAEC,GAAG,EAAK;AAC9D,IAAA,IAAQC,QAAQ,GAAcF,KAAK,CAA3BE,QAAQ;AAAKC,MAAAA,IAAAA,GAAAA,wBAAAA,CAASH,KAAK,EAAAI,SAAA,CAAA,CAAA;AAEnC,IAAA,oBACIC,KAAA,CAAAC,aAAA,CAACR,IAAI,EAAAS,QAAA,CAAA;AAACN,MAAAA,GAAG,EAAEA,GAAAA;KAASE,EAAAA,IAAI,CACnBD,EAAAA,QACC,CAAC,CAAA;AAEf,GAAC,CAAC,CAAA;AAAA,EAAA;AAEC,IAAMM,mBAAmB,GAAG;AAC/BC,EAAAA,IAAI,EAAE,eAAe;AACrBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEd,iBAAiB;AACzBD,EAAAA,IAAI,EAAJA,IAAI;AACJgB,EAAAA,UAAU,EAAE;AACRC,IAAAA,IAAI,EAAE;AACFC,MAAAA,GAAG,EAAEC,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNH,IAAAA,IAAI,EAAEI,SAAAA;AACV,GAAA;AACJ;;;;"}
@@ -0,0 +1 @@
1
+ .bemjbnt{position:relative;}
@@ -0,0 +1,5 @@
1
+ import './base_x642ct.css';
2
+ var base = "bhhdltp";
3
+
4
+ export { base };
5
+ //# sourceMappingURL=base.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"base.js","sources":["../../../../src/components/ViewContainer/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":"AAEO,IAAMA,IAAI,GAAQ;;;;"}
package/es/index.css CHANGED
@@ -782,3 +782,5 @@
782
782
 
783
783
  .IconButton_styles_1q2jfs2_s15ptif0__7aea03a6{--plasma-icon-button-color:var(--plasma-attach-icon-button-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-spinner-size);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
784
784
  .IconButton_styles_1q2jfs2_shuaj1a__7aea03a6{--plasma-icon-button-color:var(--plasma-attach-icon-button-cancel-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-cancel-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-cancel-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-cancel-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-cancel-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-cancel-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-cancel-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-cancel-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-cancel-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-cancel-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-cancel-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-cancel-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-cancel-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-cancel-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-cancel-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-cancel-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-cancel-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-cancel-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-cancel-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-cancel-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-cancel-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-cancel-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-cancel-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-cancel-spinner-size);}
785
+
786
+ .ViewContainer_yiqfcb_bemjbnt__5b2a6776{position:relative;}
package/es/index.js CHANGED
@@ -193,6 +193,7 @@ export { tokens as editableTokens } from './components/Editable/Editable.tokens.
193
193
  export { composeMask } from './components/Mask/Mask.js';
194
194
  export { attachConfig, attachRoot } from './components/Attach/Attach.js';
195
195
  export { tokens as attachTokens } from './components/Attach/Attach.tokens.js';
196
+ export { viewContainerConfig, viewContainerRoot } from './components/ViewContainer/ViewContainer.js';
196
197
  export { component, mergeConfig } from './engines/common.js';
197
198
  export { canUseDOM } from './utils/canUseDOM.js';
198
199
  export { extractTextFrom } from './utils/extractTextFrom.js';
package/es/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.170.0-canary.1484.11388945571.0",
3
+ "version": "0.170.0-canary.1488.11387414081.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -81,6 +81,7 @@
81
81
  "@rollup/plugin-commonjs": "^25.0.4",
82
82
  "@rollup/plugin-node-resolve": "^15.1.0",
83
83
  "@salutejs/plasma-sb-utils": "0.180.0",
84
+ "@salutejs/plasma-themes": "0.21.0-canary.1488.11387414081.0",
84
85
  "@storybook/addon-docs": "^7.6.17",
85
86
  "@storybook/addon-essentials": "^7.6.17",
86
87
  "@storybook/addons": "^7.6.17",
@@ -124,5 +125,5 @@
124
125
  "react-popper": "2.3.0",
125
126
  "storeon": "3.1.5"
126
127
  },
127
- "gitHead": "fd08603fc298d48aab9ce884e2a73125c9b0140c"
128
+ "gitHead": "ec5fc577f54f08798fb54a656f568539470563e8"
128
129
  }