feat(plasma-web/b2c): add Overlay component

packages/plasma-b2c/src/components/Overlay/Overlay.stories.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { Button } from '../Button/Button';
+
+import { Overlay } from '.';
+
+const onOverlayClick = action('onOverlayClick');
+
+export default {
+    title: 'Controls/Overlay',
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        isClickable: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        withBlur: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: false } },
+        },
+        ...disableProps(['onOverlayClick', 'zIndex']),
+    },
+} as Meta;
+
+type StoryOverlayProps = ComponentProps<typeof Overlay>;
+
+const StyledButton = styled(Button)`
+    margin: 1rem;
+    width: 15rem;
+`;
+
+const StyledCloseButton = styled(Button)`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 101;
+    transform: translate(-50%, -50%);
+    width: 15rem;
+`;
+
+const StoryDefault = (props: StoryOverlayProps) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    return (
+        <>
+            <StyledButton text="Показать overlay" onClick={() => setIsVisible(true)} />
+            {isVisible && (
+                <>
+                    <Overlay {...props} />
+                    <StyledCloseButton text=" Скрыть overlay" onClick={() => setIsVisible(false)} />
+                </>
+            )}
+        </>
+    );
+};
+
+export const Default: StoryObj<StoryOverlayProps> = {
+    args: {
+        zIndex: '100',
+        backgroundColorProperty: 'var(--plasma-colors-overlay-soft)',
+        withBlur: false,
+        transparent: false,
+        isClickable: true,
+        onOverlayClick,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};

packages/plasma-b2c/src/components/Overlay/index.ts

@@ -0,0 +1,2 @@
+export { Overlay } from '@salutejs/plasma-new-hope/styled-components';
+export type { OverlayProps } from '@salutejs/plasma-new-hope/styled-components';

packages/plasma-b2c/src/index.ts

@@ -18,6 +18,7 @@ export * from './components/List';
 export * from './components/Modal';
 export * from './components/ModalBase';
 export * from './components/Notification';
+export * from './components/Overlay';
 export * from './components/PaginationDots';
 export * from './components/Popup';
 export * from './components/PopupBase';

packages/plasma-web/src/components/Overlay/Overlay.stories.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { Button } from '../Button/Button';
+
+import { Overlay } from '.';
+
+const onOverlayClick = action('onOverlayClick');
+
+export default {
+    title: 'Controls/Overlay',
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        isClickable: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        withBlur: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: false } },
+        },
+        ...disableProps(['onOverlayClick', 'zIndex']),
+    },
+} as Meta;
+
+type StoryOverlayProps = ComponentProps<typeof Overlay>;
+
+const StyledButton = styled(Button)`
+    margin: 1rem;
+    width: 15rem;
+`;
+
+const StyledCloseButton = styled(Button)`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 101;
+    transform: translate(-50%, -50%);
+    width: 15rem;
+`;
+
+const StoryDefault = (props: StoryOverlayProps) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    return (
+        <>
+            <StyledButton text="Показать overlay" onClick={() => setIsVisible(true)} />
+            {isVisible && (
+                <>
+                    <Overlay {...props} />
+                    <StyledCloseButton view="primary" text=" Скрыть overlay" onClick={() => setIsVisible(false)} />
+                </>
+            )}
+        </>
+    );
+};
+
+export const Default: StoryObj<StoryOverlayProps> = {
+    args: {
+        zIndex: '100',
+        backgroundColorProperty: 'var(--plasma-colors-overlay-soft)',
+        withBlur: false,
+        transparent: false,
+        isClickable: true,
+        onOverlayClick,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};

packages/plasma-web/src/components/Overlay/index.ts

@@ -0,0 +1,2 @@
+export { Overlay } from '@salutejs/plasma-new-hope/styled-components';
+export type { OverlayProps } from '@salutejs/plasma-new-hope/styled-components';

packages/plasma-web/src/index.ts

@@ -18,6 +18,7 @@ export * from './components/List';
 export * from './components/Modal';
 export * from './components/ModalBase';
 export * from './components/Notification';
+export * from './components/Overlay';
 export * from './components/PaginationDots';
 export * from './components/Popup';
 export * from './components/PopupBase';