@windstream/react-shared-components 0.0.1

package/src/components/button/index.tsx

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

package/src/components/button/types.ts

@@ -0,0 +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;
+}

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

@@ -0,0 +1,324 @@
+import { CallButton } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof CallButton> = {
+  title: "Components/CallButton",
+  component: CallButton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A call button component that extends the Link component with a call icon and optional blinking dot.",
+      },
+    },
+  },
+  argTypes: {
+    showBlinkDot: {
+      control: { type: "boolean" },
+      description: "Show a blinking dot indicator",
+    },
+    buttonStyle: {
+      control: { type: "select" },
+      options: ["primary"],
+      description: "Visual style variant",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      description: "Button size",
+    },
+    href: {
+      control: { type: "text" },
+      description: "Link destination",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Button text content",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+  args: {
+    href: "tel:+1234567890",
+    children: "Call Now",
+    showBlinkDot: false,
+    buttonStyle: "primary",
+    size: "md",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// All variants showcase - Real visual variants
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Style Variants</h3>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-3">
+            <h4 className="text-sm font-medium text-gray-600">
+              Primary (Default)
+            </h4>
+            <CallButton href="tel:+1234567890" buttonStyle="primary">
+              Call Now
+            </CallButton>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Size Variants</h3>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="space-y-3">
+            <h4 className="text-sm font-medium text-gray-600">Small</h4>
+            <CallButton href="tel:+1234567890" size="sm">
+              Call
+            </CallButton>
+          </div>
+          <div className="space-y-3">
+            <h4 className="text-sm font-medium text-gray-600">
+              Medium (Default)
+            </h4>
+            <CallButton href="tel:+1234567890" size="md">
+              Call Now
+            </CallButton>
+          </div>
+          <div className="space-y-3">
+            <h4 className="text-sm font-medium text-gray-600">Large</h4>
+            <CallButton href="tel:+1234567890" size="lg">
+              Call Now
+            </CallButton>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Blinking Dot Variant</h3>
+        <div className="space-y-3">
+          <CallButton
+            href="tel:+1234567890"
+            showBlinkDot={true}
+            buttonStyle="primary"
+          >
+            Emergency Hotline
+          </CallButton>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Complete showcase of all CallButton visual variants: styles, sizes, and blinking dot.",
+      },
+    },
+  },
+};
+
+// Default call button
+export const Default: Story = {
+  args: {
+    buttonStyle: "primary",
+    size: "md",
+    showBlinkDot: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default CallButton with primary style and medium size.",
+      },
+    },
+  },
+};
+
+// Call button with blinking dot
+export const WithBlinkDot: Story = {
+  args: {
+    showBlinkDot: true,
+    children: "Call Now",
+    buttonStyle: "primary",
+    size: "md",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "CallButton with blinking dot indicator for emergency or priority calls.",
+      },
+    },
+  },
+};
+
+// Style variations
+export const StyleVariations: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <h4 className="text-sm font-medium text-gray-600">Primary Style</h4>
+        <CallButton href="tel:+1234567890" buttonStyle="primary">
+          Call Support
+        </CallButton>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "All four CallButton style variants: primary, secondary, outline, and ghost.",
+      },
+    },
+  },
+};
+
+// Size variations
+export const SizeVariations: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <h4 className="text-sm font-medium text-gray-600">Small Size</h4>
+        <CallButton href="tel:+1234567890" size="sm">
+          Call
+        </CallButton>
+      </div>
+      <div className="space-y-2">
+        <h4 className="text-sm font-medium text-gray-600">
+          Medium Size (Default)
+        </h4>
+        <CallButton href="tel:+1234567890" size="md">
+          Call Now
+        </CallButton>
+      </div>
+      <div className="space-y-2">
+        <h4 className="text-sm font-medium text-gray-600">Large Size</h4>
+        <CallButton href="tel:+1234567890" size="lg">
+          Call Now
+        </CallButton>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "All three CallButton size variants: small, medium, and large.",
+      },
+    },
+  },
+};
+
+// Interactive combinations
+export const Interactive: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Emergency Contacts</h3>
+        <div className="space-y-3">
+          <CallButton
+            href="tel:+1234567890"
+            showBlinkDot={true}
+            buttonStyle="primary"
+            size="lg"
+          >
+            Emergency Hotline
+          </CallButton>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive examples showing combinations of CallButton variants for different use cases.",
+      },
+    },
+  },
+};
+
+// States and interactions
+export const StatesAndInteractions: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Hover States</h3>
+        <p className="mb-2 text-sm text-gray-600">
+          Hover over the buttons to see interactive states
+        </p>
+        <div className="space-y-3">
+          <CallButton href="tel:+1234567890" showBlinkDot={true}>
+            Hover Me
+          </CallButton>
+          <CallButton href="tel:+1234567890">Hover Me Too</CallButton>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Focus States</h3>
+        <p className="mb-2 text-sm text-gray-600">
+          Tab to focus and see keyboard navigation states
+        </p>
+        <div className="space-y-3">
+          <CallButton href="tel:+1234567890">Focus Me</CallButton>
+          <CallButton href="tel:+1234567890">Focus Me Too</CallButton>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates hover, focus, and interaction states of the CallButton component.",
+      },
+    },
+  },
+};
+
+// Accessibility showcase
+export const Accessibility: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Screen Reader Friendly</h3>
+        <p className="mb-2 text-sm text-gray-600">
+          These buttons include proper ARIA labels and descriptions
+        </p>
+        <div className="space-y-3">
+          <CallButton
+            href="tel:+1234567890"
+            showBlinkDot={true}
+            aria-label="Call emergency support line"
+            aria-description="24/7 emergency hotline with priority response"
+          >
+            Emergency Support
+          </CallButton>
+          <CallButton
+            href="tel:+1234567890"
+            aria-label="Call customer service"
+            aria-description="General customer support and inquiries"
+          >
+            Customer Service
+          </CallButton>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Accessibility features including ARIA labels and screen reader support.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,80 @@
+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 {
+    showBlinkDot = false,
+    buttonStyle = "primary",
+    size = "md",
+    children,
+    ...rest
+  } = props;
+
+  const baseClasses =
+    "relative flex items-center gap-2 font-medium tracking-wide outline-offset-4 rounded-full";
+
+  const sizeClasses = {
+    sm: "h-6 text-xs pl-1 pr-2",
+    md: "h-8 text-sm pl-1 pr-2",
+    lg: "h-10 text-base pl-2 pr-3",
+  };
+
+  const styleClasses = {
+    primary:
+      "border-[0.727px] border-border text-text"
+  };
+
+  const iconSize: Record<string, IconProps["size"]> = {
+    sm: 20,
+    md: 20,
+    lg: 32,
+  };
+
+  const iconContainerSize = {
+    sm: "h-5 w-5",
+    md: "h-6 w-6",
+    lg: "h-8 w-8",
+  };
+
+  const dotSize = {
+    sm: "h-2 w-2",
+    md: "h-3 w-3",
+    lg: "h-4 w-4",
+  };
+
+  const dotPosition = {
+    sm: "-left-4",
+    md: "-left-6",
+    lg: "-left-8",
+  };
+
+  return (
+    <Link
+      {...rest}
+      className={`${baseClasses} ${sizeClasses[size]} ${styleClasses[buttonStyle]}`}
+    >
+      {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`}
+        />
+      ) : null}
+      <span
+        className={`relative inline-flex ${iconContainerSize[size]} items-center justify-center rounded-full bg-icon-brand`}
+      >
+        <MaterialIcon
+          name="call"
+          fill={1}
+          size={iconSize[size]}
+          className="text-white"
+        />
+      </span>
+      <span className="font-normal tracking-wide">{children}</span>
+    </Link>
+  );
+};
+
+CallButton.displayName = "CallButton";
+
+export type { CallButtonProps };

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { LinkProps } from "@shared/components/link/types";
+
+export interface CallButtonProps extends Omit<LinkProps, "children"> {
+  showBlinkDot?: boolean;
+  buttonStyle?: "primary";
+  size?: "sm" | "md" | "lg";
+  children: ReactNode;
+}

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

@@ -0,0 +1,248 @@
+import { Checkbox } from "./index";
+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",
+  component: Checkbox,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A checkbox component with support for checked/unchecked states, labels, error states, and info icons.",
+      },
+    },
+  },
+  argTypes: {
+    checked: {
+      control: { type: "boolean" },
+      description: "Whether the checkbox is checked",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable the checkbox",
+    },
+    label: {
+      control: { type: "text" },
+      description: "Label text for the checkbox",
+    },
+    error: {
+      control: { type: "boolean" },
+      description: "Show error state",
+    },
+    required: {
+      control: { type: "boolean" },
+      description: "Mark checkbox as required",
+    },
+    state: {
+      control: { type: "select" },
+      options: ["default", "focus", "disabled"],
+      description: "Visual state of the checkbox",
+    },
+  },
+  args: {
+    checked: false,
+    disabled: false,
+    label: "Checkbox Label",
+    error: false,
+    required: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default checkbox
+export const Default: Story = {
+  args: {},
+};
+
+// Checked checkbox
+export const Checked: Story = {
+  args: {
+    checked: true,
+    label: "Checked Checkbox",
+  },
+};
+
+// Unchecked checkbox
+export const Unchecked: Story = {
+  args: {
+    checked: false,
+    label: "Unchecked Checkbox",
+  },
+};
+
+// With label
+export const WithLabel: Story = {
+  args: {
+    checked: false,
+    label: "I agree to the terms and conditions",
+  },
+};
+
+// Disabled checkbox
+export const Disabled: Story = {
+  args: {
+    checked: false,
+    label: "Disabled Checkbox",
+    disabled: true,
+  },
+};
+
+// Disabled checked
+export const DisabledChecked: Story = {
+  args: {
+    checked: true,
+    label: "Disabled Checked Checkbox",
+    disabled: true,
+  },
+};
+
+// Error state
+export const Error: Story = {
+  args: {
+    checked: false,
+    label: "Checkbox with Error",
+    error: true,
+  },
+};
+
+// Required checkbox
+export const Required: Story = {
+  args: {
+    checked: false,
+    label: "Required Field",
+    required: true,
+  },
+};
+
+// Focus state
+export const Focus: Story = {
+  args: {
+    checked: false,
+    label: "Focused Checkbox",
+    state: "focus",
+  },
+};
+
+// With info icon
+export const WithInfoIcon: Story = {
+  args: {
+    checked: false,
+    label: "Checkbox with Info",
+    renderInfoIcon: {
+      onClick: () => alert("Info clicked"),
+      dataTestId: "info-icon",
+    },
+  },
+};
+
+// Interactive checkbox
+export const Interactive: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Checkbox
+        checked={checked}
+        onChange={(isChecked) => setChecked(isChecked)}
+        label="Click to toggle"
+      />
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive checkbox that can be toggled by clicking.",
+      },
+    },
+  },
+};
+
+// Multiple checkboxes
+export const Multiple: Story = {
+  render: () => {
+    const [items, setItems] = useState([
+      { id: 1, label: "Option 1", checked: false },
+      { id: 2, label: "Option 2", checked: true },
+      { id: 3, label: "Option 3", checked: false },
+    ]);
+
+    const handleChange = (id: number, isChecked: boolean) => {
+      setItems(
+        items.map((item) =>
+          item.id === id ? { ...item, checked: isChecked } : item
+        )
+      );
+    };
+
+    return (
+      <div className="space-y-3">
+        {items.map((item) => (
+          <Checkbox
+            key={item.id}
+            checked={item.checked}
+            onChange={(isChecked) => handleChange(item.id, isChecked)}
+            label={item.label}
+          />
+        ))}
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Multiple checkboxes in a group.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">States</h3>
+        <div className="space-y-3">
+          <Checkbox checked={false} label="Unchecked" />
+          <Checkbox checked={true} label="Checked" />
+          <Checkbox checked={false} label="Disabled" disabled />
+          <Checkbox checked={true} label="Disabled Checked" disabled />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Error</h3>
+        <Checkbox checked={false} label="Error State" error />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Required</h3>
+        <Checkbox checked={false} label="Required Field" required />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Info Icon</h3>
+        <Checkbox
+          checked={false}
+          label="With Info Icon"
+          renderInfoIcon={{
+            onClick: () => {},
+            dataTestId: "info",
+          }}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all checkbox variants and states.",
+      },
+    },
+  },
+};
+