first working prototype

package.json

@@ -16,7 +16,7 @@
     "serve": "webpack serve",
     "transpile": "rm -rfd _babelOut && babel src/reactCookieConsent -d _babelOut --copy-files --extensions '.tsx'",
     "typecheck": "rm -rfd _tsOut && tsc",
-    "build": "rm -rfd dist && mkdir dist && npm run typecheck && npm run transpile && mv _tsOut/react-cookieConsent/* dist && mv _babelOut/* dist && rm -rfd _babelOut _tsOut",
+    "build": "rm -rfd dist && mkdir dist && npm run typecheck && npm run transpile && mv _tsOut/reactCookieConsent/* dist && mv _babelOut/* dist && rm -rfd _babelOut _tsOut",
     "prepublishOnly": "npm run build"
   },
   "author": "schlomoh - moritz becker",

src/App.tsx

@@ -1,10 +1,31 @@
 import { CookieConsent } from "./reactCookieConsent";
 
 const Main = () => {
-  const CookieInfoContent = () => <p>this site uses Cookies</p>;
+  const CookieInfoContent = () => (
+    <>
+      <h3>This site uses Cookies</h3>
+      <p>
+        To improve the performance and user experience, this site uses cookies
+        and shares user data with third-party services.
+      </p>
+      <p>
+        To improve the performance and user experience, this site uses cookies
+        and shares user data with third-party services.
+      </p>
+      <p>
+        To improve the performance and user experience, this site uses cookies
+        and shares user data with third-party services.
+      </p>
+    </>
+  );
+
   return (
     <main>
-      <CookieConsent infoContent={<CookieInfoContent />} type="modal" />
+      <CookieConsent
+        enableManagement={true}
+        infoContent={<CookieInfoContent />}
+        type="modal"
+      />
     </main>
   );
 };

src/reactCookieConsent/cookieConsent.tsx

@@ -1,28 +1,176 @@
 import styled from "styled-components";
