@windstream/react-shared-components 0.0.1

package/src/components/modal/index.tsx

@@ -0,0 +1,168 @@
+import React, { useEffect, useMemo, useState } from "react";
+import ReactModal from "react-modal";
+import { Transition } from "react-transition-group";
+
+import { MaterialIcon } from "../material-icon";
+import { cx } from "../../utils";
+import useBodyScrollLock from "../../hooks/use-body-scroll-lock";
+
+import { ModalProps, Size, Shape, Animation } from "./types";
+import { Button } from "../button";
+
+const Modal: React.FC<ModalProps> = ({
+  size = "md",
+  shape = "default",
+  animation = "popper",
+  centered,
+  title,
+  isOpen,
+  children,
+  bodyStyle,
+  className,
+  bodyClassName,
+  portalClassName,
+  overlayClassName,
+  closeButtonClassName,
+  closeWrapperClassName,
+  onRequestClose,
+  parentSelector,
+  hideScrollOnIsOpenFalse = true,
+  hideCloseButton = false,
+  ...modalProps
+}: ModalProps) => {
+  // Use the custom hook to lock/unlock the body scroll when the modal is open/closed.
+  useBodyScrollLock(isOpen, hideScrollOnIsOpenFalse);
+
+  // Animation cannot run at the same time as the modal opening
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  useEffect(() => {
+    // Run animation one frame after rendering the modal
+    setIsTransitioning(isOpen);
+  }, [isOpen]);
+
+  const parent = useMemo(() => {
+    /* istanbul ignore next */ if (typeof document === "undefined") return null;
+    let parent = document.querySelector("main") || document.body;
+    if (parentSelector)
+      parent = document.querySelector(parentSelector) || document.body;
+
+    return parent;
+  }, [parentSelector]);
+
+  if (!parent) return null;
+
+  // Don't render anything when modal is closed
+  if (!isOpen) {
+    return null;
+  }
+
+  const getSizeClasses = (size: Size) => {
+    const sizeMap = {
+      xl: "inset-[5%] min-h-fit",
+      lg: "inset-[10%] min-h-fit",
+      md: "inset-[15%] min-h-fit",
+      sm: "top-[18%] w-[640px]",
+      xs: "w-[calc(100%-30px)]",
+    };
+    return sizeMap[size];
+  };
+
+  const getAnimationClasses = (animation: Animation, state: string) => {
+    if (animation === "popper") {
+      const baseClasses = "transition-transform duration-300";
+      if (state === "entering" || state === "entered") {
+        return `${baseClasses} opacity-100 ${state === "entered" ? "translate-y-0 pointer-events-auto" : ""}`;
+      }
+      if (state === "exiting" || state === "exited") {
+        return `${baseClasses} opacity-0 translate-y-[-18px] duration-[180ms]`;
+      }
+      return `${baseClasses} opacity-0 translate-y-[-18px]`;
+    }
+    if (animation === "bottomSheet") {
+      const baseClasses = "transition-transform duration-200 ease-in-out";
+      if (state === "entering" || state === "entered") {
+        return `${baseClasses} opacity-100 ${state === "entered" ? "translate-y-0 pointer-events-auto" : ""}`;
+      }
+      if (state === "exiting" || state === "exited") {
+        return `${baseClasses} opacity-0 translate-y-full duration-[180ms]`;
+      }
+      return `${baseClasses} opacity-0 translate-y-full`;
+    }
+    return "";
+  };
+
+  return (
+    <Transition enter exit in={isTransitioning} timeout={0}>
+      {(state: string) => (
+        <ReactModal
+          ariaHideApp={false}
+          isOpen={isOpen}
+          onRequestClose={onRequestClose}
+          closeTimeoutMS={0}
+          parentSelector={() => parent}
+          className={cx(
+            "absolute bg-white overflow-auto outline-none min-w-[150px] rounded-lg max-w-[calc(100vw-30px)]",
+            getSizeClasses(size),
+            shape === "rounded" && "rounded-3xl",
+            centered && "top-0 translate-y-[calc(50vh-50%)]",
+            getAnimationClasses(animation, state),
+            className
+          )}
+          portalClassName={cx("z-80", portalClassName)}
+          overlayClassName={cx(
+            "z-80 fixed inset-0 bg-black/50 flex items-center justify-center pb-[300px]",
+            overlayClassName
+          )}
+          {...modalProps}
+        >
+          {!hideCloseButton && (
+            <div className={cx(closeWrapperClassName)}>
+              <Button
+                className={cx(
+                  "absolute right-0 top-0 float-right h-6 cursor-pointer p-5 text-text",
+                  closeButtonClassName
+                )}
+                onClick={onRequestClose as () => void}
+                data-testid="close-button"
+                data-track-element-name="modal_close_button"
+                data-track-click-text="Close Modal"
+                data-track-element-clicked="modal"
+              >
+                <MaterialIcon
+                  name="close"
+                  size={24}
+                />
+              </Button>
+            </div>
+          )}
+
+          {title ? (
+            <div
+              className={cx(
+                "px-[7px] py-[7px] border-b border-border-secondary-on-bg-fill text-text",
+              )}
+            >
+              {title}
+            </div>
+          ) : null}
+          <div
+            className={cx("p-5", bodyClassName)}
+            style={bodyStyle}
+            data-testid={modalProps["data-testid"]}
+            data-cy={modalProps["data-cy"]}
+          >
+            {children}
+          </div>
+        </ReactModal>
+      )}
+    </Transition>
+  );
+};
+
+export { Modal };
+
+Modal.displayName = "Modal";
+
+export type { ModalProps, Size, Shape, Animation };
+

