feat(alert): add component (#548)

* refactor(plate): change layout, change closer size

* feat(alert): add component

* chore: update screenshots

* fix(alert): fixes

* fix(alert): screenshots

* feat(plate): add buttons

* chore(alert): add buttons

* fix(alert): change button margin, add tests

* fix(plate): fix styles

* feat(plate): styles

* feat(plate): max content width

* feat(alert): max content width

* feat(plate): max content width

* feat(plate): colorize icons, update docs

* feat(plate): use badge, fix margin

packages/alert/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "@alfalab/core-components-alert",
+    "version": "1.0.0",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "main": "dist/index.js",
+    "module": "./dist/esm/index.js",
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1"
+    },
+    "dependencies": {
+        "@alfalab/core-components-plate": "^1.3.4",
+        "classnames": "^2.2.6"
+    }
+}

packages/alert/src/Component.screenshots.test.tsx

@@ -0,0 +1,56 @@
+import { screenshotTesting, getComponentScreenshotTestCases } from '../../utils';
+
+const clip = { x: 0, y: 0, width: 1920, height: 100 };
+
+describe(
+    'Alert | screenshots views',
+    screenshotTesting({
+        cases: getComponentScreenshotTestCases({
+            componentName: 'alert',
+            knobs: {
+                view: ['common', 'negative', 'positive', 'attention'],
+            },
+        }),
+        it,
+        beforeAll,
+        afterAll,
+        expect,
+        screenshotOpts: { clip },
+    }),
+);
+
+describe(
+    'Alert | screenshots with title and closer',
+    screenshotTesting({
+        cases: getComponentScreenshotTestCases({
+            componentName: 'alert',
+            knobs: {
+                title: ['Title', ''],
+                hasCloser: [true, false],
+            },
+        }),
+        it,
+        beforeAll,
+        afterAll,
+        expect,
+        screenshotOpts: { clip },
+    }),
+);
+
+describe(
+    'Alert | screenshots with buttons',
+    screenshotTesting({
+        cases: getComponentScreenshotTestCases({
+            componentName: 'alert',
+            knobs: {
+                buttons: [true],
+                title: ['Title', ''],
+            },
+        }),
+        it,
+        beforeAll,
+        afterAll,
+        expect,
+        screenshotOpts: { clip: { ...clip, height: 140 } },
+    }),
+);

packages/alert/src/Component.stories.mdx

@@ -0,0 +1,55 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { select, text, boolean } from '@storybook/addon-knobs';
+import { Container, Row, Col } from 'storybook/blocks/grid';
+import { ComponentHeader } from 'storybook/blocks/component-header';
+
+import { Alert } from './Component';
+import { Button } from '../../button/src';
+
+import { name, version } from '../package.json';
+
+<Meta
+    title='Компоненты'
+    component={Alert}
+/>
+
+
+<!-- Canvas -->
+
+<Story name='Alert'>
+    <Alert
+        view={select('view', ['common', 'negative', 'positive', 'attention'], 'common')}
+        title={text('title', '')}
+        hasCloser={boolean('hasCloser', false)}
+        buttons={boolean('buttons', false) ? [
+            <Button>Хорошо</Button>,
+            <Button>Подробнее</Button>
+        ] : null}
+    >
+        {text('children', 'Вам одобрено. Согласитесь на предложение')}
+    </Alert>
+</Story>
+
+
+<!-- Docs -->
+
+<ComponentHeader
+    name='Alert'
+    version={version}
+    package='@alfalab/core-components-alert'
+    stage={1}
+/>
+
+```tsx
+import { Alert } from '@alfalab/core-components-alert';
+```
+
+## Alert
+
+Информирует пользователя о чем-либо. Может использоваться как сообщение, комментарий или предупреждение от системы.
+
+<Alert>
+    Вам одобрено. Согласитесь на предложение
+</Alert>
+
+<Props of={Alert} />

packages/alert/src/Component.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import cn from 'classnames';
+
+import { Plate, PlateProps } from '@alfalab/core-components-plate';
+
+import styles from './index.module.css';
+
+export type AlertProps = Omit<PlateProps, 'foldable' | 'defaultFolded' | 'leftAddons'>;
+
+export const Alert: FC<AlertProps> = ({ className, title, ...restProps }) => (
+    <Plate
+        className={cn(styles.component, className)}
+        buttonsClassName={styles.buttons}
+        contentClassName={styles.content}
+        title={title ? <span className={styles.title}>{title}</span> : null}
+        {...restProps}
+    />
+);

