fix(abp1-fixes): add hcd feedback to ABP1

* add all abp1 v2 changes * add horizontal radio button logic * add clear data button * add parent ID into RHF slot * Update SlotField.tsx * add logic to show hide incremental amount * Update textarea.tsx * Update v202402.ts * add px changes * Update v202402.ts * Update tailwind.config.js * add additional prop classname * Update v202402.ts * cleanup
Enterprise-CMCS · Jul 1, 2024 · b42d55c · b42d55c
1 parent 19f4106
commit b42d55c
Show file tree

Hide file tree

Showing 9 changed files with 347 additions and 286 deletions.
diff --git a/src/packages/shared-types/forms.ts b/src/packages/shared-types/forms.ts
@@ -33,6 +33,7 @@ export type RHFSlotProps = {
   descriptionClassName?: string;
   dependency?: DependencyRule;
   rules?: RegisterOptions;
+  horizontalLayout?: boolean;
 } & {
   [K in keyof RHFComponentMap]: {
     rhf: K;

diff --git a/src/packages/shared-types/inputs.ts b/src/packages/shared-types/inputs.ts
@@ -18,6 +18,7 @@ export type DatePickerProps = {
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   icon?: string;
+  iconRight?: boolean;
 }
 
 export type RadioProps = React.ComponentPropsWithoutRef<

diff --git a/src/services/api/webforms/ABP1/v202402.ts b/src/services/api/webforms/ABP1/v202402.ts
diff --git a/src/services/ui/src/components/Inputs/button.tsx b/src/services/ui/src/components/Inputs/button.tsx
@@ -6,7 +6,7 @@ import { cn } from "@/utils";
 import { Loader2 } from "lucide-react";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-md text-base font-bold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

diff --git a/src/services/ui/src/components/Inputs/input.tsx b/src/services/ui/src/components/Inputs/input.tsx
@@ -3,18 +3,20 @@ import { cn } from "@/utils";
 import { InputProps } from "shared-types";
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, icon, ...props }, ref) => {
+  ({ className, icon, iconRight, ...props }, ref) => {
     return (
-      <div className="relative">
+      <div className="relative w-fit">
         {icon && (
-          <span className="absolute inset-y-0 left-0 flex items-center pl-2 text-gray-500">
+          <span
+            className={`absolute inset-y-0  flex items-center  text-gray-500 ${iconRight ? "right-0 pr-2" : "left-0 pl-2"}`}
+          >
             {icon}
           </span>
         )}
         <input
           className={cn(
             "flex h-9 w-full rounded-sm border border-black bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-            icon && "pl-6",
+            icon && (iconRight ? "pr-6" : "pl-6"),
             className,
           )}
           ref={ref}

diff --git a/src/services/ui/src/components/RHF/Slot.tsx b/src/services/ui/src/components/RHF/Slot.tsx
@@ -24,6 +24,7 @@ export const RHFSlot = <
   descriptionClassName,
   labelClassName,
   formItemClassName,
+  horizontalLayout,
   ...rest
 }: RHFSlotProps & { control: any; parentId?: string }): ControllerProps<
   TFieldValues,
@@ -39,9 +40,11 @@ export const RHFSlot = <
 
     return (
       <FormItem
-        className={`flex flex-col gap-1 py-2${
+        className={`flex gap-1 py-2${
           formItemClassName ? ` ${formItemClassName}` : ""
-        }`}
+        }
+        ${horizontalLayout ? "" : " flex-col"}
+        `}
         data-testid={rest.name + "Wrapper"}
       >
         {(label || styledLabel) && (
@@ -55,7 +58,12 @@ export const RHFSlot = <
           </FormDescription>
         )}
         <FormControl>
-          <SlotField {...rest} control={control} field={field} />
+          <SlotField
+            {...rest}
+            horizontalLayout={horizontalLayout}
+            control={control}
+            field={field}
+          />
         </FormControl>
         {description && !descriptionAbove && (
           <FormDescription className={descriptionClassName}>

diff --git a/src/services/ui/src/components/RHF/SlotField.tsx b/src/services/ui/src/components/RHF/SlotField.tsx
@@ -52,6 +52,7 @@ export const SlotField = ({
   parentId,
   fields,
   name,
+  horizontalLayout,
 }: SlotFieldProps) => {
   switch (rhf) {
     case "Input":
@@ -211,7 +212,7 @@ export const SlotField = ({
         <RadioGroup
           onValueChange={field.onChange}
           defaultValue={field.value}
-          className="flex flex-col space-y-1"
+          className={`flex  ${horizontalLayout ? "pl-5 gap-5" : "flex-col space-y-1"}`}
         >
           {(props as RHFComponentMap["Radio"]).options.map((OPT) => {
             return (
@@ -275,7 +276,7 @@ export const OptChildren = ({
               control={control}
               name={parentId + SLOT.name}
               {...(SLOT.rules && { rules: SLOT.rules })}
-              render={RHFSlot({ ...SLOT, parentId, control })}
+              render={RHFSlot({ ...SLOT, control, parentId })}
             />
           </div>
         ))}

diff --git a/src/services/ui/src/components/RHF/dependencyWrapper.tsx b/src/services/ui/src/components/RHF/dependencyWrapper.tsx
@@ -4,7 +4,7 @@ import { DependencyRule, DependencyWrapperProps } from "shared-types";
 
 const checkTriggeringValue = (
   dependentValue: unknown[],
-  dependency?: DependencyRule
+  dependency?: DependencyRule,
 ) => {
   return !!dependency?.conditions?.every((d, i) => {
     switch (d.type) {
@@ -27,7 +27,7 @@ const checkTriggeringValue = (
 };
 
 export const DependencyWrapper = (
-  props: PropsWithChildren<DependencyWrapperProps>
+  props: PropsWithChildren<DependencyWrapperProps>,
 ) => {
   // Check for dependencies which won't exist outside of forms
   if (
@@ -51,7 +51,7 @@ const DependencyWrapperHandler = ({
   const { watch, setValue } = useFormContext();
   const [wasSetLast, setWasSetLast] = useState(false);
   const dependentValues = watch(
-    dependency?.conditions?.map((c) => c.name) ?? []
+    dependency?.conditions?.map((c) => c.name) ?? [],
   );
   const isTriggered =
     dependency && checkTriggeringValue(dependentValues, dependency);

diff --git a/src/services/ui/src/features/webforms/WebFormBody.tsx b/src/services/ui/src/features/webforms/WebFormBody.tsx
@@ -83,7 +83,7 @@ const ClearDataButton: FC<{ reset: () => void }> = ({ reset }) => {
   if (clearDataButton) {
     return (
       <Button type="button" onClick={reset} variant="outline" className="mx-2">
-        Clear Data
+        Clear
       </Button>
     );
   }