@kvell-group/ui 1.19.7 → 1.19.8
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/package.json
CHANGED
|
@@ -9,6 +9,13 @@
|
|
|
9
9
|
--alert-bd: rem(1px) solid var(--color-border-action-normal);
|
|
10
10
|
--alert-color: var(--color-icon-status-warning);
|
|
11
11
|
}
|
|
12
|
+
|
|
13
|
+
&[data-variant='danger'] {
|
|
14
|
+
--alert-bg: var(--color-background-surface-destructive);
|
|
15
|
+
--alert-bd: rem(1px) solid var(--color-border-action-destructive);
|
|
16
|
+
--alert-color: var(--color-icon-status-destructive);
|
|
17
|
+
--alert-message-color: var(--color-text-status-destructive);
|
|
18
|
+
}
|
|
12
19
|
}
|
|
13
20
|
|
|
14
21
|
.wrapper {
|
|
@@ -24,5 +31,5 @@
|
|
|
24
31
|
font-size: var(--mantine-font-size-body-s);
|
|
25
32
|
line-height: var(--mantine-line-height-body-s);
|
|
26
33
|
letter-spacing: var(--mantine-spacing-body-s);
|
|
27
|
-
color: var(--color-text-base-primary);
|
|
34
|
+
color: var(--alert-message-color, var(--color-text-base-primary));
|
|
28
35
|
}
|
|
@@ -4,7 +4,11 @@ import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
|
4
4
|
|
|
5
5
|
import { theme } from '@/theme'
|
|
6
6
|
import { Alert } from '@/components/Alert'
|
|
7
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
AlertVariants,
|
|
9
|
+
DANGER_ALERT_VARIANT,
|
|
10
|
+
WARNING_ALERT_VARIANT,
|
|
11
|
+
} from '@/components/Alert/constants'
|
|
8
12
|
|
|
9
13
|
// ----------------------------------------------------------------------
|
|
10
14
|
|
|
@@ -58,6 +62,13 @@ export const WarningAlertWithoutIcon: Story = {
|
|
|
58
62
|
},
|
|
59
63
|
}
|
|
60
64
|
|
|
65
|
+
export const DangerAlert: Story = {
|
|
66
|
+
args: {
|
|
67
|
+
variant: DANGER_ALERT_VARIANT,
|
|
68
|
+
children: 'Оплата отклонена банком',
|
|
69
|
+
},
|
|
70
|
+
}
|
|
71
|
+
|
|
61
72
|
export const DefaultAlert: Story = {
|
|
62
73
|
args: {
|
|
63
74
|
children: 'Алерт без variant и без icon — прозрачный фон, без иконки',
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { forwardRef } from 'react'
|
|
2
2
|
import { Alert as MantineAlert } from '@mantine/core'
|
|
3
3
|
import type { AlertProps as MantineAlertProps } from '@mantine/core'
|
|
4
|
-
import { RiErrorWarningFill } from '@remixicon/react'
|
|
4
|
+
import { RiAlertFill, RiErrorWarningFill } from '@remixicon/react'
|
|
5
5
|
import classNames from './Alert.module.css'
|
|
6
|
-
import { WARNING_ALERT_VARIANT } from './constants'
|
|
6
|
+
import { DANGER_ALERT_VARIANT, WARNING_ALERT_VARIANT } from './constants'
|
|
7
7
|
import type { ExtendedAlertVariant } from './types'
|
|
8
8
|
|
|
9
9
|
// ----------------------------------------------------------------------
|
|
@@ -12,6 +12,7 @@ export type AlertProps = Omit<MantineAlertProps, 'variant'> & { variant?: Extend
|
|
|
12
12
|
|
|
13
13
|
const variantIcons: Partial<Record<ExtendedAlertVariant & string, React.ReactNode>> = {
|
|
14
14
|
[WARNING_ALERT_VARIANT]: <RiErrorWarningFill size={20} />,
|
|
15
|
+
[DANGER_ALERT_VARIANT]: <RiAlertFill size={20} />,
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
// ----------------------------------------------------------------------
|