Merge pull request #2603 from SpareBank1/develop_fix-feedback

fiks (fjerne bakgrunn) og refaktorering av ffe-feedback + ffe-feedback-react

packages/ffe-feedback-react/src/Feedback.stories.tsx

@@ -10,8 +10,20 @@ export default meta;
 
 type Story = StoryObj<typeof Feedback>;
 export const Standard: Story = {
+    args: {
+        // Removing the headingLevel property to use default value (5)
+        onThumbClick: () => console.log('Thumb clicked'),
+        onFeedbackSend: text => console.log('Feedback sent:', text),
+    },
+    render: args => <Feedback {...args} />,
+};
+
+// Adding an example with explicit heading level for comparison
+export const WithLargeHeading: Story = {
     args: {
         headingLevel: 2,
+        onThumbClick: () => console.log('Thumb clicked'),
+        onFeedbackSend: text => console.log('Feedback sent:', text),
     },
     render: args => <Feedback {...args} />,
 };

packages/ffe-feedback-react/src/Feedback.tsx

@@ -6,32 +6,38 @@ import classNames from 'classnames';
 import { FeedbackExpanded, FeedbackExpandedProps } from './FeedbackExpanded';
 import { HighFive } from './HighFive';
 
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type Locale = 'nb' | 'nn' | 'en';
+type BgColor = 'primary' | 'secondary' | 'tertiary';
+
 export interface FeedbackProps {
-    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
-    locale?: 'nb' | 'nn' | 'en';
+    headingLevel?: HeadingLevel;
+    locale?: Locale;
     onThumbClick: (thumb: Thumb) => void;
     onFeedbackSend: (feedbackText: string) => void;
-    /** Set the background color of the feedback container. */
-    bgColor?: 'primary' | 'secondary' | 'tertiary';
+    bgColor?: BgColor;
     contactLink?: FeedbackExpandedProps['contactLink'];
     texts?: {
         feedbackNotSentHeading?: string;
     };
     className?: string;
 }
