feat: add additional options to the nps component

Author: christianmat

apps/smithy/src/stories/Survey/Survey.stories.tsx

@@ -9,12 +9,17 @@ export default {
 export const NPS = {
   args: {
     dismissible: true,
+    options: [
+      { label: "😞", value: "0" },
+      { label: "😐", value: "1" },
+      { label: "😀", value: "2" },
+    ],
   },
   decorators: [
     (_: StoryFn, options: StoryContext) => {
       return (
         <Box fontFamily="Arial">
-          <Box backgroundColor="blue" height="500px">
+          <Box height="500px">
             Other elements on the page
             <Button.Primary
               onClick={() => {

packages/react/src/components/Survey/NPS.tsx

@@ -4,16 +4,29 @@ import { Form, type FormProps } from '@/components/Form'
 import { NPSField } from './NPSField'
 import { useFlow } from '@/hooks/useFlow'
 
-export function NPS({ as = Dialog, flowId, fieldTypes, part, ...props }: FormProps) {
+type NPSOptions = { label: string; value: string }[]
+
+interface NPSProps extends FormProps {
+  /**
+   * The options to display in the NPS field.
+   * If not provided, the default NPS numbers from 0 to 10 will be used.
+   */
+  options?: NPSOptions
+}
+
+export function NPS({ as = Dialog, flowId, fieldTypes, part, options, ...props }: NPSProps) {
   const { flow } = useFlow(flowId)
 
+  const defaultOptions = [...Array(11)].map((_, i) => ({ label: `${i}`, value: `${i}` }))
+  const npsOptions = options || defaultOptions
+
   return (
     <Form
       alignSelf="end"
       as={as}
       flowId={flowId}
       fieldTypes={{
-        nps: NPSField,
+        nps: (fieldProps) => <NPSField {...fieldProps} options={npsOptions} />,
         ...fieldTypes,
       }}
       modal={false}
@@ -37,7 +50,7 @@ export function NPS({ as = Dialog, flowId, fieldTypes, part, ...props }: FormPro
           '.fr-form': {
             padding: '20px',
             '@media (min-width: 660px)': {
-              minWidth: '600px',
+              minWidth: 'fit-content',
             },
             minWidth: '100%',
           },

packages/react/src/components/Survey/NPSField.tsx

@@ -3,18 +3,23 @@ import { Flex } from '@/components/Flex'
 import { FormFieldProps } from '@/components/Form'
 import { Text } from '@/components/Text'
 
-export function NPSField({ field, fieldData, submit }: FormFieldProps) {
-  const buttons = [...Array(11)].map((_, i) => {
-    const Component = field.value === i ? Button.Primary : Button.Secondary
+export function NPSField({
+  field,
+  fieldData,
+  submit,
+  options,
+}: FormFieldProps & { options: { label: string; value: string }[] }) {
+  const buttons = options.map((option) => {
+    const Component = field.value === option.value ? Button.Primary : Button.Secondary
     return (
       <Component
         borderWidth="1px"
-        key={i}
+        key={option.value}
         onClick={() => {
-          field.onChange(i)
+          field.onChange(option.value)
           submit()
         }}
-        title={`${i}`}
+        title={option.label}
         css={{
           '.fr-button-title': {
             fontSize: '15px',