@alfalab/core-components-navigation-bar-private 0.6.2 → 0.8.0

package/moderncssm/types.d.ts

@@ -96,6 +96,10 @@ type NavigationBarPrivateProps = {
      * Обработчик закрытия
      */
     onClose?: CloserProps['onClose'];
+    /**
+     * Дополнительные пропсы для компонента Closer.
+     */
+    closerProps?: Omit<CloserProps, 'view' | 'onClose'>;
     /**
      * обработчик клика по кнопке "назад"
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-navigation-bar-private",
-    "version": "0.6.2",
+    "version": "0.8.0",
     "description": "Navigation bar private component",
     "keywords": [],
     "license": "MIT",
@@ -26,5 +26,5 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "themesVersion": "13.7.2",
-    "varsVersion": "9.18.0"
+    "varsVersion": "9.19.0"
 }

package/src/Component.tsx

@@ -32,6 +32,7 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
             titleSize = 'default',
             subtitle,
             hasCloser,
+            closerProps = {},
             hasBackButton,
             backButtonClassName,
             backButtonProps,
@@ -186,6 +187,7 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
                     icon={closerIcon}
                     dataTestId={getDataTestId(dataTestId, 'closer')}
                     onClose={onClose}
+                    {...closerProps}
                 />
             </div>
         );

package/src/components/closer/Component.tsx

@@ -1,11 +1,18 @@
 import React, { ButtonHTMLAttributes, ElementType, FC } from 'react';
 import cn from 'classnames';
 
-import { IconButton } from '@alfalab/core-components-icon-button';
+import { IconButton, IconButtonProps } from '@alfalab/core-components-icon-button';
 import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
 import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
 
+import defaultColors from './default.module.css';
 import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+} as const;
 
 export interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
@@ -33,6 +40,11 @@ export interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      */
     icon?: ElementType;
 
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: IconButtonProps['colors'];
+
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -52,6 +64,7 @@ export const Closer: FC<CloserProps> = ({
     className,
     sticky,
     icon = view === 'desktop' ? CrossHeavyMIcon : CrossMIcon,
+    colors = 'default',
     dataTestId,
     onClose,
     ...restProps
@@ -68,10 +81,13 @@ export const Closer: FC<CloserProps> = ({
         >
             <IconButton
                 size={view === 'desktop' ? 's' : 'xs'}
-                className={cn(styles.button, { [styles.mobile]: view === 'mobile' })}
+                className={cn(styles.button, colorStyles[colors].button, {
+                    [colorStyles[colors].mobile]: view === 'mobile',
+                })}
                 aria-label='закрыть'
                 onClick={handleClick}
                 icon={icon}
+                colors={colors}
                 dataTestId={dataTestId}
                 {...restProps}
             />

package/src/components/closer/default.module.css

@@ -0,0 +1,12 @@
+@import '@alfalab/core-components-vars/src/colors-monochrome.css';
+@import '../../vars.css';
+
+.button {
+    background: var(--color-light-monochrome-white-4);
+    color: var(--color-light-neutral-translucent-1300);
+
+    &.mobile {
+        background: var(--color-light-neutral-translucent-100);
+        color: var(--navigation-bar-closer-mobile-color);
+    }
+}

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

@@ -1,6 +1,4 @@
 @import '@alfalab/core-components-vars/src/index.css';
-@import '@alfalab/core-components-vars/src/colors-monochrome.css';
-@import '../../vars.css';
 
 .closer {
     flex-shrink: 0;
@@ -13,14 +11,7 @@
 }
 
 .button {
-    background: var(--color-static-monochrome-white-4);
     backdrop-filter: blur(10px);
-    color: var(--color-light-neutral-translucent-1300);
-
-    &.mobile {
-        background: var(--color-light-neutral-translucent-100);
-        color: var(--navigation-bar-closer-mobile-color);
-    }
 }
 
 .button.button {

package/src/components/closer/inverted.module.css

@@ -0,0 +1,12 @@
+@import '@alfalab/core-components-vars/src/colors-monochrome.css';
+@import '../../vars.css';
+
+.button {
+    background: var(--color-light-monochrome-white-4-inverted);
+    color: var(--color-light-neutral-translucent-1300-inverted);
+
+    &.mobile {
+        background: var(--color-light-neutral-translucent-100-inverted);
+        color: var(--navigation-bar-closer-mobile-color-inverted);
+    }
+}

package/src/types.ts

@@ -119,6 +119,11 @@ export type NavigationBarPrivateProps = {
      */
     onClose?: CloserProps['onClose'];
 
+    /**
+     * Дополнительные пропсы для компонента Closer.
+     */
+    closerProps?: Omit<CloserProps, 'view' | 'onClose'>;
+
     /**
      * обработчик клика по кнопке "назад"
      */

package/src/vars.css

@@ -3,6 +3,9 @@
 :root {
     /* closer-mobile */
     --navigation-bar-closer-mobile-color: var(--color-light-neutral-translucent-700);
+    --navigation-bar-closer-mobile-color-inverted: var(
+        --color-light-neutral-translucent-700-inverted
+    );
 
     /* back-arrow */
     --navigation-bar-back-arrow-mobile-fill: var(--color-light-neutral-translucent-700);

package/types.d.ts

@@ -96,6 +96,10 @@ type NavigationBarPrivateProps = {
      * Обработчик закрытия
      */
     onClose?: CloserProps['onClose'];
+    /**
+     * Дополнительные пропсы для компонента Closer.
+     */
+    closerProps?: Omit<CloserProps, 'view' | 'onClose'>;
     /**
      * обработчик клика по кнопке "назад"
      */