@beydesign/storybook 0.7.1 → 0.7.3

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './stories/UI';
 export * from './stories/Agent';
 export * from './stories/EntityCard';
 export * from './stories/PlanCard';
+export * from './stories/Feedback';
 export * from './stories/Form';
 export * from './stories/Buttons';
 export * from './stories/Typography';

package/dist/index.js

@@ -2,6 +2,7 @@ export * from './stories/UI';
 export * from './stories/Agent';
 export * from './stories/EntityCard';
 export * from './stories/PlanCard';
+export * from './stories/Feedback';
 export * from './stories/Form';
 export * from './stories/Buttons';
 export * from './stories/Typography';

package/dist/stories/Feedback/FeedbackCard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FeedbackCardProps } from './types';
+export declare const FeedbackCard: React.FC<FeedbackCardProps>;

package/dist/stories/Feedback/FeedbackCard.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Checkbox, Chip, TextField } from '@mui/material';
+import { FeedbackRating } from './types';
+import { FeedbackRatingIcon } from './FeedbackRatingIcon';
+import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+const RATING_SCALE = [
+    FeedbackRating.VeryUnsatisfied,
+    FeedbackRating.Unsatisfied,
+    FeedbackRating.Neutral,
+    FeedbackRating.Satisfied,
+    FeedbackRating.VerySatisfied,
+];
+const DEFAULT_RATING_LABELS = {
+    [FeedbackRating.VeryUnsatisfied]: 'Very unsatisfied',
+    [FeedbackRating.Unsatisfied]: 'Unsatisfied',
+    [FeedbackRating.Neutral]: 'Neutral',
+    [FeedbackRating.Satisfied]: 'Satisfied',
+    [FeedbackRating.VerySatisfied]: 'Very satisfied',
+};
+/**
+ * The card sits on the dark call backdrop, so the defaults are the dark-surface
+ * washes rather than theme-aware semantics. `surfaceColor` is the brand-tinted
+ * one: a consumer under custom branding passes a wash of the brand color.
+ */
+const DEFAULT_SURFACE = 'var(--primitives-white-primary-transparent-violet-20)';
+const DEFAULT_ITEM = 'var(--primitives-white-primary-black-40)';
+const MAX_WIDTH = 696;
+/** The face bleeds 10% of its box on every side so the heart is not clipped. */
+const FACE_BOX = { xs: 50, sm: 60 };
+const FACE_BLEED = { xs: '-5px', sm: '-6px' };
+export const FeedbackCard = ({ title = 'How was your call experience with this agent?', rating, onRatingChange, ratingLabels = DEFAULT_RATING_LABELS, ratingInkColor, expanded = false, detailsTitle = 'Please help us improve! What can be done better?', topics = [], selectedTopic = null, onTopicChange, comment = '', onCommentChange, commentPlaceholder = 'Your comment', contactConsent = false, onContactConsentChange, contactConsentLabel = 'You can contact me about this feedback', submitText = 'Submit Feedback', onSubmit, submitDisabled = false, submitLoading = false, submitId, errorText, surfaceColor = DEFAULT_SURFACE, itemColor = DEFAULT_ITEM, className, sx, }) => {
+    const handleRatingClick = (option) => {
+        onRatingChange(option === rating ? null : option);
+    };
+    const handleTopicClick = (topic) => {
+        onTopicChange?.(topic === selectedTopic ? null : topic);
+    };
+    const handleCommentChange = (event) => {
+        onCommentChange?.(event.target.value);
+    };
+    const handleContactConsentChange = (event) => {
+        onContactConsentChange?.(event.target.checked);
+    };
+    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'column', width: '100%', maxWidth: MAX_WIDTH, boxSizing: 'border-box', minHeight: 0, overflow: 'auto', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-lg)', border: '1px solid var(--color-border-border-divider)', sx: [
+            {
+                gap: {
+                    xs: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+                    sm: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
+                },
+                paddingX: {
+                    xs: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                    sm: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
+                },
+                paddingY: {
+                    xs: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+                    sm: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)',
+                },
+                backgroundColor: surfaceColor,
+            },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: [_jsx(Box, { textAlign: 'center', children: _jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: title }) }), errorText && (_jsx(Box, { textAlign: 'center', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText }) })), _jsx(Box, { display: 'grid', sx: {
+                    gridTemplateColumns: { xs: 'repeat(3, 1fr)', sm: 'repeat(5, 1fr)' },
+                    gap: {
+                        xs: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+                        sm: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                    },
+                }, children: RATING_SCALE.map((option) => (_jsx(FeedbackOption, { rating: option, label: ratingLabels[option], selected: rating === option, inkColor: ratingInkColor, itemColor: itemColor, onClick: handleRatingClick }, option))) }), expanded && (_jsxs(React.Fragment, { children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: detailsTitle }), topics.length > 0 && (_jsx(Box, { display: 'flex', flexWrap: 'wrap', gap: '8px', children: topics.map((topic) => (_jsx(FeedbackTopicChip, { topic: topic, selected: selectedTopic === topic, itemColor: itemColor, onClick: handleTopicClick }, topic))) })), _jsx(TextField, { multiline: true, rows: 3, fullWidth: true, variant: 'outlined', placeholder: commentPlaceholder, value: comment, onChange: handleCommentChange, sx: {
+                                    '& .MuiOutlinedInput-root': {
+                                        color: 'var(--color-text-text-title)',
+                                        backgroundColor: 'var(--color-background-bg-component)',
+                                        fontSize: '0.875rem',
+                                        '& fieldset': {
+                                            borderColor: 'var(--color-border-border-component)',
+                                        },
+                                        '&:hover fieldset': {
+                                            borderColor: 'var(--color-border-border-component-active)',
+                                        },
+                                        '&.Mui-focused fieldset': {
+                                            borderColor: 'var(--color-border-border-brand)',
+                                        },
+                                    },
+                                } })] }), _jsxs(Box, { display: 'flex', alignItems: 'center', children: [_jsx(Checkbox, { checked: contactConsent, onChange: handleContactConsentChange, sx: {
+                                    color: 'var(--color-foreground-fg-secondary)',
+                                    '&.Mui-checked': {
+                                        color: 'var(--color-foreground-fg-brand-primary)',
+                                    },
+                                } }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-white)', children: contactConsentLabel })] })] })), _jsx(Box, { display: 'flex', justifyContent: 'center', children: _jsx(MainButton, { text: submitText, disabled: submitDisabled, loading: submitLoading, onClick: onSubmit, hierarchy: ButtonHierarchy.Primary, size: ButtonSize.sm, id: submitId }) })] }));
+};
+const FeedbackOption = ({ rating, label, selected, inkColor, itemColor, onClick, }) => {
+    const handleClick = () => {
+        onClick(rating);
+    };
+    return (_jsxs(Box, { component: 'button', type: 'button', onClick: handleClick, "aria-pressed": selected, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-lg)', sx: {
+            paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+            paddingY: {
+                xs: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                sm: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+            },
+            border: selected
+                ? '1px solid var(--color-border-border-brand)'
+                : '1px solid transparent',
+            backgroundColor: itemColor,
+            cursor: 'pointer',
+            transition: 'border-color 0.2s ease',
+            '&:hover': { borderColor: 'var(--color-border-border-brand)' },
+        }, children: [_jsx(Box, { sx: {
+                    width: FACE_BOX,
+                    height: FACE_BOX,
+                    margin: FACE_BLEED,
+                    '& svg': { width: '100%', height: '100%' },
+                }, children: _jsx(FeedbackRatingIcon, { rating: rating, inkColor: inkColor }) }), _jsx(Box, { width: '100%', textAlign: 'center', sx: {
+                    fontFamily: 'var(--global-text-s-semi-bold-font-family), sans-serif',
+                    fontWeight: 'var(--global-text-s-semi-bold-font-weight)',
+                    fontSize: { xs: '12px', sm: '14px' },
+                    lineHeight: { xs: '16px', sm: '20px' },
+                    color: 'var(--color-text-text-white)',
+                }, children: label })] }));
+};
+const FeedbackTopicChip = ({ topic, selected, itemColor, onClick, }) => {
+    const handleClick = () => {
+        onClick(topic);
+    };
+    return (_jsx(Chip, { label: topic, onClick: handleClick, sx: {
+            backgroundColor: selected
+                ? 'var(--color-background-bg-secondary-action)'
+                : itemColor,
+            color: selected
+                ? 'var(--color-text-text-clicable)'
+                : 'var(--color-text-text-white)',
+            border: selected
+                ? '1px solid var(--color-border-border-secondary-action)'
+                : '1px solid transparent',
+            '&:hover': {
+                backgroundColor: 'var(--color-background-bg-secondary-action)',
+            },
+        } }));
+};