-import { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 // types
 // import { ICookieConsentProps } from "CookieConsent.d";
 
+const FlexDiv = styled.div<IFlexDivProps>`
+  display: flex;
+  flex-direction: ${(props) =>
+    props.flexDirection ? props.flexDirection : "column"};
+  justify-content: ${(props) => (props.justify ? props.justify : "center")};
+  align-items: ${(props) => (props.align ? props.align : "center")};
+`;
+
 const Container = styled.div`
   width: 500px;
-  height: 500px;
+  /* height: 500px; */
   border-radius: 20px;
-  background-color: rgb(200, 200, 200);
+  background-color: white;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
   padding: 30px;
   font-family: sans-serif;
 `;
 
+const Backdrop = styled(FlexDiv)<IBackdropProps>`
+  z-index: 500;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.3);
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  opacity: ${(props) => (props.show ? "1" : "0")};
+  visibility: ${(props) => (props.show ? "visible" : "hidden")};
+  transition: opacity 0.3s, visibility 0.3s;
+`;
+
+const BaseButton = styled.button<IBaseButtonProps>`
+  min-width: 100%;
+  min-height: 40px;
+  border-radius: 10px;
+  color: white;
+  border: none;
+  cursor: pointer;
+  margin-top: 20px;
+  background-color: ${(props) =>
+    props.backgroundColor ? props.backgroundColor : "#ccc"};
+`;
+
 const CookieConsent = (props: ICookieConsentProps) => {
-  const container = { style: props.containerStyle, content: props.infoContent };
-  const { onAccept, onDecline } = props;
+  const {
+    containerStyle,
+    primaryButtonStyle,
+    secondaryButtonStyle,
+    enableManagement,
+    onAccept,
+    onDecline,
+  } = props;
+
+  let { accentColor, managementButtonText, infoContent, managementContent } =
+    props;
+
+  if (!accentColor) accentColor = "coral";
+  if (!managementButtonText) managementButtonText = "Manage cookies";
+
+  if (!infoContent)
+    infoContent = (
+      <>
+        <h3>This site uses Cookies</h3>
+        <p>
+          To improve the performance and user experience, this site uses cookies
+          and shares user data with third-party services.
+        </p>
+      </>
+    );
+
+  if (!managementContent)
+    managementContent = (
+      <>
+        <h3>Manage your cookie settings</h3>
+        <p>
+          You can toggle cookie usage for analytical data, advertisement and
+          other third-party services, offered to improve the user experience.
+        </p>
+      </>
+    );
+  const [show, setShow] = useState(false);
+  const [showMangeView, setShowManageView] = useState(false);
+
+  // state for having found cookies present or not
+  const [test, _] = useState(true);
 
   useEffect(() => {
-    if (onAccept) onAccept();
-    if (onDecline) onDecline();
+    // if (onAccept) onAccept();
+    // if (onDecline) onDecline();
+    if (test) {
+      _(false);
+      setShow(true);
+    }
   });
 
-  return <Container style={container.style}>{container.content}</Container>;
+  function buttonClick(callback: TButtonClickCallback) {
+    setShow(false);
+    if (callback) callback();
+  }
+
+  function accept() {
+    buttonClick(onAccept);
+  }
+
+  function decline() {
+    buttonClick(onDecline);
+  }
+
+  function toggleManageView() {
+    setShowManageView(!showMangeView);
+  }
+
+  const ButtonGroup = ({ showManageButton }: { showManageButton: boolean }) => {
+    const ManagementButton = () =>
+      enableManagement && showManageButton ? (
+        <BaseButton onClick={toggleManageView} style={primaryButtonStyle}>
+          {managementButtonText}
+        </BaseButton>
+      ) : (
+        <>{null}</>
+      );
+
+    return (
+      <FlexDiv justify={"end"}>
+        <BaseButton onClick={decline} style={secondaryButtonStyle}>
+          Decline
+        </BaseButton>
+        <ManagementButton />
+        <BaseButton
+          onClick={accept}
+          style={primaryButtonStyle}
+          backgroundColor={accentColor}
+        >
+          Accept
+        </BaseButton>
+      </FlexDiv>
+    );
+  };
+
+  const InfoView = () => {
+    return (
+      <>
+        {infoContent}
+        <ButtonGroup showManageButton />
+      </>
+    );
+  };
+
+  const ManagementView = () => {
+    return (
+      <>
+      <BaseButton onClick={toggleManageView}>Back</BaseButton>
+        {managementContent}
+        <ButtonGroup showManageButton={false} />
+      </>
+    );
+  };
+
+  const View = () => (showMangeView ? <ManagementView /> : <InfoView />);
+
+  return (
+    <Backdrop show={show}>
+      <Container style={containerStyle}>
+        <View />
+      </Container>
+    </Backdrop>
+  );
 };
 
 export default CookieConsent;

src/reactCookieConsent/types.d.ts

@@ -1,14 +1,36 @@
+type TBackgroundColor = React.CSSProperties["backgroundColor"];
 interface ICookieConsentProps {
   type: "modal" | "banner";
-  infoContent: JSX.Element;
   onAccept?: () => void;
-  onDecline?: () => void;
-  enableCustomization?: boolean;
   acceptButtonText?: string;
+  onDecline?: () => void;
   declineButtonText?: string;
-  customizeButtonText?: string;
+  infoContent?: JSX.Element;
+  managementContent?: JSX.Element;
+  enableManagement?: boolean;
+  managementButtonText?: string;
+  accentColor?: TBackgroundColor;
   containerStyle?: React.CSSProperties;
-  customizeContent?: JSX.Element;
   primaryButtonStyle?: React.CSSProperties;
   secondaryButtonStyle?: React.CSSProperties;
 }
+
+interface IBaseButtonProps {
+  backgroundColor?: TBackgroundColor;
+}
+
+type TButtonClickCallback = (() => void) | undefined;
+
+type TFlexDirection = React.CSSProperties["flexDirection"];
+type TJustify = React.CSSProperties["justifyContent"];
+type TAlign = React.CSSProperties["alignItems"];
+
+interface IFlexDivProps {
+  flexDirection?: TFlexDirection;
+  justify?: TJustify;
+  align?: TAlign;
+}
+
+interface IBackdropProps {
+  show: boolean;
+}