@arc-ui/community-components 0.1.0

package/src/components/FeaturePost/FeaturePost.tsx

@@ -0,0 +1,203 @@
+import React from "react";
+import classNames from "classnames";
+import { isDate, format } from "date-fns";
+
+import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+
+import { ArcSizeBreakpointsM } from "@arc-ui/tokens-arc";
+
+import { AppButton } from "@arc-ui/components/dist/AppButton";
+import { Grid } from "@arc-ui/components/dist/Grid";
+import { ButtonV2 } from "@arc-ui/components/dist/ButtonV2";
+import { Heading, 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 { useMediaQuery } from "@arc-ui/components/dist/use-media-query";
+import { type VideoPlayerProps } from "@arc-ui/components/dist/VideoPlayer";
+
+import { Author } from "../Author";
+
+import {
+  type FeaturePostAppButtonFooter,
+  type FeaturePostCtaFooter,
+  type FeaturePostImage,
+} from "./types";
+
+import styles from "./FeaturePost.module.css";
+import { MediaContent } from "./components/MediaContent/MediaContent";
+
+/**
+ * Use `FeaturePost` to direct traffic towards an article, case study, or product information page, or to a 3rd part App Store provider. Where the component links to an article page, the author attribution can be given here. The `FeaturePost` must be supported by an image, and in future, the component will support embedded video as well.
+ * */
+export const FeaturePost: React.FC<FeaturePostProps> = ({
+  heading,
+  headingLevel = "2",
+  label,
+  image,
+  content,
+  footer,
+  video,
+  isReverseOrder = false,
+  ...props
+}) => {
+  const isMinWidthArcBreakpointM = useMediaQuery(
+    `(min-width: ${ArcSizeBreakpointsM})`,
+  );
+
+  return (
+    <div
+      data-testid="feature-post"
+      className={classNames(styles.featurePost, {
+        [styles.featurePostReversed]: isReverseOrder,
+      })}
+      {...filterDataAttrs(props)}
+    >
+      <div className={styles.col}>
+        <div className={styles.contentContainer}>
+          {label && (
+            <Grid isGutterless isFluid>
+              <Grid.Row align="baseline">
+                <Grid.Col xs={12} m="auto">
+                  <Heading size="xxs">{label.text.toUpperCase()}</Heading>
+                </Grid.Col>
+                <Grid.Col xs={12} m="auto">
+                  <div className={styles.labelDate}>
+                    <Text size="xs" tone="muted">
+                      {isDate(label.date) ? (
+                        <time
+                          dateTime={format(label.date as Date, "yyyy-MM-dd")}
+                        >
+                          {format(label.date as Date, "LLLL d, yyyy")}
+                        </time>
+                      ) : (
+                        <span>{label.date as string}</span>
+                      )}
+                    </Text>
+                  </div>
+                </Grid.Col>
+              </Grid.Row>
+              <VerticalSpace size="24" />
+            </Grid>
+          )}
+
+          <Heading level={headingLevel} size="xl">
+            {heading}
+          </Heading>
+
+          {!isMinWidthArcBreakpointM && (
+            <div data-testid="mobile-img">
+              <VerticalSpace size="40" />
+
+              <MediaContent image={image} video={video} />
+            </div>
+          )}
+
+          <VerticalSpace size="40" />
+
+          <Text size="l">{content}</Text>
+
+          {footer?.type === "cta" && (
+            <>
+              {footer.author && (
+                <>
+                  <VerticalSpace size="24" />
+                  <Author
+                    name={footer.author.name}
+                    title={footer.author.title!}
+                    avatar={footer.author.avatar}
+                  />
+                </>
+              )}
+              <VerticalSpace size="40" />
+
+              <ButtonV2 buttonStyle="secondary" {...footer.button} />
+            </>
+          )}
+
+          {footer?.type === "appButton" && (
+            <>
+              <VerticalSpace size="40" />
+              <Grid isGutterless isFluid>
+                <Grid.Row>
+                  {footer.appStore && (
+                    <Grid.Col xs={12} s="auto">
+                      <AppButton
+                        type="apple-app-store"
+                        screenReaderText={footer.appStore.screenReaderText}
+                        url={footer.appStore.url}
+                      />
+                    </Grid.Col>
+                  )}
+                  {footer.googlePlay && (
+                    <Grid.Col xs={12} s="auto">
+                      <div className={styles.googlePlayButtonWrapper}>
+                        <AppButton
+                          type="google-play"
+                          screenReaderText={footer.googlePlay.screenReaderText}
+                          url={footer.googlePlay.url}
+                        />
+                      </div>
+                    </Grid.Col>
+                  )}
+                </Grid.Row>
+              </Grid>
+            </>
+          )}
+        </div>
+      </div>
+
+      {isMinWidthArcBreakpointM && (
+        <div className={styles.col}>
+          <div data-testid="desktop-img" className={styles.imgContainer}>
+            <MediaContent image={image} video={video} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export interface FeaturePostProps {
+  /**
+   * heading for `FeaturePost`.
+   */
+  heading: string;
+
+  /**
+   * Determine a heading level for `<FeaturePost />`
+   */
+  headingLevel?: HeadingLevel;
+
+  /**
+   * Text content for `FeaturePost`.
+   */
+  content: string;
+
+  /**
+   * Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
+   */
+  isReverseOrder?: boolean;
+
+  /**
+   * Image for `FeaturePost`.
+   */
+  image?: FeaturePostImage;
+
+  /**
+   * Footer for `FeaturePost`. Types included are `cta` or `appButton`.
+   */
+  footer?: FeaturePostCtaFooter | FeaturePostAppButtonFooter;
+
+  /**
+   * Label for `FeaturePost`.
+   */
+  label?: {
+    text: string;
+    date: string | Date;
+  };
+
+  /**
+   * Video embed. Supported platforms are YouTube and Vimeo.
+   */
+  video?: VideoPlayerProps;
+}

package/src/components/FeaturePost/components/Image/Image.tsx

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

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

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

package/src/components/FeaturePost/components/MediaContent/MediaContent.tsx

@@ -0,0 +1,45 @@
+import React, { Suspense, useEffect, useState } from "react";
+
+import { type VideoPlayerProps } from "@arc-ui/components/dist/VideoPlayer";
+
+import { type FeaturePostImage } from "../../types";
+
+import { Image } from "../Image";
+
+const VideoPlayer = React.lazy(() =>
+  import("@arc-ui/components/dist/VideoPlayer").then(({ VideoPlayer }) => ({
+    default: VideoPlayer,
+  })),
+);
+
+export const MediaContent: React.FC<MediaContentProps> = ({ image, video }) => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return (
+    <>
+      {image && !video && <Image {...image} />}
+
+      {video && isClient && (
+        <Suspense fallback={null}>
+          <VideoPlayer {...video} />
+        </Suspense>
+      )}
+    </>
+  );
+};
+
+interface MediaContentProps {
+  /**
+   * Image for `FeaturePost`.
+   */
+  image?: FeaturePostImage;
+
+  /**
+   * Video embed. Supported platforms are YouTube and Vimeo.
+   */
+  video?: VideoPlayerProps;
+}

package/src/components/FeaturePost/index.ts

@@ -0,0 +1 @@
+export { FeaturePost, type FeaturePostProps } from "./FeaturePost";

package/src/components/FeaturePost/types/feature-post-app-button-footer.ts

@@ -0,0 +1,7 @@
+import { type AppButtonProps } from "@arc-ui/components/dist/types/components/AppButton";
+
+export interface FeaturePostAppButtonFooter {
+  type: "appButton";
+  googlePlay?: Omit<AppButtonProps, "type">;
+  appStore?: Omit<AppButtonProps, "type">;
+}

package/src/components/FeaturePost/types/feature-post-cta-footer.ts

@@ -0,0 +1,11 @@
+import { type ButtonProps } from "@arc-ui/components/dist/types/components/Button/Button";
+import { type AuthorProps } from "../../Author/Author";
+
+export interface FeaturePostCtaFooter {
+  type: "cta";
+  button: Pick<
+    ButtonProps,
+    "label" | "onClick" | "href" | "target" | "ariaLabel"
+  >;
+  author?: AuthorProps;
+}

package/src/components/FeaturePost/types/feature-post-image.ts

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

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

@@ -0,0 +1,3 @@
+export { type FeaturePostAppButtonFooter } from "./feature-post-app-button-footer";
+export { type FeaturePostCtaFooter } from "./feature-post-cta-footer";
+export { type FeaturePostImage } from "./feature-post-image";

package/src/components/Highlights/Highlights.module.css

@@ -0,0 +1,85 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.highlights {
+  display: grid;
+  gap: 48px 24px;
+  grid-template-columns: 1fr;
+}
+
+.highlightItem {
+  max-width: 480px;
+  width: auto;
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .highlights {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .highlightItem {
+    min-width: 282px;
+    padding-right: 0;
+  }
+}
+
+@media (--arc-custom-media-min-width-m-px) {
+  .highlights2Column {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .highlights2Column .highlightItem {
+    max-width: max-content;
+    min-width: 348px;
+    padding-right: 62px;
+  }
+
+  .highlights3Column {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .highlights3Column .highlightItem {
+    min-width: 224px;
+  }
+}
+
+@media (--arc-custom-media-min-width-l-px) {
+  .highlights2Column {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .highlights2Column .highlightItem {
+    min-width: 468px;
+    padding-right: 82px;
+  }
+
+  .highlights3Column {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .highlights3Column .highlightItem {
+    min-width: 304px;
+  }
+}
+
+@media (--arc-custom-media-min-width-xl-px) {
+  .highlights {
+    gap: 48px 32px;
+  }
+
+  .highlights2Column {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .highlights2Column .highlightItem {
+    min-width: 592px;
+    padding-right: 104px;
+  }
+
+  .highlights3Column {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .highlights3Column .highlightItem {
+    min-width: 384px;
+  }
+}

package/src/components/Highlights/Highlights.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import { useMediaQuery } from "@arc-ui/components/dist/use-media-query";
+
+import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
+
+import { HighlightList } from "./components/HighlightList/HighlightList";
+
+import { type HighlightListItem } from "./types";
+
+/**
+ * Use `Highlights` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link. Both two and three column options are available.
+ */
+export const Highlights: React.FC<HighlightsProps> = ({
+  heading,
+  headingLevel,
+  content,
+  listItems,
+  columns = "2",
+}) => {
+  const isMaxWidthArcBreakpointXs = useMediaQuery(`(max-width: 767px)`);
+
+  return (
+    <div>
+      <SectionHeading
+        isPadded
+        data-testid="highlights-header"
+        heading={heading}
+        headingLevel={headingLevel}
+        content={content}
+      />
+
+      <HighlightList
+        data-testid="highlights-list-container"
+        listItems={listItems}
+        columns={columns}
+        isSmallIcon={isMaxWidthArcBreakpointXs}
+      />
+    </div>
+  );
+};
+
+export interface HighlightsProps extends SectionHeadingProps {
+  /**
+   * List items for `Highlights`. List length should be a minimum of 2 and a maximum of 6.
+   */
+  listItems: HighlightListItem[];
+
+  /**
+   * Number of columns for option desktop and tablet breakpoints only.
+   */
+  columns?: "2" | "3";
+}

package/src/components/Highlights/components/HighlightItem/HighlightItem.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { type ArcIcon } from "@arc-ui/components/dist/types/types/arc-icon";
+
+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 { Link } from "@arc-ui/components/dist/Link";
+import { VerticalSpace } from "@arc-ui/components/dist/VerticalSpace";
+
+import styles from "../../Highlights.module.css";
+
+export const HighlightItem: React.FC<HighlightItemProps> = ({
+  icon,
+  heading,
+  text,
+  link,
+  isSmallIcon,
+}) => {
+  return (
+    <div
+      data-testid="highlight-item-container"
+      className={styles.highlightItem}
+    >
+      {icon && (
+        <div className={styles.Icon}>
+          <Icon
+            data-testid="highlight-icon"
+            color="brand"
+            icon={icon}
+            size={isSmallIcon ? 64 : 76}
+          />
+        </div>
+      )}
+      <VerticalSpace size="16" />
+      <Heading level="3" size="m">
+        {heading}
+      </Heading>
+      <VerticalSpace size="16" />
+      <Text>{text}</Text>
+      <VerticalSpace size="16" />
+
+      {link && (
+        <Link
+          href={link.url}
+          id={link.url}
+          onClick={function noRefCheck() {}}
+          rel=""
+          size="m"
+          target="_self"
+          title={link.textLink}
+        >
+          {link.textLink}
+        </Link>
+      )}
+    </div>
+  );
+};
+
+interface HighlightItemProps {
+  icon?: ArcIcon;
+  heading: string;
+  text?: string;
+  link?: {
+    url: string;
+    textLink: string;
+  };
+  isSmallIcon: boolean;
+}

package/src/components/Highlights/components/HighlightList/HighlightList.tsx

@@ -0,0 +1,42 @@
+import React, { useId } from "react";
+import classNames from "classnames";
+
+import { type HighlightListItem } from "../../types/highlight-list-item";
+import { HighlightItem } from "../HighlightItem/HighlightItem";
+
+import styles from "../../Highlights.module.css";
+
+export const HighlightList: React.FC<HighlightListProps> = ({
+  listItems,
+  columns,
+  isSmallIcon,
+}) => {
+  const id = useId();
+
+  return (
+    <div
+      data-testid="highlights-list"
+      className={classNames(
+        styles.highlights,
+        styles[`highlights${columns}Column`],
+      )}
+    >
+      {listItems.map(({ icon, heading, text, link }, i) => (
+        <HighlightItem
+          key={`highlight-${id}-${i}`}
+          icon={icon}
+          heading={heading}
+          text={text}
+          link={link}
+          isSmallIcon={isSmallIcon}
+        />
+      ))}
+    </div>
+  );
+};
+
+interface HighlightListProps {
+  listItems: HighlightListItem[];
+  columns: "2" | "3";
+  isSmallIcon: boolean;
+}

package/src/components/Highlights/index.ts

@@ -0,0 +1 @@
+export { Highlights, type HighlightsProps } from "./Highlights";

package/src/components/Highlights/types/highlight-list-item.ts

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

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

@@ -0,0 +1 @@
+export { type HighlightListItem } from "./highlight-list-item";

package/src/components/PromoListing/PromoListing.module.css

@@ -0,0 +1,97 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.PromoListing {
+  max-width: 1280px;
+}
+
+.promoListingContainer {
+  grid-column: span 2;
+  height: 100%;
+  width: 100%;
+}
+
+.cardGrid {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: 2fr;
+}
+
+.carouselSlide {
+  height: 100%;
+  padding: 6px;
+}
+
+@media (--arc-custom-media-min-width-xs-px) {
+  .cardGrid {
+    grid-auto-rows: minmax(430px, 1fr);
+  }
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .cardGrid2Columns {
+    grid-auto-rows: minmax(430px, 1fr);
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  /* Dealing with single orphan */
+  .cardGrid2Columns.cardGrid3Cards .promoListingContainer:last-child {
+    grid-column-end: 4;
+  }
+
+  .cardGrid2Columns.cardGrid5Cards .promoListingContainer:last-child {
+    grid-column-end: 4;
+  }
+}
+
+@media (--arc-custom-media-min-width-m-px) {
+  .cardGrid2Columns {
+    grid-auto-rows: minmax(430px, 1fr);
+  }
+}
+
+@media (--arc-custom-media-min-width-l-px) {
+  .cardGrid2Columns {
+    grid-auto-rows: minmax(468px, 1fr);
+  }
+
+  .cardGrid3Columns {
+    grid-auto-rows: minmax(437px, 1fr);
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  /* Dealing with single orphan */
+  .cardGrid3Columns.cardGrid4Cards .promoListingContainer:last-child {
+    grid-column-end: 5;
+  }
+
+  /* Dealing with two orphans */
+  .cardGrid3Columns.cardGrid2Cards .promoListingContainer:last-child {
+    grid-column-end: 6;
+  }
+
+  .cardGrid3Columns.cardGrid5Cards .promoListingContainer:last-child {
+    grid-column-end: 6;
+  }
+
+  .cardGrid3Columns.cardGrid2Cards .promoListingContainer:nth-last-child(2) {
+    grid-column-end: 4;
+  }
+
+  .cardGrid3Columns.cardGrid5Cards .promoListingContainer:nth-last-child(2) {
+    grid-column-end: 4;
+  }
+}
+
+@media (--arc-custom-media-min-width-xl-px) {
+  .cardGrid2Columns {
+    grid-auto-rows: minmax(592px, 1fr);
+  }
+
+  .cardGrid3Columns {
+    grid-auto-rows: minmax(523px, 1fr);
+  }
+
+  .cardGrid {
+    gap: 32px;
+  }
+}