package/dist/stories/Feedback/FeedbackCard.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeedbackCard } from './FeedbackCard';
+declare const meta: Meta<typeof FeedbackCard>;
+export default meta;
+type Story = StoryObj<typeof FeedbackCard>;
+export declare const Collapsed: Story;
+export declare const Expanded: Story;
+export declare const WithError: Story;
+export declare const Submitting: Story;
+export declare const CustomBranding: Story;

package/dist/stories/Feedback/FeedbackCard.stories.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FeedbackCard } from './FeedbackCard';
+import { FeedbackRating } from './types';
+const TOPICS = [
+    'Audio quality',
+    'Avatar quality',
+    'Responses',
+    'Interface',
+    'Chat',
+];
+/**
+ * The card is fully controlled, so the stories hold the state a consumer would
+ * own and let the controls drive everything else.
+ */
+const ControlledFeedbackCard = (props) => {
+    const [rating, setRating] = useState(props.rating ?? null);
+    const [topic, setTopic] = useState(props.selectedTopic ?? null);
+    const [comment, setComment] = useState(props.comment ?? '');
+    const [contactConsent, setContactConsent] = useState(props.contactConsent ?? false);
+    return (_jsx(FeedbackCard, { ...props, rating: rating, onRatingChange: setRating, selectedTopic: topic, onTopicChange: setTopic, comment: comment, onCommentChange: setComment, contactConsent: contactConsent, onContactConsentChange: setContactConsent, submitDisabled: props.submitDisabled ?? !rating }));
+};
+const meta = {
+    title: 'Design System/Components/Feedback/FeedbackCard',
+    component: FeedbackCard,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                padding: '32px',
+                background: 'var(--color-background-bg-page)',
+                display: 'flex',
+                justifyContent: 'center',
+            }, children: _jsx(Story, {}) })),
+    ],
+    render: (args) => _jsx(ControlledFeedbackCard, { ...args }),
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Question shown above the rating scale',
+            table: { type: { summary: 'string' } },
+        },
+        expanded: {
+            control: 'boolean',
+            description: 'Whether the follow-up fields are shown',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        topics: {
+            control: 'object',
+            description: 'Selectable topics offered with the follow-up fields',
+            table: { type: { summary: 'string[]' } },
+        },
+        submitText: {
+            control: 'text',
+            description: 'Label of the submit button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Submit Feedback' },
+            },
+        },
+        submitLoading: {
+            control: 'boolean',
+            description: 'Whether the submit button shows its loading spinner',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        errorText: {
+            control: 'text',
+            description: 'Error message shown under the question',
+            table: { type: { summary: 'string | null' } },
+        },
+        surfaceColor: {
+            control: 'color',
+            description: 'Background of the card; override to follow a custom brand color',
+            table: { type: { summary: 'string' } },
+        },
+        itemColor: {
+            control: 'color',
+            description: 'Background of each rating tile and topic chip',
+            table: { type: { summary: 'string' } },
+        },
+        ratingInkColor: {
+            control: 'color',
+            description: 'Brand-colored part of the faces',
+            table: { type: { summary: 'string' } },
+        },
+    },
+};
+export default meta;
+export const Collapsed = {
+    args: {
+        rating: null,
+        expanded: false,
+        submitId: 'call-postscreen-submit-feedback',
+        onSubmit: () => { },
+        onRatingChange: () => { },
+    },
+};
+export const Expanded = {
+    args: {
+        ...Collapsed.args,
+        rating: FeedbackRating.Satisfied,
+        expanded: true,
+        topics: TOPICS,
+    },
+};
+export const WithError = {
+    args: {
+        ...Collapsed.args,
+        errorText: 'Please rate the product',
+    },
+};
+export const Submitting = {
+    args: {
+        ...Expanded.args,
+        submitLoading: true,
+        submitDisabled: true,
+    },
+};
+export const CustomBranding = {
+    args: {
+        ...Expanded.args,
+        surfaceColor: 'rgba(180, 35, 24, 0.2)',
+        ratingInkColor: '#B42318',
+    },
+};

