@beydesign/storybook 0.7.2 → 0.7.3

package/dist/stories/Feedback/FeedbackCard.js

@@ -30,7 +30,7 @@ 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, submitId, errorText, surfaceColor = DEFAULT_SURFACE, itemColor = DEFAULT_ITEM, className, sx, }) => {
+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);
     };
@@ -86,7 +86,7 @@ export const FeedbackCard = ({ title = 'How was your call experience with this a
                                     '&.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, onClick: onSubmit, hierarchy: ButtonHierarchy.Primary, size: ButtonSize.sm, id: submitId }) })] }));
+                                } }), _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 = () => {

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

@@ -63,6 +63,14 @@ const meta = {
                 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',
@@ -112,7 +120,7 @@ export const WithError = {
 export const Submitting = {
     args: {
         ...Expanded.args,
-        submitText: 'Submitting...',
+        submitLoading: true,
         submitDisabled: true,
     },
 };

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

@@ -72,6 +72,8 @@ export type FeedbackCardProps = {
     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 */

package/package.json

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