@windstream/react-shared-components 0.0.1

package/src/components/text/index.tsx

@@ -0,0 +1,26 @@
+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';
+
+    return React.createElement(
+      elementType,
+      {
+        ref,
+        className,
+        style,
+        ...props,
+      },
+      children
+    );
+  }
+);
+
+Text.displayName = "Text";
+
+export type { TextProps, TextVariant };

package/src/components/text/types.ts

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

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

@@ -0,0 +1,220 @@
+import { Tooltip } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A tooltip component that displays additional information when hovering over an element.",
+      },
+    },
+  },
+  argTypes: {
+    tooltipMsg: {
+      control: { type: "text" },
+      description: "Tooltip message to display",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Element that triggers the tooltip",
+    },
+  },
+  args: {
+    tooltipMsg: "This is a tooltip message",
+    children: "Hover me",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default tooltip
+export const Default: Story = {
+  args: {},
+};
+
+// With message
+export const WithMessage: Story = {
+  args: {
+    tooltipMsg: "This is a helpful tooltip message",
+    children: "Hover to see tooltip",
+  },
+};
+
+// With button
+export const WithButton: Story = {
+  args: {
+    tooltipMsg: "Click to submit the form",
+    children: (
+      <button className="px-4 py-2 bg-fill-brand text-inverse rounded">
+        Submit
+      </button>
+    ),
+  },
+};
+
+// With icon
+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">
+        i
+      </span>
+    ),
+  },
+};
+
+// With link
+export const WithLink: Story = {
+  args: {
+    tooltipMsg: "Visit our documentation",
+    children: (
+      <a
+        href="#"
+        className="text-text-brand underline hover:text-text-brand-hover"
+      >
+        Learn more
+      </a>
+    ),
+  },
+};
+
+// Long message
+export const LongMessage: Story = {
+  args: {
+    tooltipMsg:
+      "This is a longer tooltip message that demonstrates how the tooltip handles extended text content. It should wrap appropriately to remain readable.",
+    children: "Hover for long message",
+  },
+};
+
+// Different children
+export const DifferentChildren: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4 items-center">
+      <Tooltip tooltipMsg="Text tooltip">
+        <span className="underline cursor-help">Text</span>
+      </Tooltip>
+      <Tooltip tooltipMsg="Button tooltip">
+        <button className="px-4 py-2 bg-fill-brand text-inverse rounded">
+          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>
+      </Tooltip>
+      <Tooltip tooltipMsg="Link tooltip">
+        <a href="#" className="text-text-brand underline">
+          Link
+        </a>
+      </Tooltip>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Tooltip with different types of children elements.",
+      },
+    },
+  },
+};
+
+// Custom styling
+export const CustomStyling: Story = {
+  args: {
+    tooltipMsg: "Custom styled tooltip",
+    className: "custom-tooltip",
+    children: "Hover me",
+  },
+};
+
+// Multiple tooltips
+export const Multiple: Story = {
+  render: () => (
+    <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 1
+          </button>
+        </Tooltip>
+        <Tooltip tooltipMsg="Second tooltip">
+          <button className="px-4 py-2 bg-surface-secondary text-text rounded">
+            Button 2
+          </button>
+        </Tooltip>
+        <Tooltip tooltipMsg="Third tooltip">
+          <button className="px-4 py-2 bg-surface-secondary text-text rounded">
+            Button 3
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Multiple tooltips displayed together.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="w-full max-w-2xl 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>
+        </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">
+            Submit
+          </button>
+        </Tooltip>
+      </div>
+      <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">
+            i
+          </span>
+        </Tooltip>
+      </div>
+      <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>
+        </Tooltip>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all tooltip variants and use cases.",
+      },
+    },
+  },
+};
+

package/src/components/tooltip/index.tsx