packages/alert/src/index.module.css

@@ -0,0 +1,25 @@
+@import '../../themes/src/default.css';
+
+.component {
+    border-radius: 2px 0 0 2px;
+    border-top: 0;
+    border-right: 0;
+    border-bottom: 0;
+    border-left-width: 2px;
+    padding-top: var(--gap-s);
+    padding-bottom: var(--gap-s);
+    padding-right: var(--gap-s);
+    min-height: 48px;
+}
+
+.buttons {
+    margin-top: var(--gap-m);
+}
+
+.title {
+    @mixin accent_primary_medium;
+}
+
+.content {
+    max-width: none;
+}

packages/alert/src/index.ts

@@ -0,0 +1 @@
+export * from './Component';

packages/alert/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "include": ["src", "../../typings"],
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "dist",
+        "rootDirs": ["src"],
+        "baseUrl": ".",
+        "paths": {
+            "@alfalab/core-components-*": ["../*/src"]
+        }
+    },
+    "references": [{ "path": "../plate" }]
+}

packages/plate/src/Component.stories.mdx

@@ -1,8 +1,17 @@
-import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import {select, text, boolean} from '@storybook/addon-knobs';
+import { Container, Row } from 'storybook/blocks/grid';
 import { ComponentHeader } from 'storybook/blocks/component-header';
-import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'
+
+import { CheckmarkOnCircleMIcon } from '@alfalab/icons-glyph';
+import { AlertCircleMIcon } from '@alfalab/icons-glyph';
+import { InformationCircleMIcon } from '@alfalab/icons-glyph';
+
+
 import { Plate } from './Component';
+import { Button } from '../../button/src';
+import { Badge } from '../../badge/src';
+
 import { name, version } from '../package.json';
 
 
@@ -19,6 +28,11 @@ import { name, version } from '../package.json';
         title={text('title', 'Поздравляем, полный успех')}
         foldable={boolean('foldable', false)}
         hasCloser={boolean('hasCloser', false)}
+        leftAddons={boolean('leftAddons', true) ? <CheckmarkOnCircleMIcon /> : null}
+        buttons={boolean('buttons', false) ? [
+            <Button>Хорошо</Button>,
+            <Button>Подробнее</Button>
+        ] : null}
     >
         {text('children', 'Вам одобрено. Согласитесь на предложение')}
     </Plate>
@@ -39,14 +53,53 @@ import { Plate } from '@alfalab/core-components-plate';
 
 Компонент плашки.
 
-<Plate
-    view='positive'
-    title='Компонент плашки'
-    leftAddons={
-        <CheckmarkCircleMIcon/>
-    }
->
-    Самая обыкновенная плашка
-</Plate>
+<Preview>
+    <>
+        <Row>
+            <Plate
+                view='common'
+                title='Компонент плашки'
+                leftAddons={
+                    <Badge view='icon' iconColor='secondary' content={<InformationCircleMIcon/>} />
+                }
+            >
+                Самая обыкновенная плашка
+            </Plate>
+        </Row>
+        <Row>
+            <Plate
+                view='positive'
+                title='Компонент плашки'
+                leftAddons={
+                    <Badge view='icon' iconColor='positive' content={<CheckmarkOnCircleMIcon/>} />
+                }
+            >
+                Самая обыкновенная плашка
+            </Plate>
+        </Row>
+        <Row>
+            <Plate
+                view='negative'
+                title='Компонент плашки'
+                leftAddons={
+                    <Badge view='icon' iconColor='negative' content={<AlertCircleMIcon/>} />
+                }
+            >
+                Самая обыкновенная плашка
+            </Plate>
+        </Row>
+        <Row>
+            <Plate
+                view='attention'
+                title='Компонент плашки'
+                leftAddons={
+                    <Badge view='icon' iconColor='attention' content={<AlertCircleMIcon/>} />
+                }
+            >
+                Самая обыкновенная плашка
+            </Plate>
+        </Row>
+    </>
+</Preview>
 
 <Props of={Plate} />