@arc-ui/community-components 3.2.0 → 3.4.0

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

@@ -14,8 +14,10 @@ export * from "./ArticleSidebar";
 export * from "./ProductNavigation";
 export * from "./SectionHeading";
 export * from "./ContentInfoWidget";
-export * from "./HeroLink";
 export * from "./ActionTile";
 export * from "./LinkTile";
+export * from "./InlineLinkGroup";
 export * from "./ThumbnailSignpost";
 export * from "./PromoListingThumbnailSignpost";
+export * from "./VideoHeroCard";
+export * from "./VideoPortraitCard";

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">;
+}

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

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

package/src/internal/VideoCardPlayer/index.ts

@@ -0,0 +1,2 @@
+export { VideoCardPlayer, type VideoCardPlayerProps } from "./VideoCardPlayer";
+export { VideoCardThumbnail } from "./components/VideoCardThumbnail";

package/src/internal/VideoCardPlayer/types/player-props.ts

@@ -0,0 +1,6 @@
+import { ReactPlayerProps } from "react-player/types";
+
+export type PlayerProps = Pick<
+  ReactPlayerProps,
+  "onReady" | "onPlay" | "onStart" | "onPause" | "onEnded" | "onError" | "src"
+>;

package/versions.json

@@ -1 +1 @@
-["v3.2.0","v3.1.0","v3.0.1","v3.0.0","v2.0.0","v1.1.0","v1.0.2","v1.0.1","v1.0.0","v0.1.0"]
+["v3.4.0","v3.3.0","v3.2.0","v3.1.0","v3.0.1","v3.0.0","v2.0.0","v1.1.0","v1.0.2","v1.0.1","v1.0.0","v0.1.0"]

package/lib/HeroLink/HeroLink.cjs

@@ -1,35 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
-var React = require('react');
-var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
-var BtIconArrowAltRight = require('../_shared/cjs/BtIconArrowAltRight-CLQdP61r.cjs');
-var Icon = require('@arc-ui/components/Icon');
-
-var styles = {"heroLink":"HeroLink-module_heroLink__WUqWB","heroLink-inner":"HeroLink-module_heroLink-inner__RE5i8","heroLink-label":"HeroLink-module_heroLink-label__93HPY","heroLink-icon":"HeroLink-module_heroLink-icon__l7o4U","heroLink--emptyLabel":"HeroLink-module_heroLink--emptyLabel__XY2sa"};
-
-/**
- * Pill-style HeroLink component with default and hover states
- */
-var HeroLink = function (_a) {
-    var _b;
-    var label = _a.label, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, ariaLabel = _a.ariaLabel, ref = _a.ref, props = tslib_es6.__rest(_a, ["label", "onClick", "href", "id", "rel", "target", "ariaLabel", "ref"]);
-    var HeroLinkClasses = index.classNames(styles.heroLink, (_b = {},
-        _b[styles["heroLink--emptyLabel"]] = !label,
-        _b));
-    var commonProps = tslib_es6.__assign({ id: id, onClick: onClick, ref: ref }, props);
-    if (href) {
-        return (React.createElement("a", tslib_es6.__assign({}, commonProps, { className: HeroLinkClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
-            React.createElement("span", { className: styles["heroLink-inner"] },
-                label && React.createElement("span", { className: styles["heroLink-label"] }, label),
-                React.createElement("span", { className: styles["heroLink-icon"] },
-                    React.createElement(Icon.Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight.BtIconArrowAltRight })))));
-    }
-    return (React.createElement("button", tslib_es6.__assign({}, commonProps, { className: HeroLinkClasses, "aria-label": ariaLabel }),
-        React.createElement("span", { className: styles["heroLink-inner"] },
-            label && React.createElement("span", { className: styles["heroLink-label"] }, label),
-            React.createElement("span", { className: styles["heroLink-icon"] },
-                React.createElement(Icon.Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight.BtIconArrowAltRight })))));
-};
-
-exports.HeroLink = HeroLink;

package/lib/HeroLink/HeroLink.mjs

