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 ( +
+
+ + 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. + +
+
+ + +
+
+ ); +} 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. + */ + {}} + className="absolute bottom-0 bg-blue-900 text-white w-full" + > + + + 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. + + {/* + You can render additional buttons to dismiss your dialog by setting + `isOpen` to `false`. + */} +
+ + +
+ + + ); +} 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, "">; @@ -30,6 +31,7 @@ type ButtonProps = { /* Component implementation */ /* -------------------------------------------------------------------------- */ export const Button: React.FC & ButtonExtentions = ({ + defaultStyle = true, emphasis = "high", disabled = false, className, @@ -62,17 +64,24 @@ export const Button: React.FC & 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 ( + + + + ); +} 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, "">; + +export function BottomSheetModal({ + isShowing, + onClose, + children, +}: ButtonSheetBarProps) { + return ( + + {}}> + {children} + + + ); +}