@windstream/react-shared-components 0.1.31 → 0.1.33

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

@@ -1,115 +1,114 @@
-"use client";
-
-import React, { forwardRef } from "react";
-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 | HTMLAnchorElement,
-  ButtonProps
->(
-  (
-    {
-      variant = "primary_brand",
-      isLoading = false,
-      text,
-      label,
-      disabled,
-      fullWidth,
-      size = { base: "medium" },
-      as = "button",
-      ...props
-    },
-    ref
-  ) => {
-    const getVariantClasses = () => {
-      const baseClasses = cx(
-        sizeToClassNames(size),
-        "rounded-button 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:
-          "bg-bg-fill-brand text-text-brand-on-bg-fill enabled:hover:bg-bg-fill-brand-hover focus:ring-bg-fill-brand",
-        primary_inverse:
-          "bg-bg-surface-inverse text-text-inverse enabled:hover:bg-bg-fill-inverse-hover focus:ring-bg-surface-inverse",
-        secondary:
-          "border border-border-secondary-on-bg-fill bg-bg-fill-secondary text-text hover:bg-bg-fill-secondary-hover focus:bg-bg-fill-secondary focus:ring-input-border-hover",
-      };
-      const stateClasses = cx(
-        (disabled || isLoading) && "cursor-not-allowed",
-        isLoading && "pl-7",
-        disabled && "bg-bg-fill-brand-disabled"
-      );
-
-      return cx(baseClasses, variantClasses[variant] || "", stateClasses);
-    };
-
-    const variantClasses = getVariantClasses();
-
-    let infoClassNames = `button--${variant}`;
-    if (isLoading) infoClassNames += " button--loading";
-    if (disabled) infoClassNames += " button--disabled";
-
-    const combinedClassName = `${infoClassNames} ${variantClasses}`;
-
-    const contentEl = (
-      <>
-        {isLoading ? (
-          <MaterialIcon name="progress_activity" className="animate-spin" />
-        ) : null}
-
-        {label ? (
-          <span className="flex flex-col">
-            <span className={cx(getLabelSizeBasedOnButtonSize(size))}>
-              {label}
-            </span>
-            {text}
-          </span>
-        ) : (
-          text
-        )}
-      </>
-    );
-
-    if (as === "a") {
-      return (
-        <a
-          ref={ref as React.Ref<HTMLAnchorElement>}
-          className={cx(combinedClassName)}
-          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
-        >
-          {contentEl}
-        </a>
-      );
-    }
-
-    return (
-      <button
-        ref={ref as React.Ref<HTMLButtonElement>}
-        className={cx(combinedClassName)}
-        disabled={disabled || isLoading}
-        {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
-      >
-        {contentEl}
-      </button>
-    );
-  }
-);
-
-BrandButton.displayName = "BrandButton";
-
-export type {
-  ButtonProps,
-  ButtonVariantsT,
-  ButtonSizeT,
-  ResponsiveSize,
-} from "./types";
+"use client";
+
+import React, { forwardRef } from "react";
+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 | HTMLAnchorElement,
+  ButtonProps
+>(
+  (
+    {
+      variant = "primary_brand",
+      isLoading = false,
+      text,
+      label,
+      disabled,
+      fullWidth,
+      size = { base: "medium" },
+      as = "button",
+      ...props
+    },
+    ref
+  ) => {
+    const getVariantClasses = () => {
+      const baseClasses = cx(
+        sizeToClassNames(size),
+        "rounded-button 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:
+          "bg-bg-fill-brand text-text-brand-on-bg-fill [&:not(:disabled)]:hover:bg-bg-fill-brand-hover focus:ring-bg-fill-brand disabled:bg-bg-fill-brand-disabled",
+        primary_inverse:
+          "bg-bg-surface-inverse text-text-inverse [&:not(:disabled)]:hover:bg-bg-fill-inverse-hover focus:ring-bg-surface-inverse disabled:bg-bg-fill-inverse-disabled",
+        secondary:
+          "border border-border-secondary-on-bg-fill bg-bg-fill-secondary text-text [&:not(:disabled)]:hover:bg-bg-fill-secondary-hover focus:bg-bg-fill-secondary focus:ring-input-border-hover disabled:bg-bg-fill-secondary",
+      };
+      const stateClasses = cx(
+        (disabled || isLoading) && "cursor-not-allowed",
+        isLoading && "pl-7",
+      );
+
+      return cx(baseClasses, variantClasses[variant] || "", stateClasses);
+    };
+
+    const variantClasses = getVariantClasses();
+
+    let infoClassNames = `button--${variant}`;
+    if (isLoading) infoClassNames += " button--loading";
+    if (disabled) infoClassNames += " button--disabled";
+
+    const combinedClassName = `${infoClassNames} ${variantClasses}`;
+
+    const contentEl = (
+      <>
+        {isLoading ? (
+          <MaterialIcon name="progress_activity" className="animate-spin" />
+        ) : null}
+
+        {label ? (
+          <span className="flex flex-col">
+            <span className={cx(getLabelSizeBasedOnButtonSize(size))}>
+              {label}
+            </span>
+            {text}
+          </span>
+        ) : (
+          text
+        )}
+      </>
+    );
+
+    if (as === "a") {
+      return (
+        <a
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          className={cx(combinedClassName)}
+          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+        >
+          {contentEl}
+        </a>
+      );
+    }
+
+    return (
+      <button
+        ref={ref as React.Ref<HTMLButtonElement>}
+        className={cx(combinedClassName)}
+        disabled={disabled || isLoading}
+        {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+      >
+        {contentEl}
+      </button>
+    );
+  }
+);
+
+BrandButton.displayName = "BrandButton";
+
+export type {
+  ButtonProps,
+  ButtonVariantsT,
+  ButtonSizeT,
+  ResponsiveSize,
+} from "./types";

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

@@ -1,37 +1,37 @@
-import { type AnchorHTMLAttributes, type ButtonHTMLAttributes } from "react";
-
-export type ButtonVariantsT = "primary_brand" | "primary_inverse" | "secondary";
-
-export type ButtonSizeT = "small" | "medium" | "large" | "x-large";
-
-export type ResponsiveSize = {
-  base?: ButtonSizeT;
-  md?: ButtonSizeT;
-  lg?: ButtonSizeT;
-};
-
-export type ButtonCustomProps = {
-  /** Button styling variant */
-  variant?: ButtonVariantsT;
-  /** Loading state - shows spinner and disables button */
-  isLoading?: boolean;
-  label?: string;
-  text?: string;
-  disabled?: boolean;
-  fullWidth?: boolean;
-  size?: ResponsiveSize;
-};
-
-// Discriminated union types for polymorphic component
-export type ButtonAsButton = ButtonCustomProps &
-  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className"> & {
-    as?: "button";
-  };
-
-export type ButtonAsAnchor = ButtonCustomProps &
-  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className"> & {
-    as: "a";
-    href: string; // href is required when as="a"
-  };
-
-export type ButtonProps = ButtonAsButton | ButtonAsAnchor;
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes } from "react";
+
+export type ButtonVariantsT = "primary_brand" | "primary_inverse" | "secondary";
+
+export type ButtonSizeT = "small" | "medium" | "large" | "x-large";
+
+export type ResponsiveSize = {
+  base?: ButtonSizeT;
+  md?: ButtonSizeT;
+  lg?: ButtonSizeT;
+};
+
+export type ButtonCustomProps = {
+  /** Button styling variant */
+  variant?: ButtonVariantsT;
+  /** Loading state - shows spinner and disables button */
+  isLoading?: boolean;
+  label?: string;
+  text?: string;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  size?: ResponsiveSize;
+};
+
+// Discriminated union types for polymorphic component
+export type ButtonAsButton = ButtonCustomProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className"> & {
+    as?: "button";
+  };
+
+export type ButtonAsAnchor = ButtonCustomProps &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className"> & {
+    as: "a";
+    href: string; // href is required when as="a"
+  };
+
+export type ButtonProps = ButtonAsButton | ButtonAsAnchor;

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

