@salutejs/plasma-new-hope 0.270.1-canary.1783.13392666998.0 → 0.271.0-canary.1778.13389874162.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (79) hide show
  1. package/cjs/components/Notification/Notification.css +11 -11
  2. package/cjs/components/Notification/Notification.js +7 -3
  3. package/cjs/components/Notification/Notification.js.map +1 -1
  4. package/cjs/components/Notification/Notification.styles.js +42 -26
  5. package/cjs/components/Notification/Notification.styles.js.map +1 -1
  6. package/cjs/components/Notification/{Notification.styles_1u5gusp.css → Notification.styles_gk4bgs.css} +2 -2
  7. package/cjs/components/Notification/Notification.tokens.js +1 -0
  8. package/cjs/components/Notification/Notification.tokens.js.map +1 -1
  9. package/cjs/components/Notification/Notification.types.js.map +1 -1
  10. package/cjs/components/Notification/NotificationsPortal.js +1 -0
  11. package/cjs/components/Notification/NotificationsPortal.js.map +1 -1
  12. package/cjs/components/Notification/NotificationsProvider.css +11 -11
  13. package/cjs/index.css +11 -11
  14. package/emotion/cjs/components/Notification/Notification.js +7 -3
  15. package/emotion/cjs/components/Notification/Notification.styles.js +32 -26
  16. package/emotion/cjs/components/Notification/Notification.tokens.js +1 -0
  17. package/emotion/cjs/components/Notification/NotificationsPortal.js +2 -1
  18. package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.config.js +11 -7
  19. package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +35 -3
  20. package/emotion/cjs/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +2 -2
  21. package/emotion/cjs/examples/plasma_web/components/Notification/Notification.config.js +11 -7
  22. package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +18 -2
  23. package/emotion/cjs/examples/plasma_web/components/Tokens/Tokens.stories.tsx +2 -2
  24. package/emotion/es/components/Notification/Notification.js +7 -3
  25. package/emotion/es/components/Notification/Notification.styles.js +32 -26
  26. package/emotion/es/components/Notification/Notification.tokens.js +1 -0
  27. package/emotion/es/components/Notification/NotificationsPortal.js +2 -1
  28. package/emotion/es/examples/plasma_b2c/components/Notification/Notification.config.js +11 -7
  29. package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +35 -3
  30. package/emotion/es/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +2 -2
  31. package/emotion/es/examples/plasma_web/components/Notification/Notification.config.js +11 -7
  32. package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +18 -2
  33. package/emotion/es/examples/plasma_web/components/Tokens/Tokens.stories.tsx +2 -2
  34. package/es/components/Notification/Notification.css +11 -11
  35. package/es/components/Notification/Notification.js +7 -3
  36. package/es/components/Notification/Notification.js.map +1 -1
  37. package/es/components/Notification/Notification.styles.js +42 -26
  38. package/es/components/Notification/Notification.styles.js.map +1 -1
  39. package/es/components/Notification/{Notification.styles_1u5gusp.css → Notification.styles_gk4bgs.css} +2 -2
  40. package/es/components/Notification/Notification.tokens.js +1 -0
  41. package/es/components/Notification/Notification.tokens.js.map +1 -1
  42. package/es/components/Notification/Notification.types.js.map +1 -1
  43. package/es/components/Notification/NotificationsPortal.js +1 -0
  44. package/es/components/Notification/NotificationsPortal.js.map +1 -1
  45. package/es/components/Notification/NotificationsProvider.css +11 -11
  46. package/es/index.css +11 -11
  47. package/package.json +2 -2
  48. package/styled-components/cjs/components/Notification/Notification.js +7 -3
  49. package/styled-components/cjs/components/Notification/Notification.styles.js +21 -15
  50. package/styled-components/cjs/components/Notification/Notification.tokens.js +1 -0
  51. package/styled-components/cjs/components/Notification/NotificationsPortal.js +1 -0
  52. package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.config.js +5 -1
  53. package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +35 -3
  54. package/styled-components/cjs/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +2 -2
  55. package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.config.js +5 -1
  56. package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +18 -2
  57. package/styled-components/cjs/examples/plasma_web/components/Tokens/Tokens.stories.tsx +2 -2
  58. package/styled-components/es/components/Notification/Notification.js +7 -3
  59. package/styled-components/es/components/Notification/Notification.styles.js +21 -15
  60. package/styled-components/es/components/Notification/Notification.tokens.js +1 -0
  61. package/styled-components/es/components/Notification/NotificationsPortal.js +1 -0
  62. package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.config.js +5 -1
  63. package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +35 -3
  64. package/styled-components/es/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +2 -2
  65. package/styled-components/es/examples/plasma_web/components/Notification/Notification.config.js +5 -1
  66. package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +18 -2
  67. package/styled-components/es/examples/plasma_web/components/Tokens/Tokens.stories.tsx +2 -2
  68. package/types/components/Notification/Notification.d.ts.map +1 -1
  69. package/types/components/Notification/Notification.styles.d.ts +6 -2
  70. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  71. package/types/components/Notification/Notification.tokens.d.ts +1 -0
  72. package/types/components/Notification/Notification.tokens.d.ts.map +1 -1
  73. package/types/components/Notification/Notification.types.d.ts +8 -0
  74. package/types/components/Notification/Notification.types.d.ts.map +1 -1
  75. package/types/components/Notification/NotificationsPortal.d.ts.map +1 -1
  76. package/types/examples/plasma_b2c/components/Notification/Notification.config.d.ts +4 -0
  77. package/types/examples/plasma_b2c/components/Notification/Notification.config.d.ts.map +1 -1
  78. package/types/examples/plasma_web/components/Notification/Notification.config.d.ts +4 -0
  79. package/types/examples/plasma_web/components/Notification/Notification.config.d.ts.map +1 -1
