@syscore/ui-library 1.19.0 → 1.20.0

package/client/global.css

@@ -2161,6 +2161,12 @@ body {
   transform: translateY(-50%) rotate(90deg);
 }
 
+@media (max-width: 639px) {
+  .tooltip-content {
+    max-width: calc(100vw - 2rem);
+  }
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -2542,6 +2548,17 @@ body {
   transition-duration: 300ms;
 }
 
+@media (max-width: 639px) {
+  .dialog-content {
+    width: 100%;
+    padding-inline: 1rem;
+  }
+
+  .dialog-content-wrapper {
+    width: 100%;
+  }
+}
+
 .dialog-close {
   position: absolute;
   top: 1rem;

package/client/ui/Dialog.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import {
   Dialog,
@@ -13,6 +13,28 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../components/ui/dialog";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerFooter,
+  DrawerClose,
+  DrawerTrigger,
+} from "../components/ui/drawer";
+
+function useIsMobile(breakpoint = 640) {
+  const [isMobile, setIsMobile] = useState(
+    () => window.innerWidth < breakpoint,
+  );
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [breakpoint]);
+  return isMobile;
+}
 
 const meta = {
   title: "Review/Dialog",
@@ -206,8 +228,8 @@ export const LongContentScroll: Story = {
               By accessing and using the WELL Building Standard platform, you
               acknowledge that you have read, understood, and agree to be bound
               by these Terms of Service. If you do not agree to these terms, you
-              must not use the platform. These terms constitute a legally binding
-              agreement between you and the International WELL Building
+              must not use the platform. These terms constitute a legally
+              binding agreement between you and the International WELL Building
               Institute.
             </p>
 
@@ -290,3 +312,82 @@ export const LongContentScroll: Story = {
     );
   },
 };
+
+export const WithResponsiveDrawer: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const isMobile = useIsMobile();
+
+    if (isMobile) {
+      return (
+        <Drawer open={open} onOpenChange={setOpen}>
+          <DrawerTrigger asChild>
+            <Button size="large" variant="general-primary">
+              Open Dialog
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle className="text-gray-800 text-center">
+                Are you sure?
+              </DrawerTitle>
+            </DrawerHeader>
+            <div className="flex gap-4 justify-center items-center p-6">
+              <Button
+                size="utility"
+                variant="general-secondary"
+                onClick={() => setOpen(false)}
+              >
+                Nevermind
+              </Button>
+              <Button
+                size="utility"
+                variant="general-primary"
+                onClick={() => setOpen(false)}
+              >
+                Yes, delete user
+              </Button>
+            </div>
+          </DrawerContent>
+        </Drawer>
+      );
+    }
+
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button
+            size="large"
+            variant="general-primary"
+            onClick={() => setOpen(true)}
+          >
+            Open Dialog
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:min-w-[297px]" showCloseButton={false}>
+          <DialogHeader>
+            <DialogTitle className="text-gray-800 text-center mb-8 h-8 justify-center items-center flex">
+              Are you sure?
+            </DialogTitle>
+          </DialogHeader>
+          <div className="flex gap-4 justify-center items-center">
+            <Button
+              size="utility"
+              variant="general-secondary"
+              onClick={() => setOpen(false)}
+            >
+              Nevermind
+            </Button>
+            <Button
+              size="utility"
+              variant="general-primary"
+              onClick={() => setOpen(false)}
+            >
+              Yes, delete user
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+};

package/client/ui/MobileNav.stories.tsx

@@ -18,6 +18,21 @@ import { UtilityCompare } from "../components/icons/UtilityCompare";
 import { UtilityRevisionsShow } from "../components/icons/UtilityRevisionsShow";
 import { UtilityFeedback } from "../components/icons/UtilityFeedback";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useIsMobile } from "@/hooks/use-mobile";
