@openmrs/esm-form-builder-app 2.0.2-pre.563 → 2.0.2-pre.570

package/src/components/form-renderer/form-renderer.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use "@carbon/type";
 
 .container {
   background-color: colors.$white-0;

package/src/components/interactive-builder/draggable-question.component.tsx

@@ -2,24 +2,24 @@ import React from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { CSS } from "@dnd-kit/utilities";
 import { useTranslation } from "react-i18next";
-import { Button } from "@carbon/react";
-import { Edit, Replicate, TrashCan, Draggable } from "@carbon/react/icons";
+import { Button, CopyButton } from "@carbon/react";
+import { Draggable, Edit, TrashCan } from "@carbon/react/icons";
 import type { Question } from "../../types";
 import styles from "./draggable-question.scss";
 
 type DraggableQuestionProps = {
-  allQuestions: Array<Question>;
   question: Question;
   pageIndex: number;
   sectionIndex: number;
   questionIndex: number;
-  duplicateQuestion: (
+  handleDuplicateQuestion: (
     question: Question,
     pageId: number,
     sectionId: number
   ) => void;
   handleEditButtonClick: (question: Question) => void;
   handleDeleteButtonClick: (question: Question) => void;
+  questionCount: number;
 };
 
 export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
@@ -27,10 +27,10 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   pageIndex,
   sectionIndex,
   questionIndex,
-  duplicateQuestion,
+  handleDuplicateQuestion,
   handleDeleteButtonClick,
   handleEditButtonClick,
-  allQuestions,
+  questionCount,
 }) => {
   const { t } = useTranslation();
   const draggableId = `question-${pageIndex}-${sectionIndex}-${questionIndex}`;
@@ -38,8 +38,9 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   const { attributes, listeners, transform, isDragging, setNodeRef } =
     useDraggable({
       id: draggableId,
-      disabled: allQuestions.length <= 1,
+      disabled: questionCount <= 1,
     });
+
   const style = {
     transform: CSS.Translate.toString(transform),
   };
@@ -60,40 +61,38 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
         <p className={styles.questionLabel}>{question.label}</p>
       </div>
       <div className={styles.buttonsContainer}>
-        <Button
-          kind="ghost"
-          size="sm"
-          enterDelayMs={300}
+        <CopyButton
+          align="top"
+          className="cds--btn--sm"
+          feedback={t("duplicated", "Duplicated") + "!"}
           iconDescription={t("duplicateQuestion", "Duplicate question")}
-          onClick={() => {
-            if (!isDragging) {
-              duplicateQuestion(question, pageIndex, sectionIndex);
-            }
-          }}
-          renderIcon={(props) => <Replicate size={16} {...props} />}
-          hasIconOnly
+          kind="ghost"
+          onClick={() =>
+            !isDragging &&
+            handleDuplicateQuestion(question, pageIndex, sectionIndex)
+          }
         />
         <Button
-          kind="ghost"
-          size="sm"
           enterDelayMs={300}
+          hasIconOnly
           iconDescription={t("editQuestion", "Edit question")}
+          kind="ghost"
           onClick={() => {
             if (!isDragging) {
               handleEditButtonClick(question);
             }
           }}
           renderIcon={(props) => <Edit size={16} {...props} />}
-          hasIconOnly
+          size="md"
         />
         <Button
-          hasIconOnly
           enterDelayMs={300}
+          hasIconOnly
           iconDescription={t("deleteQuestion", "Delete question")}
           kind="ghost"
           onClick={handleDeleteButtonClick}
           renderIcon={(props) => <TrashCan size={16} {...props} />}
-          size="sm"
+          size="md"
         />
       </div>
     </div>

package/src/components/interactive-builder/draggable-question.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use "@carbon/type";
 
 .buttonsContainer {
   display: flex;
@@ -24,10 +24,6 @@
   width: 100%;
 }
 
-.normal:hover {
-  background-color: colors.$gray-70;
-}
-
 .isDragged {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   background-color: rgba(255, 255, 255, 0.552);
@@ -42,10 +38,10 @@
 }
 
 .dragIcon {
-  margin: 0 spacing.$spacing-03;
+  margin: 0 layout.$spacing-03;
   padding: 0.25rem;
   color: colors.$gray-50;
-  margin-top: 0.2rem;
+  margin-top: 0.25rem;
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 0.25rem;