@alfalab/core-components-side-panel 5.3.10 → 5.4.0

package/moderncssm/components/content/Component.desktop.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import cn from 'classnames';
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
+import { Content } from './Component.js';
+import styles from './desktop.module.css';
+
+const ContentDesktop = ({ size = 500, className, ...restProps }) => (React.createElement(Content, { className: cn(className, size && styles[SIZE_TO_CLASSNAME_MAP[size]]), ...restProps }));
+
+export { ContentDesktop };

package/moderncssm/components/content/Component.js

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import styles from './index.module.css';
+
+const Content = ({ children, className, dataTestId }) => {
+    const { contentRef, hasHeader } = useContext(ModalContext);
+    const responsiveContext = useContext(ResponsiveContext);
+    return (React.createElement("div", { className: cn(styles.content, className, styles.flex, {
+            [styles.withHeader]: hasHeader,
+        }), ref: contentRef, "data-test-id": dataTestId || getDataTestId(responsiveContext?.dataTestId, 'content') }, children));
+};
+
+export { Content };

package/moderncssm/components/content/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ContentProps } from "./Component";
+type ContentMobileProps = ContentProps;
+declare const ContentMobile: FC<ContentMobileProps>;
+export { ContentMobileProps, ContentMobile };

package/moderncssm/components/content/Component.mobile.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import cn from 'classnames';
+import { Content } from './Component.js';
+import styles from './mobile.module.css';
+
+const ContentMobile = ({ className, ...restProps }) => (React.createElement(Content, { className: cn(className, styles.content), ...restProps }));
+
+export { ContentMobile };

package/moderncssm/components/content/desktop.module.css

@@ -0,0 +1,25 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+    --side-panel-s-content-paddings: var(--gap-40) var(--gap-40) 0;
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.size-500 {
+    padding: var(--side-panel-s-content-paddings)
+}
+
+.size-500:last-child {
+        padding-bottom: var(--gap-32);
+    }

package/moderncssm/components/content/index.module.css

@@ -0,0 +1,31 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.content {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    z-index: 0
+}
+
+.content.withHeader {
+        padding-top: 0;
+    }
+
+.flex {
+    flex: 1 1 auto;
+}

package/moderncssm/components/content/mobile.module.css

@@ -0,0 +1,24 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.content {
+    padding: var(--gap-16) var(--gap-16) 0
+}
+
+.content:last-child {
+        padding-bottom: var(--gap-16);
+    }

package/moderncssm/components/controls/Component.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+interface ControlsProps {
+    /**
+     * Основной слот
+     */
+    primary?: ReactNode;
+    /**
+     * Дополнительный слот
+     */
+    secondary?: ReactNode;
+    /**
+     * Выравнивание элементов футера
+     * @default start
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Выравнивание элементов футера (мобильный view)
+     * @default start
+     */
+    mobileLayout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+}
+declare const Controls: React.FC<ControlsProps>;
+export { ControlsProps, Controls };

