@purpurds/content-block 6.12.5 → 7.1.0

package/src/content-block.tsx

@@ -1,6 +1,5 @@
 import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
 import { Badge } from "@purpurds/badge";
-import { CtaAnchorProps, CtaLink } from "@purpurds/cta-link";
 import { Heading, HeadingTagType } from "@purpurds/heading";
 import { IconCheckmark } from "@purpurds/icon/checkmark";
 import { Paragraph } from "@purpurds/paragraph";
@@ -12,23 +11,17 @@ import { ContentBlockGroup } from "./content-block-group";
 const cx = c.bind(styles);
 const rootClassName = "purpur-content-block";
 
-type Cta = Omit<CtaAnchorProps, "href" | "children" | "variant" | "negative" | "iconOnly"> & {
-  href: string;
-  text: string;
-};
-
 export type ContentBlockProps = {
   ["data-testid"]?: string;
   negative?: boolean;
   image?: ReactNode;
   video?: ReactNode;
   tagline?: string;
-  ctas?: Cta[];
-  usp?: string[];
+  actions?: ReactNode;
+  listItems?: string[];
   title?: string;
   headingTag?: HeadingTagType;
   headingVariant?: "title-100" | "title-200" | "title-300";
-  onCtaClick?: (cta: Cta) => void;
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
 export const ContentBlock = ({
@@ -38,11 +31,10 @@ export const ContentBlock = ({
   video,
   tagline,
   title,
-  ctas,
-  usp,
+  actions,
+  listItems,
   headingTag = "h2",
   headingVariant = "title-300",
-  onCtaClick,
   children,
   ...props
 }: ContentBlockProps) => {
@@ -71,47 +63,26 @@ export const ContentBlock = ({
             </Badge>
           ) : null}
 
-          {title && title.trim() && (
+          {title?.trim() && (
             <Heading variant={headingVariant} tag={headingTag} negative={negative}>
               {title}
             </Heading>
           )}
           <div className={cx(`${rootClassName}__content`)}>{children}</div>
-          {usp?.length ? (
-            <ul className={cx(`${rootClassName}__usp-list`)}>
-              {usp.map(
-                (point) =>
-                  point && (
-                    <li className={cx(`${rootClassName}__usp-list-item`)} key={point}>
-                      <IconCheckmark
-                        size="xs"
-                        className={cx(`${rootClassName}__usp-list-item-icon`)}
-                      />
-                      <Paragraph negative={negative}>{point}</Paragraph>
+          {!!listItems?.length && (
+            <ul className={cx(`${rootClassName}__list`)}>
+              {listItems.map(
+                (item) =>
+                  item && (
+                    <li className={cx(`${rootClassName}__list-item`)} key={item}>
+                      <IconCheckmark size="xs" className={cx(`${rootClassName}__list-item-icon`)} />
+                      <Paragraph negative={negative}>{item}</Paragraph>
                     </li>
                   )
               )}
             </ul>
-          ) : null}
-          {ctas && ctas.length > 0 && (
-            <div className={cx(`${rootClassName}__links`)}>
-              {ctas.map(
-                ({ text, href, ...ctaProps }, index) =>
-                  href && (
-                    <CtaLink
-                      key={text + href}
-                      href={href}
-                      variant={index === 0 ? "primary" : "secondary"}
-                      negative={negative}
-                      onClick={() => onCtaClick?.({ text, href, ...ctaProps })}
-                      {...ctaProps}
-                    >
-                      {text}
-                    </CtaLink>
-                  )
-              )}
-            </div>
           )}
+          {actions && <div className={cx(`${rootClassName}__actions`)}>{actions}</div>}
         </div>
       </div>
     </div>