@windstream/react-shared-components 0.0.22 → 0.0.23

package/src/components/list/types.ts

@@ -1,29 +1,29 @@
-import { CSSProperties, HTMLAttributes, ReactNode } from "react";
-
-export type ListType = "ul" | "ol";
-export type ListVariant = "default" | "unstyled";
-
-export type ListItem = {
-  id: string | number;
-  content: ReactNode;
-  className?: string;
-  [key: string]: any;
-};
-
-export interface ListProps
-  extends Omit<HTMLAttributes<HTMLUListElement | HTMLOListElement>, "type"> {
-  /** List type - unordered (ul) or ordered (ol) */
-  type?: ListType;
-  /** Array of items to render */
-  items?: ListItem[];
-  /** Custom className for the list */
-  className?: string;
-  /** Custom item renderer function */
-  renderItem?: (item: ListItem, index: number) => ReactNode;
-  /** Children to render instead of items */
-  children?: ReactNode;
-  /** Additional styling options */
-  variant?: ListVariant;
-  /** Custom styles */
-  style?: CSSProperties;
-}
+import { CSSProperties, HTMLAttributes, ReactNode } from "react";
+
+export type ListType = "ul" | "ol";
+export type ListVariant = "default" | "unstyled";
+
+export type ListItem = {
+  id: string | number;
+  content: ReactNode;
+  className?: string;
+  [key: string]: any;
+};
+
+export interface ListProps
+  extends Omit<HTMLAttributes<HTMLUListElement | HTMLOListElement>, "type"> {
+  /** List type - unordered (ul) or ordered (ol) */
+  type?: ListType;
+  /** Array of items to render */
+  items?: ListItem[];
+  /** Custom className for the list */
+  className?: string;
+  /** Custom item renderer function */
+  renderItem?: (item: ListItem, index: number) => ReactNode;
+  /** Children to render instead of items */
+  children?: ReactNode;
+  /** Additional styling options */
+  variant?: ListVariant;
+  /** Custom styles */
+  style?: CSSProperties;
+}

package/src/components/material-icon/index.tsx

@@ -1,44 +1,44 @@
-import React from "react";
-import { cx } from "../../utils";
-import type { IconProps } from "./types";
-
-const MaterialIcon: React.FC<IconProps> = ({
-  name,
-  fill = 0,
-  opticalSize = "48dp",
-  weight = "200",
-  emphasis = 145,
-  size = 24,
-  color = "currentColor",
-  style = {},
-  className,
-  onClick,
-  dataTestId,
-}) => {
-  const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
-
-  const combinedStyle: React.CSSProperties = {
-    fontVariationSettings,
-    fontSize: `${size}px`,
-    fontFamily: "'Material Symbols Rounded'",
-    color: color || "currentColor",
-    ...style,
-  };
-
-  return (
-    <span
-      style={combinedStyle}
-      className={cx("material-symbols-rounded", className)}
-      onClick={onClick}
-      data-testid={dataTestId}
-    >
-      {name}
-    </span>
-  );
-};
-
-export { MaterialIcon };
-
-MaterialIcon.displayName = "MaterialIcon";
-
-export type { IconProps, IconName } from "./types";
+import React from "react";
+import { cx } from "../../utils";
+import type { IconProps } from "./types";
+
+const MaterialIcon: React.FC<IconProps> = ({
+  name,
+  fill = 0,
+  opticalSize = "48dp",
+  weight = "200",
+  emphasis = 145,
+  size = 24,
+  color = "currentColor",
+  style = {},
+  className,
+  onClick,
+  dataTestId,
+}) => {
+  const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
+
+  const combinedStyle: React.CSSProperties = {
+    fontVariationSettings,
+    fontSize: `${size}px`,
+    fontFamily: "'Material Symbols Rounded'",
+    color: color || "currentColor",
+    ...style,
+  };
+
+  return (
+    <span
+      style={combinedStyle}
+      className={cx("material-symbols-rounded", className)}
+      onClick={onClick}
+      data-testid={dataTestId}
+    >
+      {name}
+    </span>
+  );
+};
+
+export { MaterialIcon };
+
+MaterialIcon.displayName = "MaterialIcon";
+
+export type { IconProps, IconName } from "./types";

package/src/components/material-icon/types.ts