-export const Feedback: React.FC<FeedbackProps> = ({
-    headingLevel,
+
+export const Feedback = ({
+    headingLevel = 5,
     locale = 'nb',
     onThumbClick,
     onFeedbackSend,
     bgColor,
     contactLink,
     texts,
     className,
-}) => {
-    const feedbackSentRef = useRef<HTMLHeadingElement>();
-    const expandedRef = useRef<HTMLHeadingElement>();
-    const [feedbackThumbClicked, setFeedbackThumbClicked] = useState<Thumb>();
+}: FeedbackProps) => {
+    const feedbackSentRef = useRef<HTMLHeadingElement>(null);
+    const expandedRef = useRef<HTMLHeadingElement>(null);
+    const [feedbackThumbClicked, setFeedbackThumbClicked] = useState<
+        Thumb | undefined
+    >();
     const [expanded, setExpanded] = useState(false);
     const [feedbackSent, setFeedbackSent] = useState(false);
     const headingId = useId();
@@ -47,7 +53,7 @@ export const Feedback: React.FC<FeedbackProps> = ({
     const handleThumbClicked = (thumb: Thumb) => {
         setFeedbackThumbClicked(thumb);
         flushSync(() => {
-            setExpanded(prevState => !prevState);
+            setExpanded(true);
         });
         expandedRef.current?.focus();
         onThumbClick(thumb);
@@ -61,18 +67,44 @@ export const Feedback: React.FC<FeedbackProps> = ({
         onFeedbackSend(feedbackText);
     };
 
+    const renderHeading = (
+        level: HeadingLevel,
+        text: string,
+        options?: {
+            ref?: React.RefObject<HTMLHeadingElement>;
+            tabIndex?: number;
+            id?: string;
+            textCenter?: boolean;
+        },
+    ) => {
+        const { ref, tabIndex, id, textCenter } = options || {};
+
+        const headingClassName = classNames(
+            `ffe-h${level}`,
+            { [`ffe-h${level}--text-center`]: textCenter },
+            'ffe-feedback__heading',
+        );
+
+        return React.createElement(
+            `h${level}`,
+            {
+                ref,
+                id,
+                tabIndex,
+                className: headingClassName,
+            },
+            text,
+        );
+    };
+
     if (feedbackSent) {
         return (
             <div className={feedbackClassnames}>
                 <div className="ffe-feedback__content">
-                    {React.createElement(
-                        `h${headingLevel}`,
-                        {
-                            ref: feedbackSentRef,
-                            tabIndex: -1,
-                            className: 'ffe-h4',
-                        },
+                    {renderHeading(
+                        headingLevel,
                         txt[locale].FEEDBACK_SENT_HEADING,
+                        { ref: feedbackSentRef, tabIndex: -1 },
                     )}
                     <HighFive />
                 </div>
@@ -84,16 +116,12 @@ export const Feedback: React.FC<FeedbackProps> = ({
         return (
             <div className={feedbackClassnames}>
                 <div className="ffe-feedback__content">
-                    {React.createElement(
-                        `h${headingLevel}`,
-                        {
-                            ref: expandedRef,
-                            tabIndex: -1,
-                            className: 'ffe-h5 ffe-feedback__heading',
-                        },
+                    {renderHeading(
+                        headingLevel,
                         feedbackThumbClicked === 'THUMB_UP'
                             ? txt[locale].FEEDBACK_GOOD
                             : txt[locale].FEEDBACK_IMPROVE,
+                        { ref: expandedRef, tabIndex: -1 },
                     )}
                     <FeedbackExpanded
                         locale={locale}
@@ -109,15 +137,11 @@ export const Feedback: React.FC<FeedbackProps> = ({
     return (
         <div className={feedbackClassnames}>
             <div className="ffe-feedback__content">
-                {React.createElement(
-                    `h${headingLevel}`,
-                    {
-                        id: headingId,
-                        className:
-                            'ffe-h4 ffe-h4--text-center ffe-feedback__heading',
-                    },
+                {renderHeading(
+                    headingLevel,
                     texts?.feedbackNotSentHeading ??
                         txt[locale].FEEDBACK_NOT_SENT_HEADING,
+                    { id: headingId, textCenter: true },
                 )}
                 <FeedbackThumbs
                     onClick={handleThumbClicked}

packages/ffe-feedback/less/feedback.less

@@ -1,3 +1,85 @@
-@import 'feedback-container';
-@import 'feedback-input';
-@import 'feedback-thumb';
+.ffe-feedback {
+    width: 100%;
+    flex-grow: 1;
+    padding: var(--ffe-spacing-md);
+
+    &__content {
+        padding: var(--ffe-spacing-xs) 0 var(--ffe-spacing-xl);
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 420px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: var(--ffe-color-foreground-default);
+        text-align: center; // Add text alignment for better heading display
+    }
+
+    &__heading {
+        color: var(--ffe-color-foreground-emphasis);
+        margin-bottom: var(--ffe-spacing-md); // Add margin below heading
+        max-width: 100%; // Ensure heading doesn't overflow container
+        word-wrap: break-word; // Handle long words
+    }
+
+    &__link-button {
+        border: none;
+        border-radius: 0;
+        padding: 0;
+        margin: 0;
+    }
+
+    &__textarea-container {
+        width: 100%;
+    }
+
+    &__button-group {
+        padding: var(--ffe-spacing-sm) 0 0;
+    }
+
+    &--bg-primary {
+        background-color: var(--ffe-color-surface-primary-default);
+    }
+
+    &--bg-secondary {
+        background-color: var(--ffe-color-surface-secondary-default);
+    }
+
+    &--bg-tertiary {
+        background-color: var(--ffe-color-surface-tertiary-default);
+    }
+}
+
+.ffe-feedback__thumb {
+    --thumb-up-filled-xl: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDAiPjxwYXRoIGQ9Ik04NDIuMzA2LTYxNC4zMDZxMjIuMjMxIDAgMzkuOTYyIDE3LjczIDE3LjczMSAxNy43MzEgMTcuNzMxIDM5Ljk2MnY2Ni4yMjlxMCA5LjQ2Mi0yLjExNiAyMS40NjItMi4xMTUgMTEuOTk5LTUuOTYxIDIwLjY5Mkw3ODAuMTUzLTE4Ny45MjRxLTguNjE2IDE5Ljg0Ni0yOC41MzkgMzMuODg0LTE5LjkyMyAxNC4wMzktNDEuNzY5IDE0LjAzOUgzMjUuNDYycS0yMy44NDYgMC00MC43NjktMTYuOTIzLTE2LjkyMy0xNi45MjQtMTYuOTIzLTQwLjc3di0zOTIuOTk3cTAtMTEgNC41LTIxLjYxNSA0LjUtMTAuNjE2IDEyLjExNS0xOC42MTZsMjA0LjMwOC0yMTEuNDYxcTEwLjkyMy0xMS4zMDcgMjUuOTk5LTEzLjkyMyAxNS4wNzctMi42MTUgMjguMjMgNC42OTIgMTIuNzY5IDcuMzA4IDE5LjE1NCAyMS40NjIgNi4zODQgMTQuMTUzIDMuMTU0IDMwLjA3NmwtMzggMTg1Ljc3aDMxOC4wNzZaTTE1NS40NjMtMTQwLjAwMXEtMjIuNjE1IDAtMzkuMDM5LTE2LjQyMy0xNi40MjMtMTYuNDI0LTE2LjQyMy0zOS4wMzl2LTM2My4zODJxMC0yMi4yMzEgMTYuNDIzLTM4Ljg0NiAxNi40MjQtMTYuNjE1IDM5LjAzOS0xNi42MTVoOC40NjJxMjIuNjE1IDAgMzkuMDM4IDE2LjYxNXQxNi40MjMgMzguODQ2djM2My43NjdxMCAyMi42MTUtMTYuNDIzIDM4Ljg0Ni0xNi40MjMgMTYuMjMxLTM5LjAzOCAxNi4yMzFoLTguNDYyWiIvPjwvc3ZnPg==');
+    --thumb-up-open-400-xl: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDAiPjxwYXRoIGQ9Ik04NTUtNjMycTI0IDAgNDIgMTh0MTggNDJ2ODEuODM5cTAgNy4xNjEgMS41IDE0LjY2MVQ5MTUtNDYxTDc4OS0xNzFxLTguODc4IDIxLjI1LTI5LjU5NSAzNi4xMjVRNzM4LjY4OS0xMjAgNzE2LTEyMEgyNzJ2LTUxMmwyMjUtMjM4cTEzLjYtMTQgMzIuMTg3LTE2LjVRNTQ3Ljc3My04ODkgNTY1LTg3OXExNyAxMCAyNS41IDI3LjV0NC4yIDM2LjVMNTU2LTYzMmgyOTlabS01MjMgMjV2NDI3aDM5N2wxMjYtMjk5di05M0g0ODJsNTMtMjQ5LTIwMyAyMTRaTTEzOS0xMjBxLTI0Ljc1IDAtNDIuMzc1LTE3LjYyNVQ3OS0xODB2LTM5MnEwLTI0Ljc1IDE3LjYyNS00Mi4zNzVUMTM5LTYzMmgxMzN2NjBIMTM5djM5MmgxMzN2NjBIMTM5Wm0xOTMtNjB2LTQyNyA0MjdaIi8+PC9zdmc+');
+
+    all: unset;
+    margin: 0 var(--ffe-spacing-xs);
+    padding: var(--ffe-spacing-xs);
+    border-radius: 50%;
+    transition: all var(--ffe-transition-duration) var(--ffe-ease);
+    background: transparent;
+    display: inline-flex;
+    cursor: pointer;
+
+    .ffe-icons {
+        mask-image: var(--thumb-up-open-400-xl);
+        color: var(--ffe-color-component-button-tertiary-foreground-default);
+    }
+
+    &:focus-visible .ffe-icons,
+    &:active .ffe-icons {
+        mask-image: var(--thumb-up-filled-xl);
+    }
+
+    &:hover,
+    &:focus-visible,
+    &:active {
+        background: var(--ffe-color-component-button-tertiary-fill-hover);
+    }
+
+    &--down {
+        transform: rotate(180deg);
+    }
+}