@salutejs/sdds-cs 0.242.0-canary.1736.13068364841.0 → 0.243.0-canary.1720.13073153224.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/api/sdds-cs.api.md +2 -0
  2. package/components/DatePicker/DatePicker.d.ts +2 -0
  3. package/components/Toast/Toast.config.d.ts +8 -0
  4. package/components/Toast/Toast.config.js +10 -2
  5. package/emotion/cjs/components/Toast/Toast.config.js +10 -2
  6. package/emotion/cjs/components/Toast/Toast.stories.tsx +13 -8
  7. package/emotion/es/components/Toast/Toast.config.js +10 -2
  8. package/emotion/es/components/Toast/Toast.stories.tsx +13 -8
  9. package/es/components/Toast/Toast.config.js +10 -2
  10. package/package.json +3 -3
package/api/sdds-cs.api.md CHANGED
@@ -1320,6 +1320,7 @@ true: PolymorphicClassName;
1320
1320
  }> & DatePickerVariationProps & {
1321
1321
  requiredPlacement?: "right" | "left" | undefined;
1322
1322
  required?: boolean | undefined;
1323
+ value?: string | Date | undefined;
1323
1324
  defaultDate?: Date | undefined;
1324
1325
  placeholder?: string | undefined;
1325
1326
  name?: string | undefined;
@@ -1365,6 +1366,7 @@ true: PolymorphicClassName;
1365
1366
  }> & DatePickerVariationProps & {
1366
1367
  requiredPlacement?: "right" | "left" | undefined;
1367
1368
  required?: boolean | undefined;
1369
+ value?: [Date | null | undefined, Date | null | undefined] | undefined;
1368
1370
  defaultFirstDate?: Date | undefined;
1369
1371
  defaultSecondDate?: Date | undefined;
1370
1372
  name?: string | undefined;
package/components/DatePicker/DatePicker.d.ts CHANGED
@@ -15,6 +15,7 @@ export declare const DatePicker: import("react").FunctionComponent<import("@salu
15
15
  }> & import("@salutejs/plasma-new-hope/types/components/DatePicker/DatePickerBase.types").DatePickerVariationProps & {
16
16
  requiredPlacement?: "right" | "left" | undefined;
17
17
  required?: boolean | undefined;
18
+ value?: string | Date | undefined;
18
19
  defaultDate?: Date | undefined;
19
20
  placeholder?: string | undefined;
20
21
  name?: string | undefined;
@@ -50,6 +51,7 @@ export declare const DatePickerRange: import("react").FunctionComponent<import("
50
51
  }> & import("@salutejs/plasma-new-hope/types/components/DatePicker/DatePickerBase.types").DatePickerVariationProps & {
51
52
  requiredPlacement?: "right" | "left" | undefined;
52
53
  required?: boolean | undefined;
54
+ value?: [Date | null | undefined, Date | null | undefined] | undefined;
53
55
  defaultFirstDate?: Date | undefined;
54
56
  defaultSecondDate?: Date | undefined;
55
57
  name?: string | undefined;
package/components/Toast/Toast.config.d.ts CHANGED
@@ -7,7 +7,15 @@ export declare const config: {
7
7
  variations: {
8
8
  view: {
9
9
  default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
10
+ /**
11
+ * @deprecated
12
+ * светлый и темный фон регулировать через `view` компонента `ViewContainer`
13
+ */
10
14
  dark: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
15
+ /**
16
+ * @deprecated
17
+ * светлый и темный фон регулировать через `view` компонента `ViewContainer`
18
+ */
11
19
  light: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
12
20
  };
13
21
  size: {
package/components/Toast/Toast.config.js CHANGED
@@ -16,17 +16,25 @@ var config = exports.config = {
16
16
  variations: {
17
17
  view: {
18
18
  "default": /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card-brightness);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n "])), _styledComponents.toastTokens.color, _styledComponents.toastTokens.background, _styledComponents.toastTokens.closeIconColor, _styledComponents.toastTokens.closeIconColorOnHover),
19
+ /**
20
+ * @deprecated
21
+ * светлый и темный фон регулировать через `view` компонента `ViewContainer`
22
+ */
19
23
  dark: /*#__PURE__*/(0, _styledComponents.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-dark-surface-solid-primary-brightness);\n\n ", ": var(--on-dark-text-accent);\n ", ": var(--on-dark-text-accent-hover);\n "])), _styledComponents.toastTokens.color, _styledComponents.toastTokens.background, _styledComponents.toastTokens.closeIconColor, _styledComponents.toastTokens.closeIconColorOnHover),
24
+ /**
25
+ * @deprecated
26
+ * светлый и темный фон регулировать через `view` компонента `ViewContainer`
27
+ */
20
28
  light: /*#__PURE__*/(0, _styledComponents.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-light-surface-solid-primary-brightness);\n\n ", ": var(--on-light-text-accent);\n ", ": var(--on-light-text-accent-hover);\n "])), _styledComponents.toastTokens.color, _styledComponents.toastTokens.background, _styledComponents.toastTokens.closeIconColor, _styledComponents.toastTokens.closeIconColorOnHover)
21
29
  },
22
30
  size: {
23
- s: /*#__PURE__*/(0, _styledComponents.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.75rem;\n ", ": calc(100vw - 5rem);\n ", ": 0.5rem 0.75rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.0625rem 0.5rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.125rem -0.0625rem 0.75rem;\n "])), _styledComponents.toastTokens.borderRadius, _styledComponents.toastTokens.maxWidth, _styledComponents.toastTokens.padding, _styledComponents.toastTokens.fontFamily, _styledComponents.toastTokens.fontSize, _styledComponents.toastTokens.fontStyle, _styledComponents.toastTokens.fontWeight, _styledComponents.toastTokens.letterSpacing, _styledComponents.toastTokens.lineHeight, _styledComponents.toastTokens.leftContentMargin, _styledComponents.toastTokens.closeIconMargin)
31
+ s: /*#__PURE__*/(0, _styledComponents.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.75rem;\n ", ": calc(100vw - 5rem);\n ", ": 0.5rem 0.75rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.0625rem 0.5rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.125rem -0.0625rem 0.75rem;\n "])), _styledComponents.toastTokens.borderRadius, _styledComponents.toastTokens.maxWidth, _styledComponents.toastTokens.padding, _styledComponents.toastTokens.fontFamily, _styledComponents.toastTokens.fontSize, _styledComponents.toastTokens.fontStyle, _styledComponents.toastTokens.fontWeight, _styledComponents.toastTokens.letterSpacing, _styledComponents.toastTokens.lineHeight, _styledComponents.toastTokens.contentLeftMargin, _styledComponents.toastTokens.closeIconMargin)
24
32
  },
25
33
  closeIconType: {
26
34
  thin: /*#__PURE__*/(0, _styledComponents.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 1.5rem;\n "])), _styledComponents.toastTokens.closeIconButtonSize, _styledComponents.toastTokens.closeIconSize)
27
35
  },
28
36
  pilled: {
29
- "true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n\n ", ": -0.0625rem 0.375rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.25rem -0.0625rem 0.375rem;\n "])), _styledComponents.toastTokens.pilledBorderRadius, _styledComponents.toastTokens.leftContentMargin, _styledComponents.toastTokens.closeIconMargin)
37
+ "true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n\n ", ": -0.0625rem 0.375rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.25rem -0.0625rem 0.375rem;\n "])), _styledComponents.toastTokens.pilledBorderRadius, _styledComponents.toastTokens.contentLeftMargin, _styledComponents.toastTokens.closeIconMargin)
30
38
  }
31
39
  }
32
40
  };
