@alfalab/core-components-side-panel 3.0.16 → 4.0.1

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

@@ -0,0 +1,16 @@
+@import '../../vars.css';
+
+.content {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    z-index: 0;
+
+    &.withHeader {
+        padding-top: 0;
+    }
+}
+
+.flex {
+    flex: 1 1 auto;
+}

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

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.content {
+    padding: var(--gap-m) var(--gap-m) 0;
+
+    &:last-child {
+        padding-bottom: var(--gap-m);
+    }
+}

package/src/components/footer/Component.desktop.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import cn from 'classnames';
+
+import { Footer, FooterProps } from './Component';
+
+import styles from './desktop.module.css';
+
+export type FooterDesktopProps = FooterProps & {
+    /**
+     * Размер (только для desktop версии компонента)
+     */
+    size?: 's';
+};
+
+export const FooterDesktop: FC<FooterDesktopProps> = ({
+    size = 's',
+    className,
+    sticky,
+    ...restProps
+}) => (
+    <Footer
+        className={cn(className, size && styles[size], {
+            [styles.sticky]: sticky,
+        })}
+        sticky={sticky}
+        {...restProps}
+    />
+);

package/src/components/footer/Component.mobile.tsx

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

package/src/components/footer/Component.tsx

@@ -0,0 +1,72 @@
+import React, { FC, ReactNode, useContext, useEffect } from 'react';
+import cn from 'classnames';
+
+import { ModalContext } from '../../Context';
+
+import styles from './index.module.css';
+import layoutStyles from './layout.module.css';
+
+export type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Footer: FC<FooterProps> = ({
+    children,
+    className,
+    sticky,
+    layout = 'start',
+    gap,
+    dataTestId,
+}) => {
+    const { footerHighlighted, setHasFooter } = useContext(ModalContext);
+
+    useEffect(() => {
+        setHasFooter(true);
+    }, [setHasFooter]);
+
+    return (
+        <div
+            className={cn(
+                styles.footer,
+                className,
+                layoutStyles[layout],
+                gap && layoutStyles[`gap-${gap}`],
+                {
+                    [styles.highlighted]: sticky && footerHighlighted,
+                    [styles.sticky]: sticky,
+                },
+            )}
+            data-test-id={dataTestId}
+        >
+            {children}
+        </div>
+    );
+};

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

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.sticky {
+    bottom: 0;
+}
+
+.s {
+    padding: var(--side-panel-s-footer-paddings);
+}

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

@@ -0,0 +1,18 @@
+@import '../../vars.css';
+
+.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/src/components/footer/layout.module.css

@@ -0,0 +1,70 @@
+@import '../../vars.css';
+
+.column {
+    display: flex;
+    flex-direction: column;
+
+    & > * {
+        margin-bottom: var(--side-panel-footer-default-gap);
+    }
+
+    & > *:last-child,
+    & > *:only-child {
+        margin-bottom: 0;
+    }
+
+    &.gap-16 > * {
+        margin-bottom: var(--gap-m);
+    }
+
+    &.gap-24 > * {
+        margin-bottom: var(--gap-xl);
+    }
+
+    &.gap-32 > * {
+        margin-bottom: var(--gap-2xl);
+    }
+}
+
+.start {
+    justify-content: flex-start;
+}
+
+.center {
+    justify-content: center;
+}
+
+.space-between {
+    justify-content: space-between;
+
+    & > * {
+        flex: 1;
+    }
+}
+
+.start,
+.center,
+.space-between {
+    display: flex;
+
+    & > * {
+        margin-right: var(--side-panel-footer-default-gap);
+    }
+
+    & > *:last-child,
+    & > *:only-child {
+        margin-right: 0;
+    }
+
+    &.gap-16 > * {
+        margin-right: var(--gap-m);
+    }
+
+    &.gap-24 > * {
+        margin-right: var(--gap-xl);
+    }
+
+    &.gap-32 > * {
+        margin-right: var(--gap-2xl);
+    }
+}

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

@@ -0,0 +1,25 @@
+@import '../../vars.css';
+
+.footer {
+    padding: var(--gap-m);
+}
+
+.sticky {
+    bottom: 0;
+}
+
+.column {
+    flex-direction: column-reverse;
+
+    & > * {
+        margin-bottom: 0;
+    }
+
+    & > *:last-child {
+        margin-bottom: var(--side-panel-footer-default-gap);
+    }
+
+    & > *:only-child {
+        margin-bottom: 0;
+    }
+}