package/dist/stories/Feedback/FeedbackRatingIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FeedbackRatingIconProps } from './types';
+export declare const FeedbackRatingIcon: React.FC<FeedbackRatingIconProps>;

package/dist/stories/Feedback/FeedbackRatingIcon.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FeedbackRating } from './types';
+/**
+ * Illustration colors lifted straight from the Figma feedback frames. They have
+ * no token equivalents — the faces are drawn the same way in both themes, so
+ * pinning the primitives here keeps them matching the design.
+ *
+ * `DEFAULT_INK` is only a default: it is the one brand-colored part of the face, so a
+ * consumer under custom branding passes `inkColor` instead. It cannot default to
+ * `--color-background-bg-brand-primary`, which resolves to lemon in dark theme.
+ */
+const DEFAULT_INK = '#6301FE';
+const FACE_MUTED = '#C8CCED';
+const FACE_LAVENDER = '#D8A3FE';
+const FACE_LEMON = '#C5EB28';
+/**
+ * The glyph is drawn on a 48-unit grid. The viewBox is bled 6 units on every
+ * side so the heart on the `VerySatisfied` face, which sits outside the grid,
+ * is not clipped.
+ */
+const VIEW_BOX = '-6 -6 60 60';
+const SMILEY_SAD = 'M24.0012 4.23438C29.1709 4.24083 34.1269 6.29763 37.7825 9.95312C41.438 13.6087 43.4948 18.5646 43.5012 23.7344C43.5012 27.5911 42.3578 31.3616 40.2151 34.5684C38.0725 37.7749 35.027 40.2741 31.4641 41.75C27.901 43.2259 23.98 43.6117 20.1975 42.8594C16.415 42.107 12.9402 40.2504 10.2131 37.5234C7.4861 34.7964 5.62867 31.3215 4.8762 27.5391C4.12382 23.7566 4.50981 19.8355 5.98558 16.2725C7.46149 12.7093 9.96144 9.6632 13.1682 7.52051C16.3748 5.37802 20.1447 4.23442 24.0012 4.23438ZM33.2209 32.8506C30.2584 29.5818 26.5808 28.606 23.3127 28.957C20.127 29.2993 17.2271 30.9167 15.7405 32.9814C15.2567 33.6537 15.4101 34.5912 16.0823 35.0752C16.7545 35.5588 17.6921 35.4065 18.176 34.7344C19.0845 33.4727 21.1482 32.2074 23.633 31.9404C26.0356 31.6824 28.7365 32.3707 30.9973 34.8652C31.5536 35.479 32.5026 35.525 33.1164 34.9688C33.7299 34.4125 33.7768 33.4643 33.2209 32.8506ZM31.6125 17.9053C31.2015 17.735 30.7491 17.6906 30.3127 17.7773C29.8763 17.8642 29.4751 18.0789 29.1604 18.3936C28.8458 18.7082 28.631 19.1095 28.5442 19.5459C28.4575 19.9822 28.5029 20.4347 28.6731 20.8457C28.8434 21.2567 29.1313 21.6083 29.5012 21.8555C29.8712 22.1027 30.3063 22.2343 30.7512 22.2344C31.3479 22.2344 31.9201 21.9971 32.342 21.5752C32.764 21.1532 33.0012 20.5811 33.0012 19.9844C33.0012 19.5394 32.8695 19.1044 32.6223 18.7344C32.3751 18.3644 32.0237 18.0756 31.6125 17.9053ZM17.2512 17.7344C16.6545 17.7344 16.0823 17.9716 15.6604 18.3936C15.2385 18.8155 15.0012 19.3877 15.0012 19.9844C15.0012 20.4293 15.133 20.8644 15.3801 21.2344C15.6273 21.6044 15.9797 21.8932 16.3909 22.0635C16.8018 22.2336 17.2544 22.2782 17.6907 22.1914C18.127 22.1046 18.5274 21.8898 18.842 21.5752C19.1567 21.2605 19.3714 20.8593 19.4582 20.4229C19.5449 19.9865 19.5005 19.534 19.3303 19.123C19.16 18.712 18.8712 18.3605 18.5012 18.1133C18.1313 17.8662 17.6961 17.7344 17.2512 17.7344Z';
+const SMILEY_FROWN = 'M24.0012 4.23438C29.1709 4.24083 34.1269 6.29763 37.7825 9.95312C41.438 13.6087 43.4948 18.5646 43.5012 23.7344C43.5012 27.5911 42.3578 31.3616 40.2151 34.5684C38.0725 37.7749 35.027 40.2741 31.4641 41.75C27.901 43.2259 23.98 43.6117 20.1975 42.8594C16.415 42.107 12.9402 40.2504 10.2131 37.5234C7.4861 34.7964 5.62867 31.3215 4.8762 27.5391C4.12382 23.7566 4.50981 19.8355 5.98558 16.2725C7.46149 12.7093 9.96144 9.6632 13.1682 7.52051C16.3748 5.37802 20.1447 4.23442 24.0012 4.23438ZM33.3762 28.0049C33.1512 27.2079 32.3227 26.744 31.5256 26.9688L17.6633 30.8789C16.866 31.1038 16.4013 31.9332 16.6262 32.7305C16.8512 33.5277 17.6805 33.9915 18.4778 33.7666L32.3401 29.8564C33.1373 29.6315 33.6011 28.8022 33.3762 28.0049ZM31.6125 17.9053C31.2015 17.735 30.7491 17.6906 30.3127 17.7773C29.8763 17.8642 29.4751 18.0789 29.1604 18.3936C28.8458 18.7082 28.631 19.1095 28.5442 19.5459C28.4575 19.9822 28.5029 20.4347 28.6731 20.8457C28.8434 21.2567 29.1313 21.6083 29.5012 21.8555C29.8712 22.1027 30.3063 22.2343 30.7512 22.2344C31.3479 22.2344 31.9201 21.9971 32.342 21.5752C32.764 21.1532 33.0012 20.5811 33.0012 19.9844C33.0012 19.5394 32.8695 19.1044 32.6223 18.7344C32.3751 18.3644 32.0237 18.0756 31.6125 17.9053ZM17.2512 17.7344C16.6545 17.7344 16.0823 17.9716 15.6604 18.3936C15.2385 18.8155 15.0012 19.3877 15.0012 19.9844C15.0012 20.4293 15.133 20.8644 15.3801 21.2344C15.6273 21.6044 15.9797 21.8932 16.3909 22.0635C16.8018 22.2336 17.2544 22.2782 17.6907 22.1914C18.127 22.1046 18.5274 21.8898 18.842 21.5752C19.1567 21.2605 19.3714 20.8593 19.4582 20.4229C19.5449 19.9865 19.5005 19.534 19.3303 19.123C19.16 18.712 18.8712 18.3605 18.5012 18.1133C18.1313 17.8662 17.6961 17.7344 17.2512 17.7344Z';
+const SMILEY_MEH = 'M23.6607 4.23438C19.8039 4.23438 16.0338 5.37803 12.827 7.52072C9.62028 9.66341 7.12091 12.7089 5.645 16.272C4.16909 19.8352 3.78293 23.756 4.53534 27.5386C5.28775 31.3213 7.14495 34.7958 9.87207 37.523C12.5992 40.2501 16.0738 42.1073 19.8564 42.8597C23.639 43.6121 27.5598 43.2259 31.123 41.75C34.6861 40.2741 37.7316 37.7748 39.8743 34.568C42.017 31.3612 43.1607 27.5911 43.1607 23.7344C43.1542 18.5646 41.0977 13.6085 37.4421 9.95292C33.7866 6.29735 28.8304 4.24083 23.6607 4.23438ZM16.9107 17.7344C17.3557 17.7344 17.7907 17.8663 18.1607 18.1136C18.5307 18.3608 18.8191 18.7122 18.9894 19.1233C19.1597 19.5345 19.2042 19.9869 19.1174 20.4233C19.0306 20.8598 18.8163 21.2607 18.5016 21.5754C18.187 21.89 17.7861 22.1043 17.3496 22.1911C16.9132 22.278 16.4608 22.2334 16.0496 22.0631C15.6385 21.8928 15.2871 21.6044 15.0398 21.2344C14.7926 20.8644 14.6607 20.4294 14.6607 19.9844C14.6607 19.3876 14.8977 18.8153 15.3197 18.3934C15.7416 17.9714 16.3139 17.7344 16.9107 17.7344ZM31.1607 31.2344H16.1607C15.7628 31.2344 15.3813 31.0763 15.1 30.795C14.8187 30.5137 14.6607 30.1322 14.6607 29.7344C14.6607 29.3366 14.8187 28.955 15.1 28.6737C15.3813 28.3924 15.7628 28.2344 16.1607 28.2344H31.1607C31.5585 28.2344 31.94 28.3924 32.2213 28.6737C32.5026 28.955 32.6607 29.3366 32.6607 29.7344C32.6607 30.1322 32.5026 30.5137 32.2213 30.795C31.94 31.0763 31.5585 31.2344 31.1607 31.2344ZM30.4107 22.2344C29.9656 22.2344 29.5306 22.1024 29.1606 21.8552C28.7906 21.608 28.5022 21.2565 28.3319 20.8454C28.1616 20.4343 28.1171 19.9819 28.2039 19.5454C28.2907 19.109 28.505 18.7081 28.8197 18.3934C29.1343 18.0787 29.5352 17.8644 29.9717 17.7776C30.4082 17.6908 30.8606 17.7353 31.2717 17.9056C31.6828 18.0759 32.0342 18.3643 32.2815 18.7343C32.5287 19.1044 32.6607 19.5394 32.6607 19.9844C32.6607 20.5811 32.4236 21.1534 32.0016 21.5754C31.5797 21.9973 31.0074 22.2344 30.4107 22.2344Z';
+const SMILEY_HAPPY = 'M23.5 4.68945C19.6433 4.68945 15.8731 5.83311 12.6664 7.9758C9.45963 10.1185 6.96027 13.164 5.48436 16.7271C4.00845 20.2903 3.62228 24.2111 4.3747 27.9937C5.12711 31.7763 6.9843 35.2509 9.71143 37.978C12.4386 40.7052 15.9131 42.5624 19.6957 43.3148C23.4784 44.0672 27.3992 43.681 30.9623 42.2051C34.5255 40.7292 37.571 38.2298 39.7137 35.0231C41.8564 31.8163 43 28.0462 43 24.1895C42.9946 19.0194 40.9383 14.0627 37.2826 10.4069C33.6268 6.75112 28.6701 4.69491 23.5 4.68945ZM16.75 18.1895C17.195 18.1895 17.63 18.3214 18 18.5686C18.3701 18.8159 18.6584 19.1673 18.8287 19.5784C18.999 19.9896 19.0436 20.442 18.9568 20.8784C18.87 21.3149 18.6557 21.7158 18.341 22.0304C18.0263 22.3451 17.6254 22.5594 17.189 22.6462C16.7525 22.733 16.3001 22.6885 15.889 22.5182C15.4778 22.3479 15.1264 22.0595 14.8792 21.6895C14.632 21.3195 14.5 20.8845 14.5 20.4395C14.5 19.8427 14.7371 19.2704 15.159 18.8485C15.581 18.4265 16.1533 18.1895 16.75 18.1895ZM32.2975 29.4395C30.3681 32.7751 27.1619 34.6895 23.5 34.6895C19.8381 34.6895 16.6319 32.777 14.7025 29.4395C14.594 29.2687 14.5211 29.0778 14.4883 28.8782C14.4554 28.6786 14.4633 28.4744 14.5115 28.2779C14.5596 28.0814 14.647 27.8967 14.7683 27.7348C14.8897 27.573 15.0426 27.4373 15.2177 27.3361C15.3929 27.2348 15.5867 27.1701 15.7875 27.1457C15.9883 27.1213 16.192 27.1378 16.3863 27.1941C16.5806 27.2505 16.7615 27.3456 16.9181 27.4737C17.0747 27.6018 17.2037 27.7602 17.2975 27.9395C18.6981 30.3601 20.8994 31.6895 23.5 31.6895C26.1006 31.6895 28.3019 30.3582 29.7025 27.9395C29.7963 27.7602 29.9253 27.6018 30.0819 27.4737C30.2385 27.3456 30.4194 27.2505 30.6137 27.1941C30.808 27.1378 31.0117 27.1213 31.2125 27.1457C31.4133 27.1701 31.6072 27.2348 31.7823 27.3361C31.9575 27.4373 32.1103 27.573 32.2317 27.7348C32.3531 27.8967 32.4404 28.0814 32.4886 28.2779C32.5367 28.4744 32.5446 28.6786 32.5117 28.8782C32.4789 29.0778 32.406 29.2687 32.2975 29.4395ZM30.25 22.6895C29.805 22.6895 29.37 22.5575 29 22.3103C28.63 22.063 28.3416 21.7116 28.1713 21.3005C28.001 20.8894 27.9564 20.437 28.0432 20.0005C28.1301 19.564 28.3444 19.1631 28.659 18.8485C28.9737 18.5338 29.3746 18.3195 29.8111 18.2327C30.2475 18.1459 30.6999 18.1904 31.111 18.3607C31.5222 18.531 31.8736 18.8194 32.1208 19.1894C32.368 19.5594 32.5 19.9944 32.5 20.4395C32.5 21.0362 32.263 21.6085 31.841 22.0304C31.419 22.4524 30.8467 22.6895 30.25 22.6895Z';
+const SMILEY_HAPPY_SHIFTED = 'M24.5 4.68945C20.6433 4.68945 16.8731 5.83311 13.6664 7.9758C10.4596 10.1185 7.96027 13.164 6.48436 16.7271C5.00845 20.2903 4.62228 24.2111 5.3747 27.9937C6.12711 31.7763 7.9843 35.2509 10.7114 37.978C13.4386 40.7052 16.9131 42.5624 20.6957 43.3148C24.4784 44.0672 28.3992 43.681 31.9623 42.2051C35.5255 40.7292 38.571 38.2298 40.7137 35.0231C42.8564 31.8163 44 28.0462 44 24.1895C43.9946 19.0194 41.9383 14.0627 38.2826 10.4069C34.6268 6.75112 29.6701 4.69491 24.5 4.68945ZM17.75 18.1895C18.195 18.1895 18.63 18.3214 19 18.5686C19.3701 18.8159 19.6584 19.1673 19.8287 19.5784C19.999 19.9896 20.0436 20.442 19.9568 20.8784C19.87 21.3149 19.6557 21.7158 19.341 22.0304C19.0263 22.3451 18.6254 22.5594 18.189 22.6462C17.7525 22.733 17.3001 22.6885 16.889 22.5182C16.4778 22.3479 16.1264 22.0595 15.8792 21.6895C15.632 21.3195 15.5 20.8845 15.5 20.4395C15.5 19.8427 15.7371 19.2704 16.159 18.8485C16.581 18.4265 17.1533 18.1895 17.75 18.1895ZM33.2975 29.4395C31.3681 32.7751 28.1619 34.6895 24.5 34.6895C20.8381 34.6895 17.6319 32.777 15.7025 29.4395C15.594 29.2687 15.5211 29.0778 15.4883 28.8782C15.4554 28.6786 15.4633 28.4744 15.5115 28.2779C15.5596 28.0814 15.647 27.8967 15.7683 27.7348C15.8897 27.573 16.0426 27.4373 16.2177 27.3361C16.3929 27.2348 16.5867 27.1701 16.7875 27.1457C16.9883 27.1213 17.192 27.1378 17.3863 27.1941C17.5806 27.2505 17.7615 27.3456 17.9181 27.4737C18.0747 27.6018 18.2037 27.7602 18.2975 27.9395C19.6981 30.3601 21.8994 31.6895 24.5 31.6895C27.1006 31.6895 29.3019 30.3582 30.7025 27.9395C30.7963 27.7602 30.9253 27.6018 31.0819 27.4737C31.2385 27.3456 31.4194 27.2505 31.6137 27.1941C31.808 27.1378 32.0117 27.1213 32.2125 27.1457C32.4133 27.1701 32.6072 27.2348 32.7823 27.3361C32.9575 27.4373 33.1103 27.573 33.2317 27.7348C33.3531 27.8967 33.4404 28.0814 33.4886 28.2779C33.5367 28.4744 33.5446 28.6786 33.5117 28.8782C33.4789 29.0778 33.406 29.2687 33.2975 29.4395ZM31.25 22.6895C30.805 22.6895 30.37 22.5575 30 22.3103C29.63 22.063 29.3416 21.7116 29.1713 21.3005C29.001 20.8894 28.9564 20.437 29.0432 20.0005C29.1301 19.564 29.3444 19.1631 29.659 18.8485C29.9737 18.5338 30.3746 18.3195 30.8111 18.2327C31.2475 18.1459 31.6999 18.1904 32.111 18.3607C32.5222 18.531 32.8736 18.8194 33.1208 19.1894C33.368 19.5594 33.5 19.9944 33.5 20.4395C33.5 21.0362 33.263 21.6085 32.841 22.0304C32.419 22.4524 31.8467 22.6895 31.25 22.6895Z';
+const HEART = 'M24.7945 18.7681C23.1038 17.0773 20.3812 17.0773 18.6905 18.7681L18.0313 19.4279L17.3722 18.7688C15.6814 17.078 12.9589 17.078 11.2681 18.7688C9.5773 20.4595 9.5773 23.1821 11.2681 24.8728L18.0312 31.636L24.7944 24.8728C26.4852 23.1814 26.4852 20.4425 24.7944 18.7682L24.7945 18.7681Z';
+const FACES = {
+    [FeedbackRating.VeryUnsatisfied]: {
+        disc: { cx: 24.0014, cy: 23.7346 },
+        color: FACE_MUTED,
+        path: SMILEY_SAD,
+    },
+    [FeedbackRating.Unsatisfied]: {
+        disc: { cx: 24.0014, cy: 23.7346 },
+        color: FACE_MUTED,
+        path: SMILEY_FROWN,
+    },
+    [FeedbackRating.Neutral]: {
+        disc: { cx: 23.6607, cy: 23.7346 },
+        color: FACE_LAVENDER,
+        path: SMILEY_MEH,
+    },
+    [FeedbackRating.Satisfied]: {
+        disc: { cx: 21.5568, cy: 24.1896 },
+        color: FACE_LEMON,
+        path: SMILEY_HAPPY,
+    },
+    [FeedbackRating.VerySatisfied]: {
+        disc: { cx: 22.5568, cy: 24.1896 },
+        color: FACE_LEMON,
+        path: SMILEY_HAPPY_SHIFTED,
+    },
+};
+const DISC_RADIUS = 17.5568;
+export const FeedbackRatingIcon = ({ rating, size = 60, inkColor = DEFAULT_INK, className, }) => {
+    const face = FACES[rating];
+    return (_jsxs("svg", { className: className, width: size, height: size, viewBox: VIEW_BOX, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: { display: 'block', overflow: 'visible' }, role: 'presentation', children: [_jsx("circle", { cx: face.disc.cx, cy: face.disc.cy, r: DISC_RADIUS, fill: inkColor }), _jsx("path", { d: face.path, fill: face.color }), rating === FeedbackRating.VerySatisfied && (_jsx("g", { transform: 'translate(26 -21)', children: _jsx("path", { d: HEART, fill: inkColor }) }))] }));
+};

