@servicetitan/navigation 3.2.0 → 4.0.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/header-navigation/header-navigation-content.d.ts +7 -0
- package/dist/components/header-navigation/header-navigation-content.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation-content.js +8 -7
- package/dist/components/header-navigation/header-navigation-content.js.map +1 -1
- package/dist/components/header-navigation/header-navigation-extra.stories.d.ts +3 -2
- package/dist/components/header-navigation/header-navigation-extra.stories.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation-extra.stories.js +6 -20
- package/dist/components/header-navigation/header-navigation-extra.stories.js.map +1 -1
- package/dist/components/header-navigation/header-navigation-links.d.ts +5 -3
- package/dist/components/header-navigation/header-navigation-links.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation-links.js +12 -6
- package/dist/components/header-navigation/header-navigation-links.js.map +1 -1
- package/dist/components/header-navigation/header-navigation-stacked.stories.d.ts +1 -0
- package/dist/components/header-navigation/header-navigation-stacked.stories.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation-stacked.stories.js +4 -23
- package/dist/components/header-navigation/header-navigation-stacked.stories.js.map +1 -1
- package/dist/components/header-navigation/header-navigation-tiny.stories.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation-tiny.stories.js +11 -7
- package/dist/components/header-navigation/header-navigation-tiny.stories.js.map +1 -1
- package/dist/components/header-navigation/header-navigation.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.js +17 -5
- package/dist/components/header-navigation/header-navigation.js.map +1 -1
- package/dist/components/header-navigation/header-navigation.module.less +25 -0
- package/dist/components/header-navigation/header-navigation.stories.d.ts +1 -0
- package/dist/components/header-navigation/header-navigation.stories.d.ts.map +1 -1
- package/dist/components/header-navigation/header-navigation.stories.js +5 -24
- package/dist/components/header-navigation/header-navigation.stories.js.map +1 -1
- package/dist/components/layout.stories.d.ts +1 -0
- package/dist/components/layout.stories.d.ts.map +1 -1
- package/dist/components/layout.stories.js +2 -0
- package/dist/components/layout.stories.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown-stacked.stories.d.ts +2 -8
- package/dist/components/profile-dropdown/profile-dropdown-stacked.stories.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown-stacked.stories.js +5 -43
- package/dist/components/profile-dropdown/profile-dropdown-stacked.stories.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown-tiny.stories.d.ts +9 -0
- package/dist/components/profile-dropdown/profile-dropdown-tiny.stories.d.ts.map +1 -0
- package/dist/components/profile-dropdown/profile-dropdown-tiny.stories.js +13 -0
- package/dist/components/profile-dropdown/profile-dropdown-tiny.stories.js.map +1 -0
- package/dist/components/profile-dropdown/profile-dropdown.d.ts +2 -1
- package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.js +16 -7
- package/dist/components/profile-dropdown/profile-dropdown.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.module.less +7 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts +9 -8
- package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.js +39 -39
- package/dist/components/profile-dropdown/profile-dropdown.stories.js.map +1 -1
- package/dist/components/side-navigation/side-navigation.d.ts +1 -12
- package/dist/components/side-navigation/side-navigation.d.ts.map +1 -1
- package/dist/components/side-navigation/side-navigation.js +10 -24
- package/dist/components/side-navigation/side-navigation.js.map +1 -1
- package/dist/components/side-navigation/side-navigation.module.less +26 -20
- package/dist/components/side-navigation/side-navigation.stories.d.ts +3 -3
- package/dist/components/side-navigation/side-navigation.stories.d.ts.map +1 -1
- package/dist/components/side-navigation/side-navigation.stories.js +2 -23
- package/dist/components/side-navigation/side-navigation.stories.js.map +1 -1
- package/dist/test/data-stories.module.less +6 -0
- package/dist/test/data.stories.d.ts +26 -0
- package/dist/test/data.stories.d.ts.map +1 -0
- package/dist/test/data.stories.js +150 -0
- package/dist/test/data.stories.js.map +1 -0
- package/dist/utils/navigation-context.d.ts +5 -2
- package/dist/utils/navigation-context.d.ts.map +1 -1
- package/dist/utils/navigation-context.js +20 -5
- package/dist/utils/navigation-context.js.map +1 -1
- package/dist/utils/navigation.d.ts +5 -0
- package/dist/utils/navigation.d.ts.map +1 -1
- package/package.json +12 -12
- package/src/components/header-navigation/header-navigation-content.tsx +39 -11
- package/src/components/header-navigation/header-navigation-extra.stories.tsx +24 -21
- package/src/components/header-navigation/header-navigation-links.tsx +36 -8
- package/src/components/header-navigation/header-navigation-stacked.stories.tsx +16 -66
- package/src/components/header-navigation/header-navigation-tiny.stories.tsx +37 -41
- package/src/components/header-navigation/header-navigation.module.less +25 -0
- package/src/components/header-navigation/header-navigation.module.less.d.ts +2 -0
- package/src/components/header-navigation/header-navigation.stories.tsx +18 -67
- package/src/components/header-navigation/header-navigation.tsx +45 -8
- package/src/components/layout.stories.tsx +2 -0
- package/src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx +7 -170
- package/src/components/profile-dropdown/profile-dropdown-tiny.stories.tsx +15 -0
- package/src/components/profile-dropdown/profile-dropdown.module.less +7 -1
- package/src/components/profile-dropdown/profile-dropdown.module.less.d.ts +1 -0
- package/src/components/profile-dropdown/profile-dropdown.stories.tsx +106 -129
- package/src/components/profile-dropdown/profile-dropdown.tsx +32 -8
- package/src/components/side-navigation/side-navigation.module.less +26 -20
- package/src/components/side-navigation/side-navigation.module.less.d.ts +2 -3
- package/src/components/side-navigation/side-navigation.stories.tsx +3 -52
- package/src/components/side-navigation/side-navigation.tsx +71 -124
- package/src/test/data-stories.module.less +6 -0
- package/src/test/data-stories.module.less.d.ts +3 -0
- package/src/test/data.stories.tsx +220 -0
- package/src/utils/navigation-context.tsx +15 -10
- package/src/utils/navigation.ts +7 -0
|
@@ -3,6 +3,7 @@ declare const _default: {
|
|
|
3
3
|
title: string;
|
|
4
4
|
component: FC<import("./header-navigation").HeaderNavigationProps>;
|
|
5
5
|
parameters: {};
|
|
6
|
+
decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
|
|
6
7
|
};
|
|
7
8
|
export default _default;
|
|
8
9
|
export declare const defaultNavigation: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC
|
|
1
|
+
{"version":3,"file":"header-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AAQrC,wBAKE;AAGF,eAAO,MAAM,iBAAiB,+CAa7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAqBnC,CAAC;AAiCF,eAAO,MAAM,mBAAmB,+CA2E/B,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Popover } from '@servicetitan/design-system';
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
+
import { NavLinkMock, SearchIcon, items, withMemoryRouter } from '../../test/data.stories';
|
|
4
5
|
import { LogoCompanyTitle } from '../logo/logo-company-title';
|
|
5
6
|
import { LogoTitanText } from '../logo/logo-titan-text';
|
|
6
7
|
import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
|
|
@@ -10,29 +11,9 @@ export default {
|
|
|
10
11
|
title: 'Navigation/HeaderNavigation',
|
|
11
12
|
component: HeaderNavigation,
|
|
12
13
|
parameters: {},
|
|
14
|
+
decorators: [withMemoryRouter],
|
|
13
15
|
};
|
|
14
|
-
const
|
|
15
|
-
const InventoryIcon = () => (_jsxs("svg", { width: "20", xmlns: "http://www.w3.org/2000/svg", viewBox: "-293 385 24 24", fill: "currentColor", children: [_jsx("polyline", { points: "-288,400.9 -282,404.3 -282,397.6 -288,394.2 -288,400.9 " }), _jsx("path", { d: "M-272,401.5c0,0.4-0.2,0.7-0.5,0.9l-7.9,4.4c-0.2,0.1-0.4,0.2-0.6,0.2s-0.4-0.1-0.6-0.2l-7.9-4.4c-0.3-0.2-0.5-0.5-0.5-0.9v-9c0-0.4,0.2-0.7,0.5-0.9l7.9-4.4c0.2-0.1,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2l7.9,4.4c0.3,0.2,0.5,0.5,0.5,0.9V401.5 M-287,392.5 l6,3.4l5.9-3.3l-5.9-3.4L-287,392.5 M-274,400.9v-6.7l-6,3.4v6.7L-274,400.9z" })] }));
|
|
16
|
-
const SearchIcon = () => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { transform: "translate(0,4)", children: _jsx("path", { d: "M0 15.7992V13.9992H12V15.7992H0ZM0 9.49922V7.69922H6V9.49922H0ZM0 3.19922V1.39922H6V3.19922H0ZM22.74 15.7992L17.94 10.9992C17.42 11.3992 16.86 11.6992 16.26 11.8992C15.66 12.0992 15.04 12.1992 14.4 12.1992C12.74 12.1992 11.325 11.6142 10.155 10.4442C8.985 9.27422 8.4 7.85922 8.4 6.19922C8.4 4.53922 8.985 3.12422 10.155 1.95422C11.325 0.784219 12.74 0.199219 14.4 0.199219C16.06 0.199219 17.475 0.784219 18.645 1.95422C19.815 3.12422 20.4 4.53922 20.4 6.19922C20.4 6.83922 20.3 7.45922 20.1 8.05922C19.9 8.65922 19.6 9.21922 19.2 9.73922L24 14.5392L22.74 15.7992ZM14.393 10.3992C15.5577 10.3992 16.55 9.99157 17.37 9.17627C18.19 8.36099 18.6 7.37099 18.6 6.20627C18.6 5.04157 18.1923 4.04922 17.377 3.22922C16.5618 2.40922 15.5718 1.99922 14.407 1.99922C13.2423 1.99922 12.25 2.40687 11.43 3.22217C10.61 4.03745 10.2 5.02745 10.2 6.19217C10.2 7.35687 10.6077 8.34922 11.423 9.16922C12.2382 9.98922 13.2282 10.3992 14.393 10.3992Z", fill: "white" }) }) }));
|
|
17
|
-
const items = {
|
|
18
|
-
calendar: getItem('calendar', { iconName: 'event' }),
|
|
19
|
-
calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
|
|
20
|
-
dashboard: getItem('dashboard', { iconName: 'odometer', isActive: true }),
|
|
21
|
-
dispatch: getItem('dispatch', { iconName: 'location_disabled', counter: 1 }),
|
|
22
|
-
fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
|
|
23
|
-
followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
|
|
24
|
-
inventory: getItem('inventory', { iconName: 'toys' }),
|
|
25
|
-
purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
|
|
26
|
-
accounting: getItem('accounting', { iconName: 'assignment' }),
|
|
27
|
-
marketing: getItem('marketing', { iconName: 'bullhorn' }),
|
|
28
|
-
priceBook: getItem('priceBook', { iconName: 'book' }),
|
|
29
|
-
pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
|
|
30
|
-
projects: getItem('projects', { iconName: 'folder_special' }),
|
|
31
|
-
reports: getItem('reports', { iconName: 'poll' }),
|
|
32
|
-
};
|
|
33
|
-
const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target, onClick: e => {
|
|
34
|
-
e.preventDefault();
|
|
35
|
-
}, className: props.className, children: props.children }));
|
|
16
|
+
const SvgIcon = undefined;
|
|
36
17
|
export const defaultNavigation = () => (_jsx(HeaderNavigation, { left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), items: [
|
|
37
18
|
items.dashboard,
|
|
38
19
|
items.calendar,
|
|
@@ -52,7 +33,7 @@ export const withLogoTextAndOverflow = () => (_jsx(HeaderNavigation, { left: _js
|
|
|
52
33
|
], itemsOverflow: [items.calls, items.accounting, items.purchasing, items.dispatch], navigationComponent: NavLinkMock }));
|
|
53
34
|
const HelpCenterButton = () => {
|
|
54
35
|
const [open, setOpen] = useState(false);
|
|
55
|
-
return (_jsx(Popover, { onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx(HeaderNavigationTrigger, { id: "help", iconName: "help_outline", onClick: () => setOpen(true) }), portal: true, children: "help center" }));
|
|
36
|
+
return (_jsx(Popover, { onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx(HeaderNavigationTrigger, { id: "help", iconName: "help_outline", onClick: () => setOpen(true), icon: SvgIcon, iconActive: SvgIcon }), portal: true, children: "help center" }));
|
|
56
37
|
};
|
|
57
38
|
const TimeZoneOffset = () => (_jsx("div", { className: "fs-2 ff-default p-r-2", children: _jsx("span", { children: "EST (-9 hrs)" }) }));
|
|
58
39
|
export const withAllMonolithData = () => (_jsxs(HeaderNavigation, { left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), items: [
|
|
@@ -68,5 +49,5 @@ export const withAllMonolithData = () => (_jsxs(HeaderNavigation, { left: _jsx(L
|
|
|
68
49
|
items.priceBook,
|
|
69
50
|
items.pointOfSale,
|
|
70
51
|
items.reports,
|
|
71
|
-
], navigationComponent: NavLinkMock, children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", counter: 2 }), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions" }), _jsx(HelpCenterButton, {}), _jsx(HeaderNavigationTrigger, { id: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon }), _jsx(HeaderNavigationLink, { id: "settings", to: "https://google.com", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings", isActive: true }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", children: ["Sign Out ", _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }));
|
|
52
|
+
], navigationComponent: NavLinkMock, children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", counter: 2, icon: SvgIcon, iconActive: SvgIcon }), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions", icon: SvgIcon, iconActive: SvgIcon }), _jsx(HelpCenterButton, {}), _jsx(HeaderNavigationTrigger, { id: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon, icon: SvgIcon, iconActive: SvgIcon }), _jsx(HeaderNavigationLink, { id: "settings", to: "https://google.com", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings", isActive: true, icon: SvgIcon, iconActive: SvgIcon }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", children: ["Sign Out ", _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }));
|
|
72
53
|
//# sourceMappingURL=header-navigation.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"header-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.stories.d.ts","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"layout.stories.d.ts","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";;;;;AAOA,wBAIE;AAEF,eAAO,MAAM,aAAa,+CAUzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAUnC,CAAC"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { withAnvil, withMemoryRouter } from '../test/data.stories';
|
|
2
3
|
import { WithAllMonolithData, WithAllMonolithDataCommercial, } from './header-navigation/header-navigation-tiny.stories';
|
|
3
4
|
import { DefaultSideNavigation } from './side-navigation/side-navigation.stories';
|
|
4
5
|
export default {
|
|
5
6
|
title: 'Navigation/Layout',
|
|
6
7
|
parameters: {},
|
|
8
|
+
decorators: [withMemoryRouter, withAnvil],
|
|
7
9
|
};
|
|
8
10
|
export const LeftNavLayout = () => {
|
|
9
11
|
return (_jsxs("div", { className: "d-f border flex-column", style: { height: '800px' }, children: [_jsx(WithAllMonolithData, {}), _jsxs("div", { className: "flex-grow-1 flex-basis-0 d-f", children: [_jsx(DefaultSideNavigation, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0" })] })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.stories.js","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACH,mBAAmB,EACnB,6BAA6B,GAChC,MAAM,oDAAoD,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAElF,eAAe;IACX,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"layout.stories.js","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EACH,mBAAmB,EACnB,6BAA6B,GAChC,MAAM,oDAAoD,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAElF,eAAe;IACX,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,mBAAmB,KAAG,EACvB,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACxC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1,15 +1,9 @@
|
|
|
1
|
+
export * from './profile-dropdown.stories';
|
|
1
2
|
declare const _default: {
|
|
2
3
|
title: string;
|
|
3
4
|
component: import("./profile-dropdown").ProfileDropdownType;
|
|
4
5
|
parameters: {};
|
|
6
|
+
decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
|
|
5
7
|
};
|
|
6
8
|
export default _default;
|
|
7
|
-
export declare const profileDropdownDefault: () => import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export declare const profileDropdownWithLogo: () => import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export declare const profileDropdownWithErrorLogo: () => import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export declare const profileDropdownWithInfo: () => import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
export declare const profileDropdownWithCounter: () => import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export declare const profileDropdownWithBothBadges: () => import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
export declare const profileDropdownWithHintPopup: () => import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
export declare const profileDropdownWithHintAndInfoPopup: () => import("react/jsx-runtime").JSX.Element;
|
|
15
9
|
//# sourceMappingURL=profile-dropdown-stacked.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown-stacked.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"profile-dropdown-stacked.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx"],"names":[],"mappings":"AAEA,cAAc,4BAA4B,CAAC;;;;;;;AAO3C,wBAKE"}
|
|
@@ -1,51 +1,13 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
import {
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data.stories';
|
|
3
3
|
import { HeaderNavigationStacked } from '../header-navigation';
|
|
4
|
+
export * from './profile-dropdown.stories';
|
|
4
5
|
import { ProfileDropdown } from './profile-dropdown';
|
|
6
|
+
const withHeaderNavigationStacked = (Story) => (_jsx(HeaderNavigationStacked, { navigationComponent: NavLinkMock, right: _jsx(Story, {}) }));
|
|
5
7
|
export default {
|
|
6
8
|
title: 'Navigation/ProfileDropdownStacked',
|
|
7
9
|
component: ProfileDropdown,
|
|
8
10
|
parameters: {},
|
|
11
|
+
decorators: [withMemoryRouter, withAnvil, withHeaderNavigationStacked],
|
|
9
12
|
};
|
|
10
|
-
const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target, onClick: e => {
|
|
11
|
-
e.preventDefault();
|
|
12
|
-
}, className: props.className, children: props.children }));
|
|
13
|
-
export const profileDropdownDefault = () => (_jsx(HeaderNavigationStacked, { navigationComponent: NavLinkMock, right: _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "first", to: "https://google.com", children: "first link" }), _jsx(ProfileDropdown.Link, { id: "second", onClick: () => alert('second click'), children: "second link" }), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Section, { id: "content", children: "some content" }), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Link, { id: "third", to: "https://google.com", children: "third link" }), _jsx(ProfileDropdown.Divider, {})] }) }));
|
|
14
|
-
export const profileDropdownWithLogo = () => (_jsx(HeaderNavigationStacked, { navigationComponent: NavLinkMock, right: _jsxs(ProfileDropdown, { trigger: {
|
|
15
|
-
imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
|
|
16
|
-
}, children: [_jsx(ProfileDropdown.Link, { id: "first", to: "https://google.com", children: "first link" }), _jsx(ProfileDropdown.Link, { id: "second", onClick: () => alert('second click'), children: "second link" })] }) }));
|
|
17
|
-
export const profileDropdownWithErrorLogo = () => (_jsx(HeaderNavigationStacked, { right: _jsx(ProfileDropdown, { trigger: {
|
|
18
|
-
imageSrc: 'https://some.incorrect.url/logo.png',
|
|
19
|
-
} }) }));
|
|
20
|
-
export const profileDropdownWithInfo = () => (_jsx(HeaderNavigationStacked, { right: _jsx(ProfileDropdown, { trigger: {
|
|
21
|
-
info: { text: 'first', title: 'tenant user' },
|
|
22
|
-
avatarBadge: true,
|
|
23
|
-
} }) }));
|
|
24
|
-
export const profileDropdownWithCounter = () => (_jsx(HeaderNavigationStacked, { right: _jsx(ProfileDropdown, { trigger: {
|
|
25
|
-
info: { text: 'first', title: 'tenant user' },
|
|
26
|
-
avatarBadge: true,
|
|
27
|
-
badge: { content: 3, className: 'bg-red-500' },
|
|
28
|
-
} }) }));
|
|
29
|
-
export const profileDropdownWithBothBadges = () => (_jsx(HeaderNavigationStacked, { right: _jsx(ProfileDropdown, { trigger: {
|
|
30
|
-
avatarBadge: 'yellow-500',
|
|
31
|
-
badge: { className: 'bg-red-400' },
|
|
32
|
-
} }) }));
|
|
33
|
-
// eslint-disable-next-line no-console
|
|
34
|
-
const log = (text) => console.log(text);
|
|
35
|
-
export const profileDropdownWithHintPopup = () => (_jsx(HeaderNavigationStacked, { navigationComponent: NavLinkMock, right: _jsxs(ProfileDropdown, { trigger: {
|
|
36
|
-
avatarBadge: 'yellow-500',
|
|
37
|
-
badge: { className: 'bg-red-400' },
|
|
38
|
-
}, hintPopup: {
|
|
39
|
-
className: 'bg-blue-500-i c-white',
|
|
40
|
-
content: ({ openProfile }) => (_jsxs("div", { children: ["hello", ' ', _jsx(Button, { onClick: openProfile, size: "xsmall", children: "show me" })] })),
|
|
41
|
-
width: 's',
|
|
42
|
-
onClose: () => log('close profile dropdown hint'),
|
|
43
|
-
}, onOpen: () => log('open profile dropdown'), onClose: () => log('close profile dropdown'), children: [_jsx(ProfileDropdown.Link, { id: "first", to: "https://google.com", children: "first item" }), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Section, { id: "second", children: "second item" })] }) }));
|
|
44
|
-
export const profileDropdownWithHintAndInfoPopup = () => (_jsx(HeaderNavigationStacked, { navigationComponent: NavLinkMock, right: _jsx(ProfileDropdown, { trigger: {
|
|
45
|
-
avatarBadge: 'yellow-500',
|
|
46
|
-
badge: { className: 'bg-red-400' },
|
|
47
|
-
info: { title: 'some text', text: 'qq' },
|
|
48
|
-
}, hintPopup: {
|
|
49
|
-
content: () => _jsx("div", { children: "hello" }),
|
|
50
|
-
} }) }));
|
|
51
13
|
//# sourceMappingURL=profile-dropdown-stacked.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown-stacked.stories.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"profile-dropdown-stacked.stories.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,2BAA2B,GAAG,CAAC,KAAU,EAAE,EAAE,CAAC,CAChD,KAAC,uBAAuB,IAAC,mBAAmB,EAAE,WAAW,EAAE,KAAK,EAAE,KAAC,KAAK,KAAG,GAAI,CAClF,CAAC;AAEF,eAAe;IACX,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,CAAC,gBAAgB,EAAE,SAAS,EAAE,2BAA2B,CAAC;CACzE,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export * from './profile-dropdown.stories';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: import("./profile-dropdown").ProfileDropdownType;
|
|
5
|
+
parameters: {};
|
|
6
|
+
decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
|
|
7
|
+
};
|
|
8
|
+
export default _default;
|
|
9
|
+
//# sourceMappingURL=profile-dropdown-tiny.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"profile-dropdown-tiny.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown-tiny.stories.tsx"],"names":[],"mappings":"AAEA,cAAc,4BAA4B,CAAC;;;;;;;AAO3C,wBAKE"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data.stories';
|
|
3
|
+
import { HeaderNavigationTiny } from '../header-navigation';
|
|
4
|
+
export * from './profile-dropdown.stories';
|
|
5
|
+
import { ProfileDropdown } from './profile-dropdown';
|
|
6
|
+
const withHeaderNavigationTiny = (Story) => (_jsx(HeaderNavigationTiny, { className: "border", navigationComponent: NavLinkMock, right: _jsx(Story, {}) }));
|
|
7
|
+
export default {
|
|
8
|
+
title: 'Navigation/ProfileDropdownTiny',
|
|
9
|
+
component: ProfileDropdown,
|
|
10
|
+
parameters: {},
|
|
11
|
+
decorators: [withMemoryRouter, withAnvil, withHeaderNavigationTiny],
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=profile-dropdown-tiny.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"profile-dropdown-tiny.stories.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown-tiny.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,wBAAwB,GAAG,CAAC,KAAU,EAAE,EAAE,CAAC,CAC7C,KAAC,oBAAoB,IAAC,SAAS,EAAC,QAAQ,EAAC,mBAAmB,EAAE,WAAW,EAAE,KAAK,EAAE,KAAC,KAAK,KAAG,GAAI,CAClG,CAAC;AAEF,eAAe;IACX,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,CAAC,gBAAgB,EAAE,SAAS,EAAE,wBAAwB,CAAC;CACtE,CAAC"}
|
|
@@ -14,6 +14,7 @@ export interface ProfileDropdownTriggerProps {
|
|
|
14
14
|
className: string;
|
|
15
15
|
};
|
|
16
16
|
hintArrow?: boolean;
|
|
17
|
+
open: boolean;
|
|
17
18
|
onClick?(e: MouseEvent): void;
|
|
18
19
|
}
|
|
19
20
|
export interface ProfileDropdownSectionPropsStrict {
|
|
@@ -45,7 +46,7 @@ export interface ProfileDropdownPropsStrict {
|
|
|
45
46
|
children?: ReactNode;
|
|
46
47
|
className?: string;
|
|
47
48
|
direction?: PopoverPropsStrict['direction'];
|
|
48
|
-
trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'hintArrow'>;
|
|
49
|
+
trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'open' | 'hintArrow'>;
|
|
49
50
|
hintPopup?: {
|
|
50
51
|
className?: string;
|
|
51
52
|
content: FC<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,16 +10,22 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import {
|
|
13
|
+
import { Icon } from '@servicetitan/anvil2';
|
|
14
|
+
import SvgExpandLess from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
|
|
15
|
+
import SvgExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
|
|
16
|
+
import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';
|
|
17
|
+
import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
|
|
18
|
+
import { BodyText, Popover } from '@servicetitan/design-system';
|
|
14
19
|
import classNames from 'classnames';
|
|
15
|
-
import { useCallback, useEffect, useMemo, useState, } from 'react';
|
|
16
|
-
import {
|
|
20
|
+
import { useCallback, useContext, useEffect, useMemo, useState, } from 'react';
|
|
21
|
+
import { NavigationContext } from '../../utils/navigation-context';
|
|
17
22
|
import { CounterTag } from '../counter-tag';
|
|
18
23
|
import * as Styles from './profile-dropdown.module.less';
|
|
19
24
|
import { ProfileLogo } from './profile-icon';
|
|
20
|
-
const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imageSrc, info, onClick, }) => {
|
|
25
|
+
const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imageSrc, info, onClick, open, }) => {
|
|
21
26
|
const [avatarSource, setAvatarSource] = useState(imageSrc !== null && imageSrc !== void 0 ? imageSrc : '');
|
|
22
27
|
const [avatarSourceError, setAvatarSourceError] = useState(false);
|
|
28
|
+
const { isLegacy } = useContext(NavigationContext);
|
|
23
29
|
useEffect(() => {
|
|
24
30
|
const src = imageSrc !== null && imageSrc !== void 0 ? imageSrc : '';
|
|
25
31
|
if (src === avatarSource) {
|
|
@@ -31,7 +37,10 @@ const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imag
|
|
|
31
37
|
const onAvatarError = useCallback(() => {
|
|
32
38
|
setAvatarSourceError(true);
|
|
33
39
|
}, []);
|
|
34
|
-
return (_jsxs("div", { className: classNames('d-f align-items-center cursor-pointer position-relative p-x-1 p-y-half', 'profile-dropdown-trigger', Styles.triggerContainer, {
|
|
40
|
+
return (_jsxs("div", { className: classNames('d-f align-items-center cursor-pointer position-relative p-x-1 p-y-half', 'profile-dropdown-trigger', Styles.triggerContainer, {
|
|
41
|
+
[Styles.triggerContainerHintArrow]: hintArrow,
|
|
42
|
+
[Styles.triggerContainerLegacy]: isLegacy,
|
|
43
|
+
}, className), onClick: onClick, "data-cy": "profile-dropdown-trigger", "data-pendo": "profile-dropdown-trigger", children: [avatarSource && !avatarSourceError ? (_jsx("img", { src: avatarSource, className: classNames(Styles.profileImage, 'profile-dropdown-image'), onError: onAvatarError, alt: "user dropdown menu" })) : isLegacy ? (_jsx(ProfileLogo, {})) : (_jsx(Icon, { size: "large", svg: open ? SvgAccountActive : SvgAccountInactive })), !!info && (_jsxs("div", { className: Styles.info, children: [_jsx(BodyText, { bold: true, title: info.title, className: "t-truncate c-inherit", size: "xsmall", children: info.title }), _jsx(BodyText, { title: info.text, className: "t-truncate c-neutral-70 tt-uppercase", size: "xsmall", children: info.text })] })), _jsx(Icon, { svg: open ? SvgExpandLess : SvgExpandMore, className: classNames('d-f align-items-center c-inherit', { 'm-l-half': isLegacy }), size: "small" }), !!avatarBadge && (_jsx("div", { className: classNames(Styles.avatarBadge, avatarBadge === true ? 'bg-blue-500' : `bg-${avatarBadge}`) })), !!badge && (_jsx("span", { className: classNames(Styles.badge, badge.content ? Styles.badgeWithContent : Styles.badgeNoContent, badge.className), children: badge.content }))] }));
|
|
35
44
|
};
|
|
36
45
|
export const ProfileDropdownSection = (_a) => {
|
|
37
46
|
var { children, className, id, onClick } = _a, rest = __rest(_a, ["children", "className", "id", "onClick"]);
|
|
@@ -48,7 +57,7 @@ export const ProfileDropdownSection = (_a) => {
|
|
|
48
57
|
export const ProfileDropdownDivider = Popover.Divider;
|
|
49
58
|
export const ProfileDropdownLink = (_a) => {
|
|
50
59
|
var { children, className, counter, external, id, target, to, onClick } = _a, rest = __rest(_a, ["children", "className", "counter", "external", "id", "target", "to", "onClick"]);
|
|
51
|
-
const NavigationComponent =
|
|
60
|
+
const { NavigationComponent } = useContext(NavigationContext);
|
|
52
61
|
const clickHandler = (e) => {
|
|
53
62
|
e.preventDefault();
|
|
54
63
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
@@ -80,7 +89,7 @@ export const ProfileDropdown = (({ children, className, direction, hintPopup, on
|
|
|
80
89
|
}, [open, onOpen, onClose]);
|
|
81
90
|
const hintShown = !!hintPopup && !open;
|
|
82
91
|
const HintComponent = hintPopup === null || hintPopup === void 0 ? void 0 : hintPopup.content;
|
|
83
|
-
const triggerElement = (_jsx(ProfileDropdownTrigger, Object.assign({}, trigger, { onClick: children ? onTriggerClick : undefined, hintArrow: hintShown })));
|
|
92
|
+
const triggerElement = (_jsx(ProfileDropdownTrigger, Object.assign({}, trigger, { onClick: children ? onTriggerClick : undefined, hintArrow: hintShown, open: open })));
|
|
84
93
|
return (_jsx("div", { className: className, "data-cy": "profile-dropdown", children: !!hintPopup && hintShown && HintComponent ? (_jsx(Popover, { direction: direction !== null && direction !== void 0 ? direction : 'bl', width: (_a = hintPopup.width) !== null && _a !== void 0 ? _a : 'xs', trigger: triggerElement, popoverContentClassName: Styles.hint, onClickOutside: hintPopup === null || hintPopup === void 0 ? void 0 : hintPopup.onClose, open: true, children: _jsx("div", { className: classNames(Styles.hintContent, hintPopup.className), children: _jsx(HintComponent, { openProfile: handleOpen }) }) })) : (_jsx(Popover, { direction: direction !== null && direction !== void 0 ? direction : 'bl', width: width !== null && width !== void 0 ? width : 'xs', trigger: triggerElement, open: open, portal: portal, onClickOutside: handleClose, className: Styles.dropdown, popoverContentClassName: classNames(Styles.dropdownContent, Styles.dropdownContentBottomLeft), children: _jsx("div", { className: Styles.dropdownContentWrapper, onClick: handleClose, "data-cy": "profile-dropdown-content", children: children }) })) }));
|
|
85
94
|
});
|
|
86
95
|
ProfileDropdown.Divider = ProfileDropdownDivider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"profile-dropdown.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,aAAa,MAAM,kEAAkE,CAAC;AAC7F,OAAO,aAAa,MAAM,kEAAkE,CAAC;AAC7F,OAAO,gBAAgB,MAAM,8DAA8D,CAAC;AAC5F,OAAO,kBAAkB,MAAM,gEAAgE,CAAC;AAChG,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAsB,MAAM,6BAA6B,CAAC;AACpF,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAMH,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,QAAQ,GACX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAuB,MAAM,gBAAgB,CAAC;AACjE,OAAO,KAAK,MAAM,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAa7C,MAAM,sBAAsB,GAAoC,CAAC,EAC7D,WAAW,EACX,KAAK,EACL,SAAS,EACT,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,IAAI,GACP,EAAE,EAAE;IACD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CAAC;IACjE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,GAAG,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC;QAE3B,IAAI,GAAG,KAAK,YAAY,EAAE,CAAC;YACvB,OAAO;QACX,CAAC;QAED,eAAe,CAAC,GAAG,CAAC,CAAC;QACrB,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7B,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,eACI,SAAS,EAAE,UAAU,CACjB,wEAAwE,EACxE,0BAA0B,EAC1B,MAAM,CAAC,gBAAgB,EACvB;YACI,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS;YAC7C,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAE,QAAQ;SAC5C,EACD,SAAS,CACZ,EACD,OAAO,EAAE,OAAO,aACR,0BAA0B,gBACvB,0BAA0B,aAEpC,YAAY,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAClC,cACI,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,wBAAwB,CAAC,EACpE,OAAO,EAAE,aAAa,EACtB,GAAG,EAAC,oBAAoB,GAC1B,CACL,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACX,KAAC,WAAW,KAAG,CAClB,CAAC,CAAC,CAAC,CACA,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,GAAI,CAC3E,EAEA,CAAC,CAAC,IAAI,IAAI,CACP,eAAK,SAAS,EAAE,MAAM,CAAC,IAAI,aACvB,KAAC,QAAQ,IACL,IAAI,QACJ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAC,sBAAsB,EAChC,IAAI,EAAC,QAAQ,YAEZ,IAAI,CAAC,KAAK,GACJ,EACX,KAAC,QAAQ,IACL,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAC,sCAAsC,EAChD,IAAI,EAAC,QAAQ,YAEZ,IAAI,CAAC,IAAI,GACH,IACT,CACT,EAED,KAAC,IAAI,IACD,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,EACzC,SAAS,EAAE,UAAU,CAAC,kCAAkC,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,EACnF,IAAI,EAAC,OAAO,GACd,EAED,CAAC,CAAC,WAAW,IAAI,CACd,cACI,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,WAAW,EAClB,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,WAAW,EAAE,CAC7D,GACH,CACL,EACA,CAAC,CAAC,KAAK,IAAI,CACR,eACI,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,EAC/D,KAAK,CAAC,SAAS,CAClB,YAEA,KAAK,CAAC,OAAO,GACX,CACV,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAaF,MAAM,CAAC,MAAM,sBAAsB,GAAoC,CAAC,EAMvE,EAAE,EAAE;QANmE,EACpE,QAAQ,EACR,SAAS,EACT,EAAE,EACF,OAAO,OAEV,EADM,IAAI,cAL6D,0CAMvE,CADU;IAEP,MAAM,YAAY,GAA6B,CAAC,CAAC,EAAE;QAC/C,IAAI,OAAO,EAAE,CAAC;YACV,OAAO,CAAC,CAAC,CAAC,CAAC;QACf,CAAC;aAAM,CAAC;YACJ,CAAC,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,4BACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,eAAe,EAAE,SAAS,CAAC,EACxD,OAAO,EAAE,YAAY,aACZ,4BAA4B,EAAE,EAAE,gBAC7B,4BAA4B,EAAE,EAAE,IACxC,IAAI,cAEP,QAAQ,IACP,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAO,OAAO,CAAC,OAAO,CAAC;AAiB1D,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAUvC,EAAE,EAAE;QAVmC,EAC9D,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,EAAE,EACF,MAAM,EACN,EAAE,EACF,OAAO,OAEgB,EADpB,IAAI,cATuD,iFAUjE,CADU;IAEP,MAAM,EAAE,mBAAmB,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,CAAC,CAAkB,EAAE,EAAE;QACxC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAE1D,MAAM,cAAc,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,KAAC,UAAU,IAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,EAC9D,CAAC,OAAO,CAAC,CACZ,CAAC;IAEF,OAAO,cAAc,CAAC,CAAC,CAAC,CACpB,2BACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,EAC7E,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,MAAM,aACL,yBAAyB,EAAE,EAAE,gBAC1B,yBAAyB,EAAE,EAAE,IACrC,IAAI,eAEP,QAAQ,EACR,cAAc,KACf,CACP,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CACL,MAAC,mBAAmB,kBAChB,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,EAC7E,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,EAAE,aACG,yBAAyB,EAAE,EAAE,gBAC1B,yBAAyB,EAAE,EAAE,IACrC,IAAI,eAEP,QAAQ,EACR,cAAc,KACG,CACzB,CAAC,CAAC,CAAC,CACA,2BACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,EAC7E,OAAO,EAAE,YAAY,aACZ,yBAAyB,EAAE,EAAE,gBAC1B,yBAAyB,EAAE,EAAE,IACrC,IAAI,eAEP,QAAQ,EACR,cAAc,KACf,CACP,CAAC;AACN,CAAC,CAAC;AA6BF,MAAM,CAAC,MAAM,eAAe,GAAwB,CAAC,CAAC,EAClD,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,OAAO,EACP,KAAK,GACR,EAAE,EAAE;;IACD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;IAChB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;IACf,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,MAAM,cAAc,GAAG,WAAW,CAC9B,CAAC,CAAa,EAAE,EAAE;QACd,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;QAEf,IAAI,IAAI,EAAE,CAAC;YACP,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;QAChB,CAAC;aAAM,CAAC;YACJ,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;QACf,CAAC;IACL,CAAC,EACD,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,CAC1B,CAAC;IACF,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC;IACvC,MAAM,aAAa,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAC;IAEzC,MAAM,cAAc,GAAG,CACnB,KAAC,sBAAsB,oBACf,OAAO,IACX,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC9C,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,IACZ,CACL,CAAC;IAEF,OAAO,CACH,cAAK,SAAS,EAAE,SAAS,aAAU,kBAAkB,YAChD,CAAC,CAAC,SAAS,IAAI,SAAS,IAAI,aAAa,CAAC,CAAC,CAAC,CACzC,KAAC,OAAO,IACJ,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,IAAI,EAC5B,KAAK,EAAE,MAAA,SAAS,CAAC,KAAK,mCAAI,IAAI,EAC9B,OAAO,EAAE,cAAc,EACvB,uBAAuB,EAAE,MAAM,CAAC,IAAI,EACpC,cAAc,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,EAClC,IAAI,kBAEJ,cAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,YAC/D,KAAC,aAAa,IAAC,WAAW,EAAE,UAAU,GAAI,GACxC,GACA,CACb,CAAC,CAAC,CAAC,CACA,KAAC,OAAO,IACJ,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,IAAI,EAC5B,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,EACpB,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,WAAW,EAC3B,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,uBAAuB,EAAE,UAAU,CAC/B,MAAM,CAAC,eAAe,EACtB,MAAM,CAAC,yBAAyB,CACnC,YAED,cACI,SAAS,EAAE,MAAM,CAAC,sBAAsB,EACxC,OAAO,EAAE,WAAW,aACZ,0BAA0B,YAEjC,QAAQ,GACP,GACA,CACb,GACC,CACT,CAAC;AACN,CAAC,CAAwB,CAAC;AAE1B,eAAe,CAAC,OAAO,GAAG,sBAAsB,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG,mBAAmB,CAAC;AAC3C,eAAe,CAAC,OAAO,GAAG,sBAAsB,CAAC"}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
.avatar-badge {
|
|
18
18
|
position: absolute;
|
|
19
19
|
top: 8px;
|
|
20
|
-
left:
|
|
20
|
+
left: 4px;
|
|
21
21
|
height: 12px;
|
|
22
22
|
width: 12px;
|
|
23
23
|
border-radius: @border-radius-circular;
|
|
@@ -50,6 +50,12 @@
|
|
|
50
50
|
border-radius: 8px;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
&.trigger-container-legacy {
|
|
54
|
+
.avatar-badge {
|
|
55
|
+
left: 0;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
53
59
|
&.trigger-container-hint-arrow:first-child:before {
|
|
54
60
|
display: none;
|
|
55
61
|
content: '';
|
|
@@ -2,14 +2,15 @@ declare const _default: {
|
|
|
2
2
|
title: string;
|
|
3
3
|
component: import("./profile-dropdown").ProfileDropdownType;
|
|
4
4
|
parameters: {};
|
|
5
|
+
decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
|
|
5
6
|
};
|
|
6
7
|
export default _default;
|
|
7
|
-
export declare const
|
|
8
|
-
export declare const
|
|
9
|
-
export declare const
|
|
10
|
-
export declare const
|
|
11
|
-
export declare const
|
|
12
|
-
export declare const
|
|
13
|
-
export declare const
|
|
14
|
-
export declare const
|
|
8
|
+
export declare const ProfileDropdownDefault: () => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const ProfileDropdownWithLogo: () => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const ProfileDropdownWithErrorLogo: () => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const ProfileDropdownWithInfo: () => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare const ProfileDropdownWithCounter: () => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const ProfileDropdownWithBothBadges: () => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const ProfileDropdownWithHintPopup: () => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const ProfileDropdownWithHintAndInfoPopup: () => import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
//# sourceMappingURL=profile-dropdown.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"profile-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":";;;;;;AAWA,wBAKE;AAEF,eAAO,MAAM,sBAAsB,+CAkBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAanC,CAAC;AAEF,eAAO,MAAM,4BAA4B,+CAMxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAOnC,CAAC;AAEF,eAAO,MAAM,0BAA0B,+CAQtC,CAAC;AAEF,eAAO,MAAM,6BAA6B,+CAOzC,CAAC;AAKF,eAAO,MAAM,4BAA4B,+CA4BxC,CAAC;AAEF,eAAO,MAAM,mCAAmC,+CAW/C,CAAC"}
|
|
@@ -1,51 +1,51 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button } from '@servicetitan/design-system';
|
|
3
|
+
import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data.stories';
|
|
3
4
|
import { HeaderNavigation } from '../header-navigation';
|
|
4
5
|
import { ProfileDropdown } from './profile-dropdown';
|
|
6
|
+
const withHeaderNavigation = (Story) => (_jsx(HeaderNavigation, { navigationComponent: NavLinkMock, children: _jsx(Story, {}) }));
|
|
5
7
|
export default {
|
|
6
8
|
title: 'Navigation/ProfileDropdown',
|
|
7
9
|
component: ProfileDropdown,
|
|
8
10
|
parameters: {},
|
|
11
|
+
decorators: [withMemoryRouter, withAnvil, withHeaderNavigation],
|
|
9
12
|
};
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
export const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
export const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
avatarBadge: 'yellow-500',
|
|
31
|
-
badge: { className: 'bg-red-400' },
|
|
32
|
-
} }) }));
|
|
13
|
+
export const ProfileDropdownDefault = () => (_jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "first", to: "https://google.com", children: "first link" }), _jsx(ProfileDropdown.Link, { id: "second", onClick: () => alert('second click'), children: "second link" }), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Section, { id: "content", children: "some content" }), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Link, { id: "third", to: "third", children: "third link" }), _jsx(ProfileDropdown.Divider, {})] }));
|
|
14
|
+
export const ProfileDropdownWithLogo = () => (_jsxs(ProfileDropdown, { trigger: {
|
|
15
|
+
imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
|
|
16
|
+
}, children: [_jsx(ProfileDropdown.Link, { id: "first", to: "https://google.com", children: "first link" }), _jsx(ProfileDropdown.Link, { id: "second", onClick: () => alert('second click'), children: "second link" })] }));
|
|
17
|
+
export const ProfileDropdownWithErrorLogo = () => (_jsx(ProfileDropdown, { trigger: {
|
|
18
|
+
imageSrc: 'https://some.incorrect.url/logo.png',
|
|
19
|
+
} }));
|
|
20
|
+
export const ProfileDropdownWithInfo = () => (_jsx(ProfileDropdown, { trigger: {
|
|
21
|
+
info: { text: 'first', title: 'tenant user' },
|
|
22
|
+
avatarBadge: true,
|
|
23
|
+
} }));
|
|
24
|
+
export const ProfileDropdownWithCounter = () => (_jsx(ProfileDropdown, { trigger: {
|
|
25
|
+
info: { text: 'first', title: 'tenant user' },
|
|
26
|
+
avatarBadge: true,
|
|
27
|
+
badge: { content: 3, className: 'bg-red-500' },
|
|
28
|
+
} }));
|
|
29
|
+
export const ProfileDropdownWithBothBadges = () => (_jsx(ProfileDropdown, { trigger: {
|
|
30
|
+
avatarBadge: 'yellow-500',
|
|
31
|
+
badge: { className: 'bg-red-400' },
|
|
32
|
+
} }));
|
|
33
33
|
// eslint-disable-next-line no-console
|
|
34
34
|
const log = (text) => console.log(text);
|
|
35
|
-
export const
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
export const
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
35
|
+
export const ProfileDropdownWithHintPopup = () => (_jsxs(ProfileDropdown, { trigger: {
|
|
36
|
+
avatarBadge: 'yellow-500',
|
|
37
|
+
badge: { className: 'bg-red-400' },
|
|
38
|
+
}, hintPopup: {
|
|
39
|
+
className: 'bg-blue-500-i c-white',
|
|
40
|
+
content: ({ openProfile }) => (_jsxs("div", { children: ["hello", ' ', _jsx(Button, { onClick: openProfile, size: "xsmall", children: "show me" })] })),
|
|
41
|
+
width: 's',
|
|
42
|
+
onClose: () => log('close profile dropdown hint'),
|
|
43
|
+
}, onOpen: () => log('open profile dropdown'), onClose: () => log('close profile dropdown'), children: [_jsx(ProfileDropdown.Link, { id: "first", to: "https://google.com", children: "first item" }), _jsx(ProfileDropdown.Divider, {}), _jsx(ProfileDropdown.Section, { id: "second", children: "second item" })] }));
|
|
44
|
+
export const ProfileDropdownWithHintAndInfoPopup = () => (_jsx(ProfileDropdown, { trigger: {
|
|
45
|
+
avatarBadge: 'yellow-500',
|
|
46
|
+
badge: { className: 'bg-red-400' },
|
|
47
|
+
info: { title: 'some text', text: 'qq' },
|
|
48
|
+
}, hintPopup: {
|
|
49
|
+
content: () => _jsx("div", { children: "hello" }),
|
|
50
|
+
} }));
|
|
51
51
|
//# sourceMappingURL=profile-dropdown.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"profile-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":"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"}
|