@arc-ui/community-components 3.7.1 → 3.8.1

package/src/components/ThumbnailSignpost/ThumbnailSignpost.module.css

@@ -8,7 +8,7 @@
 .thumbnailSignpost {
   display: inline-flex;
   flex-direction: row;
-  gap: var(--arc-size-grid-gutter-s);
+  gap: var(--arc-size-grid-gutter-m);
   max-width: 720px;
 }
 
@@ -20,6 +20,10 @@
   border-radius: calc(var(--thumbnail-signpost-border-radius-s) + 2px);
 }
 
+.onDarkSurface.isLink:focus {
+  outline-color: var(--focus-colors-dark-border-subtle);
+}
+
 .isLink:hover {
   cursor: pointer;
 }
@@ -44,6 +48,12 @@
   text-decoration: underline;
 }
 
+.onDarkSurface.isLink:hover .heading,
+.onDarkSurface.isLink:focus .heading {
+  color: var(--surface-colors-bg-light-white);
+  text-decoration: underline;
+}
+
 .image {
   width: calc(
     (((100% + var(--arc-size-grid-gutter-s)) / 12) * 6) -
@@ -99,14 +109,34 @@
   width: 100%;
 }
 
+.onDarkSurface .buttonIcon {
+  background: var(--surface-colors-bg-light-white);
+}
+
+.onDarkSurface .thumbnailButton {
+  color: var(--surface-colors-bg-light-white);
+}
+
 .isLink:focus .buttonIcon,
 .isLink:hover .buttonIcon {
   background: var(--button-v2-colors-light-text-hover);
 }
 
+.onDarkSurface.isLink:focus .buttonIcon,
+.onDarkSurface.isLink:hover .buttonIcon {
+  background: var(--button-v2-colors-dark-text-hover);
+}
+
 .isLink:hover .thumbnailButton,
 .isLink:focus .thumbnailButton {
   background: none;
   color: var(--button-v2-colors-light-text-hover);
   text-decoration: var(--sem-underline);
 }
+
+.onDarkSurface.isLink:hover .thumbnailButton,
+.onDarkSurface.isLink:focus .thumbnailButton {
+  background: none;
+  color: var(--button-v2-colors-dark-text-hover);
+  text-decoration: var(--sem-underline);
+}

package/src/components/ThumbnailSignpost/ThumbnailSignpost.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 
 import classNames from "classnames";
 import styles from "./ThumbnailSignpost.module.css";
@@ -10,6 +10,7 @@ import { BtIconArrowRightFill } from "@arc-ui/icons/BtIconArrowRightFill";
 import { Image, type ImageProps } from "@arc-ui/components/Image";
 import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
 import { Heading } from "@arc-ui/components/Heading";
+import { SurfaceContext } from "@arc-ui/components/Surface";
 
 /** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
 export const ThumbnailSignpost = ({
@@ -20,10 +21,14 @@ export const ThumbnailSignpost = ({
   buttonLabel,
   ...props
 }: ThumbnailSignpostProps) => {
+  const { surface } = useContext(SurfaceContext);
+  const isDarkSurface = surface === "dark";
+
   return (
     <div
       className={classNames(styles.thumbnailSignpost, {
         [styles.isLink]: onClick,
+        [styles.onDarkSurface]: isDarkSurface,
       })}
       onClick={onClick}
       aria-label={title}
@@ -42,7 +47,7 @@ export const ThumbnailSignpost = ({
         {text}
         {buttonLabel && onClick && (
           <>
-            <VerticalSpace size="8" />
+            <VerticalSpace size="32" />
             <div className={styles.thumbnailButton}>
               <span
                 className={styles.buttonIcon}

package/src/components/index.ts

@@ -23,3 +23,4 @@ export * from "./PromoListingThumbnailSignpost";
 export * from "./VideoHeroCard";
 export * from "./VideoPortraitCard";
 export * from "./BusinessSegmentSwitcher";
+export * from "./PartnerBrandLogos";

package/versions.json

@@ -1 +1 @@
-["v3.7.1","v3.7.0","v3.6.0","v3.5.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"]
+["v3.8.1","v3.8.0","v3.7.1","v3.7.0","v3.6.0","v3.5.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"]