package/src/components/modal/types.ts

@@ -0,0 +1,24 @@
+import { Props as RModalProps } from "react-modal";
+
+export type Size = "xl" | "lg" | "md" | "sm" | "xs";
+export type Shape = "rounded" | "default";
+export type Animation = "popper" | "bottomSheet";
+
+type OwnProps = {
+  size?: Size;
+  shape?: Shape;
+  title?: string;
+  bodyClassName?: string | null | undefined;
+  closeWrapperClassName?: string | null | undefined;
+  closeButtonClassName?: string | null | undefined;
+  bodyStyle?: React.CSSProperties;
+  centered?: boolean;
+  hideScrollOnIsOpenFalse?: boolean;
+  parentSelector?: string;
+  animation?: Animation;
+  hideCloseButton?: boolean;
+  ["data-testid"]?: string;
+  ["data-cy"]?: string;
+};
+
+export type ModalProps = OwnProps & RModalProps;

package/src/components/radio-button/RadioButton.stories.tsx

@@ -0,0 +1,307 @@
+import { RadioButton } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+const meta: Meta<typeof RadioButton> = {
+  title: "Components/RadioButton",
+  component: RadioButton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A radio button component with support for labels, subtext, error states, and custom variants.",
+      },
+    },
+  },
+  argTypes: {
+    name: {
+      control: { type: "text" },
+      description: "Radio button group name",
+    },
+    value: {
+      control: { type: "text" },
+      description: "Radio button value",
+    },
+    checked: {
+      control: { type: "boolean" },
+      description: "Whether the radio button is checked",
+    },
+    label: {
+      control: { type: "text" },
+      description: "Label text",
+    },
+    subText: {
+      control: { type: "text" },
+      description: "Subtext displayed below the label",
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["circle"],
+      description: "Radio button variant",
+    },
+    hasError: {
+      control: { type: "boolean" },
+      description: "Show error state",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable the radio button",
+    },
+  },
+  args: {
+    name: "radio-group",
+    value: "option1",
+    checked: false,
+    label: "Radio Button Label",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default radio button
+export const Default: Story = {
+  args: {},
+};
+
+// Checked radio button
+export const Checked: Story = {
+  args: {
+    checked: true,
+    label: "Checked Radio Button",
+  },
+};
+
+// Unchecked radio button
+export const Unchecked: Story = {
+  args: {
+    checked: false,
+    label: "Unchecked Radio Button",
+  },
+};
+
+// With label
+export const WithLabel: Story = {
+  args: {
+    label: "Option with Label",
+  },
+};
+
+// With subtext
+export const WithSubtext: Story = {
+  args: {
+    label: "Premium Plan",
+    subText: "$29.99/month - Best value",
+  },
+};
+
+// Error state
+export const Error: Story = {
+  args: {
+    label: "Radio Button with Error",
+    hasError: true,
+  },
+};
+
+// Disabled state
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Radio Button",
+    disabled: true,
+  },
+};
+
+// Disabled checked
+export const DisabledChecked: Story = {
+  args: {
+    checked: true,
+    label: "Disabled Checked Radio Button",
+    disabled: true,
+  },
+};
+
+// Radio group
+export const RadioGroup: Story = {
+  render: () => {
+    const [selected, setSelected] = useState("option1");
+    return (
+      <div className="space-y-3">
+        <RadioButton
+          name="plan"
+          value="option1"
+          checked={selected === "option1"}
+          onChange={() => setSelected("option1")}
+          label="Basic Plan"
+          subText="$9.99/month"
+        />
+        <RadioButton
+          name="plan"
+          value="option2"
+          checked={selected === "option2"}
+          onChange={() => setSelected("option2")}
+          label="Standard Plan"
+          subText="$19.99/month"
+        />
+        <RadioButton
+          name="plan"
+          value="option3"
+          checked={selected === "option3"}
+          onChange={() => setSelected("option3")}
+          label="Premium Plan"
+          subText="$29.99/month"
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Radio button group where only one option can be selected.",
+      },
+    },
+  },
+};
+
+// With error in group
+export const GroupWithError: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string | undefined>();
+    return (
+      <div className="space-y-3">
+        <RadioButton
+          name="payment"
+          value="credit"
+          checked={selected === "credit"}
+          onChange={(val) =>
+            setSelected(
+              typeof val === "string" || typeof val === "number"
+                ? String(val)
+                : undefined
+            )
+          }
+          label="Credit Card"
+          hasError={!selected}
+        />
+        <RadioButton
+          name="payment"
+          value="debit"
+          checked={selected === "debit"}
+          onChange={(val) =>
+            setSelected(
+              typeof val === "string" || typeof val === "number"
+                ? String(val)
+                : undefined
+            )
+          }
+          label="Debit Card"
+          hasError={!selected}
+        />
+        <RadioButton
+          name="payment"
+          value="paypal"
+          checked={selected === "paypal"}
+          onChange={(val) =>
+            setSelected(
+              typeof val === "string" || typeof val === "number"
+                ? String(val)
+                : undefined
+            )
+          }
+          label="PayPal"
+          hasError={!selected}
+        />
+        {!selected && (
+          <p className="text-sm text-red-600">Please select a payment method</p>
+        )}
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Radio button group with error state when no option is selected.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">States</h3>
+        <div className="space-y-3">
+          <RadioButton
+            name="demo1"
+            value="unchecked"
+            checked={false}
+            label="Unchecked"
+          />
+          <RadioButton
+            name="demo2"
+            value="checked"
+            checked={true}
+            label="Checked"
+          />
+          <RadioButton
+            name="demo3"
+            value="disabled"
+            checked={false}
+            label="Disabled"
+            disabled
+          />
+          <RadioButton
+            name="demo4"
+            value="disabled-checked"
+            checked={true}
+            label="Disabled Checked"
+            disabled
+          />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Subtext</h3>
+        <div className="space-y-3">
+          <RadioButton
+            name="demo5"
+            value="plan1"
+            checked={true}
+            label="Basic Plan"
+            subText="$9.99/month"
+          />
+          <RadioButton
+            name="demo6"
+            value="plan2"
+            checked={false}
+            label="Premium Plan"
+            subText="$29.99/month - Best value"
+          />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Error State</h3>
+        <RadioButton
+          name="demo7"
+          value="error"
+          checked={false}
+          label="Radio Button with Error"
+          hasError
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all radio button variants and states.",
+      },
+    },
+  },
+};
+

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

