Merge pull request #1584 from ASU/UDS-2056

feat(component-news): added hideTags prop that defaults to true

Author: mlsamuelson

packages/component-news/src/components/CardCarouselNews/index.jsx

@@ -38,7 +38,6 @@ const CarouselTemplate = ({ cardButton }) => {
   const cardItems = feeds?.map((feed, index) =>
     cardRow(feed, index, cardButton)
   );
-
   return (
     <NewsWrapper>
       <CardCarousel

packages/component-news/src/components/CardGridNews/index.jsx

@@ -1,6 +1,7 @@
 // @ts-check
 import { Card, feedCardButtonShape, FeedContext } from "@asu/unity-react-core";
 import React, { useContext, useEffect } from "react";
+import PropTypes from "prop-types";
 
 import { trackReactComponent } from "@asu/shared";
 import { BaseFeed } from "../../core/components/BaseFeed";
@@ -12,8 +13,9 @@ import { NewsWrapper } from "./index.styles";
  *
  * @param {Object} feed
  * @param {import("../../core/types/news-types").CardButton} cardButton
+ * @param {boolean} hideTags
  */
-const gridRow = (feed, cardButton) => (
+const gridRow = (feed, cardButton, hideTags) => (
   <div
     className="col col-12 col-md-6 col-lg-4 cards-items-container"
     key={feed.id}
@@ -38,7 +40,7 @@ const gridRow = (feed, cardButton) => (
           href: feed.buttonLink,
         },
       ]}
-      tags={parseInterests(feed?.interests)}
+      tags={hideTags ? [] : parseInterests(feed?.interests)}
     />
   </div>
 );
@@ -47,13 +49,14 @@ const gridRow = (feed, cardButton) => (
  * @param {import("../../core/types/news-types").TemplateProps} props
  */
 
-const GridTemplate = ({ cardButton }) => {
+const GridTemplate = ({ cardButton, hideTags }) => {
   const { feeds } = useContext(FeedContext); // Reading the "feeds" object from the context
+  const shouldHideTags = hideTags === true || hideTags === "true";
 
   return (
     <NewsWrapper className="row row-spaced" data-testid="grid-view-container">
       {feeds?.map((feed, index) => (
-        <React.Fragment key={index}>{gridRow(feed, cardButton)}</React.Fragment>
+        <React.Fragment key={index}>{gridRow(feed, cardButton, shouldHideTags)}</React.Fragment>
       ))}
     </NewsWrapper>
   );
@@ -67,7 +70,7 @@ const GridTemplate = ({ cardButton }) => {
 /**
  * @param {FeedType} props
  */
-const CardGridNews = ({ cardButton, ...props }) => {
+const CardGridNews = ({ cardButton, hideTags = true, ...props }) => {
   useEffect(() => {
     if (typeof window !== "undefined") {
       trackReactComponent({
@@ -87,6 +90,7 @@ const CardGridNews = ({ cardButton, ...props }) => {
     <BaseFeed {...props}>
       <GridTemplate
         cardButton={{ ...defaultProps.cardButton, ...cardButton }}
+        hideTags={hideTags}
       />
     </BaseFeed>
   );
@@ -95,6 +99,8 @@ const CardGridNews = ({ cardButton, ...props }) => {
 CardGridNews.propTypes = {
   ...BaseFeed.propTypes,
   cardButton: feedCardButtonShape,
+  hideTags: PropTypes.oneOf(["true", "false", true, false])
+
 };
 
 export { CardGridNews };

packages/component-news/src/components/CardListlNews/index.jsx

@@ -7,12 +7,14 @@ import { BaseFeed } from "../../core/components/BaseFeed";
 import { defaultProps } from "../../core/constants/default-props";
 import { parseInterests } from "../../core/utils";
 import { NewsWrapper } from "./index.styles";
+import PropTypes from "prop-types";
 
 /**
  * @param {object} feed
  * @param {import("../../core/types/news-types").CardButton} cardButton
+ * @param {boolean} hideTags
  */
-const listRow = (feed, cardButton) => (
+const listRow = (feed, cardButton, hideTags) => (
   <div className="card card-hover cards-items-container" key={feed.id}>
     <Card
       type="story"
@@ -35,7 +37,7 @@ const listRow = (feed, cardButton) => (
           href: feed.buttonLink,
         },
       ]}
-      tags={parseInterests(feed?.interests)}
+      tags={hideTags ? [] : parseInterests(feed?.interests)}
     />
   </div>
 );
@@ -44,13 +46,14 @@ const listRow = (feed, cardButton) => (
  * @param {import("../../core/types/news-types").TemplateProps} props
  */
 
-const ListTemplate = ({ cardButton }) => {
+const ListTemplate = ({ cardButton, hideTags }) => {
   const { feeds } = useContext(FeedContext); // Reading the "feeds" object from the context
+  const shouldHideTags = hideTags === true || hideTags === "true";
 
   return (
     <NewsWrapper className="row-spaced" data-testid="list-view-container">
       {feeds?.map((feed, index) => (
-        <React.Fragment key={index}>{listRow(feed, cardButton)}</React.Fragment>
+        <React.Fragment key={index}>{listRow(feed, cardButton, shouldHideTags)}</React.Fragment>
       ))}
     </NewsWrapper>
   );
@@ -64,7 +67,7 @@ const ListTemplate = ({ cardButton }) => {
 /**
  * @param {FeedType} props
  */
-const CardListlNews = ({ cardButton, ...props }) => {
+const CardListlNews = ({ cardButton, hideTags = true, ...props }) => {
   useEffect(() => {
     if (typeof window !== "undefined") {
       trackReactComponent({
@@ -84,11 +87,12 @@ const CardListlNews = ({ cardButton, ...props }) => {
     <BaseFeed {...props}>
       <ListTemplate
         cardButton={{ ...defaultProps.cardButton, ...cardButton }}
+        hideTags={hideTags}
       />
     </BaseFeed>
   );
 };
 
-CardListlNews.propTypes = { ...BaseFeed.propTypes, feedCardButtonShape };
+CardListlNews.propTypes = { ...BaseFeed.propTypes, feedCardButtonShape, hideTags: PropTypes.oneOf(["true", "false", true, false]) };
 
 export { CardListlNews };

packages/component-news/src/core/types/news-types.js

@@ -12,6 +12,7 @@
  * @ignore
  * @typedef {Object} TemplateProps
  * @property {CardButton} cardButton
+ * @property {"true" | "false" | boolean} [hideTags]
  */
 
 /**