feat(plasma-web, plasma-b2c): PopupBase component

packages/plasma-b2c/api/plasma-b2c.api.md

@@ -169,6 +169,9 @@ import { Popover } from '@salutejs/plasma-hope';
 import { PopoverPlacement } from '@salutejs/plasma-hope';
 import { PopoverProps } from '@salutejs/plasma-hope';
 import { Popup } from '@salutejs/plasma-hope';
+import { PopupBase } from '@salutejs/plasma-hope';
+import { PopupBasePlacement } from '@salutejs/plasma-hope';
+import { PopupBaseProps } from '@salutejs/plasma-hope';
 import { PopupProps } from '@salutejs/plasma-hope';
 import { PreviewGallery } from '@salutejs/plasma-hope';
 import { PreviewGalleryItemProps } from '@salutejs/plasma-hope';
@@ -609,6 +612,12 @@ export { PopoverProps }
 
 export { Popup }
 
+export { PopupBase }
+
+export { PopupBasePlacement }
+
+export { PopupBaseProps }
+
 export { PopupProps }
 
 export { PreviewGallery }

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { Story, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { surfaceSolid03 } from '@salutejs/plasma-tokens-web';
+
+import { SSRProvider } from '../SSRProvider';
+import { Button } from '../Button';
+
+import { PopupBase } from '.';
+
+export default {
+    title: 'Controls/PopupBase',
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        position: {
+            options: [
+                'center',
+                'top',
+                'bottom',
+                'right',
+                'left',
+                'top-right',
+                'top-left',
+                'bottom-right',
+                'bottom-left',
+            ],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+} as Meta;
+
+type PopupBaseStoryProps = { position: string; offsetX: number; offsetY: number };
+
+const showAnimation = keyframes`
+    0% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+`;
+const hideAnimation = keyframes`
+    0% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+`;
+
+const StyledButton = styled(Button)`
+    margin-top: 1rem;
+    width: 15rem;
+`;
+
+const StyledWrapper = styled.div`
+    height: 1200px;
+`;
+
+const OtherContent = styled.div`
+    margin-top: 1rem;
+    width: 400px;
+    height: 500px;
+    background: ${surfaceSolid03};
+    position: absolute;
+
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1rem;
+
+    top: 0;
+    right: 0;
+`;
+
+export const PopupBaseDemo: Story<PopupBaseStoryProps> = ({ position, offsetX, offsetY }) => {
+    const [isOpenA, setIsOpenA] = React.useState(false);
+    const [isOpenB, setIsOpenB] = React.useState(false);
+
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    return (
+        <SSRProvider>
+            <StyledWrapper>
+                <div style={{ display: 'flex', flexDirection: 'column' }}>
+                    <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
+                    <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
+                </div>
+                <PopupBase frame={ref} isOpen={isOpenA} position={position} offset={[offsetX, offsetY]}>
+                    <div style={{ background: 'white', padding: '1rem' }}>
+                        <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                        <>Content</>
+                    </div>
+                </PopupBase>
+                <OtherContent ref={ref}>
+                    <>Frame</>
+                </OtherContent>
+                <PopupBase frame="document" isOpen={isOpenB} position={position} offset={[offsetX, offsetY]}>
+                    <div style={{ background: 'white', padding: '1rem' }}>
+                        <Button onClick={() => setIsOpenB(false)}>Close</Button>
+                        <>Content</>
+                    </div>
+                </PopupBase>
+            </StyledWrapper>
+        </SSRProvider>
+    );
+};
+
+PopupBaseDemo.args = {
+    position: 'center',
+    offsetX: 0,
+    offsetY: 0,
+};

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

@@ -0,0 +1,2 @@
+export { PopupBase } from '@salutejs/plasma-hope';
+export type { PopupBaseProps, PopupBasePlacement } from '@salutejs/plasma-hope';

packages/plasma-b2c/src/index.ts

@@ -17,6 +17,7 @@ export * from './components/Modal';
 export * from './components/Notification';
 export * from './components/PaginationDots';
 export * from './components/Popup';
+export * from './components/PopupBase';
 export * from './components/Popover';
 export * from './components/PreviewGallery';
 export * from './components/Price';

packages/plasma-core/api/plasma-core.api.md

@@ -21,6 +21,7 @@ import { FlattenSimpleInterpolation } from 'styled-components';
 import { FunctionComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { InterpolationFunction } from 'styled-components';
+import { Keyframes } from 'styled-components';
 import { MutableRefObject } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
@@ -841,6 +842,29 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
 // @public @deprecated
 export const Popup: React_2.NamedExoticComponent<PopupProps & React_2.RefAttributes<HTMLDivElement>>;
 
+// @public
+export const PopupBase: FC<PopupBaseProps>;
+
+// Warning: (ae-forgotten-export) The symbol "BasicPopupBasePlacement" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "MixedPopupBasePlacement" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type PopupBasePlacement = BasicPopupBasePlacement | MixedPopupBasePlacement;
+
+// @public (undocumented)
+export interface PopupBaseProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    children?: React_2.ReactNode;
+    frame: 'document' | React_2.RefObject<HTMLElement>;
+    hideAnimation?: Keyframes;
+    isOpen: boolean;
+    // (undocumented)
+    offset?: [number | string, number | string];
+    // (undocumented)
+    position?: PopupBasePlacement;
+    showAnimation?: Keyframes;
+    zIndex?: string;
+}
+
 // @public (undocumented)
 export interface PopupProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;