@servicetitan/navigation 11.0.0-canary.237.ff793b3.0 → 11.1.0

package/dist/components/titan-layout/layout-header.module.less

@@ -1,25 +1,39 @@
 /* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-duplicate-selectors */
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
 @size-links-tiny: 24px;
+@bg-light: @color-white;
+@bg-dark: @color-neutral-300;
+
+@c-light: @color-black;
+@c-dark: @color-white;
 
 .header {
     --nav-top-content-height: 32px;
+
+    height: var(--nav-offset-top);
     display: flex;
     justify-content: space-between;
 
-    background-color: @color-white;
-    color: @color-black;
+    color: var(--nav-top-text-color);
     box-sizing: border-box;
-    outline: 1px solid @color-neutral-60;
 
-    & > * {
-        overflow-y: hidden;
+    &.header-light {
+        background-color: @bg-light;
+        outline: 1px solid @color-neutral-60;
+
+        --nav-top-text-color: @c-light;
     }
 
-    .he-top-left {
-        display: flex;
-        align-items: center;
+    &.header-dark {
+        background-color: @bg-dark;
+
+        --nav-top-text-color: @c-dark;
+    }
+
+    & > * {
+        overflow-y: hidden;
     }
 
     .he-top-center {
@@ -28,7 +42,7 @@
 
     .he-top-right {
         & > * {
-            color: @color-black;
+            color: var(--nav-top-text-color);
         }
 
         .he-top-right-text {
@@ -48,76 +62,94 @@
         height: 32px;
         font-size: @size-links-tiny;
     }
+}
 
-    .navigation-link {
-        border-radius: 12px;
-        font-size: @size-links-tiny;
-        color: inherit;
+.header-mobile {
+    --nav-top-content-height: 40px;
 
-        &.navigation-item-active:not(.navigation-item-overflow) {
-            background-color: @color-blue-100 !important;
-            color: @color-blue-500 !important;
-        }
-        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
-            background-color: rgba(0, 0, 0, 0.12) !important;
-        }
+    .he-top-center {
+        max-width: unset;
+        flex: 1;
+        margin-left: @spacing-3;
+        margin-right: @spacing-3;
+    }
 
-        &.navigation-item-icon-state.navigation-item-active {
-            .navigation-icon:not(.navigation-icon-active) {
-                display: none;
-            }
+    .he-top-right {
+        margin-right: @spacing-half;
+    }
 
-            .navigation-icon.navigation-icon-active[data-anv][data-anv] {
-                display: block;
-            }
-        }
+    .he-top-center,
+    .he-top-right {
+        margin-top: @spacing-2;
+        margin-bottom: @spacing-2;
     }
 
-    .navigation-icon[data-anv][data-anv] {
-        display: inline-block;
-        color: inherit;
-        height: 24px;
-        width: 24px;
+    .burger {
+        padding-top: @spacing-2;
+        padding-right: @spacing-half;
+        padding-bottom: @spacing-2;
+        padding-left: @spacing-0;
+    }
+}
 
-        > svg {
-            height: @size-links-tiny;
-            width: @size-links-tiny;
-        }
+// desktop
+.header-desktop {
+    .he-top-center {
+        flex: 1;
+        margin-left: @spacing-2;
+        margin-right: @spacing-2;
+        max-width: 400px;
+    }
+}
 
-        &.navigation-icon-active {
-            display: none;
-        }
+// desktop stacked header
+.header-stacked {
+    display: flex;
+    flex-direction: column;
+
+    .header-desktop {
+        height: 44px;
+    }
+
+    .header-stacked-nav {
+        height: 36px;
+        background-color: @bg-dark;
+        border-top: 1px solid @color-neutral-200;
+        box-sizing: border-box;
     }
 }
+.header-navigation-wrapper {
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
 
-// desktop
-@media only screen and (min-width: 768px) {
-    .header {
-        height: var(--nav-offset-top);
-        .navigation-link {
-            margin: 6px 2px;
-            padding: 6px 6px;
-        }
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-        .he-top-left {
-            padding-left: @spacing-1;
-        }
-        .he-top-center {
-            flex: 1;
-            margin-left: @spacing-2;
-            margin-right: @spacing-2;
-            max-width: 400px;
+    &.calculating {
+        .header-navigation {
+            opacity: 0;
         }
     }
+
+    &.minimized {
+        display: flex;
+    }
+
+    .header-navigation {
+        display: inline-flex;
+    }
 }
+
 // desktop wide
 @media only screen and (min-width: 1200px) {
-    .header {
+    .header-desktop:not(.header-desktop-nav) {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: 48px;
 
-        .he-top-left,
+        .logo,
         .he-top-center,
         .he-top-right {
             grid-column: span 1;
@@ -127,45 +159,108 @@
             max-width: unset;
         }
     }
+
+    .header-desktop-nav {
+        .he-top-center {
+            max-width: unset;
+        }
+    }
 }
 
-// mobile
-@media only screen and (max-width: 768px) {
-    .header {
-        padding: @spacing-2 @spacing-0;
-        height: var(--nav-offset-top);
+//!!!!!!!!!!!!!!! logo styles !!!!!!!!!!!!!!!//
+.logo {
+    color: var(--nav-top-text-color);
+    height: 100%;
 
-        --nav-top-content-height: 40px;
+    display: flex;
+    align-items: center;
 
-        .navigation-link {
-            padding: 10px;
+    .logo-short-wrapper {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding-left: 10px;
+        padding-right: 10px;
+
+        svg {
+            height: 28px;
+        }
+    }
+    svg {
+        max-height: 100%;
+        width: auto;
+    }
+}
+
+.header-desktop {
+    .logo-company-wrapper {
+        height: 41px;
+        padding-left: 6px;
+    }
+    .logo-postfix {
+        margin-left: @spacing-1;
+    }
+    .logo-title {
+        margin-left: @spacing-0;
+    }
+}
+
+.header-dark.header-logo-custom {
+    .logo-short-wrapper,
+    .burger {
+        background-color: @color-white;
+        color: @c-light;
+    }
+
+    .burger .navigation-link {
+        color: inherit !important;
+    }
+    .logo-title {
+        margin-left: @spacing-1;
+    }
+}
+
+//!!!!!!!!!!!!!!! nav links styles !!!!!!!!!!!!!!!//
+.navigation-link {
+    &.navigation-item-icon-state.navigation-item-active {
+        .navigation-icon[data-anv][data-anv]:not(.navigation-icon-active) {
+            display: none;
         }
 
-        .he-top-center {
-            max-width: unset;
-            flex: 1;
-            margin-left: @spacing-3;
-            margin-right: @spacing-3;
+        .navigation-icon.navigation-icon-active[data-anv][data-anv] {
+            display: block;
         }
+    }
 
-        .he-top-left {
-            margin-left: @spacing-half;
+    .navigation-icon[data-anv][data-anv] {
+        display: inline-block;
+        color: inherit;
+
+        & > svg {
+            height: 1em;
+            width: 1em;
+            font-size: 1em;
         }
 
-        .he-top-right {
-            margin-right: @spacing-half;
+        &.navigation-icon-active {
+            display: none;
         }
     }
 }
 
-.navigation-link {
-    // styles specific to extra nav links
-    color: @color-black;
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    text-wrap: nowrap;
+// extra nav links styles
+.header {
+    .navigation-link {
+        color: var(--nav-top-text-color);
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-wrap: nowrap;
+
+        border-radius: 12px;
+        font-size: @size-links-tiny;
+    }
 
     .navigation-item-counter {
         color: @color-white;
@@ -176,6 +271,10 @@
         position: absolute;
         top: 4px;
         right: -2px;
+
+        &.navigation-item-counter-long {
+            right: -8px;
+        }
     }
 
     .navigation-item-label {
@@ -186,16 +285,147 @@
         margin-left: @spacing-half;
     }
 
-    &.navigation-item-counter-long {
-        right: -8px;
+    .navigation-icon[data-anv][data-anv] {
+        height: 24px;
+        width: 24px;
+    }
+
+    &.header-desktop {
+        .navigation-link {
+            margin: 6px 2px;
+            padding: 6px 6px;
+
+            .navigation-item-counter {
+                min-width: 12px !important;
+                height: 12px !important;
+            }
+        }
+    }
+
+    &.header-mobile {
+        .navigation-link {
+            padding: 10px;
+        }
+    }
+
+    &.header-light {
+        .navigation-link {
+            &.navigation-item-active {
+                background-color: @color-blue-100 !important;
+                color: @color-blue-500 !important;
+            }
+
+            &:hover:not(.navigation-item-active) {
+                background-color: rgba(0, 0, 0, 0.12) !important;
+            }
+        }
     }
 }
 
-@media only screen and (min-width: 768px) {
-    .navigation-link {
-        .navigation-item-counter {
-            min-width: 12px !important;
-            height: 12px !important;
+.header-dark .navigation-link,
+.header-navigation > .navigation-link {
+    &.navigation-item-active {
+        color: @color-blue-200 !important;
+    }
+
+    &:hover:not(.navigation-item-active) {
+        opacity: 0.7 !important;
+    }
+}
+
+// styles specific to main nav links
+.header-navigation .navigation-link {
+    font-family: @base-font-family;
+    color: @c-dark;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+    padding: 7px 10px;
+
+    .navigation-item-counter {
+        color: @color-white;
+        font-weight: @font-weight-semibold;
+        font-size: 8px !important;
+        min-width: 16px !important;
+        height: 12px !important;
+        position: absolute;
+        top: 4px;
+        right: -2px;
+
+        &.navigation-item-counter-long {
+            right: -8px;
         }
     }
+    .navigation-item-label {
+        font-family: @base-font-family;
+        font-size: @typescale-2;
+        margin-left: @spacing-half;
+    }
+    .navigation-icon[data-anv][data-anv] {
+        height: 20px;
+        width: 20px;
+        font-size: @typescale-4;
+    }
+}
+
+.header-navigation-overflow-trigger[data-anv][data-anv] {
+    padding: @spacing-half !important;
+
+    > span[data-anv][data-anv] {
+        color: @c-dark !important;
+        height: 24px !important;
+        width: 24px !important;
+        font-size: 24px !important;
+
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+    }
+}
+
+.header-navigation-overflow .navigation-link {
+    display: inline-flex;
+    color: @color-black;
+    padding: @spacing-1 12px;
+    cursor: pointer;
+
+    font-family: @base-font-family;
+    font-size: @typescale-4;
+    position: relative;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+
+    &:hover {
+        background-color: @color-blue-500;
+        color: @color-white;
+    }
+
+    &.navigation-item-active:not(:hover) {
+        color: @color-blue;
+    }
+
+    .navigation-item-label {
+        font-family: @base-font-family;
+        font-size: @typescale-2;
+        margin-left: @spacing-half;
+    }
+    .navigation-item-counter {
+        color: @color-white;
+        font-weight: @font-weight-semibold;
+        font-size: 8px !important;
+
+        min-width: 12px !important;
+        height: 12px !important;
+        margin-left: @spacing-half;
+        margin-top: -@spacing-1;
+    }
+    .navigation-icon[data-anv][data-anv] {
+        height: 20px;
+    }
 }

package/dist/components/titan-layout/layout-header.module.less.d.ts

@@ -0,0 +1,34 @@
+export const __esModule: true;
+export const burger: string;
+export const calculating: string;
+export const heTopCenter: string;
+export const heTopRight: string;
+export const heTopRightText: string;
+export const header: string;
+export const headerDark: string;
+export const headerDesktop: string;
+export const headerDesktopNav: string;
+export const headerLight: string;
+export const headerLogoCustom: string;
+export const headerMobile: string;
+export const headerNavigation: string;
+export const headerNavigationOverflow: string;
+export const headerNavigationOverflowTrigger: string;
+export const headerNavigationWrapper: string;
+export const headerStacked: string;
+export const headerStackedNav: string;
+export const logo: string;
+export const logoCompanyWrapper: string;
+export const logoPostfix: string;
+export const logoShortWrapper: string;
+export const logoTitle: string;
+export const minimized: string;
+export const navigationIcon: string;
+export const navigationIconActive: string;
+export const navigationItemActive: string;
+export const navigationItemCounter: string;
+export const navigationItemCounterLong: string;
+export const navigationItemIconState: string;
+export const navigationItemLabel: string;
+export const navigationLink: string;
+

package/dist/components/titan-layout/layout-logo.d.ts

@@ -1,12 +1,14 @@
 import { FC, ReactNode } from 'react';
 import { WrapperProps } from '../logo/logo-titan-text';
 export interface TitanLayoutLogoProps {
-    /** container class name */
-    className?: string;
     title?: string | boolean;
     postfix?: ReactNode;
     logoWrapper?: WrapperProps;
     mantleFill?: string;
+    to?: string;
 }
-export declare const TitanLayoutLogo: FC<TitanLayoutLogoProps>;
+export declare const isLogoCompany: (props: TitanLayoutLogoProps | undefined, isMobile: boolean) => boolean;
+export declare const isLogoCustom: (props: TitanLayoutLogoProps | undefined, isMobile: boolean) => boolean;
+export declare const isLogoText: (props: TitanLayoutLogoProps | undefined, isMobile: boolean) => boolean;
+export declare const LayoutLogo: FC<TitanLayoutLogoProps>;
 //# sourceMappingURL=layout-logo.d.ts.map

package/dist/components/titan-layout/layout-logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-logo.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAA6B,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGlF,MAAM,WAAW,oBAAoB;IACjC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEzB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA0CpD,CAAC"}
+{"version":3,"file":"layout-logo.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAkB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIvE,MAAM,WAAW,oBAAoB;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AAID,eAAO,MAAM,aAAa,GAAI,OAAO,oBAAoB,GAAG,SAAS,EAAE,UAAU,OAAO,YAClD,CAAC;AACvC,eAAO,MAAM,YAAY,GAAI,OAAO,oBAAoB,GAAG,SAAS,EAAE,UAAU,OAAO,YAC7B,CAAC;AAC3D,eAAO,MAAM,UAAU,GAAI,OAAO,oBAAoB,GAAG,SAAS,EAAE,UAAU,OAAO,YACpC,CAAC;AAElD,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,oBAAoB,CAmC/C,CAAC"}

package/dist/components/titan-layout/layout-logo.js

@@ -2,15 +2,51 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Fragment } from 'react';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
-import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
+import { LogoTitanSvg } from '../logo/logo-titan';
+import { LogoTitanTitle } from '../logo/logo-titan-text';
 import { useTitanLayoutContext } from './layout-context';
-const EmptyWrapper = ({ children }) => children;
-export const TitanLayoutLogo = ({ className, mantleFill, postfix, title, logoWrapper = EmptyWrapper, }) => {
-    const { breakpoint: { isMobile }, } = useTitanLayoutContext();
-    const Wrapper = logoWrapper;
-    const logoSize = isMobile ? 44 : 56;
-    const logoCompanySize = 48;
-    const showCompanyTitle = title === true && !isMobile;
-    return (_jsxs("div", { className: classNames('d-f align-items-center', { 'p-t-half': showCompanyTitle }, className), children: [showCompanyTitle ? (_jsx(Wrapper, { children: _jsx(LogoCompanyTitle, { height: logoCompanySize }) })) : typeof title === 'string' ? (_jsxs(Fragment, { children: [_jsx(LogoTitan, { size: logoSize, mantleFill: mantleFill, logoWrapper: Wrapper }), !isMobile && (_jsx(LogoTitanTitle, { className: "c-inherit m-l-1", children: title }))] })) : (_jsx(LogoTitan, { size: logoSize, mantleFill: mantleFill, logoWrapper: Wrapper })), !isMobile && postfix] }));
+import * as Styles from './layout-header.module.less';
+const EmptyWrapper = ({ children })=>children;
+export const isLogoCompany = (props, isMobile)=>(props === null || props === void 0 ? void 0 : props.title) === true && !isMobile;
+export const isLogoCustom = (props, isMobile)=>!isLogoCompany(props, isMobile) && !!(props === null || props === void 0 ? void 0 : props.mantleFill);
+export const isLogoText = (props, isMobile)=>typeof (props === null || props === void 0 ? void 0 : props.title) === 'string' && !isMobile;
+export const LayoutLogo = (props)=>{
+    const { NavigationComponent, breakpoint: { isMobile } } = useTitanLayoutContext();
+    const Wrapper = props.to ? NavigationComponent : EmptyWrapper;
+    const showCompanyTitle = isLogoCompany(props, isMobile);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classNames(Styles.logo),
+        "data-cy": "navigation-left",
+        children: [
+            showCompanyTitle ? /*#__PURE__*/ _jsx("div", {
+                className: Styles.logoCompanyWrapper,
+                children: /*#__PURE__*/ _jsx(Wrapper, {
+                    to: props.to,
+                    children: /*#__PURE__*/ _jsx(LogoCompanyTitle, {})
+                })
+            }) : /*#__PURE__*/ _jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: Styles.logoShortWrapper,
+                        children: /*#__PURE__*/ _jsx(Wrapper, {
+                            to: props.to,
+                            children: /*#__PURE__*/ _jsx(LogoTitanSvg, {
+                                mantleFill: props.mantleFill
+                            })
+                        })
+                    }),
+                    isLogoText(props, isMobile) && /*#__PURE__*/ _jsx(LogoTitanTitle, {
+                        className: Styles.logoTitle,
+                        children: props.title
+                    })
+                ]
+            }),
+            !isMobile && props.postfix && /*#__PURE__*/ _jsx("div", {
+                className: Styles.logoPostfix,
+                children: props.postfix
+            })
+        ]
+    });
 };
+
 //# sourceMappingURL=layout-logo.js.map

package/dist/components/titan-layout/layout-logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout-logo.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,cAAc,EAAgB,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAezD,MAAM,YAAY,GAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC;AAEzD,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EACtD,SAAS,EACT,UAAU,EACV,OAAO,EACP,KAAK,EACL,WAAW,GAAG,YAAY,GAC7B,EAAE,EAAE;IACD,MAAM,EACF,UAAU,EAAE,EAAE,QAAQ,EAAE,GAC3B,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,WAAW,CAAC;IAC5B,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,MAAM,eAAe,GAAG,EAAE,CAAC;IAC3B,MAAM,gBAAgB,GAAG,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC;IAErD,OAAO,CACH,eACI,SAAS,EAAE,UAAU,CACjB,wBAAwB,EACxB,EAAE,UAAU,EAAE,gBAAgB,EAAE,EAChC,SAAS,CACZ,aAEA,gBAAgB,CAAC,CAAC,CAAC,CAChB,KAAC,OAAO,cACJ,KAAC,gBAAgB,IAAC,MAAM,EAAE,eAAe,GAAI,GACvC,CACb,CAAC,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC5B,MAAC,QAAQ,eACL,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,GAAI,EAC1E,CAAC,QAAQ,IAAI,CACV,KAAC,cAAc,IAAC,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAkB,CACvE,IACM,CACd,CAAC,CAAC,CAAC,CACA,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,GAAI,CAC9E,EAEA,CAAC,QAAQ,IAAI,OAAO,IACnB,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-logo.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { FC, Fragment, ReactNode } from 'react';\nimport { LogoCompanyTitle } from '../logo/logo-company-title';\nimport { LogoTitanSvg } from '../logo/logo-titan';\nimport { LogoTitanTitle, WrapperProps } from '../logo/logo-titan-text';\nimport { useTitanLayoutContext } from './layout-context';\nimport * as Styles from './layout-header.module.less';\n\nexport interface TitanLayoutLogoProps {\n    title?: string | boolean;\n    postfix?: ReactNode;\n    logoWrapper?: WrapperProps;\n    mantleFill?: string;\n    to?: string;\n}\n\nconst EmptyWrapper: FC<any> = ({ children }) => children;\n\nexport const isLogoCompany = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>\n    props?.title === true && !isMobile;\nexport const isLogoCustom = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>\n    !isLogoCompany(props, isMobile) && !!props?.mantleFill;\nexport const isLogoText = (props: TitanLayoutLogoProps | undefined, isMobile: boolean) =>\n    typeof props?.title === 'string' && !isMobile;\n\nexport const LayoutLogo: FC<TitanLayoutLogoProps> = props => {\n    const {\n        NavigationComponent,\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const Wrapper: FC<any> = props.to ? NavigationComponent : EmptyWrapper;\n    const showCompanyTitle = isLogoCompany(props, isMobile);\n\n    return (\n        <div className={classNames(Styles.logo)} data-cy=\"navigation-left\">\n            {showCompanyTitle ? (\n                <div className={Styles.logoCompanyWrapper}>\n                    <Wrapper to={props.to}>\n                        <LogoCompanyTitle />\n                    </Wrapper>\n                </div>\n            ) : (\n                <Fragment>\n                    <div className={Styles.logoShortWrapper}>\n                        <Wrapper to={props.to}>\n                            <LogoTitanSvg mantleFill={props.mantleFill} />\n                        </Wrapper>\n                    </div>\n\n                    {isLogoText(props, isMobile) && (\n                        <LogoTitanTitle className={Styles.logoTitle}>{props.title}</LogoTitanTitle>\n                    )}\n                </Fragment>\n            )}\n\n            {!isMobile && props.postfix && (\n                <div className={Styles.logoPostfix}>{props.postfix}</div>\n            )}\n        </div>\n    );\n};\n"],"names":["classNames","Fragment","LogoCompanyTitle","LogoTitanSvg","LogoTitanTitle","useTitanLayoutContext","Styles","EmptyWrapper","children","isLogoCompany","props","isMobile","title","isLogoCustom","mantleFill","isLogoText","LayoutLogo","NavigationComponent","breakpoint","Wrapper","to","showCompanyTitle","div","className","logo","data-cy","logoCompanyWrapper","logoShortWrapper","logoTitle","postfix","logoPostfix"],"mappings":";AAAA,OAAOA,gBAAgB,aAAa;AACpC,SAAaC,QAAQ,QAAmB,QAAQ;AAChD,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,cAAc,QAAsB,0BAA0B;AACvE,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,YAAYC,YAAY,8BAA8B;AAUtD,MAAMC,eAAwB,CAAC,EAAEC,QAAQ,EAAE,GAAKA;AAEhD,OAAO,MAAMC,gBAAgB,CAACC,OAAyCC,WACnED,CAAAA,kBAAAA,4BAAAA,MAAOE,KAAK,MAAK,QAAQ,CAACD,SAAS;AACvC,OAAO,MAAME,eAAe,CAACH,OAAyCC,WAClE,CAACF,cAAcC,OAAOC,aAAa,CAAC,EAACD,kBAAAA,4BAAAA,MAAOI,UAAU,EAAC;AAC3D,OAAO,MAAMC,aAAa,CAACL,OAAyCC,WAChE,QAAOD,kBAAAA,4BAAAA,MAAOE,KAAK,MAAK,YAAY,CAACD,SAAS;AAElD,OAAO,MAAMK,aAAuCN,CAAAA;IAChD,MAAM,EACFO,mBAAmB,EACnBC,YAAY,EAAEP,QAAQ,EAAE,EAC3B,GAAGN;IACJ,MAAMc,UAAmBT,MAAMU,EAAE,GAAGH,sBAAsBV;IAC1D,MAAMc,mBAAmBZ,cAAcC,OAAOC;IAE9C,qBACI,MAACW;QAAIC,WAAWvB,WAAWM,OAAOkB,IAAI;QAAGC,WAAQ;;YAC5CJ,iCACG,KAACC;gBAAIC,WAAWjB,OAAOoB,kBAAkB;0BACrC,cAAA,KAACP;oBAAQC,IAAIV,MAAMU,EAAE;8BACjB,cAAA,KAAClB;;+BAIT,MAACD;;kCACG,KAACqB;wBAAIC,WAAWjB,OAAOqB,gBAAgB;kCACnC,cAAA,KAACR;4BAAQC,IAAIV,MAAMU,EAAE;sCACjB,cAAA,KAACjB;gCAAaW,YAAYJ,MAAMI,UAAU;;;;oBAIjDC,WAAWL,OAAOC,2BACf,KAACP;wBAAemB,WAAWjB,OAAOsB,SAAS;kCAAGlB,MAAME,KAAK;;;;YAKpE,CAACD,YAAYD,MAAMmB,OAAO,kBACvB,KAACP;gBAAIC,WAAWjB,OAAOwB,WAAW;0BAAGpB,MAAMmB,OAAO;;;;AAIlE,EAAE"}

package/dist/components/titan-layout/layout-logo.stories.d.ts

@@ -6,8 +6,19 @@ declare const _default: {
     parameters: {};
 };
 export default _default;
-export declare const LogoDefault: () => import("react/jsx-runtime").JSX.Element;
-export declare const LogoCompanyTitle: () => import("react/jsx-runtime").JSX.Element;
-export declare const LogoCommercial: () => import("react/jsx-runtime").JSX.Element;
-export declare const LogoWithPostfix: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoTinyDefault: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoTinyCompanyTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoTinyCommercial: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoTinyWithPostfix: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoTinyCommercialWithPostfix: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoStackedDefault: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoStackedCompanyTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoStackedCommercial: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoStackedWithPostfix: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoStackedCommercialWithPostfix: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoDarkDefault: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoDarkCompanyTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoDarkCommercial: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoDarkWithPostfix: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoDarkCommercialWithPostfix: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=layout-logo.stories.d.ts.map

package/dist/components/titan-layout/layout-logo.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-logo.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,eAAe,CAAC;;;;;;;AAUtE,wBAKE;AAEF,eAAO,MAAM,WAAW,+CAAuC,CAAC;AAEhE,eAAO,MAAM,gBAAgB,+CAA6C,CAAC;AAE3E,eAAO,MAAM,cAAc,+CAE1B,CAAC;AAEF,eAAO,MAAM,eAAe,+CAE3B,CAAC"}
+{"version":3,"file":"layout-logo.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,oBAAoB,EAAE,MAAM,eAAe,CAAC;;;;;;;AAOjE,wBAKE;AAEF,eAAO,MAAM,eAAe,+CAAsB,CAAC;AAEnD,eAAO,MAAM,oBAAoB,+CAAmC,CAAC;AAErE,eAAO,MAAM,kBAAkB,+CAAkE,CAAC;AAElG,eAAO,MAAM,mBAAmB,+CAG9B,CAAC;AAEH,eAAO,MAAM,6BAA6B,+CAIxC,CAAC;AAEH,eAAO,MAAM,kBAAkB,+CAM9B,CAAC;AACF,eAAO,MAAM,uBAAuB,+CAMnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,+CAMjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CASlC,CAAC;AAEF,eAAO,MAAM,gCAAgC,+CAU5C,CAAC;AAEF,eAAO,MAAM,eAAe,+CAK3B,CAAC;AACF,eAAO,MAAM,oBAAoB,+CAKhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,+CAK9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAQ/B,CAAC;AAEF,eAAO,MAAM,6BAA6B,+CASzC,CAAC"}