@genesislcap/foundation-header 14.58.0 → 14.60.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.
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
{
|
|
110
110
|
"kind": "variable",
|
|
111
111
|
"name": "MainStyles",
|
|
112
|
-
"default": "css`\n :host {\n display: flex;\n flex-direction: row;\n\n --primary-gradient-angle: -113.5deg;\n --design-unit: 2.5;\n }\n\n zero-design-system-provider,\n .dynamic-template {\n width: 100%;\n }\n\n .nav-listbox {\n background: ${neutralLayer2};\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n box-shadow: 0 0 15px 0 rgb(0 0 0 / 30%);\n }\n\n fast-listbox {\n border-color: var(--rapid-ag-background-color);\n }\n\n .nav-leftside {\n background: ${neutralLayer2};\n flex: 1;\n flex-direction: row;\n align-items: center;\n margin-left: calc(var(--design-unit) * 6px);\n display: flex;\n }\n\n .nav-leftside:focus-within {\n box-shadow: none;\n }\n\n ::slotted(fast-option),\n .nav-listbox fast-option {\n margin: 0 calc(var(--design-unit) * 2px);\n padding: 0 calc(var(--design-unit) * 6px);\n\n --focus-stroke-width: 0;\n }\n\n ::slotted(fast-option.selected),\n .nav-listbox fast-option.selected {\n background: ${backgroundNavOption};\n color: ${ColorHEX.white};\n }\n\n ::slotted(fast-option:not(.selected)),\n .nav-listbox fast-option:not(.selected) {\n background-color: ${defaultBackgroundItem};\n color: #c9c9c9;\n }\n\n ::slotted(fast-option:not(.selected):hover),\n .nav-listbox fast-option:not(.selected):hover {\n background-color: ${defaultBackgroundHover};\n color: ${ColorHEX.white};\n }\n\n .top-layout zero-icon {\n position: absolute;\n right: calc(var(--design-unit) * 6px);\n top: 50%;\n transform: translateY(-50%);\n font-size: 25px;\n opacity: 80%;\n cursor: pointer;\n }\n\n .logout-container zero-icon {\n padding: 0 calc(var(--design-unit) * 3px);\n }\n\n .nav-listbox .bars-container {\n margin-right: calc(var(--design-unit) * 3px);\n }\n\n .user-container zero-icon {\n font-size: 20px;\n margin-right: calc(var(--design-unit) * 2px);\n color: #879ba6;\n }\n\n .group-container zero-icon {\n padding-right: 10px;\n color: #879ba6;\n }\n\n .nav-listbox .bars-container zero-icon {\n cursor: pointer;\n font-size: calc(var(--design-unit) * 8px);\n background
|
|
112
|
+
"default": "css`\n :host {\n display: flex;\n flex-direction: row;\n\n --primary-gradient-angle: -113.5deg;\n --design-unit: 2.5;\n }\n\n zero-design-system-provider,\n .dynamic-template {\n width: 100%;\n }\n\n .nav-listbox {\n background: ${neutralLayer2};\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n box-shadow: 0 0 15px 0 rgb(0 0 0 / 30%);\n }\n\n fast-listbox {\n border-color: var(--rapid-ag-background-color);\n }\n\n .nav-leftside {\n background: ${neutralLayer2};\n flex: 1;\n flex-direction: row;\n align-items: center;\n margin-left: calc(var(--design-unit) * 6px);\n display: flex;\n }\n\n .nav-leftside:focus-within {\n box-shadow: none;\n }\n\n ::slotted(fast-option),\n .nav-listbox fast-option {\n margin: 0 calc(var(--design-unit) * 2px);\n padding: 0 calc(var(--design-unit) * 6px);\n\n --focus-stroke-width: 0;\n }\n\n ::slotted(fast-option.selected),\n .nav-listbox fast-option.selected {\n background: ${backgroundNavOption};\n color: ${ColorHEX.white};\n }\n\n ::slotted(fast-option:not(.selected)),\n .nav-listbox fast-option:not(.selected) {\n background-color: ${defaultBackgroundItem};\n color: #c9c9c9;\n }\n\n ::slotted(fast-option:not(.selected):hover),\n .nav-listbox fast-option:not(.selected):hover {\n background-color: ${defaultBackgroundHover};\n color: ${ColorHEX.white};\n }\n\n .top-layout zero-icon {\n position: absolute;\n right: calc(var(--design-unit) * 6px);\n top: 50%;\n transform: translateY(-50%);\n font-size: 25px;\n opacity: 80%;\n cursor: pointer;\n }\n\n .logout-container zero-icon {\n padding: 0 calc(var(--design-unit) * 3px);\n }\n\n .nav-listbox .bars-container {\n margin-right: calc(var(--design-unit) * 3px);\n }\n\n .user-container zero-icon {\n font-size: 20px;\n margin-right: calc(var(--design-unit) * 2px);\n color: #879ba6;\n }\n\n .group-container zero-icon {\n padding-right: 10px;\n color: #879ba6;\n }\n\n .nav-listbox .bars-container zero-icon {\n cursor: pointer;\n font-size: calc(var(--design-unit) * 8px);\n background:\n linear-gradient(\n var(--primary-gradient-angle),\n ${PrimaryRapidColorHEX.blue} 0%,\n ${PrimaryRapidColorHEX.purple} 100%\n )\n top/100% 1px,\n linear-gradient(\n var(--primary-gradient-angle),\n ${PrimaryRapidColorHEX.blue} 0%,\n ${PrimaryRapidColorHEX.purple} 100%\n )\n bottom/100% 1px;\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .logo-container {\n display: flex;\n align-items: center;\n margin-right: calc(var(--design-unit) * 3px);\n }\n\n .logo {\n height: calc(var(--design-unit) * 8px);\n width: calc(var(--design-unit) * 10px);\n }\n\n .nav-rightside {\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n margin-right: calc(var(--design-unit) * 6px);\n color: #c9c9c9;\n }\n\n .user-container {\n background-color: ${defaultBackgroundItem};\n padding: calc(var(--design-unit) * 1px);\n font-size: 14px;\n display: flex;\n align-items: center;\n border-radius: calc(var(--control-corner-radius) * 1px);\n cursor: pointer;\n }\n\n .icon-container {\n font-size: 20px;\n padding: calc(var(--design-unit) * 3px);\n margin-right: calc(var(--design-unit) * 4px);\n color: #879ba6;\n cursor: pointer;\n }\n\n .connection-indicator-container {\n margin-right: calc(var(--design-unit) * 4px);\n }\n\n .open-nav {\n width: 300px;\n }\n\n .top-layout {\n background:\n linear-gradient(\n var(--primary-gradient-angle),\n ${PrimaryRapidColorHEX.blue} 0%,\n ${PrimaryRapidColorHEX.purple} 100%\n )\n top/100% 1px,\n linear-gradient(\n var(--primary-gradient-angle),\n ${PrimaryRapidColorHEX.blue} 0%,\n ${PrimaryRapidColorHEX.purple} 100%\n )\n bottom/100% 1px;\n background-origin: border-box;\n background-size: cover;\n background-repeat: no-repeat;\n width: 100%;\n height: 15%;\n max-height: 120px;\n display: flex;\n flex-direction: row;\n align-items: center;\n position: relative;\n }\n\n .top-layout img {\n width: 50px;\n margin-left: calc(var(--design-unit) * 6px);\n }\n\n .top-layout zero-icon:hover {\n opacity: 100%;\n }\n\n .group-container {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n ::slotted(zero-tree-view) {\n --type-ramp-base-font-size: 12px;\n }\n\n ::slotted(div) {\n color: ${PrimaryRapidColorHEX.blue};\n font-size: var(--type-ramp-minus-1-font-size);\n margin-bottom: calc(var(--design-unit) * 4px);\n padding-left: calc(var(--design-unit) * 4px);\n padding-right: calc(var(--design-unit) * 4px);\n }\n\n .nav-preferences {\n width: 100%;\n height: 25%;\n max-height: 250px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n }\n\n .logout-container {\n align-items: center;\n background-color: var(--neutral-fill-rest);\n border: calc(var(--stroke-width) * 1px) solid ${defaultBackgroundItem};\n cursor: pointer;\n display: flex;\n flex-direction: row;\n height: 8%;\n max-height: 80px;\n padding: 3%;\n }\n\n .logout-container:hover {\n background-color: var(--neutral-fill-hover);\n }\n`",
|
|
113
113
|
"description": "Base styles for the foundation-header",
|
|
114
114
|
"return": {
|
|
115
115
|
"type": {
|
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
{
|
|
138
138
|
"kind": "variable",
|
|
139
139
|
"name": "NavTemplate",
|
|
140
|
-
"default": "html<Navigation>`\n ${when((x) => !x.hideSideBar, sideNavTemplate)}\n <div class=\"nav-listbox\" data-test-id=\"nav-bar\">\n <div class=\"nav-leftside\">\n ${when(\n (x) => !x.hideSideBar,\n html<Navigation>`\n <div\n class=\"bars-container\"\n @click=${(x) => x.toggleNavVisibility()}\n data-test-id=\"hamburger-menu\"\n >\n <zero-icon name=\"bars\" part=\"nav-visibility-icon\"></zero-icon>\n </div>\n
|
|
140
|
+
"default": "html<Navigation>`\n ${when((x) => !x.hideSideBar, sideNavTemplate)}\n <div class=\"nav-listbox\" data-test-id=\"nav-bar\">\n <div class=\"nav-leftside\">\n ${when(\n (x) => !x.hideSideBar,\n html<Navigation>`\n <div\n class=\"bars-container\"\n @click=${(x) => x.toggleNavVisibility()}\n data-test-id=\"hamburger-menu\"\n >\n <zero-icon name=\"bars\" part=\"nav-visibility-icon\"></zero-icon>\n </div>\n `,\n )}\n <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n <img src=${(x) => x.logoSrc} class=\"logo\" part=\"logo\" />\n </div>\n <slot name=\"routes\" data-test-id=\"route-buttons\">\n ${(x) => (x.routeButtons ? routeButtonsTemplate : defaultRouteButtonsTemplate)}\n </slot>\n </div>\n <div class=\"nav-rightside\">\n ${when(\n (x) => x.showLuminanceToggleButton,\n html<Navigation>`\n <div\n class=\"icon-container\"\n data-test-id=\"luminance-toggle-button\"\n part=\"luminance-button\"\n >\n <zero-icon\n @click=${(x) => x.luminanceIconEvent()}\n variant=\"regular\"\n name=\"moon\"\n part=\"luminance-icon\"\n ></zero-icon>\n </div>\n `,\n )}\n ${when(\n (x) => x.showMiscToggleButton,\n html<Navigation>`\n <div class=\"icon-container\" data-test-id=\"misc-toggle-button\" part=\"misc-button\">\n <zero-icon @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\"></zero-icon>\n </div>\n `,\n )}\n ${when(\n (x) => x.showNotificationsButton,\n html<Navigation>`\n <div\n class=\"icon-container\"\n data-test-id=\"notifications-button\"\n part=\"notifications-button\"\n >\n <zero-icon\n variant=\"regular\"\n @click=${(x) => x.notificationIconEvent()}\n name=\"bell\"\n part=\"notifications-icon\"\n ></zero-icon>\n <slot name=\"notifications-icon-end\"></slot>\n </div>\n `,\n )}\n ${when(\n (x) => x.showConnectionIndicator,\n html<Navigation>`\n <div class=\"connection-indicator-container\" data-test-id=\"connection-indicator\">\n <zero-connection-indicator show-label=\"false\"></zero-connection-indicator>\n </div>\n `,\n )}\n <zero-button appearance=\"neutral-grey\" data-test-id=\"user-button\">\n <zero-icon name=\"user-circle\"></zero-icon>\n ${(x) => x.userName}\n </zero-button>\n </div>\n </div>\n`",
|
|
141
141
|
"description": "Template for Navigation class",
|
|
142
142
|
"return": {
|
|
143
143
|
"type": {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAEA,OAAO,YAAY,CAAC;AASpB;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAEA,OAAO,YAAY,CAAC;AASpB;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iDAiPtB,CAAC"}
|
|
@@ -108,7 +108,8 @@ export const MainStyles = css `
|
|
|
108
108
|
.nav-listbox .bars-container zero-icon {
|
|
109
109
|
cursor: pointer;
|
|
110
110
|
font-size: calc(var(--design-unit) * 8px);
|
|
111
|
-
background:
|
|
111
|
+
background:
|
|
112
|
+
linear-gradient(
|
|
112
113
|
var(--primary-gradient-angle),
|
|
113
114
|
${PrimaryRapidColorHEX.blue} 0%,
|
|
114
115
|
${PrimaryRapidColorHEX.purple} 100%
|
|
@@ -173,7 +174,8 @@ export const MainStyles = css `
|
|
|
173
174
|
}
|
|
174
175
|
|
|
175
176
|
.top-layout {
|
|
176
|
-
background:
|
|
177
|
+
background:
|
|
178
|
+
linear-gradient(
|
|
177
179
|
var(--primary-gradient-angle),
|
|
178
180
|
${PrimaryRapidColorHEX.blue} 0%,
|
|
179
181
|
${PrimaryRapidColorHEX.purple} 100%
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-header",
|
|
3
3
|
"description": "Genesis Foundation Header",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.60.0",
|
|
5
5
|
"license": "SEE LICENSE IN license.txt",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/foundation-header.d.ts",
|
|
@@ -50,15 +50,15 @@
|
|
|
50
50
|
"test:debug": "genx test --debug"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@genesislcap/foundation-testing": "14.
|
|
54
|
-
"@genesislcap/genx": "14.
|
|
53
|
+
"@genesislcap/foundation-testing": "14.60.0",
|
|
54
|
+
"@genesislcap/genx": "14.60.0",
|
|
55
55
|
"rimraf": "^3.0.2"
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@genesislcap/foundation-comms": "14.
|
|
59
|
-
"@genesislcap/foundation-events": "14.
|
|
60
|
-
"@genesislcap/foundation-utils": "14.
|
|
61
|
-
"@genesislcap/foundation-zero": "14.
|
|
58
|
+
"@genesislcap/foundation-comms": "14.60.0",
|
|
59
|
+
"@genesislcap/foundation-events": "14.60.0",
|
|
60
|
+
"@genesislcap/foundation-utils": "14.60.0",
|
|
61
|
+
"@genesislcap/foundation-zero": "14.60.0",
|
|
62
62
|
"@microsoft/fast-colors": "^5.1.4",
|
|
63
63
|
"@microsoft/fast-components": "^2.21.3",
|
|
64
64
|
"@microsoft/fast-element": "^1.7.0",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
76
|
"customElements": "dist/custom-elements.json",
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "78e4c99a7097525e11e99ef7f058d5c464fa30ab"
|
|
78
78
|
}
|
package/test/e2e/pages/header.ts
CHANGED
|
@@ -39,7 +39,7 @@ export class HeaderPage {
|
|
|
39
39
|
|
|
40
40
|
// Other locators
|
|
41
41
|
this.connectionIndicator = this.navBar.locator(
|
|
42
|
-
'.connection-indicator-container[data-test-id="connection-indicator"]'
|
|
42
|
+
'.connection-indicator-container[data-test-id="connection-indicator"]',
|
|
43
43
|
);
|
|
44
44
|
this.userButton = this.navBar.locator('zero-button[data-test-id="user-button"]');
|
|
45
45
|
}
|