@windstream/react-shared-components 0.0.17 → 0.0.20

package/src/contentful/blocks/accordion/Accordion.stories.tsx

@@ -0,0 +1,23 @@
+import { Accordion } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Contentful Blocks/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful accordion block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,7 +1,17 @@
 import { AccordionProps } from "./types";
 
+import { Accordion as AccordionComponent } from "@shared/components/accordion";
+import { Text } from "@shared/components/text";
+
 export const Accordion: React.FC<{ fields: AccordionProps }> = ({ fields }) => {
-  return <div>Accordion</div>;
+  return (
+    <div>
+      <Text>Accordion</Text>
+      <AccordionComponent title="Accordion">
+        <Text>Accordion</Text>
+      </AccordionComponent>
+    </div>
+  );
 };
 
 export default Accordion;

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

@@ -1 +1 @@
-export type AccordionProps = {} 
+export type AccordionProps = {};

package/src/contentful/blocks/button/Button.stories.tsx

@@ -0,0 +1,40 @@
+import { Button } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Button> = {
+  title: "Contentful Blocks/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful button block. Renders as solid (BrandButton) or text (Link).",
+      },
+    },
+  },
+  args: {
+    showButtonAs: "solid",
+    buttonVariant: "primary_brand",
+    buttonLabel: "Button",
+    buttonPrefix: "",
+    badge: "",
+    badgeIcon: "",
+    buttonIcon: "",
+    buttonIconPosition: "left",
+    href: "",
+    target: "_self",
+    anchorId: "",
+    preserveQueryParameters: false,
+    clickToOpen: "",
+    tabmodalNameToOpen: "",
+    preDefinedFunctionExecution: "",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,7 +1,9 @@
-import { BrandButton } from "@shared/components/brand-button";
-import { ButtonProps } from "./types";
 import React from "react";
+import { ButtonProps } from "./types";
+
+import { BrandButton } from "@shared/components/brand-button";
 import { Link } from "@shared/components/link";
+
 export const Button: React.FC<ButtonProps> = ({
   showButtonAs,
   buttonVariant,
@@ -19,27 +21,26 @@ export const Button: React.FC<ButtonProps> = ({
       variant={buttonVariant}
       text={buttonLabel}
       label={buttonPrefix}
-    // badge={badge}
-    // badgeIcon={badgeIcon}
-    // icon={buttonIcon}
-    // iconPosition={buttonIconPosition}
-    // href={href}
-    // target={target}
-    // preserveQueryParameters={preserveQueryParameters}
-    // clickToOpen={clickToOpen}
-    // tabmodalNameToOpen={tabmodalNameToOpen}
-    // preDefinedFunctionExecution={preDefinedFunctionExecution}
+      // 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 || ""}`}
+      className={`text-text-brand ${linkClassName || ""}`}
     >
       {buttonLabel}
     </Link>
   ) : null;
 };
 export default Button;
-

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

@@ -1,19 +1,19 @@
 export type ButtonProps = {
-    showButtonAs: "solid" | "text";
-    buttonVariant: "primary_brand" | "secondary" | "primary_inverse";
-    buttonLabel: string;
-    buttonPrefix: string;
-    badge: string;
-    badgeIcon: string;
-    buttonIcon: string;
-    buttonIconPosition: "left" | "right";
-    href: string;
-    target: "_self" | "_blank";
-    anchorId: string;
-    preserveQueryParameters: boolean;
-    clickToOpen: string;
-    tabmodalNameToOpen: string;
-    preDefinedFunctionExecution: string;
-    linkClassName?: string;
-    linkVariant?: "unstyled" | "default";
+  showButtonAs: "solid" | "text";
+  buttonVariant: "primary_brand" | "secondary" | "primary_inverse";
+  buttonLabel: string;
+  buttonPrefix: string;
+  badge: string;
+  badgeIcon: string;
+  buttonIcon: string;
+  buttonIconPosition: "left" | "right";
+  href: string;
+  target: "_self" | "_blank";
+  anchorId: string;
+  preserveQueryParameters: boolean;
+  clickToOpen: string;
+  tabmodalNameToOpen: string;
+  preDefinedFunctionExecution: string;
+  linkClassName?: string;
+  linkVariant?: "unstyled" | "default";
 };

package/src/contentful/blocks/callout/Callout.stories.tsx

@@ -0,0 +1,23 @@
+import { Callout } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Callout> = {
+  title: "Contentful Blocks/Callout",
+  component: Callout,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful callout block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,7 +1,15 @@
 import { CalloutProps } from "./types";
 
+import { BrandButton } from "@shared/components/brand-button";
+import { Text } from "@shared/components/text";
+
 export const Callout: React.FC<{ fields: CalloutProps }> = ({ fields }) => {
-  return <div>Callout</div>;
+  return (
+    <div>
+      <Text>Callout</Text>
+      <BrandButton label="Callout" />
+    </div>
+  );
 };
 
 export default Callout;

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

@@ -1 +1 @@
-export type CalloutProps = {} 
+export type CalloutProps = {};

package/src/contentful/blocks/cards/Cards.stories.tsx

@@ -0,0 +1,23 @@
+import { Cards } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Cards> = {
+  title: "Contentful Blocks/Cards",
+  component: Cards,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful cards block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,7 +1,13 @@
 import { CardsProps } from "./types";
 
+import { Text } from "@shared/components/text";
+
 export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
-  return <div>Cards</div>;
+  return (
+    <div>
+      <Text>Cards</Text>
+    </div>
+  );
 };
 
 export default Cards;

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

@@ -1 +1 @@
-export type CardsProps = {} 
+export type CardsProps = {};

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

@@ -0,0 +1,23 @@
+import { Carousel } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Carousel> = {
+  title: "Contentful Blocks/Carousel",
+  component: Carousel,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful carousel block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,7 +1,13 @@
 import { CarouselProps } from "./types";
 
+import { Text } from "@shared/components/text";
+
 export const Carousel: React.FC<{ fields: CarouselProps }> = ({ fields }) => {
-  return <div>Carousel</div>;
+  return (
+    <div>
+      <Text>Carousel</Text>
+    </div>
+  );
 };
 
 export default Carousel;

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

@@ -1 +1 @@
-export type CarouselProps = {}
+export type CarouselProps = {};

package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx

@@ -0,0 +1,46 @@
+import { CtaCallout } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof CtaCallout> = {
+  title: "Contentful Blocks/CtaCallout",
+  component: CtaCallout,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful CTA callout block with title, description, and optional button.",
+      },
+    },
+  },
+  args: {
+    title: "Call to Action",
+    subTitle: "Subtitle",
+    description: "Description text.",
+    background: "white",
+    button: {
+      showButtonAs: "solid",
+      buttonVariant: "primary_brand",
+      buttonLabel: "Learn More",
+      buttonPrefix: "",
+      badge: "",
+      badgeIcon: "",
+      buttonIcon: "",
+      buttonIconPosition: "left",
+      href: "",
+      target: "_self",
+      anchorId: "",
+      preserveQueryParameters: false,
+      clickToOpen: "",
+      tabmodalNameToOpen: "",
+      preDefinedFunctionExecution: "",
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

package/src/contentful/blocks/cta-callout/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { CtaCalloutProps, ThemeKey } from "./types";
+
 import { Text } from "@shared/components/text";
 import { Button } from "@shared/contentful/blocks/button";
 
@@ -26,7 +27,7 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
   return (
     <div className={`${bgColorClasses[background]} component-container`}>
       <div
-        className={`${maxWidth ? "mx-auto max-w-120" : ""} flex flex-col text-${color} px-5 py-16 lg:px-13 lg:py-24 `}
+        className={`${maxWidth ? "mx-auto max-w-120" : ""} flex flex-col text-${color} px-5 py-16 lg:px-13 lg:py-24`}
       >
         <Text
           as={enableHeading ? "h1" : "h2"}
@@ -36,19 +37,18 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
         </Text>
         <Text
           as="h3"
-          className={`subheading3 pt-2 lg:pt-3 lg:subheading1 text-${contentAlignment}`}
+          className={`subheading3 pt-2 lg:subheading1 lg:pt-3 text-${contentAlignment}`}
         >
           {subTitle}
         </Text>
-        <div className={`text-body1 pt-2 lg:pt-3 text-${descriptionAlignment}`}>
+        <div className={`pt-2 text-body1 lg:pt-3 text-${descriptionAlignment}`}>
           {description}
         </div>
-        <div className="pt-5 lg:pt-14 flex justify-center ">
+        <div className="flex justify-center pt-5 lg:pt-14">
           <Button {...button} />
         </div>
       </div>
     </div>
-   
   );
 };
 export default CtaCallout;

package/src/contentful/blocks/cta-callout/types.ts

@@ -1,22 +1,22 @@
 import React from "react";
 
 export type CtaCalloutProps = {
-    title?: string;
-    subTitle?: string;
-    enableHeading?: boolean;
-    color?: "navy" | "white";
-    background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
-    description?: React.ReactNode;
-    descriptionAlignment?: "center" | "left" | "right";
-    contentAlignment?: "center" | "left" | "right";
-    button?: any;
-    maxWidth?: boolean;
+  title?: string;
+  subTitle?: string;
+  enableHeading?: boolean;
+  color?: "navy" | "white";
+  background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
+  description?: React.ReactNode;
+  descriptionAlignment?: "center" | "left" | "right";
+  contentAlignment?: "center" | "left" | "right";
+  button?: any;
+  maxWidth?: boolean;
 };
 
 export type ThemeKey =
-    | "blue"
-    | "green"
-    | "yellow"
-    | "purple"
-    | "white"
-    | "navy";
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "white"
+  | "navy";

package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx

@@ -0,0 +1,23 @@
+import { FloatingBanner } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof FloatingBanner> = {
+  title: "Contentful Blocks/FloatingBanner",
+  component: FloatingBanner,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful floating banner block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

package/src/contentful/blocks/floating-banner/index.tsx

@@ -1,7 +1,11 @@
 import { FloatingBannerProps } from "./types";
 
-export const FloatingBanner: React.FC<{fields: FloatingBannerProps}> = ({ fields }) => {
-  return <div>FloatingBanner</div>;
+import { Text } from "@shared/components/text";
+
+export const FloatingBanner: React.FC<{ fields: FloatingBannerProps }> = ({
+  fields,
+}) => {
+  return <Text>FloatingBanner</Text>;
 };
 
 export default FloatingBanner;

package/src/contentful/blocks/floating-banner/types.ts

@@ -1 +1 @@
-export type FloatingBannerProps = {}
+export type FloatingBannerProps = {};

package/src/contentful/blocks/footer/Footer.stories.tsx

@@ -0,0 +1,30 @@
+import { Footer } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Footer> = {
+  title: "Contentful Blocks/Footer",
+  component: Footer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful footer block with body, links, copyrights, and terms.",
+      },
+    },
+  },
+  args: {
+    body: "Footer body content",
+    copyrights: "Company Name",
+    terms: "All rights reserved",
+    links: [],
+    bottomLinks: [],
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,6 +1,8 @@
 import React from "react";
 import { FooterProps } from "./types";
+
 import { Button } from "@shared/contentful/blocks/button";
+
 export const Footer: React.FC<FooterProps> = ({
   body,
   links,
@@ -17,10 +19,10 @@ export const Footer: React.FC<FooterProps> = ({
         <div>{body}</div>
         <div
           className={
-            "bg-white h-[1px] border-t-0 opacity-100 dark:opacity-50 my-8 lg:my-16"
+            "my-8 h-[1px] border-t-0 bg-white opacity-100 lg:my-16 dark:opacity-50"
           }
         />
-        <div className="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-4 py-8">
+        <div className="grid-1 grid gap-8 py-8 md:grid-cols-2 lg:grid-cols-4">
           {links?.map((link: any, index: number) => (
             <div key={`footer-link-group-${index}`}>
               <div className="site-links-group" key={`link-group-${index}`}>
@@ -31,13 +33,13 @@ export const Footer: React.FC<FooterProps> = ({
                       <div className="pt-3" key={`site-links-${_index}`}>
                         <Button {...site} />
                       </div>
-                    ),
+                    )
                   )}
                 </div>
               </div>
               <div
                 className={
-                  "bg-white h-[1px] border-t-0 opacity-100 dark:opacity-50 block md:hidden "
+                  "block h-[1px] border-t-0 bg-white opacity-100 md:hidden dark:opacity-50"
                 }
               />
             </div>
@@ -46,14 +48,14 @@ export const Footer: React.FC<FooterProps> = ({
 
         <div className="pt-8">
           <p className="copy-rights">{copyrights}</p>
-          <p className="terms-text text-sm font-normal ">
+          <p className="terms-text text-sm font-normal">
             &copy; {new Date().getFullYear()} {terms}
           </p>
           <ul className="bottom-links list-none">
             {bottomLinks?.map((link: any, index: number) => (
               <li
                 key={`links-${index}`}
-                className="relative float-left pl-[8px] first-of-type:pl-0 first-of-type:before:content-[''] before:content-['•'] before:absolute before:left-[3px] before:top-1/2 before:-translate-y-1/2 before:text-[14px]"
+                className="relative float-left pl-[8px] before:absolute before:left-[3px] before:top-1/2 before:-translate-y-1/2 before:text-[14px] before:content-['•'] first-of-type:pl-0 first-of-type:before:content-['']"
               >
                 <Button
                   {...link}
@@ -66,7 +68,6 @@ export const Footer: React.FC<FooterProps> = ({
         </div>
       </div>
     </div>
-   
   );
 };
 

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

@@ -1,9 +1,10 @@
 import React from "react";
+
 export type FooterProps = {
-    body: React.ReactNode;
-    links?: Array<any>;
-    bottomLinks?: Array<any>;
-    copyrights?: React.ReactNode;
-    terms?: string;
-    maxWidth?: boolean;
+  body: React.ReactNode;
+  links?: Array<any>;
+  bottomLinks?: Array<any>;
+  copyrights?: React.ReactNode;
+  terms?: string;
+  maxWidth?: boolean;
 };

package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx

@@ -0,0 +1,23 @@
+import { ImagePromoBar } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ImagePromoBar> = {
+  title: "Contentful Blocks/ImagePromoBar",
+  component: ImagePromoBar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful image promo bar block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};