Revert "Onetrust cookie banner (#1354)"

README.md

@@ -70,6 +70,7 @@ To add, edit, or delete content in our documentation, you have to modify Markdow
 - `kb/` Contains `.md` files that populate the Knowledge Base.
 - `library/` Contains `.md` files that populate the Streamlit Library section.
 - `streamlit-cloud/`Contains `.md` files that populate the Streamlit Community Cloud section.
+- `gdpr-banner.md` You'll never have to edit this file.
 - `index.md` Contains text that populates the index page.
 - `menu.md` This is a special file containing only front matter that defines the docs Menu. You will need to add an entry on this file for each new page you create within the docs' site.
 

components/navigation/footer.js

@@ -1,13 +1,8 @@
 import Link from "next/link";
-import dynamic from "next/dynamic";
 
 import styles from "./footer.module.css";
 
-const CookiePolicyButton = dynamic(() => import("./cookiePolicyButton"), {
-  ssr: false,
-});
-
-const Footer = () => {
+const Footer = ({ setIsTelemetryModalVisible }) => {
   return (
     <footer className={styles.Container}>
       <section className={styles.InnerContainer}>
@@ -186,9 +181,12 @@ const Footer = () => {
         </section>
         <div className={styles.Copyright}>
           <span>&copy; {new Date().getFullYear()} Snowflake Inc.</span>
-          <CookiePolicyButton className="hover:opacity-80 ml-2">
+          <button
+            className="hover:opacity-80 ml-2"
+            onClick={() => setIsTelemetryModalVisible(true)}
+          >
             Cookie policy
-          </CookiePolicyButton>
+          </button>
         </div>
       </section>
     </footer>

components/utilities/breadCrumbs.js

@@ -68,7 +68,7 @@ const BreadCrumbs = ({ slug, menu }) => {
   }
 
   // Then, we add a couple pages that don't need breadcrumbs, such as /menu, /index, etc.
-  filesToExclude.push("index", "menu");
+  filesToExclude.push("index", "gdpr-banner", "menu", "cookie-settings");
 
   // Now, we throw the error if any page that's not on the filesToExclude array is missing in menu.md
   if (path.length === 0 && !filesToExclude.includes(slug[0])) {

components/utilities/cookieSettingsModal.js

@@ -0,0 +1,73 @@
+import classNames from "classnames";
+
+import content from "../../content/cookie-settings.md";
+
+import styles from "./cookieSettingsModal.module.css";
+
+export default function CookieSettingsModal({
+  setIsTelemetryModalVisible,
+  declineTelemetryAndCloseBanner,
+  allowTelemetryAndCloseBanner,
+}) {
+  return (
+    <div className="fixed w-full h-full z-40 bg-gray-90 bg-opacity-90 top-0 flex items-center justify-center">
+      <div
+        className={classNames(
+          styles.Container,
+          "relative",
+          "bg-white rounded-xl",
+          "p-8 md:p-12",
+          "w-full max-w-4xl",
+          "overscroll-none overflow-y-auto",
+          "max-h-screen",
+        )}
+      >
+        <button
+          className="absolute right-4 top-4 md:right-11 md:top-11 fill-gray-70"
+          onClick={() => setIsTelemetryModalVisible(false)}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 -960 960 960"
+            className="mt-2 w-8 h-8 hover:bg-gray-30 rounded"
+          >
+            <path d="m253.897-229.795-24.102-24.102L455.897-480 229.795-706.103l24.102-24.102L480-504.103l226.103-226.102 24.102 24.102L504.103-480l226.102 226.103-24.102 24.102L480-455.897 253.897-229.795Z" />
+          </svg>
+        </button>
+        <div dangerouslySetInnerHTML={{ __html: content.html }} />
+        <button
+          className={classNames(
+            "mt-4 md:mt-8",
+            "py-2 px-3",
+            "text-gray-90",
+            "border-gray-90 border",
+            "rounded",
+            "hover:bg-gray-90",
+            "hover:text-white",
+            "active:bg-gray-90",
+            "active:text-white",
+          )}
+          onClick={declineTelemetryAndCloseBanner}
+        >
+          Reject all
+        </button>
+        <button
+          className={classNames(
+            "mt-4 md:mt-8 ml-4",
+            "py-2 px-3",
+            "text-gray-90",
+            "border-gray-90 border",
+            "rounded",
+            "hover:bg-gray-90",
+            "hover:text-white",
+            "active:bg-gray-90",
+            "active:text-white",
+          )}
+          onClick={allowTelemetryAndCloseBanner}
+        >
+          Accept all
+        </button>
+      </div>
+    </div>
+  );
+}

components/utilities/cookieSettingsModal.module.css

@@ -0,0 +1,167 @@
+.Container > div {
+  @apply text-gray-90 grid grid-cols-1 gap-4 text-base leading-loose;
+}
+
+.Container h1,
+.Container h2,
+.Container h3,
+.Container h4,
+.Container h5,
+.Container h6 {
+  @apply scroll-mt-0 md:scroll-mt-32;
+}
+
+.Container h2,
+.Container h3,
+.Container h4,
+.Container h5 {
+  @apply mt-4 text-lg font-bold text-gray-90;
+}
+
+.Container h2 {
+  @apply text-xl;
+}
+
+.Container h3 {
+  @apply text-2xl;
+}
+
+.Container h2:first-child,
+.Container h3:first-child,
+.Container h4:first-child,
+.Container h5:first-child {
+  @apply mt-0;
+}
+
+.Container p {
+  @apply text-gray-90;
+}
+
+.Container a {
+  @apply underline;
+}
+
+.Container a:hover {
+  @apply opacity-80;
+}
+
+.Container ol {
+  @apply list-decimal pl-8 grid grid-cols-1 gap-4;
+}
+
+.Container section ol {
+  @apply list-none pl-0 gap-0 mb-5;
+}
+
+.Container ul {
+  @apply list-disc pl-8 grid grid-cols-1 gap-4;
+}
+
+.Container li {
+  @apply pl-2;
+}
+
+.Container blockquote {
+  @apply p-6 md:p-8 lg:p-16
+    -mx-6 md:-mx-8 lg:-mx-16
+    my-0 md:my-4 lg:my-12
+    grid grid-cols-1 gap-4
+    bg-lightBlue-10
+    text-gray-80
+    rounded-lg;
+}
+
+.PrivacyContainer blockquote ~ h4 {
+  @apply mt-12 md:mt-8 lg:mt-0 text-gray-90;
+}
+
+.PrivacyContainer blockquote h2 {
+  @apply hidden;
+}
+
+.Container blockquote h2 {
+  @apply text-gray-90 text-3xl;
+}
+
+.Container hr {
+  @apply border-gray-40 border-t-0 border-l-0 border-r-0 border-b my-8;
+}
+
+.Container address {
+  @apply whitespace-pre-line pl-4 border-l-2 border-gray-30 mt-4;
+}
+
+.Container pre {
+  @apply bg-gray-10 p-4 rounded-md overflow-x-auto text-gray-90;
+}
+
+.Container pre code {
+  @apply text-lg;
+}
+
+.Container figure {
+  @apply flex flex-col items-start;
+}
+
+.Container figure img {
+  @apply h-24 ml-2 mb-2;
+}
+
+.Container figure figcaption {
+  @apply text-sm text-gray-70;
+}
+
+/* For table in Privacy notice */
+.Container table {
+  @apply table-fixed my-8 w-full;
+}
+
+.Container table thead tr th {
+  @apply px-4 py-3 text-left bg-gray-20 bg-opacity-50 border border-gray-30 text-gray-90 font-semibold text-lg leading-normal align-top;
+}
+
+.Container table tbody tr td {
+  @apply px-4 py-3 border border-gray-30 text-gray-90 text-lg leading-normal align-top;
+}
+
+.DeploymentTerms ul,
+.DeploymentTerms ol {
+  @apply list-none;
+}
+
+/* Specific classes for colors */
+.Container:global(.red) a {
+  @apply text-red-70;
+}
+
+.Container:global(.orange) a {
+  @apply text-orange-70;
+}
+
+.Container:global(.yellow) a {
+  @apply text-yellow-90;
+}
+
+.Container:global(.green) a {
+  @apply text-green-70;
+}
+
+.Container:global(.acqua) a {
+  @apply text-acqua-70;
+}
+
+.Container:global(.lightBlue) a {
+  @apply text-lightBlue-70;
+}
+
+.Container:global(.darkBlue) a {
+  @apply text-darkBlue-70;
+}
+
+.Container:global(.indigo) a {
+  @apply text-indigo-70;
+}
+
+.Container:global(.gray) a {
+  @apply text-gray-70;
+}