@arc-ui/community-components 3.8.1 → 3.10.0

package/src/components/HeaderBarNotification/HeaderBarNotification.tsx

@@ -0,0 +1,153 @@
+import React from "react";
+import { useState, useEffect } from "react";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+import {
+  NavigationHeaderAction,
+  NavigationHeaderActionProps,
+} from "@arc-ui/components/NavigationHeader";
+import { Popover } from "@arc-ui/components/Popover";
+import { Icon } from "@arc-ui/components/Icon";
+import { Image } from "@arc-ui/components/Image";
+import { Heading } from "@arc-ui/components/Heading";
+import { Text } from "@arc-ui/components/Text";
+import { Tooltip } from "@arc-ui/components/Tooltip";
+import { ButtonV2 } from "@arc-ui/components/ButtonV2";
+
+import { BtIconCrossAlt } from "@arc-ui/icons/BtIconCrossAlt";
+
+import styles from "./HeaderBarNotification.module.css";
+
+export const HeaderBarNotification: React.FC<HeaderBarNotificationProps> = ({
+  headerActionProps,
+  notificationId,
+  isPersistant = false,
+  icon,
+  image,
+  heading,
+  tagline,
+  children,
+  button,
+  ...props
+}) => {
+  const [showNotification, setShowNotification] =
+    useState<boolean>(isPersistant);
+  const localStorageId = `hide${notificationId.replace(/[^a-zA-Z0-9\-_]/g, "")}`;
+
+  // Check to see if the notication has been hidden or not and show it if so
+  useEffect(() => {
+    if (typeof window !== "undefined" && !isPersistant) {
+      setShowNotification(!localStorage.getItem(localStorageId));
+    }
+  }, []);
+
+  // Handle the closure of the notification, store it in the session so we don't keep showing it.
+  const handleClosePopup = () => {
+    if (!isPersistant) localStorage.setItem(localStorageId, "true");
+    setShowNotification(false);
+  };
+
+  return (
+    <Popover
+      open={showNotification}
+      side={"bottom"}
+      sideOffset={12}
+      maxWidth={900}
+      arrow={true}
+      content={
+        <div className={styles.container}>
+          <div className={styles.content}>
+            {(image || icon) && (
+              <div className={styles.image}>
+                {image && (
+                  <Image src={image} alt={heading} fit={"cover"} width={55} />
+                )}
+                {icon && <Icon icon={icon} size={35} />}
+              </div>
+            )}
+
+            <div className={styles.details}>
+              {tagline && (
+                <Text size="m" tone="muted">
+                  {tagline}
+                </Text>
+              )}
+              <Heading size="s" level={"3"}>
+                {heading}
+              </Heading>
+              {children}
+            </div>
+          </div>
+          {button && (
+            <ButtonV2
+              onClick={button.handleClick}
+              label={button.text}
+              buttonStyle="secondary"
+              isFullWidth={true}
+            />
+          )}
+          <div className={styles.closeButtonContainer}>
+            <Tooltip
+              side="bottom"
+              title={"Dismiss Notification"}
+              asChild={true}
+            >
+              <ButtonV2
+                data-testid={localStorageId}
+                buttonStyle="tertiary"
+                aria-label={`Close ${notificationId} popup`}
+                onClick={handleClosePopup}
+                icon={BtIconCrossAlt}
+              />
+            </Tooltip>
+          </div>
+        </div>
+      }
+      {...filterAttrs(props)}
+    >
+      <NavigationHeaderAction isAttention={true} {...headerActionProps} />
+    </Popover>
+  );
+};
+
+export interface HeaderBarNotificationProps {
+  /**
+   * Header Element to attach the notifcation too.
+   */
+  headerActionProps: NavigationHeaderActionProps;
+  /**
+   * Nofication ID used to store dismissal in users session
+   */
+  notificationId: string;
+  /**
+   * Always show on every reload, ignore saving dismissal to users session
+   */
+  isPersistant?: boolean;
+  /**
+   * Notification Icon
+   */
+  icon?: string;
+  /**
+   * Notification Image
+   */
+  image?: string;
+  /**
+   * Notification Heading
+   */
+  heading: string;
+  /**
+   * Notification tagline
+   */
+  tagline?: string;
+  /**
+   * Notification content
+   */
+  children?: React.ReactNode;
+  /**
+   * Data for the button, click events and text
+   */
+  button?: {
+    handleClick: () => void;
+    text: string;
+  };
+}

package/src/components/HeaderBarNotification/index.ts

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

