@sb1/ffe-feedback-react 2.0.45 → 3.0.1

package/es/i18n/en.js

@@ -1,16 +1,16 @@
-export default {
-  ARIA_LABEL_THUMB_UP: 'Give thumbs up',
-  ARIA_LABEL_THUMB_DOWN: 'Give thumbs down',
-  FEEDBACK_NOT_SENT_HEADING: 'What do you think of this page? ',
-  FEEDBACK_SENT_HEADING: 'Thank you!',
-  FEEDBACK_BUTTON_SEND: 'Send feedback',
-  FEEDBACK_BUTTON_CANCEL: 'Cancel',
-  FEEDBACK_GOOD: 'What was good?',
-  FEEDBACK_IMPROVE: 'How can we improve?',
-  FEEDBACK_ANSWER: 'Your feedback will be used to improve this site and will not be replied.',
-  QUESTIONS: ' If you have questions, ',
-  FEEDBACK_LINKTEXT: 'contact customer services.',
-  FEEDBACK_SENSITIVE: 'Please do not send sensitive or personal information, for example: Health information, political affiliation, social security number, name, email or telephone number.',
-  FEEDBACK_SHORT: 'Feedback must be at least three characters.',
-  NATIVE_VIEW_HEADING: 'Customer service'
-};
+export var en = {
+    ARIA_LABEL_THUMB_UP: 'Give thumbs up',
+    ARIA_LABEL_THUMB_DOWN: 'Give thumbs down',
+    FEEDBACK_NOT_SENT_HEADING: 'What do you think of this page? ',
+    FEEDBACK_SENT_HEADING: 'Thank you!',
+    FEEDBACK_BUTTON_SEND: 'Send feedback',
+    FEEDBACK_BUTTON_CANCEL: 'Cancel',
+    FEEDBACK_GOOD: 'What was good?',
+    FEEDBACK_IMPROVE: 'How can we improve?',
+    FEEDBACK_ANSWER: 'Your feedback will be used to improve this site and will not be replied.',
+    QUESTIONS: ' If you have questions, ',
+    FEEDBACK_LINKTEXT: 'contact customer services.',
+    FEEDBACK_SENSITIVE: 'Please do not send sensitive or personal information, for example: Health information, political affiliation, social security number, name, email or telephone number.',
+    FEEDBACK_SHORT: 'Feedback must be at least three characters.',
+    NATIVE_VIEW_HEADING: 'Customer service',
+};

package/es/i18n/nb.js

@@ -1,16 +1,16 @@
-export default {
-  ARIA_LABEL_THUMB_UP: 'Gi tommel opp',
-  ARIA_LABEL_THUMB_DOWN: 'Gi tommel ned',
-  FEEDBACK_NOT_SENT_HEADING: 'Hva synes du om denne siden? ',
-  FEEDBACK_SENT_HEADING: 'Takk for tilbakemeldingen!',
-  FEEDBACK_BUTTON_SEND: 'Send tilbakemelding',
-  FEEDBACK_BUTTON_CANCEL: 'Avbryt',
-  FEEDBACK_GOOD: 'Hva var bra?',
-  FEEDBACK_IMPROVE: 'Hva kan vi gjøre bedre?',
-  FEEDBACK_ANSWER: 'Svaret ditt blir brukt til å forbedre denne siden og blir ikke besvart.',
-  QUESTIONS: ' Har du spørsmål, ',
-  FEEDBACK_LINKTEXT: 'kontakt kundeservice.',
-  FEEDBACK_SENSITIVE: 'Unngå å oppgi sensitiv eller personlig informasjon, for eksempel helseopplysninger, politisk tilhørighet, personnummer, navn, e-post eller telefonnummer.',
-  FEEDBACK_SHORT: 'Tilbakemeldingen må være på minst tre tegn.',
-  NATIVE_VIEW_HEADING: 'Kundeservice'
-};
+export var nb = {
+    ARIA_LABEL_THUMB_UP: 'Gi tommel opp',
+    ARIA_LABEL_THUMB_DOWN: 'Gi tommel ned',
+    FEEDBACK_NOT_SENT_HEADING: 'Hva synes du om denne siden? ',
+    FEEDBACK_SENT_HEADING: 'Takk for tilbakemeldingen!',
+    FEEDBACK_BUTTON_SEND: 'Send tilbakemelding',
+    FEEDBACK_BUTTON_CANCEL: 'Avbryt',
+    FEEDBACK_GOOD: 'Hva var bra?',
+    FEEDBACK_IMPROVE: 'Hva kan vi gjøre bedre?',
+    FEEDBACK_ANSWER: 'Svaret ditt blir brukt til å forbedre denne siden og blir ikke besvart.',
+    QUESTIONS: ' Har du spørsmål, ',
+    FEEDBACK_LINKTEXT: 'kontakt kundeservice.',
+    FEEDBACK_SENSITIVE: 'Unngå å oppgi sensitiv eller personlig informasjon, for eksempel helseopplysninger, politisk tilhørighet, personnummer, navn, e-post eller telefonnummer.',
+    FEEDBACK_SHORT: 'Tilbakemeldingen må være på minst tre tegn.',
+    NATIVE_VIEW_HEADING: 'Kundeservice',
+};

