@windstream/react-shared-components 0.0.17 → 0.0.20

package/src/components/skeleton/index.tsx

@@ -1,61 +1,61 @@
-import { FC } from "react";
-import { SkeletonProps } from "./types";
-
-export const Skeleton: FC<SkeletonProps> = ({ className = "", count = 1 }) => {
-  return (
-    <div className="animate-pulse space-y-4">
-      {Array.from({ length: count }).map((_, index) => (
-        <div
-          key={index}
-          className={`h-8 rounded bg-skeleton-bg-start ${className}`}
-          style={{ opacity: 1 - index * 0.1 }}
-        />
-      ))}
-    </div>
-  );
-};
-
-Skeleton.displayName = "Skeleton";
-
-export type { SkeletonProps };
-
-export const PageSkeleton: FC = () => {
-  return (
-    <div
-      className="item-center mx-auto mt-4 flex animate-pulse flex-col justify-center gap-10 px-1 md:max-w-[48.375rem] md:gap-16 md:px-0"
-      data-testid="generic-skeleton"
-    >
-      {/* Title */}
-      <div
-        className="h-12 w-full rounded-lg bg-skeleton-bg-start"
-        data-testid="title"
-      />
-
-      {/* Subtitle */}
-      <div className="item-center flex flex-col gap-6" data-testid="subtitle">
-        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
-        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
-      </div>
-
-      {/* Content */}
-      <div className="item-center flex flex-col gap-3" data-testid="content">
-        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
-        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
-      </div>
-
-      {/* Additional Information */}
-      <div
-        className="item-center flex flex-col gap-6"
-        data-testid="additional-info"
-      >
-        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
-        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
-      </div>
-
-      {/* CTA button */}
-      <div className="item-center flex justify-center" data-testid="cta-button">
-        <div className="h-12 w-full rounded-lg bg-skeleton-bg-end md:w-[22.125rem]" />
-      </div>
-    </div>
-  );
-};
+import { FC } from "react";
+import { SkeletonProps } from "./types";
+
+export const Skeleton: FC<SkeletonProps> = ({ className = "", count = 1 }) => {
+  return (
+    <div className="animate-pulse space-y-4">
+      {Array.from({ length: count }).map((_, index) => (
+        <div
+          key={index}
+          className={`h-8 rounded bg-skeleton-bg-start ${className}`}
+          style={{ opacity: 1 - index * 0.1 }}
+        />
+      ))}
+    </div>
+  );
+};
+
+Skeleton.displayName = "Skeleton";
+
+export type { SkeletonProps };
+
+export const PageSkeleton: FC = () => {
+  return (
+    <div
+      className="item-center mx-auto mt-4 flex animate-pulse flex-col justify-center gap-10 px-1 md:max-w-[48.375rem] md:gap-16 md:px-0"
+      data-testid="generic-skeleton"
+    >
+      {/* Title */}
+      <div
+        className="h-12 w-full rounded-lg bg-skeleton-bg-start"
+        data-testid="title"
+      />
+
+      {/* Subtitle */}
+      <div className="item-center flex flex-col gap-6" data-testid="subtitle">
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
+      </div>
+
+      {/* Content */}
+      <div className="item-center flex flex-col gap-3" data-testid="content">
+        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
+        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
+      </div>
+
+      {/* Additional Information */}
+      <div
+        className="item-center flex flex-col gap-6"
+        data-testid="additional-info"
+      >
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
+      </div>
+
+      {/* CTA button */}
+      <div className="item-center flex justify-center" data-testid="cta-button">
+        <div className="h-12 w-full rounded-lg bg-skeleton-bg-end md:w-[22.125rem]" />
+      </div>
+    </div>
+  );
+};

package/src/components/skeleton/types.ts

@@ -1,4 +1,4 @@
 export type SkeletonProps = {
-	className?: string;
-	count?: number;
-}
+  className?: string;
+  count?: number;
+};

package/src/components/spinner/Spinner.stories.tsx

