@alfalab/core-components-navigation-bar 0.8.6 → 1.0.0

package/{components/closer → modern/components/action-text-addon}/index.css

@@ -1,10 +1,6 @@
-/* hash: esnlp */
+/* hash: 1mmbp */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} /* deprecated */ :root {
-    --color-light-neutral-1500: #0e0e0e;
-    --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
-    --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-    --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -15,34 +11,13 @@
 
     /* Hard up */
 } :root {
-    --border-radius-circle: 50%;
 } :root {
+    --gap-xs: 8px;
+    --gap-m: 16px;
 } :root {
 } :root {
-} :root {
-    /* closer-mobile */
-    --navigation-bar-closer-mobile-color: var(--color-light-neutral-translucent-700);
-
-    /* back-arrow */
-} .navigation-bar__closer_1a9q8 {
-    flex-shrink: 0;
-    width: 48px;
-    height: 48px;
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-} .navigation-bar__button_1a9q8 {
-    background: var(--color-light-bg-primary-alpha-40);
-    -webkit-backdrop-filter: blur(10px);
-            backdrop-filter: blur(10px);
-    color: var(--color-light-neutral-1500)
-} .navigation-bar__button_1a9q8.navigation-bar__mobile_1a9q8 {
-        background: var(--color-light-neutral-translucent-100);
-        color: var(--navigation-bar-closer-mobile-color);
-    } .navigation-bar__button_1a9q8.navigation-bar__button_1a9q8 {
-    border-radius: var(--border-radius-circle);
-} .navigation-bar__sticky_1a9q8 {
-    position: sticky;
-    top: 0;
+} .navigation-bar__component_bdo4g {
+    height: 100%;
+} .navigation-bar__text_bdo4g {
+    padding: var(--gap-xs) var(--gap-m);
 }

package/modern/components/action-text-addon/index.js

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

package/modern/index.css

@@ -1,7 +1,8 @@
-/* hash: 1ktx4 */
+/* hash: enrea */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-text-primary: #0e0e0e;
+    --color-light-neutral-300: #e7e8eb;
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -15,94 +16,64 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
-    --gap-s: 12px;
+    --gap-xs: 8px;
+    --gap-m: 16px;
 } :root {
 } :root {
-} .navigation-bar__header_1svpa {
-    width: 100%;
+} .navigation-bar__component_chxq7 {
+    padding: var(--gap-xs) var(--gap-2xs);
     box-sizing: border-box;
-    transition: box-shadow 0.2s ease, background 0.2s ease
-} .navigation-bar__header_1svpa.navigation-bar__header_1svpa.navigation-bar__backgroundImage_1svpa {
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-    } .navigation-bar__mainLine_1svpa {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    z-index: 1;
-    background-color: inherit;
-} .navigation-bar__mainLineSticky_1svpa {
+    width: 100%;
+} .navigation-bar__sticky_chxq7 {
     position: sticky;
     top: 0;
-} .navigation-bar__mainLineWithImageBg_1svpa {
-    background-color: initial;
-} .navigation-bar__content_1svpa {
-    color: var(--color-light-text-primary);
+    z-index: 1;
+} .navigation-bar__border_chxq7 {
+    box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
+} .navigation-bar__mainLine_chxq7 {
+    display: flex;
+    background-color: inherit;
+    justify-content: space-between;
+    min-height: 40px;
+    align-items: stretch;
+} .navigation-bar__left_chxq7 {
+    text-align: left;
+} .navigation-bar__center_chxq7 {
+    text-align: center;
+} .navigation-bar__children_chxq7 {
+    width: 100%;
+} .navigation-bar__content_chxq7 {
     display: flex;
-    flex-flow: column nowrap;
-    justify-content: center;
     flex-grow: 1;
-    align-self: baseline;
-    box-sizing: border-box;
-    min-height: 48px
-} .navigation-bar__content_1svpa.navigation-bar__withBothAddons_1svpa,
-    .navigation-bar__content_1svpa.navigation-bar__withCompactTitle_1svpa {
-        font-size: 16px;
-        line-height: 20px;
-        font-weight: 500;
-        align-self: center;
-        padding-top: var(--gap-2xs);
-        padding-bottom: var(--gap-2xs)
-    } .navigation-bar__content_1svpa.navigation-bar__withBothAddons_1svpa > .navigation-bar__children_1svpa,
-        .navigation-bar__content_1svpa.navigation-bar__withBothAddons_1svpa > .navigation-bar__title_1svpa,
-        .navigation-bar__content_1svpa.navigation-bar__withCompactTitle_1svpa > .navigation-bar__children_1svpa,
-        .navigation-bar__content_1svpa.navigation-bar__withCompactTitle_1svpa > .navigation-bar__title_1svpa {
-            -webkit-line-clamp: 1;
-            word-break: break-all;
-        } .navigation-bar__content_1svpa.navigation-bar__contentOnBotDesktop_1svpa.navigation-bar__contentOnBotDesktop_1svpa {
-        padding-top: var(--gap-s);
-    } .navigation-bar__content_1svpa.navigation-bar__contentOnBotMobile_1svpa.navigation-bar__contentOnBotMobile_1svpa {
-        padding-top: var(--gap-s);
-    } .navigation-bar__title_1svpa {
-    word-break: break-word;
-} .navigation-bar__subtitle_1svpa {
+    justify-content: center;
+    flex-flow: column nowrap;
+    color: var(--color-light-text-primary)
+} .navigation-bar__content_chxq7.navigation-bar__left_chxq7 {
+        padding: 0 var(--gap-m);
+    } .navigation-bar__content_chxq7 > .navigation-bar__title_chxq7,
+    .navigation-bar__content_chxq7 > .navigation-bar__subtitle_chxq7 {
+        -webkit-line-clamp: 1;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        word-break: break-all;
+    } .navigation-bar__title_chxq7 {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 500
+} .navigation-bar__title_chxq7.navigation-bar__left_chxq7 {
+        font-size: 20px;
+        line-height: 28px;
+        font-weight: 600;
+    } .navigation-bar__subtitle_chxq7 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
-    -webkit-line-clamp: 1;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-
     color: var(--color-light-text-secondary);