@@ -1,33 +0,0 @@
-import { a as __rest, _ as __assign } from '../_shared/esm/tslib.es6-D6Wu-xwB.mjs';
-import React from 'react';
-import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
-import { B as BtIconArrowAltRight } from '../_shared/esm/BtIconArrowAltRight-VH6RTTnL.mjs';
-import { Icon } from '@arc-ui/components/Icon';
-
-var styles = {"heroLink":"HeroLink-module_heroLink__WUqWB","heroLink-inner":"HeroLink-module_heroLink-inner__RE5i8","heroLink-label":"HeroLink-module_heroLink-label__93HPY","heroLink-icon":"HeroLink-module_heroLink-icon__l7o4U","heroLink--emptyLabel":"HeroLink-module_heroLink--emptyLabel__XY2sa"};
-
-/**
- * Pill-style HeroLink component with default and hover states
- */
-var HeroLink = function (_a) {
-    var _b;
-    var label = _a.label, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, ariaLabel = _a.ariaLabel, ref = _a.ref, props = __rest(_a, ["label", "onClick", "href", "id", "rel", "target", "ariaLabel", "ref"]);
-    var HeroLinkClasses = classNames(styles.heroLink, (_b = {},
-        _b[styles["heroLink--emptyLabel"]] = !label,
-        _b));
-    var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, props);
-    if (href) {
-        return (React.createElement("a", __assign({}, commonProps, { className: HeroLinkClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
-            React.createElement("span", { className: styles["heroLink-inner"] },
-                label && React.createElement("span", { className: styles["heroLink-label"] }, label),
-                React.createElement("span", { className: styles["heroLink-icon"] },
-                    React.createElement(Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
-    }
-    return (React.createElement("button", __assign({}, commonProps, { className: HeroLinkClasses, "aria-label": ariaLabel }),
-        React.createElement("span", { className: styles["heroLink-inner"] },
-            label && React.createElement("span", { className: styles["heroLink-label"] }, label),
-            React.createElement("span", { className: styles["heroLink-icon"] },
-                React.createElement(Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
-};
-
-export { HeroLink };

package/lib/HeroLink/styles.css

@@ -1 +0,0 @@
-.HeroLink-module_heroLink__WUqWB{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:16px 16px 16px 24px;border:2px solid #e5e5e5;border-radius:32px;background:transparent;color:#5514b4;text-decoration:none;font-size:14px;font-weight:500;line-height:1;cursor:pointer;transition:all 0.2s ease;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.HeroLink-module_heroLink__WUqWB:hover{border-color:#3f187f;color:#3f187f}.HeroLink-module_heroLink-inner__RE5i8{display:flex;align-items:center;gap:4px}.HeroLink-module_heroLink-label__93HPY{white-space:nowrap}.HeroLink-module_heroLink-icon__l7o4U{display:flex;align-items:center;justify-content:center}.HeroLink-module_heroLink--emptyLabel__XY2sa{padding:16px}

package/lib/_shared/cjs/filter-attrs-BizjMsy0.cjs

@@ -1,27 +0,0 @@
-'use strict';
-
-/**
- * Filters out attributes from the given props object based on a pattern.
- *
- * This function extracts all properties that match either the `data-*` or `aria-*` attribute patterns
- * and returns a new object containing only those properties.
- *
- * @param props - The object containing properties to filter.
- * @returns A new object containing only the matched attributes (`data-*` and `aria-*`) from the input props.
- */
-var attributePrefixes = ["data-", "aria-"];
-var filterAttrs = function (props) {
-    var filteredProps = {};
-    var _loop_1 = function (prop) {
-        if (Object.prototype.hasOwnProperty.call(props, prop) &&
-            attributePrefixes.some(function (prefix) { return prop.startsWith(prefix); })) {
-            filteredProps[prop] = props[prop];
-        }
-    };
-    for (var prop in props) {
-        _loop_1(prop);
-    }
-    return filteredProps;
-};
-
-exports.filterAttrs = filterAttrs;