✨(demo) add onboarding modal

On first visit, display an onboarding modal to explain the purpose of
this demo.

apps/demo/cunningham.ts

@@ -147,6 +147,7 @@ const defaultConfig: Configuration = {
         modal: {
           "border-radius": "0.1875rem",
           "background-color": "#191919",
+          "backdrop-color": "ref(theme.colors.greyscale-000)",
         },
         card: {
           "border-radius": "0.1875rem",
@@ -262,6 +263,10 @@ const defaultConfig: Configuration = {
         modal: {
           "border-radius": "0.25rem",
           "background-color": "ref(theme.colors.greyscale-100)",
+          "backdrop-color": "#00172AAB",
+          "border-color": "transparent",
+          "box-shadow":
+            "rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px",
         },
       },
     },

apps/demo/src/App.tsx

@@ -7,6 +7,7 @@ import {
 import React, { useEffect, useMemo, useState } from "react";
 import { Create } from "./Create";
 import { Home } from "./Home";
+import Onboarding from "./Onboarding";
 
 enum Theme {
   CUNNINGHAM = "cunningham",
@@ -90,6 +91,7 @@ export const App = () => {
             alt="Background pattern"
           />
         )}
+        <Onboarding />
         <Home modal={modal} />
         <Create {...modal} />
       </div>

apps/demo/src/Onboarding.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from "react";
+import { Button, Modal, ModalSize, useModal } from "@openfun/cunningham-react";
+
+const Onboarding = () => {
+  const modal = useModal({ isOpenDefault: true });
+  // FIXME: remove this workaround once issue #259 will be resolved
+  // https://github.com/openfun/cunningham/issues/259
+  const [ready, setReady] = React.useState(false);
+
+  const handleClose = () => {
+    sessionStorage.setItem("onboarded", "1");
+    modal.close();
+  };
+
+  useEffect(() => {
+    setReady(true);
+  }, []);
+
+  if (!ready || sessionStorage.getItem("onboarded")) return null;
+
+  return (
+    <Modal
+      size={ModalSize.MEDIUM}
+      isOpen={modal.isOpen}
+      onClose={handleClose}
+      closeOnClickOutside
+      rightActions={
+        <div className="onboarding__footer">
+          <Button color="primary" iconPosition="right" onClick={handleClose}>
+            Let&apos;s go!
+          </Button>
+          <Button
+            href="https://openfun.github.io/cunningham/storybook"
+            color="tertiary-text"
+            size="small"
+            icon={<span className="material-icons">open_in_new</span>}
+          >
+            Go to the documentation
+          </Button>
+        </div>
+      }
+    >
+      <header className="mb-b">
+        <span className="onboarding__title-icon">👋</span>
+        <h2 className="onboarding__title">Hey there!</h2>
+        <p>Welcome on the Cunningham Design System showcase.</p>
+      </header>
+      <section className="onboarding__content">
+        <p>
+          👀 Through this demo, you will be able to discover{" "}
+          <strong>a bunch of Cunningham components</strong>. Take a look at the{" "}
+          <a href="https://openfun.github.io/cunningham/storybook">
+            documentation
+          </a>{" "}
+          to see how to use them.
+        </p>
+        <p>
+          🖌️ You will also discover the <strong>theme feature</strong> of the
+          Cunningham Design System. You can switch theme through the components
+          in the top right corner.
+        </p>
+      </section>
+    </Modal>
+  );
+};
+
+export default Onboarding;

apps/demo/src/cunningham-tokens.css

@@ -278,6 +278,7 @@
 	--c--components--forms-radio--background-color: var(--c--theme--colors--greyscale-800);
 	--c--components--modal--border-radius: 0.1875rem;
 	--c--components--modal--background-color: #191919;
+	--c--components--modal--backdrop-color: var(--c--theme--colors--greyscale-000);
 	--c--components--card--border-radius: 0.1875rem;
 	--c--components--card--border-width: none;
 	--c--components--card--box-shadow: rgba(255, 220, 220, 0.05) 0px 0px 60px 10px;
@@ -358,4 +359,7 @@
 	--c--components--forms-radio--background-color: var(--c--theme--colors--greyscale-200);
 	--c--components--modal--border-radius: 0.25rem;
 	--c--components--modal--background-color: var(--c--theme--colors--greyscale-100);
+	--c--components--modal--backdrop-color: #00172AAB;
+	--c--components--modal--border-color: transparent;
+	--c--components--modal--box-shadow: rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px;
 }

apps/demo/src/index.scss

@@ -15,6 +15,11 @@ p {
   margin: 0;
 }
 
+a {
+  color: var(--c--theme--colors--greyscale-800);
+  text-decoration: underline;
+}
+
 
 // App
 html {
@@ -114,3 +119,34 @@ html[data-theme="blueney"] {
     }
   }
 }
+
+// Onboarding Modal
+.onboarding__title {
+  margin-top: 0;
+}
+
+.onboarding__title-icon {
+  font-size: 2rem;
+  margin: 0;
+}
+.onboarding__content {
+  max-width: 680px;
+  line-height: 1.5rem;
+  text-align: left;
+
+  & p {
+    margin-bottom: 1rem;
+  }
+}
+.onboarding__footer {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  align-items: center;
+  gap: 1rem;
+
+  & > .c__button:first-child {
+    min-width: 200px;
+    justify-content: center;
+  }
+}