-    word-break: break-all;
-} .navigation-bar__addonsWrapper_1svpa {
-    display: flex;
-} .navigation-bar__rightAddons_1svpa {
-    margin-left: auto;
-} .navigation-bar__addon_1svpa {
+} .navigation-bar__addons_chxq7 {
     min-width: 48px;
-    height: 48px;
     display: flex;
     justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    pointer-events: all;
-} .navigation-bar__bottomAddons_1svpa {
-    pointer-events: all;
-} .navigation-bar__closer_1svpa {
+} .navigation-bar__rightAddons_chxq7 {
     margin-left: auto;
-} .navigation-bar__left_1svpa {
-    text-align: left;
-} .navigation-bar__center_1svpa {
-    text-align: center;
-} .navigation-bar__trim_1svpa {
-    overflow: hidden
-} .navigation-bar__trim_1svpa .navigation-bar__title_1svpa,
-    .navigation-bar__trim_1svpa .navigation-bar__children_1svpa {
-        -webkit-line-clamp: 2;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
+}

package/modern/index.d.ts

@@ -1,2 +1 @@
 export * from "./Component";
-export type { NavigationBarProps } from "./types";

package/modern/shared/index.d.ts

@@ -1,2 +1,3 @@
-export * from "../components/closer/index";
-export * from "../components/back-arrow-addon/index";
+export * from "../components/action-icon-addon/index";
+export * from "../components/action-text-addon/index";
+export { getNavigationBarTestIds } from "../utils";

package/modern/shared/index.js

@@ -1,2 +1,3 @@
-export { Closer } from '../components/closer/Component.js';
-export { BackArrowAddon } from '../components/back-arrow-addon/Component.js';
+export { ActionIconAddon } from '../components/action-icon-addon/Component.js';
+export { ActionTextAddon } from '../components/action-text-addon/Component.js';
+export { getNavigationBarTestIds } from '../utils.js';

package/modern/utils.d.ts

@@ -0,0 +1,6 @@
+declare function getNavigationBarTestIds(dataTestId: string): {
+    navigationBar: string;
+    title: string;
+    subtitle: string;
+};
+export { getNavigationBarTestIds };

package/modern/utils.js

@@ -0,0 +1,11 @@
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
+
+function getNavigationBarTestIds(dataTestId) {
+    return {
+        navigationBar: dataTestId,
+        title: getDataTestId(dataTestId, 'title'),
+        subtitle: getDataTestId(dataTestId, 'subtitle'),
+    };
+}
+
+export { getNavigationBarTestIds };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@alfalab/core-components-navigation-bar",
-    "version": "0.8.6",
-    "description": "Navigation bar component",
+    "version": "1.0.0",
+    "description": "NavigationBar",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
@@ -10,18 +10,15 @@
         "access": "public",
         "directory": "dist"
     },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
+    },
     "dependencies": {
-        "@alfalab/core-components-icon-button": "^6.5.5",
-        "@alfalab/core-components-button": "^11.4.1",
+        "@alfalab/core-components-button": "^11.4.2",
         "@alfalab/core-components-typography": "^4.5.0",
         "@alfalab/core-components-shared": "^0.9.1",
-        "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",
-        "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"
-    },
-    "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     }
 }

package/shared/index.d.ts

@@ -1,2 +1,3 @@
-export * from "../components/closer/index";
-export * from "../components/back-arrow-addon/index";
+export * from "../components/action-icon-addon/index";
+export * from "../components/action-text-addon/index";
+export { getNavigationBarTestIds } from "../utils";

package/shared/index.js

@@ -2,10 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_closer_Component = require('../components/closer/Component.js');
-var components_backArrowAddon_Component = require('../components/back-arrow-addon/Component.js');
+var components_actionIconAddon_Component = require('../components/action-icon-addon/Component.js');
+var components_actionTextAddon_Component = require('../components/action-text-addon/Component.js');
+var utils = require('../utils.js');
 
 
 
-exports.Closer = components_closer_Component.Closer;
-exports.BackArrowAddon = components_backArrowAddon_Component.BackArrowAddon;
+exports.ActionIconAddon = components_actionIconAddon_Component.ActionIconAddon;
+exports.ActionTextAddon = components_actionTextAddon_Component.ActionTextAddon;
+exports.getNavigationBarTestIds = utils.getNavigationBarTestIds;