@windstream/react-shared-components 0.0.70 → 0.0.71

package/dist/core.d.ts

@@ -57,15 +57,15 @@ type InputFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
 
 declare const InputField: ForwardRefRenderFunction<HTMLInputElement, InputFieldProps>;
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    state?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
-    size?: "slim" | "medium" | "large" | undefined;
+    state?: "error" | "default" | "filled" | "active" | "focus" | "hover" | undefined;
+    size?: "medium" | "large" | "slim" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
     prefixIconName?: "search" | "location_on" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
-    suffixIconName?: "visibility" | "visibility_off" | "lock" | undefined;
+    suffixIconName?: "visibility" | "lock" | "visibility_off" | undefined;
     suffixIconSize?: 20 | 24 | 40 | 48 | undefined;
     containerClassName?: string | undefined;
     prefixIconClassName?: string | undefined;

package/dist/index.d.ts

@@ -61,7 +61,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "location_on" | "search" | undefined;
+    prefixIconName?: "search" | "location_on" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
@@ -331,7 +331,7 @@ type ButtonCustomProps = {
 };
 type ButtonProps = ButtonCustomProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className">;
 
-declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Checklist: React__default.FC<ChecklistProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/contentful/blocks/button/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { ButtonProps } from "./types";
 
 import { BrandButton } from "@shared/components/brand-button";
