@windstream/react-shared-components 0.0.84 → 0.0.87

package/src/contentful/blocks/modal/index.tsx

@@ -1,12 +1,91 @@
+"use client";
+
+import React from "react";
+import {
+  backdropAnimationVariants,
+  contentAnimationVariants,
+  sizeToPixel,
+} from "./constants";
 import { ModalProps } from "./types";
+import { motion } from "framer-motion";
 
+import * as Dialog from "@radix-ui/react-dialog";
+import { MaterialIcon } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
+import { Button } from "@shared/contentful/blocks/button";
+import { cx } from "@shared/utils";
+
+export const Modal: React.FC<ModalProps> = props => {
+  const {
+    isOpen,
+    onRequestClose,
+    size,
+    title,
+    content,
+    description,
+    children,
+    bodyClassName,
+  } = props;
 
-export const Modal: React.FC<{ fields: ModalProps }> = ({ fields }) => {
   return (
-    <div>
-      <Text>Modal Block</Text>
-    </div>
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={() => isOpen && onRequestClose?.()}
+    >
+      <Dialog.Portal>
+        <motion.div
+          initial="closed"
+          animate={isOpen ? "open" : "closed"}
+          variants={backdropAnimationVariants}
+          transition={{ type: "tween", duration: 0.2, ease: "easeInOut" }}
+          className="fixed inset-0 z-[1000] bg-scrim-bg-modal"
+        >
+          <Dialog.Overlay />
+        </motion.div>
+        <motion.div
+          initial="closed"
+          animate={isOpen ? "open" : "closed"}
+          variants={contentAnimationVariants}
+          transition={{ type: "tween", duration: 0.3, ease: "easeInOut" }}
+          className="fixed left-1/2 top-1/2 z-[1001] w-auto -translate-x-1/2 -translate-y-1/2 focus:outline-none"
+        >
+          <Dialog.Content
+            className={cx(
+              "fixed left-[50%] top-[50%] w-[90vw] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-bg p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none",
+              bodyClassName
+            )}
+            style={{ maxWidth: sizeToPixel[size || "lg"] }}
+          >
+            <Dialog.Close asChild={true}>
+              <Button
+                showButtonAs="unstyled"
+                buttonClassName="absolute right-0 top-0 mr-2 mt-2 bg-bg"
+              >
+                <MaterialIcon name="close" />
+              </Button>
+            </Dialog.Close>
+            <div className="custom-modal-body max-h-[85vh] overflow-visible">
+              {title ? (
+                <Text
+                  className={cx(
+                    "mx-auto mb-3 mt-5 text-center",
+                    "heading5 md:max-w-[80%] md:pt-0",
+                    "mb-5 md:mb-[60px]"
+                  )}
+                  as="h2"
+                >
+                  {title}
+                </Text>
+              ) : null}
+
+              {description ? <Text as="div">{description}</Text> : null}
+
+              {content}
+              {children ? children : null}
+            </div>
+          </Dialog.Content>
+        </motion.div>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 };
-export default Modal;

package/src/contentful/blocks/modal/types.ts

@@ -1 +1,12 @@
-export type ModalProps = {};
+import React from "react";
+
+export type ModalProps = {
+  isOpen: boolean;
+  onRequestClose?: () => void;
+  size?: "lg" | "md" | "sm" | "xl" | "xs";
+  title?: string;
+  description?: React.ReactNode;
+  content?: React.ReactNode;
+  children?: React.ReactNode;
+  bodyClassName?: string;
+};

package/src/contentful/blocks/navigation/index.tsx

@@ -5,6 +5,7 @@ import { NavigationProps } from "./types";
 
 import { CallButton } from "@shared/components/call-button";
 import { Input } from "@shared/components/input";
+import { Link } from "@shared/components/link";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { NextImage } from "@shared/components/next-image";
 import { Text } from "@shared/components/text";
@@ -66,16 +67,18 @@ export const Navigation: React.FC<NavigationProps> = props => {
         <div className="main-nav-container" aria-label="Main Navigation">
           <div className="mobile-nav-section flex h-14 items-center justify-between px-5 py-[10px] lg:hidden">
             <div>
-              <NextImage
-                src={
-                  typeof primaryNavigationLogo === "string"
-                    ? primaryNavigationLogo
-                    : primaryNavigationLogo?.url || ""
-                }
-                alt="Kinetic business logo"
-                width={76.5}
-                height={24}
-              />
+              <Link href="/" className="flex">
+                <NextImage
+                  src={
+                    typeof primaryNavigationLogo === "string"
+                      ? primaryNavigationLogo
+                      : primaryNavigationLogo?.url || ""
+                  }
+                  alt="Kinetic business logo"
+                  width={76.5}
+                  height={24}
+                />
+              </Link>
             </div>
             <div className="flex items-center gap-6">
               <CallButton href={invocaPhoneNumberLink}>
@@ -90,17 +93,19 @@ export const Navigation: React.FC<NavigationProps> = props => {
           <div className="desktop-nav-section hidden lg:block lg:border-b lg:px-2">
             <div className="mx-auto flex h-14 max-w-120 items-center justify-between">
               <div className="flex h-full">
-                <NextImage
-                  src={
-                    typeof primaryNavigationLogo === "string"
-                      ? primaryNavigationLogo
-                      : primaryNavigationLogo?.url || ""
-                  }
-                  alt="Kinetic business logo"
-                  width={76.5}
-                  height={24}
-                  className="mr-14"
-                />
+                <Link href="/" className="flex">
+                  <NextImage
+                    src={
+                      typeof primaryNavigationLogo === "string"
+                        ? primaryNavigationLogo
+                        : primaryNavigationLogo?.url || ""
+                    }
+                    alt="Kinetic business logo"
+                    width={76.5}
+                    height={24}
+                    className="mr-14"
+                  />
+                </Link>
 
                 <div className="flex h-full items-center gap-5">
                   {primaryNavigationLinks?.map((links, index) => {

package/src/contentful/blocks/modal/Modal.stories.tsx

@@ -1,23 +0,0 @@
-import { Modal } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Modal> = {
-  title: "Contentful Blocks/Modal",
-  component: Modal,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful modal block.",
-      },
-    },
-  },
-  args: { fields: {} },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};