@triptease/tt-navbar 0.0.57 → 0.0.58
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/.storybook/main.js +2 -2
- package/dist/src/styles.js +4 -1
- package/dist/src/styles.js.map +1 -1
- package/dist/stories/tt-navbar.stories.d.ts +1 -0
- package/dist/stories/tt-navbar.stories.js +19 -7
- package/dist/stories/tt-navbar.stories.js.map +1 -1
- package/dist/web/Config.js +1 -1
- package/dist/web/Routes.js +1 -1
- package/dist/web/TtNavbar.js +5 -2
- package/dist/web/TtNavbar.js.map +2 -2
- package/dist/web/getInitialNavbarState.js +1 -1
- package/dist/web/global.d.js +1 -1
- package/dist/web/index.js +5 -2
- package/dist/web/index.js.map +2 -2
- package/dist/web/styles.js +5 -2
- package/dist/web/styles.js.map +2 -2
- package/dist/web/triptease-logo.js +1 -1
- package/dist/web/tt-navbar.js +5 -2
- package/dist/web/tt-navbar.js.map +2 -2
- package/dist/web/urlMappings.js +1 -1
- package/package.json +5 -7
- package/src/styles.ts +4 -1
- package/stories/tt-navbar.stories.ts +25 -12
package/.storybook/main.js
CHANGED
package/dist/src/styles.js
CHANGED
|
@@ -288,7 +288,7 @@ export const styles = css `
|
|
|
288
288
|
opacity: 0;
|
|
289
289
|
}
|
|
290
290
|
|
|
291
|
-
.nav-toggle-button:is(:hover
|
|
291
|
+
.nav-toggle-button:is(:hover, :focus-within) .nav-toggle-tooltip {
|
|
292
292
|
visibility: visible;
|
|
293
293
|
opacity: 1;
|
|
294
294
|
}
|
|
@@ -322,6 +322,9 @@ export const styles = css `
|
|
|
322
322
|
padding: var(--space-scale-1); /* match tt-combobox height */
|
|
323
323
|
font-size: var(--font-size-200);
|
|
324
324
|
color: var(--color-text-inverted-200);
|
|
325
|
+
text-wrap: nowrap;
|
|
326
|
+
overflow: hidden;
|
|
327
|
+
text-overflow: ellipsis;
|
|
325
328
|
}
|
|
326
329
|
`;
|
|
327
330
|
//# sourceMappingURL=styles.js.map
|
package/dist/src/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;CAW5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyCf,iBAAiB;;;;UAIjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA4DjB,iBAAiB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;CAW5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyCf,iBAAiB;;;;UAIjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA4DjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkN1B,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst visuallyHiddenCss = css`\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n`;\n\nexport const styles = css`\n :host {\n --nav-bar-width: 260px;\n\n display: block;\n height: 100vh;\n }\n\n :host:has(.sidebar-closed) {\n --nav-bar-width: fit-content;\n }\n\n * {\n box-sizing: border-box;\n }\n\n nav {\n --menu-font-size: var(--font-size-200);\n max-width: var(--nav-bar-width);\n width: var(--nav-bar-width);\n min-height: 100vh;\n height: max-content;\n display: flex;\n align-items: start;\n gap: var(--space-scale-3-5);\n flex-direction: column;\n background-color: var(--color-surface-inverted-100);\n color: var(--color-text-inverted-400);\n padding-top: var(--space-scale-2);\n padding-bottom: var(--space-scale-2);\n z-index: 1;\n\n .nav-items {\n display: flex;\n flex-direction: column;\n padding: 0 var(--space-scale-1);\n width: 100%;\n }\n\n .nav-items.sidebar-closed {\n a span {\n ${visuallyHiddenCss}\n }\n\n details summary span {\n ${visuallyHiddenCss}\n }\n }\n\n .sidebar-header {\n width: 100%;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n justify-content: center;\n padding: 0 var(--space-scale-2);\n\n button {\n background-color: transparent;\n color: var(--color-text-inverted-400);\n border: none;\n }\n }\n\n .sidebar-header.sidebar-closed {\n padding: 0 var(--space-scale-1);\n .logo {\n display: none;\n visibility: hidden;\n }\n }\n\n hr {\n width: 100%;\n height: 1px;\n background-color: var(--color-surface-inverted-200);\n border: none;\n }\n\n .tertiary-nav {\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n\n .external-link {\n font-size: var(--menu-font-size);\n line-height: var(--font-line-height-100);\n\n .icon {\n width: var(--space-scale-2);\n height: var(--space-scale-2);\n }\n }\n }\n\n .tertiary-nav.sidebar-closed {\n .external-link,\n hr,\n #client-selector {\n display: none;\n visibility: hidden;\n }\n\n a span {\n ${visuallyHiddenCss}\n }\n }\n\n .icon {\n display: flex;\n align-items: center;\n width: var(--space-scale-3);\n height: var(--space-scale-3);\n color: var(--nav-item-color);\n }\n\n .nav-item {\n display: flex;\n font-size: var(--menu-font-size);\n line-height: var(--font-line-height-100);\n gap: var(--space-scale-1-5);\n border-radius: var(--border-radius-100);\n color: var(--nav-item-color);\n align-items: center;\n padding: var(--space-scale-1);\n width: 100%;\n text-decoration: none;\n }\n }\n\n nav.sidebar-closed {\n width: fit-content;\n\n :host {\n --nav-bar-width: fit-content;\n }\n }\n\n details {\n border-radius: var(--border-radius-100);\n\n summary {\n font-size: var(--menu-font-size);\n line-height: var(--font-line-height-100);\n position: relative;\n display: flex;\n align-items: baseline;\n\n &::marker {\n display: none;\n }\n\n &::-webkit-details-marker {\n display: none;\n }\n }\n\n .chevron {\n margin-left: auto;\n margin-right: var(--space-scale-1);\n width: var(--space-scale-2);\n }\n\n &[open] .chevron svg {\n transform: rotate(180deg);\n }\n\n .dropdown-items {\n display: flex;\n flex-direction: column;\n }\n }\n\n details > summary {\n display: flex;\n gap: var(--space-scale-1-5);\n padding: var(--space-scale-1);\n border-radius: var(--border-radius-100);\n color: var(--nav-item-color);\n align-items: center;\n\n a {\n color: var(--nav-item-color);\n }\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-surface-inverted-200);\n border-radius: var(--border-radius-100);\n text-decoration: none;\n }\n }\n\n .sidebar-closed details:has(.current-page) > summary {\n --nav-item-color: var(--color-primary-400);\n border-radius: var(--border-radius-100);\n background-color: var(--color-primary-100);\n color: var(--nav-item-color);\n }\n\n .sub-nav-item {\n width: 100%;\n display: flex;\n padding-left: 44px;\n padding-top: 10px;\n padding-bottom: 10px;\n color: var(--color-text-inverted-400);\n font-size: var(--menu-font-size);\n line-height: var(--font-line-height-100);\n text-decoration: none;\n\n button {\n color: var(--color-text-inverted-400);\n padding: 0;\n }\n }\n\n .sub-nav-item:hover,\n .sub-nav-item:focus-visible,\n .nav-item:hover,\n .nav-item:focus-visible {\n background-color: var(--color-surface-inverted-200);\n border-radius: var(--border-radius-100);\n text-decoration: none;\n color: var(--color-text-inverted-400);\n\n .icon {\n color: var(--color-text-inverted-400);\n }\n }\n\n .current-page {\n --nav-item-color: var(--color-primary-400);\n border-radius: var(--border-radius-100);\n background-color: var(--color-primary-100);\n color: var(--nav-item-color);\n }\n\n .link-page {\n display: flex;\n position: absolute;\n overflow: auto;\n flex-direction: column;\n gap: var(--space-scale-4);\n padding: var(--space-scale-5);\n left: var(--nav-bar-width);\n background-color: var(--color-surface-200);\n width: calc(100% - var(--nav-bar-width));\n height: 100%;\n }\n\n .tooltip {\n position: absolute;\n display: flex;\n white-space: nowrap;\n align-items: center;\n gap: var(--space-scale-1);\n color: black;\n background-color: var(--color-surface-600);\n padding: var(--space-scale-1);\n z-index: 1000;\n border-radius: var(--border-radius-50);\n font-weight: var(--font-weight-medium);\n }\n\n .nav-toggle-button {\n position: relative;\n }\n\n .nav-toggle-tooltip {\n left: 100%;\n top: 100%;\n visibility: hidden;\n opacity: 0;\n }\n\n .nav-toggle-button:is(:hover, :focus-within) .nav-toggle-tooltip {\n visibility: visible;\n opacity: 1;\n }\n\n #client-selector {\n display: flex;\n align-items: center;\n padding: var(--space-scale-1) 0;\n margin-bottom: var(--space-scale-2);\n }\n\n #client-selector tt-combobox {\n --tt-combobox-color: var(--color-text-inverted-400);\n --tt-combobox-dropdown-color: var(--color-text-inverted-400);\n --tt-combobox-list-background-color: var(--color-surface-inverted-100);\n --tt-combobox-option-background-color-hover: var(\n --color-surface-inverted-200\n );\n --tt-combobox-placeholder-color: var(--color-text-inverted-300);\n --tt-combobox-background-color: var(--color-surface-inverted-100);\n --tt-combobox-hover-background-color: var(--color-surface-inverted-200);\n --tt-combobox-list-max-width: 80ch;\n --tt-combobox-min-width: 244px;\n --tt-combobox-max-width: 244px;\n --tt-combobox-option-selected-color: var(--color-text-inverted-500);\n --tt-combobox-border-color: var(--color-surface-inverted-200);\n }\n\n .single-client-name {\n height: 39px;\n padding: var(--space-scale-1); /* match tt-combobox height */\n font-size: var(--font-size-200);\n color: var(--color-text-inverted-200);\n text-wrap: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
|
|
@@ -7,11 +7,11 @@ const meta = {
|
|
|
7
7
|
clientKey: { control: 'text' },
|
|
8
8
|
clients: { control: 'object' },
|
|
9
9
|
campaignManagerUrl: { control: 'text' },
|
|
10
|
-
onClientChange: { action: 'clientChanged' }
|
|
11
|
-
}
|
|
10
|
+
onClientChange: { action: 'clientChanged' },
|
|
11
|
+
},
|
|
12
12
|
};
|
|
13
13
|
export default meta;
|
|
14
|
-
const Template = ({ clientKey = 'zxd47KQGAP', clients = [], campaignManagerUrl = 'https://app.campaign-manager.triptease.io', onClientChange }) => html `
|
|
14
|
+
const Template = ({ clientKey = 'zxd47KQGAP', clients = [], campaignManagerUrl = 'https://app.campaign-manager.triptease.io', onClientChange, }) => html `
|
|
15
15
|
<div>
|
|
16
16
|
<tt-navbar
|
|
17
17
|
client-key=${clientKey}
|
|
@@ -30,15 +30,27 @@ MultipleClients.args = {
|
|
|
30
30
|
clientKey: 'zxd47KQGAP',
|
|
31
31
|
clients: [
|
|
32
32
|
{ clientKey: 'zxd47KQGAP', displayName: 'Demo Client' },
|
|
33
|
-
{ clientKey: 'a1b2c3d4e5', displayName: 'Another Client' }
|
|
33
|
+
{ clientKey: 'a1b2c3d4e5', displayName: 'Another Client' },
|
|
34
|
+
{
|
|
35
|
+
clientKey: 'f6g7h8i9j0',
|
|
36
|
+
displayName: 'Demo Client with an Exceptionally Long Name for Testing',
|
|
37
|
+
},
|
|
34
38
|
],
|
|
35
|
-
onClientChange: clientChangeHandler
|
|
39
|
+
onClientChange: clientChangeHandler,
|
|
36
40
|
};
|
|
37
41
|
export const SingleClient = Template.bind({});
|
|
38
42
|
SingleClient.args = {
|
|
43
|
+
clientKey: 'zxd47KQGAP',
|
|
44
|
+
clients: [{ clientKey: 'zxd47KQGAP', displayName: 'Demo Client' }],
|
|
45
|
+
};
|
|
46
|
+
export const SingleClientLongName = Template.bind({});
|
|
47
|
+
SingleClientLongName.args = {
|
|
39
48
|
clientKey: 'zxd47KQGAP',
|
|
40
49
|
clients: [
|
|
41
|
-
{
|
|
42
|
-
|
|
50
|
+
{
|
|
51
|
+
clientKey: 'zxd47KQGAP',
|
|
52
|
+
displayName: 'Demo Client with an Exceptionally Long Name for Testing',
|
|
53
|
+
},
|
|
54
|
+
],
|
|
43
55
|
};
|
|
44
56
|
//# sourceMappingURL=tt-navbar.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tt-navbar.stories.js","sourceRoot":"","sources":["../../stories/tt-navbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,qBAAqB,CAAC;AAE7B,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACvC,cAAc,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE;KAC5C;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAqBpB,MAAM,QAAQ,GAAoB,CAAC,
|
|
1
|
+
{"version":3,"file":"tt-navbar.stories.js","sourceRoot":"","sources":["../../stories/tt-navbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,qBAAqB,CAAC;AAE7B,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACvC,cAAc,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE;KAC5C;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAqBpB,MAAM,QAAQ,GAAoB,CAAC,EACjC,SAAS,GAAG,YAAY,EACxB,OAAO,GAAG,EAAE,EACZ,kBAAkB,GAAG,2CAA2C,EAChE,cAAc,GACL,EAAE,EAAE,CAAC,IAAI,CAAA;;;mBAGD,SAAS;6BACC,kBAAkB;gBAC/B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;wBACf,cAAc;;;;CAIrC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAChD,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACrB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE;QACP,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE;QACvD,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE;QAC1D;YACE,SAAS,EAAE,YAAY;YACvB,WAAW,EAAE,yDAAyD;SACvE;KACF;IACD,cAAc,EAAE,mBAAmB;CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC;CACnE,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE;QACP;YACE,SAAS,EAAE,YAAY;YACvB,WAAW,EAAE,yDAAyD;SACvE;KACF;CACF,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport '../src/tt-navbar.js';\n\nconst meta = {\n title: 'TtNavbar',\n component: 'tt-navbar',\n argTypes: {\n clientKey: { control: 'text' },\n clients: { control: 'object' },\n campaignManagerUrl: { control: 'text' },\n onClientChange: { action: 'clientChanged' },\n },\n};\n\nexport default meta;\n\ninterface Story<T> {\n (args: T): TemplateResult;\n\n args?: Partial<T>;\n argTypes?: Record<string, unknown>;\n}\n\ninterface Client {\n clientKey: string;\n displayName: string;\n}\n\ninterface ArgTypes {\n clientKey?: string;\n clients?: Client[];\n campaignManagerUrl?: string;\n onClientChange: (clientKey: string) => void;\n}\n\nconst Template: Story<ArgTypes> = ({\n clientKey = 'zxd47KQGAP',\n clients = [],\n campaignManagerUrl = 'https://app.campaign-manager.triptease.io',\n onClientChange,\n}: ArgTypes) => html`\n <div>\n <tt-navbar\n client-key=${clientKey}\n campaign-manager-url=${campaignManagerUrl}\n clients=${JSON.stringify(clients)}\n .onClientChange=${onClientChange}\n >\n </tt-navbar>\n </div>\n`;\n\nconst clientChangeHandler = (clientKey: string) => {\n console.log('Client changed to:', clientKey);\n};\n\nexport const MultipleClients = Template.bind({});\nMultipleClients.args = {\n clientKey: 'zxd47KQGAP',\n clients: [\n { clientKey: 'zxd47KQGAP', displayName: 'Demo Client' },\n { clientKey: 'a1b2c3d4e5', displayName: 'Another Client' },\n {\n clientKey: 'f6g7h8i9j0',\n displayName: 'Demo Client with an Exceptionally Long Name for Testing',\n },\n ],\n onClientChange: clientChangeHandler,\n};\n\nexport const SingleClient = Template.bind({});\nSingleClient.args = {\n clientKey: 'zxd47KQGAP',\n clients: [{ clientKey: 'zxd47KQGAP', displayName: 'Demo Client' }],\n};\n\nexport const SingleClientLongName = Template.bind({});\nSingleClientLongName.args = {\n clientKey: 'zxd47KQGAP',\n clients: [\n {\n clientKey: 'zxd47KQGAP',\n displayName: 'Demo Client with an Exceptionally Long Name for Testing',\n },\n ],\n};\n"]}
|
package/dist/web/Config.js
CHANGED
package/dist/web/Routes.js
CHANGED
package/dist/web/TtNavbar.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @triptease/tt-navbar v0.0.
|
|
2
|
+
* @triptease/tt-navbar v0.0.58
|
|
3
3
|
*/
|
|
4
4
|
var __defProp = Object.defineProperty;
|
|
5
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -1904,7 +1904,7 @@ var styles2 = i`
|
|
|
1904
1904
|
opacity: 0;
|
|
1905
1905
|
}
|
|
1906
1906
|
|
|
1907
|
-
.nav-toggle-button:is(:hover
|
|
1907
|
+
.nav-toggle-button:is(:hover, :focus-within) .nav-toggle-tooltip {
|
|
1908
1908
|
visibility: visible;
|
|
1909
1909
|
opacity: 1;
|
|
1910
1910
|
}
|
|
@@ -1938,6 +1938,9 @@ var styles2 = i`
|
|
|
1938
1938
|
padding: var(--space-scale-1); /* match tt-combobox height */
|
|
1939
1939
|
font-size: var(--font-size-200);
|
|
1940
1940
|
color: var(--color-text-inverted-200);
|
|
1941
|
+
text-wrap: nowrap;
|
|
1942
|
+
overflow: hidden;
|
|
1943
|
+
text-overflow: ellipsis;
|
|
1941
1944
|
}
|
|
1942
1945
|
`;
|
|
1943
1946
|
|