package/moderncssm/components/controls/Component.js

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import layoutStyles from '../footer/layout.module.css';
+import styles from './index.module.css';
+
+const Controls = ({ primary, secondary, gap, layout: layoutProp = 'start', mobileLayout = layoutProp, }) => {
+    const context = useContext(ResponsiveContext);
+    const { view = 'desktop', dataTestId } = context || {};
+    const layout = view === 'mobile' ? mobileLayout : layoutProp;
+    const shouldReverse = view === 'mobile' && layout !== 'column';
+    return (React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'controls'), className: cn(styles.component, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`]) }, shouldReverse ? (React.createElement(React.Fragment, null,
+        secondary,
+        primary)) : (React.createElement(React.Fragment, null,
+        primary,
+        secondary))));
+};
+
+export { Controls };

package/moderncssm/components/controls/index.d.ts

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

package/moderncssm/components/controls/index.js

@@ -0,0 +1 @@
+export { Controls } from './Component.js';

package/moderncssm/components/controls/index.module.css

@@ -0,0 +1,3 @@
+.component {
+    width: 100%;
+}

package/moderncssm/components/footer/Component.d.ts

@@ -0,0 +1,29 @@
+import { FC, ReactNode } from 'react';
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Footer: FC<FooterProps>;
+export { FooterProps, Footer };

package/moderncssm/components/footer/Component.desktop.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { FooterProps } from "./Component";
+type FooterDesktopProps = FooterProps & {
+    /**
+     * Размер (только для desktop версии компонента)
+     */
+    size?: 's' | 500;
+};
+declare const FooterDesktop: FC<FooterDesktopProps>;
+export { FooterDesktopProps, FooterDesktop };

package/moderncssm/components/footer/Component.desktop.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import cn from 'classnames';
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
+import { Footer } from './Component.js';
+import styles from './desktop.module.css';
+
+const FooterDesktop = ({ size = 500, className, sticky, ...restProps }) => (React.createElement(Footer, { className: cn(className, size && styles[SIZE_TO_CLASSNAME_MAP[size]], {
+        [styles.sticky]: sticky,
+    }), sticky: sticky, ...restProps }));
+
+export { FooterDesktop };

package/moderncssm/components/footer/Component.js

@@ -0,0 +1,21 @@
+import React, { useContext, useEffect } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import styles from './index.module.css';
+import layoutStyles from './layout.module.css';
+
+const Footer = ({ children, className, sticky, layout = 'start', gap, dataTestId, }) => {
+    const { footerHighlighted, setHasFooter } = useContext(ModalContext);
+    const responsiveContext = useContext(ResponsiveContext);
+    useEffect(() => {
+        setHasFooter(true);
+    }, [setHasFooter]);
+    return (React.createElement("div", { className: cn(styles.footer, className, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`], {
+            [styles.highlighted]: sticky && footerHighlighted,
+            [styles.sticky]: sticky,
+        }), "data-test-id": dataTestId || getDataTestId(responsiveContext?.dataTestId, 'footer') }, children));
+};
+
+export { Footer };

package/moderncssm/components/footer/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { FooterProps } from "./Component";
+type FooterMobileProps = FooterProps;
+declare const FooterMobile: FC<FooterMobileProps>;
+export { FooterMobileProps, FooterMobile };

package/moderncssm/components/footer/Component.mobile.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import cn from 'classnames';
+import { Footer } from './Component.js';
+import styles from './mobile.module.css';
+
+const FooterMobile = ({ className, sticky, layout = 'start', ...restProps }) => (React.createElement(Footer, { className: cn(className, styles.footer, {
+        [styles.sticky]: sticky,
+    }), sticky: sticky, layout: layout, ...restProps }));
+
+export { FooterMobile };

package/moderncssm/components/footer/desktop.module.css

@@ -0,0 +1,25 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+    --side-panel-s-footer-paddings: var(--gap-24) var(--gap-40) var(--gap-40);
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.sticky {
+    bottom: 0;
+}
+
+.size-500 {
+    padding: var(--side-panel-s-footer-paddings);
+}

package/moderncssm/components/footer/index.module.css