package/es/i18n/nn.js

@@ -1,16 +1,16 @@
-export default {
-  ARIA_LABEL_THUMB_UP: 'Gje tommel opp',
-  ARIA_LABEL_THUMB_DOWN: 'Gje tommel ned',
-  FEEDBACK_NOT_SENT_HEADING: 'Kva synest du om denne sida? ',
-  FEEDBACK_SENT_HEADING: 'Takk for tilbakemeldinga!',
-  FEEDBACK_BUTTON_SEND: 'Send tilbakemelding',
-  FEEDBACK_BUTTON_CANCEL: 'Avbryt',
-  FEEDBACK_GOOD: 'Kva var bra?',
-  FEEDBACK_IMPROVE: 'Kva kan vi gjere betre?',
-  FEEDBACK_ANSWER: 'Svaret ditt vert brukt til å betre denne sida og vert ikkje svart på.',
-  QUESTIONS: ' Har du spørsmål, ',
-  FEEDBACK_LINKTEXT: 'kontakt kundetenesta.',
-  FEEDBACK_SENSITIVE: 'Unngå å oppgje sensitiv eller personleg informasjon, til dømes helseopplysingar, politisk tilhøyrsel, personnummer, namn, e-post eller telefonnummer.',
-  FEEDBACK_SHORT: 'Tilbakemeldinga må vere minst tre teikn.',
-  NATIVE_VIEW_HEADING: 'Kundetenest'
-};
+export var nn = {
+    ARIA_LABEL_THUMB_UP: 'Gje tommel opp',
+    ARIA_LABEL_THUMB_DOWN: 'Gje tommel ned',
+    FEEDBACK_NOT_SENT_HEADING: 'Kva synest du om denne sida? ',
+    FEEDBACK_SENT_HEADING: 'Takk for tilbakemeldinga!',
+    FEEDBACK_BUTTON_SEND: 'Send tilbakemelding',
+    FEEDBACK_BUTTON_CANCEL: 'Avbryt',
+    FEEDBACK_GOOD: 'Kva var bra?',
+    FEEDBACK_IMPROVE: 'Kva kan vi gjere betre?',
+    FEEDBACK_ANSWER: 'Svaret ditt vert brukt til å betre denne sida og vert ikkje svart på.',
+    QUESTIONS: ' Har du spørsmål, ',
+    FEEDBACK_LINKTEXT: 'kontakt kundetenesta.',
+    FEEDBACK_SENSITIVE: 'Unngå å oppgje sensitiv eller personleg informasjon, til dømes helseopplysingar, politisk tilhøyrsel, personnummer, namn, e-post eller telefonnummer.',
+    FEEDBACK_SHORT: 'Tilbakemeldinga må vere minst tre teikn.',
+    NATIVE_VIEW_HEADING: 'Kundetenest',
+};

package/es/i18n/texts.js

@@ -0,0 +1,8 @@
+import { en } from './en';
+import { nn } from './nn';
+import { nb } from './nb';
+export var texts = {
+    nb: nb,
+    nn: nn,
+    en: en,
+};

package/es/icons/ThumbDown.js