package/dist/stories/Feedback/FeedbackRatingIcon.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeedbackRatingIcon } from './FeedbackRatingIcon';
+declare const meta: Meta<typeof FeedbackRatingIcon>;
+export default meta;
+type Story = StoryObj<typeof FeedbackRatingIcon>;
+export declare const VeryUnsatisfied: Story;
+export declare const Unsatisfied: Story;
+export declare const Neutral: Story;
+export declare const Satisfied: Story;
+export declare const VerySatisfied: Story;
+export declare const CustomBrandInk: Story;

package/dist/stories/Feedback/FeedbackRatingIcon.stories.js

@@ -0,0 +1,61 @@
+import { FeedbackRatingIcon } from './FeedbackRatingIcon';
+import { FeedbackRating } from './types';
+const meta = {
+    title: 'Design System/Components/Feedback/FeedbackRatingIcon',
+    component: FeedbackRatingIcon,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        rating: {
+            control: 'select',
+            options: [
+                FeedbackRating.VeryUnsatisfied,
+                FeedbackRating.Unsatisfied,
+                FeedbackRating.Neutral,
+                FeedbackRating.Satisfied,
+                FeedbackRating.VerySatisfied,
+            ],
+            description: 'Which face of the rating scale to draw',
+            table: {
+                type: { summary: 'FeedbackRating' },
+            },
+        },
+        size: {
+            control: 'number',
+            description: 'Rendered width and height in px',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '60' },
+            },
+        },
+        inkColor: {
+            control: 'color',
+            description: 'Color of the disc behind the face; pass the active brand color under custom branding',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '#6301FE' },
+            },
+        },
+    },
+};
+export default meta;
+export const VeryUnsatisfied = {
+    args: { rating: FeedbackRating.VeryUnsatisfied },
+};
+export const Unsatisfied = {
+    args: { rating: FeedbackRating.Unsatisfied },
+};
+export const Neutral = {
+    args: { rating: FeedbackRating.Neutral },
+};
+export const Satisfied = {
+    args: { rating: FeedbackRating.Satisfied },
+};
+export const VerySatisfied = {
+    args: { rating: FeedbackRating.VerySatisfied },
+};
+export const CustomBrandInk = {
+    args: { rating: FeedbackRating.VerySatisfied, inkColor: '#B42318' },
+};

