From f564fe447f0eb80572669d5765e78e02ea756f7f Mon Sep 17 00:00:00 2001 From: Isak Kyrre Lichtwarck Bjugn Date: Wed, 29 Nov 2023 12:47:24 +0100 Subject: [PATCH 1/3] feat(ffe-feedback): stiler til ffe-feedback --- commitlint.config.js | 1 + packages/ffe-feedback/.npmrc | 1 + packages/ffe-feedback/README.md | 33 +++++++++++++++ .../ffe-feedback/less/feedback-container.less | 42 +++++++++++++++++++ .../ffe-feedback/less/feedback-input.less | 26 ++++++++++++ .../ffe-feedback/less/feedback-thumb.less | 15 +++++++ packages/ffe-feedback/less/feedback.less | 3 ++ packages/ffe-feedback/package.json | 28 +++++++++++++ 8 files changed, 149 insertions(+) create mode 100644 packages/ffe-feedback/.npmrc create mode 100644 packages/ffe-feedback/README.md create mode 100644 packages/ffe-feedback/less/feedback-container.less create mode 100644 packages/ffe-feedback/less/feedback-input.less create mode 100644 packages/ffe-feedback/less/feedback-thumb.less create mode 100644 packages/ffe-feedback/less/feedback.less create mode 100644 packages/ffe-feedback/package.json diff --git a/commitlint.config.js b/commitlint.config.js index 11472d05af..8ccee2a313 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -30,6 +30,7 @@ module.exports = { 'ffe-decorators-react', 'ffe-details-list-react', 'ffe-dropdown-react', + 'ffe-feedback', 'ffe-file-upload', 'ffe-file-upload-react', 'ffe-form', diff --git a/packages/ffe-feedback/.npmrc b/packages/ffe-feedback/.npmrc new file mode 100644 index 0000000000..43c97e719a --- /dev/null +++ b/packages/ffe-feedback/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/packages/ffe-feedback/README.md b/packages/ffe-feedback/README.md new file mode 100644 index 0000000000..663b4c21d5 --- /dev/null +++ b/packages/ffe-feedback/README.md @@ -0,0 +1,33 @@ +# @sb1/ffe-feedback + +This package contains styles for the ffe-feedback. + +## Install + +```bash +npm install --save @sb1/ffe-feedback +``` + +## Usage + +Full documentation is not yet available, but will be added to https://design.sparebank1.no/komponenter. + +```less +@import 'node_modules/@sb1/ffe-feedback/less/feedback'; +``` + +See also `@sb1/ffe-feedback-react`. + +## 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/less/feedback-container.less b/packages/ffe-feedback/less/feedback-container.less new file mode 100644 index 0000000000..4e615b6bb6 --- /dev/null +++ b/packages/ffe-feedback/less/feedback-container.less @@ -0,0 +1,42 @@ +.ffe-feedback { + width: 100%; + flex-grow: 1; + padding: @ffe-spacing-md; + + // Tilgjengelige farger + &--bg-hvit { + background-color: var(--ffe-farge-hvit); + } + + &--bg-frost-30 { + background-color: var(--ffe-farge-frost-30); + } + + &--bg-sand-30 { + background-color: var(--ffe-farge-sand-30); + } + + &--bg-syrin-30 { + background-color: var(--ffe-farge-syrin-30); + } + + &--bg-vann-30 { + background-color: var(--ffe-farge-vann-30); + } + + &--dm-bg-svart { + body.native & { + @media (prefers-color-scheme: dark) { + background-color: var(--ffe-farge-svart); + } + } + } + + &--dm-bg-natt { + body.native & { + @media (prefers-color-scheme: dark) { + background-color: var(--ffe-farge-natt); + } + } + } +} diff --git a/packages/ffe-feedback/less/feedback-input.less b/packages/ffe-feedback/less/feedback-input.less new file mode 100644 index 0000000000..c462e4f940 --- /dev/null +++ b/packages/ffe-feedback/less/feedback-input.less @@ -0,0 +1,26 @@ +.ffe-feedback { + &__content { + padding: 10px 0 40px; + margin-right: auto; + margin-left: auto; + max-width: 420px; + display: flex; + flex-direction: column; + align-items: center; + } + + &__link-button { + border: none; + border-radius: 0; + padding: 0; + margin: 0; + } + + &__textarea-container { + width: 100%; + } + + &__button-group { + padding: @ffe-spacing-sm 0 0; + } +} diff --git a/packages/ffe-feedback/less/feedback-thumb.less b/packages/ffe-feedback/less/feedback-thumb.less new file mode 100644 index 0000000000..b3f6eb342c --- /dev/null +++ b/packages/ffe-feedback/less/feedback-thumb.less @@ -0,0 +1,15 @@ +.ffe-feedback { + &__thumb { + border: none; + background: none; + cursor: pointer; + color: var(--ffe-farge-fjell); + margin: 0 @ffe-spacing-xs; + + @media (prefers-color-scheme: dark) { + body.native & { + color: var(--ffe-farge-vann-70); + } + } + } +} diff --git a/packages/ffe-feedback/less/feedback.less b/packages/ffe-feedback/less/feedback.less new file mode 100644 index 0000000000..8dd6552543 --- /dev/null +++ b/packages/ffe-feedback/less/feedback.less @@ -0,0 +1,3 @@ +@import 'feedback-container'; +@import 'feedback-input'; +@import 'feedback-thumb'; diff --git a/packages/ffe-feedback/package.json b/packages/ffe-feedback/package.json new file mode 100644 index 0000000000..cdf5963dc5 --- /dev/null +++ b/packages/ffe-feedback/package.json @@ -0,0 +1,28 @@ +{ + "name": "@sb1/ffe-feedback", + "version": "1.0.0", + "description": "Feedback component for ffe", + "license": "MIT", + "author": "SpareBank 1", + "files": [ + "less" + ], + "repository": { + "type": "git", + "url": "ssh://git@github.com:SpareBank1/designsystem.git" + }, + "scripts": { + "lint": "ffe-buildtool stylelint less/*.less", + "test": "npm run lint" + }, + "dependencies": { + "@sb1/ffe-core": "^27.1.2", + "@sb1/ffe-form": "^25.0.2" + }, + "devDependencies": { + "@sb1/ffe-buildtool": "^0.5.0" + }, + "publishConfig": { + "access": "public" + } +} From 35260d25d12575ff18b8926014e823a5438d2e31 Mon Sep 17 00:00:00 2001 From: Isak Kyrre Lichtwarck Bjugn Date: Wed, 29 Nov 2023 12:46:11 +0100 Subject: [PATCH 2/3] feat(ffe-feedback-react): oppretter felles tilbakemeldingskomponent --- commitlint.config.js | 1 + packages/ffe-feedback-react/.npmrc | 1 + packages/ffe-feedback-react/README.md | 32 + packages/ffe-feedback-react/package.json | 52 + packages/ffe-feedback-react/src/animation.js | 20 + .../src/feedback-expanded.js | 96 + .../ffe-feedback-react/src/feedback-thumbs.js | 64 + packages/ffe-feedback-react/src/feedback.js | 110 + .../src/high-five-animation.js | 24273 ++++++++++++++++ packages/ffe-feedback-react/src/i18n/en.js | 18 + packages/ffe-feedback-react/src/i18n/i18n.js | 9 + packages/ffe-feedback-react/src/i18n/nb.js | 18 + packages/ffe-feedback-react/src/i18n/nn.js | 18 + packages/ffe-feedback-react/src/index.d.ts | 28 + packages/ffe-feedback-react/src/index.js | 6 + 15 files changed, 24746 insertions(+) create mode 100644 packages/ffe-feedback-react/.npmrc create mode 100644 packages/ffe-feedback-react/README.md create mode 100644 packages/ffe-feedback-react/package.json create mode 100644 packages/ffe-feedback-react/src/animation.js create mode 100644 packages/ffe-feedback-react/src/feedback-expanded.js create mode 100644 packages/ffe-feedback-react/src/feedback-thumbs.js create mode 100644 packages/ffe-feedback-react/src/feedback.js create mode 100644 packages/ffe-feedback-react/src/high-five-animation.js create mode 100644 packages/ffe-feedback-react/src/i18n/en.js create mode 100644 packages/ffe-feedback-react/src/i18n/i18n.js create mode 100644 packages/ffe-feedback-react/src/i18n/nb.js create mode 100644 packages/ffe-feedback-react/src/i18n/nn.js create mode 100644 packages/ffe-feedback-react/src/index.d.ts create mode 100644 packages/ffe-feedback-react/src/index.js diff --git a/commitlint.config.js b/commitlint.config.js index 8ccee2a313..125fb7bdbc 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -31,6 +31,7 @@ module.exports = { 'ffe-details-list-react', 'ffe-dropdown-react', 'ffe-feedback', + 'ffe-feedback-react', 'ffe-file-upload', 'ffe-file-upload-react', 'ffe-form', 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} + +