@windstream/react-shared-components 0.0.1

package/src/components/checkbox/index.tsx

@@ -0,0 +1,185 @@
+import React, { useCallback } from "react";
+import { cx } from "@shared/utils";
+import { CheckboxProps } from "./types";
+import { Button } from "@shared/components/button";
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  state,
+  checked = false,
+  onChange,
+  className,
+  label,
+  labelClassName,
+  containerClassName,
+  name,
+  value,
+  id,
+  disabled = false,
+  required = false,
+  error = false,
+  "data-cy": dataCy,
+  renderInfoIcon,
+  ...rest
+}) => {
+  const isDisabled = disabled || state === "disabled";
+  const isFocused = state === "focus";
+  const inputId = id || name;
+
+  const checkboxClasses = cx(
+    "flex items-center justify-center w-6 h-6 rounded-[4px] outline-offset-2",
+    isFocused &&
+      "outline",
+    className
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isDisabled) {
+        if (onChange) {
+          // Check if onChange expects a boolean parameter (new signature)
+          if (onChange.length === 1) {
+            (onChange as (isChecked: boolean) => void)(e.target.checked);
+          } else {
+            // Old signature - just call without parameters
+            (onChange as () => void)();
+          }
+        }
+      }
+    },
+    [isDisabled, onChange]
+  );
+
+  const renderIcon = () => {
+    if (checked) {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <rect
+            width="24"
+            height="24"
+            rx="4"
+            className={cx(isDisabled ? "fill-checkbox-bg-surface-selected-disabled" : "fill-bg-fill-brand")}
+          />
+          <path
+            d="M8 11.9593L11.0316 15L17 9"
+            stroke="white"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    }
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <rect
+          x="0.5"
+          y="0.5"
+          width="23"
+          height="23"
+          rx="3.5"
+          className={cx(isDisabled ? "fill-checkbox-bg-surface-disabled" : "fill-white")}
+        />
+        <rect
+          x="0.5"
+          y="0.5"
+          width="23"
+          height="23"
+          rx="3.5"
+          stroke="#CECECE"
+        />
+      </svg>
+    );
+  };
+
+  const checkboxElement = (
+    <div className={cx("flex items-center gap-3", containerClassName)}>
+      <div className="relative">
+        <input
+          type="checkbox"
+          id={inputId}
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={handleInputChange}
+          disabled={isDisabled}
+          required={required}
+          className="sr-only peer"
+          data-cy={dataCy}
+          {...rest}
+        />
+        <label
+          htmlFor={inputId}
+          className={cx("peer-focus:outline", checkboxClasses)}
+          style={{ pointerEvents: isDisabled ? "none" : "auto" }}
+        >
+          {renderIcon()}
+        </label>
+      </div>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cx("cursor-pointer", error && "text-text-critical", labelClassName)}
+        >
+          {label}
+        </label>
+      )}
+      {renderInfoIcon && (
+        <Button
+          type="button"
+          onClick={renderInfoIcon.onClick}
+          data-testid={renderInfoIcon.dataTestId}
+          className="ml-2 cursor-pointer text-icon-info"
+          aria-label="More information"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="2"
+            />
+            <path
+              d="M12 16v-4"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M12 8h.01"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </Button>
+      )}
+    </div>
+  );
+
+  return checkboxElement;
+};
+
+Checkbox.displayName = "Checkbox";
+
+export type { CheckboxProps };

package/src/components/checkbox/types.ts

@@ -0,0 +1,24 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+
+type InfoIconProps = {
+  onClick?: () => void;
+  dataTestId?: string;
+};
+
+export type CheckboxProps = {
+    checked?: boolean;
+    onChange?: ((isChecked: boolean) => void) | (() => void);
+    state?: "default" | "focus" | "disabled";
+    className?: string;
+    containerClassName?: string;
+    label?: string | ReactNode;
+    labelClassName?: string;
+    name?: string;
+    value?: string | number | boolean;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    "data-cy"?: string;
+    renderInfoIcon?: InfoIconProps;
+  } & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'>;

package/src/components/checklist/Checklist.stories.tsx