package/src/components/header/Component.tsx

@@ -0,0 +1,59 @@
+import React, { FC, useContext, useEffect } from 'react';
+import cn from 'classnames';
+
+import { NavigationBar, NavigationBarProps } from '@alfalab/core-components-navigation-bar';
+
+import { ModalContext } from '../../Context';
+import { ResponsiveContext } from '../../ResponsiveContext';
+
+import desktopStyles from './desktop.module.css';
+import styles from './index.module.css';
+import mobileStyles from './mobile.module.css';
+
+export type HeaderProps = Omit<NavigationBarProps, 'size' | 'view' | 'parentRef'>;
+
+export const Header: FC<HeaderProps> = ({
+    className,
+    children,
+    contentClassName,
+    title,
+    sticky,
+    hasCloser = true,
+    ...restProps
+}) => {
+    const { setHasHeader, headerHighlighted, onClose, componentRef } = useContext(ModalContext);
+    const { size = 's', view = 'desktop' } = useContext(ResponsiveContext) || {};
+
+    useEffect(() => {
+        setHasHeader(true);
+    }, [setHasHeader]);
+
+    const hasContent = Boolean(title || children);
+
+    return (
+        <NavigationBar
+            {...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]]: view === 'desktop',
+                [mobileStyles.sticky]: view === 'mobile' && sticky,
+                [mobileStyles.header]: view === 'mobile',
+            })}
+            contentClassName={cn(contentClassName, {
+                [desktopStyles.content]: view === 'desktop',
+                [mobileStyles.content]: view === 'mobile',
+            })}
+        >
+            {children}
+        </NavigationBar>
+    );
+};

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

@@ -0,0 +1,20 @@
+@import '../../vars.css';
+
+.content {
+    font-weight: var(--side-panel-header-desktop-font-weight);
+    font-family: var(--side-panel-header-desktop-font-family);
+}
+
+.s .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);
+}
+
+.s {
+    padding: var(--side-panel-s-header-paddings);
+}
+
+.sticky {
+    top: 0;
+}

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

