Merge pull request #1730 from SpareBank1/ffe-tilbakemeldingskomponent

ffe tilbakemeldingskomponent

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',

component-overview/examples/feedback/Feedback-in-custom-color.jsx

@@ -0,0 +1,9 @@
+import Feedback from '@sb1/ffe-feedback-react';
+
+<Feedback
+  language="nn"
+  bgColor="syrin-30"
+  bgDarkmodeColor="natt"
+  onThumbClick={console.log}
+  onFeedbackSend={console.log}
+/>

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';
+
+<>
+  <Wave color="frost-30" darkmodeColor="natt" />
+  <Grid>
+    <GridRow background="frost-30" >
+      <GridCol sm={{cols: 12}} >
+        <Feedback
+          language="nb"
+          onThumbClick={console.log}
+          onFeedbackSend={console.log}
+        />
+      </GridCol>
+    </GridRow>
+  </Grid>
+</>

component-overview/examples/feedback/Feedback-with-custom-link.jsx

@@ -0,0 +1,11 @@
+import Feedback from '@sb1/ffe-feedback-react';
+
+<Feedback
+  language="nn"
+  onThumbClick={console.log}
+  onFeedbackSend={console.log}
+  contactLink={{
+    linkText: 'spør i chatten.',
+    onClick: () => confirm('Denne chatten er ikkje så nyttig, så du kan like godt lukke han.'),
+  }}
+/>

component-overview/examples/feedback/Feedback-with-default-link.jsx

@@ -0,0 +1,10 @@
+import Feedback from '@sb1/ffe-feedback-react';
+
+<Feedback
+  language="nn"
+  onThumbClick={console.log}
+  onFeedbackSend={console.log}
+  contactLink={{
+    onClick: () => console.log('Contact link clicked'),
+  }}
+/>

component-overview/examples/feedback/Feedback.jsx

@@ -0,0 +1,7 @@
+import Feedback from '@sb1/ffe-feedback-react';
+
+<Feedback
+  language="nb"
+  onThumbClick={console.log}
+  onFeedbackSend={console.log}
+/>

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",

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';

packages/ffe-feedback-react/.npmrc

@@ -0,0 +1 @@
+package-lock=false

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.

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://[email protected]: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"
+    }
+}

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 (
+        <div ref={containerRef} style={{ width: '180px', height: '180px' }} />
+    );
+};

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 = () => (
+        <TertiaryButton
+            element={'a'}
+            href={contactLink.url}
+            className="ffe-feedback__link-button"
+            onClick={contactLink.onClick}
+        >
+            {contactLink.linkText ?? i18n[language].FEEDBACK_LINKTEXT}
+        </TertiaryButton>
+    );
+
+    return (
+        <>
+            <Paragraph>
+                {i18n[language].FEEDBACK_ANSWER}
+                {isValidContactLink && i18n[language].QUESTIONS}
+                {isValidContactLink && getLinkButton()}
+            </Paragraph>
+            <Paragraph>{i18n[language].FEEDBACK_SENSITIVE}</Paragraph>
+            <InputGroup
+                className="ffe-feedback__textarea-container"
+                fieldMessage={fieldMessage}
+            >
+                <TextArea
+                    data-testid="feedbackTextArea"
+                    onChange={event => setFeedbackText(event.target.value)}
+                    value={feedbackText}
+                    rows={6}
+                    maxLength={1000}
+                    id="textarea-feedback"
+                    onBlur={validateMessage}
+                    title={i18n[language].FEEDBACK_IMPROVE}
+                />
+            </InputGroup>
+            <ButtonGroup className="ffe-feedback__button-group">
+                <ActionButton
+                    onClick={() => {
+                        if (validateMessage()) {
+                            onSend(feedbackText);
+                        }
+                    }}
+                >
+                    {i18n[language].FEEDBACK_BUTTON_SEND}
+                </ActionButton>
+                <TertiaryButton onClick={onCancel}>
+                    {i18n[language].FEEDBACK_BUTTON_CANCEL}
+                </TertiaryButton>
+            </ButtonGroup>
+        </>
+    );
+};
+
+export default FeedbackExpanded;
+
+FeedbackExpanded.propTypes = {
+    language: oneOf(['nb', 'nn', 'en']),
+    onSend: func.isRequired,
+    onCancel: func.isRequired,
+    contactLink: shape({
+        url: string,
+        linkText: string,
+        onClick: func,
+    }),
+};
+
+FeedbackExpanded.defaultProps = {
+    language: 'nb',
+    contactLink: null,
+};

packages/ffe-feedback-react/src/feedback-thumbs.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import Symbol from '@sb1/ffe-symbols-react';
+import i18n from './i18n/i18n';
+import { func, oneOf } from 'prop-types';
+
+export const Thumbs = {
+    UP: 'THUMB_UP',
+    DOWN: 'THUMB_DOWN',
+};
+const THUMB_SIZE = '2xl';
+
+const FeedbackThumbs = ({ language, onClick }) => {
+    const handleMouseEnter = event => {
+        // eslint-disable-next-line no-param-reassign
+        event.target.className = `ffe-symbol ffe-symbol--filled-400 ffe-symbol--${THUMB_SIZE}`;
+    };
+
+    const handleMouseLeave = event => {
+        // eslint-disable-next-line no-param-reassign
+        event.target.className = `ffe-symbol ffe-symbol--400 ffe-symbol--${THUMB_SIZE}`;
+    };
+
+    return (
+        <div>
+            <button
+                aria-label={i18n[language].ARIA_LABEL_THUMB_UP}
+                aria-describedby="feedback-heading"
+                className="ffe-feedback__thumb"
+                onClick={() => onClick(Thumbs.UP)}
+            >
+                <Symbol
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    size={THUMB_SIZE}
+                    icon="thumb_up"
+                />
+            </button>
+            <button
+                aria-label={i18n[language].ARIA_LABEL_THUMB_DOWN}
+                aria-describedby="feedback-heading"
+                className="ffe-feedback__thumb"
+                onClick={() => onClick(Thumbs.DOWN)}
+            >
+                <Symbol
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    size={THUMB_SIZE}
+                    icon="thumb_down"
+                />
+            </button>
+        </div>
+    );
+};
+
+export default FeedbackThumbs;
+
+FeedbackThumbs.propTypes = {
+    language: oneOf(['nb', 'nn', 'en']),
+    onClick: func.isRequired,
+};
+
+FeedbackThumbs.defaultProps = {
+    language: 'nb',
+};