@arc-ui/community-components 3.8.0 → 3.9.0

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/versions.json

@@ -1 +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"]
+["v3.9.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"]

package/lib/_shared/cjs/SectionHeading-DtYzFetD.cjs

@@ -1,31 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-BxB9I209.cjs');
-var React = require('react');
-var index = require('./index-B7Z7sgRq.cjs');
-var filterAttrs = require('./filter-attrs-BizjMsy0.cjs');
-var Text = require('@arc-ui/components/Text');
-var VerticalSpace = require('@arc-ui/components/VerticalSpace');
-var Image = require('@arc-ui/components/Image');
-var Heading = require('@arc-ui/components/Heading');
-
-var styles = {"section-header":"SectionHeading-module_section-header__iB07I","section-header--hasImage":"SectionHeading-module_section-header--hasImage__Ka3T7","section-header--isCentered":"SectionHeading-module_section-header--isCentered__pz0V9","section-header--padded":"SectionHeading-module_section-header--padded__0FXP2"};
-
-var SectionHeading = function (_a) {
-    var _b, _c;
-    var heading = _a.heading, content = _a.content, id = _a.id, image = _a.image, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.isCentered, isCentered = _f === void 0 ? false : _f, props = tslib_es6.__rest(_a, ["heading", "content", "id", "image", "isHeadingWordWrap", "isPadded", "headingLevel", "isCentered"]);
-    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames((_b = {},
-            _b[styles["section-header"]] = true,
-            _b[styles["section-header--padded"]] = isPadded,
-            _b[styles["section-header--isCentered"]] = isCentered,
-            _b)) }, filterAttrs.filterAttrs(props)),
-        React.createElement("div", { className: index.classNames((_c = {}, _c[styles["section-header--hasImage"]] = image, _c)) },
-            image && (React.createElement("div", null,
-                React.createElement(Image.Image, tslib_es6.__assign({}, image, { width: 68, fit: "cover" })))),
-            React.createElement(Heading.Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
-        content && (React.createElement(React.Fragment, null,
-            React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
-            React.createElement(Text.Text, { size: "l", elementType: "p" }, content)))));
-};
-
-exports.SectionHeading = SectionHeading;

package/lib/_shared/esm/SectionHeading-RLfs7ete.mjs

@@ -1,29 +0,0 @@
-import { _ as __rest, a as __assign } from './tslib.es6-BVXMhEem.mjs';
-import React__default from 'react';
-import { c as classNames } from './index-BSO2EFem.mjs';
-import { f as filterAttrs } from './filter-attrs-DZ7RCEZm.mjs';
-import { Text } from '@arc-ui/components/Text';
-import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
-import { Image } from '@arc-ui/components/Image';
-import { Heading } from '@arc-ui/components/Heading';
-
-var styles = {"section-header":"SectionHeading-module_section-header__iB07I","section-header--hasImage":"SectionHeading-module_section-header--hasImage__Ka3T7","section-header--isCentered":"SectionHeading-module_section-header--isCentered__pz0V9","section-header--padded":"SectionHeading-module_section-header--padded__0FXP2"};
-
-var SectionHeading = function (_a) {
-    var _b, _c;
-    var heading = _a.heading, content = _a.content, id = _a.id, image = _a.image, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.isCentered, isCentered = _f === void 0 ? false : _f, props = __rest(_a, ["heading", "content", "id", "image", "isHeadingWordWrap", "isPadded", "headingLevel", "isCentered"]);
-    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
-            _b[styles["section-header"]] = true,
-            _b[styles["section-header--padded"]] = isPadded,
-            _b[styles["section-header--isCentered"]] = isCentered,
-            _b)) }, filterAttrs(props)),
-        React__default.createElement("div", { className: classNames((_c = {}, _c[styles["section-header--hasImage"]] = image, _c)) },
-            image && (React__default.createElement("div", null,
-                React__default.createElement(Image, __assign({}, image, { width: 68, fit: "cover" })))),
-            React__default.createElement(Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
-        content && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(VerticalSpace, { size: "24" }),
-            React__default.createElement(Text, { size: "l", elementType: "p" }, content)))));
-};
-
-export { SectionHeading as S };