@@ -0,0 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+export var ThumbDown = function (props) { return (React.createElement("svg", __assign({ "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 48, height: 48, viewBox: "0 -960 960 960" }, props),
+    React.createElement("path", { d: "M105-328q-24 0-42-18t-18-42v-81.839Q45-477 43.5-484.5T45-499l126-290q8.878-21.25 29.595-36.125T244-840h444v512L463-90q-13.6 14-32.187 16.5T395-81q-17-10-25.5-27.5t-4.2-36.5L404-328zm523-25v-427H231L105-481v93h373l-53 249zm193-487q24.75 0 42.375 17.625T881-780v392q0 24.75-17.625 42.375T821-328H688v-60h133v-392H688v-60zm-193 60v427z" }))); };

package/es/icons/ThumbDownFill.js

@@ -0,0 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+export var ThumbDownFill = function (props) { return (React.createElement("svg", __assign({ "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 48, height: 48, viewBox: "0 -960 960 960" }, props),
+    React.createElement("path", { d: "M239-840h467v512L428-40l-33-26q-11-8-14.5-18t-3.5-23v-10l45-211H100q-23 0-41.5-18.5T40-388v-82q0-11 2.5-25.5T50-521l116-268q9-21 29.5-36t43.5-15m527 512v-512h114v512z" }))); };

package/es/icons/ThumbUp.js

@@ -0,0 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+export var ThumbUp = function (props) { return (React.createElement("svg", __assign({ "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 48, height: 48, viewBox: "0 -960 960 960" }, props),
+    React.createElement("path", { d: "M855-632q24 0 42 18t18 42v81.839q0 7.161 1.5 14.661T915-461L789-171q-8.878 21.25-29.595 36.125T716-120H272v-512l225-238q13.6-14 32.187-16.5T565-879q17 10 25.5 27.5t4.2 36.5L556-632zm-523 25v427h397l126-299v-93H482l53-249zM139-120q-24.75 0-42.375-17.625T79-180v-392q0-24.75 17.625-42.375T139-632h133v60H139v392h133v60zm193-60v-427z" }))); };

package/es/icons/index.js

@@ -1,4 +1,4 @@
-export { default as ThumbUp } from './thumb-up';
-export { default as ThumbUpFill } from './thumb-up-fill';
-export { default as ThumbDown } from './thumb-down';
-export { default as ThumbDownFill } from './thumb-down-fill';
+export { ThumbUp } from './ThumbUp';
+export { ThumbUpFill } from './thumbUpFill';
+export { ThumbDown } from './ThumbDown';
+export { ThumbDownFill } from './ThumbDownFill';

package/es/icons/thumbUpFill.js

@@ -0,0 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+export var ThumbUpFill = function (props) { return (React.createElement("svg", __assign({ "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 48, height: 48, viewBox: "0 -960 960 960" }, props),
+    React.createElement("path", { d: "M860-632q23 0 41.5 18.5T920-572v82q0 11-2.5 25.5T910-439L794-171q-9 21-29.5 36T721-120H314q-25 0-42.5-17.5T254-180v-428q0-11 4.5-22t12.5-19l207-218q14-14 33.5-17t36.5 7 25.5 28 4.5 37l-38 180zM137-120q-23 0-40-17t-17-40v-398q0-23 17-40t40-17 40 17 17 40v398q0 23-17 40t-40 17" }))); };

package/es/index.js

@@ -1,4 +1 @@
-import Feedback from './feedback';
-import { Thumbs } from './feedback-thumbs';
-export { Thumbs };
-export default Feedback;
+export { Feedback } from './Feedback';

package/lib/Animation.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Animation = void 0;
+var lottie_web_1 = __importDefault(require("lottie-web"));
+var react_1 = __importStar(require("react"));
+var highFiveAnimation_1 = __importDefault(require("./highFiveAnimation"));
+var Animation = function () {
+    var containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (containerRef.current) {
+            lottie_web_1.default.loadAnimation({
+                container: containerRef.current,
+                renderer: 'svg',
+                loop: false,
+                autoplay: true,
+                animationData: highFiveAnimation_1.default,
+            });
+        }
+    }, []);
+    return (react_1.default.createElement("div", { ref: containerRef, style: { width: '180px', height: '180px' } }));
+};
+exports.Animation = Animation;

package/lib/Feedback.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Feedback = void 0;
+var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
+var Animation_1 = require("./Animation");
+var texts_1 = require("./i18n/texts");
+var FeedbackThumbs_1 = require("./FeedbackThumbs");
+var classnames_1 = __importDefault(require("classnames"));
+var FeedbackExpanded_1 = require("./FeedbackExpanded");
+var uuid_1 = require("uuid");
+var Feedback = function (_a) {
+    var _b;
+    var headingLevel = _a.headingLevel, _c = _a.locale, locale = _c === void 0 ? 'nb' : _c, onThumbClick = _a.onThumbClick, onFeedbackSend = _a.onFeedbackSend, bgColor = _a.bgColor, bgDarkmodeColor = _a.bgDarkmodeColor, contactLink = _a.contactLink;
+    var feedbackSentRef = (0, react_1.useRef)();
+    var expandedRef = (0, react_1.useRef)();
+    var _d = (0, react_1.useState)(), feedbackThumbClicked = _d[0], setFeedbackThumbClicked = _d[1];
+    var _e = (0, react_1.useState)(false), expanded = _e[0], setExpanded = _e[1];
+    var _f = (0, react_1.useState)(false), feedbackSent = _f[0], setFeedbackSent = _f[1];
+    var headingId = (0, react_1.useRef)((0, uuid_1.v4)()).current;
+    var feedbackClassnames = (0, classnames_1.default)('ffe-feedback', (_b = {},
+        _b["ffe-feedback--bg-".concat(bgColor)] = bgColor,
+        _b["ffe-feedback--dm-bg-".concat(bgDarkmodeColor)] = bgDarkmodeColor,
+        _b));
+    var handleThumbClicked = function (thumb) {
+        var _a;
+        setFeedbackThumbClicked(thumb);
+        (0, react_dom_1.flushSync)(function () {
+            setExpanded(function (prevState) { return !prevState; });
+        });
+        (_a = expandedRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        onThumbClick(thumb);
+    };
+    var handleFeedbackSent = function (feedbackText) {
+        var _a;
+        (0, react_dom_1.flushSync)(function () {
+            setFeedbackSent(true);
+        });
+        (_a = feedbackSentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        onFeedbackSend(feedbackText);
+    };
+    if (feedbackSent) {
+        return (react_1.default.createElement("div", { className: feedbackClassnames },
+            react_1.default.createElement("div", { className: "ffe-feedback__content" },
+                react_1.default.createElement("h".concat(headingLevel), {
+                    ref: feedbackSentRef,
+                    tabIndex: -1,
+                    className: 'ffe-h4',
+                }, texts_1.texts[locale].FEEDBACK_SENT_HEADING),
+                react_1.default.createElement(Animation_1.Animation, null))));
+    }
+    if (expanded) {
+        return (react_1.default.createElement("div", { className: feedbackClassnames },
+            react_1.default.createElement("div", { className: "ffe-feedback__content" },
+                react_1.default.createElement("h".concat(headingLevel), { ref: expandedRef, tabIndex: -1, className: 'ffe-h5' }, feedbackThumbClicked === 'THUMB_UP'
+                    ? texts_1.texts[locale].FEEDBACK_GOOD
+                    : texts_1.texts[locale].FEEDBACK_IMPROVE),
+                react_1.default.createElement(FeedbackExpanded_1.FeedbackExpanded, { locale: locale, onSend: handleFeedbackSent, onCancel: function () { return setExpanded(false); }, contactLink: contactLink }))));
+    }
+    return (react_1.default.createElement("div", { className: feedbackClassnames },
+        react_1.default.createElement("div", { className: "ffe-feedback__content" },
+            react_1.default.createElement("h".concat(headingLevel), { id: headingId, className: 'ffe-h4' }, texts_1.texts[locale].FEEDBACK_NOT_SENT_HEADING),
+            react_1.default.createElement(FeedbackThumbs_1.FeedbackThumbs, { onClick: handleThumbClicked, locale: locale, headingId: headingId }))));
+};
+exports.Feedback = Feedback;

package/lib/FeedbackExpanded.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedbackExpanded = void 0;
+var react_1 = __importStar(require("react"));
+var ffe_core_react_1 = require("@sb1/ffe-core-react");
+var texts_1 = require("./i18n/texts");
+var ffe_form_react_1 = require("@sb1/ffe-form-react");
+var ffe_buttons_react_1 = require("@sb1/ffe-buttons-react");
+var FeedbackExpanded = function (_a) {
+    var _b;
+    var locale = _a.locale, onSend = _a.onSend, onCancel = _a.onCancel, contactLink = _a.contactLink;
+    var _c = (0, react_1.useState)(), feedbackText = _c[0], setFeedbackText = _c[1];
+    var _d = (0, react_1.useState)(), fieldMessage = _d[0], setFieldMessage = _d[1];
+    var validateMessage = function () {
+        if (feedbackText && (feedbackText === null || feedbackText === void 0 ? void 0 : feedbackText.length) >= 3) {
+            setFieldMessage(undefined);
+            return true;
+        }
+        setFieldMessage(texts_1.texts[locale].FEEDBACK_SHORT);
+        return false;
+    };
+    var contactLinkElement = contactLink ? (react_1.default.createElement(ffe_buttons_react_1.TertiaryButton, { as: "a", href: contactLink.url, className: "ffe-feedback__link-button", onClick: contactLink === null || contactLink === void 0 ? void 0 : contactLink.onClick }, (_b = contactLink.linkText) !== null && _b !== void 0 ? _b : texts_1.texts[locale].FEEDBACK_LINKTEXT)) : null;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ffe_core_react_1.Paragraph, null,
+            texts_1.texts[locale].FEEDBACK_ANSWER,
+            contactLinkElement && texts_1.texts[locale].QUESTIONS,
+            contactLinkElement),
+        react_1.default.createElement(ffe_core_react_1.Paragraph, null, texts_1.texts[locale].FEEDBACK_SENSITIVE),
+        react_1.default.createElement(ffe_form_react_1.InputGroup, { className: "ffe-feedback__textarea-container", fieldMessage: fieldMessage },
+            react_1.default.createElement(ffe_form_react_1.TextArea, { "data-testid": "feedbackTextArea", onChange: function (event) { return setFeedbackText(event.target.value); }, value: feedbackText, rows: 6, maxLength: 1000, id: "textarea-feedback", onBlur: validateMessage, title: texts_1.texts[locale].FEEDBACK_IMPROVE })),
+        react_1.default.createElement(ffe_buttons_react_1.ButtonGroup, { className: "ffe-feedback__button-group" },
+            react_1.default.createElement(ffe_buttons_react_1.ActionButton, { onClick: function () {
+                    if (validateMessage() && feedbackText) {
+                        onSend(feedbackText);
+                    }
+                } }, texts_1.texts[locale].FEEDBACK_BUTTON_SEND),
+            react_1.default.createElement(ffe_buttons_react_1.TertiaryButton, { onClick: onCancel }, texts_1.texts[locale].FEEDBACK_BUTTON_CANCEL))));
+};
+exports.FeedbackExpanded = FeedbackExpanded;

package/lib/FeedbackThumbs.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedbackThumbs = void 0;
+var react_1 = __importDefault(require("react"));
+var texts_1 = require("./i18n/texts");
+var icons_1 = require("./icons");
+var FeedbackThumbs = function (_a) {
+    var locale = _a.locale, onClick = _a.onClick, headingId = _a.headingId;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("button", { "aria-label": texts_1.texts[locale].ARIA_LABEL_THUMB_UP, "aria-describedby": headingId, className: "ffe-feedback__thumb", onClick: function () { return onClick('THUMB_UP'); }, type: "button" },
+            react_1.default.createElement(icons_1.ThumbUp, { className: "ffe-feedback__thumb-icon" }),
+            react_1.default.createElement(icons_1.ThumbUpFill, { className: "ffe-feedback__thumb-icon--fill" })),
+        react_1.default.createElement("button", { "aria-label": texts_1.texts[locale].ARIA_LABEL_THUMB_DOWN, "aria-describedby": headingId, className: "ffe-feedback__thumb", onClick: function () { return onClick('THUMB_DOWN'); }, type: "button" },
+            react_1.default.createElement(icons_1.ThumbDown, { className: "ffe-feedback__thumb-icon" }),
+            react_1.default.createElement(icons_1.ThumbDownFill, { className: "ffe-feedback__thumb-icon--fill" }))));
+};
+exports.FeedbackThumbs = FeedbackThumbs;