@windstream/react-shared-components 0.0.1

package/src/components/alert-card/AlertCard.stories.tsx

@@ -0,0 +1,172 @@
+import { AlertCard } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AlertCard> = {
+  title: "Components/AlertCard",
+  component: AlertCard,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "An alert card component for displaying error messages and critical information with an icon and responsive layout.",
+      },
+    },
+  },
+  argTypes: {
+    errorMessage: {
+      control: { type: "text" },
+      description: "Error message or content to display",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+    textVariant: {
+      control: { type: "text" },
+      description: "Text variant class name",
+    },
+  },
+  args: {
+    errorMessage: "This is an error message that needs your attention.",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default alert card
+export const Default: Story = {
+  args: {},
+};
+
+// Short error message
+export const ShortMessage: Story = {
+  args: {
+    errorMessage: "Error occurred",
+  },
+};
+
+// Long error message
+export const LongMessage: Story = {
+  args: {
+    errorMessage:
+      "This is a longer error message that demonstrates how the alert card handles extended text content. The layout will adapt responsively to accommodate the message length.",
+  },
+};
+
+// Custom text variant
+export const CustomTextVariant: Story = {
+  args: {
+    errorMessage: "Error with custom text styling",
+    textVariant: "body1",
+  },
+};
+
+// With React node content
+export const WithReactNode: Story = {
+  args: {
+    errorMessage: (
+      <div>
+        <p className="body2">Error occurred while processing your request.</p>
+        <p className="body3 mt-1 text-text-secondary">
+          Please try again or contact support if the issue persists.
+        </p>
+      </div>
+    ),
+  },
+};
+
+// Responsive layout
+export const Responsive: Story = {
+  render: () => (
+    <div className="w-full max-w-4xl space-y-4">
+      <div>
+        <h3 className="mb-2 text-sm font-medium text-gray-600">
+          Mobile Layout (flex-col)
+        </h3>
+        <div className="w-64 border border-gray-200 p-2">
+          <AlertCard errorMessage="This alert card stacks vertically on mobile devices with the icon on top." />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-2 text-sm font-medium text-gray-600">
+          Desktop Layout (flex-row)
+        </h3>
+        <div className="w-full border border-gray-200 p-2">
+          <AlertCard errorMessage="This alert card displays horizontally on desktop with the icon on the left." />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Alert card adapts its layout responsively - vertical on mobile, horizontal on desktop.",
+      },
+    },
+  },
+};
+
+// Custom styling
+export const CustomStyling: Story = {
+  args: {
+    errorMessage: "Alert card with custom styling",
+    className: "rounded-lg shadow-lg",
+  },
+};
+
+// Multiple alert cards
+export const Multiple: Story = {
+  render: () => (
+    <div className="w-full max-w-2xl space-y-4">
+      <AlertCard errorMessage="First error message" />
+      <AlertCard errorMessage="Second error message with more details about what went wrong" />
+      <AlertCard errorMessage="Third error message" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Multiple alert cards displayed together.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="w-full max-w-2xl space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Default Alert Card</h3>
+        <AlertCard errorMessage="Default error message" />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Long Message</h3>
+        <AlertCard errorMessage="This is a longer error message that demonstrates how the alert card handles extended text content while maintaining proper spacing and readability." />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Custom Styled</h3>
+        <AlertCard
+          errorMessage="Custom styled alert card"
+          className="rounded-lg"
+          textVariant="body1"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all alert card variants and states.",
+      },
+    },
+  },
+};
+

package/src/components/alert-card/index.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import { AlertCardProps } from "./types";
+import { cx } from "@shared/utils";
+import { Text } from "@shared/components/text";
+import { MaterialIcon } from "@shared/components/material-icon";
+
+export const AlertCard: React.FC<AlertCardProps> = ({
+  errorMessage,
+  className,
+  textVariant,
+}) => {
+
+  if (!errorMessage) return null;
+
+  return (
+    <div
+      className={cx(
+        "bg-bg-fill-critical-secondary border-border-critical-secondary flex flex-col md:flex-row items-center gap-5 justify-center rounded-none border-2 px-4 py-6 md:py-4",
+        className
+      )}
+      data-testid="alert-card"
+    >
+      <MaterialIcon name="dangerous" size={52} className="text-icon-critical" />
+      
+      <Text className={cx("body2 text-text", textVariant)}>
+        {errorMessage}
+      </Text>
+    </div>
+  );
+};
+
+AlertCard.displayName = "AlertCard";
+
+export type { AlertCardProps };

package/src/components/alert-card/types.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+import { TextVariant } from "@shared/components/text";
+
+export type AlertCardProps = {
+  errorMessage?: string | ReactNode;
+  className?: string;
+  textVariant?: TextVariant;
+};

package/src/components/brand-button/BrandButton.stories.tsx

