@windstream/react-shared-components 0.1.24 → 0.1.26

package/dist/core.d.ts

@@ -63,7 +63,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "location_on" | "search" | undefined;
+    prefixIconName?: "search" | "location_on" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
@@ -345,7 +345,7 @@ type ButtonAsAnchor = ButtonCustomProps & Omit<AnchorHTMLAttributes<HTMLAnchorEl
 };
 type ButtonProps = ButtonAsButton | ButtonAsAnchor;
 
-declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 declare const Checklist: React__default.FC<ChecklistProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

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

@@ -1,97 +1,99 @@
-"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";
-
-type ExtendedModalProps = ModalProps & {
-  containerAttributes?: React.HTMLAttributes<HTMLDivElement>;
-};
-export const Modal: React.FC<ExtendedModalProps> = props => {
-  const {
-    isOpen,
-    onRequestClose,
-    size,
-    title,
-    content,
-    description,
-    children,
-    bodyClassName,
-    containerAttributes,
-  } = props;
-
-  return (
-    <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"] }}
-          >
-            <div {...containerAttributes}>
-              <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>
-            </div>
-          </Dialog.Content>
-        </motion.div>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
+"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";
+
+type ExtendedModalProps = ModalProps & {
+  type?: "modal";
+  index?: 0;
+};
+export const Modal: React.FC<ExtendedModalProps> = props => {
+  const {
+    isOpen,
+    onRequestClose,
+    size,
+    title,
+    content,
+    description,
+    children,
+    bodyClassName,
+    type,
+    index,
+  } = props;
+
+  return (
+    <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"] }}
+          >
+            <div data-section-type={type} data-section-index={index}>
+              <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>
+            </div>
+          </Dialog.Content>
+        </motion.div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};