Feature/elevation

packages/demo/src/components/demo/dialog.tsx

@@ -6,6 +6,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
+  Card,
+  CardContent,
+  ELEVATION,
 } from "@eqtylab/equality";
 import { useState } from "react";
 
@@ -113,3 +116,42 @@ export const DialogDemo = ({
     </div>
   );
 };
+
+export const DialogWithTableDemo = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <div>
+      <Button size="sm" onClick={() => setIsModalOpen(true)}>
+        Open Dialog
+      </Button>
+      <Dialog open={isModalOpen} onOpenChange={() => setIsModalOpen(false)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+          </DialogHeader>
+          <DialogDescription>Dialog Description</DialogDescription>
+          <Card elevation={ELEVATION.FLOATING}>
+            <CardContent>
+              <div className="space-y-2">
+                <h4 className="font-medium">Card</h4>
+                <p className="text-text-secondary text-sm">
+                  This card has an elevation of Floating.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+          <DialogFooter>
+            <Button
+              size="sm"
+              variant="tertiary"
+              onClick={() => setIsModalOpen(false)}
+            >
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};

packages/demo/src/components/demo/display-field.tsx

@@ -1,22 +1,32 @@
-import { DisplayField, IconButton } from "@eqtylab/equality";
+import {
+  Card,
+  CardContent,
+  DisplayField,
+  Heading,
+  IconButton,
+} from "@eqtylab/equality";
+import type { Elevation } from "@eqtylab/equality";
 
 export const DisplayFieldDemo = ({
   truncate = false,
   copy = true,
   prefix = "",
   variant = "neutral",
+  elevation,
 }: {
   truncate?: true | false | "middle";
   copy?: boolean;
   prefix?: string;
   variant?: "neutral" | "success" | "neutralCheck" | "failure";
+  elevation?: Elevation;
 }) => {
   return (
     <DisplayField
       truncate={truncate}
       copy={copy}
       prefix={prefix}
       variant={variant}
+      elevation={elevation}
     >
       zQ3shrGxRrYyWixJGrr45jJ1MEY76YQZ4KVbt9CYRsTWZ5MWV
     </DisplayField>
@@ -53,23 +63,26 @@ export function DisplayFieldWithActionsDemo({
   );
 }
 
-export const DisplayFieldWithSlotDemo = ({
+const DisplayFieldWithSlotExample = ({
   truncate = false,
   copy = true,
   prefix = "",
   variant = "neutral",
+  elevation,
 }: {
   truncate?: true | false | "middle";
   copy?: boolean;
   prefix?: string;
   variant?: "neutral" | "success" | "neutralCheck" | "failure";
+  elevation?: Elevation;
 }) => {
   return (
     <DisplayField
       truncate={truncate}
       copy={copy}
       prefix={prefix}
       variant={variant}
+      elevation={elevation}
       slot={
         <div className="flex flex-col gap-2">
           <div>No additional data available</div>
@@ -81,3 +94,59 @@ export const DisplayFieldWithSlotDemo = ({
     </DisplayField>
   );
 };
+
+export const DisplayFieldWithSlotDemo = ({
+  truncate = false,
+  copy = true,
+  prefix = "",
+  variant = "neutral",
+  elevation,
+  withinCard = false,
+}: {
+  truncate?: true | false | "middle";
+  copy?: boolean;
+  prefix?: string;
+  variant?: "neutral" | "success" | "neutralCheck" | "failure";
+  elevation?: Elevation;
+  withinCard?: boolean;
+}) => {
+  if (withinCard) {
+    return (
+      <div className="space-y-6">
+        <DisplayFieldWithSlotExample
+          truncate={truncate}
+          copy={copy}
+          prefix={prefix}
+          variant={variant}
+          elevation={elevation}
+        />
+        <Card elevation={elevation}>
+          <CardContent className="border-border border-b">
+            <Heading as="h5">
+              Wrapped in Card Component with {elevation} elevation
+            </Heading>
+          </CardContent>
+          <CardContent>
+            <DisplayFieldWithSlotExample
+              truncate={truncate}
+              copy={copy}
+              prefix={prefix}
+              variant={variant}
+              elevation={elevation}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <DisplayFieldWithSlotExample
+      truncate={truncate}
+      copy={copy}
+      prefix={prefix}
+      variant={variant}
+      elevation={elevation}
+    />
+  );
+};

packages/demo/src/components/demo/dropdown-menu.tsx

@@ -17,9 +17,11 @@ import {
   DropdownMenuSubTrigger,
 } from "@eqtylab/equality";
 import { Settings, User, LogOut } from "lucide-react";
+import type { Elevation } from "@eqtylab/equality";
 
 export const DropdownMenuDemo = ({
   variant = "default",
+  elevation,
 }: {
   variant?:
     | "default"
@@ -29,6 +31,7 @@ export const DropdownMenuDemo = ({
     | "with-shortcuts"
     | "with-submenu"
     | "with-groups";
+  elevation?: Elevation;
 }) => {
   const [showStatusBar, setShowStatusBar] = useState(true);
   const [showActivityBar, setShowActivityBar] = useState(false);
@@ -43,7 +46,7 @@ export const DropdownMenuDemo = ({
             Open Menu
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
+        <DropdownMenuContent align="start" elevation={elevation}>
           <DropdownMenuItem>Profile</DropdownMenuItem>
           <DropdownMenuItem>Settings</DropdownMenuItem>
           <DropdownMenuItem>Logout</DropdownMenuItem>
@@ -60,7 +63,7 @@ export const DropdownMenuDemo = ({
             Account Menu
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
+        <DropdownMenuContent align="start" elevation={elevation}>
           <DropdownMenuLabel>My Account</DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem>
@@ -175,7 +178,7 @@ export const DropdownMenuDemo = ({
             More Options
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
+        <DropdownMenuContent align="start" elevation={elevation}>
           <DropdownMenuItem>Back</DropdownMenuItem>
           <DropdownMenuItem>Forward</DropdownMenuItem>
           <DropdownMenuItem>Reload</DropdownMenuItem>
@@ -207,7 +210,7 @@ export const DropdownMenuDemo = ({
             File Menu
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
+        <DropdownMenuContent align="start" elevation={elevation}>
           <DropdownMenuGroup>
             <DropdownMenuLabel>File</DropdownMenuLabel>
             <DropdownMenuItem>

packages/demo/src/components/demo/select.tsx

@@ -6,11 +6,14 @@ import {
   SelectTrigger,
   SelectItem,
 } from "@eqtylab/equality";
+import type { Elevation } from "@eqtylab/equality";
 
 export function SelectDemo({
   variant = "default",
+  elevation,
 }: {
   variant?: "default" | "disabled" | "pre-selected";
+  elevation?: Elevation;
 }) {
   const [selectValue, setSelectValue] = useState<string>("");
 
@@ -20,7 +23,7 @@ export function SelectDemo({
         <SelectTrigger id="select-default">
           <SelectValue placeholder="Select an option" />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent elevation={elevation}>
           <SelectItem value="option1">Option 1</SelectItem>
           <SelectItem value="option2">Option 2</SelectItem>
           <SelectItem value="option3">Option 3</SelectItem>
@@ -35,7 +38,7 @@ export function SelectDemo({
         <SelectTrigger id="select-disabled">
           <SelectValue placeholder="Disabled select" />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent elevation={elevation}>
           <SelectItem value="option1">Option 1</SelectItem>
           <SelectItem value="option2">Option 2</SelectItem>
         </SelectContent>
@@ -49,7 +52,7 @@ export function SelectDemo({
         <SelectTrigger id="select-preselected">
           <SelectValue placeholder="Select an option" />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent elevation={elevation}>
           <SelectItem value="option1">Option 1</SelectItem>
           <SelectItem value="option2">Option 2</SelectItem>
           <SelectItem value="option3">Option 3</SelectItem>

packages/demo/src/components/demo/table.tsx

@@ -1,16 +1,20 @@
 import { Button, SortButton, Table, Badge } from "@eqtylab/equality";
+import type { Elevation } from "@eqtylab/equality";
 
 interface TableDemoProps {
   variant?:
     | "unclickable"
     | "clickable"
     | "with-actions"
     | "with-border"
-    | "with-sorter"
-    | "with-background";
+    | "with-sorter";
+  elevation: Elevation;
 }
 
-export const TableDemo = ({ variant = "unclickable" }: TableDemoProps) => {
+export const TableDemo = ({
+  variant = "unclickable",
+  elevation,
+}: TableDemoProps) => {
   const columns = [
     { key: "name", content: "Name" },
     { key: "email", content: "Email" },
@@ -82,11 +86,23 @@ export const TableDemo = ({ variant = "unclickable" }: TableDemoProps) => {
   ];
 
   if (variant === "unclickable") {
-    return <Table columns={columns} rows={demo_rows_unclickable} />;
+    return (
+      <Table
+        columns={columns}
+        rows={demo_rows_unclickable}
+        elevation={elevation}
+      />
+    );
   }
 
   if (variant === "clickable") {
-    return <Table columns={columns} rows={demo_rows_clickable} />;
+    return (
+      <Table
+        columns={columns}
+        rows={demo_rows_clickable}
+        elevation={elevation}
+      />
+    );
   }
 
   if (variant === "with-actions") {
@@ -152,12 +168,23 @@ export const TableDemo = ({ variant = "unclickable" }: TableDemoProps) => {
       },
     ];
     return (
-      <Table columns={columns_with_actions} rows={demo_rows_with_actions} />
+      <Table
+        columns={columns_with_actions}
+        rows={demo_rows_with_actions}
+        elevation={elevation}
+      />
     );
   }
 
   if (variant === "with-border") {
-    return <Table columns={columns} rows={demo_rows_unclickable} border />;
+    return (
+      <Table
+        columns={columns}
+        rows={demo_rows_unclickable}
+        border
+        elevation={elevation}
+      />
+    );
   }
 
   if (variant === "with-sorter") {
@@ -216,16 +243,12 @@ export const TableDemo = ({ variant = "unclickable" }: TableDemoProps) => {
       },
     ];
 
-    return <Table columns={columns_with_sorter} rows={demo_rows_unclickable} />;
-  }
-
-  if (variant === "with-background") {
-    return <Table columns={columns} rows={demo_rows_unclickable} background />;
-  }
-
-  if (variant === "with-border-and-background") {
     return (
-      <Table columns={columns} rows={demo_rows_unclickable} border background />
+      <Table
+        columns={columns_with_sorter}
+        rows={demo_rows_unclickable}
+        elevation={elevation}
+      />
     );
   }
 

packages/demo/src/components/sidebar.astro

@@ -20,6 +20,10 @@ const gettingStartedLinks = [
     text: "Color Tokens",
     href: "/getting-started/color-tokens",
   },
+  {
+    text: "Elevation",
+    href: "/getting-started/elevation",
+  },
 ];
 
 const componentsLinks = components.map((component: any) => ({