@windstream/react-shared-components 0.2.35 → 0.2.36

package/src/contentful/blocks/dynamic-tabs/index.tsx

@@ -1,27 +1,32 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import {
+  OrderedAccordionView,
+  OrderedSidebarView,
+  OrderedTabView,
+} from "./ordered-tab-views";
+import { AccordionView, SidebarView, TabView } from "./tab-views";
 import { DynamicTabsT } from "./types";
-import { AnimatePresence, motion } from "framer-motion";
 
-import { Collapse } from "@shared/components/collapse";
-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 function DynamicTabs(props: DynamicTabsT) {
   const [currentTabIndex, setCurrentTabIndex] = useState(0);
   const [fragment, setFragment] = useState("");
+  const [subitemColCount, setSubitemColCount] = useState<number>(2);
   const {
     title,
     subTitle,
     tabs,
-    tabsContent,
     navigationType = true,
     mobileSidebarTabType = true,
+    dynamic = false,
+    isOrderedList = false,
   } = props;
 
+  const items = tabs?.items ?? [];
+
   useEffect(() => {
     if (typeof window !== "undefined") {
       setFragment(window.location.hash);
@@ -37,7 +42,7 @@ export function DynamicTabs(props: DynamicTabsT) {
   }, []);
 
   useEffect(() => {
-    tabs?.items?.some((tab: any, index: number) => {
+    tabs?.items?.some((tab, index) => {
       const tabId = `#${tab?.anchorId || "tab-" + index}`;
       if (tabId === fragment) {
         setCurrentTabIndex(index);
@@ -46,6 +51,31 @@ export function DynamicTabs(props: DynamicTabsT) {
     });
   }, [tabs, fragment]);
 
+  useEffect(() => {
+    if (!dynamic) return;
+
+    const updateSubitemColCount = () => {
+      if (typeof window === "undefined") return;
+      const width = window.innerWidth;
+      if (width <= 640) {
+        setSubitemColCount(2); // Small devices
+      } else if (width > 750 || width <= 768) {
+        setSubitemColCount(3); // Medium devices
+      } else if (width <= 1024) {
+        setSubitemColCount(2); // Large devices
+      } else {
+        setSubitemColCount(3); // Large devices
+      }
+    };
+
+    updateSubitemColCount();
+    window.addEventListener("resize", updateSubitemColCount);
+
+    return () => {
+      window.removeEventListener("resize", updateSubitemColCount);
+    };
+  }, [dynamic]);
+
   const handleTabClick = (index: number, anchor: string) => {
     setCurrentTabIndex(index);
 
@@ -54,127 +84,6 @@ export function DynamicTabs(props: DynamicTabsT) {
     }
   };
 
-  const tabViewJSX = (
-    <>
-      <div className="overflow-x-auto px-5 [-ms-overflow-style:none] [scrollbar-width:none] md:flex md:justify-center [&::-webkit-scrollbar]:hidden">
-        <div className="flex w-max gap-10">
-          {tabs?.items?.map((item: any, index: number) => (
-            <Button
-              showButtonAs="unstyled"
-              key={index}
-              onClick={() => handleTabClick(index, item?.anchorId)}
-              buttonClassName={cx(
-                "py-2 whitespace-nowrap",
-                index === currentTabIndex
-                  ? "label1 border-b-2 border-border-focus-secondary"
-                  : "body1"
-              )}
-            >
-              {item.tabName}
-            </Button>
-          ))}
-        </div>
-      </div>
-
-      {tabsContent?.map((tab: any, index: number) => {
-        return (
-          <div key={index}>
-            <AnimatePresence>
-              <motion.div
-                initial={{ height: 0, opacity: 0 }}
-                animate={{
-                  height: index === currentTabIndex ? "auto" : 0,
-                  opacity: index === currentTabIndex ? 1 : 0,
-                }}
-                exit={{ height: 0, opacity: 0 }}
-                transition={{ duration: 0.3 }}
-              >
-                {tab}
-              </motion.div>
-            </AnimatePresence>
-          </div>
-        );
-      })}
-    </>
-  );
-
-  const accordionViewJSX = (
-    <>
-      {tabs?.items?.map((item: any, index: number) => (
-        <div key={index} className="py-5">
-          <Button
-            showButtonAs="unstyled"
-            onClick={() => handleTabClick(index, item?.anchorId)}
-            buttonClassName={cx(
-              "w-full flex justify-between items-center px-4 py-5",
-              index === currentTabIndex ? "bg-bg-surface-active" : ""
-            )}
-          >
-            <span className={"heading6"}>{item.tabName}</span>
-            <MaterialIcon
-              name={
-                index === currentTabIndex
-                  ? "keyboard_arrow_down"
-                  : "keyboard_arrow_up"
-              }
-              fill={1}
-              size={48}
-            />
-          </Button>
-          <Collapse open={index === currentTabIndex}>
-            <div className={cx("px-4 py-4")}>{tabsContent?.[index]}</div>
-          </Collapse>
-        </div>
-      ))}
-    </>
-  );
-
-  const sidebarViewJSX = (
-    <div className="flex px-5 py-20">
-      <div className="rounded-surface-lg border border-border-secondary shadow-lg">
-        <div className="flex min-w-80 flex-col gap-4 px-6 py-7">
-          {tabs?.items?.map((item: any, index: number) => (
-            <Button
-              showButtonAs="unstyled"
-              key={index}
-              onClick={() => handleTabClick(index, item?.anchorId)}
-              buttonClassName={cx(
-                "px-4 py-3 whitespace-nowrap text-left rounded-button-sm",
-                index === currentTabIndex
-                  ? "label1 text-white bg-bg-inverse"
-                  : "body1"
-              )}
-            >
-              {item.tabName}
-            </Button>
-          ))}
-        </div>
-      </div>
-
-      <div className="grow">
-        {tabsContent?.map((tab: any, index: number) => {
-          return (
-            <div key={index}>
-              <AnimatePresence>
-                <motion.div
-                  initial={{ height: 0, opacity: 0 }}
-                  animate={{
-                    height: index === currentTabIndex ? "auto" : 0,
-                    opacity: index === currentTabIndex ? 1 : 0,
-                  }}
-                  exit={{ height: 0, opacity: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  {tab}
-                </motion.div>
-              </AnimatePresence>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-
   return (
     <div>
       {title || subTitle ? (
@@ -192,13 +101,80 @@ export function DynamicTabs(props: DynamicTabsT) {
         </div>
       ) : null}
 
-      <div className="md:hidden">
-        {mobileSidebarTabType ? tabViewJSX : accordionViewJSX}
-      </div>
+      {dynamic && isOrderedList ? (
+        <>
+          <div className="md:hidden">
+            {mobileSidebarTabType ? (
+              <OrderedTabView
+                items={items}
+                currentTabIndex={currentTabIndex}
+                subitemColCount={subitemColCount}
+                onTabClick={handleTabClick}
+              />
+            ) : (
+              <OrderedAccordionView
+                items={items}
+                currentTabIndex={currentTabIndex}
+                subitemColCount={subitemColCount}
+                onTabClick={handleTabClick}
+                setCurrentTabIndex={setCurrentTabIndex}
+              />
+            )}
+          </div>
 
-      <div className="hidden md:block">
-        {navigationType ? tabViewJSX : sidebarViewJSX}
-      </div>
+          <div className="hidden md:block">
+            {navigationType ? (
+              <OrderedTabView
+                items={items}
+                currentTabIndex={currentTabIndex}
+                subitemColCount={subitemColCount}
+                onTabClick={handleTabClick}
+              />
+            ) : (
+              <OrderedSidebarView
+                items={items}
+                currentTabIndex={currentTabIndex}
+                subitemColCount={subitemColCount}
+                onTabClick={handleTabClick}
+              />
+            )}
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="md:hidden">
+            {mobileSidebarTabType ? (
+              <TabView
+                items={items}
+                currentTabIndex={currentTabIndex}
+                onTabClick={handleTabClick}
+              />
+            ) : (
+              <AccordionView
+                items={items}
+                currentTabIndex={currentTabIndex}
+                onTabClick={handleTabClick}
+              />
+            )}
+          </div>
+
+          <div className="hidden md:block">
+            {navigationType ? (
+              <TabView
+                items={items}
+                currentTabIndex={currentTabIndex}
+                onTabClick={handleTabClick}
+              />
+            ) : (
+              <SidebarView
+                items={items}
+                currentTabIndex={currentTabIndex}
+                onTabClick={handleTabClick}
+              />
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 }

package/src/contentful/blocks/dynamic-tabs/ordered-tab-views.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import { DynamicTabT } from "./types";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Button } from "@shared/contentful/blocks/button";
+import { cx } from "@shared/utils";
+
+export interface OrderedTabViewProps {
+  items: DynamicTabT[];
+  currentTabIndex: number;
+  subitemColCount: number;
+  onTabClick: (index: number, anchor: string) => void;
+}
+
+export interface OrderedAccordionViewProps extends OrderedTabViewProps {
+  setCurrentTabIndex: (index: number) => void;
+}
+
+// Renders a tab's `tabContent` nodes arranged into `subitemColCount` columns.
+export function renderOrderedChildren(
+  content: ReactNode,
+  subitemColCount: number
+) {
+  const children = Array.isArray(content) ? content : [content];
+  const colCount = Math.min(subitemColCount, children.length);
+
+  return (
+    <div className="flex flex-col py-7">
+      <div className="flex shrink-0 basis-0 flex-row gap-16 md:gap-20">
+        {[...new Array(colCount)].map((_, colIdx) => (
+          <ul
+            key={`ordered-col-${colIdx}`}
+            className="flex flex-col gap-5"
+            style={{ width: "172px" }}
+          >
+            {children
+              .slice(
+                colIdx * Math.ceil(children.length / colCount),
+                (colIdx + 1) * Math.ceil(children.length / colCount)
+              )
+              .map((child, rowIdx) => (
+                <li key={`ordered-item-${colIdx}-${rowIdx}`}>{child}</li>
+              ))}
+          </ul>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function OrderedTabView({
+  items,
+  currentTabIndex,
+  subitemColCount,
+  onTabClick,
+}: OrderedTabViewProps) {
+  return (
+    <>
+      <div className="overflow-x-auto px-5 [-ms-overflow-style:none] [scrollbar-width:none] md:flex md:justify-center [&::-webkit-scrollbar]:hidden">
+        <div className="flex w-max gap-10">
+          {items.map((tab, index) => (
+            <Button
+              showButtonAs="unstyled"
+              key={index}
+              onClick={() => onTabClick(index, tab.anchorId || "")}
+              buttonClassName={cx(
+                "py-2 whitespace-nowrap",
+                index === currentTabIndex
+                  ? "label1 border-b-2 border-border-focus-secondary"
+                  : "body1"
+              )}
+            >
+              {tab.tabName}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {items.map((tab, index) => (
+        <div key={index}>
+          <AnimatePresence>
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{
+                height: index === currentTabIndex ? "auto" : 0,
+                opacity: index === currentTabIndex ? 1 : 0,
+              }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              className={cx(
+                "overflow-hidden",
+                index === currentTabIndex ? "block" : "hidden"
+              )}
+              id={tab.anchorId || `tab-${index}`}
+            >
+              <div className="px-5 py-4 md:px-10">
+                {renderOrderedChildren(tab.tabContent, subitemColCount)}
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export function OrderedAccordionView({
+  items,
+  currentTabIndex,
+  subitemColCount,
+  onTabClick,
+  setCurrentTabIndex,
+}: OrderedAccordionViewProps) {
+  return (
+    <div className="flex w-full flex-col">
+      {items.map((tab, index) => (
+        <div key={index}>
+          <button
+            onClick={() =>
+              index === currentTabIndex
+                ? setCurrentTabIndex(-1)
+                : onTabClick(index, tab.anchorId || "")
+            }
+            className={cx(
+              "flex w-full items-center justify-between px-5 py-4 text-text md:px-10",
+              index === currentTabIndex ? "bg-bg-surface-hover" : ""
+            )}
+          >
+            <span className="heading6">{tab.tabName}</span>
+            <MaterialIcon
+              name={
+                index === currentTabIndex
+                  ? "keyboard_arrow_up"
+                  : "keyboard_arrow_down"
+              }
+              className="text-text"
+              size={40}
+            />
+          </button>
+          <AnimatePresence>
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{
+                height: index === currentTabIndex ? "auto" : 0,
+                opacity: index === currentTabIndex ? 1 : 0,
+              }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              className={cx(
+                "overflow-hidden",
+                index === currentTabIndex ? "block" : "hidden"
+              )}
+              id={tab.anchorId || `tab-${index}`}
+            >
+              <div className="px-5 py-4 md:px-10">
+                {renderOrderedChildren(tab.tabContent, subitemColCount)}
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function OrderedSidebarView({
+  items,
+  currentTabIndex,
+  subitemColCount,
+  onTabClick,
+}: OrderedTabViewProps) {
+  return (
+    <div className="flex gap-10 px-5 py-20">
+      <div className="flex-shrink-0">
+        <div className="flex min-w-[320px] gap-4 rounded-[20px] border-2 bg-bg-surface-active px-6 py-7 shadow-lg">
+          {[...new Array(Math.min(2, items.length))].map((_, colIdx) => {
+            const perColumn = Math.ceil(items.length / 2);
+
+            return (
+              <div
+                key={`tab-col-${colIdx}`}
+                className="flex flex-1 flex-col gap-4"
+              >
+                {items
+                  .slice(colIdx * perColumn, (colIdx + 1) * perColumn)
+                  .map((tab, rowIdx) => {
+                    const index = colIdx * perColumn + rowIdx;
+
+                    return (
+                      <button
+                        key={index}
+                        onClick={() => onTabClick(index, tab.anchorId || "")}
+                        className={cx(
+                          "label1 whitespace-nowrap rounded-lg px-4 py-3 text-left",
+                          index === currentTabIndex
+                            ? "bg-bg-inverse text-white"
+                            : "text-text hover:bg-bg-inverse"
+                        )}
+                      >
+                        {tab.tabName}
+                      </button>
+                    );
+                  })}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="w-full">
+        {items.map((tab, index) => (
+          <div key={index}>
+            <AnimatePresence>
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{
+                  opacity: index === currentTabIndex ? 1 : 0,
+                  y: index === currentTabIndex ? 0 : 20,
+                }}
+                exit={{ opacity: 0, y: -20 }}
+                transition={{ duration: 0.3 }}
+                className={cx(
+                  "overflow-hidden pl-10 xl:pl-20",
+                  index === currentTabIndex ? "block" : "hidden"
+                )}
+                id={tab.anchorId || `tab-${index}`}
+              >
+                {renderOrderedChildren(tab.tabContent, subitemColCount)}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/contentful/blocks/dynamic-tabs/tab-views.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import React from "react";
+import { DynamicTabT } from "./types";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Collapse } from "@shared/components/collapse";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Button } from "@shared/contentful/blocks/button";
+import { cx } from "@shared/utils";
+
+export interface TabViewProps {
+  items: DynamicTabT[];
+  currentTabIndex: number;
+  onTabClick: (index: number, anchor: string) => void;
+}
+
+export function TabView({ items, currentTabIndex, onTabClick }: TabViewProps) {
+  return (
+    <>
+      <div className="overflow-x-auto px-5 [-ms-overflow-style:none] [scrollbar-width:none] md:flex md:justify-center [&::-webkit-scrollbar]:hidden">
+        <div className="flex w-max gap-10">
+          {items.map((item, index) => (
+            <Button
+              showButtonAs="unstyled"
+              key={index}
+              onClick={() => onTabClick(index, item.anchorId)}
+              buttonClassName={cx(
+                "py-2 whitespace-nowrap",
+                index === currentTabIndex
+                  ? "label1 border-b-2 border-border-focus-secondary"
+                  : "body1"
+              )}
+            >
+              {item.tabName}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {items.map((item, index) => (
+        <div key={index}>
+          <AnimatePresence>
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{
+                height: index === currentTabIndex ? "auto" : 0,
+                opacity: index === currentTabIndex ? 1 : 0,
+              }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.3 }}
+            >
+              {item.tabContent}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export function AccordionView({
+  items,
+  currentTabIndex,
+  onTabClick,
+}: TabViewProps) {
+  return (
+    <>
+      {items.map((item, index) => (
+        <div key={index} className="py-5">
+          <Button
+            showButtonAs="unstyled"
+            onClick={() => onTabClick(index, item.anchorId)}
+            buttonClassName={cx(
+              "w-full flex justify-between items-center px-4 py-5",
+              index === currentTabIndex ? "bg-bg-surface-active" : ""
+            )}
+          >
+            <span className={"heading6"}>{item.tabName}</span>
+            <MaterialIcon
+              name={
+                index === currentTabIndex
+                  ? "keyboard_arrow_down"
+                  : "keyboard_arrow_up"
+              }
+              fill={1}
+              size={48}
+            />
+          </Button>
+          <Collapse open={index === currentTabIndex}>
+            <div className={cx("px-4 py-4")}>{item.tabContent}</div>
+          </Collapse>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export function SidebarView({
+  items,
+  currentTabIndex,
+  onTabClick,
+}: TabViewProps) {
+  return (
+    <div className="flex px-5 py-20">
+      <div className="rounded-surface-lg border border-border-secondary shadow-lg">
+        <div className="flex min-w-80 flex-col gap-4 px-6 py-7">
+          {items.map((item, index) => (
+            <Button
+              showButtonAs="unstyled"
+              key={index}
+              onClick={() => onTabClick(index, item.anchorId)}
+              buttonClassName={cx(
+                "px-4 py-3 whitespace-nowrap text-left rounded-button-sm",
+                index === currentTabIndex
+                  ? "label1 text-white bg-bg-inverse"
+                  : "body1"
+              )}
+            >
+              {item.tabName}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div className="grow">
+        {items.map((item, index) => (
+          <div key={index}>
+            <AnimatePresence>
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{
+                  height: index === currentTabIndex ? "auto" : 0,
+                  opacity: index === currentTabIndex ? 1 : 0,
+                }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.3 }}
+              >
+                {item.tabContent}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/contentful/blocks/dynamic-tabs/types.ts

@@ -1,14 +1,18 @@
-import React from "react";
+import { ReactNode } from "react";
+
+export interface DynamicTabT {
+  tabName: string;
+  anchorId: string;
+  tabContent: ReactNode;
+}
 
 export interface DynamicTabsT {
   tabs?: {
-    items: {
-      tabName: string;
-      anchorId: string;
-      tabContent: { items: any[] };
-    }[];
+    items: DynamicTabT[];
   };
-  tabsContent?: React.ReactNode[];
+  dynamic?: boolean;
+  /** When isOrderedList is true, each tab's `tabContent` is rendered as columns of children. */
+  isOrderedList?: boolean;
   entryTitle?: string;
   anchorId?: string;
   title?: string;