@sb1/ffe-feedback-react 1.2.3 → 2.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.
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import i18n from './i18n/i18n';
3
- import { func, oneOf } from 'prop-types';
3
+ import { func, oneOf, string } from 'prop-types';
4
4
  import { ThumbUp, ThumbUpFill, ThumbDown, ThumbDownFill } from './icons';
5
5
  export var Thumbs = {
6
6
  UP: 'THUMB_UP',
@@ -8,25 +8,28 @@ export var Thumbs = {
8
8
  };
9
9
  var FeedbackThumbs = function FeedbackThumbs(_ref) {
10
10
  var language = _ref.language,
11
- _onClick = _ref.onClick;
11
+ _onClick = _ref.onClick,
12
+ headingId = _ref.headingId;
12
13
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
13
14
  "aria-label": i18n[language].ARIA_LABEL_THUMB_UP,
14
- "aria-describedby": "feedback-heading",
15
+ "aria-describedby": headingId,
15
16
  className: "ffe-feedback__thumb",
16
17
  onClick: function onClick() {
17
18
  return _onClick(Thumbs.UP);
18
- }
19
+ },
20
+ type: "button"
19
21
  }, /*#__PURE__*/React.createElement(ThumbUp, {
20
22
  className: "ffe-feedback__thumb-icon"
21
23
  }), /*#__PURE__*/React.createElement(ThumbUpFill, {
22
24
  className: "ffe-feedback__thumb-icon--fill"
23
25
  })), /*#__PURE__*/React.createElement("button", {
24
26
  "aria-label": i18n[language].ARIA_LABEL_THUMB_DOWN,
25
- "aria-describedby": "feedback-heading",
27
+ "aria-describedby": headingId,
26
28
  className: "ffe-feedback__thumb",
27
29
  onClick: function onClick() {
28
30
  return _onClick(Thumbs.DOWN);
29
- }
31
+ },
32
+ type: "button"
30
33
  }, /*#__PURE__*/React.createElement(ThumbDown, {
31
34
  className: "ffe-feedback__thumb-icon"
32
35
  }), /*#__PURE__*/React.createElement(ThumbDownFill, {
@@ -36,7 +39,8 @@ var FeedbackThumbs = function FeedbackThumbs(_ref) {
36
39
  export default FeedbackThumbs;
37
40
  FeedbackThumbs.propTypes = {
38
41
  language: oneOf(['nb', 'nn', 'en']),
39
- onClick: func.isRequired
42
+ onClick: func.isRequired,
43
+ headingId: string.isRequired
40
44
  };
41
45
  FeedbackThumbs.defaultProps = {
42
46
  language: 'nb'
package/es/feedback.js CHANGED
@@ -10,15 +10,16 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
10
10
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
11
11
  import React, { useState, useRef } from 'react';
12
12
  import { flushSync } from 'react-dom';
13
- import { Heading2 } from '@sb1/ffe-core-react';
14
13
  import { Animation } from './animation';
15
14
  import { func, oneOf, shape, string } from 'prop-types';
16
15
  import i18n from './i18n/i18n';
17
16
  import FeedbackThumbs, { Thumbs } from './feedback-thumbs';
18
17
  import classNames from 'classnames';
19
18
  import FeedbackExpanded from './feedback-expanded';
19
+ import { v4 as uuid } from 'uuid';
20
20
  export var Feedback = function Feedback(_ref) {
21
- var language = _ref.language,
21
+ var headingLevel = _ref.headingLevel,
22
+ language = _ref.language,
22
23
  onThumbClick = _ref.onThumbClick,
23
24
  onFeedbackSend = _ref.onFeedbackSend,
24
25
  bgColor = _ref.bgColor,
@@ -38,6 +39,7 @@ export var Feedback = function Feedback(_ref) {
38
39
  _useState6 = _slicedToArray(_useState5, 2),
39
40
  feedbackSent = _useState6[0],
40
41
  setFeedbackSent = _useState6[1];
42
+ var headingId = useRef(uuid()).current;
41
43
  var feedbackClassnames = classNames('ffe-feedback', _defineProperty(_defineProperty({}, "ffe-feedback--bg-".concat(bgColor), bgColor), "ffe-feedback--dm-bg-".concat(bgDarkmodeColor), bgDarkmodeColor));
42
44
  var handleThumbClicked = function handleThumbClicked(thumb) {
43
45
  setFeedbackThumbClicked(thumb);
@@ -61,10 +63,10 @@ export var Feedback = function Feedback(_ref) {
61
63
  className: feedbackClassnames
62
64
  }, /*#__PURE__*/React.createElement("div", {
63
65
  className: "ffe-feedback__content"
64
- }, /*#__PURE__*/React.createElement(Heading2, {
65
- lookLike: 4,
66
+ }, /*#__PURE__*/React.createElement("h".concat(headingLevel), {
66
67
  ref: feedbackSentRef,
67
- tabIndex: -1
68
+ tabIndex: -1,
69
+ className: 'ffe-h4'
68
70
  }, i18n[language].FEEDBACK_SENT_HEADING), /*#__PURE__*/React.createElement(Animation, null)));
69
71
  }
70
72
  if (expanded) {
@@ -72,10 +74,10 @@ export var Feedback = function Feedback(_ref) {
72
74
  className: feedbackClassnames
73
75
  }, /*#__PURE__*/React.createElement("div", {
74
76
  className: "ffe-feedback__content"
75
- }, /*#__PURE__*/React.createElement(Heading2, {
76
- lookLike: 5,
77
+ }, /*#__PURE__*/React.createElement("h".concat(headingLevel), {
77
78
  ref: expandedRef,
78
- tabIndex: -1
79
+ tabIndex: -1,
80
+ className: 'ffe-h5'
79
81
  }, feedbackThumbClicked === Thumbs.UP ? i18n[language].FEEDBACK_GOOD : i18n[language].FEEDBACK_IMPROVE), /*#__PURE__*/React.createElement(FeedbackExpanded, {
80
82
  language: language,
81
83
  onSend: handleFeedbackSent,
@@ -89,16 +91,18 @@ export var Feedback = function Feedback(_ref) {
89
91
  className: feedbackClassnames
90
92
  }, /*#__PURE__*/React.createElement("div", {
91
93
  className: "ffe-feedback__content"
92
- }, /*#__PURE__*/React.createElement(Heading2, {
93
- id: "feedback-heading",
94
- lookLike: 4
94
+ }, /*#__PURE__*/React.createElement("h".concat(headingLevel), {
95
+ id: headingId,
96
+ className: 'ffe-h4'
95
97
  }, i18n[language].FEEDBACK_NOT_SENT_HEADING), /*#__PURE__*/React.createElement(FeedbackThumbs, {
96
98
  onClick: handleThumbClicked,
97
- language: language
99
+ language: language,
100
+ headingId: headingId
98
101
  })));
99
102
  };
100
103
  export default Feedback;
101
104
  Feedback.propTypes = {
105
+ headingLevel: oneOf([1, 2, 3, 4, 5, 6]).isRequired,
102
106
  language: oneOf(['nb', 'nn', 'en']),
103
107
  onThumbClick: func.isRequired,
104
108
  onFeedbackSend: func.isRequired,
@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
2
2
  import * as React from 'react';
3
3
  var ThumbDownFill = function ThumbDownFill(props) {
4
4
  return /*#__PURE__*/React.createElement("svg", _extends({
5
+ "aria-hidden": true,
5
6
  xmlns: "http://www.w3.org/2000/svg",
6
7
  width: 48,
7
8
  height: 48,
@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
2
2
  import * as React from 'react';
3
3
  var ThumbDown = function ThumbDown(props) {
4
4
  return /*#__PURE__*/React.createElement("svg", _extends({
5
+ "aria-hidden": true,
5
6
  xmlns: "http://www.w3.org/2000/svg",
6
7
  width: 48,
7
8
  height: 48,
@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
2
2
  import * as React from 'react';
3
3
  var ThumbUpFill = function ThumbUpFill(props) {
4
4
  return /*#__PURE__*/React.createElement("svg", _extends({
5
+ "aria-hidden": true,
5
6
  xmlns: "http://www.w3.org/2000/svg",
6
7
  width: 48,
7
8
  height: 48,
@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
2
2
  import * as React from 'react';
3
3
  var ThumbUp = function ThumbUp(props) {
4
4
  return /*#__PURE__*/React.createElement("svg", _extends({
5
+ "aria-hidden": true,
5
6
  xmlns: "http://www.w3.org/2000/svg",
6
7
  width: 48,
7
8
  height: 48,
@@ -15,25 +15,28 @@ var Thumbs = exports.Thumbs = {
15
15
  };
16
16
  var FeedbackThumbs = function FeedbackThumbs(_ref) {
17
17
  var language = _ref.language,
18
- _onClick = _ref.onClick;
18
+ _onClick = _ref.onClick,
19
+ headingId = _ref.headingId;
19
20
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
20
21
  "aria-label": _i18n.default[language].ARIA_LABEL_THUMB_UP,
21
- "aria-describedby": "feedback-heading",
22
+ "aria-describedby": headingId,
22
23
  className: "ffe-feedback__thumb",
23
24
  onClick: function onClick() {
24
25
  return _onClick(Thumbs.UP);
25
- }
26
+ },
27
+ type: "button"
26
28
  }, /*#__PURE__*/_react.default.createElement(_icons.ThumbUp, {
27
29
  className: "ffe-feedback__thumb-icon"
28
30
  }), /*#__PURE__*/_react.default.createElement(_icons.ThumbUpFill, {
29
31
  className: "ffe-feedback__thumb-icon--fill"
30
32
  })), /*#__PURE__*/_react.default.createElement("button", {
31
33
  "aria-label": _i18n.default[language].ARIA_LABEL_THUMB_DOWN,
32
- "aria-describedby": "feedback-heading",
34
+ "aria-describedby": headingId,
33
35
  className: "ffe-feedback__thumb",
34
36
  onClick: function onClick() {
35
37
  return _onClick(Thumbs.DOWN);
36
- }
38
+ },
39
+ type: "button"
37
40
  }, /*#__PURE__*/_react.default.createElement(_icons.ThumbDown, {
38
41
  className: "ffe-feedback__thumb-icon"
39
42
  }), /*#__PURE__*/_react.default.createElement(_icons.ThumbDownFill, {
@@ -43,7 +46,8 @@ var FeedbackThumbs = function FeedbackThumbs(_ref) {
43
46
  var _default = exports.default = FeedbackThumbs;
44
47
  FeedbackThumbs.propTypes = {
45
48
  language: (0, _propTypes.oneOf)(['nb', 'nn', 'en']),
46
- onClick: _propTypes.func.isRequired
49
+ onClick: _propTypes.func.isRequired,
50
+ headingId: _propTypes.string.isRequired
47
51
  };
48
52
  FeedbackThumbs.defaultProps = {
49
53
  language: 'nb'
package/lib/feedback.js CHANGED
@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = exports.Feedback = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _reactDom = require("react-dom");
10
- var _ffeCoreReact = require("@sb1/ffe-core-react");
11
10
  var _animation = require("./animation");
12
11
  var _propTypes = require("prop-types");
13
12
  var _i18n = _interopRequireDefault(require("./i18n/i18n"));
14
13
  var _feedbackThumbs = _interopRequireWildcard(require("./feedback-thumbs"));
15
14
  var _classnames = _interopRequireDefault(require("classnames"));
16
15
  var _feedbackExpanded = _interopRequireDefault(require("./feedback-expanded"));
16
+ var _uuid = require("uuid");
17
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -27,7 +27,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
27
27
  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; } }
28
28
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
29
29
  var Feedback = exports.Feedback = function Feedback(_ref) {
30
- var language = _ref.language,
30
+ var headingLevel = _ref.headingLevel,
31
+ language = _ref.language,
31
32
  onThumbClick = _ref.onThumbClick,
32
33
  onFeedbackSend = _ref.onFeedbackSend,
33
34
  bgColor = _ref.bgColor,
@@ -47,6 +48,7 @@ var Feedback = exports.Feedback = function Feedback(_ref) {
47
48
  _useState6 = _slicedToArray(_useState5, 2),
48
49
  feedbackSent = _useState6[0],
49
50
  setFeedbackSent = _useState6[1];
51
+ var headingId = (0, _react.useRef)((0, _uuid.v4)()).current;
50
52
  var feedbackClassnames = (0, _classnames.default)('ffe-feedback', _defineProperty(_defineProperty({}, "ffe-feedback--bg-".concat(bgColor), bgColor), "ffe-feedback--dm-bg-".concat(bgDarkmodeColor), bgDarkmodeColor));
51
53
  var handleThumbClicked = function handleThumbClicked(thumb) {
52
54
  setFeedbackThumbClicked(thumb);
@@ -70,10 +72,10 @@ var Feedback = exports.Feedback = function Feedback(_ref) {
70
72
  className: feedbackClassnames
71
73
  }, /*#__PURE__*/_react.default.createElement("div", {
72
74
  className: "ffe-feedback__content"
73
- }, /*#__PURE__*/_react.default.createElement(_ffeCoreReact.Heading2, {
74
- lookLike: 4,
75
+ }, /*#__PURE__*/_react.default.createElement("h".concat(headingLevel), {
75
76
  ref: feedbackSentRef,
76
- tabIndex: -1
77
+ tabIndex: -1,
78
+ className: 'ffe-h4'
77
79
  }, _i18n.default[language].FEEDBACK_SENT_HEADING), /*#__PURE__*/_react.default.createElement(_animation.Animation, null)));
78
80
  }
79
81
  if (expanded) {
@@ -81,10 +83,10 @@ var Feedback = exports.Feedback = function Feedback(_ref) {
81
83
  className: feedbackClassnames
82
84
  }, /*#__PURE__*/_react.default.createElement("div", {
83
85
  className: "ffe-feedback__content"
84
- }, /*#__PURE__*/_react.default.createElement(_ffeCoreReact.Heading2, {
85
- lookLike: 5,
86
+ }, /*#__PURE__*/_react.default.createElement("h".concat(headingLevel), {
86
87
  ref: expandedRef,
87
- tabIndex: -1
88
+ tabIndex: -1,
89
+ className: 'ffe-h5'
88
90
  }, feedbackThumbClicked === _feedbackThumbs.Thumbs.UP ? _i18n.default[language].FEEDBACK_GOOD : _i18n.default[language].FEEDBACK_IMPROVE), /*#__PURE__*/_react.default.createElement(_feedbackExpanded.default, {
89
91
  language: language,
90
92
  onSend: handleFeedbackSent,
@@ -98,16 +100,18 @@ var Feedback = exports.Feedback = function Feedback(_ref) {
98
100
  className: feedbackClassnames
99
101
  }, /*#__PURE__*/_react.default.createElement("div", {
100
102
  className: "ffe-feedback__content"
101
- }, /*#__PURE__*/_react.default.createElement(_ffeCoreReact.Heading2, {
102
- id: "feedback-heading",
103
- lookLike: 4
103
+ }, /*#__PURE__*/_react.default.createElement("h".concat(headingLevel), {
104
+ id: headingId,
105
+ className: 'ffe-h4'
104
106
  }, _i18n.default[language].FEEDBACK_NOT_SENT_HEADING), /*#__PURE__*/_react.default.createElement(_feedbackThumbs.default, {
105
107
  onClick: handleThumbClicked,
106
- language: language
108
+ language: language,
109
+ headingId: headingId
107
110
  })));
108
111
  };
109
112
  var _default = exports.default = Feedback;
110
113
  Feedback.propTypes = {
114
+ headingLevel: (0, _propTypes.oneOf)([1, 2, 3, 4, 5, 6]).isRequired,
111
115
  language: (0, _propTypes.oneOf)(['nb', 'nn', 'en']),
112
116
  onThumbClick: _propTypes.func.isRequired,
113
117
  onFeedbackSend: _propTypes.func.isRequired,
@@ -11,6 +11,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
11
11
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
12
12
  var ThumbDownFill = function ThumbDownFill(props) {
13
13
  return /*#__PURE__*/React.createElement("svg", _extends({
14
+ "aria-hidden": true,
14
15
  xmlns: "http://www.w3.org/2000/svg",
15
16
  width: 48,
16
17
  height: 48,
@@ -11,6 +11,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
11
11
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
12
12
  var ThumbDown = function ThumbDown(props) {
13
13
  return /*#__PURE__*/React.createElement("svg", _extends({
14
+ "aria-hidden": true,
14
15
  xmlns: "http://www.w3.org/2000/svg",
15
16
  width: 48,
16
17
  height: 48,
@@ -11,6 +11,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
11
11
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
12
12
  var ThumbUpFill = function ThumbUpFill(props) {
13
13
  return /*#__PURE__*/React.createElement("svg", _extends({
14
+ "aria-hidden": true,
14
15
  xmlns: "http://www.w3.org/2000/svg",
15
16
  width: 48,
16
17
  height: 48,
@@ -11,6 +11,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
11
11
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
12
12
  var ThumbUp = function ThumbUp(props) {
13
13
  return /*#__PURE__*/React.createElement("svg", _extends({
14
+ "aria-hidden": true,
14
15
  xmlns: "http://www.w3.org/2000/svg",
15
16
  width: 48,
16
17
  height: 48,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-feedback-react",
3
- "version": "1.2.3",
3
+ "version": "2.0.1",
4
4
  "description": "React component for ffe-feedback",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -25,11 +25,11 @@
25
25
  "test:watch": "ffe-buildtool jest --watch"
26
26
  },
27
27
  "dependencies": {
28
- "@sb1/ffe-buttons-react": "^20.0.8",
29
- "@sb1/ffe-collapse-react": "^2.0.7",
30
- "@sb1/ffe-core-react": "^7.2.0",
31
- "@sb1/ffe-feedback": "^1.2.1",
32
- "@sb1/ffe-form-react": "^14.0.9",
28
+ "@sb1/ffe-buttons-react": "^20.0.9",
29
+ "@sb1/ffe-collapse-react": "^2.0.8",
30
+ "@sb1/ffe-core-react": "^7.2.1",
31
+ "@sb1/ffe-feedback": "^1.2.2",
32
+ "@sb1/ffe-form-react": "^14.0.10",
33
33
  "classnames": "^2.3.1",
34
34
  "lottie-web": "^5.12.2",
35
35
  "uuid": "^9.0.0"
@@ -48,5 +48,5 @@
48
48
  "publishConfig": {
49
49
  "access": "public"
50
50
  },
51
- "gitHead": "b47fbdb7daaf9d3edc12366a6fbb90f462268b1f"
51
+ "gitHead": "c3320deb2b223463724c8f8dc036fd9c4ddba85a"
52
52
  }
package/types/index.d.ts CHANGED
@@ -15,6 +15,7 @@ export interface ContactLink {
15
15
  }
16
16
 
17
17
  export interface FeedbackProps extends React.ComponentProps<'div'> {
18
+ headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
18
19
  language?: 'nb' | 'nn' | 'en';
19
20
  onThumbClick: (thumb: ThumbType) => void;
20
21
  onFeedbackSend: (feedbackText: string) => void;