@@ -1,6 +1,6 @@
 import { Spinner } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Spinner> = {

package/src/components/spinner/index.tsx

@@ -17,7 +17,7 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = props => {
       <svg
         aria-hidden="true"
         className={cx(
-          "mr-2 h-5 w-5 text-transparent animate-spin",
+          "mr-2 h-5 w-5 animate-spin text-transparent",
           sizeClasses[size],
           props.className
         )}

package/src/components/spinner/types.ts

@@ -1,5 +1,5 @@
 export type SpinnerProps = {
-    size?: "small" | "medium" | "large" | "xlarge";
-    color?: string;
-    className?: string;
-  } & React.HTMLAttributes<HTMLDivElement>;
+  size?: "small" | "medium" | "large" | "xlarge";
+  color?: string;
+  className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;

package/src/components/text/Text.stories.tsx

@@ -1,6 +1,6 @@
 import { Text } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Text> = {
@@ -36,7 +36,8 @@ const meta: Meta<typeof Text> = {
     },
     className: {
       control: { type: "text" },
-      description: "Additional CSS classes (use typography classes like body1, heading1, etc.)",
+      description:
+        "Additional CSS classes (use typography classes like body1, heading1, etc.)",
     },
     children: {
       control: { type: "text" },
@@ -142,7 +143,7 @@ export const Labels: Story = {
   render: () => (
     <div className="space-y-4">
       <div>
-        <Text as="label" className="mb-2 block body1">
+        <Text as="label" className="body1 mb-2 block">
           Label 1
         </Text>
         <input
@@ -152,7 +153,7 @@ export const Labels: Story = {
         />
       </div>
       <div>
-        <Text as="label" className="mb-2 block body2">
+        <Text as="label" className="body2 mb-2 block">
           Label 2
         </Text>
         <input
@@ -162,7 +163,7 @@ export const Labels: Story = {
         />
       </div>
       <div>
-        <Text as="label" className="mb-2 block body3">
+        <Text as="label" className="body3 mb-2 block">
           Label 3
         </Text>
         <input
@@ -172,7 +173,7 @@ export const Labels: Story = {
         />
       </div>
       <div>
-        <Text as="label" className="mb-2 block footnote">
+        <Text as="label" className="footnote mb-2 block">
           Label 4
         </Text>
         <input
@@ -233,7 +234,7 @@ export const SemanticElements: Story = {
         It demonstrates how the Text component can be used with semantic HTML
         elements.
       </Text>
-      <Text as="label" className="block body1">
+      <Text as="label" className="body1 block">
         Form Label
       </Text>
       <Text as="span" className="footnote">
@@ -258,27 +259,45 @@ export const AllVariants: Story = {
       <div>
         <h3 className="mb-3 text-lg font-semibold">Headings</h3>
         <div className="space-y-2">
-          <Text as="h1" className="heading1">Heading 1</Text>
-          <Text as="h2" className="heading2">Heading 2</Text>
-          <Text as="h3" className="heading3">Heading 3</Text>
+          <Text as="h1" className="heading1">
+            Heading 1
+          </Text>
+          <Text as="h2" className="heading2">
+            Heading 2
+          </Text>
+          <Text as="h3" className="heading3">
+            Heading 3
+          </Text>
         </div>
       </div>
 
       <div>
         <h3 className="mb-3 text-lg font-semibold">Body Text</h3>
         <div className="space-y-2">
-          <Text as="p" className="body1">Body 1 - Main content text</Text>
-          <Text as="p" className="body2">Body 2 - Secondary content text</Text>
-          <Text as="p" className="body3">Body 3 - Smaller content text</Text>
+          <Text as="p" className="body1">
+            Body 1 - Main content text
+          </Text>
+          <Text as="p" className="body2">
+            Body 2 - Secondary content text
+          </Text>
+          <Text as="p" className="body3">
+            Body 3 - Smaller content text
+          </Text>
         </div>
       </div>
 
       <div>
         <h3 className="mb-3 text-lg font-semibold">Labels</h3>
         <div className="space-y-2">
-          <Text as="label" className="body1">Label 1</Text>
-          <Text as="label" className="body2">Label 2</Text>
-          <Text as="label" className="body3">Label 3</Text>
+          <Text as="label" className="body1">
+            Label 1
+          </Text>
+          <Text as="label" className="body2">
+            Label 2
+          </Text>
+          <Text as="label" className="body3">
+            Label 3
+          </Text>
           <Text className="footnote">Label 4</Text>
         </div>
       </div>

package/src/components/text/index.tsx

@@ -2,11 +2,8 @@ import React, { forwardRef } from "react";
 import { TextProps, TextVariant } from "./types";
 
 export const Text = forwardRef<HTMLElement, TextProps>(
-  (
-    { children, as, className = "", style, ...props },
-    ref
-  ) => {
-    const elementType = as || 'p';
+  ({ children, as, className = "", style, ...props }, ref) => {
+    const elementType = as || "p";
 
     return React.createElement(
       elementType,

package/src/components/text/types.ts

@@ -1,45 +1,45 @@
-import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
-
-export type TextVariant =
-  | "heading1"
-  | "heading2"
-  | "heading3"
-  | "heading4"
-  | "heading5"
-  | "heading6"
-  | "subheading1"
-  | "subheading2"
-  | "subheading3"
-  | "subheading4"
-  | "subheading5"
-  | "subheading6"
-  | "body1"
-  | "body2"
-  | "body3"
-  | "footnote"
-  | "micro"
-  | "label1"
-  | "label2"
-  | "label3"
-  | "label4"
-  | "error"
-  | "unstyled";
-export type TextWeight =
-  | "thin"
-  | "normal"
-  | "medium"
-  | "semibold"
-  | "bold"
-  | "extrabold"
-  | "black"
-  | undefined;
-export interface TextProps extends HTMLAttributes<HTMLElement> {
-  /** Content to render inside the text element */
-  children?: ReactNode;
-  /** Custom HTML element to render as */
-  as?: keyof import("react").JSX.IntrinsicElements;
-  /** Custom className for the text */
-  className?: string;
-  /** Custom styles */
-  style?: CSSProperties;
-}
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+
+export type TextVariant =
+  | "heading1"
+  | "heading2"
+  | "heading3"
+  | "heading4"
+  | "heading5"
+  | "heading6"
+  | "subheading1"
+  | "subheading2"
+  | "subheading3"
+  | "subheading4"
+  | "subheading5"
+  | "subheading6"
+  | "body1"
+  | "body2"
+  | "body3"
+  | "footnote"
+  | "micro"
+  | "label1"
+  | "label2"
+  | "label3"
+  | "label4"
+  | "error"
+  | "unstyled";
+export type TextWeight =
+  | "thin"
+  | "normal"
+  | "medium"
+  | "semibold"
+  | "bold"
+  | "extrabold"
+  | "black"
+  | undefined;
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  /** Content to render inside the text element */
+  children?: ReactNode;
+  /** Custom HTML element to render as */
+  as?: keyof import("react").JSX.IntrinsicElements;
+  /** Custom className for the text */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+}

package/src/components/tooltip/Tooltip.stories.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Tooltip> = {
@@ -58,7 +58,7 @@ export const WithButton: Story = {
   args: {
     tooltipMsg: "Click to submit the form",
     children: (
-      <button className="px-4 py-2 bg-fill-brand text-inverse rounded">
+      <button className="bg-fill-brand text-inverse rounded px-4 py-2">
         Submit
       </button>
     ),
@@ -70,7 +70,7 @@ export const WithIcon: Story = {
   args: {
     tooltipMsg: "More information",
     children: (
-      <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-surface-secondary text-icon-info cursor-help">
+      <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
         i
       </span>
     ),
@@ -104,17 +104,17 @@ export const LongMessage: Story = {
 // Different children
 export const DifferentChildren: Story = {
   render: () => (
-    <div className="flex flex-wrap gap-4 items-center">
+    <div className="flex flex-wrap items-center gap-4">
       <Tooltip tooltipMsg="Text tooltip">
-        <span className="underline cursor-help">Text</span>
+        <span className="cursor-help underline">Text</span>
       </Tooltip>
       <Tooltip tooltipMsg="Button tooltip">
-        <button className="px-4 py-2 bg-fill-brand text-inverse rounded">
+        <button className="bg-fill-brand text-inverse rounded px-4 py-2">
           Button
         </button>
       </Tooltip>
       <Tooltip tooltipMsg="Icon tooltip">
-        <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-surface-secondary text-icon-info cursor-help">
+        <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
           ?
         </span>
       </Tooltip>
@@ -149,17 +149,17 @@ export const Multiple: Story = {
     <div className="space-y-4">
       <div className="flex gap-4">
         <Tooltip tooltipMsg="First tooltip">
-          <button className="px-4 py-2 bg-surface-secondary text-text rounded">
+          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
             Button 1
           </button>
         </Tooltip>
         <Tooltip tooltipMsg="Second tooltip">
-          <button className="px-4 py-2 bg-surface-secondary text-text rounded">
+          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
             Button 2
           </button>
         </Tooltip>
         <Tooltip tooltipMsg="Third tooltip">
-          <button className="px-4 py-2 bg-surface-secondary text-text rounded">
+          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
             Button 3
           </button>
         </Tooltip>
@@ -178,17 +178,17 @@ export const Multiple: Story = {
 // All variants showcase
 export const AllVariants: Story = {
   render: () => (
-    <div className="w-full max-w-2xl space-y-8">
+    <div className="max-w-2xl w-full space-y-8">
       <div>
         <h3 className="mb-3 text-lg font-semibold">With Text</h3>
         <Tooltip tooltipMsg="This is a tooltip message">
-          <span className="underline cursor-help">Hover me</span>
+          <span className="cursor-help underline">Hover me</span>
         </Tooltip>
       </div>
       <div>
         <h3 className="mb-3 text-lg font-semibold">With Button</h3>
         <Tooltip tooltipMsg="Click to submit">
-          <button className="px-4 py-2 bg-fill-brand text-inverse rounded">
+          <button className="bg-fill-brand text-inverse rounded px-4 py-2">
             Submit
           </button>
         </Tooltip>
@@ -196,7 +196,7 @@ export const AllVariants: Story = {
       <div>
         <h3 className="mb-3 text-lg font-semibold">With Icon</h3>
         <Tooltip tooltipMsg="More information">
-          <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-surface-secondary text-icon-info cursor-help">
+          <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
             i
           </span>
         </Tooltip>
@@ -204,7 +204,7 @@ export const AllVariants: Story = {
       <div>
         <h3 className="mb-3 text-lg font-semibold">Long Message</h3>
         <Tooltip tooltipMsg="This is a longer tooltip message that demonstrates how the tooltip handles extended text content.">
-          <span className="underline cursor-help">Hover for long message</span>
+          <span className="cursor-help underline">Hover for long message</span>
         </Tooltip>
       </div>
     </div>
@@ -217,4 +217,3 @@ export const AllVariants: Story = {
     },
   },
 };
-

package/src/components/tooltip/index.tsx

@@ -1,10 +1,6 @@
 import { ToolTipProps } from "./types";
 
-export function Tooltip({
-  tooltipMsg,
-  className,
-  children,
-}: ToolTipProps) {
+export function Tooltip({ tooltipMsg, className, children }: ToolTipProps) {
   return (
     <>
       <style>{`

package/src/components/tooltip/types.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 
 export type ToolTipProps = {
-    tooltipMsg: string;
-    children: ReactNode;
-    className?: string;
-  };
+  tooltipMsg: string;
+  children: ReactNode;
+  className?: string;
+};

package/src/components/view-cart-button/ViewCartButton.stories.tsx

@@ -1,8 +1,8 @@
+import { useState } from "react";
 import { ViewCartButton } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
 
 const meta: Meta<typeof ViewCartButton> = {
   title: "Components/ViewCartButton",
@@ -75,14 +75,14 @@ export const Interactive: Story = {
   render: () => {
     const [isOpen, setIsOpen] = useState(false);
     return (
-      <div className="w-full max-w-md">
+      <div className="max-w-md w-full">
         <ViewCartButton
           cartTotalText="$149.99"
           isOpen={isOpen}
           onClick={() => setIsOpen(!isOpen)}
         />
         {isOpen && (
-          <div className="mt-4 p-4 bg-surface-secondary rounded">
+          <div className="bg-surface-secondary mt-4 rounded p-4">
             <p className="body2 text-text">Cart is open</p>
           </div>
         )}
@@ -102,11 +102,23 @@ export const Interactive: Story = {
 // Different totals
 export const DifferentTotals: Story = {
   render: () => (
-    <div className="w-full max-w-md space-y-3">
+    <div className="max-w-md w-full space-y-3">
       <ViewCartButton cartTotalText="$0.00" isOpen={false} onClick={() => {}} />
-      <ViewCartButton cartTotalText="$29.99" isOpen={false} onClick={() => {}} />
-      <ViewCartButton cartTotalText="$99.99" isOpen={false} onClick={() => {}} />
-      <ViewCartButton cartTotalText="$249.99" isOpen={false} onClick={() => {}} />
+      <ViewCartButton
+        cartTotalText="$29.99"
+        isOpen={false}
+        onClick={() => {}}
+      />
+      <ViewCartButton
+        cartTotalText="$99.99"
+        isOpen={false}
+        onClick={() => {}}
+      />
+      <ViewCartButton
+        cartTotalText="$249.99"
+        isOpen={false}
+        onClick={() => {}}
+      />
     </div>
   ),
   parameters: {
@@ -138,7 +150,7 @@ export const Responsive: Story = {
         <h3 className="mb-2 text-sm font-medium text-gray-600">
           Desktop View (btn-medium)
         </h3>
-        <div className="w-full max-w-md border border-gray-200 p-2">
+        <div className="max-w-md w-full border border-gray-200 p-2">
           <ViewCartButton
             cartTotalText="$99.99"
             isOpen={false}
@@ -161,7 +173,7 @@ export const Responsive: Story = {
 // Open and closed states
 export const OpenAndClosed: Story = {
   render: () => (
-    <div className="w-full max-w-md space-y-4">
+    <div className="max-w-md w-full space-y-4">
       <div>
         <h4 className="mb-2 text-sm font-medium">Closed State</h4>
         <ViewCartButton
@@ -192,7 +204,7 @@ export const OpenAndClosed: Story = {
 // All variants showcase
 export const AllVariants: Story = {
   render: () => (
-    <div className="w-full max-w-2xl space-y-6">
+    <div className="max-w-2xl w-full space-y-6">
       <div>
         <h3 className="mb-3 text-lg font-semibold">States</h3>
         <div className="space-y-3">
@@ -238,4 +250,3 @@ export const AllVariants: Story = {
     },
   },
 };
-

package/src/components/view-cart-button/index.tsx

@@ -1,15 +1,20 @@
-import { cx } from "@shared/utils";
 import { Button } from "../button";
 import { MaterialIcon } from "../material-icon";
 import { Text } from "../text";
 import { ViewCartButtonProps } from "./types";
+
+import { cx } from "@shared/utils";
+
 const baseClasses =
   "btn-medium 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 border-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse";
-export const ViewCartButton: React.FC<ViewCartButtonProps> = (props) => {
+export const ViewCartButton: React.FC<ViewCartButtonProps> = props => {
   const { cartTotalText, onClick, isOpen, ...rest } = props;
   return (
     <Button
-      className={cx(baseClasses, "btn-small w-full border-border pl-6 pr-4 md:btn-medium")}
+      className={cx(
+        baseClasses,
+        "btn-small w-full border-border pl-6 pr-4 md:btn-medium"
+      )}
       onClick={onClick}
       {...rest}
     >
@@ -33,7 +38,7 @@ export const ViewCartButton: React.FC<ViewCartButtonProps> = (props) => {
         />
       </div>
     </Button>
-  )
-}
+  );
+};
 
-export type { ViewCartButtonProps } from "./types";
+export type { ViewCartButtonProps } from "./types";

package/src/components/view-cart-button/types.ts

@@ -2,4 +2,4 @@ export type ViewCartButtonProps = {
   cartTotalText: string;
   onClick: () => void;
   isOpen: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;