package/emotion/cjs/components/Toast/Toast.config.js CHANGED
@@ -16,17 +16,25 @@ var config = exports.config = {
16
16
  variations: {
17
17
  view: {
18
18
  "default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card-brightness);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n "])), _emotion.toastTokens.color, _emotion.toastTokens.background, _emotion.toastTokens.closeIconColor, _emotion.toastTokens.closeIconColorOnHover),
19
+ /**
20
+ * @deprecated
21
+ * светлый и темный фон регулировать через `view` компонента `ViewContainer`
22
+ */
19
23
  dark: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-dark-surface-solid-primary-brightness);\n\n ", ": var(--on-dark-text-accent);\n ", ": var(--on-dark-text-accent-hover);\n "])), _emotion.toastTokens.color, _emotion.toastTokens.background, _emotion.toastTokens.closeIconColor, _emotion.toastTokens.closeIconColorOnHover),
24
+ /**
25
+ * @deprecated
26
+ * светлый и темный фон регулировать через `view` компонента `ViewContainer`
27
+ */
20
28
  light: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-light-surface-solid-primary-brightness);\n\n ", ": var(--on-light-text-accent);\n ", ": var(--on-light-text-accent-hover);\n "])), _emotion.toastTokens.color, _emotion.toastTokens.background, _emotion.toastTokens.closeIconColor, _emotion.toastTokens.closeIconColorOnHover)
