mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-05 21:32:02 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

feat: add descriptive for question types (#3356)

Browse Source 
Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
Co-authored-by: Johannes <johannes@formbricks.com>
This commit is contained in:
Chase Nelson
2024-10-14 18:27:53 -06:00
committed by GitHub
parent be96885260
commit 03df021fbf
2 changed files with 31 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx
View File

@@ -21,6 +21,7 @@ interface AddQuestionButtonProps {
export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestionButtonProps) => {
const [open, setOpen] = useState(false);
const [hoveredQuestionId, setHoveredQuestionId] = useState<string | null>(null);
const availableQuestionTypes = isCxMode ? CXQuestionTypes : questionTypes;
@@ -30,7 +31,7 @@ export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestio
onOpenChange={setOpen}
className={cn(
open ? "shadow-lg" : "shadow-md",
"group w-full space-y-2 rounded-lg border border-slate-300 bg-white duration-300 hover:cursor-pointer hover:bg-slate-50"
"group w-full space-y-2 rounded-lg border border-slate-300 bg-white duration-200 hover:cursor-pointer hover:bg-slate-50"
)}>
<Collapsible.CollapsibleTrigger asChild className="group h-full w-full">
<div className="inline-flex">
@@ -49,7 +50,7 @@ export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestio
<button
type="button"
key={questionType.id}
className="mx-2 inline-flex items-center rounded p-0.5 px-4 py-2 text-sm font-medium text-slate-700 last:mb-2 hover:bg-slate-100 hover:text-slate-800"
className="group relative mx-2 inline-flex items-center justify-between rounded p-0.5 px-4 py-2 text-sm font-medium text-slate-700 last:mb-2 hover:bg-slate-100 hover:text-slate-800"
onClick={() => {
addQuestion({
...universalQuestionPresets,
@@ -58,9 +59,19 @@ export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestio
type: questionType.id,
});
setOpen(false);
}}>
<questionType.icon className="text-brand-dark -ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
{questionType.label}
}}
onMouseEnter={() => setHoveredQuestionId(questionType.id)}
onMouseLeave={() => setHoveredQuestionId(null)}>
<div className="flex items-center">
<questionType.icon className="text-brand-dark -ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
{questionType.label}
</div>
<div
className={`absolute right-4 text-xs font-light text-slate-500 transition-opacity duration-200 ${
hoveredQuestionId === questionType.id ? "opacity-100" : "opacity-0"
}`}>
{questionType.description}
</div>
</button>
))}
</Collapsible.CollapsibleContent>