optional props for change log banner, though - still appears if no da…

…te passed (#111)
communitiesuk · Nov 9, 2023 · 76fc34f · 76fc34f
1 parent 534c91b
commit 76fc34f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "uk_gov_dash_components",
-    "version": "1.22.7",
+    "version": "1.22.8",
     "description": "Dash components for Gov UK",
     "repository": {
         "type": "git",

diff --git a/src/lib/components/ChangeLogBanner.react.js b/src/lib/components/ChangeLogBanner.react.js
@@ -15,9 +15,9 @@ ChangeLogBanner.propTypes = {
     updates: PropTypes.arrayOf(
         PropTypes.shape({
             type: PropTypes.string.isRequired,           // Type of change
-            date: PropTypes.string.isRequired,           // Date of the change
+            date: PropTypes.string,                      // Optional date of the change
             heading: PropTypes.string.isRequired,        // Heading or title of the change
-            link: PropTypes.string.isRequired,           // Link associated with the change
+            link: PropTypes.string,                     // Optional link associated with the change
             linkTitle: PropTypes.string,                 // Optional title of the link
         })
     ),  // Marked as required because the component uses it directly

diff --git a/src/lib/fragments/ChangeLogBanner.react.js b/src/lib/fragments/ChangeLogBanner.react.js
@@ -17,12 +17,16 @@ const ChangeLogBanner = ({ updates = defaultProps.updates }) => {
                                 <strong className="govuk-tag change-log-banner-tag">
                                     {update.type}
                                 </strong>
-                                <time dateTime={update.date}>
-                                    {format(new Date(update.date), 'd MMMM yyyy')}
-                                </time> &mdash; {update.heading}
-                                <a className={"govuk-link-white govuk-!-margin-left-1"} href={update.link}>
+                                {update.date && (
+                                    <time dateTime={update.date}>
+                                        {format(new Date(update.date), 'd MMMM yyyy')}
+                                    </time> 
+                                )} &mdash; {update.heading} 
+                                {update.link && (
+                                    <a className={"govuk-link-white govuk-!-margin-left-1"} href={update.link}>
                                     {update.linkTitle ? update.linkTitle : 'More'}
-                                </a>
+                                    </a>
+                                )}
                             </div>
                         </div>
                     )