@@ -1,108 +1,108 @@
-import { Button } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Button> = {
-  title: "Components/Button",
-  component: Button,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A base button component for functional actions. Its appearance and behavior can be customized based on the parent component's context using className. This component provides loading and disabled states, but styling is left to the consumer.",
-      },
-    },
-  },
-  argTypes: {
-    disabled: {
-      control: { type: "boolean" },
-      description: "Disable the button",
-    },
-    children: {
-      control: { type: "text" },
-      description: "Button content",
-    },
-    className: {
-      control: { type: "text" },
-      description: "Additional CSS classes for custom styling",
-    },
-  },
-  args: {
-    children: "Button",
-    disabled: false,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default button
-export const Default: Story = {
-  args: {},
-};
-
-// Disabled button
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    children: "Disabled Button",
-  },
-};
-
-// With custom styling
-export const WithCustomStyling: Story = {
-  args: {
-    className: "btn-medium bg-fill-brand text-inverse rounded px-4 py-2",
-    children: "Custom Styled Button",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "The Button component accepts className for custom styling. Use Tailwind classes or your own CSS to style the button as needed.",
-      },
-    },
-  },
-};
-
-// Styling examples
-export const StylingExamples: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <div>
-        <p className="mb-2 text-sm text-gray-600">
-          Examples of how you can style the Button component using className:
-        </p>
-        <div className="flex flex-wrap gap-2">
-          <Button className="bg-fill-brand text-inverse btn-medium">
-            Brand Button
-          </Button>
-          <Button className="bg-surface-secondary text-default btn-medium">
-            Secondary Button
-          </Button>
-          <Button className="border-border-default text-default btn-medium border">
-            Outline Button
-          </Button>
-          <Button className="bg-fill-brand text-inverse btn-small">
-            Small Button
-          </Button>
-          <Button className="bg-fill-brand text-inverse btn-large">
-            Large Button
-          </Button>
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Styling examples showing how to use className to customize the button appearance. These are examples only - the component itself doesn't provide built-in variants.",
-      },
-    },
-  },
-};
+import { Button } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A base button component for functional actions. Its appearance and behavior can be customized based on the parent component's context using className. This component provides loading and disabled states, but styling is left to the consumer.",
+      },
+    },
+  },
+  argTypes: {
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable the button",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Button content",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes for custom styling",
+    },
+  },
+  args: {
+    children: "Button",
+    disabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default button
+export const Default: Story = {
+  args: {},
+};
+
+// Disabled button
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: "Disabled Button",
+  },
+};
+
+// With custom styling
+export const WithCustomStyling: Story = {
+  args: {
+    className: "btn-medium bg-fill-brand text-inverse rounded px-4 py-2",
+    children: "Custom Styled Button",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The Button component accepts className for custom styling. Use Tailwind classes or your own CSS to style the button as needed.",
+      },
+    },
+  },
+};
+
+// Styling examples
+export const StylingExamples: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="mb-2 text-sm text-gray-600">
+          Examples of how you can style the Button component using className:
+        </p>
+        <div className="flex flex-wrap gap-2">
+          <Button className="bg-fill-brand text-inverse btn-medium">
+            Brand Button
+          </Button>
+          <Button className="bg-surface-secondary text-default btn-medium">
+            Secondary Button
+          </Button>
+          <Button className="border-border-default text-default btn-medium border">
+            Outline Button
+          </Button>
+          <Button className="bg-fill-brand text-inverse btn-small">
+            Small Button
+          </Button>
+          <Button className="bg-fill-brand text-inverse btn-large">
+            Large Button
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Styling examples showing how to use className to customize the button appearance. These are examples only - the component itself doesn't provide built-in variants.",
+      },
+    },
+  },
+};

package/src/components/button/index.tsx

@@ -1,27 +1,27 @@
-"use client";
-
-import { forwardRef } from "react";
-
-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) => {
-    return (
-      <button
-        ref={ref}
-        className={cx(className)}
-        style={style}
-        disabled={disabled}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-);
-
-Button.displayName = "Button";
-
-export type { ButtonProps };
+"use client";
+
+import { forwardRef } from "react";
+
+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) => {
+    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

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