@syscore/ui-library 1.13.0 → 1.15.0

package/client/ui/PageHeader.stories.tsx

@@ -14,6 +14,8 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from "../components/ui/tooltip";
+import { motion, AnimatePresence } from "motion/react";
+import { useState } from "react";
 
 const meta = {
   title: "Review/PageHeader",
@@ -92,6 +94,10 @@ export const ThemeHeader: Story = {
         "This theme focuses on understanding and improving the overall experience of building occupants through research and feedback mechanisms.",
     };
 
+    const [isHovered, setIsHovered] = useState(false);
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const isVisible = isHovered || tooltipOpen;
+
     return (
       <PageHeader>
         <PageHeaderTopSection className="mb-4">
@@ -123,7 +129,39 @@ export const ThemeHeader: Story = {
           </PageHeaderLeftContent>
 
           <PageHeaderBadge>
-            <BadgeCertificationBronze />
+            <motion.div
+              className="flex items-center gap-2"
+              initial="hidden"
+              animate={isVisible ? "visible" : "hidden"}
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}
+            >
+              <motion.div
+                className="text-gray-800 body-small font-ftmade"
+                variants={{
+                  hidden: { opacity: 0, x: 10 },
+                  visible: { opacity: 1, x: 0 },
+                }}
+                transition={{ duration: 0.3, ease: "easeOut" }}
+              >
+                <Tooltip trigger="click" onOpenChange={setTooltipOpen}>
+                  <TooltipTrigger>
+                    <span className="body-base text-gray-600 underline-dotted cursor-pointer">
+                      WELL Certification
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent className="max-w-[400px]">
+                    <p className="body-base text-white">
+                      The WELL Certification is a globally recognized standard
+                      for healthy, people-first buildings. It is based on the
+                      WELL Building Standard, which is a comprehensive framework
+                      for creating healthy, people-first buildings.
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </motion.div>
+              <BadgeCertificationBronze />
+            </motion.div>
           </PageHeaderBadge>
         </PageHeaderTopSection>
 
@@ -138,14 +176,114 @@ export const ThemeHeader: Story = {
   },
 };
 
-// Title only
-export const TitleOnly: Story = {
+export const ThemeHeaderWithPoints: Story = {
   render: () => {
+    const themeCode = "C8";
+    const conceptColor = {
+      solid: "#0f748a",
+      contrast: "#0f748a",
+      border: "#0f748a",
+    };
+    const themeData = {
+      name: "Occupant experience",
+      description:
+        "This theme focuses on understanding and improving the overall experience of building occupants through research and feedback mechanisms.",
+    };
+
+    const [isHovered, setIsHovered] = useState(false);
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const isVisible = isHovered || tooltipOpen;
+
     return (
       <PageHeader>
-        <PageHeaderTitle className="heading-small">
-          Title only header
+        <PageHeaderTopSection className="mb-4">
+          <PageHeaderLeftContent>
+            <Tag
+              variant="code"
+              style={{
+                backgroundColor: conceptColor.contrast || conceptColor.solid,
+                borderColor: conceptColor.border,
+                color: "white",
+              }}
+            >
+              {themeCode}
+            </Tag>
+            <Tooltip trigger="click">
+              <TooltipTrigger>
+                <span className="body-base text-gray-600 underline-dotted cursor-pointer">
+                  Theme
+                </span>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-[400px]">
+                <p className="body-base text-white">
+                  Themes are groupings of related strategies that address
+                  specific aspects of health and well-being within a concept
+                  area.
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </PageHeaderLeftContent>
+
+          <PageHeaderBadge>
+            <div
+              className="flex items-center gap-4"
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}
+            >
+              <AnimatePresence mode="wait">
+                {isVisible ? (
+                  <motion.div
+                    key="hover"
+                    initial={{ opacity: 0, x: 10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: 10 }}
+                    transition={{ duration: 0.2, ease: "easeOut" }}
+                  >
+                    <Tooltip trigger="click" onOpenChange={setTooltipOpen}>
+                      <TooltipTrigger>
+                        <span className="body-base text-gray-600 underline-dotted cursor-pointer">
+                          WELL Certification
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-[400px]">
+                        <p className="body-base text-white">
+                          The WELL Certification is a globally recognized
+                          standard for healthy, people-first buildings. It is
+                          based on the WELL Building Standard, which is a
+                          comprehensive framework for creating healthy,
+                          people-first buildings.
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </motion.div>
+                ) : (
+                  <motion.div
+                    key="default"
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -10 }}
+                    transition={{ duration: 0.2, ease: "easeOut" }}
+                    className="flex items-end gap-1"
+                  >
+                    <span className="text-gray-800 overline-medium">Up to</span>
+                    <span className="text-gray-800 number-large font-semibold">
+                      +10
+                    </span>
+                    <span className="text-gray-800 overline-medium">PTS</span>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+              <BadgeCertificationBronze />
+            </div>
+          </PageHeaderBadge>
+        </PageHeaderTopSection>
+
+        <PageHeaderTitle className="heading-small mb-3">
+          {themeData.name}
         </PageHeaderTitle>
+        <PageHeaderDescription className="body-large">
+          {themeData.description}
+        </PageHeaderDescription>
       </PageHeader>
     );
   },