@webority/insights-react 0.88.1 → 0.90.0

package/dist/guidance.json

@@ -0,0 +1,46 @@
+{
+  "format": "webority-guidance/1",
+  "package": {
+    "name": "@webority/insights-react",
+    "version": "0.90.0"
+  },
+  "components": [
+    {
+      "name": "FeedbackButton",
+      "usage": {
+        "when": [
+          "A portal lets a person send a free comment from any page.",
+          "The comment goes with the page it was written on, unless pagePath names another page."
+        ],
+        "whenNot": [],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The button is a native button that opens the drawer, a dialog named by its title.",
+          "The comment box takes the drawer title as its accessible name.",
+          "Send stays disabled while the comment is empty or only spaces.",
+          "The thanks message is a status region."
+        ]
+      }
+    },
+    {
+      "name": "NpsPrompt",
+      "usage": {
+        "when": [
+          "A portal asks the one question of how likely a person is to recommend the product.",
+          "It asks once per mount, and only when the server says the question is due.",
+          "Send posts the score and an optional comment; Not now is a permanent answer the server records."
+        ],
+        "whenNot": [],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The score scale is a radio group named by the question, with one control per score.",
+          "The comment box appears only after a score is chosen.",
+          "Send stays disabled until a score is chosen.",
+          "The thanks message is a status region."
+        ]
+      }
+    }
+  ]
+}

package/dist/types/FeedbackButton.d.ts

@@ -3,12 +3,12 @@
  * page path, unless `pagePath` is given.
  *
  * @param {object} props
