@sb1/ffe-feedback-react 100.12.3 → 101.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Feedback.js +23 -26
- package/es/FeedbackExpanded.js +9 -12
- package/es/FeedbackThumbs.js +5 -6
- package/es/HighFive.js +1 -1
- package/es/i18n/en.js +1 -1
- package/es/i18n/nb.js +1 -1
- package/es/i18n/nn.js +1 -1
- package/es/i18n/texts.js +4 -4
- package/lib/Feedback.js +30 -33
- package/lib/FeedbackExpanded.js +14 -17
- package/lib/FeedbackThumbs.js +9 -10
- package/lib/HighFive.js +2 -2
- package/lib/i18n/texts.js +3 -3
- package/package.json +10 -10
package/es/Feedback.js
CHANGED
|
@@ -5,29 +5,27 @@ import { FeedbackThumbs } from './FeedbackThumbs';
|
|
|
5
5
|
import classNames from 'classnames';
|
|
6
6
|
import { FeedbackExpanded } from './FeedbackExpanded';
|
|
7
7
|
import { HighFive } from './HighFive';
|
|
8
|
-
export
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
_b), className);
|
|
20
|
-
var handleThumbClicked = function (thumb) {
|
|
8
|
+
export const Feedback = ({ headingLevel = 4, headingLookLike, locale = 'nb', onThumbClick, onFeedbackSend, onFinish, bgColor, contactLink, texts, className, includeConsent = false, }) => {
|
|
9
|
+
var _a;
|
|
10
|
+
const feedbackSentRef = useRef(null);
|
|
11
|
+
const expandedRef = useRef(null);
|
|
12
|
+
const [expanded, setExpanded] = useState(false);
|
|
13
|
+
const [feedbackSent, setFeedbackSent] = useState(false);
|
|
14
|
+
const headingId = useId();
|
|
15
|
+
const feedbackClassnames = classNames('ffe-feedback', {
|
|
16
|
+
[`ffe-feedback--bg-${bgColor}`]: bgColor,
|
|
17
|
+
}, className);
|
|
18
|
+
const handleThumbClicked = (thumb) => {
|
|
21
19
|
var _a;
|
|
22
|
-
flushSync(
|
|
20
|
+
flushSync(() => {
|
|
23
21
|
setExpanded(true);
|
|
24
22
|
});
|
|
25
23
|
(_a = expandedRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
26
24
|
onThumbClick(thumb);
|
|
27
25
|
};
|
|
28
|
-
|
|
26
|
+
const handleFeedbackSent = (feedbackText, consentGiven) => {
|
|
29
27
|
var _a;
|
|
30
|
-
flushSync(
|
|
28
|
+
flushSync(() => {
|
|
31
29
|
setFeedbackSent(true);
|
|
32
30
|
});
|
|
33
31
|
(_a = feedbackSentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -38,15 +36,14 @@ export var Feedback = function (_a) {
|
|
|
38
36
|
onFinish();
|
|
39
37
|
}
|
|
40
38
|
};
|
|
41
|
-
|
|
42
|
-
var _a;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
tabIndex: tabIndex,
|
|
39
|
+
const renderHeading = (level, text, options) => {
|
|
40
|
+
var _a, _b;
|
|
41
|
+
const { ref, tabIndex, id, textCenter } = options || {};
|
|
42
|
+
const headingClassName = classNames(`ffe-h${(_a = options === null || options === void 0 ? void 0 : options.lookLike) !== null && _a !== void 0 ? _a : level}`, { [`ffe-h${(_b = options === null || options === void 0 ? void 0 : options.lookLike) !== null && _b !== void 0 ? _b : level}--text-center`]: textCenter }, 'ffe-feedback__heading');
|
|
43
|
+
return React.createElement(`h${level}`, {
|
|
44
|
+
ref,
|
|
45
|
+
id,
|
|
46
|
+
tabIndex,
|
|
50
47
|
className: headingClassName,
|
|
51
48
|
}, text);
|
|
52
49
|
};
|
|
@@ -72,7 +69,7 @@ export var Feedback = function (_a) {
|
|
|
72
69
|
}
|
|
73
70
|
return (React.createElement("div", { className: feedbackClassnames },
|
|
74
71
|
React.createElement("div", { className: "ffe-feedback__content" },
|
|
75
|
-
renderHeading(headingLevel, (
|
|
72
|
+
renderHeading(headingLevel, (_a = texts === null || texts === void 0 ? void 0 : texts.feedbackNotSentHeading) !== null && _a !== void 0 ? _a : txt[locale].FEEDBACK_NOT_SENT_HEADING, {
|
|
76
73
|
id: headingId,
|
|
77
74
|
textCenter: true,
|
|
78
75
|
lookLike: headingLookLike,
|
package/es/FeedbackExpanded.js
CHANGED
|
@@ -3,28 +3,25 @@ import { LinkText, Paragraph } from '@sb1/ffe-core-react';
|
|
|
3
3
|
import { txt } from './i18n/texts';
|
|
4
4
|
import { InputGroup, TextArea, Checkbox } from '@sb1/ffe-form-react';
|
|
5
5
|
import { ActionButton, ButtonGroup, TertiaryButton, } from '@sb1/ffe-buttons-react';
|
|
6
|
-
export
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var contactLinkElement = contactLink ? (React.createElement(LinkText, { 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 : txt[locale].FEEDBACK_LINK_TEXT)) : null;
|
|
6
|
+
export const FeedbackExpanded = ({ locale, handleFeedback, contactLink, includeConsent = false, }) => {
|
|
7
|
+
var _a;
|
|
8
|
+
const [feedbackText, setFeedbackText] = useState();
|
|
9
|
+
const [consentGiven, setConsentGiven] = useState(false);
|
|
10
|
+
const contactLinkElement = contactLink ? (React.createElement(LinkText, { href: contactLink.url, className: "ffe-feedback__link-button", onClick: contactLink === null || contactLink === void 0 ? void 0 : contactLink.onClick }, (_a = contactLink.linkText) !== null && _a !== void 0 ? _a : txt[locale].FEEDBACK_LINK_TEXT)) : null;
|
|
12
11
|
return (React.createElement(React.Fragment, null,
|
|
13
12
|
React.createElement(Paragraph, null,
|
|
14
13
|
includeConsent ? txt[locale].FEEDBACK_ANSWER_INCLUDE_CONSENT : txt[locale].FEEDBACK_ANSWER,
|
|
15
14
|
contactLinkElement && txt[locale].QUESTIONS,
|
|
16
15
|
contactLinkElement),
|
|
17
16
|
React.createElement(InputGroup, { className: "ffe-feedback__textarea-container", label: txt[locale].FEEDBACK_IMPROVE, description: txt[locale].FEEDBACK_SENSITIVE },
|
|
18
|
-
React.createElement(TextArea, { "data-testid": "feedbackTextArea", onChange:
|
|
17
|
+
React.createElement(TextArea, { "data-testid": "feedbackTextArea", onChange: event => setFeedbackText(event.target.value), value: feedbackText, rows: 6, maxLength: 1000, className: "ffe-feedback__textarea" })),
|
|
19
18
|
includeConsent && (React.createElement("div", { className: "ffe-feedback__consent" },
|
|
20
|
-
React.createElement(Checkbox, { checked: consentGiven, onChange:
|
|
21
|
-
return setConsentGiven(event.target.checked);
|
|
22
|
-
} }, txt[locale].FEEDBACK_CONSENT))),
|
|
19
|
+
React.createElement(Checkbox, { checked: consentGiven, onChange: event => setConsentGiven(event.target.checked) }, txt[locale].FEEDBACK_CONSENT))),
|
|
23
20
|
React.createElement(ButtonGroup, { className: "ffe-feedback__button-group", ariaLabel: txt[locale].FEEDBACK_BUTTON_GROUP, thin: true },
|
|
24
|
-
React.createElement(ActionButton, { onClick:
|
|
21
|
+
React.createElement(ActionButton, { onClick: () => {
|
|
25
22
|
if (feedbackText) {
|
|
26
23
|
handleFeedback(feedbackText, includeConsent ? consentGiven : undefined);
|
|
27
24
|
}
|
|
28
25
|
} }, txt[locale].FEEDBACK_BUTTON_SEND),
|
|
29
|
-
React.createElement(TertiaryButton, { onClick:
|
|
26
|
+
React.createElement(TertiaryButton, { onClick: () => handleFeedback() }, txt[locale].FEEDBACK_BUTTON_CANCEL))));
|
|
30
27
|
};
|
package/es/FeedbackThumbs.js
CHANGED
|
@@ -2,13 +2,12 @@ import React from 'react';
|
|
|
2
2
|
import { txt } from './i18n/texts';
|
|
3
3
|
import { SecondaryButton } from '@sb1/ffe-buttons-react';
|
|
4
4
|
import { Icon } from '@sb1/ffe-icons-react';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export
|
|
8
|
-
var locale = _a.locale, onClick = _a.onClick, headingId = _a.headingId;
|
|
5
|
+
const thumbUpIconLg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik04MzUuMTMtNjE2LjJxMjQuNjQgMCA0My42IDE4Ljk2dDE4Ljk2IDQzLjZ2NjUuNnEwIDYuMzktLjA1IDEzLjM4LS4wNSA2Ljk5LTIuNDYgMTMuMjJMNzc3LjgzLTE4Ny4xM3EtOC42MSAxOS44LTI4Ljg2IDMzLjQ2UTcyOC43MS0xNDAgNzA3LjE5LTE0MEgyODQuNjd2LTQ3Ni4ybDIyNS4yNS0yMzAuN3ExMC45OS0xMS4yNSAyNS45Mi0xMy41NiAxNC45My0yLjMxIDI4LjM5IDUuMjYgMTMuMzEgNy41NiAxOS43OSAyMS41MSA2LjQ5IDEzLjk1IDIuOTggMjkuMUw1NDYuOTctNjE2LjJoMjg4LjE2Wm0tNTAwLjIxIDIxLjMzdjQwNC42MWgzNzguNzdxMy45OCAwIDguNTMtMi4zIDQuNTUtMi4zMSA2Ljg2LTcuN2wxMTguMzYtMjc5LjMzdi03NC4wNXEwLTUuMTMtMy41OS04LjcyLTMuNTktMy41OS04LjcyLTMuNTlINDg0LjkybDQ5LjQ5LTIzMy4xOC0xOTkuNDkgMjA0LjI2Wk0xNjIuMTUtMTQwcS0yNS44IDAtNDQuMTgtMTguNDh0LTE4LjM4LTQ0LjA5di0zNTEuMDdxMC0yNS42MSAxOC4zOC00NC4wOSAxOC4zOC0xOC40NyA0NC4xOC0xOC40N2gxMjIuNTJ2NTAuMjVIMTYyLjE1cS01LjM4IDAtOC44NCAzLjU5dC0zLjQ2IDguNzJ2MzUxLjA3cTAgNS4zOSAzLjQ2IDguODV0OC44NCAzLjQ2aDEyMi41MlYtMTQwSDE2Mi4xNVptMTcyLjc3LTUwLjI2di00MDQuNjEgNDA0LjYxWiIvPjwvc3ZnPg==';
|
|
6
|
+
const thumbDownIconLg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik0xMjUuMTMtMzQzLjhxLTI1IDAtNDMuNzgtMTguOTZ0LTE4Ljc4LTQzLjZ2LTY1LjZxMC02LjM5LS4wOC0xMy4zOC0uMDgtNi45OSAyLjMzLTEzLjIybDExNy42MS0yNzQuMzFxOC4yNi0xOS43NiAyOC41Ni0zMy40NFEyMzEuMjktODIwIDI1Mi44MS04MjBoNDIyLjUydjQ3Ni4yTDQ1MC4wOC0xMTMuMXEtMTAuOTkgMTEuMjUtMjUuOTIgMTMuNTYtMTQuOTMgMi4zMS0yOC4zOS01LjI2LTEzLjMxLTcuNTYtMTkuNzktMjEuNTEtNi40OS0xMy45NS0yLjk4LTI5LjFsNDAuMDMtMTg4LjM5aC0yODcuOVptNDk5Ljk1LTIxLjMzdi00MDQuNjFIMjQ2LjMxcS0zLjk4IDAtOC41MyAyLjMtNC41NSAyLjMxLTYuODYgNy43bC0xMTguMSAyNzkuMzN2NzQuMDVxMCA1LjEzIDMuNDYgOC43MiAzLjQ2IDMuNTkgOC44NSAzLjU5aDM0OS45NWwtNDkuNDkgMjMzLjE4IDE5OS40OS0yMDQuMjZaTTc5Ny44NS04MjBxMjUuOCAwIDQ0LjE4IDE4LjQ4dDE4LjM4IDQ0LjA5djM1MS4wN3EwIDI1LjYxLTE4LjM4IDQ0LjA5LTE4LjM4IDE4LjQ3LTQ0LjE4IDE4LjQ3SDY3NS4zM3YtNTAuMjVoMTIyLjUycTUuMzggMCA4Ljg0LTMuNTl0My40Ni04Ljcydi0zNTEuMDdxMC01LjM5LTMuNDYtOC44NXQtOC44NC0zLjQ2SDY3NS4zM1YtODIwaDEyMi41MlptLTE3Mi43NyA1MC4yNnY0MDQuNjEtNDA0LjYxWiIvPjwvc3ZnPg==';
|
|
7
|
+
export const FeedbackThumbs = ({ locale, onClick, headingId, }) => {
|
|
9
8
|
return (React.createElement("div", { className: "ffe-feedback__thumbs" },
|
|
10
|
-
React.createElement(SecondaryButton, { "aria-label": txt[locale].ARIA_LABEL_THUMB_UP, "aria-describedby": headingId, onClick:
|
|
9
|
+
React.createElement(SecondaryButton, { "aria-label": txt[locale].ARIA_LABEL_THUMB_UP, "aria-describedby": headingId, onClick: () => onClick('THUMB_UP'), iconOnly: true, size: 'lg' },
|
|
11
10
|
React.createElement(Icon, { size: "lg", fileUrl: thumbUpIconLg })),
|
|
12
|
-
React.createElement(SecondaryButton, { "aria-label": txt[locale].ARIA_LABEL_THUMB_DOWN, "aria-describedby": headingId, onClick:
|
|
11
|
+
React.createElement(SecondaryButton, { "aria-label": txt[locale].ARIA_LABEL_THUMB_DOWN, "aria-describedby": headingId, onClick: () => onClick('THUMB_DOWN'), iconOnly: true, size: 'lg' },
|
|
13
12
|
React.createElement(Icon, { size: "lg", fileUrl: thumbDownIconLg }))));
|
|
14
13
|
};
|
package/es/HighFive.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export
|
|
2
|
+
export const HighFive = () => {
|
|
3
3
|
return (React.createElement("svg", { width: "180", viewBox: "0 0 331 320", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true },
|
|
4
4
|
React.createElement("g", { clipPath: "url(#a)" },
|
|
5
5
|
React.createElement("circle", { cx: "165", cy: "160", r: "160", fill: "#005AA4" }),
|
package/es/i18n/en.js
CHANGED
package/es/i18n/nb.js
CHANGED
package/es/i18n/nn.js
CHANGED
package/es/i18n/texts.js
CHANGED
package/lib/Feedback.js
CHANGED
|
@@ -37,36 +37,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
37
37
|
};
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
39
|
exports.Feedback = void 0;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
var
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
_b), className);
|
|
59
|
-
var handleThumbClicked = function (thumb) {
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const react_dom_1 = require("react-dom");
|
|
42
|
+
const texts_1 = require("./i18n/texts");
|
|
43
|
+
const FeedbackThumbs_1 = require("./FeedbackThumbs");
|
|
44
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
45
|
+
const FeedbackExpanded_1 = require("./FeedbackExpanded");
|
|
46
|
+
const HighFive_1 = require("./HighFive");
|
|
47
|
+
const Feedback = ({ headingLevel = 4, headingLookLike, locale = 'nb', onThumbClick, onFeedbackSend, onFinish, bgColor, contactLink, texts, className, includeConsent = false, }) => {
|
|
48
|
+
var _a;
|
|
49
|
+
const feedbackSentRef = (0, react_1.useRef)(null);
|
|
50
|
+
const expandedRef = (0, react_1.useRef)(null);
|
|
51
|
+
const [expanded, setExpanded] = (0, react_1.useState)(false);
|
|
52
|
+
const [feedbackSent, setFeedbackSent] = (0, react_1.useState)(false);
|
|
53
|
+
const headingId = (0, react_1.useId)();
|
|
54
|
+
const feedbackClassnames = (0, classnames_1.default)('ffe-feedback', {
|
|
55
|
+
[`ffe-feedback--bg-${bgColor}`]: bgColor,
|
|
56
|
+
}, className);
|
|
57
|
+
const handleThumbClicked = (thumb) => {
|
|
60
58
|
var _a;
|
|
61
|
-
(0, react_dom_1.flushSync)(
|
|
59
|
+
(0, react_dom_1.flushSync)(() => {
|
|
62
60
|
setExpanded(true);
|
|
63
61
|
});
|
|
64
62
|
(_a = expandedRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
65
63
|
onThumbClick(thumb);
|
|
66
64
|
};
|
|
67
|
-
|
|
65
|
+
const handleFeedbackSent = (feedbackText, consentGiven) => {
|
|
68
66
|
var _a;
|
|
69
|
-
(0, react_dom_1.flushSync)(
|
|
67
|
+
(0, react_dom_1.flushSync)(() => {
|
|
70
68
|
setFeedbackSent(true);
|
|
71
69
|
});
|
|
72
70
|
(_a = feedbackSentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -77,15 +75,14 @@ var Feedback = function (_a) {
|
|
|
77
75
|
onFinish();
|
|
78
76
|
}
|
|
79
77
|
};
|
|
80
|
-
|
|
81
|
-
var _a;
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
tabIndex: tabIndex,
|
|
78
|
+
const renderHeading = (level, text, options) => {
|
|
79
|
+
var _a, _b;
|
|
80
|
+
const { ref, tabIndex, id, textCenter } = options || {};
|
|
81
|
+
const headingClassName = (0, classnames_1.default)(`ffe-h${(_a = options === null || options === void 0 ? void 0 : options.lookLike) !== null && _a !== void 0 ? _a : level}`, { [`ffe-h${(_b = options === null || options === void 0 ? void 0 : options.lookLike) !== null && _b !== void 0 ? _b : level}--text-center`]: textCenter }, 'ffe-feedback__heading');
|
|
82
|
+
return react_1.default.createElement(`h${level}`, {
|
|
83
|
+
ref,
|
|
84
|
+
id,
|
|
85
|
+
tabIndex,
|
|
89
86
|
className: headingClassName,
|
|
90
87
|
}, text);
|
|
91
88
|
};
|
|
@@ -111,7 +108,7 @@ var Feedback = function (_a) {
|
|
|
111
108
|
}
|
|
112
109
|
return (react_1.default.createElement("div", { className: feedbackClassnames },
|
|
113
110
|
react_1.default.createElement("div", { className: "ffe-feedback__content" },
|
|
114
|
-
renderHeading(headingLevel, (
|
|
111
|
+
renderHeading(headingLevel, (_a = texts === null || texts === void 0 ? void 0 : texts.feedbackNotSentHeading) !== null && _a !== void 0 ? _a : texts_1.txt[locale].FEEDBACK_NOT_SENT_HEADING, {
|
|
115
112
|
id: headingId,
|
|
116
113
|
textCenter: true,
|
|
117
114
|
lookLike: headingLookLike,
|
package/lib/FeedbackExpanded.js
CHANGED
|
@@ -34,34 +34,31 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
36
|
exports.FeedbackExpanded = void 0;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
var
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
var contactLinkElement = contactLink ? (react_1.default.createElement(ffe_core_react_1.LinkText, { 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.txt[locale].FEEDBACK_LINK_TEXT)) : null;
|
|
37
|
+
const react_1 = __importStar(require("react"));
|
|
38
|
+
const ffe_core_react_1 = require("@sb1/ffe-core-react");
|
|
39
|
+
const texts_1 = require("./i18n/texts");
|
|
40
|
+
const ffe_form_react_1 = require("@sb1/ffe-form-react");
|
|
41
|
+
const ffe_buttons_react_1 = require("@sb1/ffe-buttons-react");
|
|
42
|
+
const FeedbackExpanded = ({ locale, handleFeedback, contactLink, includeConsent = false, }) => {
|
|
43
|
+
var _a;
|
|
44
|
+
const [feedbackText, setFeedbackText] = (0, react_1.useState)();
|
|
45
|
+
const [consentGiven, setConsentGiven] = (0, react_1.useState)(false);
|
|
46
|
+
const contactLinkElement = contactLink ? (react_1.default.createElement(ffe_core_react_1.LinkText, { href: contactLink.url, className: "ffe-feedback__link-button", onClick: contactLink === null || contactLink === void 0 ? void 0 : contactLink.onClick }, (_a = contactLink.linkText) !== null && _a !== void 0 ? _a : texts_1.txt[locale].FEEDBACK_LINK_TEXT)) : null;
|
|
48
47
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
49
48
|
react_1.default.createElement(ffe_core_react_1.Paragraph, null,
|
|
50
49
|
includeConsent ? texts_1.txt[locale].FEEDBACK_ANSWER_INCLUDE_CONSENT : texts_1.txt[locale].FEEDBACK_ANSWER,
|
|
51
50
|
contactLinkElement && texts_1.txt[locale].QUESTIONS,
|
|
52
51
|
contactLinkElement),
|
|
53
52
|
react_1.default.createElement(ffe_form_react_1.InputGroup, { className: "ffe-feedback__textarea-container", label: texts_1.txt[locale].FEEDBACK_IMPROVE, description: texts_1.txt[locale].FEEDBACK_SENSITIVE },
|
|
54
|
-
react_1.default.createElement(ffe_form_react_1.TextArea, { "data-testid": "feedbackTextArea", onChange:
|
|
53
|
+
react_1.default.createElement(ffe_form_react_1.TextArea, { "data-testid": "feedbackTextArea", onChange: event => setFeedbackText(event.target.value), value: feedbackText, rows: 6, maxLength: 1000, className: "ffe-feedback__textarea" })),
|
|
55
54
|
includeConsent && (react_1.default.createElement("div", { className: "ffe-feedback__consent" },
|
|
56
|
-
react_1.default.createElement(ffe_form_react_1.Checkbox, { checked: consentGiven, onChange:
|
|
57
|
-
return setConsentGiven(event.target.checked);
|
|
58
|
-
} }, texts_1.txt[locale].FEEDBACK_CONSENT))),
|
|
55
|
+
react_1.default.createElement(ffe_form_react_1.Checkbox, { checked: consentGiven, onChange: event => setConsentGiven(event.target.checked) }, texts_1.txt[locale].FEEDBACK_CONSENT))),
|
|
59
56
|
react_1.default.createElement(ffe_buttons_react_1.ButtonGroup, { className: "ffe-feedback__button-group", ariaLabel: texts_1.txt[locale].FEEDBACK_BUTTON_GROUP, thin: true },
|
|
60
|
-
react_1.default.createElement(ffe_buttons_react_1.ActionButton, { onClick:
|
|
57
|
+
react_1.default.createElement(ffe_buttons_react_1.ActionButton, { onClick: () => {
|
|
61
58
|
if (feedbackText) {
|
|
62
59
|
handleFeedback(feedbackText, includeConsent ? consentGiven : undefined);
|
|
63
60
|
}
|
|
64
61
|
} }, texts_1.txt[locale].FEEDBACK_BUTTON_SEND),
|
|
65
|
-
react_1.default.createElement(ffe_buttons_react_1.TertiaryButton, { onClick:
|
|
62
|
+
react_1.default.createElement(ffe_buttons_react_1.TertiaryButton, { onClick: () => handleFeedback() }, texts_1.txt[locale].FEEDBACK_BUTTON_CANCEL))));
|
|
66
63
|
};
|
|
67
64
|
exports.FeedbackExpanded = FeedbackExpanded;
|
package/lib/FeedbackThumbs.js
CHANGED
|
@@ -4,18 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.FeedbackThumbs = void 0;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var locale = _a.locale, onClick = _a.onClick, headingId = _a.headingId;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const texts_1 = require("./i18n/texts");
|
|
9
|
+
const ffe_buttons_react_1 = require("@sb1/ffe-buttons-react");
|
|
10
|
+
const ffe_icons_react_1 = require("@sb1/ffe-icons-react");
|
|
11
|
+
const thumbUpIconLg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik04MzUuMTMtNjE2LjJxMjQuNjQgMCA0My42IDE4Ljk2dDE4Ljk2IDQzLjZ2NjUuNnEwIDYuMzktLjA1IDEzLjM4LS4wNSA2Ljk5LTIuNDYgMTMuMjJMNzc3LjgzLTE4Ny4xM3EtOC42MSAxOS44LTI4Ljg2IDMzLjQ2UTcyOC43MS0xNDAgNzA3LjE5LTE0MEgyODQuNjd2LTQ3Ni4ybDIyNS4yNS0yMzAuN3ExMC45OS0xMS4yNSAyNS45Mi0xMy41NiAxNC45My0yLjMxIDI4LjM5IDUuMjYgMTMuMzEgNy41NiAxOS43OSAyMS41MSA2LjQ5IDEzLjk1IDIuOTggMjkuMUw1NDYuOTctNjE2LjJoMjg4LjE2Wm0tNTAwLjIxIDIxLjMzdjQwNC42MWgzNzguNzdxMy45OCAwIDguNTMtMi4zIDQuNTUtMi4zMSA2Ljg2LTcuN2wxMTguMzYtMjc5LjMzdi03NC4wNXEwLTUuMTMtMy41OS04LjcyLTMuNTktMy41OS04LjcyLTMuNTlINDg0LjkybDQ5LjQ5LTIzMy4xOC0xOTkuNDkgMjA0LjI2Wk0xNjIuMTUtMTQwcS0yNS44IDAtNDQuMTgtMTguNDh0LTE4LjM4LTQ0LjA5di0zNTEuMDdxMC0yNS42MSAxOC4zOC00NC4wOSAxOC4zOC0xOC40NyA0NC4xOC0xOC40N2gxMjIuNTJ2NTAuMjVIMTYyLjE1cS01LjM4IDAtOC44NCAzLjU5dC0zLjQ2IDguNzJ2MzUxLjA3cTAgNS4zOSAzLjQ2IDguODV0OC44NCAzLjQ2aDEyMi41MlYtMTQwSDE2Mi4xNVptMTcyLjc3LTUwLjI2di00MDQuNjEgNDA0LjYxWiIvPjwvc3ZnPg==';
|
|
12
|
+
const thumbDownIconLg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik0xMjUuMTMtMzQzLjhxLTI1IDAtNDMuNzgtMTguOTZ0LTE4Ljc4LTQzLjZ2LTY1LjZxMC02LjM5LS4wOC0xMy4zOC0uMDgtNi45OSAyLjMzLTEzLjIybDExNy42MS0yNzQuMzFxOC4yNi0xOS43NiAyOC41Ni0zMy40NFEyMzEuMjktODIwIDI1Mi44MS04MjBoNDIyLjUydjQ3Ni4yTDQ1MC4wOC0xMTMuMXEtMTAuOTkgMTEuMjUtMjUuOTIgMTMuNTYtMTQuOTMgMi4zMS0yOC4zOS01LjI2LTEzLjMxLTcuNTYtMTkuNzktMjEuNTEtNi40OS0xMy45NS0yLjk4LTI5LjFsNDAuMDMtMTg4LjM5aC0yODcuOVptNDk5Ljk1LTIxLjMzdi00MDQuNjFIMjQ2LjMxcS0zLjk4IDAtOC41MyAyLjMtNC41NSAyLjMxLTYuODYgNy43bC0xMTguMSAyNzkuMzN2NzQuMDVxMCA1LjEzIDMuNDYgOC43MiAzLjQ2IDMuNTkgOC44NSAzLjU5aDM0OS45NWwtNDkuNDkgMjMzLjE4IDE5OS40OS0yMDQuMjZaTTc5Ny44NS04MjBxMjUuOCAwIDQ0LjE4IDE4LjQ4dDE4LjM4IDQ0LjA5djM1MS4wN3EwIDI1LjYxLTE4LjM4IDQ0LjA5LTE4LjM4IDE4LjQ3LTQ0LjE4IDE4LjQ3SDY3NS4zM3YtNTAuMjVoMTIyLjUycTUuMzggMCA4Ljg0LTMuNTl0My40Ni04Ljcydi0zNTEuMDdxMC01LjM5LTMuNDYtOC44NXQtOC44NC0zLjQ2SDY3NS4zM1YtODIwaDEyMi41MlptLTE3Mi43NyA1MC4yNnY0MDQuNjEtNDA0LjYxWiIvPjwvc3ZnPg==';
|
|
13
|
+
const FeedbackThumbs = ({ locale, onClick, headingId, }) => {
|
|
15
14
|
return (react_1.default.createElement("div", { className: "ffe-feedback__thumbs" },
|
|
16
|
-
react_1.default.createElement(ffe_buttons_react_1.SecondaryButton, { "aria-label": texts_1.txt[locale].ARIA_LABEL_THUMB_UP, "aria-describedby": headingId, onClick:
|
|
15
|
+
react_1.default.createElement(ffe_buttons_react_1.SecondaryButton, { "aria-label": texts_1.txt[locale].ARIA_LABEL_THUMB_UP, "aria-describedby": headingId, onClick: () => onClick('THUMB_UP'), iconOnly: true, size: 'lg' },
|
|
17
16
|
react_1.default.createElement(ffe_icons_react_1.Icon, { size: "lg", fileUrl: thumbUpIconLg })),
|
|
18
|
-
react_1.default.createElement(ffe_buttons_react_1.SecondaryButton, { "aria-label": texts_1.txt[locale].ARIA_LABEL_THUMB_DOWN, "aria-describedby": headingId, onClick:
|
|
17
|
+
react_1.default.createElement(ffe_buttons_react_1.SecondaryButton, { "aria-label": texts_1.txt[locale].ARIA_LABEL_THUMB_DOWN, "aria-describedby": headingId, onClick: () => onClick('THUMB_DOWN'), iconOnly: true, size: 'lg' },
|
|
19
18
|
react_1.default.createElement(ffe_icons_react_1.Icon, { size: "lg", fileUrl: thumbDownIconLg }))));
|
|
20
19
|
};
|
|
21
20
|
exports.FeedbackThumbs = FeedbackThumbs;
|
package/lib/HighFive.js
CHANGED
|
@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.HighFive = void 0;
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const HighFive = () => {
|
|
9
9
|
return (react_1.default.createElement("svg", { width: "180", viewBox: "0 0 331 320", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true },
|
|
10
10
|
react_1.default.createElement("g", { clipPath: "url(#a)" },
|
|
11
11
|
react_1.default.createElement("circle", { cx: "165", cy: "160", r: "160", fill: "#005AA4" }),
|
package/lib/i18n/texts.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.txt = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
const en_1 = require("./en");
|
|
5
|
+
const nn_1 = require("./nn");
|
|
6
|
+
const nb_1 = require("./nb");
|
|
7
7
|
exports.txt = {
|
|
8
8
|
nb: nb_1.nb,
|
|
9
9
|
nn: nn_1.nn,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-feedback-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "101.0.0",
|
|
4
4
|
"description": "React component for ffe-feedback",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "SpareBank 1",
|
|
@@ -25,16 +25,16 @@
|
|
|
25
25
|
"test:watch": "ffe-buildtool jest --watch"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@sb1/ffe-buttons-react": "^
|
|
29
|
-
"@sb1/ffe-core-react": "^
|
|
30
|
-
"@sb1/ffe-feedback": "^
|
|
31
|
-
"@sb1/ffe-form-react": "^
|
|
32
|
-
"@sb1/ffe-icons-react": "^
|
|
33
|
-
"classnames": "^2.
|
|
28
|
+
"@sb1/ffe-buttons-react": "^101.0.0",
|
|
29
|
+
"@sb1/ffe-core-react": "^101.0.0",
|
|
30
|
+
"@sb1/ffe-feedback": "^101.0.0",
|
|
31
|
+
"@sb1/ffe-form-react": "^101.0.0",
|
|
32
|
+
"@sb1/ffe-icons-react": "^101.0.0",
|
|
33
|
+
"classnames": "^2.5.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@sb1/ffe-buildtool": "^
|
|
37
|
-
"eslint": "^
|
|
36
|
+
"@sb1/ffe-buildtool": "^101.0.0",
|
|
37
|
+
"eslint": "^10.2.0",
|
|
38
38
|
"react": "^18.2.0",
|
|
39
39
|
"react-dom": "^18.2.0"
|
|
40
40
|
},
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"publishConfig": {
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "7714019dbb9001551cb5d1c262c58afd609d4fb0"
|
|
48
48
|
}
|