@windstream/react-shared-components 0.0.52 → 0.0.54

package/package.json

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

package/src/components/checklist/index.tsx

@@ -1,39 +1,53 @@
-import React from "react";
-
-import { ChecklistProps } 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";
-
-export const Checklist: React.FC<ChecklistProps> = props => {
-  const { items, listIconName = "check", listItemClassName } = props;
-
-  if (!items?.length) return null;
-
-  return (
-    <List className="mt-2 space-y-1">
-      {items.map((text, idx) => (
-        <ListItem
-          key={idx}
-          className={cx(
-            "flex items-center gap-2 text-text-secondary",
-            listItemClassName
-          )}
-        >
-          <MaterialIcon
-            name={listIconName}
-            size={20}
-            weight="600"
-            className="text-icon-brand"
-          />
-          <Text as="span">{text}</Text>
-        </ListItem>
-      ))}
-    </List>
-  );
-};
-
-Checklist.displayName = "Checklist";
-
-export type { ChecklistProps };
+import React from "react";
+
+import { ChecklistProps } 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";
+
+export const Checklist: React.FC<ChecklistProps> = props => {
+  const {
+    items,
+    listIconName = "check",
+    listItemClassName,
+    iconSize = 20,
+    iconPosition = "center",
+  } = props;
+  const showIcons = listIconName !== "disc";
+  if (!items?.length) return null;
+
+  return (
+    <List
+      className="mt-2 space-y-1"
+      variant={showIcons ? "default" : "unstyled"}
+    >
+      {items.map((text, idx) => (
+        <ListItem
+          variant={showIcons ? "default" : "unstyled"}
+          key={idx}
+          className={cx(
+            `flex ${iconPosition === "top" ? "items-start" : "items-center"} gap-2 text-text-secondary`,
+            listItemClassName
+          )}
+        >
+          {showIcons && (
+            <div>
+              <MaterialIcon
+                name={listIconName}
+                size={iconSize}
+                weight="600"
+                className={`text-icon-brand ${iconPosition === "top" ? "mt-2" : ""}`}
+              />
+            </div>
+          )}
+          <Text as="div">{text}</Text>
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+Checklist.displayName = "Checklist";
+
+export type { ChecklistProps };

package/src/components/checklist/types.ts

@@ -1,6 +1,8 @@
 export type ChecklistProps = {
   items: React.ReactNode[];
   // TODO: add icon names as needed
-  listIconName?: "check";
+  listIconName?: "check" | "disc";
   listItemClassName?: string;
+  iconSize?: 20 | 24 | 32 | 40 | 48 | 52 | undefined;
+  iconPosition?: "top" | "center";
 };

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -71,7 +71,9 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               </Text>
             )}
             {/* Checklist Rendering */}
-            {checklist.length > 0 && <Checklist items={checklist} />}
+            {checklist.length > 0 && (
+              <Checklist items={checklist} iconPosition="top" iconSize={24} />
+            )}
             {/* Image Links Collection */}
             {imageLinks?.map((link, index) => (
               <div key={index} className="image-link">
@@ -103,7 +105,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                   alt="section-image"
                   width={imageWidth}
                   height={imageHeight}
-                  className=" rounded-[40px]  h-full object-cover left-0 right-0 bottom-0 top-0"
+                  className="bottom-0 left-0 right-0 top-0 h-full rounded-[40px] object-cover"
                 />
               )}
             </div>