@servicetitan/navigation 11.1.0 → 11.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/titan-layout/layout-header.module.less +17 -7
- package/dist/components/titan-layout/layout-header.module.less.d.ts +1 -0
- package/dist/components/titan-layout/layout-logo.d.ts +3 -5
- package/dist/components/titan-layout/layout-logo.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-logo.js +12 -7
- package/dist/components/titan-layout/layout-logo.js.map +1 -1
- package/package.json +2 -2
- package/src/components/titan-layout/layout-header.module.less +17 -7
- package/src/components/titan-layout/layout-header.module.less.d.ts +1 -0
- package/src/components/titan-layout/layout-logo.tsx +16 -15
|
@@ -182,7 +182,8 @@
|
|
|
182
182
|
padding-left: 10px;
|
|
183
183
|
padding-right: 10px;
|
|
184
184
|
|
|
185
|
-
svg
|
|
185
|
+
svg,
|
|
186
|
+
.logo-link {
|
|
186
187
|
height: 28px;
|
|
187
188
|
}
|
|
188
189
|
}
|
|
@@ -190,12 +191,27 @@
|
|
|
190
191
|
max-height: 100%;
|
|
191
192
|
width: auto;
|
|
192
193
|
}
|
|
194
|
+
.logo-link {
|
|
195
|
+
color: inherit;
|
|
196
|
+
text-decoration: none;
|
|
197
|
+
outline: none;
|
|
198
|
+
|
|
199
|
+
&:active,
|
|
200
|
+
&:hover {
|
|
201
|
+
color: inherit;
|
|
202
|
+
text-decoration: none;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
193
205
|
}
|
|
194
206
|
|
|
195
207
|
.header-desktop {
|
|
196
208
|
.logo-company-wrapper {
|
|
197
209
|
height: 41px;
|
|
198
210
|
padding-left: 6px;
|
|
211
|
+
|
|
212
|
+
.logo-link {
|
|
213
|
+
height: 41px;
|
|
214
|
+
}
|
|
199
215
|
}
|
|
200
216
|
.logo-postfix {
|
|
201
217
|
margin-left: @spacing-1;
|
|
@@ -206,12 +222,6 @@
|
|
|
206
222
|
}
|
|
207
223
|
|
|
208
224
|
.header-dark.header-logo-custom {
|
|
209
|
-
.logo-short-wrapper,
|
|
210
|
-
.burger {
|
|
211
|
-
background-color: @color-white;
|
|
212
|
-
color: @c-light;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
225
|
.burger .navigation-link {
|
|
216
226
|
color: inherit !important;
|
|
217
227
|
}
|
|
@@ -19,6 +19,7 @@ export const headerStacked: string;
|
|
|
19
19
|
export const headerStackedNav: string;
|
|
20
20
|
export const logo: string;
|
|
21
21
|
export const logoCompanyWrapper: string;
|
|
22
|
+
export const logoLink: string;
|
|
22
23
|
export const logoPostfix: string;
|
|
23
24
|
export const logoShortWrapper: string;
|
|
24
25
|
export const logoTitle: string;
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
import { FC, ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
export interface TitanLayoutLogoProps {
|
|
1
|
+
import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
|
|
2
|
+
export type TitanLayoutLogoProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style' | 'title'> & {
|
|
4
3
|
title?: string | boolean;
|
|
5
4
|
postfix?: ReactNode;
|
|
6
|
-
logoWrapper?: WrapperProps;
|
|
7
5
|
mantleFill?: string;
|
|
8
6
|
to?: string;
|
|
9
|
-
}
|
|
7
|
+
};
|
|
10
8
|
export declare const isLogoCompany: (props: TitanLayoutLogoProps | undefined, isMobile: boolean) => boolean;
|
|
11
9
|
export declare const isLogoCustom: (props: TitanLayoutLogoProps | undefined, isMobile: boolean) => boolean;
|
|
12
10
|
export declare const isLogoText: (props: TitanLayoutLogoProps | undefined, isMobile: boolean) => boolean;
|
|
@@ -1 +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;
|
|
1
|
+
{"version":3,"file":"layout-logo.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAO1E,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACnC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,OAAO,GAAG,OAAO,CACjC,GAAG;IACA,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAIF,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,CAkC/C,CAAC"}
|
|
@@ -12,38 +12,43 @@ export const isLogoCustom = (props, isMobile)=>!isLogoCompany(props, isMobile) &
|
|
|
12
12
|
export const isLogoText = (props, isMobile)=>typeof (props === null || props === void 0 ? void 0 : props.title) === 'string' && !isMobile;
|
|
13
13
|
export const LayoutLogo = (props)=>{
|
|
14
14
|
const { NavigationComponent, breakpoint: { isMobile } } = useTitanLayoutContext();
|
|
15
|
-
const
|
|
15
|
+
const { title, postfix, mantleFill, to, ...rest } = props;
|
|
16
|
+
const Wrapper = to ? NavigationComponent : EmptyWrapper;
|
|
16
17
|
const showCompanyTitle = isLogoCompany(props, isMobile);
|
|
17
18
|
return /*#__PURE__*/ _jsxs("div", {
|
|
18
19
|
className: classNames(Styles.logo),
|
|
19
20
|
"data-cy": "navigation-left",
|
|
20
21
|
children: [
|
|
21
22
|
showCompanyTitle ? /*#__PURE__*/ _jsx("div", {
|
|
23
|
+
...rest,
|
|
22
24
|
className: Styles.logoCompanyWrapper,
|
|
23
25
|
children: /*#__PURE__*/ _jsx(Wrapper, {
|
|
24
|
-
to:
|
|
26
|
+
to: to,
|
|
27
|
+
className: Styles.logoLink,
|
|
25
28
|
children: /*#__PURE__*/ _jsx(LogoCompanyTitle, {})
|
|
26
29
|
})
|
|
27
30
|
}) : /*#__PURE__*/ _jsxs(Fragment, {
|
|
28
31
|
children: [
|
|
29
32
|
/*#__PURE__*/ _jsx("div", {
|
|
33
|
+
...rest,
|
|
30
34
|
className: Styles.logoShortWrapper,
|
|
31
35
|
children: /*#__PURE__*/ _jsx(Wrapper, {
|
|
32
|
-
to:
|
|
36
|
+
to: to,
|
|
37
|
+
className: Styles.logoLink,
|
|
33
38
|
children: /*#__PURE__*/ _jsx(LogoTitanSvg, {
|
|
34
|
-
mantleFill:
|
|
39
|
+
mantleFill: mantleFill
|
|
35
40
|
})
|
|
36
41
|
})
|
|
37
42
|
}),
|
|
38
43
|
isLogoText(props, isMobile) && /*#__PURE__*/ _jsx(LogoTitanTitle, {
|
|
39
44
|
className: Styles.logoTitle,
|
|
40
|
-
children:
|
|
45
|
+
children: title
|
|
41
46
|
})
|
|
42
47
|
]
|
|
43
48
|
}),
|
|
44
|
-
!isMobile &&
|
|
49
|
+
!isMobile && postfix && /*#__PURE__*/ _jsx("div", {
|
|
45
50
|
className: Styles.logoPostfix,
|
|
46
|
-
children:
|
|
51
|
+
children: postfix
|
|
47
52
|
})
|
|
48
53
|
]
|
|
49
54
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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
|
|
1
|
+
{"version":3,"sources":["../../../src/components/titan-layout/layout-logo.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, Fragment, ReactNode } from 'react';\nimport { LogoCompanyTitle } from '../logo/logo-company-title';\nimport { LogoTitanSvg } from '../logo/logo-titan';\nimport { LogoTitanTitle } from '../logo/logo-titan-text';\nimport { useTitanLayoutContext } from './layout-context';\nimport * as Styles from './layout-header.module.less';\n\nexport type TitanLayoutLogoProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'children' | 'style' | 'title'\n> & {\n title?: string | boolean;\n postfix?: ReactNode;\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 { title, postfix, mantleFill, to, ...rest } = props;\n const Wrapper: FC<any> = 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 {...rest} className={Styles.logoCompanyWrapper}>\n <Wrapper to={to} className={Styles.logoLink}>\n <LogoCompanyTitle />\n </Wrapper>\n </div>\n ) : (\n <Fragment>\n <div {...rest} className={Styles.logoShortWrapper}>\n <Wrapper to={to} className={Styles.logoLink}>\n <LogoTitanSvg mantleFill={mantleFill} />\n </Wrapper>\n </div>\n\n {isLogoText(props, isMobile) && (\n <LogoTitanTitle className={Styles.logoTitle}>{title}</LogoTitanTitle>\n )}\n </Fragment>\n )}\n\n {!isMobile && postfix && <div className={Styles.logoPostfix}>{postfix}</div>}\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","postfix","to","rest","Wrapper","showCompanyTitle","div","className","logo","data-cy","logoCompanyWrapper","logoLink","logoShortWrapper","logoTitle","logoPostfix"],"mappings":";AAAA,OAAOA,gBAAgB,aAAa;AACpC,SAAuCC,QAAQ,QAAmB,QAAQ;AAC1E,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,YAAYC,YAAY,8BAA8B;AAYtD,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,MAAM,EAAEO,KAAK,EAAEO,OAAO,EAAEL,UAAU,EAAEM,EAAE,EAAE,GAAGC,MAAM,GAAGX;IACpD,MAAMY,UAAmBF,KAAKH,sBAAsBV;IACpD,MAAMgB,mBAAmBd,cAAcC,OAAOC;IAE9C,qBACI,MAACa;QAAIC,WAAWzB,WAAWM,OAAOoB,IAAI;QAAGC,WAAQ;;YAC5CJ,iCACG,KAACC;gBAAK,GAAGH,IAAI;gBAAEI,WAAWnB,OAAOsB,kBAAkB;0BAC/C,cAAA,KAACN;oBAAQF,IAAIA;oBAAIK,WAAWnB,OAAOuB,QAAQ;8BACvC,cAAA,KAAC3B;;+BAIT,MAACD;;kCACG,KAACuB;wBAAK,GAAGH,IAAI;wBAAEI,WAAWnB,OAAOwB,gBAAgB;kCAC7C,cAAA,KAACR;4BAAQF,IAAIA;4BAAIK,WAAWnB,OAAOuB,QAAQ;sCACvC,cAAA,KAAC1B;gCAAaW,YAAYA;;;;oBAIjCC,WAAWL,OAAOC,2BACf,KAACP;wBAAeqB,WAAWnB,OAAOyB,SAAS;kCAAGnB;;;;YAKzD,CAACD,YAAYQ,yBAAW,KAACK;gBAAIC,WAAWnB,OAAO0B,WAAW;0BAAGb;;;;AAG1E,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "11.1.
|
|
3
|
+
"version": "11.1.2",
|
|
4
4
|
"description": "Navigation components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"less": true,
|
|
43
43
|
"webpack": false
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "c0642952ccc58829c0d57db99b5098485c216fe9"
|
|
46
46
|
}
|
|
@@ -182,7 +182,8 @@
|
|
|
182
182
|
padding-left: 10px;
|
|
183
183
|
padding-right: 10px;
|
|
184
184
|
|
|
185
|
-
svg
|
|
185
|
+
svg,
|
|
186
|
+
.logo-link {
|
|
186
187
|
height: 28px;
|
|
187
188
|
}
|
|
188
189
|
}
|
|
@@ -190,12 +191,27 @@
|
|
|
190
191
|
max-height: 100%;
|
|
191
192
|
width: auto;
|
|
192
193
|
}
|
|
194
|
+
.logo-link {
|
|
195
|
+
color: inherit;
|
|
196
|
+
text-decoration: none;
|
|
197
|
+
outline: none;
|
|
198
|
+
|
|
199
|
+
&:active,
|
|
200
|
+
&:hover {
|
|
201
|
+
color: inherit;
|
|
202
|
+
text-decoration: none;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
193
205
|
}
|
|
194
206
|
|
|
195
207
|
.header-desktop {
|
|
196
208
|
.logo-company-wrapper {
|
|
197
209
|
height: 41px;
|
|
198
210
|
padding-left: 6px;
|
|
211
|
+
|
|
212
|
+
.logo-link {
|
|
213
|
+
height: 41px;
|
|
214
|
+
}
|
|
199
215
|
}
|
|
200
216
|
.logo-postfix {
|
|
201
217
|
margin-left: @spacing-1;
|
|
@@ -206,12 +222,6 @@
|
|
|
206
222
|
}
|
|
207
223
|
|
|
208
224
|
.header-dark.header-logo-custom {
|
|
209
|
-
.logo-short-wrapper,
|
|
210
|
-
.burger {
|
|
211
|
-
background-color: @color-white;
|
|
212
|
-
color: @c-light;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
225
|
.burger .navigation-link {
|
|
216
226
|
color: inherit !important;
|
|
217
227
|
}
|
|
@@ -19,6 +19,7 @@ export const headerStacked: string;
|
|
|
19
19
|
export const headerStackedNav: string;
|
|
20
20
|
export const logo: string;
|
|
21
21
|
export const logoCompanyWrapper: string;
|
|
22
|
+
export const logoLink: string;
|
|
22
23
|
export const logoPostfix: string;
|
|
23
24
|
export const logoShortWrapper: string;
|
|
24
25
|
export const logoTitle: string;
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import { FC, Fragment, ReactNode } from 'react';
|
|
2
|
+
import { ComponentPropsWithoutRef, FC, Fragment, ReactNode } from 'react';
|
|
3
3
|
import { LogoCompanyTitle } from '../logo/logo-company-title';
|
|
4
4
|
import { LogoTitanSvg } from '../logo/logo-titan';
|
|
5
|
-
import { LogoTitanTitle
|
|
5
|
+
import { LogoTitanTitle } from '../logo/logo-titan-text';
|
|
6
6
|
import { useTitanLayoutContext } from './layout-context';
|
|
7
7
|
import * as Styles from './layout-header.module.less';
|
|
8
8
|
|
|
9
|
-
export
|
|
9
|
+
export type TitanLayoutLogoProps = Omit<
|
|
10
|
+
ComponentPropsWithoutRef<'div'>,
|
|
11
|
+
'children' | 'style' | 'title'
|
|
12
|
+
> & {
|
|
10
13
|
title?: string | boolean;
|
|
11
14
|
postfix?: ReactNode;
|
|
12
|
-
logoWrapper?: WrapperProps;
|
|
13
15
|
mantleFill?: string;
|
|
14
16
|
to?: string;
|
|
15
|
-
}
|
|
17
|
+
};
|
|
16
18
|
|
|
17
19
|
const EmptyWrapper: FC<any> = ({ children }) => children;
|
|
18
20
|
|
|
@@ -28,34 +30,33 @@ export const LayoutLogo: FC<TitanLayoutLogoProps> = props => {
|
|
|
28
30
|
NavigationComponent,
|
|
29
31
|
breakpoint: { isMobile },
|
|
30
32
|
} = useTitanLayoutContext();
|
|
31
|
-
const
|
|
33
|
+
const { title, postfix, mantleFill, to, ...rest } = props;
|
|
34
|
+
const Wrapper: FC<any> = to ? NavigationComponent : EmptyWrapper;
|
|
32
35
|
const showCompanyTitle = isLogoCompany(props, isMobile);
|
|
33
36
|
|
|
34
37
|
return (
|
|
35
38
|
<div className={classNames(Styles.logo)} data-cy="navigation-left">
|
|
36
39
|
{showCompanyTitle ? (
|
|
37
|
-
<div className={Styles.logoCompanyWrapper}>
|
|
38
|
-
<Wrapper to={
|
|
40
|
+
<div {...rest} className={Styles.logoCompanyWrapper}>
|
|
41
|
+
<Wrapper to={to} className={Styles.logoLink}>
|
|
39
42
|
<LogoCompanyTitle />
|
|
40
43
|
</Wrapper>
|
|
41
44
|
</div>
|
|
42
45
|
) : (
|
|
43
46
|
<Fragment>
|
|
44
|
-
<div className={Styles.logoShortWrapper}>
|
|
45
|
-
<Wrapper to={
|
|
46
|
-
<LogoTitanSvg mantleFill={
|
|
47
|
+
<div {...rest} className={Styles.logoShortWrapper}>
|
|
48
|
+
<Wrapper to={to} className={Styles.logoLink}>
|
|
49
|
+
<LogoTitanSvg mantleFill={mantleFill} />
|
|
47
50
|
</Wrapper>
|
|
48
51
|
</div>
|
|
49
52
|
|
|
50
53
|
{isLogoText(props, isMobile) && (
|
|
51
|
-
<LogoTitanTitle className={Styles.logoTitle}>{
|
|
54
|
+
<LogoTitanTitle className={Styles.logoTitle}>{title}</LogoTitanTitle>
|
|
52
55
|
)}
|
|
53
56
|
</Fragment>
|
|
54
57
|
)}
|
|
55
58
|
|
|
56
|
-
{!isMobile &&
|
|
57
|
-
<div className={Styles.logoPostfix}>{props.postfix}</div>
|
|
58
|
-
)}
|
|
59
|
+
{!isMobile && postfix && <div className={Styles.logoPostfix}>{postfix}</div>}
|
|
59
60
|
</div>
|
|
60
61
|
);
|
|
61
62
|
};
|