diff --git a/commitlint.config.js b/commitlint.config.js index 11472d05af..125fb7bdbc 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -30,6 +30,8 @@ module.exports = { 'ffe-decorators-react', 'ffe-details-list-react', 'ffe-dropdown-react', + 'ffe-feedback', + 'ffe-feedback-react', 'ffe-file-upload', 'ffe-file-upload-react', 'ffe-form', diff --git a/component-overview/examples/feedback/Feedback-in-custom-color.jsx b/component-overview/examples/feedback/Feedback-in-custom-color.jsx new file mode 100644 index 0000000000..20747c852e --- /dev/null +++ b/component-overview/examples/feedback/Feedback-in-custom-color.jsx @@ -0,0 +1,9 @@ +import Feedback from '@sb1/ffe-feedback-react'; + + diff --git a/component-overview/examples/feedback/Feedback-in-wave.jsx b/component-overview/examples/feedback/Feedback-in-wave.jsx new file mode 100644 index 0000000000..f7c4d9f7ca --- /dev/null +++ b/component-overview/examples/feedback/Feedback-in-wave.jsx @@ -0,0 +1,18 @@ +import Feedback from '@sb1/ffe-feedback-react'; +import { Wave } from '@sb1/ffe-core-react'; +import { Grid, GridCol, GridRow } from '@sb1/ffe-grid-react'; + +<> + + + + + + + + + diff --git a/component-overview/examples/feedback/Feedback-with-custom-link.jsx b/component-overview/examples/feedback/Feedback-with-custom-link.jsx new file mode 100644 index 0000000000..ec730dbb0a --- /dev/null +++ b/component-overview/examples/feedback/Feedback-with-custom-link.jsx @@ -0,0 +1,11 @@ +import Feedback from '@sb1/ffe-feedback-react'; + + confirm('Denne chatten er ikkje så nyttig, så du kan like godt lukke han.'), + }} +/> diff --git a/component-overview/examples/feedback/Feedback-with-default-link.jsx b/component-overview/examples/feedback/Feedback-with-default-link.jsx new file mode 100644 index 0000000000..5d7bb2da1f --- /dev/null +++ b/component-overview/examples/feedback/Feedback-with-default-link.jsx @@ -0,0 +1,10 @@ +import Feedback from '@sb1/ffe-feedback-react'; + + console.log('Contact link clicked'), + }} +/> diff --git a/component-overview/examples/feedback/Feedback.jsx b/component-overview/examples/feedback/Feedback.jsx new file mode 100644 index 0000000000..1d6903a4b5 --- /dev/null +++ b/component-overview/examples/feedback/Feedback.jsx @@ -0,0 +1,7 @@ +import Feedback from '@sb1/ffe-feedback-react'; + + diff --git a/component-overview/package.json b/component-overview/package.json index d471cea185..64654c5b1d 100644 --- a/component-overview/package.json +++ b/component-overview/package.json @@ -58,6 +58,8 @@ "@sb1/ffe-decorators-react": "^3.0.12", "@sb1/ffe-details-list-react": "^4.0.11", "@sb1/ffe-dropdown-react": "^6.0.16", + "@sb1/ffe-feedback": "^1.0.0", + "@sb1/ffe-feedback-react": "^1.0.0", "@sb1/ffe-file-upload": "^10.0.4", "@sb1/ffe-file-upload-react": "^10.0.10", "@sb1/ffe-form": "^26.0.0", diff --git a/component-overview/src/style.less b/component-overview/src/style.less index 3340c10e1d..d6a2f490ea 100644 --- a/component-overview/src/style.less +++ b/component-overview/src/style.less @@ -8,6 +8,7 @@ @import '@sb1/ffe-collapse-react/less/collapse'; @import '@sb1/ffe-context-message/less/ffe-context-message'; @import '@sb1/ffe-datepicker/less/datepicker'; +@import '@sb1/ffe-feedback/less/feedback'; @import '@sb1/ffe-file-upload/less/file-upload'; @import '@sb1/ffe-grid/less/ffe-grid'; @import '@sb1/ffe-header/less/ffe-header'; diff --git a/packages/ffe-feedback-react/.npmrc b/packages/ffe-feedback-react/.npmrc new file mode 100644 index 0000000000..43c97e719a --- /dev/null +++ b/packages/ffe-feedback-react/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/packages/ffe-feedback-react/README.md b/packages/ffe-feedback-react/README.md new file mode 100644 index 0000000000..5d2b017165 --- /dev/null +++ b/packages/ffe-feedback-react/README.md @@ -0,0 +1,32 @@ +# @sb1/ffe-feedback-react + +React module for FFE feedback element. + +## Install + +``` +npm install --save @sb1/ffe-feedback-react +``` + +## Usage + +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: + +```bash +npm install +npm run build +npm start +``` + +A local instance of `component-overview` with live reloading will run at http://localhost:1234/. + +Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem. diff --git a/packages/ffe-feedback-react/package.json b/packages/ffe-feedback-react/package.json new file mode 100644 index 0000000000..2f8e7fb5f1 --- /dev/null +++ b/packages/ffe-feedback-react/package.json @@ -0,0 +1,52 @@ +{ + "name": "@sb1/ffe-feedback-react", + "version": "1.0.0", + "description": "React component for ffe-feedback", + "license": "MIT", + "author": "SpareBank 1", + "files": [ + "lib", + "es", + "types" + ], + "main": "lib/index.js", + "module": "es/index.js", + "types": "types/index.d.ts", + "sideEffects": false, + "repository": { + "type": "git", + "url": "ssh://git@github.com:SpareBank1/designsystem.git" + }, + "scripts": { + "build": "ffe-buildtool babel", + "watch": "ffe-buildtool babel-watch", + "lint": "eslint src", + "test": "ffe-buildtool jest", + "test:watch": "ffe-buildtool jest --watch" + }, + "dependencies": { + "@sb1/ffe-buttons-react": "^20.0.4", + "@sb1/ffe-collapse-react": "^2.0.6", + "@sb1/ffe-core-react": "^7.1.4", + "@sb1/ffe-feedback": "^1.0.0", + "@sb1/ffe-form-react": "^14.0.5", + "@sb1/ffe-symbols-react": "^3.0.1", + "classnames": "^2.3.1", + "lottie-web": "^5.12.2", + "uuid": "^9.0.0" + }, + "devDependencies": { + "@sb1/ffe-buildtool": "^0.5.0", + "eslint": "^5.9.0", + "prop-types": "^15.7.2", + "react": "^16.9.0", + "react-dom": "^16.9.0", + "sinon": "^7.2.3" + }, + "peerDependencies": { + "react": ">=16.9.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/ffe-feedback-react/src/animation.js b/packages/ffe-feedback-react/src/animation.js new file mode 100644 index 0000000000..f6fe6b3928 --- /dev/null +++ b/packages/ffe-feedback-react/src/animation.js @@ -0,0 +1,20 @@ +import lottie from 'lottie-web'; +import React, { useEffect, useRef } from 'react'; +import highFiveAnimation from './high-five-animation.js'; + +export const Animation = () => { + const containerRef = useRef(); + useEffect(() => { + lottie.loadAnimation({ + container: containerRef.current, + renderer: 'svg', + loop: false, + autoplay: true, + animationData: highFiveAnimation, + }); + }, []); + + return ( +
+ ); +}; diff --git a/packages/ffe-feedback-react/src/feedback-expanded.js b/packages/ffe-feedback-react/src/feedback-expanded.js new file mode 100644 index 0000000000..edd836eeac --- /dev/null +++ b/packages/ffe-feedback-react/src/feedback-expanded.js @@ -0,0 +1,96 @@ +import React, { useState } from 'react'; +import { Paragraph } from '@sb1/ffe-core-react'; +import i18n from './i18n/i18n'; +import { InputGroup, TextArea } from '@sb1/ffe-form-react'; +import { + ActionButton, + ButtonGroup, + TertiaryButton, +} from '@sb1/ffe-buttons-react'; +import { func, oneOf, shape, string } from 'prop-types'; + +const FeedbackExpanded = ({ language, onSend, onCancel, contactLink }) => { + const [feedbackText, setFeedbackText] = useState(''); + const [fieldMessage, setFieldMessage] = useState(undefined); + + const validateMessage = () => { + if (feedbackText.length < 3) { + setFieldMessage(i18n[language].FEEDBACK_SHORT); + return false; + } + setFieldMessage(undefined); + return true; + }; + + const isValidContactLink = + contactLink && (contactLink.url || contactLink.onClick); + + const getLinkButton = () => ( + + {contactLink.linkText ?? i18n[language].FEEDBACK_LINKTEXT} + + ); + + return ( + <> + + {i18n[language].FEEDBACK_ANSWER} + {isValidContactLink && i18n[language].QUESTIONS} + {isValidContactLink && getLinkButton()} + + {i18n[language].FEEDBACK_SENSITIVE} + +