@@ -0,0 +1,73 @@
+import React from "react";
+
+import { cx } from "@shared/utils";
+
+import { RadioButtonProps } from "./types";
+import { Button } from "@shared/components/button";
+
+
+export const RadioButton: React.FC<RadioButtonProps> = props => {
+  const {
+    name,
+    value,
+    label,
+    subText,
+    checked,
+    onChange,
+    className,
+    variant = "circle",
+    hasError = false,
+    labelProps = {},
+    "data-cy": dataCy,
+    labelClassName = "",
+    disabled,
+    ...rest
+  } = props;
+
+  const handleChange = () => onChange?.(value || name);
+
+  return (
+    <label
+      htmlFor={name}
+      className={cx("flex items-center", className)}
+      data-cy={dataCy}
+      {...labelProps}
+    >
+      <input
+        className="hidden"
+        type="radio"
+        name={name}
+        value={value}
+        checked={checked}
+        readOnly
+        disabled={disabled}
+        {...rest}
+      />
+      <Button
+        type="button"
+        onClick={handleChange}
+        disabled={disabled}
+        className={cx(
+          "border-border-secondary-on-bg-fill bg-bg mr-3 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full border-[1px] border-solid outline-offset-4",
+          checked && "border-border-brand border-[1px] border-solid",
+          disabled && "opacity-50"
+        )}
+      >
+        {checked && <div className="bg-bg-fill-brand h-[0.875rem] w-[0.875rem] rounded-full" />}
+      </Button>
+      <Button
+        type="button"
+        onClick={handleChange}
+        disabled={disabled}
+        tabIndex={label ? 0 : -1}
+      >
+        <div className={cx("text-body2 font-normal", labelClassName)}>{label}</div>
+        <div className="text-text-info text-body1">{subText}</div>
+      </Button>
+    </label>
+  );
+};
+
+RadioButton.displayName = "RadioButton";
+
+export type { RadioButtonProps };

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

@@ -0,0 +1,22 @@
+import { InputHTMLAttributes, LabelHTMLAttributes, ReactNode } from "react";
+
+type OwnProps = {
+    name: string;
+    value?: string | number;
+    checked?: boolean;
+    onChange?: (newVal?: string | number) => void;
+    label?: string | ReactNode;
+    subText?: string;
+    className?: string;
+    labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
+    variant?: "circle";
+    hasError?: boolean;
+    "data-cy"?: string;
+    labelClassName?: string;
+  };
+  export type RadioButtonProps = OwnProps &
+    Omit<
+      InputHTMLAttributes<HTMLInputElement>,
+      "onChange" | "value" | "name" | "checked"
+    >;
+