Merge pull request 'Closed issue #65 Implemented Modal BottomSheetBar' (#75) from feature/modal-bottom-sheet-bar into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/75

src/components/AcceptCookies.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Button } from "./Button/Button";
+import Typography from "./typography/Typography";
+
+type AcceptCookiesProps = {
+  onClickAccept?: () => void;
+  onClickCustomise?: () => void;
+};
+
+export function AcceptCookies({
+  onClickAccept,
+  onClickCustomise,
+}: AcceptCookiesProps) {
+  return (
+    <div className="px-12 py-4 w-full bg-blue-900 flex justify-between items-center">
+      <div className="w-2/3 text-white pr-3">
+        <Typography>
+          By clicking “Accept All Cookies”, you agree to the storing of cookies
+          on your device to enhance site navigation, analyze site usage, and
+          assist in our marketing efforts.
+        </Typography>
+      </div>
+      <div className="flex w-1/3  flex-col-reverse  lg:flex-row items-center lg:space-x-5 lg:justify-end ">
+        <Button
+          onClick={onClickCustomise}
+          defaultStyle={false}
+          className="bg-tranparent hover:bg-blue-200 active:bg-blue-400 focus:bg-none focus:outline-none text-blue-700"
+        >
+          Customize settings
+        </Button>
+        <Button
+          onClick={onClickAccept}
+          emphasis="high"
+          className="focus:outline-none"
+        >
+          Accept all cookies
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/BottomSheetBar.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { Dialog } from "@headlessui/react";
+import { Button } from "./Button/Button";
+import Typography from "components/typography/Typography";
+
+export function BottomSheetBar() {
+  // The open/closed state lives outside of the Dialog and is managed by you
+  let [isOpen, setIsOpen] = useState(true);
+
+  function handleDeactivate() {
+    alert("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
+  }
+
+  return (
+    /*
+      Pass `isOpen` to the `open` prop, and use `onClose` to set
+      the state back to `false` when the user clicks outside of
+      the dialog or presses the escape key.
+    */
+    <Dialog
+      open={isOpen}
+      onClose={() => {}}
+      className="absolute bottom-0 bg-blue-900 text-white w-full"
+    >
+      <Dialog.Panel className="flex px-[47px] py-6 justify-between items-center">
+        <Dialog.Description className="items-center">
+          By clicking “Accept All Cookies”, you agree to the storing of cookies
+          on your device to enhance site navigation, analyze site usage, and
+          assist in our marketing efforts.
+        </Dialog.Description>
+        {/*
+          You can render additional buttons to dismiss your dialog by setting
+          `isOpen` to `false`.
+        */}
+        <div className="flex flex-col md:flex-row">
+          <Button
+            defaultStyle={false}
+            emphasis="low"
+            className=" items-center grow-0 min-h-max mx-3 text-blue-600 hover:bg-blue-200 focus:outline-none active:bg-blue-400"
+            onClick={handleDeactivate}
+          >
+            <Typography fontWeightVariant="semibold">
+              Customize settings
+            </Typography>
+          </Button>
+          <Button
+            className="md:w-max min-h-max mx-3 focus:outline-none items-center"
+            onClick={() => setIsOpen(false)}
+          >
+            <Typography fontWeightVariant="semibold">
+              Accept all cookies
+            </Typography>
+          </Button>
+        </div>
+      </Dialog.Panel>
+    </Dialog>
+  );
+}

src/components/Button/Button.tsx

@@ -22,6 +22,7 @@ type ButtonExtentions = {
 /*                               Component props                              */
 /* -------------------------------------------------------------------------- */
 type ButtonProps = {
+  defaultStyle?: boolean;
   emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high"
   disabled?: boolean;
 } & Omit<React.ComponentPropsWithoutRef<"button">, "">;
@@ -30,6 +31,7 @@ type ButtonProps = {
 /*                          Component implementation                          */
 /* -------------------------------------------------------------------------- */
 export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
+  defaultStyle = true,
   emphasis = "high",
   disabled = false,
   className,
@@ -62,17 +64,24 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
         },
         {
           // Define high emphasis
-          [`${btnEmphasis.EnableHigh}`]: !disabled && emphasis === "high",
-          [`${btnEmphasis.DisabledHigh}`]: disabled && emphasis === "high",
-          [`${btnEmphasis.GeneralHigh}`]: emphasis === "high",
-          // Dbtnefine medium emphasis
-          [`${btnEmphasis.EnabledMedium}`]: !disabled && emphasis === "medium",
-          [`${btnEmphasis.DisabledMedium}`]: disabled && emphasis === "medium",
-          [`${btnEmphasis.GeneralMedium}`]: emphasis === "medium",
-          // Dbtnefine low emphasis
-          [`${btnEmphasis.EnabledLow}`]: !disabled && emphasis === "low",
-          [`${btnEmphasis.DisabledLow}`]: disabled && emphasis === "low",
-          [`${btnEmphasis.GenerealLow}`]: emphasis === "low",
+          [`${btnEmphasis.EnableHigh}`]:
+            defaultStyle && !disabled && emphasis === "high",
+          [`${btnEmphasis.DisabledHigh}`]:
+            defaultStyle && disabled && emphasis === "high",
+          [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high",
+          // Define medium emphasis
+          [`${btnEmphasis.EnabledMedium}`]:
+            defaultStyle && !disabled && emphasis === "medium",
+          [`${btnEmphasis.DisabledMedium}`]:
+            defaultStyle && disabled && emphasis === "medium",
+          [`${btnEmphasis.GeneralMedium}`]:
+            defaultStyle && emphasis === "medium",
+          // Define low emphasis
+          [`${btnEmphasis.EnabledLow}`]:
+            defaultStyle && !disabled && emphasis === "low",
+          [`${btnEmphasis.DisabledLow}`]:
+            defaultStyle && disabled && emphasis === "low",
+          [`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low",
         },
         className,
       ])}

src/components/containers/modal/BottomBarAcceptCookies.tsx

@@ -0,0 +1,17 @@
+import { AcceptCookies } from "components/AcceptCookies";
+import { BottomSheetModal } from "components/containers/modal/BottomSheetModal";
+import { useState } from "react";
+
+export function BottomBarAcceptCookies() {
+  let [isShowing, setIsShowing] = useState(true);
+
+  function closeModal() {
+    setIsShowing(false);
+  }
+
+  return (
+    <BottomSheetModal onClose={closeModal} isShowing={isShowing}>
+      <AcceptCookies onClickAccept={closeModal} />
+    </BottomSheetModal>
+  );
+}

src/components/containers/modal/BottomSheetModal.tsx

@@ -0,0 +1,33 @@
+import React, { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { AcceptCookies } from "components/AcceptCookies";
+
+type ButtonSheetBarProps = {
+  isShowing: boolean;
+  onClose: () => void;
+  children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "">;
+
+export function BottomSheetModal({
+  isShowing,
+  onClose,
+  children,
+}: ButtonSheetBarProps) {
+  return (
+    <Transition
+      appear
+      show={isShowing}
+      as={Fragment}
+      enter="ease-in-out duration-200"
+      enterFrom="translate-y-full"
+      enterTo="translate-y-0"
+      leave="ease-out duration-300"
+      leaveFrom="translate-y-0 opacity-100"
+      leaveTo="translate-y-full opacity-0"
+    >
+      <Dialog className="fixed bottom-0" as="div" onClose={() => {}}>
+        {children}
+      </Dialog>
+    </Transition>
+  );
+}