@windstream/react-shared-components 0.0.18 → 0.0.21

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

@@ -1,10 +1,8 @@
 import React from "react";
-
-import { cx } from "@shared/utils";
-
 import { RadioButtonProps } from "./types";
-import { Button } from "@shared/components/button";
 
+import { Button } from "@shared/components/button";
+import { cx } from "@shared/utils";
 
 export const RadioButton: React.FC<RadioButtonProps> = props => {
   const {
@@ -48,12 +46,14 @@ export const RadioButton: React.FC<RadioButtonProps> = props => {
         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",
+          "mr-3 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full border-[1px] border-solid border-border-secondary-on-bg-fill bg-bg outline-offset-4",
+          checked && "border-[1px] border-solid border-border-brand",
           disabled && "opacity-50"
         )}
       >
-        {checked && <div className="bg-bg-fill-brand h-[0.875rem] w-[0.875rem] rounded-full" />}
+        {checked && (
+          <div className="h-[0.875rem] w-[0.875rem] rounded-full bg-bg-fill-brand" />
+        )}
       </Button>
       <Button
         type="button"
@@ -61,8 +61,10 @@ export const RadioButton: React.FC<RadioButtonProps> = props => {
         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>
+        <div className={cx("text-body2 font-normal", labelClassName)}>
+          {label}
+        </div>
+        <div className="text-body1 text-text-info">{subText}</div>
       </Button>
     </label>
   );

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

@@ -1,22 +1,21 @@
 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"
-    >;
-  
+  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"
+  >;

package/src/components/see-more/SeeMore.stories.tsx

@@ -1,6 +1,6 @@
 import { SeeMore } 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 SeeMore> = {
@@ -52,8 +52,8 @@ export const Expanded: Story = {
     ],
     text: "See details",
   },
-  render: (args) => (
-    <div className="w-full max-w-md">
+  render: args => (
+    <div className="max-w-md w-full">
       <SeeMore {...args} />
     </div>
   ),
@@ -65,8 +65,8 @@ export const Collapsed: Story = {
     list: ["Item 1", "Item 2", "Item 3"],
     text: "Show more",
   },
-  render: (args) => (
-    <div className="w-full max-w-md">
+  render: args => (
+    <div className="max-w-md w-full">
       <SeeMore {...args} />
     </div>
   ),
@@ -84,8 +84,8 @@ export const WithChecklistItems: Story = {
     ],
     text: "View all features",
   },
-  render: (args) => (
-    <div className="w-full max-w-md">
+  render: args => (
+    <div className="max-w-md w-full">
       <SeeMore {...args} />
     </div>
   ),
@@ -97,8 +97,8 @@ export const CustomButtonText: Story = {
     list: ["Detail 1", "Detail 2", "Detail 3"],
     text: "Learn more",
   },
-  render: (args) => (
-    <div className="w-full max-w-md">
+  render: args => (
+    <div className="max-w-md w-full">
       <SeeMore {...args} />
     </div>
   ),
@@ -121,8 +121,8 @@ export const LongList: Story = {
     ],
     text: "See all features",
   },
-  render: (args) => (
-    <div className="w-full max-w-md">
+  render: args => (
+    <div className="max-w-md w-full">
       <SeeMore {...args} />
     </div>
   ),
@@ -134,8 +134,8 @@ export const SingleItem: Story = {
     list: ["Single checklist item"],
     text: "See details",
   },
-  render: (args) => (
-    <div className="w-full max-w-md">
+  render: args => (
+    <div className="max-w-md w-full">
       <SeeMore {...args} />
     </div>
   ),
@@ -144,7 +144,7 @@ export const SingleItem: 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">Default</h3>
         <SeeMore list={["Item 1", "Item 2", "Item 3"]} />
@@ -179,4 +179,3 @@ export const AllVariants: Story = {
     },
   },
 };
-

package/src/components/see-more/index.tsx

@@ -1,36 +1,40 @@
 import { useState } from "react";
-import { SeeMoreProps } from "@shared/components/see-more/types";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Collapse } from "@shared/components/collapse";
-import { Checklist } from "@shared/components/checklist";
+
 import { Button } from "@shared/components/button";
+import { Checklist } from "@shared/components/checklist";
+import { Collapse } from "@shared/components/collapse";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { SeeMoreProps } from "@shared/components/see-more/types";
 
-export const SeeMore: React.FC<SeeMoreProps> = (props) => {
-	const { list, text } = props
-	const [showDetails, setShowDetails] = useState<boolean>(true);
-	return (
-		<div className="mt-3">
-			<Button
-				type="button"
-				className="flex items-center gap-2 text-base font-semibold text-gray-900"
-				aria-expanded={showDetails}
-				onClick={(e) => { e.stopPropagation(); setShowDetails(v => !v); }}
-			>
-				<span>{text || 'See details'}</span>
-				<MaterialIcon
-					name={showDetails ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}
-					fill={1}
-					size={24}
-				/>
-			</Button>
+export const SeeMore: React.FC<SeeMoreProps> = props => {
+  const { list, text } = props;
+  const [showDetails, setShowDetails] = useState<boolean>(true);
+  return (
+    <div className="mt-3">
+      <Button
+        type="button"
+        className="flex items-center gap-2 text-base font-semibold text-gray-900"
+        aria-expanded={showDetails}
+        onClick={e => {
+          e.stopPropagation();
+          setShowDetails(v => !v);
+        }}
+      >
+        <span>{text || "See details"}</span>
+        <MaterialIcon
+          name={showDetails ? "keyboard_arrow_down" : "keyboard_arrow_up"}
+          fill={1}
+          size={24}
+        />
+      </Button>
 
-			<Collapse open={showDetails}>
-				<div className="pt-1">
-					<Checklist listItemClassName="body3" items={list} />
-				</div>
-			</Collapse>
-		</div>
-	);
+      <Collapse open={showDetails}>
+        <div className="pt-1">
+          <Checklist listItemClassName="body3" items={list} />
+        </div>
+      </Collapse>
+    </div>
+  );
 };
 
 SeeMore.displayName = "SeeMore";

package/src/components/see-more/types.ts

@@ -1,4 +1,4 @@
 export type SeeMoreProps = {
-  list: string[],
-  text?: string
-}
+  list: string[];
+  text?: string;
+};

package/src/components/select/Select.stories.tsx

@@ -1,6 +1,6 @@
 import { Select } 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 Select> = {
@@ -221,7 +221,8 @@ export const WithFiltering: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Select with custom filtering options that ignore case and accents for better search experience.",
+        story:
+          "Select with custom filtering options that ignore case and accents for better search experience.",
       },
     },
   },