@@ -0,0 +1,36 @@
+/* */
+
+:root {
+    --side-panel-footer-background: var(--color-light-modal-bg-primary);
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+    --side-panel-footer-highlight-background: var(--color-light-modal-bg-primary);
+    --side-panel-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.footer {
+    width: 100%;
+    box-sizing: border-box;
+    transition: box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.sticky {
+    background: var(--side-panel-footer-background);
+    position: sticky;
+    z-index: 1;
+}
+
+.highlighted {
+    background: var(--side-panel-footer-highlight-background);
+    box-shadow: var(--side-panel-footer-highlight-box-shadow);
+}

package/moderncssm/components/footer/layout.module.css

@@ -0,0 +1,76 @@
+/* */
+
+:root {
+    --side-panel-footer-default-gap: var(--gap-16);
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.column {
+    display: flex;
+    flex-direction: column
+}
+
+.column > *:not(:last-child):not(:only-child) {
+        margin-bottom: var(--side-panel-footer-default-gap);
+    }
+
+.column.gap-16 > *:not(:last-child):not(:only-child) {
+        margin-bottom: var(--gap-16);
+    }
+
+.column.gap-24 > *:not(:last-child):not(:only-child) {
+        margin-bottom: var(--gap-24);
+    }
+
+.column.gap-32 > *:not(:last-child):not(:only-child) {
+        margin-bottom: var(--gap-32);
+    }
+
+.start {
+    justify-content: flex-start;
+}
+
+.center {
+    justify-content: center;
+}
+
+.space-between {
+    justify-content: space-between
+}
+
+.space-between > * {
+        flex: 1;
+    }
+
+.start,
+.center,
+.space-between {
+    display: flex
+}
+
+.start > *:not(:last-child):not(:only-child), .center > *:not(:last-child):not(:only-child), .space-between > *:not(:last-child):not(:only-child) {
+        margin-right: var(--side-panel-footer-default-gap);
+    }
+
+.start.gap-16 > *:not(:last-child):not(:only-child), .center.gap-16 > *:not(:last-child):not(:only-child), .space-between.gap-16 > *:not(:last-child):not(:only-child) {
+        margin-right: var(--gap-16);
+    }
+
+.start.gap-24 > *:not(:last-child):not(:only-child), .center.gap-24 > *:not(:last-child):not(:only-child), .space-between.gap-24 > *:not(:last-child):not(:only-child) {
+        margin-right: var(--gap-24);
+    }
+
+.start.gap-32 > *:not(:last-child):not(:only-child), .center.gap-32 > *:not(:last-child):not(:only-child), .space-between.gap-32 > *:not(:last-child):not(:only-child) {
+        margin-right: var(--gap-32);
+    }

package/moderncssm/components/footer/mobile.module.css

@@ -0,0 +1,24 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.footer {
+    padding: var(--gap-16);
+}
+
+.sticky {
+    bottom: 0;
+}

package/moderncssm/components/header/Component.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { NavigationBarPrivateProps } from "@alfalab/core-components-navigation-bar-private";
+type HeaderProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'>;
+declare const Header: FC<HeaderProps>;
+export { HeaderProps, Header };

package/moderncssm/components/header/Component.js

@@ -0,0 +1,33 @@
+import React, { useContext, useEffect } from 'react';
+import cn from 'classnames';
+import { NavigationBarPrivate } from '@alfalab/core-components-navigation-bar-private/moderncssm';
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
+import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import desktopStyles from './desktop.module.css';
+import styles from './index.module.css';
+import mobileStyles from './mobile.module.css';
+
+const Header = ({ className, children, contentClassName, title, sticky, hasCloser = true, ...restProps }) => {
+    const { setHasHeader, headerHighlighted, onClose, componentRef } = useContext(ModalContext);
+    const { size = 500, view = 'desktop', dataTestId } = useContext(ResponsiveContext) || {};
+    useEffect(() => {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    const hasContent = Boolean(title || children);
+    return (React.createElement(NavigationBarPrivate, { dataTestId: getDataTestId(dataTestId, 'header'), ...restProps, scrollableParentRef: componentRef, view: view, sticky: sticky, title: title, hasCloser: hasCloser, onClose: onClose, className: cn(styles.header, className, {
+            [styles.highlighted]: hasContent && sticky && headerHighlighted,
+            [styles.sticky]: sticky,
+            [styles.hasContent]: hasContent,
+            [desktopStyles.sticky]: view === 'desktop' && sticky,
+            [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop',
+            [mobileStyles.sticky]: view === 'mobile' && sticky,
+            [mobileStyles.header]: view === 'mobile',
+        }), contentClassName: cn(contentClassName, {
+            [desktopStyles.content]: view === 'desktop',
+            [mobileStyles.content]: view === 'mobile',
+        }) }, children));
+};
+
+export { Header };

package/moderncssm/components/header/desktop.module.css

@@ -0,0 +1,41 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+    --side-panel-s-header-paddings: 28px 28px 0;
+
+    /* scroll */
+
+    /* desktop */
+    --side-panel-s-header-desktop-content-paddings: 6px var(--gap-12) var(--gap-16);
+    --side-panel-s-header-desktop-font-size: 30px;
+    --side-panel-s-header-desktop-line-height: 36px;
+    --side-panel-header-desktop-font-weight: bold;
+    --side-panel-header-desktop-font-family: var(--font-family-system);
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.content {
+    font-weight: var(--side-panel-header-desktop-font-weight);
+    font-family: var(--side-panel-header-desktop-font-family);
+}
+
+.size-500 .content {
+    padding: var(--side-panel-s-header-desktop-content-paddings);
+    font-size: var(--side-panel-s-header-desktop-font-size);
+    line-height: var(--side-panel-s-header-desktop-line-height);
+}
+
+.size-500 {
+    padding: var(--side-panel-s-header-paddings);
+}
+
+.sticky {
+    top: 0;
+}

package/moderncssm/components/header/index.module.css

@@ -0,0 +1,84 @@
+/* */
+
+:root {
+    --side-panel-header-background: var(--color-light-modal-bg-primary);
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+    --side-panel-header-highlight-background: var(--color-light-modal-bg-primary);
+    --side-panel-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.header {
+    width: 100%;
+    box-sizing: border-box;
+    transition: box-shadow 0.2s ease, background 0.2s ease
+}
+
+.header:not(.hasContent) {
+        pointer-events: none;
+    }
+
+.highlighted {
+    background: var(--side-panel-header-highlight-background);
+    box-shadow: var(--side-panel-header-highlight-box-shadow);
+}
+
+.sticky {
+    position: sticky;
+    z-index: 1
+}
+
+.sticky.hasContent {
+        background: var(--side-panel-header-background);
+    }
+
+.header.backgroundImage {
+    background: center no-repeat;
+    background-size: cover;
+}
+
+.content {
+    flex-grow: 1;
+}
+
+.title {
+    word-break: break-word;
+}
+
+.addon {
+    min-width: 48px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: all;
+}
+
+.closer {
+    margin-left: auto;
+}
+
+.right {
+    justify-content: flex-end;
+    text-align: right;
+}
+
+.trim {
+    overflow: hidden
+}
+
+.trim .title {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }

package/moderncssm/components/header/mobile.module.css

@@ -0,0 +1,38 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+    --side-panel-header-mobile-content-paddings: 10px var(--gap-8);
+    --side-panel-header-mobile-font-size: 20px;
+    --side-panel-header-mobile-line-height: 28px;
+    --side-panel-header-mobile-font-family: var(--font-family-system);
+    --side-panel-header-mobile-font-weight: 600;
+
+    /* paddings */
+    --side-panel-header-mobile-paddings: var(--gap-4) var(--gap-8);
+}
+
+.header {
+    padding: var(--side-panel-header-mobile-paddings);
+}
+
+.sticky {
+    top: 0;
+}
+
+.content {
+    font-size: var(--side-panel-header-mobile-font-size);
+    line-height: var(--side-panel-header-mobile-line-height);
+    font-family: var(--side-panel-header-mobile-font-family);
+    font-weight: var(--side-panel-header-mobile-font-weight);
+    padding: var(--side-panel-header-mobile-content-paddings);
+}

package/moderncssm/consts.d.ts

@@ -0,0 +1,5 @@
+declare const SIZE_TO_CLASSNAME_MAP: {
+    s: string;
+    500: string;
+};
+export { SIZE_TO_CLASSNAME_MAP };

package/moderncssm/consts.js

@@ -0,0 +1,6 @@
+const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-500',
+    500: 'size-500',
+};
+
+export { SIZE_TO_CLASSNAME_MAP };