- * @param {string} [props.label="Feedback"] The button text.
- * @param {string} [props.title="Send us feedback"] The drawer's heading.
- * @param {string} [props.placeholder="Tell us what works and what does not"]
- * @param {string} [props.sendLabel="Send"]
- * @param {string} [props.thanks="Thanks, we read every message."]
- * @param {string|null} [props.pagePath] The page the comment is about. Defaults to the current path, read when sent.
+ * @param {string} [props.label]
+ * @param {string} [props.title]
+ * @param {string} [props.placeholder]
+ * @param {string} [props.sendLabel]
+ * @param {string} [props.thanks]
+ * @param {string|null} [props.pagePath]
  */
 export default function FeedbackButton({ label, title, placeholder, sendLabel, thanks, pagePath, }: {
     label?: string;

package/dist/types/FeedbackButton.meta.d.ts

@@ -0,0 +1,66 @@
+export declare const meta: {
+    readonly name: "FeedbackButton";
+    readonly marker: any;
+    readonly platforms: readonly ["web"];
+    readonly acceptsChildren: false;
+    readonly props: {
+        readonly label: {
+            readonly type: "string";
+            readonly default: "Feedback";
+            readonly description: "The text on the button that opens the drawer.";
+        };
+        readonly title: {
+            readonly type: "string";
+            readonly default: "Send us feedback";
+            readonly description: "The drawer's heading. It also names the comment box.";
+        };
+        readonly placeholder: {
+            readonly type: "string";
+            readonly default: "Tell us what works and what does not";
+            readonly description: "The hint shown in the empty comment box.";
+        };
+        readonly sendLabel: {
+            readonly type: "string";
+            readonly default: "Send";
+            readonly description: "The text on the button that sends the comment.";
+        };
+        readonly thanks: {
+            readonly type: "string";
+            readonly default: "Thanks, we read every message.";
+            readonly description: "The message shown in the drawer after the comment is sent.";
+        };
+        readonly pagePath: {
+            readonly type: "string";
+            readonly description: "The page the comment is about. It defaults to the current path, read when the comment is sent. Null is accepted.";
+        };
+    };
+    readonly omit: readonly [];
+    readonly examples: readonly [{
+        readonly id: "FeedbackButton";
+        readonly title: "Default";
+        readonly props: {};
+    }, {
+        readonly id: "FeedbackButton.pagePath";
+        readonly title: "Fixed page";
+        readonly props: {
+            readonly pagePath: "/billing";
+        };
+    }, {
+        readonly id: "FeedbackButton.labels";
+        readonly title: "Custom labels";
+        readonly props: {
+            readonly label: "Give feedback";
+            readonly title: "Tell us more";
+            readonly placeholder: "What should change?";
+            readonly sendLabel: "Post";
+            readonly thanks: "Got it.";
+        };
+    }];
+    readonly usage: {
+        readonly when: readonly ["A portal lets a person send a free comment from any page.", "The comment goes with the page it was written on, unless pagePath names another page."];
+        readonly whenNot: readonly [];
+        readonly do: readonly [];
+        readonly dont: readonly [];
+        readonly a11y: readonly ["The button is a native button that opens the drawer, a dialog named by its title.", "The comment box takes the drawer title as its accessible name.", "Send stays disabled while the comment is empty or only spaces.", "The thanks message is a status region."];
+    };
+};

package/dist/types/NpsPrompt.d.ts

@@ -4,13 +4,13 @@
  * answer the server records, so the question does not come back.
  *
  * @param {object} props
- * @param {string} [props.question="How likely are you to recommend us to a colleague?"]
- * @param {string} [props.lowLabel="Not likely"]
- * @param {string} [props.highLabel="Very likely"]
- * @param {string} [props.commentLabel="What is the main reason for your score? (optional)"]
- * @param {string} [props.sendLabel="Send"]
- * @param {string} [props.notNowLabel="Not now"]
- * @param {string} [props.thanks="Thanks for your feedback."]
+ * @param {string} [props.question]
+ * @param {string} [props.lowLabel]
+ * @param {string} [props.highLabel]
+ * @param {string} [props.commentLabel]
+ * @param {string} [props.sendLabel]
+ * @param {string} [props.notNowLabel]
+ * @param {string} [props.thanks]
  */
 export default function NpsPrompt({ question, lowLabel, highLabel, commentLabel, sendLabel, notNowLabel, thanks, }: {
     question?: string;

package/dist/types/NpsPrompt.meta.d.ts

@@ -0,0 +1,68 @@
+export declare const meta: {
+    readonly name: "NpsPrompt";
+    readonly marker: any;
+    readonly platforms: readonly ["web"];
+    readonly acceptsChildren: false;
+    readonly props: {
+        readonly question: {
+            readonly type: "string";
+            readonly default: "How likely are you to recommend us to a colleague?";
+            readonly description: "The question asked above the score scale.";
+        };
+        readonly lowLabel: {
+            readonly type: "string";
+            readonly default: "Not likely";
+            readonly description: "The label under the lowest score.";
+        };
+        readonly highLabel: {
+            readonly type: "string";
+            readonly default: "Very likely";
+            readonly description: "The label under the highest score.";
+        };
+        readonly commentLabel: {
+            readonly type: "string";
+            readonly default: "What is the main reason for your score? (optional)";
+            readonly description: "The label of the optional comment box that appears once a score is chosen.";
+        };
+        readonly sendLabel: {
+            readonly type: "string";
+            readonly default: "Send";
+            readonly description: "The text on the button that sends the score and comment.";
+        };
+        readonly notNowLabel: {
+            readonly type: "string";
+            readonly default: "Not now";
+            readonly description: "The text on the button that dismisses the question for good.";
+        };
+        readonly thanks: {
+            readonly type: "string";
+            readonly default: "Thanks for your feedback.";
+            readonly description: "The message shown after the score is sent.";
+        };
+    };
+    readonly omit: readonly [];
+    readonly examples: readonly [{
+        readonly id: "NpsPrompt";
+        readonly title: "Default";
+        readonly props: {};
+    }, {
+        readonly id: "NpsPrompt.labels";
+        readonly title: "Custom labels";
+        readonly props: {
+            readonly question: "Would you recommend us?";
+            readonly lowLabel: "Never";
+            readonly highLabel: "Always";
+            readonly commentLabel: "Why?";
+            readonly sendLabel: "Go";
+            readonly notNowLabel: "Later";
+            readonly thanks: "Cheers.";
+        };
+    }];
+    readonly usage: {
+        readonly when: readonly ["A portal asks the one question of how likely a person is to recommend the product.", "It asks once per mount, and only when the server says the question is due.", "Send posts the score and an optional comment; Not now is a permanent answer the server records."];
+        readonly whenNot: readonly [];
+        readonly do: readonly [];
+        readonly dont: readonly [];
+        readonly a11y: readonly ["The score scale is a radio group named by the question, with one control per score.", "The comment box appears only after a score is chosen.", "Send stays disabled until a score is chosen.", "The thanks message is a status region."];
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/insights-react",
-  "version": "0.88.1",
+  "version": "0.90.0",
   "description": "Webority product feedback for React portals: the NPS question and a feedback button that post to the product's Webority.Insights feedback API, built on @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -22,7 +22,8 @@
       "types": "./dist/types/index.d.ts",
       "default": "./dist/insights-react.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./guidance.json": "./dist/guidance.json"
   },
   "sideEffects": false,
   "peerDependencies": {
@@ -30,7 +31,7 @@
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^19.0.0",
-    "@webority/ui-react": "0.88.1"
+    "@webority/ui-react": "0.90.0"
   },
   "devDependencies": {
     "@testing-library/dom": "10.4.2",
@@ -48,10 +49,11 @@
     "typescript": "^7.0.2",
     "vite": "^8.0.12",
     "vitest": "5.0.1",
-    "@webority/ui-react": "0.88.1"
+    "@webority/canvas-kit": "0.90.0",
+    "@webority/ui-react": "0.90.0"
   },
   "scripts": {
-    "build": "vite build && tsc -p tsconfig.json",
+    "build": "vite build && tsc -p tsconfig.json && node ../canvas-kit/dist/cli.js guidance --config canvas-kit.json --out dist/guidance.json",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"