@@ -1,31 +1,31 @@
-import type { CSSProperties } from "react";
-import {
-  emphasis,
-  iconNameList,
-  OpticalSizes,
-  sizes,
-  weights,
-} from "./constants";
-
-export type Fill = 1 | 0;
-
-export type IconName = (typeof iconNameList)[number];
-
-export type OpticalSize = (typeof OpticalSizes)[number];
-export type Weight = (typeof weights)[number];
-export type Emphasis = (typeof emphasis)[number];
-export type Size = (typeof sizes)[number];
-
-export type IconProps = {
-  name: IconName;
-  fill?: Fill;
-  opticalSize?: OpticalSize;
-  weight?: Weight;
-  emphasis?: Emphasis;
-  size?: Size;
-  color?: string;
-  style?: CSSProperties;
-  className?: string;
-  onClick?: () => void;
-  dataTestId?: string;
-};
+import type { CSSProperties } from "react";
+import {
+  emphasis,
+  iconNameList,
+  OpticalSizes,
+  sizes,
+  weights,
+} from "./constants";
+
+export type Fill = 1 | 0;
+
+export type IconName = (typeof iconNameList)[number];
+
+export type OpticalSize = (typeof OpticalSizes)[number];
+export type Weight = (typeof weights)[number];
+export type Emphasis = (typeof emphasis)[number];
+export type Size = (typeof sizes)[number];
+
+export type IconProps = {
+  name: IconName;
+  fill?: Fill;
+  opticalSize?: OpticalSize;
+  weight?: Weight;
+  emphasis?: Emphasis;
+  size?: Size;
+  color?: string;
+  style?: CSSProperties;
+  className?: string;
+  onClick?: () => void;
+  dataTestId?: string;
+};

package/src/components/skeleton/index.tsx

@@ -1,61 +1,61 @@
-import { FC } from "react";
-import { SkeletonProps } from "./types";
-
-export const Skeleton: FC<SkeletonProps> = ({ className = "", count = 1 }) => {
-  return (
-    <div className="animate-pulse space-y-4">
-      {Array.from({ length: count }).map((_, index) => (
-        <div
-          key={index}
-          className={`h-8 rounded bg-skeleton-bg-start ${className}`}
-          style={{ opacity: 1 - index * 0.1 }}
-        />
-      ))}
-    </div>
-  );
-};
-
-Skeleton.displayName = "Skeleton";
-
-export type { SkeletonProps };
-
-export const PageSkeleton: FC = () => {
-  return (
-    <div
-      className="item-center mx-auto mt-4 flex animate-pulse flex-col justify-center gap-10 px-1 md:max-w-[48.375rem] md:gap-16 md:px-0"
-      data-testid="generic-skeleton"
-    >
-      {/* Title */}
-      <div
-        className="h-12 w-full rounded-lg bg-skeleton-bg-start"
-        data-testid="title"
-      />
-
-      {/* Subtitle */}
-      <div className="item-center flex flex-col gap-6" data-testid="subtitle">
-        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
-        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
-      </div>
-
-      {/* Content */}
-      <div className="item-center flex flex-col gap-3" data-testid="content">
-        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
-        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
-      </div>
-
-      {/* Additional Information */}
-      <div
-        className="item-center flex flex-col gap-6"
-        data-testid="additional-info"
-      >
-        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
-        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
-      </div>
-
-      {/* CTA button */}
-      <div className="item-center flex justify-center" data-testid="cta-button">
-        <div className="h-12 w-full rounded-lg bg-skeleton-bg-end md:w-[22.125rem]" />
-      </div>
-    </div>
-  );
-};
+import { FC } from "react";
+import { SkeletonProps } from "./types";
+
+export const Skeleton: FC<SkeletonProps> = ({ className = "", count = 1 }) => {
+  return (
+    <div className="animate-pulse space-y-4">
+      {Array.from({ length: count }).map((_, index) => (
+        <div
+          key={index}
+          className={`h-8 rounded bg-skeleton-bg-start ${className}`}
+          style={{ opacity: 1 - index * 0.1 }}
+        />
+      ))}
+    </div>
+  );
+};
+
+Skeleton.displayName = "Skeleton";
+
+export type { SkeletonProps };
+
+export const PageSkeleton: FC = () => {
+  return (
+    <div
+      className="item-center mx-auto mt-4 flex animate-pulse flex-col justify-center gap-10 px-1 md:max-w-[48.375rem] md:gap-16 md:px-0"
+      data-testid="generic-skeleton"
+    >
+      {/* Title */}
+      <div
+        className="h-12 w-full rounded-lg bg-skeleton-bg-start"
+        data-testid="title"
+      />
+
+      {/* Subtitle */}
+      <div className="item-center flex flex-col gap-6" data-testid="subtitle">
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
+      </div>
+
+      {/* Content */}
+      <div className="item-center flex flex-col gap-3" data-testid="content">
+        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
+        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
+      </div>
+
+      {/* Additional Information */}
+      <div
+        className="item-center flex flex-col gap-6"
+        data-testid="additional-info"
+      >
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
+      </div>
+
+      {/* CTA button */}
+      <div className="item-center flex justify-center" data-testid="cta-button">
+        <div className="h-12 w-full rounded-lg bg-skeleton-bg-end md:w-[22.125rem]" />
+      </div>
+    </div>
+  );
+};