package/dist/stories/Feedback/index.d.ts

@@ -0,0 +1,3 @@
+export * from './FeedbackCard';
+export * from './FeedbackRatingIcon';
+export * from './types';

package/dist/stories/Feedback/index.js

@@ -0,0 +1,3 @@
+export * from './FeedbackCard';
+export * from './FeedbackRatingIcon';
+export * from './types';

package/dist/stories/Feedback/types.d.ts

@@ -0,0 +1,89 @@
+import { SxProps, Theme } from '@mui/material';
+/**
+ * The five points of the call-experience rating scale
+ */
+export declare enum FeedbackRating {
+    VeryUnsatisfied = 1,
+    Unsatisfied = 2,
+    Neutral = 3,
+    Satisfied = 4,
+    VerySatisfied = 5
+}
+/**
+ * FeedbackRatingIcon component props
+ */
+export type FeedbackRatingIconProps = {
+    /** Which face of the rating scale to draw */
+    rating: FeedbackRating;
+    /** Rendered width and height in px */
+    size?: number;
+    /**
+     * Color of the disc behind the face, and of the heart on `VerySatisfied`.
+     * This is the brand-colored part of the illustration — pass the active brand
+     * color to make the faces follow custom branding.
+     */
+    inkColor?: string;
+    /** CSS class name for additional styling */
+    className?: string;
+};
+/**
+ * FeedbackCard component props
+ *
+ * The card is fully controlled: it renders the rating scale, and — once
+ * `expanded` is set — the follow-up topic, comment and consent fields. State
+ * and submission belong to the consumer.
+ */
+export type FeedbackCardProps = {
+    /** Question shown above the rating scale */
+    title?: string;
+    /** Currently selected rating, or `null` while the scale is untouched */
+    rating: FeedbackRating | null;
+    /** Callback function to handle a rating change; `null` when it is cleared */
+    onRatingChange: (rating: FeedbackRating | null) => void;
+    /** Labels under each face, keyed by rating */
+    ratingLabels?: Record<FeedbackRating, string>;
+    /** Brand-colored part of the faces; see `FeedbackRatingIconProps.inkColor` */
+    ratingInkColor?: string;
+    /** Whether the follow-up fields are shown */
+    expanded?: boolean;
+    /** Heading of the follow-up fields */
+    detailsTitle?: string;
+    /** Selectable topics offered with the follow-up fields */
+    topics?: string[];
+    /** Currently selected topic, or `null` when none is picked */
+    selectedTopic?: string | null;
+    /** Callback function to handle a topic change; `null` when it is cleared */
+    onTopicChange?: (topic: string | null) => void;
+    /** Free-text comment */
+    comment?: string;
+    /** Callback function to handle a comment change */
+    onCommentChange?: (comment: string) => void;
+    /** Placeholder of the comment field */
+    commentPlaceholder?: string;
+    /** Whether the contact-consent checkbox is ticked */
+    contactConsent?: boolean;
+    /** Callback function to handle a contact-consent change */
+    onContactConsentChange?: (contactConsent: boolean) => void;
+    /** Label of the contact-consent checkbox */
+    contactConsentLabel?: string;
+    /** Label of the submit button */
+    submitText?: string;
+    /** Callback function to handle submit button click */
+    onSubmit: () => void;
+    /** Whether the submit button is disabled */
+    submitDisabled?: boolean;
+    /** Whether the submit button shows its loading spinner */
+    submitLoading?: boolean;
+    /** DOM id forwarded to the submit button, for analytics hooks */
+    submitId?: string;
+    /** Error message shown under the question */
+    errorText?: string | null;
+    /** Background of the card; override to follow a custom brand color */
+    surfaceColor?: string;
+    /** Background of each rating tile and topic chip */
+    itemColor?: string;
+    /** CSS class name for additional styling */
+    className?: string;
+    /** Style object to apply to the component */
+    sx?: SxProps<Theme>;
+};