@@ -0,0 +1,78 @@
+import { ToolTipProps } from "./types";
+
+export function Tooltip({
+  tooltipMsg,
+  className,
+  children,
+}: ToolTipProps) {
+  return (
+    <>
+      <style>{`
+        .tooltip-custom {
+          position: relative;
+          cursor: pointer;
+          margin-top: 7px;
+        }
+        .tooltip-custom::after {
+          display: none;
+          position: absolute;
+          text-align: center;
+          z-index: 999;
+          content: attr(data-text);
+          top: 0;
+          left: -200%;
+          transform: translate(-50%, calc(-100% - 10px));
+          line-height: 1.1rem;
+          padding-left: 1rem;
+          padding-right: 1rem;
+          border-radius: 8px;
+          color: white;
+          background-color: black;
+          padding-bottom: 0.75rem;
+          padding-top: 0.75rem;
+          width: 270px;
+          font-size: 14px;
+        }
+        .tooltip-custom:hover::after {
+          display: block;
+        }
+        .tooltip-custom::before {
+          background-color: black;
+          content: " ";
+          display: none;
+          position: absolute;
+          width: 15px;
+          height: 15px;
+          z-index: 999;
+          top: 0;
+          left: 50%;
+          transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
+        }
+        .tooltip-custom:hover::before {
+          display: block;
+        }
+        @media (max-width: 640px) {
+          .tooltip-custom::after {
+            left: -124px;
+          }
+        }
+        @media (max-width: 343px) {
+          .tooltip-custom::after {
+            left: 80px;
+            width: 160px;
+          }
+        }
+      `}</style>
+      <span
+        className={`tooltip-custom ${className || ""}`}
+        data-text={tooltipMsg}
+      >
+        {children}
+      </span>
+    </>
+  );
+}
+
+Tooltip.displayName = "Tooltip";
+
+export type { ToolTipProps };

package/src/components/tooltip/types.ts

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

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

@@ -0,0 +1,241 @@
+import { ViewCartButton } from "./index";
+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",
+  component: ViewCartButton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A button component for viewing cart contents with total price display and open/closed states.",
+      },
+    },
+  },
+  argTypes: {
+    cartTotalText: {
+      control: { type: "text" },
+      description: "Text displaying the cart total",
+    },
+    isOpen: {
+      control: { type: "boolean" },
+      description: "Whether the cart is open",
+    },
+    onClick: {
+      action: "clicked",
+      description: "Callback function when button is clicked",
+    },
+  },
+  args: {
+    cartTotalText: "$99.99",
+    isOpen: false,
+    onClick: () => {},
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default button
+export const Default: Story = {
+  args: {},
+};
+
+// With cart total
+export const WithCartTotal: Story = {
+  args: {
+    cartTotalText: "$149.99",
+  },
+};
+
+// Open state
+export const Open: Story = {
+  args: {
+    cartTotalText: "$99.99",
+    isOpen: true,
+  },
+};
+
+// Closed state
+export const Closed: Story = {
+  args: {
+    cartTotalText: "$99.99",
+    isOpen: false,
+  },
+};
+
+// Interactive state
+export const Interactive: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <div className="w-full max-w-md">
+        <ViewCartButton
+          cartTotalText="$149.99"
+          isOpen={isOpen}
+          onClick={() => setIsOpen(!isOpen)}
+        />
+        {isOpen && (
+          <div className="mt-4 p-4 bg-surface-secondary rounded">
+            <p className="body2 text-text">Cart is open</p>
+          </div>
+        )}
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive ViewCartButton that toggles open/closed state on click.",
+      },
+    },
+  },
+};
+
+// Different totals
+export const DifferentTotals: Story = {
+  render: () => (
+    <div className="w-full max-w-md 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={() => {}} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "ViewCartButton with different cart total values.",
+      },
+    },
+  },
+};
+
+// Responsive behavior
+export const Responsive: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="mb-2 text-sm font-medium text-gray-600">
+          Mobile View (btn-small)
+        </h3>
+        <div className="w-64 border border-gray-200 p-2">
+          <ViewCartButton
+            cartTotalText="$99.99"
+            isOpen={false}
+            onClick={() => {}}
+          />
+        </div>
+      </div>
+      <div>
+        <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">
+          <ViewCartButton
+            cartTotalText="$99.99"
+            isOpen={false}
+            onClick={() => {}}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "ViewCartButton adapts its size responsively - smaller on mobile, larger on desktop.",
+      },
+    },
+  },
+};
+
+// Open and closed states
+export const OpenAndClosed: Story = {
+  render: () => (
+    <div className="w-full max-w-md space-y-4">
+      <div>
+        <h4 className="mb-2 text-sm font-medium">Closed State</h4>
+        <ViewCartButton
+          cartTotalText="$99.99"
+          isOpen={false}
+          onClick={() => {}}
+        />
+      </div>
+      <div>
+        <h4 className="mb-2 text-sm font-medium">Open State</h4>
+        <ViewCartButton
+          cartTotalText="$99.99"
+          isOpen={true}
+          onClick={() => {}}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "ViewCartButton in both open and closed states.",
+      },
+    },
+  },
+};
+
+// 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">States</h3>
+        <div className="space-y-3">
+          <ViewCartButton
+            cartTotalText="$99.99"
+            isOpen={false}
+            onClick={() => {}}
+          />
+          <ViewCartButton
+            cartTotalText="$99.99"
+            isOpen={true}
+            onClick={() => {}}
+          />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Different Totals</h3>
+        <div className="space-y-3">
+          <ViewCartButton
+            cartTotalText="$0.00"
+            isOpen={false}
+            onClick={() => {}}
+          />
+          <ViewCartButton
+            cartTotalText="$29.99"
+            isOpen={false}
+            onClick={() => {}}
+          />
+          <ViewCartButton
+            cartTotalText="$149.99"
+            isOpen={false}
+            onClick={() => {}}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all ViewCartButton variants and states.",
+      },
+    },
+  },
+};
+

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

