@windstream/react-shared-components 0.0.68 → 0.0.70

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

@@ -1,79 +1,86 @@
-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";
-
-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={`pointer-events-none absolute animate-blink ${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 };
+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 { cx } from "@shared/utils";
+
+export const CallButton = (props: CallButtonProps) => {
+  const {
+    showBlinkDot = false,
+    buttonStyle = "primary",
+    size = "md",
+    children,
+    className,
+    ...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={cx(
+        baseClasses,
+        sizeClasses[size],
+        styleClasses[buttonStyle],
+        className
+      )}
+    >
+      {showBlinkDot ? (
+        <span
+          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
+        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

@@ -1,10 +1,11 @@
-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;
-}
+import { ReactNode } from "react";
+
+import { LinkProps } from "@shared/components/link/types";
+
+export interface CallButtonProps extends Omit<LinkProps, "children"> {
+  showBlinkDot?: boolean;
+  buttonStyle?: "primary";
+  className?: string;
+  size?: "sm" | "md" | "lg";
+  children: ReactNode;
+}

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

@@ -1,247 +1,247 @@
-import { useState } from "react";
-import { Checkbox } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/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.",
-      },
-    },
-  },
-};
+import { useState } from "react";
+import { Checkbox } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/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.",
+      },
+    },
+  },
+};