package/dist/stories/Feedback/types.js

@@ -0,0 +1,11 @@
+/**
+ * The five points of the call-experience rating scale
+ */
+export var FeedbackRating;
+(function (FeedbackRating) {
+    FeedbackRating[FeedbackRating["VeryUnsatisfied"] = 1] = "VeryUnsatisfied";
+    FeedbackRating[FeedbackRating["Unsatisfied"] = 2] = "Unsatisfied";
+    FeedbackRating[FeedbackRating["Neutral"] = 3] = "Neutral";
+    FeedbackRating[FeedbackRating["Satisfied"] = 4] = "Satisfied";
+    FeedbackRating[FeedbackRating["VerySatisfied"] = 5] = "VerySatisfied";
+})(FeedbackRating || (FeedbackRating = {}));

package/dist/stories/Navigation/CallHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CallHeaderProps } from './types';
+export declare const CallHeader: React.FC<CallHeaderProps>;

package/dist/stories/Navigation/CallHeader.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
+import { Logo, LogoVariant } from '../UI';
+export const CallHeader = ({ logoUrl, logoColor, onLogoClick, actionText = 'Create Your Own Agent', onActionClick, showAction = true, actionId, className, sx, }) => {
+    return (_jsxs(Box, { component: 'header', className: className, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', flexShrink: 0, width: '100%', boxSizing: 'border-box', borderBottom: '1px solid var(--color-border-border-divider)', bgcolor: 'var(--color-background-bg-page)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', sx: sx, children: [_jsx(Box, { display: 'flex', alignItems: 'center', onClick: onLogoClick, sx: {
+                    cursor: onLogoClick ? 'pointer' : 'default',
+                    '& svg, & img': {
+                        maxWidth: { xs: 140, sm: 'none' },
+                        height: 'auto',
+                    },
+                }, children: _jsx(Logo, { svgUrl: logoUrl ?? undefined, variant: LogoVariant.Horizontal, color: logoColor }) }), showAction && (_jsx(MainButton, { hierarchy: ButtonHierarchy.SecondaryColor, size: ButtonSize.sm, text: actionText, onClick: onActionClick, id: actionId }))] }));
+};

