@alfalab/core-components-side-panel 5.1.2 → 5.2.0

package/src/components/header/Component.tsx

@@ -4,6 +4,7 @@ import cn from 'classnames';
 import { NavigationBar, NavigationBarProps } from '@alfalab/core-components-navigation-bar';
 import { getDataTestId } from '@alfalab/core-components-shared';
 
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts';
 import { ModalContext } from '../../Context';
 import { ResponsiveContext } from '../../ResponsiveContext';
 
@@ -23,7 +24,7 @@ export const Header: FC<HeaderProps> = ({
     ...restProps
 }) => {
     const { setHasHeader, headerHighlighted, onClose, componentRef } = useContext(ModalContext);
-    const { size = 's', view = 'desktop', dataTestId } = useContext(ResponsiveContext) || {};
+    const { size = 500, view = 'desktop', dataTestId } = useContext(ResponsiveContext) || {};
 
     useEffect(() => {
         setHasHeader(true);
@@ -46,7 +47,7 @@ export const Header: FC<HeaderProps> = ({
                 [styles.sticky]: sticky,
                 [styles.hasContent]: hasContent,
                 [desktopStyles.sticky]: view === 'desktop' && sticky,
-                [desktopStyles[size]]: view === 'desktop',
+                [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop',
                 [mobileStyles.sticky]: view === 'mobile' && sticky,
                 [mobileStyles.header]: view === 'mobile',
             })}

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

@@ -5,13 +5,13 @@
     font-family: var(--side-panel-header-desktop-font-family);
 }
 
-.s .content {
+.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);
 }
 
-.s {
+.size-500 {
     padding: var(--side-panel-s-header-paddings);
 }
 

package/src/consts.ts

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

package/src/desktop/Component.desktop.tsx

@@ -9,6 +9,7 @@ import { ContentDesktop } from '../components/content/Component.desktop';
 import { Controls, ControlsProps } from '../components/controls';
 import { FooterDesktop } from '../components/footer/Component.desktop';
 import { Header, HeaderProps } from '../components/header/Component';
+import { SIZE_TO_CLASSNAME_MAP } from '../consts';
 import { ResponsiveContext } from '../ResponsiveContext';
 import { TResponsiveModalContext } from '../typings';
 
@@ -21,7 +22,7 @@ export type SidePanelDesktopProps = BaseModalProps &
          * Ширина модального окна
          * @default "s"
          */
-        size?: 's';
+        size?: 's' | 500;
 
         /**
          * Управление наличием закрывающего крестика
@@ -33,7 +34,7 @@ export type SidePanelDesktopProps = BaseModalProps &
 const SidePanelDesktopComponent = forwardRef<HTMLDivElement, SidePanelDesktopProps>(
     (
         {
-            size = 's',
+            size = 500,
             children,
             className,
             wrapperClassName,
@@ -70,7 +71,7 @@ const SidePanelDesktopComponent = forwardRef<HTMLDivElement, SidePanelDesktopPro
                 ref={mergeRefs([ref, modalRef])}
                 placement={placement}
                 wrapperClassName={wrapperClassName}
-                className={cn(className, styles[size], styles.hidden)}
+                className={cn(className, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.hidden)}
                 backdropProps={backdropProps}
                 contentTransitionProps={{
                     classNames: {

package/src/desktop/desktop.module.css

@@ -1,6 +1,6 @@
 @import '../vars.css';
 
-.s.s {
+.size-500.size-500 {
     width: var(--side-panel-s-width);
 }
 

package/src/mobile/Component.mobile.tsx

@@ -25,7 +25,7 @@ const SidePanelMobileComponent = forwardRef<HTMLDivElement, SidePanelMobileProps
     ({ children, className, transitionProps, dataTestId, ...restProps }, ref) => {
         const responsiveContext = useContext(ResponsiveContext);
         const contextValue = useMemo<TResponsiveModalContext>(
-            () => ({ size: 's', view: 'mobile', dataTestId }),
+            () => ({ size: 500, view: 'mobile', dataTestId }),
             [dataTestId],
         );
 

package/src/typings.ts

@@ -2,6 +2,6 @@ export type View = 'desktop' | 'mobile';
 
 export type TResponsiveModalContext = {
     view: View;
-    size: 's';
+    size: 's' | 500;
     dataTestId?: string;
 } | null;

package/typings.d.ts

@@ -1,7 +1,7 @@
 type View = 'desktop' | 'mobile';
 type TResponsiveModalContext = {
     view: View;
-    size: 's';
+    size: 's' | 500;
     dataTestId?: string;
 } | null;
 export { View, TResponsiveModalContext };

package/esm/layout.module-0f3296f1.js

@@ -1,4 +0,0 @@
-var layoutStyles = {"column":"side-panel__column_526d4","gap-16":"side-panel__gap-16_526d4","gap-24":"side-panel__gap-24_526d4","gap-32":"side-panel__gap-32_526d4","start":"side-panel__start_526d4","center":"side-panel__center_526d4","space-between":"side-panel__space-between_526d4"};
-require('./components/footer/layout.css')
-
-export { layoutStyles as l };

package/layout.module-41a41938.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var layoutStyles = {"column":"side-panel__column_526d4","gap-16":"side-panel__gap-16_526d4","gap-24":"side-panel__gap-24_526d4","gap-32":"side-panel__gap-32_526d4","start":"side-panel__start_526d4","center":"side-panel__center_526d4","space-between":"side-panel__space-between_526d4"};
-require('./components/footer/layout.css')
-
-exports.layoutStyles = layoutStyles;

package/modern/layout.module-d4e1a7fc.js

@@ -1,4 +0,0 @@
-const layoutStyles = {"column":"side-panel__column_526d4","gap-16":"side-panel__gap-16_526d4","gap-24":"side-panel__gap-24_526d4","gap-32":"side-panel__gap-32_526d4","start":"side-panel__start_526d4","center":"side-panel__center_526d4","space-between":"side-panel__space-between_526d4"};
-require('./components/footer/layout.css')
-
-export { layoutStyles as l };