@@ -23,6 +23,7 @@ const texts = ['SSH ключ успешно скопирован', 'Нельзя
23
23
  const size = ['xs', 'xxs'];
24
24
  const iconPlacement = ['top', 'left'];
25
25
  const notificationsPlacements = ['bottom-right', 'bottom-left'];
26
+ const views = ['default', 'negative', 'positive', 'warning', 'info'];
26
27
 
27
28
  const longText = `JavaScript frameworks are an essential part of modern front-end web development,
28
29
  providing developers with proven tools for building scalable, interactive web applications.
@@ -64,7 +65,7 @@ const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIc
64
65
  return (
65
66
  <Notification
66
67
  title={title}
67
- icon={showLeftIcon ? <IconDisclosureRight /> : ''}
68
+ icon={showLeftIcon ? <IconDisclosureRight color="inherit" /> : ''}
68
69
  iconPlacement={iconPlacement}
69
70
  actions={
70
71
  <Button
@@ -108,6 +109,18 @@ export const Default: StoryObj<StoryDefaultProps> = {
108
109
  type: 'select',
109
110
  },
110
111
  },
112
+ view: {
113
+ options: views,
114
+ control: {
115
+ type: 'select',
116
+ },
117
+ },
118
+ textColor: {
119
+ control: 'color',
120
+ },
121
+ iconColor: {
122
+ control: 'color',
123
+ },
111
124
  },
112
125
  args: {
113
126
  title: 'Title',
@@ -133,7 +146,10 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
133
146
  const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
134
147
  const count = useRef(0);
135
148
  const handleClick = useCallback(() => {
136
- addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
149
+ addNotification(
150
+ { icon: <IconDisclosureRight color="inherit" />, ...rest, ...getNotificationProps(count.current) },
151
+ timeout,
152
+ );
137
153
  count.current++;
138
154
  }, [count, rest]);
139
155
 
@@ -69,11 +69,11 @@ const StoryDemo = ({ context }) => {
69
69
 
70
70
  return (
71
71
  <>
72
- {Object.entries(groupedTokens).map(([category, subcategories]) => (
72
+ {Object.entries(groupedTokens).map(([category, subcategoties]) => (
73
73
  <CategoryContainer key={category}>
74
74
  <Category>{category}</Category>
75
75
  <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
76
- {Object.entries(subcategories).map(([subcategory, subcategoryTokens], index) => (
76
+ {Object.entries(subcategoties).map(([subcategory, subcategoryTokens], index) => (
77
77
  <StyledAccordionItem
78
78
  key={subcategory}
79
79
  eventKey={index}
@@ -1,4 +1,4 @@
1
- var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "onCloseButtonClick"];
1
+ var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "textColor", "iconColor", "onCloseButtonClick"];
2
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
3
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
4
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -34,6 +34,8 @@ export var notificationRoot = function notificationRoot(Root) {
34
34
  layout = _props$layout === void 0 ? layouts.vertical : _props$layout,
35
35
  icon = props.icon,
36
36
  closeIconType = props.closeIconType,
37
+ textColor = props.textColor,
38
+ iconColor = props.iconColor,
37
39
  onCloseButtonClick = props.onCloseButtonClick,
38
40
  rest = _objectWithoutProperties(props, _excluded);
39
41
  var ariaLive = 'polite';
@@ -66,13 +68,15 @@ export var notificationRoot = function notificationRoot(Root) {
66
68
  className: cx(classes.contentBox, getLayoutClass(layout), withoutIconClass)
67
69
  }, icon && /*#__PURE__*/React.createElement(IconWrapper, {
68
70
  iconPlacement: IconPlacementInternal,
69
- className: cx(classes.icon, getLayoutClass(layout))
71
+ className: cx(classes.icon, getLayoutClass(layout)),
72
+ iconColor: iconColor
70
73
  }, icon), /*#__PURE__*/React.createElement(TextBox, {
71
74
  iconPlacement: IconPlacementInternal,
72
75
  showCloseIcon: showCloseIcon,
73
76
  className: cx(classes.textbox, getLayoutClass(layout))
74
77
  }, title && /*#__PURE__*/React.createElement(StyledTitle, {
75
- className: classes.title
78
+ className: classes.title,
79
+ textColor: textColor
76
80
  }, title), content && /*#__PURE__*/React.createElement(StyledContent, {
77
81
  className: classes.text
78
82
  }, content))), actions && /*#__PURE__*/React.createElement(ButtonsWrapper, {