@@ -0,0 +1,39 @@
+import { cx } from "@shared/utils";
+import { Button } from "../button";
+import { MaterialIcon } from "../material-icon";
+import { Text } from "../text";
+import { ViewCartButtonProps } from "./types";
+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) => {
+  const { cartTotalText, onClick, isOpen, ...rest } = props;
+  return (
+    <Button
+      className={cx(baseClasses, "btn-small w-full border-border pl-6 pr-4 md:btn-medium")}
+      onClick={onClick}
+      {...rest}
+    >
+      <div className="flex w-full items-center justify-center gap-2">
+        <div className="flex flex-col items-center justify-center">
+          <Text className="footnote -mb-1 text-text-secondary sm:body3">
+            View cart
+          </Text>
+          <Text className="body3 font-bold md:body1" data-testid="cart-total">
+            {cartTotalText}
+          </Text>
+        </div>
+        <MaterialIcon
+          name="keyboard_arrow_up"
+          size={24}
+          fill={0}
+          className={cx(
+            "h-6 w-6 transition-transform",
+            isOpen ? "rotate-180" : "rotate-0"
+          )}
+        />
+      </div>
+    </Button>
+  )
+}
+
+export type { ViewCartButtonProps } from "./types";

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

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

package/src/hooks/use-body-scroll-lock.ts

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+
+/**
+ * A custom hook that locks the body scroll based on the `isOpen` and `hideScrollOnIsOpenFalse` flags.
+ *
+ * @param {boolean} isOpen - Determines if the scroll should be locked (hidden).
+ * @param {boolean} hideScrollOnIsOpenFalse - Determines if the scroll should be reset when `isOpen` is false.
+ */
+function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boolean) {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    // To avoid content shifting when the scrollbar appears/disappears
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+    document.body.style.marginRight = isOpen ? `${scrollbarWidth}px` : "unset";
+
+    // Set the body overflow style based on the `isOpen` and `hideScrollOnIsOpenFalse` values.
+    document.body.style.overflow = isOpen
+      ? "hidden"
+      : hideScrollOnIsOpenFalse
+        ? "unset"
+        : document.body.style.overflow;
+
+    // Cleanup function to reset body overflow when the component unmounts or dependencies change.
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, hideScrollOnIsOpenFalse]);
+}
+
+export default useBodyScrollLock;