@fluid-topics/ft-in-product-help 1.0.58 → 1.0.60

package/build/ft-in-product-help.css.js

@@ -1,27 +1,27 @@
 import { css } from "lit";
 import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
 export const FtInProductHelpCssVariables = {
-    standardSizeWidth: FtCssVariableFactory.create("--ft-in-product-help-standard-width", "SIZE", "400px"),
-    standardSizeHeight: FtCssVariableFactory.create("--ft-in-product-help-standard-height", "SIZE", "630px"),
-    topPosition: FtCssVariableFactory.create("--ft-in-product-help-top", "SIZE", "unset"),
-    rightPosition: FtCssVariableFactory.create("--ft-in-product-help-right", "SIZE", "1rem"),
-    bottomPosition: FtCssVariableFactory.create("--ft-in-product-help-bottom", "SIZE", "1rem"),
-    leftPosition: FtCssVariableFactory.create("--ft-in-product-help-left", "SIZE", "unset"),
-    zIndex: FtCssVariableFactory.create("--ft-in-product-help-zindex", "NUMBER", "10"),
-    theaterSizeWidth: FtCssVariableFactory.create("--ft-in-product-help-theater-width", "SIZE", "90%"),
-    theaterSizeHeight: FtCssVariableFactory.create("--ft-in-product-help-theater-height", "SIZE", "60%"),
-    fullscreenSizeWidth: FtCssVariableFactory.create("--ft-in-product-help-fullscreen-width", "SIZE", "100%"),
-    fullscreenSizeHeight: FtCssVariableFactory.create("--ft-in-product-help-fullscreen-height", "SIZE", "100%"),
-    borderStyle: FtCssVariableFactory.create("--ft-in-product-help-border-style", "BORDER-STYLE", "solid"),
-    borderWidth: FtCssVariableFactory.create("--ft-in-product-help-border-width", "SIZE", "0"),
-    borderColor: FtCssVariableFactory.extend("--ft-in-product-help-border-color", designSystemVariables.colorPrimary),
-    borderRadius: FtCssVariableFactory.extend("--ft-in-product-help-border-radius", designSystemVariables.borderRadiusM),
-    shadow: FtCssVariableFactory.extend("--ft-in-product-help-shadow", designSystemVariables.elevation02),
-    topBarHeight: FtCssVariableFactory.create("--ft-in-product-help-top-bar-height", "SIZE", "28px"),
-    iconColor: FtCssVariableFactory.extend("--ft-in-product-help-icon-color", designSystemVariables.colorOnSurface),
-    iconGap: FtCssVariableFactory.create("--ft-in-product-help-icon-gap", "SIZE", "8px"),
-    tabletBreakpoint: FtCssVariableFactory.create("--ft-in-product-help-tablet-breakpoint", "SIZE", "768px"),
-    desktopBreakpoint: FtCssVariableFactory.create("--ft-in-product-help-desktop-breakpoint", "SIZE", "1280px"),
+    standardSizeWidth: FtCssVariableFactory.create("--ft-in-product-help-standard-width", "", "SIZE", "400px"),
+    standardSizeHeight: FtCssVariableFactory.create("--ft-in-product-help-standard-height", "", "SIZE", "630px"),
+    topPosition: FtCssVariableFactory.create("--ft-in-product-help-top", "", "SIZE", "unset"),
+    rightPosition: FtCssVariableFactory.create("--ft-in-product-help-right", "", "SIZE", "1rem"),
+    bottomPosition: FtCssVariableFactory.create("--ft-in-product-help-bottom", "", "SIZE", "1rem"),
+    leftPosition: FtCssVariableFactory.create("--ft-in-product-help-left", "", "SIZE", "unset"),
+    zIndex: FtCssVariableFactory.create("--ft-in-product-help-zindex", "", "NUMBER", "10"),
+    theaterSizeWidth: FtCssVariableFactory.create("--ft-in-product-help-theater-width", "", "SIZE", "90%"),
+    theaterSizeHeight: FtCssVariableFactory.create("--ft-in-product-help-theater-height", "", "SIZE", "60%"),
+    fullscreenSizeWidth: FtCssVariableFactory.create("--ft-in-product-help-fullscreen-width", "", "SIZE", "100%"),
+    fullscreenSizeHeight: FtCssVariableFactory.create("--ft-in-product-help-fullscreen-height", "", "SIZE", "100%"),
+    borderStyle: FtCssVariableFactory.create("--ft-in-product-help-border-style", "", "BORDER-STYLE", "solid"),
+    borderWidth: FtCssVariableFactory.create("--ft-in-product-help-border-width", "", "SIZE", "0"),
+    borderColor: FtCssVariableFactory.extend("--ft-in-product-help-border-color", "", designSystemVariables.colorPrimary),
+    borderRadius: FtCssVariableFactory.extend("--ft-in-product-help-border-radius", "", designSystemVariables.borderRadiusM),
+    shadow: FtCssVariableFactory.extend("--ft-in-product-help-shadow", "", designSystemVariables.elevation02),
+    topBarHeight: FtCssVariableFactory.create("--ft-in-product-help-top-bar-height", "", "SIZE", "28px"),
+    iconColor: FtCssVariableFactory.extend("--ft-in-product-help-icon-color", "", designSystemVariables.colorOnSurface),
+    iconGap: FtCssVariableFactory.create("--ft-in-product-help-icon-gap", "", "SIZE", "8px"),
+    tabletBreakpoint: FtCssVariableFactory.create("--ft-in-product-help-tablet-breakpoint", "", "SIZE", "768px"),
+    desktopBreakpoint: FtCssVariableFactory.create("--ft-in-product-help-desktop-breakpoint", "", "SIZE", "1280px"),
     colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
     colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
 };