package/src/components/ProductNavigation/ProductNavigation.tsx

@@ -110,45 +110,49 @@ export const ProductNavigation: React.FC<ProductNavigationProps> = ({
           </li>
         ))}
       </ul>
-      <VerticalSpace size="40" />
-      <div style={{ display: "flex" }}>
-        {!hideButton && !hideLessButton && (
-          <ButtonV2
-            label={
-              displayList.length < productList.length
-                ? "Show more"
-                : "Show less"
-            }
-            buttonStyle="secondary"
-            onClick={clickController}
-            isFullWidth={isMinWidthArcBreakpointS ? false : true}
-            isLoading={isLoading}
-          />
-        )}
-        {hideButton ||
-          (displaySkipButton && displayList.length > cardsToDisplay && (
-            <div
-              id="skip-link"
-              className={classNames(styles["productNavigation-skipLink"])}
-              tabIndex={-1}
-            >
-              <ButtonV2
-                label="Move to first new card"
-                buttonStyle="primary"
-                onClick={moveFocus}
-                isFullWidth={isMinWidthArcBreakpointS ? false : true}
-              />
+      {!hideButton &&
+        !(defaultExpanded && displayList.length === productList.length) && (
+          <>
+            <VerticalSpace size="40" />
+            <div style={{ display: "flex" }}>
+              {!hideLessButton && (
+                <ButtonV2
+                  label={
+                    displayList.length < productList.length
+                      ? "Show more"
+                      : "Show less"
+                  }
+                  buttonStyle="secondary"
+                  onClick={clickController}
+                  isFullWidth={isMinWidthArcBreakpointS ? false : true}
+                  isLoading={isLoading}
+                />
+              )}
+              {displaySkipButton && displayList.length > cardsToDisplay && (
+                <div
+                  id="skip-link"
+                  className={classNames(styles["productNavigation-skipLink"])}
+                  tabIndex={-1}
+                >
+                  <ButtonV2
+                    label="Move to first new card"
+                    buttonStyle="primary"
+                    onClick={moveFocus}
+                    isFullWidth={isMinWidthArcBreakpointS ? false : true}
+                  />
+                </div>
+              )}
+              <VisuallyHidden>
+                <div aria-live="polite" id="aria-live-region" aria-atomic>
+                  <p>
+                    Total products listed {displayList.length}. Total products
+                    hidden {productList.length - displayList.length}.
+                  </p>
+                </div>
+              </VisuallyHidden>
             </div>
-          ))}
-        <VisuallyHidden>
-          <div aria-live="polite" id="aria-live-region" aria-atomic>
-            <p>
-              Total products listed {displayList.length}. Total products hidden{" "}
-              {productList.length - displayList.length}.
-            </p>
-          </div>
-        </VisuallyHidden>
-      </div>
+          </>
+        )}
     </div>
   );
 };

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

@@ -4,6 +4,20 @@
   max-width: 1280px;
 }
 