package/src/components/select/index.tsx

@@ -1,9 +1,8 @@
 import React, { useMemo } from "react";
-import ReactSelect, { createFilter } from "react-select";
-
 import { cx } from "../../utils";
 import { Text } from "../text";
 import { FilterOptions, SelectOption, SelectProps } from "./types";
+import ReactSelect, { createFilter } from "react-select";
 
 export const Select: React.FC<SelectProps> = React.memo(
   ({
@@ -57,7 +56,11 @@ export const Select: React.FC<SelectProps> = React.memo(
           ),
         indicatorSeparator: () => "hidden",
         dropdownIndicator: ({ selectProps }: any) =>
-          isCustomStyle ? (selectProps.value ? "hidden" : "block") : `block text-icon-default ${hasError ? "text-icon-critical":""}`,
+          isCustomStyle
+            ? selectProps.value
+              ? "hidden"
+              : "block"
+            : `block text-icon-default ${hasError ? "text-icon-critical" : ""}`,
         singleValue: () =>
           cx(
             isCustomStyle
@@ -73,9 +76,7 @@ export const Select: React.FC<SelectProps> = React.memo(
               : "bg-white text-text-secondary",
             !isSelected && "hover:bg-bg-surface-hover",
             !isSelected && isFocused && "bg-bg-surface-hover",
-            isCustomStyle
-              ? "text-body1 text-text"
-              : "",
+            isCustomStyle ? "text-body1 text-text" : "",
             !isCustomStyle || options[options.length - 1]?.label === label
               ? ""
               : "border-b border-border-brand"
@@ -107,7 +108,12 @@ export const Select: React.FC<SelectProps> = React.memo(
     return (
       <div className="w-full">
         {label && (
-          <label className={cx("block text-sm font-medium text-text-secondary mb-1", labelClassName)}>
+          <label
+            className={cx(
+              "mb-1 block text-sm font-medium text-text-secondary",
+              labelClassName
+            )}
+          >
             {label}
           </label>
         )}
@@ -126,19 +132,11 @@ export const Select: React.FC<SelectProps> = React.memo(
         />
 
         {error && (
-          <Text
-            className="mt-1 footnote text-text-critical"
-          >
-            {error}
-          </Text>
+          <Text className="footnote mt-1 text-text-critical">{error}</Text>
         )}
 
         {!error && helperText && (
-          <Text
-            className="mt-1 footnote text-text-info"
-          >
-            {helperText}
-          </Text>
+          <Text className="footnote mt-1 text-text-info">{helperText}</Text>
         )}
       </div>
     );

package/src/components/select/types.ts

@@ -31,4 +31,5 @@ export type OwnProps = {
   "data-testid"?: string;
 };
 
-export type SelectProps = OwnProps & Omit<ReactSelectProps<SelectOption>, "options" | "value" | "className">;
+export type SelectProps = OwnProps &
+  Omit<ReactSelectProps<SelectOption>, "options" | "value" | "className">;

package/src/components/select-plan-button/SelectPlanButton.stories.tsx

@@ -1,6 +1,6 @@
 import { SelectPlanButton } 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 SelectPlanButton> = {
@@ -51,7 +51,7 @@ export const WithSpeed: Story = {
 // Different speeds
 export const DifferentSpeeds: Story = {
   render: () => (
-    <div className="w-full max-w-md space-y-3">
+    <div className="max-w-md w-full space-y-3">
       <SelectPlanButton speed="100 Mbps" onSelect={() => {}} />
       <SelectPlanButton speed="250 Mbps" onSelect={() => {}} />
       <SelectPlanButton speed="500 Mbps" onSelect={() => {}} />
@@ -74,10 +74,19 @@ export const Interactive: Story = {
       alert(`Selected plan: ${speed}`);
     };
     return (
-      <div className="w-full max-w-md space-y-3">
-        <SelectPlanButton speed="100 Mbps" onSelect={() => handleSelect("100 Mbps")} />
-        <SelectPlanButton speed="500 Mbps" onSelect={() => handleSelect("500 Mbps")} />
-        <SelectPlanButton speed="1 Gbps" onSelect={() => handleSelect("1 Gbps")} />
+      <div className="max-w-md w-full space-y-3">
+        <SelectPlanButton
+          speed="100 Mbps"
+          onSelect={() => handleSelect("100 Mbps")}
+        />
+        <SelectPlanButton
+          speed="500 Mbps"
+          onSelect={() => handleSelect("500 Mbps")}
+        />
+        <SelectPlanButton
+          speed="1 Gbps"
+          onSelect={() => handleSelect("1 Gbps")}
+        />
       </div>
     );
   },
@@ -93,10 +102,10 @@ export const Interactive: Story = {
 // In plan card
 export const InPlanCard: Story = {
   render: () => (
-    <div className="w-full max-w-sm rounded-lg border border-border-default p-6 space-y-4">
+    <div className="max-w-sm border-border-default w-full space-y-4 rounded-lg border p-6">
       <div>
         <h3 className="heading3 text-text">Standard Plan</h3>
-        <p className="body2 text-text-secondary mt-1">Perfect for families</p>
+        <p className="body2 mt-1 text-text-secondary">Perfect for families</p>
       </div>
       <div>
         <p className="heading2 text-text">$49.99</p>
@@ -122,7 +131,7 @@ export const InPlanCard: 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">Different Speeds</h3>
         <div className="space-y-3">
@@ -135,12 +144,12 @@ export const AllVariants: Story = {
       <div>
         <h3 className="mb-3 text-lg font-semibold">In Context</h3>
         <div className="grid grid-cols-2 gap-4">
-          <div className="rounded-lg border border-border-default p-4 space-y-3">
+          <div className="border-border-default space-y-3 rounded-lg border p-4">
             <h4 className="subheading1 text-text">Basic Plan</h4>
             <p className="body2 text-text-secondary">100 Mbps</p>
             <SelectPlanButton speed="100 Mbps" onSelect={() => {}} />
           </div>
-          <div className="rounded-lg border border-border-default p-4 space-y-3">
+          <div className="border-border-default space-y-3 rounded-lg border p-4">
             <h4 className="subheading1 text-text">Premium Plan</h4>
             <p className="body2 text-text-secondary">1 Gbps</p>
             <SelectPlanButton speed="1 Gbps" onSelect={() => {}} />
@@ -157,4 +166,3 @@ export const AllVariants: Story = {
     },
   },
 };
-

package/src/components/select-plan-button/index.tsx

@@ -1,21 +1,29 @@
-import { cx } from "@shared/utils"
-import { Button } from "../button"
-import { MaterialIcon } from "../material-icon"
-import { SelectPlanButtonProps } from "./types"
-const className = "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 bg-bg-fill-brand text-text-brand-on-bg-fill enabled:hover:bg-bg-fill-brand-hover focus:ring-bg-fill-brand"
-export const SelectPlanButton:React.FC<SelectPlanButtonProps> = ({ onSelect, speed }) => {
-  return <Button
-    onClick={onSelect}
-    className={cx(className,`w-full justify-between pl-5 pr-5`)}
-    data-track-element-name="speed_plan_select_button"
-    data-track-click-text={`Select plan speed ${speed}`}
-    data-track-element-clicked="speed_plan_card"
-  >
-    <span>Select plan</span>
-    <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-bg text-icon-brand">
-      <MaterialIcon name="chevron_right" fill={1} size={24} />
-    </span>
-  </Button>
-}
+import { Button } from "../button";
+import { MaterialIcon } from "../material-icon";
+import { SelectPlanButtonProps } from "./types";
 
-export type { SelectPlanButtonProps } from "./types";
+import { cx } from "@shared/utils";
+
+const className =
+  "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 bg-bg-fill-brand text-text-brand-on-bg-fill enabled:hover:bg-bg-fill-brand-hover focus:ring-bg-fill-brand";
+export const SelectPlanButton: React.FC<SelectPlanButtonProps> = ({
+  onSelect,
+  speed,
+}) => {
+  return (
+    <Button
+      onClick={onSelect}
+      className={cx(className, `w-full justify-between pl-5 pr-5`)}
+      data-track-element-name="speed_plan_select_button"
+      data-track-click-text={`Select plan speed ${speed}`}
+      data-track-element-clicked="speed_plan_card"
+    >
+      <span>Select plan</span>
+      <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-bg text-icon-brand">
+        <MaterialIcon name="chevron_right" fill={1} size={24} />
+      </span>
+    </Button>
+  );
+};
+
+export type { SelectPlanButtonProps } from "./types";

package/src/components/select-plan-button/types.ts

@@ -1,4 +1,4 @@
 export type SelectPlanButtonProps = {
   onSelect: () => void;
   speed: string;
-};
+};

package/src/components/skeleton/Skeleton.stories.tsx

@@ -1,6 +1,6 @@
-import { Skeleton, PageSkeleton } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
+import { PageSkeleton, Skeleton } from "./index";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Skeleton> = {
@@ -58,7 +58,7 @@ export const CustomStyling: Story = {
 // Different counts
 export const DifferentCounts: 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">Single Line</h4>
         <Skeleton count={1} />
@@ -102,7 +102,7 @@ export const PageSkeletonExample: Story = {
 // In card
 export const InCard: Story = {
   render: () => (
-    <div className="w-full max-w-sm rounded-lg border border-border-default p-6 space-y-4">
+    <div className="max-w-sm border-border-default w-full space-y-4 rounded-lg border p-6">
       <Skeleton count={1} className="h-6 w-3/4" />
       <Skeleton count={2} />
       <Skeleton count={1} className="h-10 w-full" />
@@ -120,8 +120,8 @@ export const InCard: Story = {
 // List skeleton
 export const ListSkeleton: Story = {
   render: () => (
-    <div className="w-full max-w-md space-y-3">
-      {[1, 2, 3, 4, 5].map((i) => (
+    <div className="max-w-md w-full space-y-3">
+      {[1, 2, 3, 4, 5].map(i => (
         <div key={i} className="flex items-center gap-3">
           <Skeleton count={1} className="h-12 w-12 rounded-full" />
           <div className="flex-1 space-y-2">
@@ -144,7 +144,7 @@ export const ListSkeleton: 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">Basic Skeleton</h3>
         <Skeleton count={3} />
@@ -155,7 +155,7 @@ export const AllVariants: Story = {
       </div>
       <div>
         <h3 className="mb-3 text-lg font-semibold">In Card</h3>
-        <div className="rounded-lg border border-border-default p-6 space-y-4">
+        <div className="border-border-default space-y-4 rounded-lg border p-6">
           <Skeleton count={1} className="h-6 w-3/4" />
           <Skeleton count={2} />
           <Skeleton count={1} className="h-10 w-full" />
@@ -163,7 +163,7 @@ export const AllVariants: Story = {
       </div>
       <div>
         <h3 className="mb-3 text-lg font-semibold">Page Skeleton</h3>
-        <div className="border border-border-default rounded p-4">
+        <div className="border-border-default rounded border p-4">
           <PageSkeleton />
         </div>
       </div>
@@ -177,4 +177,3 @@ export const AllVariants: Story = {
     },
   },
 };
-