@windstream/react-shared-components 0.0.10 → 0.0.11

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

@@ -1,90 +1,90 @@
-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";
-
-// BrandButton is intentionally limited to prevent over-configuration, restricting className and children props.
-export const BrandButton = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      variant = "primary_brand",
-      isLoading = false,
-      text,
-      label,
-      disabled,
-      fullWidth,
-      size = { base: "medium" },
-      ...props
-    },
-    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 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-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse",
-      };
-      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}`;
-
-    return (
-      <button
-        ref={ref}
-        className={cx(combinedClassName)}
-        disabled={disabled || isLoading}
-        {...props}
-      >
-        {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
-        )}
-      </button>
-    );
-  }
-);
-
-BrandButton.displayName = "BrandButton";
-
-export type { ButtonProps, ButtonVariantsT, ButtonSizeT, ResponsiveSize } from "./types";
-
-
+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";
+
+// BrandButton is intentionally limited to prevent over-configuration, restricting className and children props.
+export const BrandButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "primary_brand",
+      isLoading = false,
+      text,
+      label,
+      disabled,
+      fullWidth,
+      size = { base: "medium" },
+      ...props
+    },
+    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 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-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse",
+      };
+      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}`;
+
+    return (
+      <button
+        ref={ref}
+        className={cx(combinedClassName)}
+        disabled={disabled || isLoading}
+        {...props}
+      >
+        {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
+        )}
+      </button>
+    );
+  }
+);
+
+BrandButton.displayName = "BrandButton";
+
+export type { ButtonProps, ButtonVariantsT, ButtonSizeT, ResponsiveSize } from "./types";
+
+

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

@@ -1,27 +1,27 @@
-import {
-  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;
-  fullWidth?: boolean;
-  size?: ResponsiveSize;
-}
-
+import {
+  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;
+  fullWidth?: boolean;
+  size?: ResponsiveSize;
+}
+
 export type ButtonProps = ButtonCustomProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"| "className">;

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="btn-medium bg-fill-brand text-inverse">
-            Brand Button
-          </Button>
-          <Button className="btn-medium bg-surface-secondary text-default">
-            Secondary Button
-          </Button>
-          <Button className="btn-medium border border-border-default text-default">
-            Outline Button
-          </Button>
-          <Button className="btn-small bg-fill-brand text-inverse">
-            Small Button
-          </Button>
-          <Button className="btn-large bg-fill-brand text-inverse">
-            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="btn-medium bg-fill-brand text-inverse">
+            Brand Button
+          </Button>
+          <Button className="btn-medium bg-surface-secondary text-default">
+            Secondary Button
+          </Button>
+          <Button className="btn-medium border border-border-default text-default">
+            Outline Button
+          </Button>
+          <Button className="btn-small bg-fill-brand text-inverse">
+            Small Button
+          </Button>
+          <Button className="btn-large bg-fill-brand text-inverse">
+            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,23 +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 };
+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

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