21
29
  },
22
30
  size: {
23
- s: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.75rem;\n ", ": calc(100vw - 5rem);\n ", ": 0.5rem 0.75rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.0625rem 0.5rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.125rem -0.0625rem 0.75rem;\n "])), _emotion.toastTokens.borderRadius, _emotion.toastTokens.maxWidth, _emotion.toastTokens.padding, _emotion.toastTokens.fontFamily, _emotion.toastTokens.fontSize, _emotion.toastTokens.fontStyle, _emotion.toastTokens.fontWeight, _emotion.toastTokens.letterSpacing, _emotion.toastTokens.lineHeight, _emotion.toastTokens.leftContentMargin, _emotion.toastTokens.closeIconMargin)
31
+ s: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.75rem;\n ", ": calc(100vw - 5rem);\n ", ": 0.5rem 0.75rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.0625rem 0.5rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.125rem -0.0625rem 0.75rem;\n "])), _emotion.toastTokens.borderRadius, _emotion.toastTokens.maxWidth, _emotion.toastTokens.padding, _emotion.toastTokens.fontFamily, _emotion.toastTokens.fontSize, _emotion.toastTokens.fontStyle, _emotion.toastTokens.fontWeight, _emotion.toastTokens.letterSpacing, _emotion.toastTokens.lineHeight, _emotion.toastTokens.contentLeftMargin, _emotion.toastTokens.closeIconMargin)
24
32
  },
25
33
  closeIconType: {
26
34
  thin: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 1.5rem;\n "])), _emotion.toastTokens.closeIconButtonSize, _emotion.toastTokens.closeIconSize)
27
35
  },
28
36
  pilled: {
29
- "true": /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n\n ", ": -0.0625rem 0.375rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.25rem -0.0625rem 0.375rem;\n "])), _emotion.toastTokens.pilledBorderRadius, _emotion.toastTokens.leftContentMargin, _emotion.toastTokens.closeIconMargin)
37
+ "true": /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n\n ", ": -0.0625rem 0.375rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.25rem -0.0625rem 0.375rem;\n "])), _emotion.toastTokens.pilledBorderRadius, _emotion.toastTokens.contentLeftMargin, _emotion.toastTokens.closeIconMargin)
30
38
  }
31
39
  }
32
40
  };
package/emotion/cjs/components/Toast/Toast.stories.tsx CHANGED
@@ -10,23 +10,23 @@ import { ToastController, ToastProvider } from './Toast';
10
10
 
11
11
  import { Toast, useToast } from '.';
12
12
 