@@ -0,0 +1,221 @@
+import { BrandButton } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof BrandButton> = {
+  title: "Components/BrandButton",
+  component: BrandButton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A branded button component with predefined variants, responsive sizing, and loading states. Designed for consistent brand styling across the application.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["primary_brand", "primary_inverse", "secondary"],
+      description: "Button styling variant",
+    },
+    isLoading: {
+      control: { type: "boolean" },
+      description: "Show loading spinner",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable the button",
+    },
+    text: {
+      control: { type: "text" },
+      description: "Button text content",
+    },
+    label: {
+      control: { type: "text" },
+      description: "Button label (displayed above text)",
+    },
+    fullWidth: {
+      control: { type: "boolean" },
+      description: "Make button full width",
+    },
+    size: {
+      control: { type: "object" },
+      description: "Responsive size configuration",
+    },
+  },
+  args: {
+    text: "Button",
+    variant: "primary_brand",
+    isLoading: false,
+    disabled: false,
+    fullWidth: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default button
+export const Default: Story = {
+  args: {},
+};
+
+// Primary brand variant
+export const PrimaryBrand: Story = {
+  args: {
+    variant: "primary_brand",
+    text: "Primary Brand Button",
+  },
+};
+
+// Primary inverse variant
+export const PrimaryInverse: Story = {
+  args: {
+    variant: "primary_inverse",
+    text: "Primary Inverse Button",
+  },
+};
+
+// Secondary variant
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    text: "Secondary Button",
+  },
+};
+
+// With label
+export const WithLabel: Story = {
+  args: {
+    variant: "primary_brand",
+    label: "Label",
+    text: "Button Text",
+  },
+};
+
+// Loading state
+export const Loading: Story = {
+  args: {
+    variant: "primary_brand",
+    text: "Loading...",
+    isLoading: true,
+  },
+};
+
+// Disabled state
+export const Disabled: Story = {
+  args: {
+    variant: "primary_brand",
+    text: "Disabled Button",
+    disabled: true,
+  },
+};
+
+// Full width
+export const FullWidth: Story = {
+  args: {
+    variant: "primary_brand",
+    text: "Full Width Button",
+    fullWidth: true,
+  },
+  render: (args) => (
+    <div className="w-64">
+      <BrandButton {...args} />
+    </div>
+  ),
+};
+
+// Responsive sizes
+export const ResponsiveSizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h4 className="mb-2 text-sm font-medium">Base: small, MD: medium, LG: large</h4>
+        <BrandButton
+          variant="primary_brand"
+          text="Responsive Button"
+          size={{ base: "small", md: "medium", lg: "large" }}
+        />
+      </div>
+      <div>
+        <h4 className="mb-2 text-sm font-medium">Base: medium, MD: large</h4>
+        <BrandButton
+          variant="primary_brand"
+          text="Responsive Button"
+          size={{ base: "medium", md: "large" }}
+        />
+      </div>
+      <div>
+        <h4 className="mb-2 text-sm font-medium">Base only</h4>
+        <BrandButton
+          variant="primary_brand"
+          text="Responsive Button"
+          size={{ base: "medium" }}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "BrandButton supports responsive sizing that adapts to different screen sizes.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Variants</h3>
+        <div className="flex flex-col gap-3">
+          <BrandButton variant="primary_brand" text="Primary Brand" />
+          <BrandButton variant="primary_inverse" text="Primary Inverse" />
+          <BrandButton variant="secondary" text="Secondary" />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">States</h3>
+        <div className="flex flex-col gap-3">
+          <BrandButton variant="primary_brand" text="Normal" />
+          <BrandButton variant="primary_brand" text="Loading" isLoading />
+          <BrandButton variant="primary_brand" text="Disabled" disabled />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">With Label</h3>
+        <BrandButton
+          variant="primary_brand"
+          label="Label"
+          text="Button Text"
+        />
+      </div>
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Full Width</h3>
+        <div className="w-64">
+          <BrandButton
+            variant="primary_brand"
+            text="Full Width Button"
+            fullWidth
+          />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete showcase of all BrandButton variants, sizes, and states.",
+      },
+    },
+  },
+};
+

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

@@ -0,0 +1,35 @@
+import { ResponsiveSize } from "./types";
+
+// Using a simple, intentional workaround to handle the Tailwind scan issue.
+const getClassNames = (size:string) =>{
+  switch (size) {
+    case "small":
+      return "md:btn-small"
+    case "medium":
+      return "md:btn-medium"
+    case "large":
+      return "md:btn-large"
+    case "x-large":
+      return "md:btn-x-large"
+  }
+}
+
+export const sizeToClassNames = (size: ResponsiveSize) => {
+  let classes = "";
+
+  if (size.base) classes = `btn-${size.base} `;
+  if (size.md) classes += `${getClassNames(size.md)} `;
+  if (size.lg) classes += `lg:btn-${size.lg} `;
+
+  return classes.trim();
+}
+
+export const getLabelSizeBasedOnButtonSize = (size: ResponsiveSize) => {
+  let classes = "";
+
+  if (size.base) classes = size.base === "x-large" ? `label3 ` : "label4 ";
+  if (size.md) classes += size.md === "x-large" ? `md:label3 ` : "md:label4 ";
+  if (size.lg) classes += size.lg === "x-large" ? `lg:label3 ` : "lg:label4 ";
+
+  return classes.trim();
+}

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

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

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

@@ -0,0 +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;
+}
+
+export type ButtonProps = ButtonCustomProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"| "className">;

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

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