ASU · spaceperson · Jul 14, 2026 · Jul 17, 2026 · Jul 20, 2026 · Jun 16, 2026
@@ -94,11 +94,13 @@ const AccordionView = ({ programs, actionUrls }) => {
       content: {
         header: resolver.getMajorDesc(),
         body: `<ul>
-          <li>
-            <strong>Major:</strong>
-            <br />
-              ${majorNameHtml}
-          </li>
+        <li>
+          <strong>Major:</strong>
+          <br />
+            <a href=${resolver.getDegreeSearchUrl()}>
+              ${resolver.getMajorDesc()}
+            </a>
+        </li>
         <li>
           <strong>Degree:</strong>
           <br />${resolver.getDegree()}

@@ -39,8 +39,8 @@ function GridView({ programs, loading, actionUrls }) {
               image={imageUrl}
               imageAltText="An example image"
               title={resolver.getMajorDesc()}
-              linkLabel={url ? "View Program Details" : undefined}
-              linkUrl={url || undefined}
+              linkLabel="View Program Details"
+              linkUrl={resolver.getDegreeSearchUrl()}
               buttons={[
                 {
                   color: "maroon",

@@ -26,24 +26,19 @@ const columns = [
     label: "Major",
     className: "major",
     sortable: true,
-    contentTemplate: ({ resolver, rowIndex, actionUrls, onClick }) => {
-      const url = resolver.getDegreeSearchUrl();
-      return (
-        <div className="cell-container">
-          {url ? (
-            <a href={url}>{resolver.getMajorDesc()}</a>
-          ) : (
-            <span>{resolver.getMajorDesc()}</span>
-          )}
-          <ChevronIconButton
-            dataId="show-row-detail"
-            ariaLabel={`${resolver.getMajorDesc()} arrow`}
-            ariaControls={`row-info-${rowIndex}`}
-            onClick={selected => onClick(rowIndex, selected)}
-          />
-        </div>
-      );
-    },
+    contentTemplate: ({ resolver, rowIndex, actionUrls, onClick }) => (
+      <div className="cell-container">
+        <a href={resolver.getDegreeSearchUrl()}>
+          {resolver.getMajorDesc()}
+        </a>
+        <ChevronIconButton
+          dataId="show-row-detail"
+          ariaLabel={`${resolver.getMajorDesc()} arrow`}
+          ariaControls={`row-info-${rowIndex}`}
+          onClick={selected => onClick(rowIndex, selected)}
+        />
+      </div>
+    ),
   },
   {
     dataKey: "Degree",

@@ -1,3 +1,15 @@
+# [@asu/component-events-v3.2.0](https://github.com/asu/asu-unity-stack/compare/@asu/component-events-v3.1.0...@asu/component-events-v3.2.0) (2026-07-14)
+
+
+### Bug Fixes
+
+* **component-events:** fall back to default noFeedText when blank ([e85d4da](https://github.com/asu/asu-unity-stack/commit/e85d4dacd9d7ee6138805fd505ceabca737f3aeb))
+
+
+### Features
+
+* **component-events:** expose configurable noFeedText prop ([9cac3e9](https://github.com/asu/asu-unity-stack/commit/9cac3e912e1b0bc4c573f8e72378b1d147b0bce8))
+
 # [@asu/component-events-v3.1.0](https://github.com/asu/asu-unity-stack/compare/@asu/component-events-v3.0.1...@asu/component-events-v3.1.0) (2026-04-03)
 
 

@@ -1,6 +1,6 @@
 {
   "name": "@asu/component-events",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "ASU Events component",
   "main": "./dist/asuEvents.cjs.js",
   "browser": "./dist/asuEvents.umd.js",

@@ -15,7 +15,13 @@ import { GridView } from "./GridView";
  * @param {FeedType} props
  * @returns {JSX.Element}
  */
-const CardsGridEvents = ({ header, ctaButton, dataSource, maxItems }) => {
+const CardsGridEvents = ({
+  header,
+  ctaButton,
+  dataSource,
+  maxItems,
+  noFeedText = "No events to show.",
+}) => {
   useEffect(() => {
     if (typeof window !== "undefined") {
       trackReactComponent({
@@ -33,7 +39,7 @@ const CardsGridEvents = ({ header, ctaButton, dataSource, maxItems }) => {
   }, []);
   return (
     // Calling the high order component that fetch the data
-    <BaseFeed {...{ header, ctaButton, dataSource, maxItems }}>
+    <BaseFeed {...{ header, ctaButton, dataSource, maxItems, noFeedText }}>
       <GridView />
     </BaseFeed>
   );

@@ -75,3 +75,20 @@ WithNoHeader.args = {
     url: "/api/mocks/feeds-json",
   },
 };
+
+/**
+ * Demonstrates a custom "no results" message. The empty data source forces the
+ * feed to render the `noFeedText` instead of cards.
+ * @type {{ args: FeedType, parameters: object}}
+ */
+export const WithCustomNoFeedText = Template.bind({});
+WithCustomNoFeedText.args = {
+  header: { color: "dark", text: "Events Cards" },
+  dataSource: {
+    url: "/api/mocks/empty-feeds-json",
+  },
+  noFeedText: "There are no upcoming events at this time.",
+};
+WithCustomNoFeedText.parameters = {
+  msw: { handlers: createMockHandlers({ empty: true }) },
+};
@@ -1,6 +1,7 @@
 // @ts-check
 import { render, cleanup, act } from "@testing-library/react";
 import React from "react";
+import { vi } from "vitest";
 
 import { CardsGridEvents } from "./index";
 
@@ -63,6 +64,49 @@ describe("#Cards Grid Events", () => {
     });
   });
 
+  describe("#No feed text", () => {
+    // Force an empty feed so the "no results" message is rendered
+    const emptyFeedArgs = { ...defaultArgs, dataSource: { url: "/empty" } };
+
+    beforeEach(() => {
+      vi.mocked(fetch).mockImplementation(
+        async () =>
+          new Response(JSON.stringify({ nodes: [] }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          })
+      );
+    });
+
+    afterEach(() => {
+      vi.mocked(fetch).mockReset();
+      cleanup();
+    });
+
+    it("should render the default no-feed text when noFeedText is not provided", async () => {
+      await renderCardsGridEvents(emptyFeedArgs);
+      expect(
+        await component.findByText("No events to show.")
+      ).toBeInTheDocument();
+    });
+
+    it("should render a custom no-feed text when noFeedText is provided", async () => {
+      const customText = "Nothing happening right now.";
+      await renderCardsGridEvents({ ...emptyFeedArgs, noFeedText: customText });
+      expect(await component.findByText(customText)).toBeInTheDocument();
+      expect(
+        component.queryByText("No events to show.")
+      ).not.toBeInTheDocument();
+    });
+
+    it("should fall back to the default no-feed text when noFeedText is empty", async () => {
+      await renderCardsGridEvents({ ...emptyFeedArgs, noFeedText: "" });
+      expect(
+        await component.findByText("No events to show.")
+      ).toBeInTheDocument();
+    });
+  });
+
   describe("#With No Header", () => {
     const noHeaderArgs = { ...defaultArgs, header: undefined };
     beforeEach(async () => {

@@ -15,7 +15,13 @@ import { ListView } from "./ListView";
  * @param {FeedType} props
  * @returns {JSX.Element}
  */
-const CardsListEvents = ({ header, ctaButton, dataSource, maxItems }) => {
+const CardsListEvents = ({
+  header,
+  ctaButton,
+  dataSource,
+  maxItems,
+  noFeedText = "No events to show.",
+}) => {
   useEffect(() => {
     if (typeof window !== "undefined") {
       trackReactComponent({
@@ -34,7 +40,7 @@ const CardsListEvents = ({ header, ctaButton, dataSource, maxItems }) => {
 
   return (
     // Calling the high order component that fetch the data
-    <BaseFeed {...{ header, ctaButton, dataSource, maxItems }}>
+    <BaseFeed {...{ header, ctaButton, dataSource, maxItems, noFeedText }}>
       <ListView />
     </BaseFeed>
   );

@@ -78,3 +78,20 @@ WithNoHeader.args = {
     url: "/api/mocks/feeds-json",
   },
 };
+
+/**
+ * Demonstrates a custom "no results" message. The empty data source forces the
+ * feed to render the `noFeedText` instead of cards.
+ * @type {{ args: FeedType, parameters: object}}
+ */
+export const WithCustomNoFeedText = Template.bind({});
+WithCustomNoFeedText.args = {
+  header: { color: "dark", text: "Events List" },
+  dataSource: {
+    url: "/api/mocks/empty-feeds-json",
+  },
+  noFeedText: "There are no upcoming events at this time.",
+};
+WithCustomNoFeedText.parameters = {
+  msw: { handlers: createMockHandlers({ empty: true }) },
+};
@@ -1,6 +1,7 @@
 // @ts-check
 import { render, cleanup, act } from "@testing-library/react";
 import React from "react";
+import { vi } from "vitest";
 
 import { CardsListEvents } from "./index";
 
@@ -63,6 +64,49 @@ describe("#Cards List Events", () => {
     });
   });
 
+  describe("#No feed text", () => {
+    // Force an empty feed so the "no results" message is rendered
+    const emptyFeedArgs = { ...defaultArgs, dataSource: { url: "/empty" } };
+
+    beforeEach(() => {
+      vi.mocked(fetch).mockImplementation(
+        async () =>
+          new Response(JSON.stringify({ nodes: [] }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          })
+      );
+    });
+
+    afterEach(() => {
+      vi.mocked(fetch).mockReset();
+      cleanup();
+    });
+
+    it("should render the default no-feed text when noFeedText is not provided", async () => {
+      await renderCardsListEvents(emptyFeedArgs);
+      expect(
+        await component.findByText("No events to show.")
+      ).toBeInTheDocument();
+    });
+
+    it("should render a custom no-feed text when noFeedText is provided", async () => {
+      const customText = "Nothing happening right now.";
+      await renderCardsListEvents({ ...emptyFeedArgs, noFeedText: customText });
+      expect(await component.findByText(customText)).toBeInTheDocument();
+      expect(
+        component.queryByText("No events to show.")
+      ).not.toBeInTheDocument();
+    });
+
+    it("should fall back to the default no-feed text when noFeedText is empty", async () => {
+      await renderCardsListEvents({ ...emptyFeedArgs, noFeedText: "" });
+      expect(
+        await component.findByText("No events to show.")
+      ).toBeInTheDocument();
+    });
+  });
+
   describe("#With No Header", () => {
     const noHeaderArgs = { ...defaultArgs, header: undefined };
     beforeEach(async () => {

@@ -14,7 +14,16 @@ import { defaultProps } from "../../constants/default-props";
 import { filterData } from "../../services/dataManager";
 import { transformData } from "../../transformers/data.transfromer";
 
-const BaseFeed = ({ children, header, ctaButton, dataSource, maxItems }) => (
+const DEFAULT_NO_FEED_TEXT = "No events to show.";
+
+const BaseFeed = ({
+  children,
+  header,
+  ctaButton,
+  dataSource,
+  maxItems,
+  noFeedText = DEFAULT_NO_FEED_TEXT,
+}) => (
   // Calling the unity-react-core component to fetch the data, transform it and filter it
   // We provide in the renderBody the view specified before in the parent component, recieved as "children" in this component.
   // We provide in the renderHeader the unity-react-core header, if it is desired to be shown
@@ -36,7 +45,7 @@ const BaseFeed = ({ children, header, ctaButton, dataSource, maxItems }) => (
     dataFilter={filterData}
     dataSource={dataSource}
     defaultProps={defaultProps}
-    noFeedText="No events to show."
+    noFeedText={noFeedText.trim() ? noFeedText : DEFAULT_NO_FEED_TEXT}
     maxItems={maxItems}
   />
 );
@@ -46,6 +55,7 @@ BaseFeed.propTypes = {
   ctaButton: feedCtaButtonShape,
   dataSource: feedDataSourceShape,
   maxItems: PropTypes.number,
+  noFeedText: PropTypes.string,
   children: PropTypes.element,
 };
 

@@ -22,6 +22,7 @@ const eventsPropTypes = {
   ctaButton: layoutCTAPropTypes,
   dataSource: dataSourcePropTypes,
   maxItems: PropTypes.number,
+  noFeedText: PropTypes.string,
 };
 
 export {

@@ -3,13 +3,28 @@
 import { http, HttpResponse } from "msw";
 import * as feeds from "../../../__mocks__/api/feeds.json";
 
-function createMockHandlers() {
-  return [
+/**
+ * @param {{ empty?: boolean }} [options] - When `empty` is true an additional
+ * handler is registered that returns a feed with no nodes, useful to showcase
+ * the configurable `noFeedText`.
+ */
+function createMockHandlers(options = {}) {
+  const handlers = [
     http.get("/api/mocks/feeds-json", () => {
       // @ts-ignore
       return HttpResponse.json(feeds.default || feeds);
     }),
   ];
+
+  if (options.empty) {
+    handlers.push(
+      http.get("/api/mocks/empty-feeds-json", () =>
+        HttpResponse.json({ nodes: [] })
+      )
+    );
+  }
+
+  return handlers;
 }
 
 export { createMockHandlers };