diff --git a/src/components/AcceptCookies.tsx b/src/components/AcceptCookies.tsx
new file mode 100644
index 0000000..b2fc1dd
--- /dev/null
+++ b/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>
+ );
+}
diff --git a/src/components/BottomSheetBar.tsx b/src/components/BottomSheetBar.tsx
new file mode 100644
index 0000000..6e25743
--- /dev/null
+++ b/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>
+ );
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index e5fd5fa..7928c33 100644
--- a/src/components/Button/Button.tsx
+++ b/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,
])}
diff --git a/src/components/containers/modal/BottomBarAcceptCookies.tsx b/src/components/containers/modal/BottomBarAcceptCookies.tsx
new file mode 100644
index 0000000..886ab5a
--- /dev/null
+++ b/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>
+ );
+}
diff --git a/src/components/containers/modal/BottomSheetModal.tsx b/src/components/containers/modal/BottomSheetModal.tsx
new file mode 100644
index 0000000..6ac7ef5
--- /dev/null
+++ b/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>
+ );
+}