@windstream/react-shared-components 0.0.9 → 0.0.11

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

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