13
+ const views = ['default'];
14
+
13
15
  const meta: Meta<typeof ToastController> = {
14
16
  title: 'Overlay/Toast',
15
17
  decorators: [InSpacingDecorator],
16
18
  argTypes: {
17
19
  view: {
18
- options: ['default', 'dark', 'light'],
20
+ options: views,
19
21
  control: {
20
22
  type: 'select',
21
23
  },
22
24
  },
23
- size: {
24
- options: ['s'],
25
- control: {
26
- type: 'inline-radio',
27
- },
25
+ textColor: {
26
+ control: 'color',
28
27
  },
29
- ...disableProps(['role', 'onShow', 'onHide', 'contentLeft', 'size']),
28
+ // NOTE: контролы 'textColor' и 'view' скрыты для сторибуков sdds-cs и sdds-insol
29
+ ...disableProps(['textColor', 'view', 'closeIconType', 'size', 'role', 'onShow', 'onHide', 'contentLeft']),
30
30
  },
31
31
  };
32
32
 
@@ -54,7 +54,6 @@ const BellIcon = (props) => (
54
54
  );
55
55
 
56
56
  const ToastContainer = styled.div`
57
- position: fixed;
58
57
  transform: translateX(50%);
59
58
  `;
60
59
 
@@ -66,7 +65,9 @@ const Container = styled.div`
66
65
  export const ToastComponent: StoryComponent = {
67
66
  args: {
68
67
  text: 'Текст всплывающего уведомления',
68
+ textColor: undefined,
69
69
  view: 'default',
70
+ closeIconType: 'thin',
70
71
  size: 's',
71
72
  hasClose: true,
72
73
  enableContentLeft: true,
@@ -90,6 +91,8 @@ const StoryLiveDemo = ({
90
91
  size,
91
92
  hasClose,
92
93
  enableContentLeft,
94
+ closeIconType,
95
+ textColor,
93
96
  }: StoryProps) => {
94
97
  const { showToast, hideToast } = useToast();
95
98
  const contentLeft = enableContentLeft && <BellIcon width="1.5rem" height="1.5rem" />;
@@ -110,6 +113,8 @@ const StoryLiveDemo = ({
110
113
  view,
111
114
  size,
112
115
  hasClose,
116
+ closeIconType,
117
+ textColor,
113
118
  onHide: action('onHide'),
114
119
  onShow: action('onShow'),
115
120
  });
package/emotion/es/components/Toast/Toast.config.js CHANGED
@@ -10,17 +10,25 @@ export var config = {
10
10
  variations: {
11
11
  view: {
12
12
  "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card-brightness);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n "])), toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
13
+ /**
14
+ * @deprecated
15
+ * светлый и темный фон регулировать через `view` компонента `ViewContainer`
16
+ */
13
17
  dark: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-dark-surface-solid-primary-brightness);\n\n ", ": var(--on-dark-text-accent);\n ", ": var(--on-dark-text-accent-hover);\n "])), toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
18
+ /**
19
+ * @deprecated
20
+ * светлый и темный фон регулировать через `view` компонента `ViewContainer`
21
+ */
14
22
  light: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-light-surface-solid-primary-brightness);\n\n ", ": var(--on-light-text-accent);\n ", ": var(--on-light-text-accent-hover);\n "])), toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
15
23
  },
16
24
  size: {
17
- s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.75rem;\n ", ": calc(100vw - 5rem);\n ", ": 0.5rem 0.75rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.0625rem 0.5rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.125rem -0.0625rem 0.75rem;\n "])), toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
25
+ s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.75rem;\n ", ": calc(100vw - 5rem);\n ", ": 0.5rem 0.75rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.0625rem 0.5rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.125rem -0.0625rem 0.75rem;\n "])), toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
18
26
  },
19
27
  closeIconType: {
20
28
  thin: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 1.5rem;\n "])), toastTokens.closeIconButtonSize, toastTokens.closeIconSize)
21
29
  },
22
30
  pilled: {
23
- "true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n\n ", ": -0.0625rem 0.375rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.25rem -0.0625rem 0.375rem;\n "])), toastTokens.pilledBorderRadius, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
31
+ "true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n\n ", ": -0.0625rem 0.375rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.25rem -0.0625rem 0.375rem;\n "])), toastTokens.pilledBorderRadius, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
24
32
  }
25
33
  }
26
34
  };
package/emotion/es/components/Toast/Toast.stories.tsx CHANGED
@@ -10,23 +10,23 @@ import { ToastController, ToastProvider } from './Toast';
10
10
 
11
11
  import { Toast, useToast } from '.';
12
12
 
13
+ const views = ['default'];
14
+
13
15
  const meta: Meta<typeof ToastController> = {
14
16
  title: 'Overlay/Toast',
15
17
  decorators: [InSpacingDecorator],
16
18
  argTypes: {
17
19
  view: {
18
- options: ['default', 'dark', 'light'],
20
+ options: views,
19
21
  control: {
20
22
  type: 'select',
21
23
  },
22
24
  },
23
- size: {
24
- options: ['s'],
25
- control: {
26
- type: 'inline-radio',
27
- },
25
+ textColor: {
26
+ control: 'color',
28
27
  },
29
- ...disableProps(['role', 'onShow', 'onHide', 'contentLeft', 'size']),
28
+ // NOTE: контролы 'textColor' и 'view' скрыты для сторибуков sdds-cs и sdds-insol
29
+ ...disableProps(['textColor', 'view', 'closeIconType', 'size', 'role', 'onShow', 'onHide', 'contentLeft']),
30
30
  },
31
31
  };
32
32
 
@@ -54,7 +54,6 @@ const BellIcon = (props) => (
54
54
  );
55
55
 
56
56
  const ToastContainer = styled.div`
57
- position: fixed;
58
57
  transform: translateX(50%);
59
58
  `;
60
59
 
@@ -66,7 +65,9 @@ const Container = styled.div`
66
65
  export const ToastComponent: StoryComponent = {
67
66
  args: {
68
67
  text: 'Текст всплывающего уведомления',
68
+ textColor: undefined,
69
69
  view: 'default',
70
+ closeIconType: 'thin',
70
71
  size: 's',
71
72
  hasClose: true,
72
73
  enableContentLeft: true,
@@ -90,6 +91,8 @@ const StoryLiveDemo = ({
90
91
  size,
91
92
  hasClose,
92
93
  enableContentLeft,
94
+ closeIconType,
95
+ textColor,
93
96
  }: StoryProps) => {
94
97
  const { showToast, hideToast } = useToast();
95
98
  const contentLeft = enableContentLeft && <BellIcon width="1.5rem" height="1.5rem" />;
@@ -110,6 +113,8 @@ const StoryLiveDemo = ({
110
113
  view,
111
114
  size,
112
115
  hasClose,
116
+ closeIconType,
117
+ textColor,
113
118
  onHide: action('onHide'),
114
119
  onShow: action('onShow'),
115
120
  });
package/es/components/Toast/Toast.config.js CHANGED
@@ -10,17 +10,25 @@ export var config = {
10
10
  variations: {
11
11
  view: {
12
12
  "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card-brightness);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n "])), toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
13
+ /**
14
+ * @deprecated
15
+ * светлый и темный фон регулировать через `view` компонента `ViewContainer`
16
+ */
13
17
  dark: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-dark-surface-solid-primary-brightness);\n\n ", ": var(--on-dark-text-accent);\n ", ": var(--on-dark-text-accent-hover);\n "])), toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
18
+ /**
19
+ * @deprecated
20
+ * светлый и темный фон регулировать через `view` компонента `ViewContainer`
21
+ */
14
22
  light: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-light-surface-solid-primary-brightness);\n\n ", ": var(--on-light-text-accent);\n ", ": var(--on-light-text-accent-hover);\n "])), toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
15
23
  },
16
24
  size: {
17
- s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.75rem;\n ", ": calc(100vw - 5rem);\n ", ": 0.5rem 0.75rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.0625rem 0.5rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.125rem -0.0625rem 0.75rem;\n "])), toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
25
+ s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.75rem;\n ", ": calc(100vw - 5rem);\n ", ": 0.5rem 0.75rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.0625rem 0.5rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.125rem -0.0625rem 0.75rem;\n "])), toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
18
26
  },
19
27
  closeIconType: {
20
28
  thin: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 1.5rem;\n "])), toastTokens.closeIconButtonSize, toastTokens.closeIconSize)
21
29
  },
22
30
  pilled: {
23
- "true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n\n ", ": -0.0625rem 0.375rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.25rem -0.0625rem 0.375rem;\n "])), toastTokens.pilledBorderRadius, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
31
+ "true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n\n ", ": -0.0625rem 0.375rem -0.0625rem 0rem;\n ", ": -0.0625rem 0.25rem -0.0625rem 0.375rem;\n "])), toastTokens.pilledBorderRadius, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
24
32
  }
25
33
  }
26
34
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/sdds-cs",
3
- "version": "0.242.0-canary.1736.13068364841.0",
3
+ "version": "0.243.0-canary.1720.13073153224.0",
4
4
  "description": "Salute Design System / React UI kit for SDDS CS web applications",
5
5
  "author": "Salute Frontend Team <salute.developers@gmail.com>",
6
6
  "license": "MIT",
@@ -30,7 +30,7 @@
30
30
  "directory": "packages/sdds-cs"
31
31
  },
32
32
  "dependencies": {
33
- "@salutejs/plasma-new-hope": "0.253.0-canary.1736.13068364841.0",
33
+ "@salutejs/plasma-new-hope": "0.254.0-canary.1720.13073153224.0",
34
34
  "@salutejs/sdds-themes": "0.31.0"
35
35
  },
36
36
  "peerDependencies": {
@@ -123,5 +123,5 @@
123
123
  "Anton Vinogradov"
124
124
  ],
125
125
  "sideEffects": false,
126
- "gitHead": "a98240f91a232120126a7113b1c7991ec1d31257"
126
+ "gitHead": "3b298ee73587f4c608df8cd8ef223859a7aea5a8"
127
127
  }