@arc-ui/community-components 0.1.0

package/src/components/CopyLead/components/Button/Button.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import { ButtonV2 } from "@arc-ui/components/dist/ButtonV2";
+
+import { CopyLeadButton } from "../../types";
+
+import styles from "../../CopyLead.module.css";
+
+export const Button: React.FC<CopyLeadButton> = (props) => (
+  <div className={styles.buttonContainer}>
+    <ButtonV2 isFullWidth buttonStyle="secondary" {...props} />
+  </div>
+);

package/src/components/CopyLead/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/src/components/CopyLead/components/Column/Column.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import styles from "../../CopyLead.module.css";
+
+export const Column: React.FC<ColumnProps> = ({ children }) => (
+  <div className={styles.col}>{children}</div>
+);
+
+interface ColumnProps {
+  children?: React.ReactNode;
+}

package/src/components/CopyLead/components/Column/index.ts

@@ -0,0 +1 @@
+export { Column } from "./Column";

package/src/components/CopyLead/components/Container/Container.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import classNames from "classnames";
+
+import styles from "../../CopyLead.module.css";
+
+export const Container: React.FC<ContainerProps> = ({
+  children,
+  isReverseOrder,
+  type,
+  alignment,
+}) => (
+  <div
+    data-testid="copy-lead-container"
+    className={classNames(
+      styles.container,
+      styles[`container--${type}`],
+      styles[`container--align-${alignment}`],
+      {
+        [styles[`container--reverse`]]: isReverseOrder,
+      },
+    )}
+  >
+    {children}
+  </div>
+);
+
+interface ContainerProps {
+  type: "media" | "content";
+  alignment: "top" | "center";
+  isReverseOrder?: boolean;
+  children?: React.ReactNode;
+}

package/src/components/CopyLead/components/Container/index.ts

@@ -0,0 +1 @@
+export { Container } from "./Container";

package/src/components/CopyLead/components/IconList/IconList.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { Heading } from "@arc-ui/components/dist/Heading";
+import { Icon } from "@arc-ui/components/dist/Icon";
+import { Text } from "@arc-ui/components/dist/Text";
+import { VerticalSpace } from "@arc-ui/components/dist/VerticalSpace";
+
+import { CopyLeadListItem } from "../../types";
+
+import styles from "../../CopyLead.module.css";
+import classNames from "classnames";
+
+export const IconList: React.FC<IconListProps> = ({
+  listItems,
+  isLgScreen,
+}) => (
+  <ul className={styles.list}>
+    {listItems.map(({ icon, heading, text }) => (
+      <li
+        key={heading}
+        className={classNames(styles.listItem, {
+          [styles.listItemCentered]: !text,
+        })}
+      >
+        <div className={styles.listItemIconContainer}>
+          <Icon color="brand" icon={icon} size={isLgScreen ? 64 : 48} />
+        </div>
+        <div className={styles.listItemTextContainer}>
+          <Heading level="3" size="s">
+            {heading}
+          </Heading>
+
+          {text && (
+            <>
+              <VerticalSpace size="8" sizeL="16" />
+
+              <Text>{text}</Text>
+            </>
+          )}
+        </div>
+      </li>
+    ))}
+  </ul>
+);
+
+interface IconListProps {
+  isLgScreen: boolean;
+  listItems: CopyLeadListItem[];
+}

package/src/components/CopyLead/components/IconList/index.ts

@@ -0,0 +1 @@
+export { IconList } from "./IconList";

package/src/components/CopyLead/components/Image/Image.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { Image as ArcImage } from "@arc-ui/components/dist/Image";
+
+import styles from "../../CopyLead.module.css";
+import { CopyLeadImage } from "../../types";
+
+export const Image: React.FC<CopyLeadImage> = ({ sources, ...props }) => (
+  <div className={styles.imgWrapper}>
+    <ArcImage fadeOnLoad {...props}>
+      {sources &&
+        sources.map((source) => (
+          <ArcImage.Source key={source.srcSet} {...source} />
+        ))}
+    </ArcImage>
+  </div>
+);