+/* margins for overflowing cards */
+.CarouselWrapper {
+  overflow: hidden;
+  margin: 0 calc(-1 * var(--arc-size-section-margin-16));
+  padding: 6px var(--arc-size-section-margin-16);
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .CarouselWrapper {
+    margin: 0 calc(-1 * var(--arc-size-section-margin-24));
+    padding: 6px var(--arc-size-section-margin-24);
+  }
+}
+
 .carouselSlide {
   height: 100%;
   padding: 6px;

package/src/components/PromoListing/PromoListing.tsx

@@ -126,7 +126,7 @@ export const PromoListing: React.FC<PromoListingProps> = ({
         </>
       )}
       {isCarousel && !isMinWidthArcBreakpointL ? (
-        <div className={styles.promolistingCarouselWrapper}>
+        <div className={styles.CarouselWrapper}>
           <Carousel
             overflow="visible"
             itemsPerSlide={1}

package/src/components/SectionHeading/SectionHeading.module.css

@@ -1,27 +1,17 @@
 @import url("@arc-ui/tokens-arc/dist/custom-media.css");
 
-.section-header {
-  padding-bottom: 40px;
-  width: auto;
-}
-
-.section-header--hasImage {
+.sectionHeading--hasImage {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
-.section-header--isCentered {
+.sectionHeading--isCentered {
   text-align: center;
 }
 
 @media (--arc-custom-media-min-width-s-px) {
-  .section-header--padded {
-    min-width: 588px;
-    width: auto;
-  }
-
-  .section-header--hasImage {
+  .sectionHeading--hasImage {
     align-items: center;
     flex-direction: row;
     gap: 32px;
@@ -29,22 +19,13 @@
 }
 
 @media (--arc-custom-media-min-width-m-px) {
-  .section-header--padded {
-    min-width: 720px;
-    padding: 0 186px 40px 0;
-  }
-}
-
-@media (--arc-custom-media-min-width-l-px) {
-  .section-header--padded {
-    min-width: 960px;
-    padding: 0 246px 40px 0;
+  .sectionHeading-content {
+    padding-right: 10px;
   }
 }
 
 @media (--arc-custom-media-min-width-xl-px) {
-  .section-header--padded {
-    min-width: 1216px;
-    padding: 0 312px 40px 0;
+  .sectionHeading-content {
+    padding-right: unset;
   }
 }

package/src/components/SectionHeading/SectionHeading.tsx

@@ -7,6 +7,7 @@ import { Text } from "@arc-ui/components/Text";
 import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
 import { Image, type ImageProps } from "@arc-ui/components/Image";
 import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
+import { Columns, ColumnsCol } from "@arc-ui/components/Columns";
 
 import styles from "./SectionHeading.module.css";
 
@@ -21,40 +22,41 @@ export const SectionHeading: React.FC<SectionHeadingProps> = ({
   isCentered = false,
   ...props
 }) => (
-  <div
-    className={classNames({
-      [styles["section-header"]]: true,
-      [styles["section-header--padded"]]: isPadded,
-      [styles["section-header--isCentered"]]: isCentered,
-    })}
-    {...filterAttrs(props)}
-  >
-    <div
-      className={classNames({ [styles["section-header--hasImage"]]: image })}
-    >
-      {image && (
-        <div>
-          <Image {...image} width={68} fit="cover" />
-        </div>
-      )}
-      <Heading
-        level={headingLevel}
-        id={id}
-        size="xl"
-        isWordWrap={isHeadingWordWrap}
+  <Columns>
+    <ColumnsCol spanM={isPadded ? 9 : 12}>
+      <div
+        className={classNames({
+          [styles["sectionHeading--isCentered"]]: isCentered,
+        })}
+        {...filterAttrs(props)}
       >
-        {heading}
-      </Heading>
-    </div>
-    {content && (
-      <>
-        <VerticalSpace size="24" />
-        <Text size="l" elementType="p">
-          {content}
-        </Text>
-      </>
-    )}
-  </div>
+        <div
+          className={classNames({
+            [styles["sectionHeading--hasImage"]]: image,
+          })}
+        >
+          {image && <Image {...image} width={68} fit="cover" />}
+          <Heading
+            level={headingLevel}
+            id={id}
+            size="xl"
+            isWordWrap={isHeadingWordWrap}
+          >
+            {heading}
+          </Heading>
+        </div>
+        {content && (
+          <div className={styles[`sectionHeading-content`]}>
+            <VerticalSpace size="24" />
+            <Text size="l" elementType="p">
+              {content}
+            </Text>
+          </div>
+        )}
+        <VerticalSpace size="40" />
+      </div>
+    </ColumnsCol>
+  </Columns>
 );
 
 export interface SectionHeadingProps {

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from "./HeaderBarNotification";
 export * from "./Accordion";
 export * from "./ArticleCarousel";
 export * from "./Author";

package/versions.json

@@ -1 +1 @@
-["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"]
+[{"version":"v3.10.0","date":null},{"version":"v3.9.0","date":"2026-05-22"},{"version":"v3.8.1","date":"2026-05-13"},{"version":"v3.8.0","date":"2026-04-29"},{"version":"v3.7.1","date":"2026-04-22"},{"version":"v3.7.0","date":"2026-04-17"},{"version":"v3.6.0","date":"2026-04-10"},{"version":"v3.5.0","date":"2026-04-02"},{"version":"v3.4.0","date":"2026-03-26"},{"version":"v3.3.0","date":"2026-03-20"},{"version":"v3.2.0","date":"2026-03-09"},{"version":"v3.1.0","date":"2026-02-26"},{"version":"v3.0.1","date":"2026-02-18"},{"version":"v3.0.0","date":null},{"version":"v2.0.0","date":"2026-01-21"},{"version":"v1.1.0","date":"2025-11-19"},{"version":"v1.0.2","date":"2025-08-18"},{"version":"v1.0.1","date":"2025-08-05"},{"version":"v1.0.0","date":"2025-04-29"},{"version":"v0.1.0","date":null}]

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