add fullscreen param to widgets

lib/model/widget/banner.ts

@@ -22,6 +22,7 @@ export interface BannerWidgetComponentProps {
     rounded?: boolean;
     bannerFullWidth?: boolean;
     pulsation?: boolean;
+    fullScreen?: boolean;
 }
 
 export type BannerWidgetParams = Omit<BannerWidgetComponentProps, "onWidgetClose">;

lib/model/widget/button.ts

@@ -14,6 +14,7 @@ export interface ButtonWidgetComponentProps {
     buttonText?: string;
     buttonTextColor?: string;
     buttonBackgroundColor?: string;
+    fullScreen?: boolean;
 }
 
 export type ButtonWidgetParams = Omit<ButtonWidgetComponentProps, "fixedSide"> & {

lib/model/widget/popup.ts

@@ -7,6 +7,7 @@ export interface PopupWidgetComponentProps {
     autoShowQuizTime?: number | null;
     hideOnMobile?: boolean;
     openOnLeaveAttempt?: boolean;
+    fullScreen?: boolean;
 }
 
 export type PopupWidgetParams = PopupWidgetComponentProps;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@frontend/squzanswerer",
-    "version": "1.0.43",
+    "version": "1.0.44",
     "type": "module",
     "main": "./dist-package/index.js",
     "module": "./dist-package/index.js",

src/widgets/banner/QuizBanner.tsx

@@ -30,6 +30,7 @@ export default function QuizBanner({
     pulsation = false,
     autoShowWidgetTime = 0,
     dialogDimensions,
+    fullScreen = false,
 }: BannerWidgetComponentProps) {
     const isMobile = useMediaQuery("(max-width: 600px)");
     const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
@@ -189,10 +190,18 @@ export default function QuizBanner({
                 quizId={quizId}
                 onClose={() => setIsQuizShown(false)}
                 disableScrollLock
-                paperSx={{
+                paperSx={[
+                    (isMobile || fullScreen) ? {
+                        width: "100%",
+                        height: "100%",
+                        maxHeight: "100%",
+                        borderRadius: 0,
+                        m: 0,
+                    } : {
                         width: dialogDimensions?.width,
                         height: dialogDimensions?.height,
-                }}
+                    },
+                ]}
             />
         </ThemeProvider>,
         document.body

src/widgets/button/OpenQuizButton.tsx

@@ -20,6 +20,7 @@ export default function OpenQuizButton({
     buttonText = "Пройти квиз",
     buttonTextColor,
     buttonBackgroundColor,
+    fullScreen = false,
 }: ButtonWidgetComponentProps) {
     const isMobile = useMediaQuery("(max-width: 600px)");
     const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
@@ -106,10 +107,18 @@ export default function OpenQuizButton({
                 open={isQuizShown}
                 quizId={quizId}
                 onClose={() => setIsQuizShown(false)}
-                paperSx={{
+                paperSx={[
+                    (isMobile || fullScreen) ? {
+                        width: "100%",
+                        height: "100%",
+                        maxHeight: "100%",
+                        borderRadius: 0,
+                        m: 0,
+                    } : {
                         width: dialogDimensions?.width,
                         height: dialogDimensions?.height,
-                }}
+                    },
+                ]}
             />
         </ThemeProvider>
     );

src/widgets/popup/QuizPopup.tsx

@@ -5,15 +5,13 @@ import { useMediaQuery } from "@mui/material";
 import { PopupWidgetComponentProps } from "@/model/widget/popup";
 
 
-const WIDGET_DEFAULT_WIDTH = "600px";
-const WIDGET_DEFAULT_HEIGHT = "80%";
-
 export default function QuizPopup({
     quizId,
     dialogDimensions,
     autoShowQuizTime = null,
     hideOnMobile = false,
     openOnLeaveAttempt = false,
+    fullScreen = false,
 }: PopupWidgetComponentProps) {
     const initialIsQuizShown = (autoShowQuizTime !== null || openOnLeaveAttempt) ? false : true;
 
@@ -59,10 +57,18 @@ export default function QuizPopup({
             open={isQuizShown}
             quizId={quizId}
             onClose={() => setIsQuizShown(false)}
-            paperSx={{
-                width: dialogDimensions?.width ?? WIDGET_DEFAULT_WIDTH,
-                height: dialogDimensions?.height ?? WIDGET_DEFAULT_HEIGHT,
-            }}
+            paperSx={[
+                (isMobile || fullScreen) ? {
+                    width: "100%",
+                    height: "100%",
+                    maxHeight: "100%",
+                    borderRadius: 0,
+                    m: 0,
+                } : {
+                    width: dialogDimensions?.width,
+                    height: dialogDimensions?.height,
+                },
+            ]}
         />
     );
 }

src/widgets/side/QuizSideButton.tsx

@@ -64,7 +64,12 @@ export default function QuizSideButton({
                     {
                         m: 0,
                     },
-                    !(isMobile || fullScreen) && {
+                    (isMobile || fullScreen) ? {
+                        width: "100%",
+                        height: "100%",
+                        maxHeight: "100%",
+                        borderRadius: 0,
+                    } : {
                         position: "absolute",
                         bottom: PADDING,
                         right: position === "right" ? PADDING : undefined,
@@ -74,13 +79,6 @@ export default function QuizSideButton({
                         height: dialogDimensions?.height ?? WIDGET_DEFAULT_HEIGHT,
                         maxHeight: `calc(100% - ${PADDING * 2}px)`,
                     },
-                    (isMobile || fullScreen) && {
-                        position: "relative",
-                        width: "100%",
-                        height: "100%",
-                        maxHeight: "100%",
-                        borderRadius: 0,
-                    },
                 ]}
             />
             <Fade in={!isWidgetHidden} timeout={400}>