@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/components/checklist/index.tsx

@@ -1,61 +1,96 @@
-import React from "react";
-
-import { ChecklistProps, iconColors } from "@shared/components/checklist/types";
-import { List, ListItem } from "@shared/components/list";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils/cx";
-
-export const Checklist: React.FC<ChecklistProps> = props => {
-  const {
-    items,
-    listIconName = "check",
-    listItemClassName,
-    listContainerClassName,
-    iconSize = 20,
-    iconPosition = "center",
-    iconColor = "green",
-    iconClassName,
-  } = props;
-  const showIcons = listIconName !== "disc";
-  if (!items?.length) return null;
-
-  return (
-    <List
-      className={cx("mt-2 space-y-1", listContainerClassName)}
-      variant={showIcons ? "unstyled" : "default"}
-    >
-      {items.map((text, idx) => (
-        <ListItem
-          variant={showIcons ? "unstyled" : "default"}
-          key={idx}
-          className={cx(
-            `${showIcons ? "flex" : ""} ${iconPosition === "top" ? "items-start" : "items-center"} gap-2 text-text-secondary`,
-            listItemClassName
-          )}
-        >
-          {showIcons && (
-            <div className="flex leading-none">
-              <MaterialIcon
-                name={listIconName}
-                size={iconSize}
-                color={iconColors[iconColor]}
-                weight="600"
-                className={cx(
-                  "block",
-                  iconPosition === "top" ? "mt-1" : "",
-                  iconClassName
-                )}
-              />
-            </div>
-          )}
-          <Text as="div">{text}</Text>
-        </ListItem>
-      ))}
-    </List>
-  );
-};
-
-Checklist.displayName = "Checklist";
-
-export type { ChecklistProps };
+import React from "react";
+
+import {
+  ChecklistItem,
+  ChecklistProps,
+  iconColors,
+} from "@shared/components/checklist/types";
+import { List, ListItem } from "@shared/components/list";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils/cx";
+
+function isChecklistItem(
+  item: React.ReactNode | ChecklistItem
+): item is ChecklistItem {
+  return (
+    item !== null &&
+    typeof item === "object" &&
+    !React.isValidElement(item) &&
+    "title" in (item as Record<string, unknown>)
+  );
+}
+
+export const Checklist: React.FC<ChecklistProps> = props => {
+  const {
+    items,
+    listIconName = "check",
+    listItemClassName,
+    listContainerClassName,
+    iconSize = 20,
+    iconPosition = "center",
+    iconColor = "green",
+    iconClassName,
+  } = props;
+  const showIcons = listIconName !== "disc";
+  if (!items?.length) return null;
+
+  return (
+    <List
+      className={cx("mt-2 space-y-1", listContainerClassName)}
+      variant={showIcons ? "unstyled" : "default"}
+    >
+      {items.map((item, idx) => {
+        const structured = isChecklistItem(item);
+        const hasCustomIcon = structured && !!item.iconUrl;
+        const content = structured ? item.title : item;
+
+        return (
+          <ListItem
+            variant={showIcons ? "unstyled" : "default"}
+            key={idx}
+            className={cx(
+              `${showIcons ? "flex" : ""} ${iconPosition === "top" ? "items-start" : "items-center"} gap-2 text-text-secondary`,
+              listItemClassName
+            )}
+          >
+            {showIcons && hasCustomIcon ? (
+              <div className="flex shrink-0 leading-none">
+                <img
+                  src={item.iconUrl}
+                  alt={item.iconAlt || ""}
+                  width={iconSize}
+                  height={iconSize}
+                  className={cx(
+                    "block object-contain",
+                    iconPosition === "top" ? "mt-1" : "",
+                    iconClassName
+                  )}
+                />
+              </div>
+            ) : showIcons ? (
+              <div className="flex leading-none">
+                <MaterialIcon
+                  name={listIconName}
+                  size={iconSize}
+                  color={iconColors[iconColor]}
+                  weight="600"
+                  className={cx(
+                    "block",
+                    iconPosition === "top" ? "mt-1" : "",
+                    iconClassName
+                  )}
+                />
+              </div>
+            ) : null}
+            <Text as="div">{content}</Text>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+};
+
+Checklist.displayName = "Checklist";
+
+export type { ChecklistItem, ChecklistProps };

package/src/components/checklist/types.ts

@@ -1,17 +1,23 @@
-export type ChecklistProps = {
-  items: React.ReactNode[];
-  // TODO: add icon names as needed
-  listIconName?: "check" | "disc";
-  listItemClassName?: string;
-  listContainerClassName?: string;
-  iconClassName?: string;
-  iconSize?: 20 | 24 | 32 | 40 | 48 | 52 | undefined;
-  iconPosition?: "top" | "center";
-  iconColor?: "green" | "yellow" | "blue";
-};
-
-export const iconColors = {
-  green: "#209A61",
-  yellow: "#F5FF36",
-  blue: "#0393BA",
-};
+export type ChecklistItem = {
+  title: React.ReactNode;
+  iconUrl?: string;
+  iconAlt?: string;
+};
+
+export type ChecklistProps = {
+  items: (React.ReactNode | ChecklistItem)[];
+  // TODO: add icon names as needed
+  listIconName?: "check" | "disc";
+  listItemClassName?: string;
+  listContainerClassName?: string;
+  iconClassName?: string;
+  iconSize?: 20 | 24 | 32 | 40 | 48 | 52 | undefined;
+  iconPosition?: "top" | "center";
+  iconColor?: "green" | "yellow" | "blue";
+};
+
+export const iconColors = {
+  green: "#209A61",
+  yellow: "#F5FF36",
+  blue: "#0393BA",
+};