feat(force-value) - improve to use form description component (#984)

* feat(force-value) - improve to use form description component

* fix description

* fix(force-value-fields) - fix semantics a bit

* fix semantics

Author: gabrielseco

example/src/Onboarding.tsx

@@ -436,6 +436,10 @@ const OnboardingWithProps = ({
             // Nigeria
             contract_details: 2,
           },
+          NLD: {
+            // Netherlands
+            contract_details: 2,
+          },
           NOR: {
             // Norway
             contract_details: 2,

src/components/form/fields/ForcedValueField.tsx

@@ -1,39 +1,9 @@
 import { useFormContext } from 'react-hook-form';
 import { sanitizeHtml } from '@/src/lib/utils';
 import { useEffect } from 'react';
-import { ZendeskTriggerButton } from '@/src/components/shared/zendesk-drawer/ZendeskTriggerButton';
-
-const Description = ({
-  name,
-  description,
-  helpCenter,
-}: {
-  name: string;
-  description: string;
-  helpCenter?: {
-    callToAction: string;
-    id: number;
-    url: string;
-    label: string;
-  };
-}) => {
-  return (
-    <span>
-      <span
-        className={`text-xs RemoteFlows__ForcedValue__Description__${name}`}
-        dangerouslySetInnerHTML={{ __html: sanitizeHtml(description) }}
-      />
-      {helpCenter?.callToAction && helpCenter?.id && (
-        <ZendeskTriggerButton
-          className='RemoteFlows__ForcedValue__HelpCenterLink'
-          zendeskId={helpCenter.id}
-        >
-          {helpCenter.callToAction}
-        </ZendeskTriggerButton>
-      )}
-    </span>
-  );
-};
+import { HelpCenterDataProps } from '@/src/types/fields';
+import { BaseFormDescription as Description } from '@/src/components/ui/form';
+import { HelpCenter } from '@/src/components/shared/zendesk-drawer/HelpCenter';
 
 export type ForcedValueFieldProps = {
   name: string;
@@ -44,12 +14,7 @@ export type ForcedValueFieldProps = {
     description?: string;
   };
   label: string;
-  helpCenter?: {
-    callToAction: string;
-    id: number;
-    url: string;
-    label: string;
-  };
+  helpCenter?: HelpCenterDataProps;
 };
 
 export function ForcedValueField({
@@ -61,40 +26,54 @@ export function ForcedValueField({
   helpCenter,
 }: ForcedValueFieldProps) {
   const { setValue } = useFormContext();
-  const descriptionSanitized = sanitizeHtml(
-    statement?.description || description,
-  );
+  const forcedValueDescription = statement?.description || description;
 
-  const titleSanitized = statement?.title
+  const forcedValueTitle = statement?.title
     ? sanitizeHtml(statement?.title)
     : sanitizeHtml(label);
 
+  const titleId = `forced-value-${name}-title`;
+  const descriptionId = `forced-value-${name}-description`;
+
   useEffect(() => {
     setValue(name, value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const isHiddenValue = !descriptionSanitized && !statement?.title;
+  const isHiddenValue = !forcedValueDescription && !statement?.title;
 
   if (isHiddenValue) {
     return null;
   }
 
   return (
-    <div>
-      {titleSanitized && (
+    <div
+      role='group'
+      aria-labelledby={forcedValueTitle ? titleId : undefined}
+      aria-describedby={forcedValueDescription ? descriptionId : undefined}
+    >
+      {forcedValueTitle && (
         <p
+          id={titleId}
           className={`text-sm RemoteFlows__ForcedValue__Title__${name}`}
           dangerouslySetInnerHTML={{
-            __html: titleSanitized,
+            __html: forcedValueTitle,
           }}
         />
       )}
       <Description
-        name={name}
-        description={descriptionSanitized}
-        helpCenter={helpCenter}
-      />
+        as='span'
+        id={descriptionId}
+        className={`text-xs RemoteFlows__ForcedValue__Description__${name}`}
+        helpCenter={
+          <HelpCenter
+            className='RemoteFlows__ForcedValue__HelpCenterLink'
+            helpCenter={helpCenter}
+          />
+        }
+      >
+        {forcedValueDescription}
+      </Description>
     </div>
   );
 }

src/components/shared/zendesk-drawer/HelpCenter.tsx

@@ -3,15 +3,16 @@ import { HelpCenterDataProps } from '@/src/types/fields';
 
 type HelpCenterProps = {
   helpCenter?: HelpCenterDataProps;
+  className?: string;
 };
 
-export function HelpCenter({ helpCenter }: HelpCenterProps) {
+export function HelpCenter({ helpCenter, className }: HelpCenterProps) {
   if (!helpCenter || !helpCenter.id || !helpCenter.callToAction) {
     return null;
   }
 
   return (
-    <ZendeskTriggerButton zendeskId={helpCenter.id}>
+    <ZendeskTriggerButton zendeskId={helpCenter.id} className={className}>
       {helpCenter.callToAction}
     </ZendeskTriggerButton>
   );

src/components/ui/form.tsx

@@ -131,26 +131,26 @@ const FormControl = React.forwardRef<
 
 FormControl.displayName = 'FormControl';
 
-function FormDescription<T extends React.ElementType = 'p'>({
+export function BaseFormDescription<T extends React.ElementType = 'p'>({
   helpCenter,
   className,
   children,
   as,
+  id,
   ...props
 }: React.ComponentProps<'p'> & {
   helpCenter?: React.ReactNode;
   children?: React.ReactNode | (() => React.ReactNode);
   as?: T;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className'>) {
-  const { formDescriptionId } = useFormField();
+  id?: string;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className' | 'id'>) {
   const Component = as || 'p';
-
   if (typeof children === 'string') {
     return (
       <>
         <Component
           data-slot='form-description'
-          id={formDescriptionId}
+          id={id}
           className={cn('text-base-color text-xs', className)}
           data-sanitized='true'
           {...props}
@@ -161,13 +161,12 @@ function FormDescription<T extends React.ElementType = 'p'>({
       </>
     );
   }
-
   return (
     <Component
       data-slot='form-description'
-      id={formDescriptionId}
-      data-sanitized='false'
+      id={id}
       className={cn('text-base-color text-xs', className)}
+      data-sanitized='false'
       {...props}
     >
       {typeof children === 'function' ? children() : children}
@@ -176,6 +175,17 @@ function FormDescription<T extends React.ElementType = 'p'>({
   );
 }
 
+function FormDescription<T extends React.ElementType = 'p'>({
+  ...props
+}: React.ComponentProps<'p'> & {
+  helpCenter?: React.ReactNode;
+  children?: React.ReactNode | (() => React.ReactNode);
+  as?: T;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className' | 'id'>) {
+  const { formDescriptionId } = useFormField();
+  return <BaseFormDescription id={formDescriptionId} {...props} />;
+}
+
 function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message ?? '') : props.children;