@servicetitan/navigation 11.0.0-canary.237.f2d512b.0 → 11.0.0-canary.237.fef17f5.0
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 +29 -13
- package/dist/components/titan-layout/layout-sidebar-links.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links.js +2 -2
- package/dist/components/titan-layout/layout-sidebar-links.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.module.less +4 -1
- package/dist/components/titan-layout/titan-layout.d.ts +4 -3
- package/dist/components/titan-layout/titan-layout.d.ts.map +1 -1
- package/dist/components/titan-layout/titan-layout.js +39 -11
- package/dist/components/titan-layout/titan-layout.js.map +1 -1
- package/dist/components/titan-layout/titan-layout.module.less +11 -3
- package/dist/components/titan-layout/titan-layout.stories.d.ts +11 -11
- package/dist/components/titan-layout/titan-layout.stories.d.ts.map +1 -1
- package/dist/components/titan-layout/titan-layout.stories.js +25 -12
- package/dist/components/titan-layout/titan-layout.stories.js.map +1 -1
- package/package.json +2 -2
- package/src/components/titan-layout/layout-header.module.less +29 -13
- package/src/components/titan-layout/layout-sidebar-links.tsx +5 -2
- package/src/components/titan-layout/layout-sidebar.module.less +4 -1
- package/src/components/titan-layout/titan-layout.module.less +11 -3
- package/src/components/titan-layout/titan-layout.module.less.d.ts +2 -0
- package/src/components/titan-layout/titan-layout.stories.tsx +55 -15
- package/src/components/titan-layout/titan-layout.tsx +77 -18
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
@size-links-tiny: 24px;
|
|
5
5
|
|
|
6
6
|
.header {
|
|
7
|
-
display:
|
|
7
|
+
display: flex;
|
|
8
|
+
justify-content: space-between;
|
|
8
9
|
|
|
9
10
|
background-color: @color-white;
|
|
10
11
|
color: @color-black;
|
|
@@ -15,18 +16,11 @@
|
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
.he-top-left {
|
|
18
|
-
grid-column: span 1;
|
|
19
19
|
display: flex;
|
|
20
20
|
align-items: center;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.he-top-center {
|
|
24
|
-
grid-column: span 1;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
23
|
.he-top-right {
|
|
28
|
-
grid-column: span 1;
|
|
29
|
-
|
|
30
24
|
& > * {
|
|
31
25
|
color: @color-black;
|
|
32
26
|
}
|
|
@@ -93,23 +87,45 @@
|
|
|
93
87
|
// desktop
|
|
94
88
|
@media only screen and (min-width: 768px) {
|
|
95
89
|
.header {
|
|
96
|
-
grid-template-columns: repeat(3, 1fr);
|
|
97
|
-
grid-template-rows: 48px;
|
|
98
|
-
|
|
99
90
|
.navigation-link {
|
|
100
91
|
margin: 6px 2px;
|
|
101
92
|
padding: 6px 6px;
|
|
102
93
|
}
|
|
94
|
+
|
|
95
|
+
.he-top-left {
|
|
96
|
+
padding-left: @spacing-1;
|
|
97
|
+
}
|
|
98
|
+
.he-top-center {
|
|
99
|
+
flex: 1;
|
|
100
|
+
margin-left: @spacing-2;
|
|
101
|
+
margin-right: @spacing-2;
|
|
102
|
+
max-width: 400px;
|
|
103
|
+
}
|
|
103
104
|
}
|
|
105
|
+
}
|
|
106
|
+
// desktop wide
|
|
107
|
+
@media only screen and (min-width: 1200px) {
|
|
108
|
+
.header {
|
|
109
|
+
display: grid;
|
|
110
|
+
grid-template-columns: repeat(3, 1fr);
|
|
111
|
+
grid-template-rows: 48px;
|
|
104
112
|
|
|
105
|
-
|
|
106
|
-
|
|
113
|
+
.he-top-left,
|
|
114
|
+
.he-top-center,
|
|
115
|
+
.he-top-right {
|
|
116
|
+
grid-column: span 1;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.he-top-center {
|
|
120
|
+
max-width: unset;
|
|
121
|
+
}
|
|
107
122
|
}
|
|
108
123
|
}
|
|
109
124
|
|
|
110
125
|
// mobile
|
|
111
126
|
@media only screen and (max-width: 768px) {
|
|
112
127
|
.header {
|
|
128
|
+
display: grid;
|
|
113
129
|
grid-template-columns: repeat(3, 1fr);
|
|
114
130
|
grid-template-rows: 44px;
|
|
115
131
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-sidebar-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,2BAA2B,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAe1F,gCAAgC;AAChC,wBAAgB,sBAAsB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,
|
|
1
|
+
{"version":3,"file":"layout-sidebar-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,2BAA2B,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAe1F,gCAAgC;AAChC,wBAAgB,sBAAsB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,2CAiBxF;AAED,mCAAmC;AACnC,wBAAgB,yBAAyB,CAAC,EACtC,OAAO,EACP,aAAa,EACb,OAAO,EACP,GAAG,KAAK,EACX,EAAE,8BAA8B,2CAehC"}
|
|
@@ -8,9 +8,9 @@ const WrappedLink = ({ children, wrapper: WrapperComponent }) => {
|
|
|
8
8
|
};
|
|
9
9
|
/** Side Navigation menu link */
|
|
10
10
|
export function TitanLayoutSidebarLink({ wrapper, ...props }) {
|
|
11
|
-
const { NavigationComponent } = useTitanLayoutContext();
|
|
11
|
+
const { NavigationComponent, breakpoint: { isMobile }, } = useTitanLayoutContext();
|
|
12
12
|
const element = (_jsx(InternalSideNavigationLink, { ...props, navigationComponent: NavigationComponent, submenuExpanded: undefined, dataPrefix: "navigation-link", tag: getCounterTag(props.counter, props.tag) }));
|
|
13
|
-
return wrapper ? _jsx(WrappedLink, { wrapper: wrapper, children: element }) : element;
|
|
13
|
+
return wrapper && !isMobile ? _jsx(WrappedLink, { wrapper: wrapper, children: element }) : element;
|
|
14
14
|
}
|
|
15
15
|
/** Side Navigation menu trigger */
|
|
16
16
|
export function TitanLayoutSidebarTrigger({ wrapper, onMobileClick, onClick, ...props }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-sidebar-links.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EACH,0BAA0B,EAC1B,6BAA6B,GAChC,MAAM,iCAAiC,CAAC;AAEzC,MAAM,WAAW,GAGZ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC7C,MAAM,EAAE,OAAO,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC5C,OAAO,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,YAAG,QAAQ,GAAoB,CAAC;AAC7E,CAAC,CAAC;AAEF,gCAAgC;AAChC,MAAM,UAAU,sBAAsB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAA+B;IACrF,MAAM,
|
|
1
|
+
{"version":3,"file":"layout-sidebar-links.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EACH,0BAA0B,EAC1B,6BAA6B,GAChC,MAAM,iCAAiC,CAAC;AAEzC,MAAM,WAAW,GAGZ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC7C,MAAM,EAAE,OAAO,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC5C,OAAO,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,YAAG,QAAQ,GAAoB,CAAC;AAC7E,CAAC,CAAC;AAEF,gCAAgC;AAChC,MAAM,UAAU,sBAAsB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAA+B;IACrF,MAAM,EACF,mBAAmB,EACnB,UAAU,EAAE,EAAE,QAAQ,EAAE,GAC3B,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,CACZ,KAAC,0BAA0B,OACnB,KAAK,EACT,mBAAmB,EAAE,mBAAmB,EACxC,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAC,iBAAiB,EAC5B,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,GAC9C,CACL,CAAC;IAEF,OAAO,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,YAAG,OAAO,GAAe,CAAC,CAAC,CAAC,OAAO,CAAC;AACnG,CAAC;AAED,mCAAmC;AACnC,MAAM,UAAU,yBAAyB,CAAC,EACtC,OAAO,EACP,aAAa,EACb,OAAO,EACP,GAAG,KAAK,EACqB;IAC7B,MAAM,EACF,UAAU,EAAE,EAAE,QAAQ,EAAE,GAC3B,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,CACZ,KAAC,6BAA6B,OACtB,KAAK,EACT,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAC,oBAAoB,EAC/B,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,EAC5C,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,GAChE,CACL,CAAC;IACF,OAAO,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,YAAG,OAAO,GAAe,CAAC,CAAC,CAAC,OAAO,CAAC;AACnG,CAAC"}
|
|
@@ -141,7 +141,6 @@
|
|
|
141
141
|
// desktop version expanded
|
|
142
142
|
.nav-wide {
|
|
143
143
|
width: var(--nav-offset-left);
|
|
144
|
-
padding-top: @spacing-2;
|
|
145
144
|
|
|
146
145
|
.toggle {
|
|
147
146
|
.toggle-content {
|
|
@@ -162,6 +161,10 @@
|
|
|
162
161
|
margin-top: @spacing-1;
|
|
163
162
|
margin-bottom: @spacing-1;
|
|
164
163
|
}
|
|
164
|
+
|
|
165
|
+
.nav-main {
|
|
166
|
+
padding-top: @spacing-1;
|
|
167
|
+
}
|
|
165
168
|
}
|
|
166
169
|
|
|
167
170
|
.nav-drawer,
|
|
@@ -17,11 +17,12 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
|
|
|
17
17
|
state?: TitanLayoutState;
|
|
18
18
|
onStateChange?: (state: TitanLayoutState) => void;
|
|
19
19
|
header?: ReactElement;
|
|
20
|
+
top?: ReactElement;
|
|
21
|
+
sideTop?: ReactElement[];
|
|
20
22
|
profile?: ReactElement;
|
|
21
23
|
extraLinks?: ReactElement;
|
|
22
24
|
extraLinksTop?: ReactElement;
|
|
23
25
|
extraText?: string;
|
|
24
|
-
sidebarTop?: ReactElement[];
|
|
25
26
|
};
|
|
26
27
|
export interface TitanLayoutContentProps {
|
|
27
28
|
children: ReactNode;
|
|
@@ -29,8 +30,8 @@ export interface TitanLayoutContentProps {
|
|
|
29
30
|
export declare const TitanLayout: FC<TitanLayoutProps> & {
|
|
30
31
|
Content: FC<TitanLayoutContentProps>;
|
|
31
32
|
Logo: FC<TitanLayoutLogoProps>;
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
Link: typeof TitanLayoutSidebarLink;
|
|
34
|
+
Trigger: typeof TitanLayoutSidebarTrigger;
|
|
34
35
|
};
|
|
35
36
|
export {};
|
|
36
37
|
//# sourceMappingURL=titan-layout.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,wBAAwB,EACxB,EAAE,EAEF,YAAY,EACZ,SAAS,
|
|
1
|
+
{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,wBAAwB,EACxB,EAAE,EAEF,YAAY,EACZ,SAAS,EAOZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQ/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAI3F,KAAK,gBAAgB,GAAG,YAAY,CAAC,uBAAuB,CAAC,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC;AAEnG,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,uBAAuB;IACvB,QAAQ,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IAEjD,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA4OF,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,SAAS,CAAC;CACvB;AA4BD,eAAO,MAAM,WAAW;;;;;CAKtB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import { Children, Fragment, isValidElement, useCallback, useEffect, useMemo, useState, } from 'react';
|
|
3
|
+
import { Children, Fragment, isValidElement, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
|
|
4
4
|
import { DefaultNavLinkComponent } from '../../utils/navigation-context';
|
|
5
5
|
import { useTitanBreakpoint } from '../../utils/use-breakpoint';
|
|
6
6
|
import { LayoutContext, LayoutPlacementContext, } from './layout-context';
|
|
@@ -45,7 +45,7 @@ const useLayoutChildren = (children) => useMemo(() => Children.toArray(children)
|
|
|
45
45
|
}, {
|
|
46
46
|
logo: _jsx(TitanLayoutLogo, {}),
|
|
47
47
|
}), [children]);
|
|
48
|
-
const TitanLayoutComponent = ({ appearance = 'anvil2', id, children, navigationComponent, header, profile, state, onStateChange, navigationMainItems, extraLinks, extraLinksTop, extraText,
|
|
48
|
+
const TitanLayoutComponent = ({ appearance = 'anvil2', id, children, navigationComponent, header, top, profile, state, onStateChange, navigationMainItems, extraLinks, extraLinksTop, extraText, sideTop, }) => {
|
|
49
49
|
const breakpoint = useTitanBreakpoint();
|
|
50
50
|
const isMobile = breakpoint.isMobile;
|
|
51
51
|
const context = useMemo(() => ({
|
|
@@ -87,23 +87,51 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', id, children, navigationC
|
|
|
87
87
|
submenuExpanded: expanded ? id : undefined,
|
|
88
88
|
});
|
|
89
89
|
}, [state, onStateChange]);
|
|
90
|
-
const [layoutStyles] = useState({});
|
|
91
90
|
const layoutClass = variant.isLegacy
|
|
92
91
|
? Styles.layoutLegacy
|
|
93
92
|
: variant.isAnvil1
|
|
94
93
|
? Styles.layoutAnvil1
|
|
95
94
|
: Styles.layoutAnvil2;
|
|
96
|
-
return (_jsx(LayoutContext.Provider, { value: context, children: _jsx(LayoutPlacementContext.Provider, { value: "unset", children: _jsxs("div", { id: id, className: classNames(Styles.layout, isMobile
|
|
97
|
-
? Styles.
|
|
98
|
-
: (state === null || state === void 0 ? void 0 : state.navCollapsed)
|
|
99
|
-
|
|
100
|
-
|
|
95
|
+
return (_jsx(LayoutContext.Provider, { value: context, children: _jsx(LayoutPlacementContext.Provider, { value: "unset", children: _jsxs("div", { id: id, className: classNames(Styles.layout, isMobile ? Styles.layoutMobile : Styles.layoutDesktop, !isMobile && (state === null || state === void 0 ? void 0 : state.navCollapsed)
|
|
96
|
+
? Styles.layoutNavSlim
|
|
97
|
+
: Styles.layoutNavWide, layoutClass), children: [variant.isSequent && _jsx("div", { className: Styles.topPlaceholder }), _jsx(LayoutHeader, { className: Styles.top, logo: logo, profile: isMobile ? undefined : profile, center: top, rightText: isMobile ? undefined : extraText, right: _jsxs(Fragment, { children: [extraLinksTop, !isMobile && extraLinks] }), onBurgerClick: onBurgerClick }), _jsx(LayoutSidebar, { className: Styles.side, mobile: breakpoint.isMobile, barExpanded: isMobile ? mobileDrawerOpened : !(state === null || state === void 0 ? void 0 : state.navCollapsed), submenuExpanded: state === null || state === void 0 ? void 0 : state.submenuExpanded, onBarExpandChange: onBarExpandChange, onSubmenuExpandChange: onSubmenuExpandChange, top: sideTop, mainItems: navigationMainItems, navigationComponent: context.NavigationComponent, bottom: isMobile ? (_jsxs(Fragment, { children: [profile, extraLinks, !!extraText && (_jsx(InternalSideNavigationTrigger, { id: "__extra_text", title: extraText, submenuExpanded: undefined, dataPrefix: "navigation-extra-text", tag: undefined, icon: undefined, iconActive: undefined }))] })) : undefined }), _jsx(LayoutContent, { header: header, anvil2: variant.isAnvil2, children: content })] }) }) }));
|
|
98
|
+
};
|
|
99
|
+
const TitanLayoutHeaderObserved = ({ children, heightChange }) => {
|
|
100
|
+
const ref = useRef(null);
|
|
101
|
+
useEffect(() => {
|
|
102
|
+
if (ref.current) {
|
|
103
|
+
const updatePosition = () => {
|
|
104
|
+
if (ref.current && heightChange) {
|
|
105
|
+
const pos = ref.current.getBoundingClientRect();
|
|
106
|
+
heightChange(pos.height);
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
const observer = new ResizeObserver(updatePosition);
|
|
110
|
+
observer.observe(ref.current);
|
|
111
|
+
updatePosition();
|
|
112
|
+
return () => observer.disconnect();
|
|
113
|
+
}
|
|
114
|
+
}, [heightChange]);
|
|
115
|
+
useEffect(() => {
|
|
116
|
+
return () => {
|
|
117
|
+
heightChange === null || heightChange === void 0 ? void 0 : heightChange(0);
|
|
118
|
+
};
|
|
119
|
+
}, [heightChange]);
|
|
120
|
+
return (_jsx("div", { ref: ref, className: Styles.header, children: children }));
|
|
121
|
+
};
|
|
122
|
+
const TitanLayoutContent = ({ children }) => children;
|
|
123
|
+
const LayoutContent = ({ anvil2, children, header, }) => {
|
|
124
|
+
const [anvil2Styles, setAnvil2Styles] = useState({});
|
|
125
|
+
const updateIndicatorsHeight = useCallback((offset) => {
|
|
126
|
+
setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
|
|
127
|
+
}, []);
|
|
128
|
+
return (_jsxs("div", { className: Styles.content, style: anvil2Styles, children: [!!header &&
|
|
129
|
+
(anvil2 ? (_jsx(TitanLayoutHeaderObserved, { heightChange: updateIndicatorsHeight, children: header })) : (header)), children] }));
|
|
101
130
|
};
|
|
102
|
-
const TitanLayoutContent = ({ children }) => (_jsx("div", { className: Styles.content, children: children }));
|
|
103
131
|
export const TitanLayout = Object.assign(TitanLayoutComponent, {
|
|
104
132
|
Content: TitanLayoutContent,
|
|
105
133
|
Logo: TitanLayoutLogo,
|
|
106
|
-
|
|
107
|
-
|
|
134
|
+
Link: TitanLayoutSidebarLink,
|
|
135
|
+
Trigger: TitanLayoutSidebarTrigger,
|
|
108
136
|
});
|
|
109
137
|
//# sourceMappingURL=titan-layout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titan-layout.js","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAEH,QAAQ,EAGR,QAAQ,EAGR,cAAc,EACd,WAAW,EACX,SAAS,EACT,OAAO,EACP,QAAQ,GACX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,uBAAuB,EAAyB,MAAM,gCAAgC,CAAC;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,EACH,aAAa,EACb,sBAAsB,GAGzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAwB,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"titan-layout.js","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"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"}
|
|
@@ -30,6 +30,14 @@
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
.layout-anvil2 {
|
|
34
|
+
.header {
|
|
35
|
+
position: sticky;
|
|
36
|
+
top: var(--nav-offset-top);
|
|
37
|
+
z-index: 989;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
33
41
|
.layout-legacy,
|
|
34
42
|
.layout-anvil2 {
|
|
35
43
|
padding-left: var(--nav-offset-left);
|
|
@@ -38,7 +46,7 @@
|
|
|
38
46
|
height: var(--nav-offset-top);
|
|
39
47
|
}
|
|
40
48
|
|
|
41
|
-
|
|
49
|
+
&.layout-desktop {
|
|
42
50
|
.side {
|
|
43
51
|
position: fixed;
|
|
44
52
|
top: var(--nav-offset-top);
|
|
@@ -58,11 +66,11 @@
|
|
|
58
66
|
--nav-offset-left: 0;
|
|
59
67
|
}
|
|
60
68
|
|
|
61
|
-
&.layout-nav-slim {
|
|
69
|
+
&.layout-desktop.layout-nav-slim {
|
|
62
70
|
--nav-offset-left: 64px;
|
|
63
71
|
}
|
|
64
72
|
|
|
65
|
-
&.layout-nav-wide {
|
|
73
|
+
&.layout-desktop.layout-nav-wide {
|
|
66
74
|
--nav-offset-left: 212px;
|
|
67
75
|
}
|
|
68
76
|
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
interface LayoutContentArgs {
|
|
2
|
+
header: boolean;
|
|
3
|
+
sideTop: boolean;
|
|
4
|
+
extraText: boolean;
|
|
5
|
+
search: boolean;
|
|
6
|
+
}
|
|
3
7
|
declare const _default: {
|
|
4
8
|
title: string;
|
|
5
|
-
component: FC<TitanLayoutProps> & {
|
|
6
|
-
Content: FC<import("./titan-layout").TitanLayoutContentProps>;
|
|
7
|
-
Logo: FC<import("./layout-logo").TitanLayoutLogoProps>;
|
|
8
|
-
SidebarLink: typeof import("./layout-sidebar-links").TitanLayoutSidebarLink;
|
|
9
|
-
SidebarTrigger: typeof import("./layout-sidebar-links").TitanLayoutSidebarTrigger;
|
|
10
|
-
};
|
|
11
9
|
decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
|
|
12
10
|
parameters: {};
|
|
11
|
+
argTypes: {};
|
|
12
|
+
args: LayoutContentArgs;
|
|
13
13
|
};
|
|
14
14
|
export default _default;
|
|
15
|
-
export declare const TitanLayoutLegacy: () => import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export declare const TitanLayoutAnvil1: () => import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
export declare const TitanLayoutAnvil2: () => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const TitanLayoutLegacy: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare const TitanLayoutAnvil1: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const TitanLayoutAnvil2: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
18
18
|
//# sourceMappingURL=titan-layout.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AAsBA,UAAU,iBAAiB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;CACnB;;;;;;UAYQ,iBAAiB;;AAV1B,wBAWE;AAkKF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAOxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAWxD,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Page as Anvil2Page, Popover } from '@servicetitan/anvil2';
|
|
2
|
+
import { Announcement, Page as Anvil2Page, Button, Popover, TextField } from '@servicetitan/anvil2';
|
|
3
3
|
import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
|
|
4
4
|
import SvgAtlas from '@servicetitan/anvil2/assets/icons/st/atlas_logo.svg';
|
|
5
5
|
import SvgSettingsActive from '@servicetitan/anvil2/assets/icons/st/gnav_settings_active.svg';
|
|
@@ -13,9 +13,15 @@ import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
|
|
|
13
13
|
import { ProfileDropdown, TitanLayout } from './';
|
|
14
14
|
export default {
|
|
15
15
|
title: 'Navigation/TitanLayout',
|
|
16
|
-
component: TitanLayout,
|
|
17
16
|
decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
|
|
18
17
|
parameters: {},
|
|
18
|
+
argTypes: {},
|
|
19
|
+
args: {
|
|
20
|
+
header: true,
|
|
21
|
+
sideTop: true,
|
|
22
|
+
extraText: true,
|
|
23
|
+
search: true,
|
|
24
|
+
},
|
|
19
25
|
};
|
|
20
26
|
const mainNavItems = [
|
|
21
27
|
items.dashboard,
|
|
@@ -38,25 +44,32 @@ const SideLinkPopoverWrapper = ({ children, context }) => {
|
|
|
38
44
|
return (_jsxs(Popover, { placement: "right", openOnHover: true, children: [_jsx(Popover.Trigger, { children: (props) => _jsx("div", { ...props, children: children }) }), _jsx(Popover.Content, { style: context.styles.popoverContent, children: "popover content" })] }));
|
|
39
45
|
};
|
|
40
46
|
const sidebarTop = () => [
|
|
41
|
-
_jsx(TitanLayout.
|
|
42
|
-
_jsx(TitanLayout.
|
|
43
|
-
_jsx(TitanLayout.
|
|
47
|
+
_jsx(TitanLayout.Link, { ...items.tasks }, "tasks"),
|
|
48
|
+
_jsx(TitanLayout.Link, { ...items.calls }, "calls"),
|
|
49
|
+
_jsx(TitanLayout.Trigger, { ...items.marketing, isActive: false, wrapper: SideLinkPopoverWrapper, onMobileClick: () => alert('clicked'), counter: 50 }, "marketing"),
|
|
44
50
|
];
|
|
45
|
-
const
|
|
51
|
+
const ContentHeader = () => {
|
|
52
|
+
const [longInfo, setLongInfo] = useState(false);
|
|
53
|
+
return (_jsxs(Fragment, { children: [_jsx(Announcement, { title: "Some info", status: "info" }), _jsx(Announcement, { title: "Some warning", status: "warning" }), _jsx("div", { className: "d-f justify-content-center align-items-center bg-purple-100-i", style: { height: longInfo ? '120px' : '48px' }, children: _jsxs("div", { className: "d-f align-items-center gap-1", children: ["custom content", ' ', _jsx(Button, { onClick: () => setLongInfo(!longInfo), size: "small", "aria-label": "test", children: longInfo ? '↑' : '↓' })] }) })] }));
|
|
54
|
+
};
|
|
55
|
+
const SearchBar = () => _jsx(TextField, { size: "small", placeholder: "Search", className: "w-100-i" });
|
|
56
|
+
const useLayoutProps = (args) => {
|
|
46
57
|
const [state, setState] = useState(undefined);
|
|
47
58
|
return {
|
|
48
59
|
state,
|
|
49
60
|
onStateChange: setState,
|
|
61
|
+
navigationComponent: NavLinkMock,
|
|
50
62
|
navigationMainItems: mainNavItems,
|
|
51
63
|
profile,
|
|
64
|
+
top: args.search ? _jsx(SearchBar, {}) : undefined,
|
|
65
|
+
header: args.header ? _jsx(ContentHeader, {}) : undefined,
|
|
52
66
|
extraLinks,
|
|
53
67
|
extraLinksTop,
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
extraText: 'EST (-8 hrs)',
|
|
68
|
+
extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
|
|
69
|
+
sideTop: args.sideTop ? sidebarTop() : undefined,
|
|
57
70
|
};
|
|
58
71
|
};
|
|
59
|
-
export const TitanLayoutLegacy = () => (_jsxs(TitanLayout, { ...useLayoutProps(), appearance: "legacy", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(LocationInfo, {}) })] }));
|
|
60
|
-
export const TitanLayoutAnvil1 = () => (_jsxs(TitanLayout, { ...useLayoutProps(), appearance: "anvil1", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(Anvil1Page, { children: _jsx(LocationInfo, {}) }) })] }));
|
|
61
|
-
export const TitanLayoutAnvil2 = () => (_jsxs(TitanLayout, { ...useLayoutProps(), appearance: "anvil2", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(Anvil2Page, { children: _jsx(Anvil2Page.Content, { children: _jsx(LocationInfo, {}) }) }) })] }));
|
|
72
|
+
export const TitanLayoutLegacy = (args) => (_jsxs(TitanLayout, { ...useLayoutProps(args), appearance: "legacy", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(LocationInfo, {}) })] }));
|
|
73
|
+
export const TitanLayoutAnvil1 = (args) => (_jsxs(TitanLayout, { ...useLayoutProps(args), appearance: "anvil1", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(Anvil1Page, { children: _jsx(LocationInfo, {}) }) })] }));
|
|
74
|
+
export const TitanLayoutAnvil2 = (args) => (_jsxs(TitanLayout, { ...useLayoutProps(args), appearance: "anvil2", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(Anvil2Page, { children: _jsx(Anvil2Page.Content, { children: _jsx(LocationInfo, {}) }) }) })] }));
|
|
62
75
|
//# sourceMappingURL=titan-layout.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titan-layout.stories.js","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"titan-layout.stories.js","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "11.0.0-canary.237.
|
|
3
|
+
"version": "11.0.0-canary.237.fef17f5.0",
|
|
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": "fef17f54d49c7f0eb9d9b02ea9ae7451e0120386"
|
|
46
46
|
}
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
@size-links-tiny: 24px;
|
|
5
5
|
|
|
6
6
|
.header {
|
|
7
|
-
display:
|
|
7
|
+
display: flex;
|
|
8
|
+
justify-content: space-between;
|
|
8
9
|
|
|
9
10
|
background-color: @color-white;
|
|
10
11
|
color: @color-black;
|
|
@@ -15,18 +16,11 @@
|
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
.he-top-left {
|
|
18
|
-
grid-column: span 1;
|
|
19
19
|
display: flex;
|
|
20
20
|
align-items: center;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.he-top-center {
|
|
24
|
-
grid-column: span 1;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
23
|
.he-top-right {
|
|
28
|
-
grid-column: span 1;
|
|
29
|
-
|
|
30
24
|
& > * {
|
|
31
25
|
color: @color-black;
|
|
32
26
|
}
|
|
@@ -93,23 +87,45 @@
|
|
|
93
87
|
// desktop
|
|
94
88
|
@media only screen and (min-width: 768px) {
|
|
95
89
|
.header {
|
|
96
|
-
grid-template-columns: repeat(3, 1fr);
|
|
97
|
-
grid-template-rows: 48px;
|
|
98
|
-
|
|
99
90
|
.navigation-link {
|
|
100
91
|
margin: 6px 2px;
|
|
101
92
|
padding: 6px 6px;
|
|
102
93
|
}
|
|
94
|
+
|
|
95
|
+
.he-top-left {
|
|
96
|
+
padding-left: @spacing-1;
|
|
97
|
+
}
|
|
98
|
+
.he-top-center {
|
|
99
|
+
flex: 1;
|
|
100
|
+
margin-left: @spacing-2;
|
|
101
|
+
margin-right: @spacing-2;
|
|
102
|
+
max-width: 400px;
|
|
103
|
+
}
|
|
103
104
|
}
|
|
105
|
+
}
|
|
106
|
+
// desktop wide
|
|
107
|
+
@media only screen and (min-width: 1200px) {
|
|
108
|
+
.header {
|
|
109
|
+
display: grid;
|
|
110
|
+
grid-template-columns: repeat(3, 1fr);
|
|
111
|
+
grid-template-rows: 48px;
|
|
104
112
|
|
|
105
|
-
|
|
106
|
-
|
|
113
|
+
.he-top-left,
|
|
114
|
+
.he-top-center,
|
|
115
|
+
.he-top-right {
|
|
116
|
+
grid-column: span 1;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.he-top-center {
|
|
120
|
+
max-width: unset;
|
|
121
|
+
}
|
|
107
122
|
}
|
|
108
123
|
}
|
|
109
124
|
|
|
110
125
|
// mobile
|
|
111
126
|
@media only screen and (max-width: 768px) {
|
|
112
127
|
.header {
|
|
128
|
+
display: grid;
|
|
113
129
|
grid-template-columns: repeat(3, 1fr);
|
|
114
130
|
grid-template-rows: 44px;
|
|
115
131
|
|
|
@@ -17,7 +17,10 @@ const WrappedLink: FC<{
|
|
|
17
17
|
|
|
18
18
|
/** Side Navigation menu link */
|
|
19
19
|
export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {
|
|
20
|
-
const {
|
|
20
|
+
const {
|
|
21
|
+
NavigationComponent,
|
|
22
|
+
breakpoint: { isMobile },
|
|
23
|
+
} = useTitanLayoutContext();
|
|
21
24
|
|
|
22
25
|
const element = (
|
|
23
26
|
<InternalSideNavigationLink
|
|
@@ -29,7 +32,7 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
|
|
|
29
32
|
/>
|
|
30
33
|
);
|
|
31
34
|
|
|
32
|
-
return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
|
|
35
|
+
return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
|
|
33
36
|
}
|
|
34
37
|
|
|
35
38
|
/** Side Navigation menu trigger */
|
|
@@ -141,7 +141,6 @@
|
|
|
141
141
|
// desktop version expanded
|
|
142
142
|
.nav-wide {
|
|
143
143
|
width: var(--nav-offset-left);
|
|
144
|
-
padding-top: @spacing-2;
|
|
145
144
|
|
|
146
145
|
.toggle {
|
|
147
146
|
.toggle-content {
|
|
@@ -162,6 +161,10 @@
|
|
|
162
161
|
margin-top: @spacing-1;
|
|
163
162
|
margin-bottom: @spacing-1;
|
|
164
163
|
}
|
|
164
|
+
|
|
165
|
+
.nav-main {
|
|
166
|
+
padding-top: @spacing-1;
|
|
167
|
+
}
|
|
165
168
|
}
|
|
166
169
|
|
|
167
170
|
.nav-drawer,
|
|
@@ -30,6 +30,14 @@
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
.layout-anvil2 {
|
|
34
|
+
.header {
|
|
35
|
+
position: sticky;
|
|
36
|
+
top: var(--nav-offset-top);
|
|
37
|
+
z-index: 989;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
33
41
|
.layout-legacy,
|
|
34
42
|
.layout-anvil2 {
|
|
35
43
|
padding-left: var(--nav-offset-left);
|
|
@@ -38,7 +46,7 @@
|
|
|
38
46
|
height: var(--nav-offset-top);
|
|
39
47
|
}
|
|
40
48
|
|
|
41
|
-
|
|
49
|
+
&.layout-desktop {
|
|
42
50
|
.side {
|
|
43
51
|
position: fixed;
|
|
44
52
|
top: var(--nav-offset-top);
|
|
@@ -58,11 +66,11 @@
|
|
|
58
66
|
--nav-offset-left: 0;
|
|
59
67
|
}
|
|
60
68
|
|
|
61
|
-
&.layout-nav-slim {
|
|
69
|
+
&.layout-desktop.layout-nav-slim {
|
|
62
70
|
--nav-offset-left: 64px;
|
|
63
71
|
}
|
|
64
72
|
|
|
65
|
-
&.layout-nav-wide {
|
|
73
|
+
&.layout-desktop.layout-nav-wide {
|
|
66
74
|
--nav-offset-left: 212px;
|
|
67
75
|
}
|
|
68
76
|
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
export const __esModule: true;
|
|
2
2
|
export const content: string;
|
|
3
|
+
export const header: string;
|
|
3
4
|
export const layout: string;
|
|
4
5
|
export const layoutAnvil1: string;
|
|
5
6
|
export const layoutAnvil2: string;
|
|
7
|
+
export const layoutDesktop: string;
|
|
6
8
|
export const layoutLegacy: string;
|
|
7
9
|
export const layoutMobile: string;
|
|
8
10
|
export const layoutNavSlim: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Page as Anvil2Page, Popover } from '@servicetitan/anvil2';
|
|
1
|
+
import { Announcement, Page as Anvil2Page, Button, Popover, TextField } from '@servicetitan/anvil2';
|
|
2
2
|
import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
|
|
3
3
|
import SvgAtlas from '@servicetitan/anvil2/assets/icons/st/atlas_logo.svg';
|
|
4
4
|
import SvgSettingsActive from '@servicetitan/anvil2/assets/icons/st/gnav_settings_active.svg';
|
|
@@ -20,11 +20,24 @@ import { SideNavigationLinkWrapperProps } from '../left-navigation';
|
|
|
20
20
|
import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
|
|
21
21
|
import { ProfileDropdown, TitanLayout, TitanLayoutProps, TitanLayoutState } from './';
|
|
22
22
|
|
|
23
|
+
interface LayoutContentArgs {
|
|
24
|
+
header: boolean;
|
|
25
|
+
sideTop: boolean;
|
|
26
|
+
extraText: boolean;
|
|
27
|
+
search: boolean;
|
|
28
|
+
}
|
|
29
|
+
|
|
23
30
|
export default {
|
|
24
31
|
title: 'Navigation/TitanLayout',
|
|
25
|
-
component: TitanLayout,
|
|
26
32
|
decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
|
|
27
33
|
parameters: {},
|
|
34
|
+
argTypes: {},
|
|
35
|
+
args: {
|
|
36
|
+
header: true,
|
|
37
|
+
sideTop: true,
|
|
38
|
+
extraText: true,
|
|
39
|
+
search: true,
|
|
40
|
+
} as LayoutContentArgs,
|
|
28
41
|
};
|
|
29
42
|
|
|
30
43
|
const mainNavItems = [
|
|
@@ -131,9 +144,9 @@ const SideLinkPopoverWrapper: FC<SideNavigationLinkWrapperProps> = ({ children,
|
|
|
131
144
|
};
|
|
132
145
|
|
|
133
146
|
const sidebarTop = () => [
|
|
134
|
-
<TitanLayout.
|
|
135
|
-
<TitanLayout.
|
|
136
|
-
<TitanLayout.
|
|
147
|
+
<TitanLayout.Link key="tasks" {...items.tasks} />,
|
|
148
|
+
<TitanLayout.Link key="calls" {...items.calls} />,
|
|
149
|
+
<TitanLayout.Trigger
|
|
137
150
|
key="marketing"
|
|
138
151
|
{...items.marketing}
|
|
139
152
|
isActive={false}
|
|
@@ -142,26 +155,53 @@ const sidebarTop = () => [
|
|
|
142
155
|
counter={50}
|
|
143
156
|
/>,
|
|
144
157
|
];
|
|
145
|
-
const
|
|
158
|
+
const ContentHeader = () => {
|
|
159
|
+
const [longInfo, setLongInfo] = useState(false);
|
|
160
|
+
|
|
161
|
+
return (
|
|
162
|
+
<Fragment>
|
|
163
|
+
<Announcement title="Some info" status="info" />
|
|
164
|
+
<Announcement title="Some warning" status="warning" />
|
|
165
|
+
<div
|
|
166
|
+
className="d-f justify-content-center align-items-center bg-purple-100-i"
|
|
167
|
+
style={{ height: longInfo ? '120px' : '48px' }}
|
|
168
|
+
>
|
|
169
|
+
<div className="d-f align-items-center gap-1">
|
|
170
|
+
custom content{' '}
|
|
171
|
+
<Button onClick={() => setLongInfo(!longInfo)} size="small" aria-label="test">
|
|
172
|
+
{longInfo ? '↑' : '↓'}
|
|
173
|
+
</Button>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
</Fragment>
|
|
177
|
+
);
|
|
178
|
+
};
|
|
179
|
+
const SearchBar = () => <TextField size="small" placeholder="Search" className="w-100-i" />;
|
|
180
|
+
|
|
181
|
+
const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
|
|
146
182
|
const [state, setState] = useState<TitanLayoutState | undefined>(undefined);
|
|
147
183
|
|
|
148
184
|
return {
|
|
149
185
|
state,
|
|
150
186
|
onStateChange: setState,
|
|
151
187
|
|
|
188
|
+
navigationComponent: NavLinkMock,
|
|
152
189
|
navigationMainItems: mainNavItems,
|
|
190
|
+
|
|
153
191
|
profile,
|
|
192
|
+
top: args.search ? <SearchBar /> : undefined,
|
|
193
|
+
header: args.header ? <ContentHeader /> : undefined,
|
|
194
|
+
|
|
154
195
|
extraLinks,
|
|
155
196
|
extraLinksTop,
|
|
197
|
+
extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
|
|
156
198
|
|
|
157
|
-
|
|
158
|
-
navigationComponent: NavLinkMock,
|
|
159
|
-
extraText: 'EST (-8 hrs)',
|
|
199
|
+
sideTop: args.sideTop ? sidebarTop() : undefined,
|
|
160
200
|
};
|
|
161
201
|
};
|
|
162
202
|
|
|
163
|
-
export const TitanLayoutLegacy = () => (
|
|
164
|
-
<TitanLayout {...useLayoutProps()} appearance="legacy">
|
|
203
|
+
export const TitanLayoutLegacy = (args: LayoutContentArgs) => (
|
|
204
|
+
<TitanLayout {...useLayoutProps(args)} appearance="legacy">
|
|
165
205
|
<TitanLayout.Logo title />
|
|
166
206
|
<TitanLayout.Content>
|
|
167
207
|
<LocationInfo />
|
|
@@ -169,8 +209,8 @@ export const TitanLayoutLegacy = () => (
|
|
|
169
209
|
</TitanLayout>
|
|
170
210
|
);
|
|
171
211
|
|
|
172
|
-
export const TitanLayoutAnvil1 = () => (
|
|
173
|
-
<TitanLayout {...useLayoutProps()} appearance="anvil1">
|
|
212
|
+
export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
|
|
213
|
+
<TitanLayout {...useLayoutProps(args)} appearance="anvil1">
|
|
174
214
|
<TitanLayout.Logo title />
|
|
175
215
|
<TitanLayout.Content>
|
|
176
216
|
<Anvil1Page>
|
|
@@ -180,8 +220,8 @@ export const TitanLayoutAnvil1 = () => (
|
|
|
180
220
|
</TitanLayout>
|
|
181
221
|
);
|
|
182
222
|
|
|
183
|
-
export const TitanLayoutAnvil2 = () => (
|
|
184
|
-
<TitanLayout {...useLayoutProps()} appearance="anvil2">
|
|
223
|
+
export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
|
|
224
|
+
<TitanLayout {...useLayoutProps(args)} appearance="anvil2">
|
|
185
225
|
<TitanLayout.Logo title />
|
|
186
226
|
<TitanLayout.Content>
|
|
187
227
|
<Anvil2Page>
|
|
@@ -11,6 +11,7 @@ import {
|
|
|
11
11
|
useCallback,
|
|
12
12
|
useEffect,
|
|
13
13
|
useMemo,
|
|
14
|
+
useRef,
|
|
14
15
|
useState,
|
|
15
16
|
} from 'react';
|
|
16
17
|
import { NavigationItemData } from '../../utils/navigation';
|
|
@@ -50,11 +51,12 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
|
|
|
50
51
|
onStateChange?: (state: TitanLayoutState) => void;
|
|
51
52
|
|
|
52
53
|
header?: ReactElement;
|
|
54
|
+
top?: ReactElement;
|
|
55
|
+
sideTop?: ReactElement[];
|
|
53
56
|
profile?: ReactElement;
|
|
54
57
|
extraLinks?: ReactElement;
|
|
55
58
|
extraLinksTop?: ReactElement;
|
|
56
59
|
extraText?: string;
|
|
57
|
-
sidebarTop?: ReactElement[];
|
|
58
60
|
};
|
|
59
61
|
|
|
60
62
|
const defaultSidebarContext: TitanLayoutSidebarContextType = {
|
|
@@ -115,6 +117,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
115
117
|
children,
|
|
116
118
|
navigationComponent,
|
|
117
119
|
header,
|
|
120
|
+
top,
|
|
118
121
|
profile,
|
|
119
122
|
state,
|
|
120
123
|
onStateChange,
|
|
@@ -122,7 +125,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
122
125
|
extraLinks,
|
|
123
126
|
extraLinksTop,
|
|
124
127
|
extraText,
|
|
125
|
-
|
|
128
|
+
sideTop,
|
|
126
129
|
}) => {
|
|
127
130
|
const breakpoint = useTitanBreakpoint();
|
|
128
131
|
const isMobile = breakpoint.isMobile;
|
|
@@ -179,8 +182,6 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
179
182
|
[state, onStateChange]
|
|
180
183
|
);
|
|
181
184
|
|
|
182
|
-
const [layoutStyles] = useState<object>({});
|
|
183
|
-
|
|
184
185
|
const layoutClass = variant.isLegacy
|
|
185
186
|
? Styles.layoutLegacy
|
|
186
187
|
: variant.isAnvil1
|
|
@@ -194,21 +195,19 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
194
195
|
id={id}
|
|
195
196
|
className={classNames(
|
|
196
197
|
Styles.layout,
|
|
197
|
-
isMobile
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
: Styles.layoutNavWide,
|
|
198
|
+
isMobile ? Styles.layoutMobile : Styles.layoutDesktop,
|
|
199
|
+
!isMobile && state?.navCollapsed
|
|
200
|
+
? Styles.layoutNavSlim
|
|
201
|
+
: Styles.layoutNavWide,
|
|
202
202
|
layoutClass
|
|
203
203
|
)}
|
|
204
|
-
style={layoutStyles}
|
|
205
204
|
>
|
|
206
205
|
{variant.isSequent && <div className={Styles.topPlaceholder} />}
|
|
207
206
|
<LayoutHeader
|
|
208
207
|
className={Styles.top}
|
|
209
208
|
logo={logo}
|
|
210
209
|
profile={isMobile ? undefined : profile}
|
|
211
|
-
center={
|
|
210
|
+
center={top}
|
|
212
211
|
rightText={isMobile ? undefined : extraText}
|
|
213
212
|
right={
|
|
214
213
|
<Fragment>
|
|
@@ -226,7 +225,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
226
225
|
submenuExpanded={state?.submenuExpanded}
|
|
227
226
|
onBarExpandChange={onBarExpandChange}
|
|
228
227
|
onSubmenuExpandChange={onSubmenuExpandChange}
|
|
229
|
-
top={
|
|
228
|
+
top={sideTop}
|
|
230
229
|
mainItems={navigationMainItems}
|
|
231
230
|
navigationComponent={context.NavigationComponent}
|
|
232
231
|
bottom={
|
|
@@ -250,23 +249,83 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
250
249
|
}
|
|
251
250
|
/>
|
|
252
251
|
|
|
253
|
-
{
|
|
252
|
+
<LayoutContent header={header} anvil2={variant.isAnvil2}>
|
|
253
|
+
{content}
|
|
254
|
+
</LayoutContent>
|
|
254
255
|
</div>
|
|
255
256
|
</LayoutPlacementContext.Provider>
|
|
256
257
|
</LayoutContext.Provider>
|
|
257
258
|
);
|
|
258
259
|
};
|
|
259
260
|
|
|
261
|
+
const TitanLayoutHeaderObserved: FC<{
|
|
262
|
+
children: ReactNode;
|
|
263
|
+
heightChange?(value: number): void;
|
|
264
|
+
}> = ({ children, heightChange }) => {
|
|
265
|
+
const ref = useRef<HTMLDivElement>(null);
|
|
266
|
+
|
|
267
|
+
useEffect(() => {
|
|
268
|
+
if (ref.current) {
|
|
269
|
+
const updatePosition = () => {
|
|
270
|
+
if (ref.current && heightChange) {
|
|
271
|
+
const pos = ref.current.getBoundingClientRect();
|
|
272
|
+
heightChange(pos.height);
|
|
273
|
+
}
|
|
274
|
+
};
|
|
275
|
+
|
|
276
|
+
const observer = new ResizeObserver(updatePosition);
|
|
277
|
+
observer.observe(ref.current);
|
|
278
|
+
|
|
279
|
+
updatePosition();
|
|
280
|
+
return () => observer.disconnect();
|
|
281
|
+
}
|
|
282
|
+
}, [heightChange]);
|
|
283
|
+
|
|
284
|
+
useEffect(() => {
|
|
285
|
+
return () => {
|
|
286
|
+
heightChange?.(0);
|
|
287
|
+
};
|
|
288
|
+
}, [heightChange]);
|
|
289
|
+
return (
|
|
290
|
+
<div ref={ref} className={Styles.header}>
|
|
291
|
+
{children}
|
|
292
|
+
</div>
|
|
293
|
+
);
|
|
294
|
+
};
|
|
295
|
+
|
|
260
296
|
export interface TitanLayoutContentProps {
|
|
261
297
|
children: ReactNode;
|
|
262
298
|
}
|
|
263
|
-
const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) =>
|
|
264
|
-
|
|
265
|
-
|
|
299
|
+
const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
|
|
300
|
+
|
|
301
|
+
const LayoutContent: FC<{ children: ReactNode; header?: ReactNode; anvil2: boolean }> = ({
|
|
302
|
+
anvil2,
|
|
303
|
+
children,
|
|
304
|
+
header,
|
|
305
|
+
}) => {
|
|
306
|
+
const [anvil2Styles, setAnvil2Styles] = useState<object>({});
|
|
307
|
+
const updateIndicatorsHeight = useCallback((offset: number) => {
|
|
308
|
+
setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
|
|
309
|
+
}, []);
|
|
310
|
+
|
|
311
|
+
return (
|
|
312
|
+
<div className={Styles.content} style={anvil2Styles}>
|
|
313
|
+
{!!header &&
|
|
314
|
+
(anvil2 ? (
|
|
315
|
+
<TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
|
|
316
|
+
{header}
|
|
317
|
+
</TitanLayoutHeaderObserved>
|
|
318
|
+
) : (
|
|
319
|
+
header
|
|
320
|
+
))}
|
|
321
|
+
{children}
|
|
322
|
+
</div>
|
|
323
|
+
);
|
|
324
|
+
};
|
|
266
325
|
|
|
267
326
|
export const TitanLayout = Object.assign(TitanLayoutComponent, {
|
|
268
327
|
Content: TitanLayoutContent,
|
|
269
328
|
Logo: TitanLayoutLogo,
|
|
270
|
-
|
|
271
|
-
|
|
329
|
+
Link: TitanLayoutSidebarLink,
|
|
330
|
+
Trigger: TitanLayoutSidebarTrigger,
|
|
272
331
|
});
|