@salutejs/plasma-new-hope 0.248.0-canary.1718.12929142809.0 → 0.248.0-canary.1719.12929292229.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Notification/Notification.types.js.map +1 -1
- package/cjs/components/Notification/NotificationsPortal.js +2 -5
- package/cjs/components/Notification/NotificationsPortal.js.map +1 -1
- package/cjs/components/Notification/NotificationsProvider.js +2 -4
- package/cjs/components/Notification/NotificationsProvider.js.map +1 -1
- package/cjs/components/Toast/Toast.css +7 -7
- package/cjs/components/Toast/Toast.js +5 -2
- package/cjs/components/Toast/Toast.js.map +1 -1
- package/cjs/components/Toast/Toast.styles.js +11 -2
- package/cjs/components/Toast/Toast.styles.js.map +1 -1
- package/cjs/components/Toast/{Toast.styles_1nei944.css → Toast.styles_1kasmzh.css} +2 -2
- package/cjs/components/Toast/Toast.tokens.js +2 -1
- package/cjs/components/Toast/Toast.tokens.js.map +1 -1
- package/cjs/components/Toast/ToastController.css +6 -6
- package/cjs/components/Toast/ToastProvider/ToastProvider.js +6 -1
- package/cjs/components/Toast/ToastProvider/ToastProvider.js.map +1 -1
- package/cjs/components/Toast/utils.js +2 -0
- package/cjs/components/Toast/utils.js.map +1 -1
- package/cjs/components/Toast/variations/_pilled/base.js +1 -1
- package/cjs/components/Toast/variations/_pilled/base.js.map +1 -1
- package/cjs/components/Toast/variations/_pilled/base_13i59v3.css +1 -0
- package/cjs/index.css +8 -8
- package/emotion/cjs/components/Notification/NotificationsPortal.js +3 -6
- package/emotion/cjs/components/Notification/NotificationsProvider.js +2 -4
- package/emotion/cjs/components/Toast/Toast.js +5 -2
- package/emotion/cjs/components/Toast/Toast.styles.js +9 -6
- package/emotion/cjs/components/Toast/Toast.template-doc.mdx +22 -5
- package/emotion/cjs/components/Toast/Toast.tokens.js +2 -1
- package/emotion/cjs/components/Toast/ToastProvider/ToastProvider.js +6 -1
- package/emotion/cjs/components/Toast/utils.js +2 -1
- package/emotion/cjs/components/Toast/variations/_pilled/base.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Toast/Toast.config.js +17 -7
- package/emotion/cjs/examples/plasma_b2c/components/Toast/Toast.stories.tsx +31 -13
- package/emotion/cjs/examples/plasma_web/components/Toast/Toast.config.js +17 -7
- package/emotion/cjs/examples/plasma_web/components/Toast/Toast.stories.tsx +31 -13
- package/emotion/es/components/Notification/NotificationsPortal.js +3 -6
- package/emotion/es/components/Notification/NotificationsProvider.js +2 -4
- package/emotion/es/components/Toast/Toast.js +5 -2
- package/emotion/es/components/Toast/Toast.styles.js +9 -6
- package/emotion/es/components/Toast/Toast.template-doc.mdx +22 -5
- package/emotion/es/components/Toast/Toast.tokens.js +2 -1
- package/emotion/es/components/Toast/ToastProvider/ToastProvider.js +7 -2
- package/emotion/es/components/Toast/utils.js +1 -0
- package/emotion/es/components/Toast/variations/_pilled/base.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/Toast/Toast.config.js +17 -7
- package/emotion/es/examples/plasma_b2c/components/Toast/Toast.stories.tsx +31 -13
- package/emotion/es/examples/plasma_web/components/Toast/Toast.config.js +17 -7
- package/emotion/es/examples/plasma_web/components/Toast/Toast.stories.tsx +31 -13
- package/es/components/Notification/Notification.types.js.map +1 -1
- package/es/components/Notification/NotificationsPortal.js +2 -5
- package/es/components/Notification/NotificationsPortal.js.map +1 -1
- package/es/components/Notification/NotificationsProvider.js +2 -4
- package/es/components/Notification/NotificationsProvider.js.map +1 -1
- package/es/components/Toast/Toast.css +7 -7
- package/es/components/Toast/Toast.js +5 -2
- package/es/components/Toast/Toast.js.map +1 -1
- package/es/components/Toast/Toast.styles.js +11 -2
- package/es/components/Toast/Toast.styles.js.map +1 -1
- package/es/components/Toast/{Toast.styles_1nei944.css → Toast.styles_1kasmzh.css} +2 -2
- package/es/components/Toast/Toast.tokens.js +2 -1
- package/es/components/Toast/Toast.tokens.js.map +1 -1
- package/es/components/Toast/ToastController.css +6 -6
- package/es/components/Toast/ToastProvider/ToastProvider.js +7 -2
- package/es/components/Toast/ToastProvider/ToastProvider.js.map +1 -1
- package/es/components/Toast/utils.js +2 -1
- package/es/components/Toast/utils.js.map +1 -1
- package/es/components/Toast/variations/_pilled/base.js +1 -1
- package/es/components/Toast/variations/_pilled/base.js.map +1 -1
- package/es/components/Toast/variations/_pilled/base_13i59v3.css +1 -0
- package/es/index.css +8 -8
- package/package.json +2 -2
- package/styled-components/cjs/components/Notification/NotificationsPortal.js +2 -5
- package/styled-components/cjs/components/Notification/NotificationsProvider.js +2 -4
- package/styled-components/cjs/components/Toast/Toast.js +5 -2
- package/styled-components/cjs/components/Toast/Toast.styles.js +5 -2
- package/styled-components/cjs/components/Toast/Toast.template-doc.mdx +22 -5
- package/styled-components/cjs/components/Toast/Toast.tokens.js +2 -1
- package/styled-components/cjs/components/Toast/ToastProvider/ToastProvider.js +6 -1
- package/styled-components/cjs/components/Toast/utils.js +2 -1
- package/styled-components/cjs/components/Toast/variations/_pilled/base.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.config.js +12 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.stories.tsx +31 -13
- package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.config.js +12 -2
- package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.stories.tsx +31 -13
- package/styled-components/es/components/Notification/NotificationsPortal.js +2 -5
- package/styled-components/es/components/Notification/NotificationsProvider.js +2 -4
- package/styled-components/es/components/Toast/Toast.js +5 -2
- package/styled-components/es/components/Toast/Toast.styles.js +5 -2
- package/styled-components/es/components/Toast/Toast.template-doc.mdx +22 -5
- package/styled-components/es/components/Toast/Toast.tokens.js +2 -1
- package/styled-components/es/components/Toast/ToastProvider/ToastProvider.js +7 -2
- package/styled-components/es/components/Toast/utils.js +1 -0
- package/styled-components/es/components/Toast/variations/_pilled/base.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.config.js +12 -2
- package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.stories.tsx +31 -13
- package/styled-components/es/examples/plasma_web/components/Toast/Toast.config.js +12 -2
- package/styled-components/es/examples/plasma_web/components/Toast/Toast.stories.tsx +31 -13
- package/types/components/Notification/Notification.types.d.ts +0 -8
- package/types/components/Notification/Notification.types.d.ts.map +1 -1
- package/types/components/Notification/NotificationsPortal.d.ts.map +1 -1
- package/types/components/Notification/NotificationsProvider.d.ts +0 -4
- package/types/components/Notification/NotificationsProvider.d.ts.map +1 -1
- package/types/components/Toast/Toast.styles.d.ts +3 -1
- package/types/components/Toast/Toast.styles.d.ts.map +1 -1
- package/types/components/Toast/Toast.tokens.d.ts +2 -1
- package/types/components/Toast/Toast.tokens.d.ts.map +1 -1
- package/types/components/Toast/Toast.types.d.ts +8 -0
- package/types/components/Toast/Toast.types.d.ts.map +1 -1
- package/types/components/Toast/ToastProvider/ToastProvider.d.ts.map +1 -1
- package/types/components/Toast/utils.d.ts +1 -0
- package/types/components/Toast/utils.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Toast/Toast.config.d.ts +10 -0
- package/types/examples/plasma_b2c/components/Toast/Toast.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Toast/Toast.d.ts +2 -0
- package/types/examples/plasma_b2c/components/Toast/Toast.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Toast/Toast.config.d.ts +10 -0
- package/types/examples/plasma_web/components/Toast/Toast.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Toast/Toast.d.ts +2 -0
- package/types/examples/plasma_web/components/Toast/Toast.d.ts.map +1 -1
- package/cjs/components/Toast/variations/_pilled/base_199qghc.css +0 -1
- package/es/components/Toast/variations/_pilled/base_199qghc.css +0 -1
@@ -34,7 +34,10 @@ export var StyledOverlay = /*#__PURE__*/styled(Overlay).withConfig({
|
|
34
34
|
})(["&&.", "{animation:0.3s showFadeAnimation ease-out forwards;}&&.", "{animation:0.3s hideFadeAnimation ease-out forwards;}@keyframes showFadeAnimation{0%{opacity:0;}100%{opacity:1;}}@keyframes hideFadeAnimation{0%{opacity:1;}100%{opacity:0;}}"], /*#__PURE__*/String(classes.toastFadeShowed), /*#__PURE__*/String(classes.toastFadeHidden));
|
35
35
|
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
36
36
|
componentId: "plasma-new-hope__sc-19l9ekl-3"
|
37
|
-
})(["display:flex;--plasma_private-left-
|
37
|
+
})(["display:flex;--plasma_private-content-left-margin:var(", ");margin:var(--plasma_private-content-left-margin);color:var(", ");"], tokens.contentLeftMargin, tokens.contentLeftColor);
|
38
38
|
export var StyledContent = /*#__PURE__*/styled.div.withConfig({
|
39
39
|
componentId: "plasma-new-hope__sc-19l9ekl-4"
|
40
|
-
})([""])
|
40
|
+
})(["color:", ";"], function (_ref5) {
|
41
|
+
var textColor = _ref5.textColor;
|
42
|
+
return textColor || 'currentColor';
|
43
|
+
});
|
@@ -104,6 +104,10 @@ export interface ShowToastArgs {
|
|
104
104
|
* Время отображения подсказки. Если не передать значение, подсказка будет отображаться пока ее не закроют.
|
105
105
|
*/
|
106
106
|
timeout?: number;
|
107
|
+
/**
|
108
|
+
* Цвет текста (по умолчанию берётся цвет из view)
|
109
|
+
*/
|
110
|
+
textColor?: string;
|
107
111
|
/**
|
108
112
|
* callback срабатывающий в момент события hideToast
|
109
113
|
*/
|
@@ -117,9 +121,11 @@ export interface ShowToastArgs {
|
|
117
121
|
|
118
122
|
## Пример использования
|
119
123
|
|
124
|
+
Для изменения цветовой темы компонента `Toast` используйте свойство `view` компонента `ViewContainer`.
|
125
|
+
|
120
126
|
```jsx live
|
121
127
|
import React from 'react'
|
122
|
-
import { useToast, ToastProvider, Button } from '@salutejs/{{ package }}'
|
128
|
+
import { useToast, ToastProvider, Button, ViewContainer } from '@salutejs/{{ package }}'
|
123
129
|
|
124
130
|
export function App() {
|
125
131
|
|
@@ -130,12 +136,13 @@ export function App() {
|
|
130
136
|
const onHide = () => {}
|
131
137
|
const toastData = {
|
132
138
|
text: 'Подсказка вызванная showToast',
|
139
|
+
textColor: 'cyan',
|
133
140
|
position: 'bottom',
|
134
141
|
role: 'status',
|
135
142
|
hasClose: true,
|
136
143
|
fade: false,
|
137
144
|
size: 'm',
|
138
|
-
view: '
|
145
|
+
view: 'default',
|
139
146
|
timeout: 3000,
|
140
147
|
onShow,
|
141
148
|
onHide
|
@@ -145,9 +152,19 @@ export function App() {
|
|
145
152
|
}
|
146
153
|
|
147
154
|
return (
|
148
|
-
<
|
149
|
-
<
|
150
|
-
|
155
|
+
<div style=\{{ display: 'flex', gap: '1rem' }}>
|
156
|
+
<ViewContainer view="onLight">
|
157
|
+
<ToastProvider>
|
158
|
+
<ToastExample />
|
159
|
+
</ToastProvider>
|
160
|
+
</ViewContainer>
|
161
|
+
|
162
|
+
<ViewContainer view="onDark">
|
163
|
+
<ToastProvider>
|
164
|
+
<ToastExample />
|
165
|
+
</ToastProvider>
|
166
|
+
</ViewContainer>
|
167
|
+
</div>
|
151
168
|
)
|
152
169
|
}
|
153
170
|
```
|
@@ -19,7 +19,8 @@ export var tokens = {
|
|
19
19
|
letterSpacing: '--plasma-toast-letter-spacing',
|
20
20
|
lineHeight: '--plasma-toast-lineheight',
|
21
21
|
pilledBorderRadius: '--plasma-toast-pilled-border-radius',
|
22
|
-
|
22
|
+
contentLeftMargin: '--plasma-toast-content-left-margin',
|
23
|
+
contentLeftColor: '--plasma-toast-content-left-color',
|
23
24
|
closeIconMargin: '--plasma-toast-close-icon-margin',
|
24
25
|
closeIconColor: '--plasma-toast-close-icon-color',
|
25
26
|
closeIconColorOnHover: '--plasma-toast-close-icon-color-on-hover',
|
@@ -6,7 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
7
7
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
8
8
|
import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
|
9
|
-
import { DEFAULT_FADE, DEFAULT_POSITION, TIMER_DELAY } from '../utils';
|
9
|
+
import { DEFAULT_CLOSE_ICON_TYPE, DEFAULT_FADE, DEFAULT_POSITION, TIMER_DELAY } from '../utils';
|
10
10
|
export var ToastContext = /*#__PURE__*/createContext(null);
|
11
11
|
export var useToastInner = function useToastInner() {
|
12
12
|
var context = useContext(ToastContext);
|
@@ -118,6 +118,9 @@ export var ToastProviderHoc = function ToastProviderHoc(ToastComponent) {
|
|
118
118
|
size = _getShowToastCallSign.size,
|
119
119
|
view = _getShowToastCallSign.view,
|
120
120
|
width = _getShowToastCallSign.width,
|
121
|
+
_getShowToastCallSign4 = _getShowToastCallSign.closeIconType,
|
122
|
+
closeIconType = _getShowToastCallSign4 === void 0 ? DEFAULT_CLOSE_ICON_TYPE : _getShowToastCallSign4,
|
123
|
+
textColor = _getShowToastCallSign.textColor,
|
121
124
|
onHide = _getShowToastCallSign.onHide,
|
122
125
|
onShow = _getShowToastCallSign.onShow;
|
123
126
|
setToastProps({
|
@@ -131,7 +134,9 @@ export var ToastProviderHoc = function ToastProviderHoc(ToastComponent) {
|
|
131
134
|
pilled: pilled,
|
132
135
|
hasClose: hasClose,
|
133
136
|
size: size,
|
134
|
-
view: view
|
137
|
+
view: view,
|
138
|
+
closeIconType: closeIconType,
|
139
|
+
textColor: textColor
|
135
140
|
});
|
136
141
|
setToastInfo({
|
137
142
|
timeout: timeout,
|
@@ -2,6 +2,7 @@ import { buttonConfig } from '../Button';
|
|
2
2
|
import { component, mergeConfig } from '../../engines';
|
3
3
|
export var DEFAULT_FADE = true;
|
4
4
|
export var DEFAULT_POSITION = 'bottom';
|
5
|
+
export var DEFAULT_CLOSE_ICON_TYPE = 'default';
|
5
6
|
export var TIMER_DELAY = 300;
|
6
7
|
export var FADE_Z_INDEX = '9900';
|
7
8
|
export var TOAST_Z_INDEX = '9901';
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../Toast.tokens';
|
3
|
-
export var base = /*#__PURE__*/css(["&.", "{--plasma_private-left-
|
3
|
+
export var base = /*#__PURE__*/css(["&.", "{--plasma_private-content-left-margin:var(", ");--plasma_private-close-icon-margin:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(classes.toastPilled), tokens.contentLeftMargin, tokens.closeIconMargin, tokens.pilledBorderRadius);
|
@@ -9,14 +9,24 @@ export var config = {
|
|
9
9
|
variations: {
|
10
10
|
view: {
|
11
11
|
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
12
|
+
positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
13
|
+
negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
14
|
+
/**
|
15
|
+
* @deprecated
|
16
|
+
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
17
|
+
*/
|
12
18
|
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
19
|
+
/**
|
20
|
+
* @deprecated
|
21
|
+
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
22
|
+
*/
|
13
23
|
light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
|
14
24
|
},
|
15
25
|
size: {
|
16
|
-
m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.
|
26
|
+
m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
|
17
27
|
},
|
18
28
|
pilled: {
|
19
|
-
"true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.
|
29
|
+
"true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
|
20
30
|
},
|
21
31
|
closeIconType: {
|
22
32
|
"default": /*#__PURE__*/css(["", ":1rem;", ":1.5rem;"], toastTokens.closeIconButtonSize, toastTokens.closeIconSize),
|
@@ -4,21 +4,39 @@ import { action } from '@storybook/addon-actions';
|
|
4
4
|
import styled from 'styled-components';
|
5
5
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
6
6
|
|
7
|
-
import {
|
8
|
-
import { mergeConfig } from '../../../../engines';
|
9
|
-
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
7
|
+
import { WithTheme } from '../../../_helpers';
|
10
8
|
import { Button } from '../Button/Button';
|
11
9
|
import { PopupProvider } from '../Popup/Popup';
|
12
10
|
import { addNotification } from '../../../../../src/components/Notification';
|
13
11
|
import { NotificationsProvider } from '../Notification/Notification';
|
14
12
|
import { Modal } from '../Modal/Modal';
|
15
13
|
|
16
|
-
import { config } from './Toast.config';
|
17
14
|
import { Toast, ToastController, ToastProvider, useToast } from './Toast';
|
18
15
|
|
16
|
+
const views = ['default', 'positive', 'negative'];
|
17
|
+
const closeIconTypes = ['default', 'thin'];
|
18
|
+
|
19
19
|
const meta: Meta<typeof ToastController> = {
|
20
20
|
title: 'b2c/Overlay/Toast',
|
21
21
|
decorators: [WithTheme],
|
22
|
+
argTypes: {
|
23
|
+
view: {
|
24
|
+
options: views,
|
25
|
+
control: {
|
26
|
+
type: 'select',
|
27
|
+
},
|
28
|
+
},
|
29
|
+
closeIconType: {
|
30
|
+
options: closeIconTypes,
|
31
|
+
control: {
|
32
|
+
type: 'select',
|
33
|
+
},
|
34
|
+
},
|
35
|
+
textColor: {
|
36
|
+
control: 'color',
|
37
|
+
},
|
38
|
+
...disableProps(['size']),
|
39
|
+
},
|
22
40
|
};
|
23
41
|
|
24
42
|
export default meta;
|
@@ -61,6 +79,7 @@ const Container = styled.div`
|
|
61
79
|
export const ToastComponent: StoryComponent = {
|
62
80
|
args: {
|
63
81
|
text: 'Текст всплывающего уведомления',
|
82
|
+
textColor: undefined,
|
64
83
|
view: 'default',
|
65
84
|
closeIconType: 'default',
|
66
85
|
size: 'm',
|
@@ -68,14 +87,6 @@ export const ToastComponent: StoryComponent = {
|
|
68
87
|
enableContentLeft: true,
|
69
88
|
pilled: false,
|
70
89
|
},
|
71
|
-
argTypes: {
|
72
|
-
closeIconType: {
|
73
|
-
options: ['default', 'thin'],
|
74
|
-
control: {
|
75
|
-
type: 'select',
|
76
|
-
},
|
77
|
-
},
|
78
|
-
},
|
79
90
|
render: ({ enableContentLeft, ...args }) => (
|
80
91
|
<ToastContainer>
|
81
92
|
<Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
|
@@ -94,6 +105,8 @@ const StoryLiveDemo = ({
|
|
94
105
|
size,
|
95
106
|
hasClose,
|
96
107
|
enableContentLeft,
|
108
|
+
closeIconType,
|
109
|
+
textColor,
|
97
110
|
}: StoryProps) => {
|
98
111
|
const { showToast, hideToast } = useToast();
|
99
112
|
const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
|
@@ -114,6 +127,8 @@ const StoryLiveDemo = ({
|
|
114
127
|
view,
|
115
128
|
size,
|
116
129
|
hasClose,
|
130
|
+
closeIconType,
|
131
|
+
textColor,
|
117
132
|
onHide: action('onHide'),
|
118
133
|
onShow: action('onShow'),
|
119
134
|
});
|
@@ -141,7 +156,6 @@ export const LiveDemo: Story = {
|
|
141
156
|
type: 'inline-radio',
|
142
157
|
},
|
143
158
|
},
|
144
|
-
...argTypesFromConfig(mergeConfig(toastConfig, config)),
|
145
159
|
...disableProps(['role', 'onShow', 'onHide', 'contentLeft']),
|
146
160
|
},
|
147
161
|
parameters: {
|
@@ -167,6 +181,8 @@ const StoryComplex = ({
|
|
167
181
|
size,
|
168
182
|
hasClose,
|
169
183
|
enableContentLeft,
|
184
|
+
closeIconType,
|
185
|
+
textColor,
|
170
186
|
}: StoryProps) => {
|
171
187
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
172
188
|
|
@@ -185,6 +201,8 @@ const StoryComplex = ({
|
|
185
201
|
view,
|
186
202
|
size,
|
187
203
|
hasClose,
|
204
|
+
closeIconType,
|
205
|
+
textColor,
|
188
206
|
onHide: action('onHide'),
|
189
207
|
onShow: action('onShow'),
|
190
208
|
});
|
@@ -9,14 +9,24 @@ export var config = {
|
|
9
9
|
variations: {
|
10
10
|
view: {
|
11
11
|
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
12
|
+
positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
13
|
+
negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
14
|
+
/**
|
15
|
+
* @deprecated
|
16
|
+
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
17
|
+
*/
|
12
18
|
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
19
|
+
/**
|
20
|
+
* @deprecated
|
21
|
+
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
22
|
+
*/
|
13
23
|
light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
|
14
24
|
},
|
15
25
|
size: {
|
16
|
-
m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.
|
26
|
+
m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
|
17
27
|
},
|
18
28
|
pilled: {
|
19
|
-
"true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.
|
29
|
+
"true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
|
20
30
|
},
|
21
31
|
closeIconType: {
|
22
32
|
"default": /*#__PURE__*/css(["", ":1rem;", ":1.5rem;"], toastTokens.closeIconButtonSize, toastTokens.closeIconSize),
|
@@ -4,21 +4,39 @@ import { action } from '@storybook/addon-actions';
|
|
4
4
|
import styled from 'styled-components';
|
5
5
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
6
6
|
|
7
|
-
import {
|
8
|
-
import { mergeConfig } from '../../../../engines';
|
9
|
-
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
7
|
+
import { WithTheme } from '../../../_helpers';
|
10
8
|
import { Button } from '../Button/Button';
|
11
9
|
import { PopupProvider } from '../Popup/Popup';
|
12
10
|
import { addNotification } from '../../../../../src/components/Notification';
|
13
11
|
import { NotificationsProvider } from '../Notification/Notification';
|
14
12
|
import { Modal } from '../Modal/Modal';
|
15
13
|
|
16
|
-
import { config } from './Toast.config';
|
17
14
|
import { Toast, ToastController, ToastProvider, useToast } from './Toast';
|
18
15
|
|
16
|
+
const views = ['default', 'positive', 'negative'];
|
17
|
+
const closeIconTypes = ['default', 'thin'];
|
18
|
+
|
19
19
|
const meta: Meta<typeof ToastController> = {
|
20
20
|
title: 'web/Overlay/Toast',
|
21
21
|
decorators: [WithTheme],
|
22
|
+
argTypes: {
|
23
|
+
view: {
|
24
|
+
options: views,
|
25
|
+
control: {
|
26
|
+
type: 'select',
|
27
|
+
},
|
28
|
+
},
|
29
|
+
closeIconType: {
|
30
|
+
options: closeIconTypes,
|
31
|
+
control: {
|
32
|
+
type: 'select',
|
33
|
+
},
|
34
|
+
},
|
35
|
+
textColor: {
|
36
|
+
control: 'color',
|
37
|
+
},
|
38
|
+
...disableProps(['size']),
|
39
|
+
},
|
22
40
|
};
|
23
41
|
|
24
42
|
export default meta;
|
@@ -61,6 +79,7 @@ const Container = styled.div`
|
|
61
79
|
export const ToastComponent: StoryComponent = {
|
62
80
|
args: {
|
63
81
|
text: 'Текст всплывающего уведомления',
|
82
|
+
textColor: undefined,
|
64
83
|
view: 'default',
|
65
84
|
closeIconType: 'default',
|
66
85
|
size: 'm',
|
@@ -68,14 +87,6 @@ export const ToastComponent: StoryComponent = {
|
|
68
87
|
enableContentLeft: true,
|
69
88
|
pilled: false,
|
70
89
|
},
|
71
|
-
argTypes: {
|
72
|
-
closeIconType: {
|
73
|
-
options: ['default', 'thin'],
|
74
|
-
control: {
|
75
|
-
type: 'select',
|
76
|
-
},
|
77
|
-
},
|
78
|
-
},
|
79
90
|
render: ({ enableContentLeft, ...args }) => (
|
80
91
|
<ToastContainer>
|
81
92
|
<Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
|
@@ -94,6 +105,8 @@ const StoryLiveDemo = ({
|
|
94
105
|
size,
|
95
106
|
hasClose,
|
96
107
|
enableContentLeft,
|
108
|
+
closeIconType,
|
109
|
+
textColor,
|
97
110
|
}: StoryProps) => {
|
98
111
|
const { showToast, hideToast } = useToast();
|
99
112
|
const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
|
@@ -114,6 +127,8 @@ const StoryLiveDemo = ({
|
|
114
127
|
view,
|
115
128
|
size,
|
116
129
|
hasClose,
|
130
|
+
closeIconType,
|
131
|
+
textColor,
|
117
132
|
onHide: action('onHide'),
|
118
133
|
onShow: action('onShow'),
|
119
134
|
});
|
@@ -141,7 +156,6 @@ export const LiveDemo: Story = {
|
|
141
156
|
type: 'inline-radio',
|
142
157
|
},
|
143
158
|
},
|
144
|
-
...argTypesFromConfig(mergeConfig(toastConfig, config)),
|
145
159
|
...disableProps(['role', 'onShow', 'onHide', 'contentLeft']),
|
146
160
|
},
|
147
161
|
parameters: {
|
@@ -167,6 +181,8 @@ const StoryComplex = ({
|
|
167
181
|
size,
|
168
182
|
hasClose,
|
169
183
|
enableContentLeft,
|
184
|
+
closeIconType,
|
185
|
+
textColor,
|
170
186
|
}: StoryProps) => {
|
171
187
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
172
188
|
|
@@ -185,6 +201,8 @@ const StoryComplex = ({
|
|
185
201
|
view,
|
186
202
|
size,
|
187
203
|
hasClose,
|
204
|
+
closeIconType,
|
205
|
+
textColor,
|
188
206
|
onHide: action('onHide'),
|
189
207
|
onShow: action('onShow'),
|
190
208
|
});
|
@@ -74,10 +74,6 @@ export interface NotificationProps extends AsProps, Omit<HTMLAttributes<HTMLDivE
|
|
74
74
|
* Вид закрывающей иконки в Notification.
|
75
75
|
*/
|
76
76
|
closeIconType?: 'default' | 'thin';
|
77
|
-
/**
|
78
|
-
* @description Только для применения в рамках SSR.
|
79
|
-
*/
|
80
|
-
UNSAFE_SSR_ENABLED?: boolean;
|
81
77
|
}
|
82
78
|
export interface NotificationPortalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
83
79
|
/**
|
@@ -93,9 +89,5 @@ export interface NotificationPortalProps extends Omit<HTMLAttributes<HTMLDivElem
|
|
93
89
|
* @default bottom-right
|
94
90
|
*/
|
95
91
|
placement?: NotificationPlacement;
|
96
|
-
/**
|
97
|
-
* @description Только для применения в рамках SSR.
|
98
|
-
*/
|
99
|
-
UNSAFE_SSR_ENABLED?: boolean;
|
100
92
|
}
|
101
93
|
//# sourceMappingURL=Notification.types.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Notification.types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE3E,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,MAAM,OAAO,OAAO,CAAC;AAEtD,eAAO,MAAM,UAAU;;;CAGtB,CAAC;AAEF,oBAAY,yBAAyB,GAAG,MAAM,OAAO,UAAU,CAAC;AAChE,oBAAY,qBAAqB,GAAG,cAAc,GAAG,aAAa,CAAC;AAEnE,oBAAY,UAAU,GAAG;IACrB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC/B,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC5B,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC7C,CAAC;AAEF,oBAAY,aAAa,GAAG;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC7F;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;
|
1
|
+
{"version":3,"file":"Notification.types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE3E,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,MAAM,OAAO,OAAO,CAAC;AAEtD,eAAO,MAAM,UAAU;;;CAGtB,CAAC;AAEF,oBAAY,yBAAyB,GAAG,MAAM,OAAO,UAAU,CAAC;AAChE,oBAAY,qBAAqB,GAAG,cAAc,GAAG,aAAa,CAAC;AAEnE,oBAAY,UAAU,GAAG;IACrB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC/B,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC5B,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC7C,CAAC;AAEF,oBAAY,aAAa,GAAG;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC7F;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CACtC;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC1F;;OAEG;IACH,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IACnH;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACrC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"NotificationsPortal.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationsPortal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAqD,MAAM,OAAO,CAAC;AAUrF,OAAO,EAAE,uBAAuB,EAAqB,MAAM,sBAAsB,CAAC;AAalF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,uBAAuB,
|
1
|
+
{"version":3,"file":"NotificationsPortal.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationsPortal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAqD,MAAM,OAAO,CAAC;AAUrF,OAAO,EAAE,uBAAuB,EAAqB,MAAM,sBAAsB,CAAC;AAalF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,uBAAuB,CAmC3D,CAAC"}
|
@@ -7,9 +7,5 @@ export declare const NotificationsProvider: FC<{
|
|
7
7
|
config: ComponentConfig<string, Variants, PropsType<Variants>, NotificationProps & HTMLAttributes<HTMLDivElement>>;
|
8
8
|
frame?: string;
|
9
9
|
placement?: NotificationPlacement;
|
10
|
-
/**
|
11
|
-
* @description Только для применения в рамках SSR.
|
12
|
-
*/
|
13
|
-
UNSAFE_SSR_ENABLED?: boolean;
|
14
10
|
}>;
|
15
11
|
//# sourceMappingURL=NotificationsProvider.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"NotificationsProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationsProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI1D,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEhF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IACnH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,qBAAqB,CAAC;
|
1
|
+
{"version":3,"file":"NotificationsProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationsProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI1D,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEhF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IACnH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACrC,CAOA,CAAC"}
|
@@ -50,5 +50,7 @@ export declare const CloseIconWrapper: import("@linaria/react").StyledMeta & imp
|
|
50
50
|
} & import("react").RefAttributes<HTMLButtonElement>))>;
|
51
51
|
export declare const StyledOverlay: import("@linaria/react").StyledMeta & import("react").FC<import("../Overlay").OverlayProps>;
|
52
52
|
export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
53
|
-
export declare const StyledContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> &
|
53
|
+
export declare const StyledContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
|
54
|
+
textColor?: string | undefined;
|
55
|
+
}>;
|
54
56
|
//# sourceMappingURL=Toast.styles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,IAAI,0CAUhB,CAAC;AAEF,eAAO,MAAM,UAAU;cAA0B,MAAM;eAAa,OAAO;;EAmD1E,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAU5B,CAAC;AAEF,eAAO,MAAM,aAAa,6FA4BzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,
|
1
|
+
{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,IAAI,0CAUhB,CAAC;AAEF,eAAO,MAAM,UAAU;cAA0B,MAAM;eAAa,OAAO;;EAmD1E,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAU5B,CAAC;AAEF,eAAO,MAAM,aAAa,6FA4BzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAK7B,CAAC;AAEF,eAAO,MAAM,aAAa;;EAEzB,CAAC"}
|
@@ -19,7 +19,8 @@ export declare const tokens: {
|
|
19
19
|
letterSpacing: string;
|
20
20
|
lineHeight: string;
|
21
21
|
pilledBorderRadius: string;
|
22
|
-
|
22
|
+
contentLeftMargin: string;
|
23
|
+
contentLeftColor: string;
|
23
24
|
closeIconMargin: string;
|
24
25
|
closeIconColor: string;
|
25
26
|
closeIconColorOnHover: string;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Toast.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,MAAM
|
1
|
+
{"version":3,"file":"Toast.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;CAwBlB,CAAC"}
|
@@ -56,6 +56,10 @@ export declare type ToastControllerProps = {
|
|
56
56
|
* Вид закрывающей иконки в Notification.
|
57
57
|
*/
|
58
58
|
closeIconType?: 'default' | 'thin';
|
59
|
+
/**
|
60
|
+
* Цвет текста (по умолчанию берётся цвет из view)
|
61
|
+
*/
|
62
|
+
textColor?: string;
|
59
63
|
};
|
60
64
|
export declare type CustomToastProps = {
|
61
65
|
/**
|
@@ -96,6 +100,10 @@ export declare type CustomToastProps = {
|
|
96
100
|
* Вид закрывающей иконки в Notification.
|
97
101
|
*/
|
98
102
|
closeIconType?: 'default' | 'thin';
|
103
|
+
/**
|
104
|
+
* Цвет текста (по умолчанию берётся цвет из view)
|
105
|
+
*/
|
106
|
+
textColor?: string;
|
99
107
|
/**
|
100
108
|
* Колбек при нажатии на кнопку закрытия.
|
101
109
|
*/
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Toast.types.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvD,oBAAY,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AACnD,oBAAY,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7C,oBAAY,oBAAoB,GAAG;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;
|
1
|
+
{"version":3,"file":"Toast.types.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvD,oBAAY,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AACnD,oBAAY,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7C,oBAAY,oBAAoB,GAAG;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC,CAAC;AAEF,oBAAY,UAAU,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG,gBAAgB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/ToastProvider/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AACnG,OAAO,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAA0C,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGzF,OAAO,KAAK,EAAE,SAAS,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEhH,eAAO,MAAM,YAAY,wCAA+C,CAAC;AAEzE,eAAO,MAAM,aAAa,wBAMzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AA4BF,eAAO,MAAM,gBAAgB;cACwB,SAAS;
|
1
|
+
{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/ToastProvider/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AACnG,OAAO,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAA0C,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGzF,OAAO,KAAK,EAAE,SAAS,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEhH,eAAO,MAAM,YAAY,wCAA+C,CAAC;AAEzE,eAAO,MAAM,aAAa,wBAMzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AA4BF,eAAO,MAAM,gBAAgB;cACwB,SAAS;iBAuGzD,CAAC"}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
export declare const DEFAULT_FADE = true;
|
3
3
|
export declare const DEFAULT_POSITION = "bottom";
|
4
|
+
export declare const DEFAULT_CLOSE_ICON_TYPE = "default";
|
4
5
|
export declare const TIMER_DELAY = 300;
|
5
6
|
export declare const FADE_Z_INDEX = "9900";
|
6
7
|
export declare const TOAST_Z_INDEX = "9901";
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/utils.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY,OAAO,CAAC;AACjC,eAAO,MAAM,gBAAgB,WAAW,CAAC;AACzC,eAAO,MAAM,WAAW,MAAM,CAAC;AAC/B,eAAO,MAAM,YAAY,SAAS,CAAC;AACnC,eAAO,MAAM,aAAa,SAAS,CAAC;AAEpC,eAAO,MAAM,SAAS;;;CAGrB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAAgC,CAAC"}
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/utils.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY,OAAO,CAAC;AACjC,eAAO,MAAM,gBAAgB,WAAW,CAAC;AACzC,eAAO,MAAM,uBAAuB,YAAY,CAAC;AACjD,eAAO,MAAM,WAAW,MAAM,CAAC;AAC/B,eAAO,MAAM,YAAY,SAAS,CAAC;AACnC,eAAO,MAAM,aAAa,SAAS,CAAC;AAEpC,eAAO,MAAM,SAAS;;;CAGrB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAAgC,CAAC"}
|
@@ -7,7 +7,17 @@ export declare const config: {
|
|
7
7
|
variations: {
|
8
8
|
view: {
|
9
9
|
default: import("@linaria/core").LinariaClassName;
|
10
|
+
positive: import("@linaria/core").LinariaClassName;
|
11
|
+
negative: import("@linaria/core").LinariaClassName;
|
12
|
+
/**
|
13
|
+
* @deprecated
|
14
|
+
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
15
|
+
*/
|
10
16
|
dark: import("@linaria/core").LinariaClassName;
|
17
|
+
/**
|
18
|
+
* @deprecated
|
19
|
+
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
20
|
+
*/
|
11
21
|
light: import("@linaria/core").LinariaClassName;
|
12
22
|
};
|
13
23
|
size: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Toast.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Toast/Toast.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM
|
1
|
+
{"version":3,"file":"Toast.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Toast/Toast.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;YA+BP;;;eAGG;;YAQH;;;eAGG;;;;;;;;;;;;;;CA4Cd,CAAC"}
|
@@ -3,6 +3,8 @@ export { useToast } from '../../../../components/Toast';
|
|
3
3
|
export declare const Toast: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
|
4
4
|
view: {
|
5
5
|
default: import("@linaria/core").LinariaClassName;
|
6
|
+
positive: import("@linaria/core").LinariaClassName;
|
7
|
+
negative: import("@linaria/core").LinariaClassName;
|
6
8
|
dark: import("@linaria/core").LinariaClassName;
|
7
9
|
light: import("@linaria/core").LinariaClassName;
|
8
10
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Toast/Toast.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAIxD,eAAO,MAAM,KAAK
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Toast/Toast.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAIxD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;6KAA0B,CAAC;AAC7C,eAAO,MAAM,eAAe,wGAA4B,CAAC;AACzD,eAAO,MAAM,aAAa;;iBAAoC,CAAC"}
|
@@ -7,7 +7,17 @@ export declare const config: {
|
|
7
7
|
variations: {
|
8
8
|
view: {
|
9
9
|
default: import("@linaria/core").LinariaClassName;
|
10
|
+
positive: import("@linaria/core").LinariaClassName;
|
11
|
+
negative: import("@linaria/core").LinariaClassName;
|
12
|
+
/**
|
13
|
+
* @deprecated
|
14
|
+
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
15
|
+
*/
|
10
16
|
dark: import("@linaria/core").LinariaClassName;
|
17
|
+
/**
|
18
|
+
* @deprecated
|
19
|
+
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
20
|
+
*/
|
11
21
|
light: import("@linaria/core").LinariaClassName;
|
12
22
|
};
|
13
23
|
size: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Toast.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Toast/Toast.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM
|
1
|
+
{"version":3,"file":"Toast.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Toast/Toast.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;YA+BP;;;eAGG;;YAQH;;;eAGG;;;;;;;;;;;;;;CA4Cd,CAAC"}
|