package/src/components/CopyLead/components/Image/index.ts

@@ -0,0 +1 @@
+export { Image } from "./Image";

package/src/components/CopyLead/components/MediaContent/MediaContent.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import {
+  Heading as ArcHeading,
+  type HeadingLevel,
+} from "@arc-ui/components/dist/Heading";
+
+import { Text } from "@arc-ui/components/dist/Text";
+import { VerticalSpace } from "@arc-ui/components/dist/VerticalSpace";
+
+import styles from "../../CopyLead.module.css";
+
+export const MediaContent: React.FC<MediaContentProps> = ({
+  heading,
+  headingLevel,
+  children,
+}) => (
+  <div className={styles.mediaContainer}>
+    <ArcHeading level={headingLevel} size="xl">
+      {heading}
+    </ArcHeading>
+
+    {children && (
+      <div className={styles.content}>
+        <VerticalSpace size="24" />
+        <Text size="l">{children}</Text>
+      </div>
+    )}
+  </div>
+);
+
+interface MediaContentProps {
+  heading: string;
+  headingLevel?: HeadingLevel;
+  children?: string;
+}

package/src/components/CopyLead/components/MediaContent/index.ts

@@ -0,0 +1 @@
+export { MediaContent } from "./MediaContent";

package/src/components/CopyLead/index.ts

@@ -0,0 +1 @@
+export { CopyLead, type CopyLeadProps } from "./CopyLead";

package/src/components/CopyLead/templates/Content/Content.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+import { ArcSizeBreakpointsL, ArcSizeBreakpointsM } from "@arc-ui/tokens-arc";
+
+import { useMediaQuery } from "@arc-ui/components/dist/use-media-query";
+
+import {
+  SectionHeading,
+  type SectionHeadingProps,
+} from "../../../../components/SectionHeading";
+
+import { type CopyLeadButton, type CopyLeadListItem } from "../../types";
+
+import { IconList } from "../../components/IconList";
+import { Button } from "../../components/Button/Button";
+import { Container } from "../../components/Container";
+import { Column } from "../../components/Column";
+
+export const ContentTemplate: React.FC<ContentTemplateProps> = ({
+  button,
+  heading,
+  headingLevel,
+  listItems,
+  content,
+}) => {
+  const isMinWidthArcBreakpointM = useMediaQuery(
+    `(min-width: ${ArcSizeBreakpointsM})`,
+  );
+
+  const isMinWidthArcBreakpointL = useMediaQuery(
+    `(min-width: ${ArcSizeBreakpointsL})`,
+  );
+
+  return (
+    <Container type="content" alignment="top">
+      <Column>
+        <SectionHeading
+          heading={heading}
+          headingLevel={headingLevel}
+          content={content}
+        />
+
+        {button && isMinWidthArcBreakpointM && <Button {...button} />}
+      </Column>
+      <Column>
+        <IconList listItems={listItems} isLgScreen={isMinWidthArcBreakpointL} />
+
+        {button && !isMinWidthArcBreakpointM && <Button {...button} />}
+      </Column>
+    </Container>
+  );
+};
+
+interface ContentTemplateProps extends SectionHeadingProps {
+  content: string;
+  listItems: CopyLeadListItem[];
+  button?: CopyLeadButton;
+}

package/src/components/CopyLead/templates/Content/index.ts

@@ -0,0 +1 @@
+export { ContentTemplate } from "./Content";

package/src/components/CopyLead/templates/Media/Media.tsx

