@purpurds/content-block 5.9.0

package/src/content-block.tsx

@@ -0,0 +1,124 @@
+import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+import { Badge } from "@purpurds/badge";
+import { CtaLink } from "@purpurds/cta-link";
+import { Heading, HeadingTagType } from "@purpurds/heading";
+import { IconCheckmark } from "@purpurds/icon";
+import { Paragraph } from "@purpurds/paragraph";
+import c from "classnames/bind";
+
+import styles from "./content-block.module.scss";
+import { ContentBlockGroup } from "./content-block-group";
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-content-block";
+
+type Cta = {
+  href: string;
+  text: string;
+};
+
+export type ContentBlockProps = {
+  ["data-testid"]?: string;
+  className?: string;
+  negative?: boolean;
+  image?: ReactNode;
+  video?: ReactNode;
+  tagline?: string;
+  ctas?: Cta[];
+  usp?: string[];
+  title?: string;
+  headingTag?: HeadingTagType;
+  headingVariant?: "title-100" | "title-200" | "title-300";
+  onCtaClick?: (cta: Cta) => void;
+  children?: ReactNode;
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+export const ContentBlock = ({
+  ["data-testid"]: dataTestId,
+  className,
+  negative,
+  image,
+  video,
+  tagline,
+  title,
+  ctas,
+  usp,
+  headingTag = "h2",
+  headingVariant = "title-300",
+  onCtaClick,
+  children,
+  ...props
+}: ContentBlockProps) => {
+  const classes = cx([
+    className,
+    rootClassName,
+    {
+      [`${rootClassName}--negative`]: negative,
+    },
+  ]);
+
+  return (
+    <div data-testid={dataTestId} className={classes} {...props}>
+      <div className={cx(`${rootClassName}__section`)}>
+        {video ? (
+          <div className={cx(`${rootClassName}__video-wrapper`)}>{video}</div>
+        ) : (
+          <div className={cx(`${rootClassName}__image-wrapper`)}>{image}</div>
+        )}
+      </div>
+      <div className={cx(`${rootClassName}__section`)}>
+        <div className={cx(`${rootClassName}__content-wrapper`)}>
+          {tagline ? (
+            <Badge variant="special" className={cx(`${rootClassName}__badge`)}>
+              {tagline}
+            </Badge>
+          ) : null}
+
+          {title && 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>
+                    </li>
+                  )
+              )}
+            </ul>
+          ) : null}
+          {ctas && ctas.length > 0 && (
+            <div className={cx(`${rootClassName}__links`)}>
+              {ctas.map(
+                (cta, index) =>
+                  cta.href && (
+                    <CtaLink
+                      key={cta.text + cta.href}
+                      href={cta.href}
+                      variant={index === 0 ? "primary" : "secondary"}
+                      negative={negative}
+                      onClick={() => onCtaClick?.(cta)}
+                    >
+                      {cta.text}
+                    </CtaLink>
+                  )
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ContentBlock.Group = ContentBlockGroup;
+ContentBlock.displayName = "ContentBlock";

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}