Rename Banner attributes

NASA-IMPACT · Jul 24, 2024 · 6f61fbc · 6f61fbc
1 parent 508bd47
commit 6f61fbc
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 21 deletions.
diff --git a/app/scripts/components/common/banner/index.tsx b/app/scripts/components/common/banner/index.tsx
@@ -17,21 +17,21 @@ enum BannerType {
 const infoTypeFlag = BannerType.info;
 interface BannerProps {
   appTitle: string,
-  expiryDate: Date,
-  actionUrl: string,
-  contents: string,
+  expires: Date,
+  url: string,
+  text: string,
   type?: BannerType
 }
 
-export default function Banner({appTitle, expiryDate, actionUrl, contents, type = infoTypeFlag }: BannerProps) {
+export default function Banner({appTitle, expires, url, text, type = infoTypeFlag }: BannerProps) {
 
-  const showBanner = localStorage.getItem(BANNER_KEY) !== actionUrl;
-  const [isOpen, setIsOpen] = useState(showBanner && !(hasExpired(expiryDate)));
+  const showBanner = localStorage.getItem(BANNER_KEY) !== url;
+  const [isOpen, setIsOpen] = useState(showBanner && !(hasExpired(expires)));
 
   function onClose () {
     localStorage.setItem(
       BANNER_KEY,
-      actionUrl
+      url
     );
     setIsOpen(false);
   }
@@ -43,7 +43,7 @@ export default function Banner({appTitle, expiryDate, actionUrl, contents, type
           <USWDSBanner aria-label={appTitle} className={type !== infoTypeFlag? 'bg-secondary-lighter': ''}>
             <a href={actionUrl} target='_blank' rel='noreferrer'>
               <BannerContent className='padding-top-1 padding-bottom-1' isOpen={true}>
-                <p dangerouslySetInnerHTML={{ __html: contents }} />
+                <p dangerouslySetInnerHTML={{ __html: text }} />
               </BannerContent>
             </a>
           </USWDSBanner>

diff --git a/app/scripts/components/home/index.tsx b/app/scripts/components/home/index.tsx
@@ -132,7 +132,7 @@ function RootHome() {
   const { show: showFeedbackModal } = useFeedbackModal();
 
   const banner = getBanner();
-  const renderBanner = !!banner && banner.contents && banner.actionUrl && banner.expiryDate;
+  const renderBanner = !!banner && banner.text && banner.url && banner.expires;
 
   return (
     <PageMainContent>

diff --git a/docs/content/CONFIGURATION.md b/docs/content/CONFIGURATION.md
@@ -54,17 +54,17 @@ strings: {
 `Banner` object allows you to display a site-wide banner that sits atop your application. To create a banner, you need to provide four attributes (one optional) as outlined below. 
 
 ```
-expiryDate: Date,
-actionUrl: string,
-contents: string,
+expires: Date,
+url: string,
+text: string,
 type?: BannerType
 ``` 
 
 | Option | Type | Description| Example|
 |---|---|---|---|
-| expiryDate | Date | The date and time when the banner expires. (ISO 8601 format) | '2024-08-03T12:00:00-04:00'|
-| actionUrl | string | The URL that will be triggered when the user clicks on the banner. | 'stories/emit-and-aviris-3' |
-| contents | string | The text content to display in the banner. | 'Read the new data insight on using EMIT and AVIRIS-3 for monitoring large methane emission events.' |
+| expires | Date | The date and time when the banner expires. (ISO 8601 format) | '2024-08-03T12:00:00-04:00'|
+| url | string | The URL that will be triggered when the user clicks on the banner. | 'stories/emit-and-aviris-3' |
+| text | string | The text content to display in the banner. This can be an HTML string. | 'Read the new data insight on using EMIT and AVIRIS-3 for monitoring large methane emission events.' |
 | type | enum('info', 'warning') |The type of information delivered by the banner, which determines its background color. | 'info'|
 
 

diff --git a/mock/veda.config.js b/mock/veda.config.js
@@ -18,9 +18,9 @@ module.exports = {
     }
   },
   banner: {
-    contents: 'Read the new data insight on using EMIT and AVIRIS-3 for monitoring large methane emission events.',
-    actionUrl: 'stories/emit-and-aviris-3',
-    expiryDate: '2024-08-03T12:00:00-04:00',
+    text: 'Read the new data insight on using EMIT and AVIRIS-3 for monitoring large methane emission events.',
+    url: 'stories/emit-and-aviris-3',
+    expires: '2024-08-03T12:00:00-04:00',
     type: 'info'
   }
 };
diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts
@@ -263,9 +263,9 @@ export interface LayerInfo {
 
   const infoTypeFlag = BannerType.info;
   interface BannerData {
-    expiryDate: Date,
-    actionUrl: string,
-    contents: string,
+    expires: Date,
+    url: string,
+    text: string,
     type?: BannerType
   }