[FEAT]: Add darkmode demo in FileCard and Mosaic

src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx

@@ -55,7 +55,7 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
         style={{
           display: "flex",
           justifyContent: "center",
-          backgroundColor: "white",
+          backgroundColor: "#121212",
           padding: "25px 0",
           flexGrow:1
         }}

src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx

 import * as React from "react";
-import { ExtFile, FileCard, FileMosaic } from "../../../files-ui";
-
-const sampleFileProps: ExtFile = {
+import {
+  ExtFile,
+  FileCard,
+  FileCardProps,
+  FileMosaic,
+} from "../../../files-ui";
+const sampleFileProps = {
   id: "fileId",
   size: 28 * 1024 * 1024,
   type: "text/plain",
-  name: "file created from props.jsx",
+  name: "sampleFile" + ".jsx",
   valid: true,
 };
+const sampleFilePropsCard = (elevationNumber: number): ExtFile => {
+  return {
+    id: "fileId",
+    size: 28 * 1024 * 1024,
+    type: "text/plain",
+    name: "elevation=" + elevationNumber + ".jsx",
+    valid: true,
+  };
+};
+
 const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
   const removeFile = (id: string | number | undefined) => {
     console.log("delete button clicked on file: " + id);
@@ -19,23 +33,46 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
           style={{
             display: "flex",
             justifyContent: "center",
+            flexDirection: "column",
             backgroundColor: "white",
+            alignItems: "center",
             padding: "25px 0",
-            flexGrow:1
+            flexGrow: 1,
+            gap: "7px",
           }}
         >
-          <FileCard {...sampleFileProps} info onDelete={removeFile} />
+          {[0, 4, 16, 24].map((elevation) => (
+            <FileCard
+              key={elevation}
+              {...sampleFilePropsCard(elevation)}
+              onDelete={removeFile}
+              info
+              elevation={elevation as FileCardProps["elevation"]}
+            />
+          ))}
         </div>
         <div
           style={{
             display: "flex",
+            flexDirection: "column",
             justifyContent: "center",
             backgroundColor: "#121212",
+            alignItems: "center",
             padding: "25px 0",
             flexGrow: 1,
+            gap: "7px",
           }}
         >
-          <FileCard {...sampleFileProps} info darkMode onDelete={removeFile} />
+          {[0, 4, 16, 24].map((elevation) => (
+            <FileCard
+              key={elevation}
+              {...sampleFilePropsCard(elevation)}
+              onDelete={removeFile}
+              darkMode
+              info
+              elevation={elevation as FileCardProps["elevation"]}
+            />
+          ))}
         </div>
       </>
     );
@@ -61,7 +98,6 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
           backgroundColor: "#121212",
           padding: "15px 0",
           flexGrow: 1,
-
         }}
       >
         <FileMosaic {...sampleFileProps} info darkMode onDelete={removeFile} />

src/pages/demo/FileCardDemoPage.jsx

@@ -210,84 +210,53 @@ const FileCardDemoPage = (props) => {
         </section>
 
         <section id="dark-mode">
-          <SubTitle content="Dark mode" />
+          <SubTitle content="Dark mode and Elevation" />
           <DescParagraph>
             The <CodeHighlight>FileCard</CodeHighlight> component supports dark
             mode by setting the prop <TypeHighlight>darkMode</TypeHighlight> to{" "}
-            <TypeHighlight>true</TypeHighlight>.
+            <TypeHighlight>true</TypeHighlight>. The elevation can be used to
+            establish a hierarchy between other content. In practical terms, the
+            elevation controls the size of the shadow applied to the surface. In
+            dark mode, raising the elevation also makes the surface lighter.
           </DescParagraph>
 
-          <div style={{ display: "flex", flexWrap: "wrap" }}>
+          <div
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              width: "100%",
+              padding: "25px 0",
+            }}
+          >
             <DemoFileMosaicDarkMode card />
           </div>
 
           <CodeJSFileMosaicDarkMode card />
         </section>
-        {/*     <section id="localization">
-          <SubTitle content="Localization" />
+    {/*     <section id="actions">
+          <SubTitle content="Actions: info, delete, see, watch, download" />
           <DescParagraph>
-            The <CodeHighlight>FileMosaic</CodeHighlight> component has
-            multilanguage support. You can change the language in wich labels
-            are displayed by setting the{" "}
-            <CodeHighlight>{"localization"}</CodeHighlight> prop. So far only
-            the following languages are supported:
-            <ul>
-              {[
-                "English",
-                "Spanish",
-                "French",
-                "Italian",
-                "Portuguese",
-                "Russian",
-                "Chinnese (simplified)",
-                "Chinnese (traditional)",
-              ].map((x) => (
-                <li>
-                  <TypeHighlight>{x}</TypeHighlight>
-                </li>
-              ))}
-            </ul>
+            The <CodeHighlight>FileCard</CodeHighlight> component supports dark
+            mode by setting the prop <TypeHighlight>darkMode</TypeHighlight> to{" "}
+            <TypeHighlight>true</TypeHighlight>. The elevation can be used to
+            establish a hierarchy between other content. In practical terms, the
+            elevation controls the size of the shadow applied to the surface. In
+            dark mode, raising the elevation also makes the surface lighter.
           </DescParagraph>
 
-          <Paper
-            variant="outlined"
+          <div
             style={{
-              padding: "25px",
               display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexDirection: "column",
-              gap: "20px",
-            }}
-          >
-            <DemoFileMosaicLocalization />
-          </Paper>
-          <CodeJSFileMosaicLocalization />
-        </section>
-
-        <section id="file-icon">
-          <SubTitle content="File Icons (extensive list)" />
-          <DescParagraph>
-            The <CodeHighlight>FileMosaic</CodeHighlight> component supports
-            several file types to properly set a file icon. The complete list of
-            file icons is the following:
-          </DescParagraph>
-          <Paper
-            variant="outlined"
-            style={{
-              padding: "25px 0",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              //flexDirection: "column",
-              gap: "10px",
               flexWrap: "wrap",
+              width: "100%",
+              padding: "25px 0",
             }}
           >
-            <DemoFileMosaicFileIcons />
-          </Paper>
-        </section> */}
+            <DemoFileMosaicDarkMode card />
+          </div>
 
+          <CodeJSFileMosaicDarkMode card />
+        </section> */}
         <section id="api">
           <SubTitle content="API" />
           <DescParagraph>
@@ -356,7 +325,7 @@ const rightMenuItems = [
   },
   {
     id: 8,
-    label: "Dark mode",
+    label: "Dark mode & elevation",
     referTo: "/components/file-mosaic#dark-mode",
   },
 ];