+import {
+  DrawerTitle,
+  DrawerHeader,
+  DrawerContent,
+  Drawer,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
 
 const meta = {
   title: "Review/MobileNav",
@@ -235,45 +250,73 @@ const PanelContent = ({ activeKey }: { activeKey: string }) => {
 export const Default: Story = {
   args: { children: null },
 
-  render: () => (
-    <div className="h-screen w-full bg-white">
-      {/* Main content area */}
-      <div className="p-6">
-        <p className="text-sm text-gray-400">
-          Tap an icon below to open the panel.
-        </p>
-        <Button
-          size="large"
-          variant="general-primary"
-          onClick={() => alert("Hello")}
-        >
-          Open panel
-        </Button>
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div className="h-screen w-full bg-white">
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button
+              size="large"
+              variant="general-primary"
+              onClick={() => setOpen(true)}
+            >
+              Open Dialog
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="w-[400px]" showCloseButton={false}>
+            <DialogHeader>
+              <DialogTitle className="text-gray-800 text-center mb-8 h-8 justify-center items-center flex">
+                Are you sure?
+              </DialogTitle>
+            </DialogHeader>
+            <p className="body-small text-gray-600 text-center">
+              This action cannot be undone. The user will lose access to all
+              projects, certifications, and associated data. Please confirm you
+              wish to proceed.
+            </p>
+            <div className="flex gap-4 justify-center items-center">
+              <Button
+                size="utility"
+                variant="general-secondary"
+                onClick={() => setOpen(false)}
+              >
+                Nevermind
+              </Button>
+              <Button
+                size="utility"
+                variant="general-primary"
+                onClick={() => setOpen(false)}
+              >
+                Yes, delete user
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+        {/* Fixed bottom nav */}
+        <MobileNav>
+          <MobileNavPanel>
+            {(activeKey) => <PanelContent activeKey={activeKey} />}
+          </MobileNavPanel>
+
+          <MobileNavBar>
+            <MobileNavTrigger value="list" label="Changes">
+              <UtilityText className="size-6" />
+            </MobileNavTrigger>
+            <MobileNavTrigger value="workflow" label="Workflow">
+              <UtilityCompare className="size-6" />
+            </MobileNavTrigger>
+            <MobileNavTrigger value="edit" label="Edits">
+              <UtilityRevisionsShow className="size-6" />
+            </MobileNavTrigger>
+            <MobileNavTrigger value="comments" label="Comments">
+              <UtilityFeedback className="size-6" />
+            </MobileNavTrigger>
+          </MobileNavBar>
+        </MobileNav>
       </div>
-
-      {/* Fixed bottom nav */}
-      <MobileNav>
-        <MobileNavPanel>
-          {(activeKey) => <PanelContent activeKey={activeKey} />}
-        </MobileNavPanel>
-
-        <MobileNavBar>
-          <MobileNavTrigger value="list" label="Changes">
-            <UtilityText className="size-6" />
-          </MobileNavTrigger>
-          <MobileNavTrigger value="workflow" label="Workflow">
-            <UtilityCompare className="size-6" />
-          </MobileNavTrigger>
-          <MobileNavTrigger value="edit" label="Edits">
-            <UtilityRevisionsShow className="size-6" />
-          </MobileNavTrigger>
-          <MobileNavTrigger value="comments" label="Comments">
-            <UtilityFeedback className="size-6" />
-          </MobileNavTrigger>
-        </MobileNavBar>
-      </MobileNav>
-    </div>
-  ),
+    );
+  },
 };
 
 const WithCustomActionRender = () => {

package/client/ui/Tooltip.stories.tsx

@@ -86,6 +86,30 @@ export const Simple: Story = {
   ),
 };
 
+export const LongText: Story = {
+  render: () => (
+    <div className="p-16 h-screen">
+      <Tooltip trigger="click">
+        <TooltipTrigger>Click for details</TooltipTrigger>
+        <TooltipContent className="w-[400px]">
+          <div className="space-y-2">
+            <Text as="h1" variant="body-base" className="text-white">
+              WELL Feature Details
+            </Text>
+            <Text as="p" variant="body-small" className="text-white/90">
+              This feature requires documentation of at least two instances of
+              biophilic design elements incorporated into the space, including
+              natural materials, plants, water features, or views to the
+              outside. All elements must be verified by a WELL Assessor during
+              the on-site performance verification visit.
+            </Text>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
 export const Variants: Story = {
   render: () => (
     <div className="p-16 flex gap-16">