@sb1/ffe-feedback-react 2.0.45 → 3.0.1

package/README.md

@@ -12,11 +12,6 @@ npm install --save @sb1/ffe-feedback-react
 
 Full documentation is not yet available, but will be added to https://design.sparebank1.no/komponenter.
 
-## TypeScript definition files
-
-This component supports TypeScript - please update `index.d.ts` if you change any
-of the external methods or properties in this component.
-
 ## Development
 
 To start a local development server, run the following from the designsystem root folder:

package/es/Animation.js

@@ -0,0 +1,18 @@
+import lottie from 'lottie-web';
+import React, { useEffect, useRef } from 'react';
+import highFiveAnimation from './highFiveAnimation';
+export var Animation = function () {
+    var containerRef = useRef(null);
+    useEffect(function () {
+        if (containerRef.current) {
+            lottie.loadAnimation({
+                container: containerRef.current,
+                renderer: 'svg',
+                loop: false,
+                autoplay: true,
+                animationData: highFiveAnimation,
+            });
+        }
+    }, []);
+    return (React.createElement("div", { ref: containerRef, style: { width: '180px', height: '180px' } }));
+};

package/es/Feedback.js

@@ -0,0 +1,61 @@
+import React, { useState, useRef } from 'react';
+import { flushSync } from 'react-dom';
+import { Animation } from './Animation';
+import { texts } from './i18n/texts';
+import { FeedbackThumbs } from './FeedbackThumbs';
+import classNames from 'classnames';
+import { FeedbackExpanded } from './FeedbackExpanded';
+import { v4 as uuid } from 'uuid';
+export 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 = useRef();
+    var expandedRef = useRef();
+    var _d = useState(), feedbackThumbClicked = _d[0], setFeedbackThumbClicked = _d[1];
+    var _e = useState(false), expanded = _e[0], setExpanded = _e[1];
+    var _f = useState(false), feedbackSent = _f[0], setFeedbackSent = _f[1];
+    var headingId = useRef(uuid()).current;
+    var feedbackClassnames = classNames('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);
+        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;
+        flushSync(function () {
+            setFeedbackSent(true);
+        });
+        (_a = feedbackSentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        onFeedbackSend(feedbackText);
+    };
+    if (feedbackSent) {
+        return (React.createElement("div", { className: feedbackClassnames },
+            React.createElement("div", { className: "ffe-feedback__content" },
+                React.createElement("h".concat(headingLevel), {
+                    ref: feedbackSentRef,
+                    tabIndex: -1,
+                    className: 'ffe-h4',
+                }, texts[locale].FEEDBACK_SENT_HEADING),
+                React.createElement(Animation, null))));
+    }
+    if (expanded) {
+        return (React.createElement("div", { className: feedbackClassnames },
+            React.createElement("div", { className: "ffe-feedback__content" },
+                React.createElement("h".concat(headingLevel), { ref: expandedRef, tabIndex: -1, className: 'ffe-h5' }, feedbackThumbClicked === 'THUMB_UP'
+                    ? texts[locale].FEEDBACK_GOOD
+                    : texts[locale].FEEDBACK_IMPROVE),
+                React.createElement(FeedbackExpanded, { locale: locale, onSend: handleFeedbackSent, onCancel: function () { return setExpanded(false); }, contactLink: contactLink }))));
+    }
+    return (React.createElement("div", { className: feedbackClassnames },
+        React.createElement("div", { className: "ffe-feedback__content" },
+            React.createElement("h".concat(headingLevel), { id: headingId, className: 'ffe-h4' }, texts[locale].FEEDBACK_NOT_SENT_HEADING),
+            React.createElement(FeedbackThumbs, { onClick: handleThumbClicked, locale: locale, headingId: headingId }))));
+};

package/es/FeedbackExpanded.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Paragraph } from '@sb1/ffe-core-react';
+import { texts } from './i18n/texts';
+import { InputGroup, TextArea } from '@sb1/ffe-form-react';
+import { ActionButton, ButtonGroup, TertiaryButton, } from '@sb1/ffe-buttons-react';
+export var FeedbackExpanded = function (_a) {
+    var _b;
+    var locale = _a.locale, onSend = _a.onSend, onCancel = _a.onCancel, contactLink = _a.contactLink;
+    var _c = useState(), feedbackText = _c[0], setFeedbackText = _c[1];
+    var _d = 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[locale].FEEDBACK_SHORT);
+        return false;
+    };
+    var contactLinkElement = contactLink ? (React.createElement(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[locale].FEEDBACK_LINKTEXT)) : null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Paragraph, null,
+            texts[locale].FEEDBACK_ANSWER,
+            contactLinkElement && texts[locale].QUESTIONS,
+            contactLinkElement),
+        React.createElement(Paragraph, null, texts[locale].FEEDBACK_SENSITIVE),
+        React.createElement(InputGroup, { className: "ffe-feedback__textarea-container", fieldMessage: fieldMessage },
+            React.createElement(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[locale].FEEDBACK_IMPROVE })),
+        React.createElement(ButtonGroup, { className: "ffe-feedback__button-group" },
+            React.createElement(ActionButton, { onClick: function () {
+                    if (validateMessage() && feedbackText) {
+                        onSend(feedbackText);
+                    }
+                } }, texts[locale].FEEDBACK_BUTTON_SEND),
+            React.createElement(TertiaryButton, { onClick: onCancel }, texts[locale].FEEDBACK_BUTTON_CANCEL))));
+};

package/es/FeedbackThumbs.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { texts } from './i18n/texts';
+import { ThumbUp, ThumbUpFill, ThumbDown, ThumbDownFill } from './icons';
+export var FeedbackThumbs = function (_a) {
+    var locale = _a.locale, onClick = _a.onClick, headingId = _a.headingId;
+    return (React.createElement("div", null,
+        React.createElement("button", { "aria-label": texts[locale].ARIA_LABEL_THUMB_UP, "aria-describedby": headingId, className: "ffe-feedback__thumb", onClick: function () { return onClick('THUMB_UP'); }, type: "button" },
+            React.createElement(ThumbUp, { className: "ffe-feedback__thumb-icon" }),
+            React.createElement(ThumbUpFill, { className: "ffe-feedback__thumb-icon--fill" })),
+        React.createElement("button", { "aria-label": texts[locale].ARIA_LABEL_THUMB_DOWN, "aria-describedby": headingId, className: "ffe-feedback__thumb", onClick: function () { return onClick('THUMB_DOWN'); }, type: "button" },
+            React.createElement(ThumbDown, { className: "ffe-feedback__thumb-icon" }),
+            React.createElement(ThumbDownFill, { className: "ffe-feedback__thumb-icon--fill" }))));
+};