@@ -0,0 +1,104 @@
+import React, { Suspense, useEffect, useState } from "react";
+
+import { ArcSizeBreakpointsL, ArcSizeBreakpointsXl } from "@arc-ui/tokens-arc";
+
+import { Columns } from "@arc-ui/components/dist/Columns";
+import { useMediaQuery } from "@arc-ui/components/dist/use-media-query";
+
+import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+import { type VideoPlayerProps } from "@arc-ui/components/dist/VideoPlayer";
+
+import {
+  type CopyLeadButton,
+  type CopyLeadImage,
+  type CopyLeadListItem,
+} from "../../types";
+
+import { MediaContent } from "../../components/MediaContent";
+import { Image } from "../../components/Image";
+import { IconList } from "../../components/IconList";
+import { Button } from "../../components/Button/Button";
+import { Container } from "../../components/Container";
+import { Column } from "../../components/Column";
+
+const VideoPlayer = React.lazy(() =>
+  import("@arc-ui/components/dist/VideoPlayer").then(({ VideoPlayer }) => ({
+    default: VideoPlayer,
+  })),
+);
+
+export const MediaTemplate: React.FC<MediaTemplateProps> = ({
+  button,
+  heading,
+  headingLevel,
+  listItems,
+  video,
+  image,
+  content,
+  isReverseOrder = false,
+}) => {
+  const [isClient, setIsClient] = useState(false);
+
+  const isMinWidthArcBreakpointL = useMediaQuery(
+    `(min-width: ${ArcSizeBreakpointsL})`,
+  );
+
+  const isMinWidthArcBreakpointXl = useMediaQuery(
+    `(min-width: ${ArcSizeBreakpointsXl})`,
+  );
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return (
+    <div>
+      {!isMinWidthArcBreakpointXl && (
+        <Columns>
+          <Columns.Col span={12} spanM={9}>
+            <MediaContent heading={heading} headingLevel={headingLevel}>
+              {content}
+            </MediaContent>
+          </Columns.Col>
+        </Columns>
+      )}
+      <Container
+        type="media"
+        isReverseOrder={isReverseOrder}
+        alignment={!isMinWidthArcBreakpointXl ? "top" : "center"}
+      >
+        <Column>
+          {isMinWidthArcBreakpointXl && (
+            <MediaContent heading={heading}>{content}</MediaContent>
+          )}
+
+          <IconList
+            listItems={listItems}
+            isLgScreen={isMinWidthArcBreakpointL}
+          />
+
+          {button && <Button {...button} />}
+        </Column>
+        <Column>
+          {video && isClient && (
+            <Suspense fallback={null}>
+              <VideoPlayer {...video} />
+            </Suspense>
+          )}
+          {image && !video && <Image {...image} />}
+        </Column>
+      </Container>
+    </div>
+  );
+};
+
+interface MediaTemplateProps {
+  heading: string;
+  headingLevel?: HeadingLevel;
+  listItems: CopyLeadListItem[];
+  content?: string;
+  isReverseOrder?: boolean;
+  button?: CopyLeadButton;
+  image?: CopyLeadImage;
+  video?: VideoPlayerProps;
+}

package/src/components/CopyLead/templates/Media/index.ts

@@ -0,0 +1 @@
+export { MediaTemplate } from "./Media";

package/src/components/CopyLead/types/copy-lead-button.ts

@@ -0,0 +1,6 @@
+import { type ButtonProps } from "@arc-ui/components/dist/types/components/Button/Button";
+
+export type CopyLeadButton = Pick<
+  ButtonProps,
+  "label" | "onClick" | "href" | "target" | "ariaLabel"
+>;

package/src/components/CopyLead/types/copy-lead-image.ts

@@ -0,0 +1,19 @@
+import {
+  type ImageSourceProps,
+  type ImageProps as ArcImageProps,
+} from "@arc-ui/components/dist/types/components/Image/Image";
+
+export interface CopyLeadImage
+  extends Pick<
+    ArcImageProps,
+    | "src"
+    | "alt"
+    | "loading"
+    | "sizes"
+    | "srcSet"
+    | "width"
+    | "height"
+    | "fadeOnLoad"
+  > {
+  sources?: Pick<ImageSourceProps, "media" | "sizes" | "srcSet">[];
+}