@@ -0,0 +1,151 @@
+import { Checklist } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Checklist> = {
+  title: "Components/Checklist",
+  component: Checklist,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A checklist component that displays a list of items with icons, typically used for feature lists or task lists.",
+      },
+    },
+  },
+  argTypes: {
+    items: {
+      control: { type: "object" },
+      description: "Array of strings to display as checklist items",
+    },
+    listIconName: {
+      control: { type: "select" },
+      options: ["check"],
+      description: "Icon name to display for each item",
+    },
+    listItemClassName: {
+      control: { type: "text" },
+      description: "Additional CSS classes for list items",
+    },
+  },
+  args: {
+    items: ["Feature 1", "Feature 2", "Feature 3"],
+    listIconName: "check",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default checklist
+export const Default: Story = {
+  args: {},
+};
+
+// With items
+export const WithItems: Story = {
+  args: {
+    items: [
+      "High-speed internet connection",
+      "24/7 customer support",
+      "No data caps",
+      "Free installation",
+    ],
+  },
+};
+
+// Custom icon
+export const CustomIcon: Story = {
+  args: {
+    items: ["Item 1", "Item 2", "Item 3"],
+    listIconName: "check",
+  },
+};
+
+// Custom styling
+export const CustomStyling: Story = {
+  args: {
+    items: ["Styled item 1", "Styled item 2", "Styled item 3"],
+    listItemClassName: "body1 text-text-brand",
+  },
+};
+
+// Long list
+export const LongList: Story = {
+  args: {
+    items: [
+      "Feature one with a longer description",
+      "Feature two",
+      "Feature three",
+      "Feature four",
+      "Feature five",
+      "Feature six",
+      "Feature seven",
+      "Feature eight",
+    ],
+  },
+};
+
+// Single item
+export const SingleItem: Story = {
+  args: {
+    items: ["Single checklist item"],
+  },
+};
+
+// Empty state (should not render)
+export const Empty: Story = {
+  args: {
+    items: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Checklist with no items (component returns null).",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Default Checklist</h3>
+        <Checklist items={["Item 1", "Item 2", "Item 3"]} />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Custom Styled</h3>
+        <Checklist
+          items={["Styled item 1", "Styled item 2"]}
+          listItemClassName="body1 font-semibold"
+        />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Long List</h3>
+        <Checklist
+          items={[
+            "Feature one",
+            "Feature two",
+            "Feature three",
+            "Feature four",
+            "Feature five",
+          ]}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all checklist variants and styling options.",
+      },
+    },
+  },
+};
+

package/src/components/checklist/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { List, ListItem } from "@shared/components/list";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+import { ChecklistProps } from "@shared/components/checklist/types";
+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 };

package/src/components/checklist/types.ts

@@ -0,0 +1,6 @@
+export type ChecklistProps = {
+    items: string[];
+    // TODO: add icon names as needed
+    listIconName?: 'check'
+    listItemClassName?:string
+};

package/src/components/collapse/Collapse.stories.tsx

