@sb1/ffe-feedback-react 2.0.45 → 3.0.1
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/README.md +0 -5
- package/es/Animation.js +18 -0
- package/es/Feedback.js +61 -0
- package/es/FeedbackExpanded.js +35 -0
- package/es/FeedbackThumbs.js +13 -0
- package/es/highFiveAnimation.js +24158 -0
- package/es/i18n/en.js +16 -16
- package/es/i18n/nb.js +16 -16
- package/es/i18n/nn.js +16 -16
- package/es/i18n/texts.js +8 -0
- package/es/icons/ThumbDown.js +14 -0
- package/es/icons/ThumbDownFill.js +14 -0
- package/es/icons/ThumbUp.js +14 -0
- package/es/icons/index.js +4 -4
- package/es/icons/thumbUpFill.js +14 -0
- package/es/index.js +1 -4
- package/lib/Animation.js +48 -0
- package/lib/Feedback.js +91 -0
- package/lib/FeedbackExpanded.js +62 -0
- package/lib/FeedbackThumbs.js +20 -0
- package/lib/highFiveAnimation.js +24160 -0
- package/lib/i18n/en.js +18 -21
- package/lib/i18n/nb.js +18 -21
- package/lib/i18n/nn.js +18 -21
- package/lib/i18n/texts.js +11 -0
- package/lib/icons/ThumbDown.js +21 -0
- package/lib/icons/ThumbDownFill.js +21 -0
- package/lib/icons/ThumbUp.js +21 -0
- package/lib/icons/index.js +10 -33
- package/lib/icons/thumbUpFill.js +21 -0
- package/lib/index.js +4 -15
- package/package.json +7 -9
- package/types/Animation.d.ts +2 -0
- package/types/Feedback.d.ts +15 -0
- package/types/FeedbackExpanded.d.ts +12 -0
- package/types/FeedbackThumbs.d.ts +9 -0
- package/types/highFiveAnimation.d.ts +4085 -0
- package/types/i18n/en.d.ts +16 -0
- package/types/i18n/nb.d.ts +16 -0
- package/types/i18n/nn.d.ts +16 -0
- package/types/i18n/texts.d.ts +50 -0
- package/types/icons/ThumbDown.d.ts +2 -0
- package/types/icons/ThumbDownFill.d.ts +2 -0
- package/types/icons/ThumbUp.d.ts +2 -0
- package/types/icons/index.d.ts +4 -0
- package/types/icons/thumbUpFill.d.ts +2 -0
- package/types/index.d.ts +2 -29
- package/es/animation.js +0 -22
- package/es/feedback-expanded.js +0 -82
- package/es/feedback-thumbs.js +0 -45
- package/es/feedback.js +0 -120
- package/es/high-five-animation.js +0 -1
- package/es/i18n/i18n.js +0 -8
- package/es/icons/thumb-down-fill.js +0 -14
- package/es/icons/thumb-down.js +0 -14
- package/es/icons/thumb-up-fill.js +0 -14
- package/es/icons/thumb-up.js +0 -14
- package/es/index.d.js +0 -3
- package/lib/animation.js +0 -32
- package/lib/feedback-expanded.js +0 -92
- package/lib/feedback-thumbs.js +0 -52
- package/lib/feedback.js +0 -129
- package/lib/high-five-animation.js +0 -1
- package/lib/i18n/i18n.js +0 -15
- package/lib/icons/thumb-down-fill.js +0 -23
- package/lib/icons/thumb-down.js +0 -23
- package/lib/icons/thumb-up-fill.js +0 -23
- package/lib/icons/thumb-up.js +0 -23
- package/lib/index.d.js +0 -16
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const en: {
|
|
2
|
+
readonly ARIA_LABEL_THUMB_UP: "Give thumbs up";
|
|
3
|
+
readonly ARIA_LABEL_THUMB_DOWN: "Give thumbs down";
|
|
4
|
+
readonly FEEDBACK_NOT_SENT_HEADING: "What do you think of this page? ";
|
|
5
|
+
readonly FEEDBACK_SENT_HEADING: "Thank you!";
|
|
6
|
+
readonly FEEDBACK_BUTTON_SEND: "Send feedback";
|
|
7
|
+
readonly FEEDBACK_BUTTON_CANCEL: "Cancel";
|
|
8
|
+
readonly FEEDBACK_GOOD: "What was good?";
|
|
9
|
+
readonly FEEDBACK_IMPROVE: "How can we improve?";
|
|
10
|
+
readonly FEEDBACK_ANSWER: "Your feedback will be used to improve this site and will not be replied.";
|
|
11
|
+
readonly QUESTIONS: " If you have questions, ";
|
|
12
|
+
readonly FEEDBACK_LINKTEXT: "contact customer services.";
|
|
13
|
+
readonly FEEDBACK_SENSITIVE: "Please do not send sensitive or personal information, for example: Health information, political affiliation, social security number, name, email or telephone number.";
|
|
14
|
+
readonly FEEDBACK_SHORT: "Feedback must be at least three characters.";
|
|
15
|
+
readonly NATIVE_VIEW_HEADING: "Customer service";
|
|
16
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const nb: {
|
|
2
|
+
readonly ARIA_LABEL_THUMB_UP: "Gi tommel opp";
|
|
3
|
+
readonly ARIA_LABEL_THUMB_DOWN: "Gi tommel ned";
|
|
4
|
+
readonly FEEDBACK_NOT_SENT_HEADING: "Hva synes du om denne siden? ";
|
|
5
|
+
readonly FEEDBACK_SENT_HEADING: "Takk for tilbakemeldingen!";
|
|
6
|
+
readonly FEEDBACK_BUTTON_SEND: "Send tilbakemelding";
|
|
7
|
+
readonly FEEDBACK_BUTTON_CANCEL: "Avbryt";
|
|
8
|
+
readonly FEEDBACK_GOOD: "Hva var bra?";
|
|
9
|
+
readonly FEEDBACK_IMPROVE: "Hva kan vi gjøre bedre?";
|
|
10
|
+
readonly FEEDBACK_ANSWER: "Svaret ditt blir brukt til å forbedre denne siden og blir ikke besvart.";
|
|
11
|
+
readonly QUESTIONS: " Har du spørsmål, ";
|
|
12
|
+
readonly FEEDBACK_LINKTEXT: "kontakt kundeservice.";
|
|
13
|
+
readonly FEEDBACK_SENSITIVE: "Unngå å oppgi sensitiv eller personlig informasjon, for eksempel helseopplysninger, politisk tilhørighet, personnummer, navn, e-post eller telefonnummer.";
|
|
14
|
+
readonly FEEDBACK_SHORT: "Tilbakemeldingen må være på minst tre tegn.";
|
|
15
|
+
readonly NATIVE_VIEW_HEADING: "Kundeservice";
|
|
16
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const nn: {
|
|
2
|
+
readonly ARIA_LABEL_THUMB_UP: "Gje tommel opp";
|
|
3
|
+
readonly ARIA_LABEL_THUMB_DOWN: "Gje tommel ned";
|
|
4
|
+
readonly FEEDBACK_NOT_SENT_HEADING: "Kva synest du om denne sida? ";
|
|
5
|
+
readonly FEEDBACK_SENT_HEADING: "Takk for tilbakemeldinga!";
|
|
6
|
+
readonly FEEDBACK_BUTTON_SEND: "Send tilbakemelding";
|
|
7
|
+
readonly FEEDBACK_BUTTON_CANCEL: "Avbryt";
|
|
8
|
+
readonly FEEDBACK_GOOD: "Kva var bra?";
|
|
9
|
+
readonly FEEDBACK_IMPROVE: "Kva kan vi gjere betre?";
|
|
10
|
+
readonly FEEDBACK_ANSWER: "Svaret ditt vert brukt til å betre denne sida og vert ikkje svart på.";
|
|
11
|
+
readonly QUESTIONS: " Har du spørsmål, ";
|
|
12
|
+
readonly FEEDBACK_LINKTEXT: "kontakt kundetenesta.";
|
|
13
|
+
readonly FEEDBACK_SENSITIVE: "Unngå å oppgje sensitiv eller personleg informasjon, til dømes helseopplysingar, politisk tilhøyrsel, personnummer, namn, e-post eller telefonnummer.";
|
|
14
|
+
readonly FEEDBACK_SHORT: "Tilbakemeldinga må vere minst tre teikn.";
|
|
15
|
+
readonly NATIVE_VIEW_HEADING: "Kundetenest";
|
|
16
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export declare const texts: {
|
|
2
|
+
nb: {
|
|
3
|
+
readonly ARIA_LABEL_THUMB_UP: "Gi tommel opp";
|
|
4
|
+
readonly ARIA_LABEL_THUMB_DOWN: "Gi tommel ned";
|
|
5
|
+
readonly FEEDBACK_NOT_SENT_HEADING: "Hva synes du om denne siden? ";
|
|
6
|
+
readonly FEEDBACK_SENT_HEADING: "Takk for tilbakemeldingen!";
|
|
7
|
+
readonly FEEDBACK_BUTTON_SEND: "Send tilbakemelding";
|
|
8
|
+
readonly FEEDBACK_BUTTON_CANCEL: "Avbryt";
|
|
9
|
+
readonly FEEDBACK_GOOD: "Hva var bra?";
|
|
10
|
+
readonly FEEDBACK_IMPROVE: "Hva kan vi gjøre bedre?";
|
|
11
|
+
readonly FEEDBACK_ANSWER: "Svaret ditt blir brukt til å forbedre denne siden og blir ikke besvart.";
|
|
12
|
+
readonly QUESTIONS: " Har du spørsmål, ";
|
|
13
|
+
readonly FEEDBACK_LINKTEXT: "kontakt kundeservice.";
|
|
14
|
+
readonly FEEDBACK_SENSITIVE: "Unngå å oppgi sensitiv eller personlig informasjon, for eksempel helseopplysninger, politisk tilhørighet, personnummer, navn, e-post eller telefonnummer.";
|
|
15
|
+
readonly FEEDBACK_SHORT: "Tilbakemeldingen må være på minst tre tegn.";
|
|
16
|
+
readonly NATIVE_VIEW_HEADING: "Kundeservice";
|
|
17
|
+
};
|
|
18
|
+
nn: {
|
|
19
|
+
readonly ARIA_LABEL_THUMB_UP: "Gje tommel opp";
|
|
20
|
+
readonly ARIA_LABEL_THUMB_DOWN: "Gje tommel ned";
|
|
21
|
+
readonly FEEDBACK_NOT_SENT_HEADING: "Kva synest du om denne sida? ";
|
|
22
|
+
readonly FEEDBACK_SENT_HEADING: "Takk for tilbakemeldinga!";
|
|
23
|
+
readonly FEEDBACK_BUTTON_SEND: "Send tilbakemelding";
|
|
24
|
+
readonly FEEDBACK_BUTTON_CANCEL: "Avbryt";
|
|
25
|
+
readonly FEEDBACK_GOOD: "Kva var bra?";
|
|
26
|
+
readonly FEEDBACK_IMPROVE: "Kva kan vi gjere betre?";
|
|
27
|
+
readonly FEEDBACK_ANSWER: "Svaret ditt vert brukt til å betre denne sida og vert ikkje svart på.";
|
|
28
|
+
readonly QUESTIONS: " Har du spørsmål, ";
|
|
29
|
+
readonly FEEDBACK_LINKTEXT: "kontakt kundetenesta.";
|
|
30
|
+
readonly FEEDBACK_SENSITIVE: "Unngå å oppgje sensitiv eller personleg informasjon, til dømes helseopplysingar, politisk tilhøyrsel, personnummer, namn, e-post eller telefonnummer.";
|
|
31
|
+
readonly FEEDBACK_SHORT: "Tilbakemeldinga må vere minst tre teikn.";
|
|
32
|
+
readonly NATIVE_VIEW_HEADING: "Kundetenest";
|
|
33
|
+
};
|
|
34
|
+
en: {
|
|
35
|
+
readonly ARIA_LABEL_THUMB_UP: "Give thumbs up";
|
|
36
|
+
readonly ARIA_LABEL_THUMB_DOWN: "Give thumbs down";
|
|
37
|
+
readonly FEEDBACK_NOT_SENT_HEADING: "What do you think of this page? ";
|
|
38
|
+
readonly FEEDBACK_SENT_HEADING: "Thank you!";
|
|
39
|
+
readonly FEEDBACK_BUTTON_SEND: "Send feedback";
|
|
40
|
+
readonly FEEDBACK_BUTTON_CANCEL: "Cancel";
|
|
41
|
+
readonly FEEDBACK_GOOD: "What was good?";
|
|
42
|
+
readonly FEEDBACK_IMPROVE: "How can we improve?";
|
|
43
|
+
readonly FEEDBACK_ANSWER: "Your feedback will be used to improve this site and will not be replied.";
|
|
44
|
+
readonly QUESTIONS: " If you have questions, ";
|
|
45
|
+
readonly FEEDBACK_LINKTEXT: "contact customer services.";
|
|
46
|
+
readonly FEEDBACK_SENSITIVE: "Please do not send sensitive or personal information, for example: Health information, political affiliation, social security number, name, email or telephone number.";
|
|
47
|
+
readonly FEEDBACK_SHORT: "Feedback must be at least three characters.";
|
|
48
|
+
readonly NATIVE_VIEW_HEADING: "Customer service";
|
|
49
|
+
};
|
|
50
|
+
};
|
package/types/index.d.ts
CHANGED
|
@@ -1,29 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export { Thumbs };
|
|
5
|
-
export type ThumbType = typeof Thumbs.UP | typeof Thumbs.DOWN;
|
|
6
|
-
|
|
7
|
-
export type bgColors = 'hvit' | 'frost-30' | 'sand-30' | 'syrin-30' | 'vann-30';
|
|
8
|
-
|
|
9
|
-
export type bgDarkmodeColors = 'svart' | 'natt';
|
|
10
|
-
|
|
11
|
-
export interface ContactLink {
|
|
12
|
-
url?: string;
|
|
13
|
-
linkText?: string;
|
|
14
|
-
onClick?: (e: React.MouseEvent) => void;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export interface FeedbackProps extends React.ComponentProps<'div'> {
|
|
18
|
-
headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
|
|
19
|
-
language?: 'nb' | 'nn' | 'en';
|
|
20
|
-
onThumbClick: (thumb: ThumbType) => void;
|
|
21
|
-
onFeedbackSend: (feedbackText: string) => void;
|
|
22
|
-
bgColor?: bgColors;
|
|
23
|
-
bgDarkmodeColor?: bgDarkmodeColors;
|
|
24
|
-
contactLink?: ContactLink;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
declare class Feedback extends React.Component<FeedbackProps, any> {}
|
|
28
|
-
|
|
29
|
-
export default Feedback;
|
|
1
|
+
export { Feedback } from './Feedback';
|
|
2
|
+
export { Thumb } from './FeedbackThumbs';
|
package/es/animation.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import lottie from 'lottie-web';
|
|
2
|
-
import React, { useEffect, useRef } from 'react';
|
|
3
|
-
import highFiveAnimation from './high-five-animation.js';
|
|
4
|
-
export var Animation = function Animation() {
|
|
5
|
-
var containerRef = useRef();
|
|
6
|
-
useEffect(function () {
|
|
7
|
-
lottie.loadAnimation({
|
|
8
|
-
container: containerRef.current,
|
|
9
|
-
renderer: 'svg',
|
|
10
|
-
loop: false,
|
|
11
|
-
autoplay: true,
|
|
12
|
-
animationData: highFiveAnimation
|
|
13
|
-
});
|
|
14
|
-
}, []);
|
|
15
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
16
|
-
ref: containerRef,
|
|
17
|
-
style: {
|
|
18
|
-
width: '180px',
|
|
19
|
-
height: '180px'
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
};
|
package/es/feedback-expanded.js
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
-
import React, { useState } from 'react';
|
|
8
|
-
import { Paragraph } from '@sb1/ffe-core-react';
|
|
9
|
-
import i18n from './i18n/i18n';
|
|
10
|
-
import { InputGroup, TextArea } from '@sb1/ffe-form-react';
|
|
11
|
-
import { ActionButton, ButtonGroup, TertiaryButton } from '@sb1/ffe-buttons-react';
|
|
12
|
-
import { func, oneOf, shape, string } from 'prop-types';
|
|
13
|
-
var FeedbackExpanded = function FeedbackExpanded(_ref) {
|
|
14
|
-
var _ref$language = _ref.language,
|
|
15
|
-
language = _ref$language === void 0 ? 'nb' : _ref$language,
|
|
16
|
-
onSend = _ref.onSend,
|
|
17
|
-
onCancel = _ref.onCancel,
|
|
18
|
-
_ref$contactLink = _ref.contactLink,
|
|
19
|
-
contactLink = _ref$contactLink === void 0 ? null : _ref$contactLink;
|
|
20
|
-
var _useState = useState(''),
|
|
21
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
22
|
-
feedbackText = _useState2[0],
|
|
23
|
-
setFeedbackText = _useState2[1];
|
|
24
|
-
var _useState3 = useState(undefined),
|
|
25
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
26
|
-
fieldMessage = _useState4[0],
|
|
27
|
-
setFieldMessage = _useState4[1];
|
|
28
|
-
var validateMessage = function validateMessage() {
|
|
29
|
-
if (feedbackText.length < 3) {
|
|
30
|
-
setFieldMessage(i18n[language].FEEDBACK_SHORT);
|
|
31
|
-
return false;
|
|
32
|
-
}
|
|
33
|
-
setFieldMessage(undefined);
|
|
34
|
-
return true;
|
|
35
|
-
};
|
|
36
|
-
var isValidContactLink = contactLink && (contactLink.url || contactLink.onClick);
|
|
37
|
-
var getLinkButton = function getLinkButton() {
|
|
38
|
-
var _contactLink$linkText;
|
|
39
|
-
return /*#__PURE__*/React.createElement(TertiaryButton, {
|
|
40
|
-
element: 'a',
|
|
41
|
-
href: contactLink.url,
|
|
42
|
-
className: "ffe-feedback__link-button",
|
|
43
|
-
onClick: contactLink.onClick
|
|
44
|
-
}, (_contactLink$linkText = contactLink.linkText) !== null && _contactLink$linkText !== void 0 ? _contactLink$linkText : i18n[language].FEEDBACK_LINKTEXT);
|
|
45
|
-
};
|
|
46
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paragraph, null, i18n[language].FEEDBACK_ANSWER, isValidContactLink && i18n[language].QUESTIONS, isValidContactLink && getLinkButton()), /*#__PURE__*/React.createElement(Paragraph, null, i18n[language].FEEDBACK_SENSITIVE), /*#__PURE__*/React.createElement(InputGroup, {
|
|
47
|
-
className: "ffe-feedback__textarea-container",
|
|
48
|
-
fieldMessage: fieldMessage
|
|
49
|
-
}, /*#__PURE__*/React.createElement(TextArea, {
|
|
50
|
-
"data-testid": "feedbackTextArea",
|
|
51
|
-
onChange: function onChange(event) {
|
|
52
|
-
return setFeedbackText(event.target.value);
|
|
53
|
-
},
|
|
54
|
-
value: feedbackText,
|
|
55
|
-
rows: 6,
|
|
56
|
-
maxLength: 1000,
|
|
57
|
-
id: "textarea-feedback",
|
|
58
|
-
onBlur: validateMessage,
|
|
59
|
-
title: i18n[language].FEEDBACK_IMPROVE
|
|
60
|
-
})), /*#__PURE__*/React.createElement(ButtonGroup, {
|
|
61
|
-
className: "ffe-feedback__button-group"
|
|
62
|
-
}, /*#__PURE__*/React.createElement(ActionButton, {
|
|
63
|
-
onClick: function onClick() {
|
|
64
|
-
if (validateMessage()) {
|
|
65
|
-
onSend(feedbackText);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}, i18n[language].FEEDBACK_BUTTON_SEND), /*#__PURE__*/React.createElement(TertiaryButton, {
|
|
69
|
-
onClick: onCancel
|
|
70
|
-
}, i18n[language].FEEDBACK_BUTTON_CANCEL)));
|
|
71
|
-
};
|
|
72
|
-
export default FeedbackExpanded;
|
|
73
|
-
FeedbackExpanded.propTypes = {
|
|
74
|
-
language: oneOf(['nb', 'nn', 'en']),
|
|
75
|
-
onSend: func.isRequired,
|
|
76
|
-
onCancel: func.isRequired,
|
|
77
|
-
contactLink: shape({
|
|
78
|
-
url: string,
|
|
79
|
-
linkText: string,
|
|
80
|
-
onClick: func
|
|
81
|
-
})
|
|
82
|
-
};
|
package/es/feedback-thumbs.js
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import i18n from './i18n/i18n';
|
|
3
|
-
import { func, oneOf, string } from 'prop-types';
|
|
4
|
-
import { ThumbUp, ThumbUpFill, ThumbDown, ThumbDownFill } from './icons';
|
|
5
|
-
export var Thumbs = {
|
|
6
|
-
UP: 'THUMB_UP',
|
|
7
|
-
DOWN: 'THUMB_DOWN'
|
|
8
|
-
};
|
|
9
|
-
var FeedbackThumbs = function FeedbackThumbs(_ref) {
|
|
10
|
-
var _ref$language = _ref.language,
|
|
11
|
-
language = _ref$language === void 0 ? 'nb' : _ref$language,
|
|
12
|
-
_onClick = _ref.onClick,
|
|
13
|
-
headingId = _ref.headingId;
|
|
14
|
-
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
|
|
15
|
-
"aria-label": i18n[language].ARIA_LABEL_THUMB_UP,
|
|
16
|
-
"aria-describedby": headingId,
|
|
17
|
-
className: "ffe-feedback__thumb",
|
|
18
|
-
onClick: function onClick() {
|
|
19
|
-
return _onClick(Thumbs.UP);
|
|
20
|
-
},
|
|
21
|
-
type: "button"
|
|
22
|
-
}, /*#__PURE__*/React.createElement(ThumbUp, {
|
|
23
|
-
className: "ffe-feedback__thumb-icon"
|
|
24
|
-
}), /*#__PURE__*/React.createElement(ThumbUpFill, {
|
|
25
|
-
className: "ffe-feedback__thumb-icon--fill"
|
|
26
|
-
})), /*#__PURE__*/React.createElement("button", {
|
|
27
|
-
"aria-label": i18n[language].ARIA_LABEL_THUMB_DOWN,
|
|
28
|
-
"aria-describedby": headingId,
|
|
29
|
-
className: "ffe-feedback__thumb",
|
|
30
|
-
onClick: function onClick() {
|
|
31
|
-
return _onClick(Thumbs.DOWN);
|
|
32
|
-
},
|
|
33
|
-
type: "button"
|
|
34
|
-
}, /*#__PURE__*/React.createElement(ThumbDown, {
|
|
35
|
-
className: "ffe-feedback__thumb-icon"
|
|
36
|
-
}), /*#__PURE__*/React.createElement(ThumbDownFill, {
|
|
37
|
-
className: "ffe-feedback__thumb-icon--fill"
|
|
38
|
-
})));
|
|
39
|
-
};
|
|
40
|
-
export default FeedbackThumbs;
|
|
41
|
-
FeedbackThumbs.propTypes = {
|
|
42
|
-
language: oneOf(['nb', 'nn', 'en']),
|
|
43
|
-
onClick: func.isRequired,
|
|
44
|
-
headingId: string.isRequired
|
|
45
|
-
};
|
package/es/feedback.js
DELETED
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
3
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
4
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
5
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
6
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
7
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
9
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
10
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
-
import React, { useState, useRef } from 'react';
|
|
12
|
-
import { flushSync } from 'react-dom';
|
|
13
|
-
import { Animation } from './animation';
|
|
14
|
-
import { func, oneOf, shape, string } from 'prop-types';
|
|
15
|
-
import i18n from './i18n/i18n';
|
|
16
|
-
import FeedbackThumbs, { Thumbs } from './feedback-thumbs';
|
|
17
|
-
import classNames from 'classnames';
|
|
18
|
-
import FeedbackExpanded from './feedback-expanded';
|
|
19
|
-
import { v4 as uuid } from 'uuid';
|
|
20
|
-
export var Feedback = function Feedback(_ref) {
|
|
21
|
-
var headingLevel = _ref.headingLevel,
|
|
22
|
-
_ref$language = _ref.language,
|
|
23
|
-
language = _ref$language === void 0 ? 'nb' : _ref$language,
|
|
24
|
-
onThumbClick = _ref.onThumbClick,
|
|
25
|
-
onFeedbackSend = _ref.onFeedbackSend,
|
|
26
|
-
bgColor = _ref.bgColor,
|
|
27
|
-
bgDarkmodeColor = _ref.bgDarkmodeColor,
|
|
28
|
-
_ref$contactLink = _ref.contactLink,
|
|
29
|
-
contactLink = _ref$contactLink === void 0 ? null : _ref$contactLink;
|
|
30
|
-
var feedbackSentRef = useRef();
|
|
31
|
-
var expandedRef = useRef();
|
|
32
|
-
var _useState = useState(),
|
|
33
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
34
|
-
feedbackThumbClicked = _useState2[0],
|
|
35
|
-
setFeedbackThumbClicked = _useState2[1];
|
|
36
|
-
var _useState3 = useState(false),
|
|
37
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
38
|
-
expanded = _useState4[0],
|
|
39
|
-
setExpanded = _useState4[1];
|
|
40
|
-
var _useState5 = useState(false),
|
|
41
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
42
|
-
feedbackSent = _useState6[0],
|
|
43
|
-
setFeedbackSent = _useState6[1];
|
|
44
|
-
var headingId = useRef(uuid()).current;
|
|
45
|
-
var feedbackClassnames = classNames('ffe-feedback', _defineProperty(_defineProperty({}, "ffe-feedback--bg-".concat(bgColor), bgColor), "ffe-feedback--dm-bg-".concat(bgDarkmodeColor), bgDarkmodeColor));
|
|
46
|
-
var handleThumbClicked = function handleThumbClicked(thumb) {
|
|
47
|
-
setFeedbackThumbClicked(thumb);
|
|
48
|
-
flushSync(function () {
|
|
49
|
-
setExpanded(function (prevState) {
|
|
50
|
-
return !prevState;
|
|
51
|
-
});
|
|
52
|
-
});
|
|
53
|
-
expandedRef.current.focus();
|
|
54
|
-
onThumbClick(thumb);
|
|
55
|
-
};
|
|
56
|
-
var handleFeedbackSent = function handleFeedbackSent(feedbackText) {
|
|
57
|
-
flushSync(function () {
|
|
58
|
-
setFeedbackSent(true);
|
|
59
|
-
});
|
|
60
|
-
feedbackSentRef.current.focus();
|
|
61
|
-
onFeedbackSend(feedbackText);
|
|
62
|
-
};
|
|
63
|
-
if (feedbackSent) {
|
|
64
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
65
|
-
className: feedbackClassnames
|
|
66
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
67
|
-
className: "ffe-feedback__content"
|
|
68
|
-
}, /*#__PURE__*/React.createElement("h".concat(headingLevel), {
|
|
69
|
-
ref: feedbackSentRef,
|
|
70
|
-
tabIndex: -1,
|
|
71
|
-
className: 'ffe-h4'
|
|
72
|
-
}, i18n[language].FEEDBACK_SENT_HEADING), /*#__PURE__*/React.createElement(Animation, null)));
|
|
73
|
-
}
|
|
74
|
-
if (expanded) {
|
|
75
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
76
|
-
className: feedbackClassnames
|
|
77
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
78
|
-
className: "ffe-feedback__content"
|
|
79
|
-
}, /*#__PURE__*/React.createElement("h".concat(headingLevel), {
|
|
80
|
-
ref: expandedRef,
|
|
81
|
-
tabIndex: -1,
|
|
82
|
-
className: 'ffe-h5'
|
|
83
|
-
}, feedbackThumbClicked === Thumbs.UP ? i18n[language].FEEDBACK_GOOD : i18n[language].FEEDBACK_IMPROVE), /*#__PURE__*/React.createElement(FeedbackExpanded, {
|
|
84
|
-
language: language,
|
|
85
|
-
onSend: handleFeedbackSent,
|
|
86
|
-
onCancel: function onCancel() {
|
|
87
|
-
return setExpanded(false);
|
|
88
|
-
},
|
|
89
|
-
contactLink: contactLink
|
|
90
|
-
})));
|
|
91
|
-
}
|
|
92
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
93
|
-
className: feedbackClassnames
|
|
94
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
95
|
-
className: "ffe-feedback__content"
|
|
96
|
-
}, /*#__PURE__*/React.createElement("h".concat(headingLevel), {
|
|
97
|
-
id: headingId,
|
|
98
|
-
className: 'ffe-h4'
|
|
99
|
-
}, i18n[language].FEEDBACK_NOT_SENT_HEADING), /*#__PURE__*/React.createElement(FeedbackThumbs, {
|
|
100
|
-
onClick: handleThumbClicked,
|
|
101
|
-
language: language,
|
|
102
|
-
headingId: headingId
|
|
103
|
-
})));
|
|
104
|
-
};
|
|
105
|
-
export default Feedback;
|
|
106
|
-
Feedback.propTypes = {
|
|
107
|
-
headingLevel: oneOf([1, 2, 3, 4, 5, 6]).isRequired,
|
|
108
|
-
language: oneOf(['nb', 'nn', 'en']),
|
|
109
|
-
onThumbClick: func.isRequired,
|
|
110
|
-
onFeedbackSend: func.isRequired,
|
|
111
|
-
/** Set the background color of the feedback container. Accepts ffe-color variables without the "ffe-farge-" bit of the name. */
|
|
112
|
-
bgColor: oneOf(['hvit', 'frost-30', 'sand-30', 'syrin-30', 'vann-30']),
|
|
113
|
-
/** Set the background color of the feedback container in darkmode */
|
|
114
|
-
bgDarkmodeColor: oneOf(['svart', 'natt']),
|
|
115
|
-
contactLink: shape({
|
|
116
|
-
url: string,
|
|
117
|
-
linkText: string,
|
|
118
|
-
onClick: func
|
|
119
|
-
})
|
|
120
|
-
};
|