From f7dcdd9275823deb6b5674b87a69648564266189 Mon Sep 17 00:00:00 2001 From: Krivonos Aleksandr Date: Mon, 5 Feb 2024 23:28:09 +0300 Subject: [PATCH] feat(plasma-web/b2c): add Overlay component --- .../components/Overlay/Overlay.stories.tsx | 76 +++++++++++++++++++ .../src/components/Overlay/index.ts | 2 + packages/plasma-b2c/src/index.ts | 1 + .../components/Overlay/Overlay.stories.tsx | 76 +++++++++++++++++++ .../src/components/Overlay/index.ts | 2 + packages/plasma-web/src/index.ts | 1 + 6 files changed, 158 insertions(+) create mode 100644 packages/plasma-b2c/src/components/Overlay/Overlay.stories.tsx create mode 100644 packages/plasma-b2c/src/components/Overlay/index.ts create mode 100644 packages/plasma-web/src/components/Overlay/Overlay.stories.tsx create mode 100644 packages/plasma-web/src/components/Overlay/index.ts diff --git a/packages/plasma-b2c/src/components/Overlay/Overlay.stories.tsx b/packages/plasma-b2c/src/components/Overlay/Overlay.stories.tsx new file mode 100644 index 0000000000..e02d0fd672 --- /dev/null +++ b/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; + +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 ( + <> + setIsVisible(true)} /> + {isVisible && ( + <> + + setIsVisible(false)} /> + + )} + + ); +}; + +export const Default: StoryObj = { + args: { + zIndex: '100', + backgroundColorProperty: 'var(--plasma-colors-overlay-soft)', + withBlur: false, + transparent: false, + isClickable: true, + onOverlayClick, + }, + render: (args) => , +}; diff --git a/packages/plasma-b2c/src/components/Overlay/index.ts b/packages/plasma-b2c/src/components/Overlay/index.ts new file mode 100644 index 0000000000..b7384b5a9b --- /dev/null +++ b/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'; diff --git a/packages/plasma-b2c/src/index.ts b/packages/plasma-b2c/src/index.ts index ab59deba1a..ca44ec3b0a 100644 --- a/packages/plasma-b2c/src/index.ts +++ b/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'; diff --git a/packages/plasma-web/src/components/Overlay/Overlay.stories.tsx b/packages/plasma-web/src/components/Overlay/Overlay.stories.tsx new file mode 100644 index 0000000000..92154b32de --- /dev/null +++ b/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; + +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 ( + <> + setIsVisible(true)} /> + {isVisible && ( + <> + + setIsVisible(false)} /> + + )} + + ); +}; + +export const Default: StoryObj = { + args: { + zIndex: '100', + backgroundColorProperty: 'var(--plasma-colors-overlay-soft)', + withBlur: false, + transparent: false, + isClickable: true, + onOverlayClick, + }, + render: (args) => , +}; diff --git a/packages/plasma-web/src/components/Overlay/index.ts b/packages/plasma-web/src/components/Overlay/index.ts new file mode 100644 index 0000000000..b7384b5a9b --- /dev/null +++ b/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'; diff --git a/packages/plasma-web/src/index.ts b/packages/plasma-web/src/index.ts index d8b769363e..d2edd4e621 100644 --- a/packages/plasma-web/src/index.ts +++ b/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';