+import { Button as CoreButton } from "@shared/components/button";
 import { Link } from "@shared/components/link";
 
 export const Button: React.FC<ButtonProps> = ({
@@ -17,7 +18,9 @@ export const Button: React.FC<ButtonProps> = ({
   fullWidth,
   preDefinedFunctionExecution,
   checkPlansJSX,
+  buttonClassName,
   onClick,
+  ...rest
 }) => {
   if (preDefinedFunctionExecution === "check availability") {
     return checkPlansJSX;
@@ -30,35 +33,52 @@ export const Button: React.FC<ButtonProps> = ({
     onClick?.(event);
   }
 
-  return showButtonAs === "solid" ? (
-    <BrandButton
-      id={anchorId}
-      variant={buttonVariant}
-      text={buttonLabel}
-      label={buttonPrefix}
-      fullWidth={fullWidth}
-      onClick={buttonClick}
-      // badge={badge}
-      // badgeIcon={badgeIcon}
-      // icon={buttonIcon}
-      // iconPosition={buttonIconPosition}
-      // href={href}
-      // target={target}
-      // preserveQueryParameters={preserveQueryParameters}
-      // clickToOpen={clickToOpen}
-      // tabmodalNameToOpen={tabmodalNameToOpen}
-      // preDefinedFunctionExecution={preDefinedFunctionExecution}
-    />
-  ) : showButtonAs === "text" ? (
-    <Link
-      href={href}
-      target={target}
-      variant={linkVariant || "default"}
-      className={`text-text-brand ${linkClassName || ""}`}
-      onClick={linkClick}
-    >
-      {buttonLabel}
-    </Link>
-  ) : null;
+  let CTA = (
+    <CoreButton onClick={buttonClick} className={buttonClassName} {...rest} />
+  );
+
+  switch (showButtonAs) {
+    case "solid":
+      CTA = (
+        <BrandButton
+          id={anchorId}
+          variant={buttonVariant}
+          text={buttonLabel}
+          label={buttonPrefix}
+          fullWidth={fullWidth}
+          onClick={buttonClick}
+          // badge={badge}
+          // badgeIcon={badgeIcon}
+          // icon={buttonIcon}
+          // iconPosition={buttonIconPosition}
+          // href={href}
+          // target={target}
+          // preserveQueryParameters={preserveQueryParameters}
+          // clickToOpen={clickToOpen}
+          // tabmodalNameToOpen={tabmodalNameToOpen}
+          // preDefinedFunctionExecution={preDefinedFunctionExecution}
+        />
+      );
+      break;
+    case "text":
+      CTA = (
+        <Link
+          href={href}
+          target={target}
+          variant={linkVariant || "default"}
+          className={`text-text-brand ${linkClassName || ""}`}
+          onClick={linkClick}
+        >
+          {buttonLabel}
+        </Link>
+      );
+      break;
+    case "unstyled": // For unstyled, we can use the CoreButton without any additional styling
+      break;
+    default: // For default, we can use the CoreButton without any additional styling
+      break;
+  }
+
+  return CTA;
 };
 export default Button;

package/src/contentful/blocks/button/types.ts

@@ -1,5 +1,5 @@
 export type ButtonProps = {
-  showButtonAs?: "solid" | "text";
+  showButtonAs?: "solid" | "text" | "unstyled";
   buttonVariant?: "primary_brand" | "secondary" | "primary_inverse";
   buttonLabel?: string;
   buttonPrefix?: string;
@@ -16,9 +16,11 @@ export type ButtonProps = {
   preDefinedFunctionExecution?: string;
   checkPlansJSX?: React.ReactNode;
   linkClassName?: string;
+  buttonClassName?: string;
   linkVariant?: "unstyled" | "default";
   fullWidth?: boolean;
   onClick?: (
     event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
   ) => void;
+  children?: React.ReactNode;
 };

package/src/contentful/blocks/carousel/Carousel.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta<typeof Carousel> = {
       },
     },
   },
-  args: {  },
+  args: {},
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx

@@ -1,6 +1,5 @@
 import React, { CSSProperties } from "react";
 
-import { Button as CoreButton } from "@shared/components/button";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
 import { Button } from "@shared/contentful/blocks/button";
@@ -60,11 +59,12 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
       style={{ anchorName: fullAnchorName } as CSSProperties}
       ref={ref}
     >
-      <CoreButton
+      <Button
         onClick={() => setIsOpen(prev => !prev)}
         aria-expanded={isOpen}
-        className="group body3 flex h-full items-center"
+        buttonClassName="group body3 flex h-full items-center"
         key={anchorId}
+        showButtonAs="unstyled"
       >
         <Text as="span" className="group-hover:underline">
           {title ?? null}
@@ -74,7 +74,7 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
           className="text-icon-info group-hover:opacity-50"
           name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
         />
-      </CoreButton>
+      </Button>
 
       <div
         className={cx(

package/src/contentful/blocks/navigation/index.tsx

@@ -3,7 +3,6 @@ import { DesktopLinkGroups } from "./desktop-link-groups.tsx";
 import { MobileLinkGroups } from "./mobile-link-groups.tsx";
 import { NavigationProps } from "./types";
 
-import { Button } from "@shared/components/button";
 import { CallButton } from "@shared/components/call-button";
 import { Input } from "@shared/components/input";
 import { MaterialIcon } from "@shared/components/material-icon";
@@ -198,9 +197,13 @@ const MobileMenu = (props: NavigationProps) => {
 
   return (
     <div>
-      <Button className="flex" onClick={() => setIsOpen(true)}>
+      <ContentfulButton
+        showButtonAs="unstyled"
+        buttonClassName="flex"
+        onClick={() => setIsOpen(true)}
+      >
         <MaterialIcon name="menu" />
-      </Button>
+      </ContentfulButton>
       {isOpen ? (
         <div className="fixed bottom-0 left-0 right-0 top-0 z-[90] h-full w-full bg-scrim-bg-modal"></div>
       ) : null}
@@ -226,9 +229,13 @@ const MobileMenu = (props: NavigationProps) => {
               </CallButton>
             </div>
             <div>
-              <Button onClick={closeMenu} className="focus-item flex">
+              <ContentfulButton
+                showButtonAs="unstyled"
+                buttonClassName="focus-item flex"
+                onClick={closeMenu}
+              >
                 <MaterialIcon name="close" />
-              </Button>
+              </ContentfulButton>
             </div>
           </div>
           <MobileSearchInput

package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Button as CoreButton } from "@shared/components/button";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { Button } from "@shared/contentful/blocks/button";
 import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
@@ -44,18 +43,19 @@ export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
 
   return (
     <>
-      <CoreButton
+      <Button
         onClick={() => setIsOpen(prev => !prev)}
         aria-expanded={isOpen}
-        className="label3 flex h-11 w-full items-center px-4"
+        buttonClassName="label3 flex h-11 w-full items-center px-4"
         key={anchorId}
+        showButtonAs="unstyled"
       >
         {title ?? null}
         <MaterialIcon
           weight="700"
           name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
         />
-      </CoreButton>
+      </Button>
       {isOpen && subMenu.length > 0 && <RenderSubMenu items={subMenu} />}
     </>
   );

package/src/contentful/blocks/primary-hero/index.tsx

@@ -37,7 +37,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {title && (
               <Text
                 as={showAsHeading ? "h1" : "h2"}
-                className="heading2 font-bold lg:heading1"
+                className="heading2 lg:heading1"
               >
                 {title}
               </Text>