package/src/components/text/types.ts

@@ -1,45 +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;
-}
+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/contentful/blocks/floating-banner/FloatingBanner.stories.tsx

@@ -1,23 +1,34 @@
-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 = {};
+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: {
+    title: "test",
+    enableHeading: false,
+    subtitle: "Test",
+    icon: "https://images.ctfassets.net/lefc0joykfg0/xt7XD2oCXK79H8pyMyMb8/18aead59bc97d624b5bd91b2f9f04352/banner_call_icon.svg",
+    description: <p>test</p>,
+    cta: null,
+    disclaimer: <p>test</p>,
+    background: "green",
+    color: "white",
+    maxWidth: true,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,11 +1,99 @@
-import { FloatingBannerProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const FloatingBanner: React.FC<{ fields: FloatingBannerProps }> = ({
-  fields,
-}) => {
-  return <Text>FloatingBanner</Text>;
-};
-
-export default FloatingBanner;
+import React from "react";
+import { FloatingBannerProps, ThemeKey } from "./types";
+
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { Button } from "@shared/contentful/blocks/button";
+
+export const FloatingBanner: React.FC<FloatingBannerProps> = ({
+  title,
+  subtitle,
+  description,
+  disclaimer,
+  icon,
+  cta,
+  background = "navy",
+  color = "white",
+  enableHeading,
+  maxWidth = true,
+}) => {
+  const textColorClasses: Record<ThemeKey, string> = {
+    blue: "text-[#07B2E2]",
+    green: "text-[#26B170]",
+    yellow: "text-[#F5FF1E]",
+    purple: "text-[#931D69]",
+    white: "text-white",
+    navy: "text-[#00002D]",
+  };
+
+  const bgColorClasses: Record<ThemeKey, string> = {
+    blue: "bg-[#07B2E2]",
+    green: "bg-[#26B170]",
+    yellow: "bg-[#F5FF1E]",
+    purple: "bg-[#931D69]",
+    white: "bg-white",
+    navy: "bg-[#00002D]",
+  };
+
+  return (
+    <div className="component-container">
+      <div
+        className={`mx-5 my-8 lg:mx-20 lg:my-12 lg:rounded-[40px] xl:mx-auto ${maxWidth ? "mx-auto max-w-120" : ""}`}
+      >
+        <div
+          className={`flex flex-col rounded-[28px] px-5 py-7 lg:flex-row lg:rounded-[40px] lg:px-16 lg:py-9 ${bgColorClasses[background]} ${textColorClasses[color]} `}
+        >
+          {icon && (
+            <div className="floating-banner-icon mb-5 flex justify-center lg:mb-0 lg:items-center">
+              <div className="h-[80px] w-[80px] overflow-hidden">
+                <NextImage
+                  width={80}
+                  height={80}
+                  alt="icon"
+                  src={icon}
+                ></NextImage>
+              </div>
+            </div>
+          )}
+          <div className="flex flex-col justify-center lg:mx-5">
+            {title && (
+              <Text
+                as={enableHeading ? "h1" : "h2"}
+                className={`heading2 mb-3 w-[90%] text-center lg:text-left`}
+              >
+                {title}
+              </Text>
+            )}
+            {subtitle && (
+              <Text
+                as={"h3"}
+                className={`heading3 mb-3 text-center lg:text-left`}
+              >
+                {subtitle}
+              </Text>
+            )}
+            {description && (
+              <Text as="div" className="body1 w-[90%] text-center lg:text-left">
+                {description}
+              </Text>
+            )}
+          </div>
+          {cta && (
+            <div className="mt-5 flex justify-center lg:mt-0 lg:w-[500px] lg:items-center">
+              <Button {...cta}></Button>
+            </div>
+          )}
+        </div>
+        {disclaimer && (
+          <div>
+            <Text as="div" className="body3 mt-3 text-center">
+              {disclaimer}
+            </Text>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FloatingBanner;

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

@@ -1 +1,22 @@
-export type FloatingBannerProps = {};
+import React from "react";
+
+export type FloatingBannerProps = {
+  title?: string;
+  enableHeading?: boolean;
+  subtitle?: string;
+  icon?: string;
+  description?: React.ReactNode;
+  cta?: any | null;
+  disclaimer?: React.ReactNode;
+  background?: "green" | "navy" | "white";
+  color?: "navy" | "white";
+  maxWidth?: boolean;
+};
+
+export type ThemeKey =
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "white"
+  | "navy";