@navinc/base-react-components/dist/wayfinder/sentiment/sentiment.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { IconButton } from '../icon-button/icon-button.js';
import { Button } from '../button/button.js';
import { StringInput } from '../input/index.js';
import { Icon } from '../icon/icon.js';
/**
 * A reusable notification component for feedback confirmations
 */
const FeedbackNotification = ({ icon = 'done', title, body }) => {
    return (_jsxs("div", { className: "flex p-200 gap-100 w-full items-center border border-solid border-outlineVariant rounded-300 bg-surface", children: [_jsx(Icon, { name: icon, size: "large", className: "text-onSurfaceVariant" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("p", { className: "body1-emphasized", children: title }), _jsx("p", { children: body })] })] }));
};
export const Sentiment = ({ title = 'How satisfied are you with this result?', feedbackTitle1 = 'Feedback submitted', feedbackBody1 = 'Thanks! This will help us improve', feedbackTitle2 = 'Additional feedback submitted', feedbackBody2 = 'Thanks again!', onSentimentSelect, }) => {
    const [selectedSentiment, setSelectedSentiment] = useState(null);
    const [showFeedback, setShowFeedback] = useState(false);
    const [showSecondThanks, setShowSecondThanks] = useState(false);
    const [feedback, setFeedback] = useState('');
    const handleSentimentClick = (sentiment) => {
        setSelectedSentiment(sentiment);
        setShowFeedback(true);
        // Call the callback with just the sentiment for now
        if (onSentimentSelect) {
            onSentimentSelect(sentiment);
        }
    };
    const handleSubmitFeedback = () => {
        if (selectedSentiment) {
            setShowSecondThanks(true);
            // Call the callback again with both sentiment and feedback
            if (onSentimentSelect) {
                onSentimentSelect(selectedSentiment, feedback);
            }
        }
    };
    return (_jsxs("div", { className: "flex flex-col w-full justify-center items-center gap-50", children: [!showFeedback && (_jsxs("div", { className: "flex flex-col items-center w-full px-100 py-200 border border-solid border-outlineVariant rounded-300", children: [title, _jsxs("div", { className: "flex gap-2 justify-center", children: [_jsx(IconButton, { name: "sentiment_very_dissatisfied", onClick: () => handleSentimentClick('very_dissatisfied') }), _jsx(IconButton, { name: "sentiment_dissatisfied", onClick: () => handleSentimentClick('dissatisfied') }), _jsx(IconButton, { name: "sentiment_neutral", onClick: () => handleSentimentClick('neutral') }), _jsx(IconButton, { name: "sentiment_satisfied", onClick: () => handleSentimentClick('satisfied') }), _jsx(IconButton, { name: "sentiment_very_satisfied", onClick: () => handleSentimentClick('very_satisfied') })] })] })), showFeedback && (_jsxs("div", { className: "flex flex-col gap-200 w-full", children: [_jsx(FeedbackNotification, { title: feedbackTitle1, body: feedbackBody1 }), showSecondThanks ? (_jsx(FeedbackNotification, { title: feedbackTitle2, body: feedbackBody2 })) : (_jsxs("div", { className: "flex flex-col gap-100", children: [_jsx("p", { className: "text-body2", children: "What would have made this magical?" }), _jsxs("div", { className: "flex gap-100", children: [_jsx(StringInput, { id: "additional-feedback", placeholder: "Tell us more...", value: feedback, onChange: (e) => setFeedback(e.target.value) }), _jsx(Button, { onClick: handleSubmitFeedback, children: "Submit" })] })] }))] }))] }));
};
//# sourceMappingURL=sentiment.js.map