@arc-ui/community-components 3.3.0 → 3.5.0

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

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState, ReactNode } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 
 import { ArcSizeBreakpointsL, ArcSizeBreakpointsXl } from "@arc-ui/tokens-arc";
 
@@ -66,9 +66,8 @@ export const MediaTemplate: React.FC<MediaTemplateProps> = ({
               headingLevel={headingLevel}
               id={id}
               isHeadingWordWrap={isHeadingWordWrap}
-            >
-              {content}
-            </MediaContent>
+              content={content}
+            />
           </ColumnsCol>
         </Columns>
       )}
@@ -79,7 +78,7 @@ export const MediaTemplate: React.FC<MediaTemplateProps> = ({
       >
         <Column>
           {isMinWidthArcBreakpointXl && (
-            <MediaContent heading={heading}>{content}</MediaContent>
+            <MediaContent heading={heading} content={content} />
           )}
 
           <IconList
@@ -109,7 +108,7 @@ interface MediaTemplateProps {
   id?: string;
   isHeadingWordWrap?: boolean;
   listItems: CopyLeadListItem[];
-  content?: string | ReactNode;
+  content?: string;
   isReverseOrder?: boolean;
   button?: CopyLeadButton;
   image?: CopyLeadImage;

package/src/components/LinkTile/LinkTile.module.css

@@ -6,8 +6,11 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 306px;
-  height: 96px;
+  width: 100%;
+  max-width: 306px;
+  height: 144px;
+  min-height: 144px;
+  max-height: 144px;
   border: var(--sem-border-width-xxs) solid
     var(--sem-color-border-secondary-light-minimal);
   border-radius: var(--sem-border-radius-xl);
@@ -20,7 +23,8 @@
   flex: none;
   align-self: stretch;
   position: relative;
-  overflow: visible;
+  overflow: hidden;
+  flex-grow: 1;
 }
 
 .link-tile-content {
@@ -30,7 +34,7 @@
   align-items: center;
   gap: var(--sem-space-padding-40);
   width: 100%;
-  height: 48px;
+  min-height: 48px;
   flex: none;
   align-self: stretch;
 }

package/src/components/LinkTile/LinkTile.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import classNames from "classnames";
 import styles from "./LinkTile.module.css";
-import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 import { Icon } from "@arc-ui/components/Icon";
 import { BtIconArrowAltRight } from "@arc-ui/icons/BtIconArrowAltRight";
 
@@ -19,7 +18,7 @@ export const LinkTile: React.FC<LinkTileProps> = ({
     <Component
       className={classNames(styles["link-tile"], className)}
       {...linkProps}
-      {...filterAttrs(props)}
+      {...(props as React.HTMLAttributes<HTMLElement>)}
     >
       {text && (
         <div className={styles["link-tile-content"]}>

package/src/components/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.tsx

@@ -22,6 +22,7 @@ export const PromoListingThumbnailSignpost: React.FC<
   content,
   headingLevel,
   thumbnailList,
+  isHeadingWordWrap,
   ...props
 }) => {
   return (
@@ -35,6 +36,7 @@ export const PromoListingThumbnailSignpost: React.FC<
         heading={heading}
         headingLevel={headingLevel}
         content={content}
+        isHeadingWordWrap={isHeadingWordWrap}
       />
       <ul className={styles.list}>
         {thumbnailList.map((thumbnail, index) => (

package/src/components/VideoHeroCard/VideoHeroCard.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+
+import { Visible } from "@arc-ui/components/Visible";
+import { Spacing } from "@arc-ui/components/Spacing";
+
+import {
+  VideoCardPlayer,
+  VideoCardPlayerProps,
+  VideoCardThumbnail,
+} from "../../internal/VideoCardPlayer";
+
+import {
+  VideoHeroCardContent,
+  VideoHeroCardContentProps,
+} from "./components/VideoHeroCardContent";
+
+export const VideoHeroCard = ({
+  content,
+  thumbnailImg,
+  player,
+  ...props
+}: VideoHeroCardProps) => {
+  return (
+    <VideoCardPlayer
+      thumbnail={
+        <VideoCardThumbnail
+          src={thumbnailImg}
+          orientation="landscape"
+          contentVisibility={{ l: true, xl: true, xxl: true }}
+        >
+          <VideoHeroCardContent {...content} background="dark" />
+        </VideoCardThumbnail>
+      }
+      orientation="landscape"
+      playIconSize="l"
+      player={player}
+      {...props}
+    >
+      {content && (
+        <Visible xs s m>
+          <Spacing all={{ xs: "16", s: "32" }}>
+            <VideoHeroCardContent {...content} background="light" />
+          </Spacing>
+        </Visible>
+      )}
+    </VideoCardPlayer>
+  );
+};
+
+export interface VideoHeroCardProps {
+  /**
+   * Content for the video card.
+   */
+  content: Omit<VideoHeroCardContentProps, "background">;
+  /**
+   * Thumbnail for the video hero card.
+   */
+  thumbnailImg: string;
+  /**
+   * Configuration for the video player.
+   */
+  player: VideoCardPlayerProps["player"];
+}

package/src/components/VideoHeroCard/components/VideoHeroCardContent/VideoHeroCardContent.module.css

@@ -0,0 +1,32 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.mainText--lightBackground {
+  color: var(--sem-color-fg-secondary-dark-alt);
+}
+
+.statContainer--lightBackground {
+  color: var(--sem-color-fg-secondary-light-default);
+}
+
+.statContainer--darkBackground,
+.mainText--darkBackground {
+  color: var(--sem-color-fg-primary-dark-default);
+}
+
+.statContainer {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sem-space-gap-40);
+}
+
+.stat {
+  align-items: center;
+  display: flex;
+  gap: var(--sem-space-gap-5);
+  white-space: nowrap;
+}
+
+.stat:not(:last-of-type) {
+  padding-right: var(--sem-space-padding-110);
+}

package/src/components/VideoHeroCard/components/VideoHeroCardContent/VideoHeroCardContent.tsx

@@ -0,0 +1,97 @@
+import React, { ReactNode, useId } from "react";
+
+import { BtIconCalendar } from "@arc-ui/icons/BtIconCalendar";
+import { BtIconClock } from "@arc-ui/icons/BtIconClock";
+import { BtIconChatMessage } from "@arc-ui/icons/BtIconChatMessage";
+
+import { Heading } from "@arc-ui/components/Heading";
+import { Icon } from "@arc-ui/components/Icon";
+import { Text } from "@arc-ui/components/Text";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+
+import styles from "./VideoHeroCardContent.module.css";
+import classNames from "classnames";
+
+export const VideoHeroCardContent = ({
+  title,
+  label,
+  description,
+  videoDate,
+  duration,
+  background,
+  subtitleAvailabilityText,
+}: VideoHeroCardContentProps) => {
+  const id = useId();
+
+  const metaItems: MetaItem[] = [
+    { icon: BtIconCalendar, text: videoDate },
+    { icon: BtIconClock, text: duration },
+    {
+      icon: BtIconChatMessage,
+      text: subtitleAvailabilityText,
+    },
+  ];
+
+  const hasMeta = metaItems.some((meta) => Boolean(meta.text));
+
+  return (
+    <div className={styles[`${background}Background`]}>
+      <div
+        className={classNames(
+          styles.mainText,
+          styles[`mainText--${background}Background`],
+        )}
+      >
+        <Heading fontStyle="overline">{label}</Heading>
+
+        <VerticalSpace size="8" sizeM="4" />
+
+        <Heading level="3" isWordWrap={false} size="xl">
+          {title}
+        </Heading>
+
+        <VerticalSpace size="16" />
+
+        <Text>{description}</Text>
+      </div>
+
+      {hasMeta && (
+        <>
+          <VerticalSpace size="32" sizeS="16" />
+
+          <div
+            className={classNames(
+              styles.statContainer,
+              styles[`statContainer--${background}Background`],
+            )}
+          >
+            {metaItems.map(
+              (meta, i) =>
+                meta.text && (
+                  <div key={`${id}-stat-${i}`} className={styles.stat}>
+                    <Icon icon={meta.icon} size={20} />
+                    <Text size="xs">{meta.text}</Text>
+                  </div>
+                ),
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+type MetaItem = {
+  text?: string;
+  icon: string;
+};
+
+export interface VideoHeroCardContentProps {
+  title: string;
+  label: string;
+  description: string | ReactNode;
+  background: "dark" | "light";
+  videoDate?: string;
+  duration?: string;
+  subtitleAvailabilityText?: string;
+}

package/src/components/VideoHeroCard/components/VideoHeroCardContent/index.ts

@@ -0,0 +1,4 @@
+export {
+  VideoHeroCardContent,
+  type VideoHeroCardContentProps,
+} from "./VideoHeroCardContent";

package/src/components/VideoHeroCard/index.ts

@@ -0,0 +1 @@
+export { VideoHeroCard, type VideoHeroCardProps } from "./VideoHeroCard";

package/src/components/VideoPortraitCard/VideoPortraitCard.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import { Heading } from "@arc-ui/components/Heading";
+import { Surface } from "@arc-ui/components/Surface";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+
+import {
+  VideoCardPlayer,
+  VideoCardPlayerProps,
+  VideoCardThumbnail,
+} from "../../internal/VideoCardPlayer";
+
+export const VideoPortraitCard = ({
+  thumbnail,
+  player,
+  ...props
+}: VideoPortraitCardProps) => {
+  return (
+    <VideoCardPlayer
+      thumbnail={
+        thumbnail && (
+          <VideoCardThumbnail orientation="portrait" src={thumbnail.img}>
+            <Surface isTransparent background="dark-black">
+              <Heading fontStyle="overline">{thumbnail.label}</Heading>
+              <VerticalSpace size="8" />
+              <Heading level="3" isWordWrap={false} size="xs">
+                {thumbnail.title}
+              </Heading>
+            </Surface>
+          </VideoCardThumbnail>
+        )
+      }
+      orientation="portrait"
+      player={player}
+      playIconSize="s"
+      {...props}
+    />
+  );
+};
+
+export interface VideoPortraitCardProps {
+  /**
+   * Thumbnail content, video will autoplay if omitted.
+   */
+  thumbnail?: {
+    title: string;
+    label: string;
+    img: string;
+  };
+  /**
+   * Configuration for the video player.
+   */
+  player: VideoCardPlayerProps["player"];
+}

package/src/components/VideoPortraitCard/index.ts

@@ -0,0 +1,4 @@
+export {
+  VideoPortraitCard,
+  type VideoPortraitCardProps,
+} from "./VideoPortraitCard";

package/src/components/index.ts

@@ -19,3 +19,6 @@ export * from "./LinkTile";
 export * from "./InlineLinkGroup";
 export * from "./ThumbnailSignpost";
 export * from "./PromoListingThumbnailSignpost";
+export * from "./VideoHeroCard";
+export * from "./VideoPortraitCard";
+export * from "./BusinessSegmentSwitcher";

package/src/internal/MultiLineText/MultiLineText.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Text, TextProps } from "@arc-ui/components/Text";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+
+export const MultiLineText = ({ text, ...textProps }: MultiLineTextProps) => {
+  if (!text) return null;
+
+  const paragraphs = text.split(/\\n|\n/).filter((p) => p.trim());
+
+  return (
+    <>
+      {paragraphs.map((paragraph, index) => (
+        <span key={`informationcard-text-${index}`}>
+          {index > 0 && <VerticalSpace size="8" />}
+          <Text {...textProps}>{paragraph}</Text>
+        </span>
+      ))}
+    </>
+  );
+};
+
+interface MultiLineTextProps extends Partial<TextProps> {
+  text?: string;
+}

package/src/internal/MultiLineText/index.ts

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

package/src/internal/VideoCardPlayer/VideoCardPlayer.module.css

@@ -0,0 +1,54 @@
+/* stylelint-disable selector-pseudo-class-no-unknown */
+.container {
+  border-radius: var(--sem-border-radius-s);
+  border: var(--sem-border-width-xs) solid
+    var(--sem-color-border-secondary-light-subtle);
+  outline: var(--sem-border-width-l) solid transparent;
+  transition:
+    0.4s ease outline-color,
+    0.4s ease box-shadow;
+  overflow: hidden;
+}
+
+.container iframe {
+  border: none;
+  height: 100%;
+  width: 100%;
+}
+
+.container :global(.react-player__preview) {
+  position: relative;
+}
+
+.player {
+  height: 100%;
+  width: 100%;
+}
+
+.playerWrapper {
+  width: 100%;
+  position: relative;
+}
+
+.playerWrapper--landscape {
+  aspect-ratio: 16 / 9;
+}
+
+.playerWrapper--portrait {
+  aspect-ratio: 9 / 16;
+}
+
+.container:has(:global(.react-player__preview):focus) {
+  outline-color: var(--sem-color-border-primary-light-default);
+}
+
+.container:has(:global(.react-player__preview):hover),
+.container:has(:global(.react-player__preview):focus) {
+  box-shadow: var(--elevation-05);
+}
+
+@media (--arc-custom-media-min-width-l-px) {
+  .container {
+    border: none;
+  }
+}

package/src/internal/VideoCardPlayer/VideoCardPlayer.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
+
+import ReactPlayer from "react-player";
+import { ReactPlayerProps } from "react-player/types";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+
+import { VideoCardPlayIcon } from "./components/VideoCardPlayIcon";
+import { PlayerProps } from "./types/player-props";
+
+import styles from "./VideoCardPlayer.module.css";
+
+export const VideoCardPlayer = ({
+  thumbnail,
+  playIconSize,
+  orientation,
+  children,
+  player,
+  ...props
+}: VideoCardPlayerProps) => {
+  const [isClient, setIsClient] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const playerProps = {
+    ...player,
+    light: thumbnail,
+    playIcon: <VideoCardPlayIcon size={playIconSize} />,
+    muted: !thumbnail,
+    playing: true,
+    controls: true,
+    className: styles.player,
+    width: "100%",
+    height: "100%",
+  };
+
+  return (
+    <div className={styles.container} {...filterAttrs(props)}>
+      <div
+        data-testid="arc-video-card"
+        className={classNames(
+          styles.playerWrapper,
+          styles[`playerWrapper--${orientation}`],
+        )}
+      >
+        {isClient && <ReactPlayer {...playerProps} />}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export interface VideoCardPlayerProps {
+  player: PlayerProps;
+  orientation: "portrait" | "landscape";
+  playIconSize: "s" | "l";
+  thumbnail?: ReactPlayerProps["light"];
+  children?: React.ReactNode;
+}

package/src/internal/VideoCardPlayer/components/VideoCardPlayIcon/VideoCardPlayIcon.module.css

@@ -0,0 +1,41 @@
+/* stylelint-disable selector-pseudo-class-no-unknown */
+.playIconContainer {
+  background: var(--sem-color-bg-primary-dark-default);
+  position: relative;
+  z-index: 1;
+  transition: 0.4s ease background-color;
+  border-radius: var(--sem-border-radius-s);
+}
+
+.playIconContainer--s {
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  right: var(--sem-space-gap-110);
+  top: var(--sem-space-gap-110);
+}
+
+.playIconContainer--l {
+  height: 64px;
+  width: 64px;
+}
+
+.playIcon {
+  color: var(--sem-color-fg-secondary-light-default);
+  height: 100%;
+  width: 100%;
+  transition: 0.4s ease color;
+}
+
+:global(.react-player__preview):hover .playIconContainer {
+  background: var(--sem-color-bg-primary-light-subtle);
+}
+
+:global(.react-player__preview):focus .playIconContainer {
+  background: var(--sem-color-bg-primary-light-default);
+}
+
+:global(.react-player__preview):focus .playIcon,
+:global(.react-player__preview):hover .playIcon {
+  color: var(--sem-color-fg-primary-dark-default);
+}

package/src/internal/VideoCardPlayer/components/VideoCardPlayIcon/VideoCardPlayIcon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import classNames from "classnames";
+
+import { Icon } from "@arc-ui/components/Icon";
+
+import { ArcIconPlay } from "@arc-ui/icons/ArcIconPlay";
+
+import styles from "./VideoCardPlayIcon.module.css";
+
+export const VideoCardPlayIcon = ({ size = "l" }: VideoCardPlayIconProps) => {
+  return (
+    <div
+      className={classNames(
+        styles.playIconContainer,
+        styles[`playIconContainer--${size}`],
+      )}
+    >
+      <div className={styles.playIcon}>
+        <Icon icon={ArcIconPlay} />
+      </div>
+    </div>
+  );
+};
+
+interface VideoCardPlayIconProps {
+  size?: "s" | "l";
+}

package/src/internal/VideoCardPlayer/components/VideoCardPlayIcon/index.ts

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

package/src/internal/VideoCardPlayer/components/VideoCardThumbnail/VideoCardThumbnail.module.css

@@ -0,0 +1,58 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.thumbnail {
+  align-items: flex-end;
+  background-size: cover;
+  bottom: 0;
+  display: flex;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  cursor: pointer;
+}
+
+.thumbnail::before {
+  bottom: 0;
+  content: "";
+  display: block;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.thumbnail--landscape::before {
+  background: linear-gradient(
+    180deg,
+    rgba(42, 42, 42, 0%) 0%,
+    rgba(42, 42, 42, 62%) 51.92%,
+    var(--sem-color-bg-secondary-light-alt) 100%
+  );
+}
+
+.thumbnail--portrait::before {
+  background: linear-gradient(
+    0deg,
+    var(--sem-color-bg-secondary-light-alt) 0.01%,
+    rgba(42, 42, 42, 90%) 16.31%,
+    rgba(42, 42, 42, 81%) 26.66%,
+    rgba(42, 42, 42, 0%) 100%
+  );
+}
+
+.thumbnailContent {
+  position: relative;
+  padding: var(--sem-space-padding-130);
+}
+
+.thumbnail--portrait .thumbnailContent {
+  padding: var(--sem-space-padding-110);
+}
+
+@media (--arc-custom-media-min-width-xl-px) {
+  .thumbnailContent {
+    padding: var(--sem-space-padding-160);
+  }
+}

package/src/internal/VideoCardPlayer/components/VideoCardThumbnail/VideoCardThumbnail.tsx

@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import React from "react";
+
+import { Visible, VisibleProps } from "@arc-ui/components/Visible";
+
+import styles from "./VideoCardThumbnail.module.css";
+
+export const VideoCardThumbnail = ({
+  orientation,
+  contentVisibility,
+  src,
+  children,
+}: VideoCardThumbnailProps) => {
+  const content = <div className={styles.thumbnailContent}>{children}</div>;
+
+  return (
+    <div
+      className={classNames(
+        styles.thumbnail,
+        styles[`thumbnail--${orientation}`],
+      )}
+      style={{ backgroundImage: `url(${src})` }}
+    >
+      {contentVisibility ? (
+        <Visible {...contentVisibility}>{content}</Visible>
+      ) : (
+        content
+      )}
+    </div>
+  );
+};
+
+interface VideoCardThumbnailProps {
+  src: string;
+  children: React.ReactNode;
+  orientation: "portrait" | "landscape";
+  contentVisibility?: Omit<VisibleProps, "children">;
+}