From 3a1683eebdb49dc1a29a06d3466360fd24b03499 Mon Sep 17 00:00:00 2001 From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com> Date: Tue, 7 May 2024 18:12:48 +0530 Subject: [PATCH] feat: Slick card look (#2531) Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com> Co-authored-by: Johannes Co-authored-by: Matti Nannt --- apps/demo/components/SurveySwitch.tsx | 10 +- .../lookandfeel/components/ThemeStyling.tsx | 11 +- .../components/ThemeStylingPreviewSurvey.tsx | 11 +- .../edit/components/BackgroundStylingCard.tsx | 14 +- .../edit/components/CardStylingSettings.tsx | 60 +++++-- .../edit/components/FormStylingSettings.tsx | 12 +- .../surveys/components/Modal.tsx | 15 +- .../surveys/components/PreviewSurvey.tsx | 9 +- .../[surveyId]/components/InvalidLanguage.tsx | 12 -- .../s/[surveyId]/components/LinkSurvey.tsx | 21 ++- .../[surveyId]/components/MediaBackground.tsx | 6 +- .../s/[surveyId]/components/VerifyEmail.tsx | 27 +-- apps/web/playwright/js.spec.ts | 29 +-- apps/web/playwright/survey.spec.ts | 94 ++++++---- .../general/QuestionConditional.tsx | 15 ++ .../surveys/src/components/general/Survey.tsx | 149 +++++++++------- .../components/general/SurveyCloseButton.tsx | 24 +++ .../src/components/general/SurveyInline.tsx | 2 +- .../src/components/general/WelcomeCard.tsx | 2 +- .../components/questions/AddressQuestion.tsx | 4 +- .../src/components/questions/CTAQuestion.tsx | 4 +- .../src/components/questions/CalQuestion.tsx | 4 +- .../components/questions/ConsentQuestion.tsx | 4 +- .../src/components/questions/DateQuestion.tsx | 7 +- .../questions/FileUploadQuestion.tsx | 5 +- .../components/questions/MatrixQuestion.tsx | 4 +- .../questions/MultipleChoiceMultiQuestion.tsx | 5 +- .../MultipleChoiceSingleQuestion.tsx | 4 +- .../src/components/questions/NPSQuestion.tsx | 4 +- .../components/questions/OpenTextQuestion.tsx | 6 +- .../questions/PictureSelectionQuestion.tsx | 4 +- .../components/questions/RatingQuestion.tsx | 8 +- .../components/wrappers/AutoCloseWrapper.tsx | 2 +- .../surveys/src/components/wrappers/Modal.tsx | 37 +--- .../wrappers/StackedCardsContainer.tsx | 165 ++++++++++++++++++ packages/surveys/src/lib/ttc.ts | 15 +- packages/types/styling.ts | 2 +- packages/ui/StackedCardsContainer/index.tsx | 46 +++-- .../ui/Styling/components/CardArrangement.tsx | 86 ++++----- .../components/CardArrangementIcons.tsx | 48 +++++ 40 files changed, 681 insertions(+), 306 deletions(-) delete mode 100644 apps/web/app/s/[surveyId]/components/InvalidLanguage.tsx create mode 100644 packages/surveys/src/components/general/SurveyCloseButton.tsx create mode 100644 packages/surveys/src/components/wrappers/StackedCardsContainer.tsx create mode 100644 packages/ui/Styling/components/CardArrangementIcons.tsx diff --git a/apps/demo/components/SurveySwitch.tsx b/apps/demo/components/SurveySwitch.tsx index 002ddaa433..b1a72b26a7 100644 --- a/apps/demo/components/SurveySwitch.tsx +++ b/apps/demo/components/SurveySwitch.tsx @@ -13,12 +13,16 @@ export const SurveySwitch = ({ value, formbricks }: SurveySwitchProps) => { formbricks.logout(); window.location.href = `/${v}`; }}> - + - Website Surveys - App Surveys + + Website Surveys + + + App Surveys + ); diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStyling.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStyling.tsx index d615f09e7f..fa8b8922d9 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStyling.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStyling.tsx @@ -99,7 +99,7 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu roundness: 8, cardArrangement: { linkSurveys: "simple", - inAppSurveys: "simple", + appSurveys: "simple", }, }, }); @@ -132,7 +132,7 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu roundness: 8, cardArrangement: { linkSurveys: "simple", - inAppSurveys: "simple", + appSurveys: "simple", }, }); @@ -191,7 +191,7 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu setOpen={setFormStylingOpen} styling={styling} setStyling={setStyling} - hideCheckmark + isSettingsPage /> diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStylingPreviewSurvey.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStylingPreviewSurvey.tsx index 0e3b2c2e48..2adcaff93a 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStylingPreviewSurvey.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStylingPreviewSurvey.tsx @@ -105,9 +105,9 @@ export const ThemeStylingPreviewSurvey = ({ const highlightBorderColor = product.styling.highlightBorderColor?.light; - function resetQuestionProgress() { + const resetQuestionProgress = () => { setQuestionId(survey?.questions[0]?.id); - } + }; const onFileUpload = async (file: File) => file.name; @@ -121,7 +121,7 @@ export const ThemeStylingPreviewSurvey = ({ }; return ( -
+
>; colors: string[]; - hideCheckmark?: boolean; + isSettingsPage?: boolean; disabled?: boolean; environmentId: string; isUnsplashConfigured: boolean; @@ -29,7 +29,7 @@ export default function BackgroundStylingCard({ styling, setStyling, colors, - hideCheckmark, + isSettingsPage = false, disabled, environmentId, isUnsplashConfigured, @@ -79,7 +79,7 @@ export default function BackgroundStylingCard({ disabled && "cursor-not-allowed opacity-60 hover:bg-white" )}>
- {!hideCheckmark && ( + {!isSettingsPage && (
-

Background Styling

- {hideCheckmark && } +

+ Background Styling +

+ {isSettingsPage && }
-

+

Change the background to a color, image or animation.

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx index b72c358b66..fd253a1438 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx @@ -7,12 +7,13 @@ import React, { useMemo } from "react"; import { cn } from "@formbricks/lib/cn"; import { COLOR_DEFAULTS } from "@formbricks/lib/styling/constants"; import { TProduct, TProductStyling } from "@formbricks/types/product"; +import { TCardArrangementOptions } from "@formbricks/types/styling"; import { TSurveyStyling, TSurveyType } from "@formbricks/types/surveys"; import { Badge } from "@formbricks/ui/Badge"; import { ColorPicker } from "@formbricks/ui/ColorPicker"; import { Label } from "@formbricks/ui/Label"; import { Slider } from "@formbricks/ui/Slider"; -import { ColorSelectorWithLabel } from "@formbricks/ui/Styling"; +import { CardArrangement, ColorSelectorWithLabel } from "@formbricks/ui/Styling"; import { Switch } from "@formbricks/ui/Switch"; type CardStylingSettingsProps = { @@ -20,7 +21,7 @@ type CardStylingSettingsProps = { setOpen: React.Dispatch>; styling: TSurveyStyling | TProductStyling | null; setStyling: React.Dispatch>; - hideCheckmark?: boolean; + isSettingsPage?: boolean; surveyType?: TSurveyType; disabled?: boolean; localProduct: TProduct; @@ -29,7 +30,7 @@ type CardStylingSettingsProps = { const CardStylingSettings = ({ setStyling, styling, - hideCheckmark, + isSettingsPage = false, surveyType, disabled, open, @@ -43,6 +44,10 @@ const CardStylingSettings = ({ const isLogoVisible = !!localProduct.logo?.url; + const linkSurveyCardArrangement = styling?.cardArrangement?.linkSurveys ?? "straight"; + + const inAppSurveyCardArrangement = styling?.cardArrangement?.appSurveys ?? "straight"; + const setCardBgColor = (color: string) => { setStyling((prev) => ({ ...prev, @@ -113,6 +118,24 @@ const CardStylingSettings = ({ })); }; + const setCardArrangement = (arrangement: TCardArrangementOptions, surveyType: TSurveyType) => { + const newCardArrangement = { + linkSurveys: linkSurveyCardArrangement, + appSurveys: inAppSurveyCardArrangement, + }; + + if (surveyType === "link") { + newCardArrangement.linkSurveys = arrangement; + } else if (surveyType === "app" || surveyType === "website") { + newCardArrangement.appSurveys = arrangement; + } + + setStyling((prev) => ({ + ...prev, + cardArrangement: newCardArrangement, + })); + }; + const toggleProgressBarVisibility = (hideProgressBar: boolean) => { setStyling({ ...styling, @@ -147,7 +170,7 @@ const CardStylingSettings = ({ disabled && "cursor-not-allowed opacity-60 hover:bg-white" )}>
- {!hideCheckmark && ( + {!isSettingsPage && (
-

Card Styling

-

Style the survey card.

+

+ Card Styling +

+

+ Style the survey card. +

@@ -198,6 +225,12 @@ const CardStylingSettings = ({ description="Change the shadow color of the card." /> + + <>
- {isLogoVisible && (!surveyType || surveyType === "link") && ( + {isLogoVisible && (!surveyType || surveyType === "link") && !isSettingsPage && (