@fluid-topics/ft-reader-feedback 0.3.55 → 0.3.57

package/build/ft-reader-feedback.css.d.ts

@@ -1,6 +1,12 @@
 export declare const FtReaderFeedbackCssVariables: {
     feedbackInputMinWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     ratedDateColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    sendFeedbackColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    sendFeedbackBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    filledRatingColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    emptyRatingColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    mainTitleFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    sectionTitleFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult;
 //# sourceMappingURL=ft-reader-feedback.css.d.ts.map

package/build/ft-reader-feedback.css.js

@@ -1,8 +1,17 @@
 import { css } from "lit";
-import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtButtonCssVariables } from "@fluid-topics/ft-button/build/ft-button.css";
+import { FtSwitchCssVariables } from "@fluid-topics/ft-switch/build/ft-switch.css";
+import { FtTypographyTitleCssVariables, FtTypographyTitleDenseCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
 export const FtReaderFeedbackCssVariables = {
     feedbackInputMinWidth: FtCssVariableFactory.create("--ft-reader-feedback-input-min-width", "SIZE", "300px"),
-    ratedDateColor: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system")
+    ratedDateColor: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
+    sendFeedbackColor: FtCssVariableFactory.extend("--ft-reader-feedback-send-feedback-color", designSystemVariables.colorOnPrimary),
+    sendFeedbackBackgroundColor: FtCssVariableFactory.extend("--ft-reader-feedback-send-feedback-background-color", designSystemVariables.colorPrimary),
+    filledRatingColor: FtCssVariableFactory.extend("--ft-reader-feedback-filled-rating-color", designSystemVariables.colorPrimary),
+    emptyRatingColor: FtCssVariableFactory.extend("--ft-reader-feedback-empty-rating-color", designSystemVariables.colorOnSurfaceMedium),
+    mainTitleFontSize: FtCssVariableFactory.external(FtTypographyTitleCssVariables.fontSize, "Typography"),
+    sectionTitleFontSize: FtCssVariableFactory.external(FtTypographyTitleDenseCssVariables.fontSize, "Typography"),
 };
 // language=CSS
 export const styles = css `
@@ -38,9 +47,9 @@ export const styles = css `
         display: flex;
         flex-direction: row;
         align-items: center;
+        margin-left: -6px;
     }
 
-
     .ft-reader-feedback--rating, .ft-reader-feedback--feedback {
         display: flex;
         flex-direction: column;
@@ -50,6 +59,17 @@ export const styles = css `
         margin-bottom: 8px;
     }
 
+    .ft-reader-feedback--rating {
+        ${setVariable(FtButtonCssVariables.color, FtReaderFeedbackCssVariables.emptyRatingColor)};
+        ${setVariable(FtButtonCssVariables.rippleColor, FtReaderFeedbackCssVariables.filledRatingColor)};
+        ${setVariable(FtSwitchCssVariables.textColor, FtReaderFeedbackCssVariables.emptyRatingColor)};
+        ${setVariable(FtSwitchCssVariables.selectedTextColor, FtReaderFeedbackCssVariables.filledRatingColor)};
+    }
+
+    .ft-reader-feedback--rating .ft-reader-feedback--active {
+        ${setVariable(FtButtonCssVariables.color, FtReaderFeedbackCssVariables.filledRatingColor)};
+    }
+
     .ft-reader-feedback--feedback {
         gap: 8px;
     }
@@ -64,6 +84,8 @@ export const styles = css `
 
     .ft-reader-feedback--send-feedback, .ft-reader-feedback--feedback-link {
         align-self: flex-end;
+        ${setVariable(FtButtonCssVariables.color, FtReaderFeedbackCssVariables.sendFeedbackColor)};
+        ${setVariable(FtButtonCssVariables.backgroundColor, FtReaderFeedbackCssVariables.sendFeedbackBackgroundColor)};
     }
 `;
 //# sourceMappingURL=ft-reader-feedback.css.js.map

package/build/ft-reader-feedback.js

@@ -87,7 +87,7 @@ export class FtReaderFeedback extends FtLitElement {
                 </div>
             `;
         }
-        return this.placeholderInEditor("Rating unavailable: " + (this.userHasRatingRole ? "no rating configured for this content" : "missing role RATING_USER"));
+        return this.placeholderInEditor("Rating unavailable: " + (this.userHasRatingRole ? "no rating configured for this content." : "missing role RATING_USER."));
     }
     renderRatingDate() {
         const ratingDate = this.ratingDate;
@@ -199,7 +199,7 @@ export class FtReaderFeedback extends FtLitElement {
                 </div>
             `;
         }
-        return this.placeholderInEditor("Feedback unavailable: missing role FEEDBACK_USER");
+        return this.placeholderInEditor("Feedback unavailable: missing role FEEDBACK_USER.");
     }
     sendFeedback() {
         this.dispatchEvent(new CustomEvent("send-feedback", { detail: this.feedbackInput.value }));
@@ -209,7 +209,7 @@ export class FtReaderFeedback extends FtLitElement {
             <div class="ft-reader-feedback--placeholder">
                 <ft-typography variant="caption">${message}</ft-typography>
                 <ft-tooltip position="left"
-                            text="This is a placeholder, it will not appear outside this designer.">
+                            text="This notice will not appear outside this designer.">
                     <ft-icon>INFO</ft-icon>
                 </ft-tooltip>
             </div>