@@ -0,0 +1,256 @@
+import { Collapse } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+const meta: Meta<typeof Collapse> = {
+  title: "Components/Collapse",
+  component: Collapse,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A collapsible component with smooth height and opacity transitions. Used to show/hide content with animations.",
+      },
+    },
+  },
+  argTypes: {
+    open: {
+      control: { type: "boolean" },
+      description: "Whether the collapse is open",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Content to collapse/expand",
+    },
+  },
+  args: {
+    open: true,
+    children: "This is collapsible content that can be shown or hidden.",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Open collapse
+export const Open: Story = {
+  args: {
+    open: true,
+    children: (
+      <div className="p-4 bg-surface-secondary rounded">
+        <p className="body2 text-text">
+          This content is visible because the collapse is open.
+        </p>
+      </div>
+    ),
+  },
+};
+
+// Closed collapse
+export const Closed: Story = {
+  args: {
+    open: false,
+    children: (
+      <div className="p-4 bg-surface-secondary rounded">
+        <p className="body2 text-text">
+          This content is hidden because the collapse is closed.
+        </p>
+      </div>
+    ),
+  },
+};
+
+// With content
+export const WithContent: Story = {
+  args: {
+    open: true,
+    children: (
+      <div className="space-y-2 p-4 bg-surface-secondary rounded">
+        <h4 className="subheading2 text-text">Collapsible Section</h4>
+        <p className="body2 text-text">
+          This collapse contains multiple elements and demonstrates how it
+          handles different content types.
+        </p>
+        <ul className="list-disc pl-5 space-y-1">
+          <li className="body3 text-text-secondary">Item 1</li>
+          <li className="body3 text-text-secondary">Item 2</li>
+          <li className="body3 text-text-secondary">Item 3</li>
+        </ul>
+      </div>
+    ),
+  },
+};
+
+// Interactive collapse
+export const Interactive: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div className="space-y-4">
+        <button
+          onClick={() => setOpen(!open)}
+          className="px-4 py-2 bg-fill-brand text-inverse rounded"
+        >
+          {open ? "Close" : "Open"} Collapse
+        </button>
+        <Collapse open={open}>
+          <div className="p-4 bg-surface-secondary rounded">
+            <p className="body2 text-text">
+              This content can be toggled by clicking the button above. The
+              collapse animates smoothly between open and closed states.
+            </p>
+          </div>
+        </Collapse>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive collapse that can be toggled. Notice the smooth height and opacity transitions.",
+      },
+    },
+  },
+};
+
+// Long content
+export const LongContent: Story = {
+  args: {
+    open: true,
+    children: (
+      <div className="space-y-4 p-4 bg-surface-secondary rounded">
+        <h4 className="subheading2 text-text">Long Content Section</h4>
+        <p className="body2 text-text">
+          This collapse demonstrates how it handles longer content. The height
+          will adjust automatically based on the content size.
+        </p>
+        <div className="space-y-2">
+          <p className="body3 text-text-secondary">
+            Paragraph 1: Additional content to show height adjustment.
+          </p>
+          <p className="body3 text-text-secondary">
+            Paragraph 2: More content to demonstrate the collapse behavior.
+          </p>
+          <p className="body3 text-text-secondary">
+            Paragraph 3: Even more content to show how the component adapts.
+          </p>
+        </div>
+      </div>
+    ),
+  },
+};
+
+// Transition states
+export const TransitionStates: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true);
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <button
+            onClick={() => setOpen(true)}
+            className="px-4 py-2 bg-fill-brand text-inverse rounded"
+          >
+            Open
+          </button>
+          <button
+            onClick={() => setOpen(false)}
+            className="px-4 py-2 bg-surface-secondary text-text rounded"
+          >
+            Close
+          </button>
+        </div>
+        <Collapse open={open}>
+          <div className="p-4 bg-surface-secondary rounded border border-border-default">
+            <p className="body2 text-text">
+              Watch the smooth transition as this content opens and closes. The
+              collapse uses both height and opacity animations for a polished
+              effect.
+            </p>
+          </div>
+        </Collapse>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates the smooth transition animations when opening and closing.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => {
+    const [open1, setOpen1] = useState(true);
+    const [open2, setOpen2] = useState(false);
+    return (
+      <div className="space-y-6">
+        <div>
+          <h3 className="mb-3 text-lg font-semibold">Open State</h3>
+          <Collapse open={true}>
+            <div className="p-4 bg-surface-secondary rounded">
+              <p className="body2 text-text">This collapse is open.</p>
+            </div>
+          </Collapse>
+        </div>
+        <div>
+          <h3 className="mb-3 text-lg font-semibold">Closed State</h3>
+          <Collapse open={false}>
+            <div className="p-4 bg-surface-secondary rounded">
+              <p className="body2 text-text">This collapse is closed.</p>
+            </div>
+          </Collapse>
+        </div>
+        <div>
+          <h3 className="mb-3 text-lg font-semibold">Interactive Examples</h3>
+          <div className="space-y-4">
+            <div>
+              <button
+                onClick={() => setOpen1(!open1)}
+                className="mb-2 px-4 py-2 bg-fill-brand text-inverse rounded text-sm"
+              >
+                Toggle Collapse 1
+              </button>
+              <Collapse open={open1}>
+                <div className="p-4 bg-surface-secondary rounded">
+                  <p className="body2 text-text">Interactive collapse 1</p>
+                </div>
+              </Collapse>
+            </div>
+            <div>
+              <button
+                onClick={() => setOpen2(!open2)}
+                className="mb-2 px-4 py-2 bg-fill-brand text-inverse rounded text-sm"
+              >
+                Toggle Collapse 2
+              </button>
+              <Collapse open={open2}>
+                <div className="p-4 bg-surface-secondary rounded">
+                  <p className="body2 text-text">Interactive collapse 2</p>
+                </div>
+              </Collapse>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all collapse states and interactive examples.",
+      },
+    },
+  },
+};
+

package/src/components/collapse/index.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from "react";
+import { CollapsibleProps } from "./types";
+
+// Collapsible with smooth height/opacity transition
+export const Collapse = (props: CollapsibleProps) => {
+  const { open, children } = props;
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [maxHeight, setMaxHeight] = useState<number>(0);
+
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+
+    const updateHeight = () => {
+      setMaxHeight(open ? el.scrollHeight : 0);
+    };
+
+    updateHeight();
+
+    let resizeObserver: ResizeObserver | undefined;
+    if (open) {
+      resizeObserver = new ResizeObserver(() => updateHeight());
+      resizeObserver.observe(el);
+    }
+
+    return () => {
+      if (resizeObserver) resizeObserver.disconnect();
+    };
+  }, [open, children]);
+
+  return (
+    <div
+      className="overflow-hidden transition-all duration-300 ease-in-out"
+      style={{ maxHeight: maxHeight, opacity: open ? 1 : 0 }}
+      aria-hidden={!open}
+    >
+      <div ref={contentRef}>{children}</div>
+    </div>
+  );
+}
+
+Collapse.displayName = "Collapse";
+
+export type { CollapsibleProps };

package/src/components/collapse/types.ts

@@ -0,0 +1,6 @@
+import React from "react";
+
+export type CollapsibleProps = { 
+    open: boolean; 
+    children: React.ReactNode 
+}