@windstream/react-shared-components 0.0.58 → 0.0.59

package/package.json

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

package/src/components/accordion/index.tsx

@@ -1,49 +1,61 @@
-"use client";
-
-import { useState } from "react";
-
-import { AccordionProps } from "@shared/components/accordion/types";
-import { Button } from "@shared/components/button";
-import { Collapse } from "@shared/components/collapse";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { cx } from "@shared/utils";
-
-export const Accordion: React.FC<AccordionProps> = props => {
-  const {
-    title,
-    defaultOpen,
-    children,
-    containerClassName,
-    titleClassName,
-    className,
-    buttonClassName,
-  } = props;
-  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen));
-
-  return (
-    <div className={cx("rounded-lg border", containerClassName)}>
-      <Button
-        type="button"
-        className={cx(
-          "flex w-full items-center justify-between gap-4 rounded-t-lg px-4 py-3 text-left",
-          buttonClassName
-        )}
-        onClick={() => setOpen(v => !v)}
-      >
-        <span className={cx("label5", titleClassName)}>{title}</span>
-        <MaterialIcon
-          name={open ? "keyboard_arrow_down" : "keyboard_arrow_up"}
-          fill={1}
-          size={24}
-        />
-      </Button>
-      <Collapse open={open}>
-        <div className={cx("px-4 py-4", className)}>{children}</div>
-      </Collapse>
-    </div>
-  );
-};
-
-Accordion.displayName = "Accordion";
-
-export type { AccordionProps };
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { AccordionProps } from "@shared/components/accordion/types";
+import { Button } from "@shared/components/button";
+import { Collapse } from "@shared/components/collapse";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { cx } from "@shared/utils";
+
+export const Accordion: React.FC<AccordionProps> = props => {
+  const {
+    title,
+    defaultOpen,
+    children,
+    containerClassName,
+    titleClassName,
+    className,
+    buttonClassName,
+    openOnlyOnDesktop,
+  } = props;
+  const [open, setOpen] = useState<boolean>(Boolean(false));
+
+  useEffect(() => {
+    // Only execute responsive logic if the prop is true
+    if (openOnlyOnDesktop) {
+      const isDesktop = window.innerWidth >= 1024;
+      setOpen(isDesktop);
+    } else {
+      // Otherwise, fall back to standard defaultOpen behavior
+      setOpen(Boolean(defaultOpen));
+    }
+  }, [openOnlyOnDesktop, defaultOpen]);
+
+  return (
+    <div className={cx("rounded-lg border", containerClassName)}>
+      <Button
+        type="button"
+        className={cx(
+          "flex w-full items-center justify-between gap-4 rounded-t-lg px-4 py-3 text-left",
+          buttonClassName
+        )}
+        onClick={() => setOpen(v => !v)}
+      >
+        <span className={cx("label5", titleClassName)}>{title}</span>
+        <MaterialIcon
+          name={open ? "keyboard_arrow_down" : "keyboard_arrow_up"}
+          fill={1}
+          size={24}
+        />
+      </Button>
+      <Collapse open={open}>
+        <div className={cx("px-4 py-4", className)}>{children}</div>
+      </Collapse>
+    </div>
+  );
+};
+
+Accordion.displayName = "Accordion";
+
+export type { AccordionProps };

package/src/components/accordion/types.ts

@@ -1,6 +1,7 @@
 export type AccordionProps = {
   title: string;
   defaultOpen?: boolean;
+  openOnlyOnDesktop?: boolean;
   containerClassName?: string;
   children: React.ReactNode;
   titleClassName?: string;

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

@@ -38,6 +38,7 @@ export const Accordion: React.FC<AccordionProps> = ({
               <AccordionComponent
                 title={item.title}
                 containerClassName="border-0 border-b-[1px] rounded-none"
+                openOnlyOnDesktop={true}
               >
                 <Text>{item.description}</Text>
               </AccordionComponent>