package/dist/stories/Navigation/CallHeader.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CallHeader } from './CallHeader';
+declare const meta: Meta<typeof CallHeader>;
+export default meta;
+type Story = StoryObj<typeof CallHeader>;
+export declare const Default: Story;
+export declare const WithoutAction: Story;
+export declare const CustomBranding: Story;

package/dist/stories/Navigation/CallHeader.stories.js

@@ -0,0 +1,91 @@
+import { CallHeader } from './CallHeader';
+const meta = {
+    title: 'Design System/Components/Navigation/CallHeader',
+    component: CallHeader,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        logoUrl: {
+            control: 'text',
+            description: 'Custom-branding logo URL; the Beyond Presence mark is drawn when omitted',
+            table: {
+                type: { summary: 'string | null' },
+            },
+        },
+        logoColor: {
+            control: 'text',
+            description: 'Color of the built-in logo mark; ignored once `logoUrl` is set',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onLogoClick: {
+            description: 'Callback function to handle logo click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        actionText: {
+            control: 'text',
+            description: 'Label of the trailing call-to-action button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Create Your Own Agent' },
+            },
+        },
+        onActionClick: {
+            description: 'Callback function to handle call-to-action button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        showAction: {
+            control: 'boolean',
+            description: 'Whether the trailing call-to-action button is rendered',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        actionId: {
+            control: 'text',
+            description: 'DOM id forwarded to the call-to-action button, for analytics hooks',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        className: {
+            control: 'text',
+            description: 'CSS class name for additional styling',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        logoColor: 'var(--color-foreground-fg-brand-logo)',
+        actionText: 'Create Your Own Agent',
+        showAction: true,
+        actionId: 'call-header-create-agent',
+        onLogoClick: () => { },
+        onActionClick: () => { },
+    },
+};
+export const WithoutAction = {
+    args: {
+        ...Default.args,
+        showAction: false,
+    },
+};
+export const CustomBranding = {
+    args: {
+        ...Default.args,
+        logoUrl: 'https://placehold.co/160x28/6301fe/ffffff.png?text=ACME',
+        showAction: false,
+    },
+};

package/dist/stories/Navigation/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Drawer';
 export * from './SubNav';
 export * from './Header';
+export * from './CallHeader';
 export * from './MobileNav';
 export * from './MobileNavBar';
 export * from './NavItem';

package/dist/stories/Navigation/index.js

@@ -1,6 +1,7 @@
 export * from './Drawer';
 export * from './SubNav';
 export * from './Header';
+export * from './CallHeader';
 export * from './MobileNav';
 export * from './MobileNavBar';
 export * from './NavItem';

package/dist/stories/Navigation/types.d.ts

@@ -215,3 +215,26 @@ export interface MobileNavBarProps {
     /** The class name to apply to the component */
     className?: string;
 }
+/**
+ * CallHeader component props
+ */
+export type CallHeaderProps = {
+    /** Custom-branding logo URL; the Beyond Presence mark is drawn when omitted */
+    logoUrl?: string | null;
+    /** Color of the built-in logo mark; ignored once `logoUrl` is set */
+    logoColor?: string;
+    /** Callback function to handle logo click */
+    onLogoClick?: () => void;
+    /** Label of the trailing call-to-action button */
+    actionText?: string;
+    /** Callback function to handle call-to-action button click */
+    onActionClick?: () => void;
+    /** Whether the trailing call-to-action button is rendered */
+    showAction?: boolean;
+    /** DOM id forwarded to the call-to-action button, for analytics hooks */
+    actionId?: string;
+    /** CSS class name for additional styling */
+    className?: string;
+    /** Style object to apply to the component */
+    sx?: SxProps<Theme>;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.7.1",
+  "version": "0.7.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",