package/src/components/CopyLead/types/copy-lead-list-item.ts

@@ -0,0 +1,7 @@
+import { type ArcIcon } from "@arc-ui/components/dist/types/types/arc-icon";
+
+export interface CopyLeadListItem {
+  icon: ArcIcon;
+  heading: string;
+  text?: string;
+}

package/src/components/CopyLead/types/copy-lead-transcript-link.ts

@@ -0,0 +1,6 @@
+export interface CopyLeadTranscriptLink {
+  url: string;
+  text: string;
+  fileSize: string;
+  format: string;
+}

package/src/components/CopyLead/types/index.ts

@@ -0,0 +1,4 @@
+export { type CopyLeadImage } from "./copy-lead-image";
+export { type CopyLeadListItem } from "./copy-lead-list-item";
+export { type CopyLeadTranscriptLink } from "./copy-lead-transcript-link";
+export { type CopyLeadButton } from "./copy-lead-button";

package/src/components/DownloadList/DownloadList.module.css

@@ -0,0 +1,7 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+@media (--arc-custom-media-min-width-m-px) {
+  .headingContainer {
+    max-width: 75%;
+  }
+}

package/src/components/DownloadList/DownloadList.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { Text } from "@arc-ui/components/dist/Text";
+import { VerticalSpace } from "@arc-ui/components/dist/VerticalSpace";
+import { Heading, type HeadingLevel } from "@arc-ui/components/dist/Heading";
+import { Download, type DownloadProps } from "@arc-ui/components/dist/Download";
+
+import styles from "./DownloadList.module.css";
+
+export const DownloadList: React.FC<DownloadListProps> = ({
+  heading,
+  headingLevel = "2",
+  content,
+  downloads,
+}) => {
+  return (
+    <>
+      <div className={styles.headingContainer}>
+        <Heading size="xl" level={headingLevel}>
+          {heading}
+        </Heading>
+        <VerticalSpace size="24" />
+        <Text size="l">{content}</Text>
+      </div>
+      <VerticalSpace size="40" />
+      {downloads.map((props, i) => (
+        <>
+          <Download {...props} />{" "}
+          {i !== downloads.length - 1 && <VerticalSpace size="16" />}
+        </>
+      ))}
+    </>
+  );
+};
+
+export interface DownloadListProps {
+  heading: string;
+  content: string;
+  downloads: DownloadProps[];
+  headingLevel?: HeadingLevel;
+}

package/src/components/DownloadList/index.ts

@@ -0,0 +1 @@
+export { DownloadList, type DownloadListProps } from "./DownloadList";

package/src/components/FeaturePost/FeaturePost.module.css

@@ -0,0 +1,58 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.labelDate {
+  padding-top: var(--sem-space-padding-20);
+}
+
+.authorContent {
+  padding-left: var(--sem-space-padding-70);
+}
+
+.googlePlayButtonWrapper {
+  padding: var(--sem-space-padding-70) 0 0;
+}
+
+.imgWrapper {
+  border-radius: var(--sem-border-radius-s);
+  overflow: hidden;
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .googlePlayButtonWrapper {
+    padding: 0 0 0 var(--sem-space-padding-70);
+  }
+}
+
+@media (--arc-custom-media-min-width-m-px) {
+  .featurePost {
+    display: flex;
+    gap: 24px;
+  }
+
+  .featurePostReversed {
+    flex-direction: row-reverse;
+  }
+
+  .contentContainer {
+    padding: 0 var(--sem-space-padding-110) 0 0;
+  }
+
+  .col {
+    flex: 0 1 auto;
+    width: 50%;
+  }
+
+  .labelDate {
+    padding-left: var(--sem-space-padding-70);
+  }
+}
+
+@media (--arc-custom-media-min-width-xl-px) {
+  .featurePost {
+    gap: 32px;
+  }
+
+  .contentContainer {
+    padding: 0 var(--sem-space-padding-130) 0 0;
+  }
+}