@@ -75,6 +75,10 @@ export const styles = css `
         --ft-button-color: ${FtInProductHelpCssVariables.iconColor};
     }
 
+    .ft-in-product-help--home-button {
+        margin-right: auto;
+    }
+
     iframe {
         width: 100%;
         height: calc(100% - ${FtInProductHelpCssVariables.topBarHeight});

package/build/ft-in-product-help.d.ts

@@ -15,6 +15,10 @@ export declare class FtInProductHelp extends FtLitElement implements FtInProduct
     disableTheaterMode: boolean;
     fullscreenModeIcon: string;
     disableFullscreenMode: boolean;
+    enableHomeButton: boolean;
+    homeIcon: string;
+    enableOpenTabButton: boolean;
+    openTabIcon: string;
     iconVariant?: FtIconVariants;
     allowStandardMode: boolean;
     allowTheaterMode: boolean;
@@ -32,4 +36,5 @@ export declare class FtInProductHelp extends FtLitElement implements FtInProduct
     private isTablet;
     private isDesktop;
     navigateTo(path: string): void;
+    openTab(): void;
 }

package/build/ft-in-product-help.js

@@ -26,6 +26,10 @@ class FtInProductHelp extends FtLitElement {
         this.disableTheaterMode = false;
         this.fullscreenModeIcon = FtIcons.EXPAND_WIDE;
         this.disableFullscreenMode = false;
+        this.enableHomeButton = false;
+        this.homeIcon = FtIcons.HOME;
+        this.enableOpenTabButton = false;
+        this.openTabIcon = FtIcons.EXTLINK_LIGHT;
         this.allowStandardMode = true;
         this.allowTheaterMode = true;
         this.allowFullscreenMode = true;
@@ -45,12 +49,35 @@ class FtInProductHelp extends FtLitElement {
             <ft-size-watcher @change=${this.onViewportChange}></ft-size-watcher>
             <div class="${classMap(classes)}" part="container">
                 <div class="ft-in-product-help--top-bar" part="top-bar">
+                    ${this.enableHomeButton ? html `
+                        <ft-button icon="${this.homeIcon}"
+                                   class="ft-in-product-help--home-button"
+                                   dense
+                                   .iconVariant=${this.iconVariant}
+                                   part="button-home top-bar-button"
+                                   label="Back to homepage"
+                                   tooltipPosition="right"
+                                   @click=${() => this.navigateTo(this.portalUrl)}
+                        ></ft-button>
+                    ` : nothing}
+                    ${this.enableOpenTabButton ? html `
+                        <ft-button icon="${this.openTabIcon}"
+                                   dense
+                                   .iconVariant=${this.iconVariant}
+                                   part="button-new-tab top-bar-button"
+                                   label="Open in a new tab"
+                                   tooltipPosition="left"
+                                   @click=${this.openTab}
+                        ></ft-button>
+                    ` : nothing}
                     ${showFullscreenIcon ? html `
                         <ft-button icon="${this.fullscreenModeIcon}"
                                    class="${this.displayMode == FtInProductHelpMode.FULLSCREEN ? "ft-in-product-help--active-mode" : ""}"
                                    dense
                                    .iconVariant=${this.iconVariant}
                                    part="button-fullscreen top-bar-button"
+                                   label="Fullscreen mode"
+                                   tooltipPosition="left"
                                    @click=${() => this.setMode(FtInProductHelpMode.FULLSCREEN)}
                         ></ft-button>
                     ` : nothing}
@@ -60,6 +87,8 @@ class FtInProductHelp extends FtLitElement {
                                    dense
                                    .iconVariant=${this.iconVariant}
                                    part="button-theater top-bar-button"
+                                   label="Theater mode"
+                                   tooltipPosition="left"
                                    @click=${() => this.setMode(FtInProductHelpMode.THEATER)}
                         ></ft-button>
                     ` : nothing}
@@ -69,6 +98,8 @@ class FtInProductHelp extends FtLitElement {
                                    dense
                                    .iconVariant=${this.iconVariant}
                                    part="button-standard top-bar-button"
+                                   label="Standard mode"
+                                   tooltipPosition="left"
                                    @click=${() => this.setMode(FtInProductHelpMode.STANDARD)}
                         ></ft-button>
                     ` : nothing}
@@ -76,6 +107,8 @@ class FtInProductHelp extends FtLitElement {
                                dense
                                .iconVariant=${this.iconVariant}
                                part="button-close top-bar-button"
+                               label="Close"
+                               tooltipPosition="left"
                                @click=${this.close}
                     ></ft-button>
                 </div>
@@ -143,6 +176,9 @@ class FtInProductHelp extends FtLitElement {
     navigateTo(path) {
         this.iframe.contentWindow.postMessage({ navigateTo: path }, this.portalUrl);
     }
+    openTab() {
+        this.iframe.contentWindow.postMessage({ openTabToCurrentUrl: true }, this.portalUrl);
+    }
 }
 FtInProductHelp.elementDefinitions = {
     "ft-button": FtButton,
@@ -179,6 +215,18 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtInProductHelp.prototype, "disableFullscreenMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtInProductHelp.prototype, "enableHomeButton", void 0);
+__decorate([
+    property()
+], FtInProductHelp.prototype, "homeIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtInProductHelp.prototype, "enableOpenTabButton", void 0);
+__decorate([
+    property()
+], FtInProductHelp.prototype, "openTabIcon", void 0);
 __decorate([
     property()
 ], FtInProductHelp.prototype, "iconVariant", void 0);