@windstream/react-shared-components 0.0.18 → 0.0.20

package/src/components/brand-button/index.tsx

@@ -1,9 +1,15 @@
+"use client";
+
 import { forwardRef } from "react";
-import { cx } from "@shared/utils";
-import { ButtonProps, ButtonVariantsT } from "@shared/components/brand-button/types";
-import { MaterialIcon } from "@shared/components/material-icon";
 import { getLabelSizeBasedOnButtonSize, sizeToClassNames } from "./helpers";
 
+import {
+  ButtonProps,
+  ButtonVariantsT,
+} from "@shared/components/brand-button/types";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { cx } from "@shared/utils";
+
 // BrandButton is intentionally limited to prevent over-configuration, restricting className and children props.
 export const BrandButton = forwardRef<HTMLButtonElement, ButtonProps>(
   (
@@ -20,12 +26,11 @@ export const BrandButton = forwardRef<HTMLButtonElement, ButtonProps>(
     ref
   ) => {
     const getVariantClasses = () => {
-      const baseClasses =
-        cx(
-          sizeToClassNames(size), 
-          'rounded-2xl pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top', 
-          fullWidth && "w-full"
-        );
+      const baseClasses = cx(
+        sizeToClassNames(size),
+        "rounded-2xl pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top",
+        fullWidth && "w-full"
+      );
 
       const variantClasses: Record<ButtonVariantsT, string> = {
         primary_brand:
@@ -37,25 +42,20 @@ export const BrandButton = forwardRef<HTMLButtonElement, ButtonProps>(
       };
       const stateClasses = cx(
         (disabled || isLoading) && "cursor-not-allowed",
-        (isLoading) && "pl-7",
+        isLoading && "pl-7",
         disabled && "bg-bg-fill-brand-disabled"
-      )
+      );
 
-      return cx(
-        baseClasses,
-        variantClasses[variant] || "",
-        stateClasses
-      )
+      return cx(baseClasses, variantClasses[variant] || "", stateClasses);
     };
 
     const variantClasses = getVariantClasses();
 
-    let infoClassNames = `button--${variant}`
+    let infoClassNames = `button--${variant}`;
     if (isLoading) infoClassNames += " button--loading";
     if (disabled) infoClassNames += " button--disabled";
 
-    const combinedClassName =
-      `${infoClassNames} ${variantClasses}`;
+    const combinedClassName = `${infoClassNames} ${variantClasses}`;
 
     return (
       <button
@@ -70,12 +70,12 @@ export const BrandButton = forwardRef<HTMLButtonElement, ButtonProps>(
 
         {label ? (
           <span className="flex flex-col">
-          <span className={cx(getLabelSizeBasedOnButtonSize(size))}>
-            {label}
-          </span> 
-          {text}
+            <span className={cx(getLabelSizeBasedOnButtonSize(size))}>
+              {label}
+            </span>
+            {text}
           </span>
-        ): (
+        ) : (
           text
         )}
       </button>
@@ -85,6 +85,9 @@ export const BrandButton = forwardRef<HTMLButtonElement, ButtonProps>(
 
 BrandButton.displayName = "BrandButton";
 
-export type { ButtonProps, ButtonVariantsT, ButtonSizeT, ResponsiveSize } from "./types";
-
-
+export type {
+  ButtonProps,
+  ButtonVariantsT,
+  ButtonSizeT,
+  ResponsiveSize,
+} from "./types";

package/src/components/brand-button/types.ts

@@ -1,9 +1,6 @@
-import {
-  type ButtonHTMLAttributes,
-} from "react";
+import { type ButtonHTMLAttributes } from "react";
 
-
-export type ButtonVariantsT = "primary_brand" | "primary_inverse" | "secondary"
+export type ButtonVariantsT = "primary_brand" | "primary_inverse" | "secondary";
 
 export type ButtonSizeT = "small" | "medium" | "large" | "x-large";
 
@@ -13,7 +10,7 @@ export type ResponsiveSize = {
   lg?: ButtonSizeT;
 };
 
-export type ButtonCustomProps =  {
+export type ButtonCustomProps = {
   /** Button styling variant */
   variant?: ButtonVariantsT;
   /** Loading state - shows spinner and disables button */
@@ -22,6 +19,7 @@ export type ButtonCustomProps =  {
   text?: string;
   fullWidth?: boolean;
   size?: ResponsiveSize;
-}
+};
 
-export type ButtonProps = ButtonCustomProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"| "className">;
+export type ButtonProps = ButtonCustomProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className">;

package/src/components/button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import { Button } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Button> = {
@@ -78,19 +78,19 @@ export const StylingExamples: Story = {
           Examples of how you can style the Button component using className:
         </p>
         <div className="flex flex-wrap gap-2">
-          <Button className="btn-medium bg-fill-brand text-inverse">
+          <Button className="bg-fill-brand text-inverse btn-medium">
             Brand Button
           </Button>
-          <Button className="btn-medium bg-surface-secondary text-default">
+          <Button className="bg-surface-secondary text-default btn-medium">
             Secondary Button
           </Button>
-          <Button className="btn-medium border border-border-default text-default">
+          <Button className="border-border-default text-default btn-medium border">
             Outline Button
           </Button>
-          <Button className="btn-small bg-fill-brand text-inverse">
+          <Button className="bg-fill-brand text-inverse btn-small">
             Small Button
           </Button>
-          <Button className="btn-large bg-fill-brand text-inverse">
+          <Button className="bg-fill-brand text-inverse btn-large">
             Large Button
           </Button>
         </div>

package/src/components/button/index.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from "react";
-import { cx } from "@shared/utils";
+
 import { ButtonProps } from "@shared/components/button/types";
+import { cx } from "@shared/utils";
+
 // Minimal button: styling is entirely up to the consumer via className
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ children, className = "", style, disabled, ...props }, ref) => {

package/src/components/button/types.ts

@@ -1,14 +1,14 @@
-import {
-  type ButtonHTMLAttributes,
-  type CSSProperties,
-  type ReactNode,
-} from "react";
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Content to render inside the button */
-  children?: ReactNode;
-  /** Custom className for the button */
-  className?: string;
-  /** Custom styles */
-  style?: CSSProperties;
-}
+import {
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Content to render inside the button */
+  children?: ReactNode;
+  /** Custom className for the button */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+}

package/src/components/call-button/CallButton.stories.tsx

@@ -1,6 +1,6 @@
 import { CallButton } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof CallButton> = {

package/src/components/call-button/index.tsx

@@ -1,7 +1,7 @@
+import type { CallButtonProps } from "@shared/components/call-button/types";
 import { Link } from "@shared/components/link";
 import { MaterialIcon } from "@shared/components/material-icon";
 import type { IconProps } from "@shared/components/material-icon/types";
-import type { CallButtonProps } from "@shared/components/call-button/types";
 
 export const CallButton = (props: CallButtonProps) => {
   const {
@@ -22,8 +22,7 @@ export const CallButton = (props: CallButtonProps) => {
   };
 
   const styleClasses = {
-    primary:
-      "border-[0.727px] border-border text-text"
+    primary: "border-[0.727px] border-border text-text",
   };
 
   const iconSize: Record<string, IconProps["size"]> = {
@@ -57,7 +56,7 @@ export const CallButton = (props: CallButtonProps) => {
     >
       {showBlinkDot ? (
         <span
-          className={`animate-blink pointer-events-none absolute ${dotPosition[size]} top-1/2 ${dotSize[size]} -translate-y-1/2 rounded-full bg-icon-brand`}
+          className={`pointer-events-none absolute animate-blink ${dotPosition[size]} top-1/2 ${dotSize[size]} -translate-y-1/2 rounded-full bg-icon-brand`}
         />
       ) : null}
       <span

package/src/components/call-button/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+
 import { LinkProps } from "@shared/components/link/types";
 
 export interface CallButtonProps extends Omit<LinkProps, "children"> {

package/src/components/checkbox/Checkbox.stories.tsx

@@ -1,8 +1,8 @@
+import { useState } from "react";
 import { Checkbox } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
 
 const meta: Meta<typeof Checkbox> = {
   title: "Components/Checkbox",
@@ -150,7 +150,7 @@ export const Interactive: Story = {
     return (
       <Checkbox
         checked={checked}
-        onChange={(isChecked) => setChecked(isChecked)}
+        onChange={isChecked => setChecked(isChecked)}
         label="Click to toggle"
       />
     );
@@ -175,7 +175,7 @@ export const Multiple: Story = {
 
     const handleChange = (id: number, isChecked: boolean) => {
       setItems(
-        items.map((item) =>
+        items.map(item =>
           item.id === id ? { ...item, checked: isChecked } : item
         )
       );
@@ -183,11 +183,11 @@ export const Multiple: Story = {
 
     return (
       <div className="space-y-3">
-        {items.map((item) => (
+        {items.map(item => (
           <Checkbox
             key={item.id}
             checked={item.checked}
-            onChange={(isChecked) => handleChange(item.id, isChecked)}
+            onChange={isChecked => handleChange(item.id, isChecked)}
             label={item.label}
           />
         ))}
@@ -245,4 +245,3 @@ export const AllVariants: Story = {
     },
   },
 };
-

package/src/components/checkbox/index.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback } from "react";
-import { cx } from "@shared/utils";
 import { CheckboxProps } from "./types";
+
 import { Button } from "@shared/components/button";
+import { cx } from "@shared/utils";
 
 export const Checkbox: React.FC<CheckboxProps> = ({
   state,
@@ -27,8 +28,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
 
   const checkboxClasses = cx(
     "flex items-center justify-center w-6 h-6 rounded-[4px] outline-offset-2",
-    isFocused &&
-      "outline",
+    isFocused && "outline",
     className
   );
 
@@ -63,7 +63,11 @@ export const Checkbox: React.FC<CheckboxProps> = ({
             width="24"
             height="24"
             rx="4"
-            className={cx(isDisabled ? "fill-checkbox-bg-surface-selected-disabled" : "fill-bg-fill-brand")}
+            className={cx(
+              isDisabled
+                ? "fill-checkbox-bg-surface-selected-disabled"
+                : "fill-bg-fill-brand"
+            )}
           />
           <path
             d="M8 11.9593L11.0316 15L17 9"
@@ -89,7 +93,9 @@ export const Checkbox: React.FC<CheckboxProps> = ({
           width="23"
           height="23"
           rx="3.5"
-          className={cx(isDisabled ? "fill-checkbox-bg-surface-disabled" : "fill-white")}
+          className={cx(
+            isDisabled ? "fill-checkbox-bg-surface-disabled" : "fill-white"
+          )}
         />
         <rect
           x="0.5"
@@ -115,7 +121,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
           onChange={handleInputChange}
           disabled={isDisabled}
           required={required}
-          className="sr-only peer"
+          className="peer sr-only"
           data-cy={dataCy}
           {...rest}
         />
@@ -130,7 +136,11 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       {label && (
         <label
           htmlFor={inputId}
-          className={cx("cursor-pointer", error && "text-text-critical", labelClassName)}
+          className={cx(
+            "cursor-pointer",
+            error && "text-text-critical",
+            labelClassName
+          )}
         >
           {label}
         </label>

package/src/components/checkbox/types.ts

@@ -6,19 +6,22 @@ type InfoIconProps = {
 };
 
 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'>;
+  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

@@ -1,6 +1,6 @@
 import { Checklist } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Checklist> = {
@@ -148,4 +148,3 @@ export const AllVariants: Story = {
     },
   },
 };
-

package/src/components/checklist/index.tsx

@@ -1,21 +1,27 @@
 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 { ChecklistProps } from "@shared/components/checklist/types";
 import { cx } from "@shared/utils";
 
-export const Checklist:React.FC<ChecklistProps> = (props) => {
-  const { items, listIconName='check', listItemClassName } = props;
+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 
+        <ListItem
+          key={idx}
+          className={cx(
+            "flex items-center gap-2 text-text-secondary",
+            listItemClassName
+          )}
+        >
+          <MaterialIcon
             name={listIconName}
             size={20}
             weight="600"
@@ -26,7 +32,7 @@ export const Checklist:React.FC<ChecklistProps> = (props) => {
       ))}
     </List>
   );
-}
+};
 
 Checklist.displayName = "Checklist";
 

package/src/components/checklist/types.ts

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

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

@@ -1,8 +1,8 @@
+import { useState } from "react";
 import { Collapse } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+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",
@@ -42,7 +42,7 @@ export const Open: Story = {
   args: {
     open: true,
     children: (
-      <div className="p-4 bg-surface-secondary rounded">
+      <div className="bg-surface-secondary rounded p-4">
         <p className="body2 text-text">
           This content is visible because the collapse is open.
         </p>
@@ -56,7 +56,7 @@ export const Closed: Story = {
   args: {
     open: false,
     children: (
-      <div className="p-4 bg-surface-secondary rounded">
+      <div className="bg-surface-secondary rounded p-4">
         <p className="body2 text-text">
           This content is hidden because the collapse is closed.
         </p>
@@ -70,13 +70,13 @@ export const WithContent: Story = {
   args: {
     open: true,
     children: (
-      <div className="space-y-2 p-4 bg-surface-secondary rounded">
+      <div className="bg-surface-secondary space-y-2 rounded p-4">
         <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">
+        <ul className="list-disc space-y-1 pl-5">
           <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>
@@ -94,12 +94,12 @@ export const Interactive: Story = {
       <div className="space-y-4">
         <button
           onClick={() => setOpen(!open)}
-          className="px-4 py-2 bg-fill-brand text-inverse rounded"
+          className="bg-fill-brand text-inverse rounded px-4 py-2"
         >
           {open ? "Close" : "Open"} Collapse
         </button>
         <Collapse open={open}>
-          <div className="p-4 bg-surface-secondary rounded">
+          <div className="bg-surface-secondary rounded p-4">
             <p className="body2 text-text">
               This content can be toggled by clicking the button above. The
               collapse animates smoothly between open and closed states.
@@ -124,7 +124,7 @@ export const LongContent: Story = {
   args: {
     open: true,
     children: (
-      <div className="space-y-4 p-4 bg-surface-secondary rounded">
+      <div className="bg-surface-secondary space-y-4 rounded p-4">
         <h4 className="subheading2 text-text">Long Content Section</h4>
         <p className="body2 text-text">
           This collapse demonstrates how it handles longer content. The height
@@ -155,19 +155,19 @@ export const TransitionStates: Story = {
         <div className="flex gap-2">
           <button
             onClick={() => setOpen(true)}
-            className="px-4 py-2 bg-fill-brand text-inverse rounded"
+            className="bg-fill-brand text-inverse rounded px-4 py-2"
           >
             Open
           </button>
           <button
             onClick={() => setOpen(false)}
-            className="px-4 py-2 bg-surface-secondary text-text rounded"
+            className="bg-surface-secondary rounded px-4 py-2 text-text"
           >
             Close
           </button>
         </div>
         <Collapse open={open}>
-          <div className="p-4 bg-surface-secondary rounded border border-border-default">
+          <div className="bg-surface-secondary border-border-default rounded border p-4">
             <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
@@ -198,7 +198,7 @@ export const AllVariants: Story = {
         <div>
           <h3 className="mb-3 text-lg font-semibold">Open State</h3>
           <Collapse open={true}>
-            <div className="p-4 bg-surface-secondary rounded">
+            <div className="bg-surface-secondary rounded p-4">
               <p className="body2 text-text">This collapse is open.</p>
             </div>
           </Collapse>
@@ -206,7 +206,7 @@ export const AllVariants: Story = {
         <div>
           <h3 className="mb-3 text-lg font-semibold">Closed State</h3>
           <Collapse open={false}>
-            <div className="p-4 bg-surface-secondary rounded">
+            <div className="bg-surface-secondary rounded p-4">
               <p className="body2 text-text">This collapse is closed.</p>
             </div>
           </Collapse>
@@ -217,12 +217,12 @@ export const AllVariants: Story = {
             <div>
               <button
                 onClick={() => setOpen1(!open1)}
-                className="mb-2 px-4 py-2 bg-fill-brand text-inverse rounded text-sm"
+                className="bg-fill-brand text-inverse mb-2 rounded px-4 py-2 text-sm"
               >
                 Toggle Collapse 1
               </button>
               <Collapse open={open1}>
-                <div className="p-4 bg-surface-secondary rounded">
+                <div className="bg-surface-secondary rounded p-4">
                   <p className="body2 text-text">Interactive collapse 1</p>
                 </div>
               </Collapse>
@@ -230,12 +230,12 @@ export const AllVariants: Story = {
             <div>
               <button
                 onClick={() => setOpen2(!open2)}
-                className="mb-2 px-4 py-2 bg-fill-brand text-inverse rounded text-sm"
+                className="bg-fill-brand text-inverse mb-2 rounded px-4 py-2 text-sm"
               >
                 Toggle Collapse 2
               </button>
               <Collapse open={open2}>
-                <div className="p-4 bg-surface-secondary rounded">
+                <div className="bg-surface-secondary rounded p-4">
                   <p className="body2 text-text">Interactive collapse 2</p>
                 </div>
               </Collapse>
@@ -253,4 +253,3 @@ export const AllVariants: Story = {
     },
   },
 };
-

package/src/components/collapse/index.tsx

@@ -37,7 +37,7 @@ export const Collapse = (props: CollapsibleProps) => {
       <div ref={contentRef}>{children}</div>
     </div>
   );
-}
+};
 
 Collapse.displayName = "Collapse";
 

package/src/components/collapse/types.ts

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