@kvell-group/ui 1.19.4 → 1.19.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.19.4",
+  "version": "1.19.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kvell-group/ui.git"

package/src/components/Alert/Alert.module.css

@@ -0,0 +1,28 @@
+.root {
+  padding: rem(16px);
+  box-shadow:
+    0px 3px 10px -2px rgba(20, 21, 26, 0.02),
+    0px 10px 16px -3px rgba(20, 21, 26, 0.05);
+
+  &[data-variant='warning'] {
+    --alert-bg: var(--color-background-surface-warning-subtle);
+    --alert-bd: rem(1px) solid var(--color-border-action-normal);
+    --alert-color: var(--color-icon-status-warning);
+  }
+}
+
+.wrapper {
+  align-items: flex-start;
+}
+
+.icon {
+  margin-inline-end: rem(12px);
+}
+
+.message {
+  font-weight: 500;
+  font-size: var(--mantine-font-size-body-s);
+  line-height: var(--mantine-line-height-body-s);
+  letter-spacing: var(--mantine-spacing-body-s);
+  color: var(--color-text-base-primary);
+}

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { KvellUiProvider } from '@/components/KvellUiProvider'
+
+import { theme } from '@/theme'
+import { Alert } from '@/components/Alert'
+import { AlertVariants, WARNING_ALERT_VARIANT } from '@/components/Alert/constants'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Alert',
+  argTypes: { variant: AlertVariants },
+  component: Alert,
+  decorators: (Story) => (
+    <KvellUiProvider theme={theme}>
+      <Story />
+    </KvellUiProvider>
+  ),
+} satisfies Meta<typeof Alert>
+
+type Story = StoryObj<typeof meta>
+
+// ----------------------------------------------------------------------
+
+export const ComponentAlert: Story = {
+  args: {
+    variant: WARNING_ALERT_VARIANT,
+    children: 'Проверьте данные карты перед оплатой',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: AlertVariants,
+    },
+  },
+}
+
+export const WarningAlert: Story = {
+  args: {
+    variant: WARNING_ALERT_VARIANT,
+    children: 'Оплата будет доступна после подтверждения банком',
+  },
+}
+
+export const CustomIconAlert: Story = {
+  args: {
+    icon: null,
+    children: 'Алерт без иконки',
+  },
+}
+
+export const WarningAlertWithoutIcon: Story = {
+  args: {
+    variant: WARNING_ALERT_VARIANT,
+    icon: null,
+    children: 'Алерт с вариантом warning, но без иконки (icon явно передан как null)',
+  },
+}
+
+export const DefaultAlert: Story = {
+  args: {
+    children: 'Алерт без variant и без icon — прозрачный фон, без иконки',
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react'
+import { Alert as MantineAlert } from '@mantine/core'
+import type { AlertProps as MantineAlertProps } from '@mantine/core'
+import { RiErrorWarningFill } from '@remixicon/react'
+import classNames from './Alert.module.css'
+import { WARNING_ALERT_VARIANT } from './constants'
+import type { ExtendedAlertVariant } from './types'
+
+// ----------------------------------------------------------------------
+
+export type AlertProps = Omit<MantineAlertProps, 'variant'> & { variant?: ExtendedAlertVariant }
+
+const variantIcons: Partial<Record<ExtendedAlertVariant & string, React.ReactNode>> = {
+  [WARNING_ALERT_VARIANT]: <RiErrorWarningFill size={20} />,
+}
+
+// ----------------------------------------------------------------------
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  const { variant, icon, ...others } = props
+
+  const resolvedIcon = icon === undefined ? (variant ? variantIcons[variant] : null) : icon
+
+  return (
+    <MantineAlert
+      ref={ref}
+      variant={variant ?? 'transparent'}
+      icon={resolvedIcon}
+      {...others}
+      classNames={classNames}
+    />
+  )
+})

package/src/components/Alert/constants.ts

@@ -0,0 +1,3 @@
+export const WARNING_ALERT_VARIANT = 'warning' as const
+
+export const AlertVariants = [WARNING_ALERT_VARIANT]

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert } from './Alert'

package/src/components/Alert/types.ts

@@ -0,0 +1,8 @@
+import { AlertVariants } from './constants'
+import type { AlertProps as MantineAlertProps } from '@mantine/core'
+
+// ----------------------------------------------------------------------
+
+type AlertVariantsType = typeof AlertVariants
+
+export type ExtendedAlertVariant = MantineAlertProps['variant'] | AlertVariantsType[number]

package/src/components/Badge/Badge.module.css

@@ -15,6 +15,7 @@
   text-transform: none;
   font-weight: 500;
   letter-spacing: var(--badge-ls);
+  cursor: inherit;
 
   &[data-size='xs'] {
     --badge-radius: var(--mantine-radius-xs);

package/src/components/Modal/Modal.module.css

@@ -20,6 +20,10 @@
   }
 }
 
+.header {
+  align-items: start;
+}
+
 .body {
   padding-bottom: rem(32px);
 }

package/src/constants/font-variants.ts

@@ -19,6 +19,7 @@ export const BODY_S_BOLD_FONT_VARIANT = 'body-s-bold' as const
 //caption
 export const CAPTION_L_MEDIUM_FONT_VARIANT = 'caption-l-medium' as const
 export const CAPTION_L_REGULAR_FONT_VARIANT = 'caption-l-regular' as const
+export const CAPTION_M_MEDIUM_FONT_VARIANT = 'caption-m-medium' as const
 export const CAPTION_M_REGULAR_FONT_VARIANT = 'caption-m-regular' as const
 
 // ----------------------------------------------------------------------

package/src/index.ts

@@ -21,6 +21,7 @@ export { PinInput } from './components/Inputs/PinInput'
 export * from './components/Notifications'
 
 //components
+export { Alert } from './components/Alert'
 export * from './components/Button'
 export { CardLogoByPan } from './components/CardLogoByPan'
 export { Loader } from './components/Loader'

package/src/styles/typography.module.css

@@ -131,6 +131,14 @@ p.caption-l-regular,
   letter-spacing: var(--mantine-spacing-caption-l);
 }
 
+.caption-m-medium {
+  font-family: var(--mantine-font-family);
+  font-weight: 500;
+  font-size: var(--mantine-font-size-caption-m);
+  line-height: var(--mantine-line-height-caption-m);
+  letter-spacing: var(--mantine-spacing-caption-m);
+}
+
 .caption-m-regular {
   font-family: var(--mantine-font-family);
   font-weight: 400;