@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.
@@ -58,14 +59,25 @@ interface StoryDefaultProps {
58
59
  closeIconType?: 'default' | 'thin';
59
60
  iconPlacement: NotificationIconPlacement;
60
61
  placement?: NotificationPlacement;
62
+ view: 'default';
61
63
  }
62
64
 
63
- const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIcon, ...rest }: StoryDefaultProps) => {
65
+ const StoryDefault = ({
66
+ title,
67
+ children,
68
+ iconPlacement,
69
+ size,
70
+ layout,
71
+ showLeftIcon,
72
+ view,
73
+ ...rest
74
+ }: StoryDefaultProps) => {
64
75
  return (
65
76
  <Notification
66
77
  title={title}
67
- icon={showLeftIcon ? <IconDisclosureRight /> : ''}
78
+ icon={showLeftIcon ? <IconDisclosureRight color="inherit" /> : ''}
68
79
  iconPlacement={iconPlacement}
80
+ view={view}
69
81
  actions={
70
82
  <Button
71
83
  text="text"
@@ -108,6 +120,18 @@ export const Default: StoryObj<StoryDefaultProps> = {
108
120
  type: 'select',
109
121
  },
110
122
  },
123
+ view: {
124
+ options: views,
125
+ control: {
126
+ type: 'select',
127
+ },
128
+ },
129
+ textColor: {
130
+ control: 'color',
131
+ },
132
+ iconColor: {
133
+ control: 'color',
134
+ },
111
135
  },
112
136
  args: {
113
137
  title: 'Title',
@@ -117,6 +141,7 @@ export const Default: StoryObj<StoryDefaultProps> = {
117
141
  iconPlacement: 'top',
118
142
  layout: 'vertical',
119
143
  closeIconType: 'default',
144
+ view: 'default',
120
145
  size: 'xs',
121
146
  },
122
147
  render: (args) => <StoryDefault {...args} />,
@@ -133,7 +158,14 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
133
158
  const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
134
159
  const count = useRef(0);
135
160
  const handleClick = useCallback(() => {
136
- addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
161
+ addNotification(
162
+ {
163
+ icon: <IconDisclosureRight color="inherit" />,
164
+ ...rest,
165
+ ...getNotificationProps(count.current),
166
+ },
167
+ timeout,
168
+ );
137
169
  count.current++;
138
170
  }, [count, rest]);
139
171
 
@@ -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}