@@ -0,0 +1,66 @@
+@import '../../vars.css';
+
+.header {
+    width: 100%;
+    box-sizing: border-box;
+    transition: box-shadow 0.2s ease, background 0.2s ease;
+
+    &: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;
+
+    &.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;
+
+    & .title {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}

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

@@ -0,0 +1,17 @@
+@import '../../vars.css';
+
+.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/src/desktop.module.css

@@ -0,0 +1,9 @@
+@import './vars.css';
+
+.s {
+    width: var(--side-panel-s-width);
+}
+
+.hidden {
+    overflow-x: hidden;
+}

package/src/desktop.ts

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

package/src/index.ts

@@ -0,0 +1,4 @@
+export {
+    SidePanelResponsive as SidePanel,
+    SidePanelResponsiveProps as SidePanelProps,
+} from './Component.responsive';

package/src/mobile.module.css

@@ -0,0 +1,19 @@
+@import './vars.css';
+
+.component {
+    position: fixed;
+    top: 0;
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-width: 600px;
+}
+
+.mobileContent {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1;
+}

package/src/mobile.ts

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

package/src/shared.ts

@@ -0,0 +1 @@
+export { ModalContext } from './Context';

package/src/transitions.desktop.module.css

@@ -0,0 +1,35 @@
+@define-mixin exit-active {
+    opacity: 0;
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+}
+
+.enterRight {
+    opacity: 0;
+    transform: translateX(15px);
+}
+
+.enterLeft {
+    opacity: 0;
+    transform: translateX(-15px);
+}
+
+.enterActive {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity 200ms ease-in, transform 200ms ease-in;
+}
+
+.exit {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.exitActiveRight {
+    @mixin exit-active;
+    transform: translateX(15px);
+}
+
+.exitActiveLeft {
+    @mixin exit-active;
+    transform: translateX(-15px);
+}

package/src/transitions.mobile.module.css

@@ -0,0 +1,24 @@
+.appear,
+.enter {
+    opacity: 0;
+    transform: translateY(15px);
+}
+
+.appearActive,
+.enterActive {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 200ms ease-in, transform 200ms ease-in;
+}
+
+.exit {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.exitActive,
+.exitDone {
+    opacity: 0;
+    transform: translateY(15px);
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+}

package/src/typings.ts

@@ -0,0 +1,6 @@
+export type View = 'desktop' | 'mobile';
+
+export type TResponsiveModalContext = {
+    view: View;
+    size: 's';
+} | null;

package/src/vars.css

@@ -0,0 +1,40 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+:root {
+    --side-panel-border-radius: var(--border-radius-l);
+    --side-panel-vertical-padding: var(--gap-3xl);
+    --side-panel-header-background: var(--color-light-bg-primary);
+    --side-panel-footer-background: var(--color-light-bg-primary);
+    --side-panel-footer-default-gap: var(--gap-m);
+
+    /* sizes */
+    --side-panel-s-width: 500px;
+
+    /* paddings */
+    --side-panel-s-header-paddings: 28px 28px 0;
+    --side-panel-s-content-paddings: var(--gap-3xl) var(--gap-3xl) 0;
+    --side-panel-s-footer-paddings: var(--gap-xl) var(--gap-3xl) var(--gap-3xl);
+
+    /* scroll */
+    --side-panel-header-highlight-background: var(--color-light-bg-primary);
+    --side-panel-footer-highlight-background: var(--color-light-bg-primary);
+    --side-panel-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-border-secondary);
+    --side-panel-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-border-secondary);
+
+    /* desktop */
+    --side-panel-s-header-desktop-content-paddings: 6px var(--gap-s) var(--gap-m);
+    --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 */
+    --side-panel-header-mobile-content-paddings: var(--gap-s) var(--gap-xs);
+    --side-panel-header-mobile-font-size: 18px;
+    --side-panel-header-mobile-line-height: 24px;
+    --side-panel-header-mobile-font-family: var(--font-family-system);
+    --side-panel-header-mobile-font-weight: bold;
+
+    /* paddings */
+    --side-panel-header-mobile-paddings: var(--gap-2xs) var(--gap-xs);
+}

package/transitions.desktop.css

@@ -1,32 +1,32 @@
-/* hash: 1q3gi */
-.side-panel__enterRight_1av3a {
+/* hash: bpgap */
+.side-panel__enterRight_9pl6z {
     opacity: 0;
     transform: translateX(15px);
 }
 
-.side-panel__enterLeft_1av3a {
+.side-panel__enterLeft_9pl6z {
     opacity: 0;
     transform: translateX(-15px);
 }
 
-.side-panel__enterActive_1av3a {
+.side-panel__enterActive_9pl6z {
     opacity: 1;
     transform: translateX(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_1av3a {
+.side-panel__exit_9pl6z {
     opacity: 1;
     transform: translateX(0);
 }
 
-.side-panel__exitActiveRight_1av3a {
+.side-panel__exitActiveRight_9pl6z {
     opacity: 0;
     transition: opacity 200ms ease-out, transform 200ms ease-out;
     transform: translateX(15px);
 }
 
-.side-panel__exitActiveLeft_1av3a {
+.side-panel__exitActiveLeft_9pl6z {
     opacity: 0;
     transition: opacity 200ms ease-out, transform 200ms ease-out;
     transform: translateX(-15px);

package/transitions.mobile.css

@@ -1,24 +1,24 @@
-/* hash: dqsky */
-.side-panel__appear_fbxtx,
-.side-panel__enter_fbxtx {
+/* hash: f1p2x */
+.side-panel__appear_1r3i1,
+.side-panel__enter_1r3i1 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.side-panel__appearActive_fbxtx,
-.side-panel__enterActive_fbxtx {
+.side-panel__appearActive_1r3i1,
+.side-panel__enterActive_1r3i1 {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_fbxtx {
+.side-panel__exit_1r3i1 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.side-panel__exitActive_fbxtx,
-.side-panel__exitDone_fbxtx {
+.side-panel__exitActive_1r3i1,
+.side-panel__exitDone_1r3i1 {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/cssm/responsive.d.ts

@@ -1,2 +0,0 @@
-export * from "./Component.responsive";
-export {};