npm - @bento-core/about - Versions diffs - 1.0.1-CDS.1 → 1.0.1-CDS.10 - Mend

@bento-core/about 1.0.1-CDS.1 → 1.0.1-CDS.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/aboutBodyView.js CHANGED Viewed

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _core = require("@material-ui/core");
+var _reactRouterDom = require("react-router-dom");
 var _xoomInOutView = _interopRequireDefault(require("./xoomInOutView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const AboutBody = _ref => {
   let {
     classes,
@@ -57,7 +59,51 @@ const AboutBody = _ref => {
     type: "a"
   }, listObj.listWithAlpahbets.map(listObj1 => /*#__PURE__*/_react.default.createElement("li", null, listObj1.includes('$$') ? boldText(listObj1) : listObj1))) : /*#__PURE__*/_react.default.createElement("li", null, listObj.includes('$$') ? boldText(listObj) : listObj)))), contentObj.listWithBullets && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.text
-  }, /*#__PURE__*/_react.default.createElement("ul", null, contentObj.listWithBullets.map(listObj => /*#__PURE__*/_react.default.createElement("li", null, listObj.includes('$$') ? boldText(listObj) : listObj)))), contentObj.listWithAlpahbets && /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("ul", null, contentObj.listWithBullets.map(listObj => {
+    // Split the list item by '$$' to detect bolded text or other inline patterns
+    const parts = listObj.split('$$').map(splitedItem => {
+      // Check for links using regex pattern: [title](url) or (url)[title]
+      if (splitedItem != null && (/\[(.+)\]\((.+)\)/g.test(splitedItem) || /\((.+)\)\[(.+)\]/g.test(splitedItem))) {
+        const title = splitedItem.match(/\[(.*)\]/).pop();
+        const linkAttrs = splitedItem.match(/\((.*)\)/).pop().split(' ');
+        const target = linkAttrs.find(link => link.includes('target:'));
+        const url = linkAttrs.find(link => link.includes('url:'));
+        const href = splitedItem.match(/\((.*)\)/).pop();
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Link, {
+          title: title,
+          target: target ? target.replace('target:', '') : '_blank',
+          rel: "noreferrer",
+          href: url ? url.replace('url:', '') : href && href.includes('@') ? "mailto:".concat(href) : href,
+          color: "inherit",
+          className: classes.link
+        }, title), href.includes('@') || !href.includes('http') ? '' : /*#__PURE__*/_react.default.createElement("img", {
+          src: externalIconImage
+          // externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
+          ,
+          alt: "outbounnd web site icon",
+          className: classes.linkIcon
+        }));
+      }
+      // Check for bolding inline words using regex
+      if (splitedItem != null && /\*(.*)\*/.test(splitedItem)) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: classes.title
+        }, splitedItem.match(/\*(.*)\*/).pop());
+      }
+      // For email
+      if (splitedItem != null && /@(.*)@/.test(splitedItem)) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: classes.email
+        }, splitedItem.match(/@(.*)@/).pop());
+      }
+      // Return the regular text if no special formatting is needed
+      return splitedItem;
+    });
+    return /*#__PURE__*/_react.default.createElement("li", null, parts);
+  }))), contentObj.listWithAlpahbets && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.text
   }, /*#__PURE__*/_react.default.createElement("ol", {
     type: "a"
@@ -66,11 +112,13 @@ const AboutBody = _ref => {
   }, contentObj.paragraph.split('$$').map(splitedParagraph => {
     // Checking for regex ()[] pattern
     if (splitedParagraph != null && (/\[(.+)\]\((.+)\)/g.test(splitedParagraph) || /\((.+)\)\[(.+)\]/g.test(splitedParagraph))) {
-      const title = splitedParagraph.match(/\[(.*)\]/).pop();
+      const defaultTitle = splitedParagraph.match(/\[(.*)\]/).pop();
       const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
+      const titleMatch = splitedParagraph.match(/title:\s*'([^']+)'/);
+      const title = titleMatch ? titleMatch[1].trim() : defaultTitle;
       const target = linkAttrs.find(link => link.includes('target:'));
       const url = linkAttrs.find(link => link.includes('url:'));
-      const href = splitedParagraph.match(/\((.*)\)/).pop();
+      const href = linkAttrs[0];
       const link = /*#__PURE__*/_react.default.createElement(_core.Link, {
         title: title,
         target: target ? target.replace('target:', '') : '_blank',
@@ -78,7 +126,7 @@ const AboutBody = _ref => {
         href: url ? url.replace('url:', '') : href && href.includes('@') ? "mailto:".concat(href) : href,
         color: "inherit",
         className: classes.link
-      }, title);
+      }, defaultTitle);
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, href.includes('@') || !href.includes('http') ? '' : /*#__PURE__*/_react.default.createElement("img", {
         src: externalIconImage
         // externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
@@ -226,14 +274,30 @@ const AboutBody = _ref => {
       }));
     }
     return splitedParagraph;
-  })))) : ''))), data.imageLocation === 'right' && /*#__PURE__*/_react.default.createElement(_core.Grid, {
+  })))) : ''))), (data.imageLocation === 'right' || data.actionButtonLabel && data.actionLink) && /*#__PURE__*/_react.default.createElement(_core.Grid, {
     item: true,
     lg: 3,
     md: 3,
     sm: 12,
     xs: 12,
     className: classes.imageSection
-  }, data.image))), data.secondaryZoomImageTitle && /*#__PURE__*/_react.default.createElement("div", {
+  }, data.image, data.actionButtonLabel && data.actionLink && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.actionSection
+  }, data.actionTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.actionTitle
+  }, data.actionTitle), /*#__PURE__*/_react.default.createElement(_core.Link, _extends({}, data.actionLink && data.actionLink.includes('http') ? {
+    href: data.actionLink,
+    target: '_blank',
+    rel: 'noreferrer'
+  } : {
+    component: _reactRouterDom.Link,
+    to: data.actionLink
+  }, {
+    title: data.actionButtonLabel,
+    color: "inherit",
+    underline: "none",
+    className: classes.actionLink
+  }), data.actionButtonLabel))))), data.secondaryZoomImageTitle && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.secondayTitle
   }, data.secondaryZoomImageTitle), data.secondaryImage && /*#__PURE__*/_react.default.createElement(_xoomInOutView.default, null, data.secondaryImageData));
 };
@@ -280,13 +344,61 @@ const styles = () => ({
     fontWeight: 'bold'
   }),
   contentSection: {
-    padding: props => props.data.imageLocation === 'right' ? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important',
+    padding: props => props.data.imageLocation === 'right' || props.data.actionButtonLabel && props.data.actionLink ? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important',
+    marginBottom: props => props.data.marginBottom ? props.data.marginBottom : 0,
     float: 'left',
     background: 'white'
   },
   imageSection: {
     float: 'left'
   },
+  actionSection: {
+    display: 'flex',
+    width: '100%',
+    padding: '25px 25px 35px',
+    flexDirection: 'column',
+    alignItems: 'center',
+    flexShrink: 0,
+    border: '0.5px solid #98B5CB',
+    background: '#EBF3F7',
+    marginTop: '19px'
+  },
+  actionTitle: {
+    color: '#7A9BB1',
+    textAlign: 'center',
+    fontFamily: 'Lato',
+    fontSize: '19px',
+    fontStyle: 'normal',
+    fontWeight: '700',
+    lineHeight: '25px',
+    letterSpacing: '0.15px',
+    textTransform: 'uppercase',
+    wordBreak: 'break-word',
+    marginBottom: '22px'
+  },
+  actionLink: {
+    display: 'flex',
+    width: '210px',
+    height: 'fit-content',
+    minHeight: '45px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '10px',
+    flexShrink: '0',
+    borderRadius: '10px',
+    border: '1px solid #42779A',
+    background: '#0E6292',
+    color: '#FFF',
+    textAlign: 'center',
+    fontFamily: 'Lato',
+    fontSize: '12px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 'normal',
+    letterSpacing: '1px',
+    wordBreak: 'break-word',
+    padding: '15.5px'
+  },
   aboutSection: {
     padding: '0px 45px'
   },
@@ -294,9 +406,9 @@ const styles = () => ({
     width: '100%'
   },
   linkIcon: {
-    width: '0.8em',
+    width: '1em',
     verticalAlign: 'sub',
-    margin: '0px 0px 2px 4px'
+    margin: '0px 0px 2px 2px'
   },
   link: props => ({
     color: props.linkColor,

package/dist/aboutHeaderView.js CHANGED Viewed

@@ -24,7 +24,7 @@ const AboutHeader = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "about_title",
     className: classes.titleBody
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("h1", {
     className: classes.titleText
   }, title))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.whitePadding
@@ -50,7 +50,8 @@ const styles = () => ({
     color: props.titleColor,
     fontFamily: 'Lato',
     fontSize: '35px',
-    fontWeight: 'bold'
+    fontWeight: 'bold',
+    display: 'inline'
   })
 });
 AboutHeader.defaultProps = {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/about",
-  "version": "1.0.1-CDS.1",
+  "version": "1.0.1-CDS.10",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -13,7 +13,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@bento-core/facet-filter": "^1.0.0",
+    "@bento-core/facet-filter": "^1.0.1-CDS.5",
     "lodash": "^4.17.20",
     "react-zoom-pan-pinch": "*"
   },
@@ -22,9 +22,10 @@
     "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.0",
-    "react-redux": "^7.2.1"
+    "react-redux": "^7.2.1",
+    "react-router-dom": "^5.1.2"
   },
   "author": "CTOS Bento Team",
   "license": "ISC",
-  "gitHead": "4d9ace3bd0e60939652f0922f5f692fe66659c11"
+  "gitHead": "37d12f5fc76bbc0e20d841fa0b8b4a908e39e6ed"
 }

package/src/aboutBodyView.js CHANGED Viewed

@@ -1,5 +1,7 @@
+/* eslint-disable max-len */
 import React from 'react';
 import { Grid, Link, withStyles } from '@material-ui/core';
+import { Link as RouterLink } from 'react-router-dom';
 import XoomInOut from './xoomInOutView';
 const AboutBody = ({
@@ -46,12 +48,61 @@ const AboutBody = ({
                     </div>
                   )}
                   {contentObj.listWithBullets && (
-                    <div className={classes.text}>
-                      {/* Alphabetised ordered list */}
-                      <ul>
-                        { contentObj.listWithBullets.map((listObj) => <li>{listObj.includes('$$') ? boldText(listObj) : listObj}</li>)}
-                      </ul>
-                    </div>
+                  <div className={classes.text}>
+                    <ul>
+                      {contentObj.listWithBullets.map((listObj) => {
+                        // Split the list item by '$$' to detect bolded text or other inline patterns
+                        const parts = listObj.split('$$').map((splitedItem) => {
+                          // Check for links using regex pattern: [title](url) or (url)[title]
+                          if (splitedItem != null && (/\[(.+)\]\((.+)\)/g.test(splitedItem) || /\((.+)\)\[(.+)\]/g.test(splitedItem))) {
+                            const title = splitedItem.match(/\[(.*)\]/).pop();
+                            const linkAttrs = splitedItem.match(/\((.*)\)/).pop().split(' ');
+                            const target = linkAttrs.find((link) => link.includes('target:'));
+                            const url = linkAttrs.find((link) => link.includes('url:'));
+                            const href = splitedItem.match(/\((.*)\)/).pop();
+                            return (
+                              <>
+                                <Link
+                                  title={title}
+                                  target={target ? target.replace('target:', '') : '_blank'}
+                                  rel="noreferrer"
+                                  href={url ? url.replace('url:', '') : (href && href.includes('@') ? `mailto:${href}` : href)}
+                                  color="inherit"
+                                  className={classes.link}
+                                >
+                                  {title}
+                                </Link>
+                                {href.includes('@') || !href.includes('http') ? '' : (
+                                  <img
+                                    src={externalIconImage}
+                                    // externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
+                                    alt="outbounnd web site icon"
+                                    className={classes.linkIcon}
+                                  />
+                                )}
+                              </>
+                            );
+                          }
+                          // Check for bolding inline words using regex
+                          if (splitedItem != null && (/\*(.*)\*/.test(splitedItem))) {
+                            return <span className={classes.title}>{splitedItem.match(/\*(.*)\*/).pop()}</span>;
+                          }
+                          // For email
+                          if (splitedItem != null && (/@(.*)@/.test(splitedItem))) {
+                            return <span className={classes.email}>{splitedItem.match(/@(.*)@/).pop()}</span>;
+                          }
+                          // Return the regular text if no special formatting is needed
+                          return splitedItem;
+                        });
+                        return <li>{parts}</li>;
+                      })}
+                    </ul>
+                  </div>
                   )}
                   {/* Ordered List with Alphabets logic */}
                   {contentObj.listWithAlpahbets && (
@@ -69,11 +120,13 @@ const AboutBody = ({
                       { contentObj.paragraph.split('$$').map((splitedParagraph) => {
                         // Checking for regex ()[] pattern
                         if (splitedParagraph != null && ((/\[(.+)\]\((.+)\)/g.test(splitedParagraph)) || (/\((.+)\)\[(.+)\]/g.test(splitedParagraph)))) {
-                          const title = splitedParagraph.match(/\[(.*)\]/).pop();
+                          const defaultTitle = splitedParagraph.match(/\[(.*)\]/).pop();
                           const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
+                          const titleMatch = splitedParagraph.match(/title:\s*'([^']+)'/);
+                          const title = titleMatch ? titleMatch[1].trim() : defaultTitle;
                           const target = linkAttrs.find((link) => link.includes('target:'));
                           const url = linkAttrs.find((link) => link.includes('url:'));
-                          const href = splitedParagraph.match(/\((.*)\)/).pop();
+                          const href = linkAttrs[0];
                           const link = (
                             <Link
@@ -84,7 +137,7 @@ const AboutBody = ({
                               color="inherit"
                               className={classes.link}
                             >
-                              {title}
+                              {defaultTitle}
                             </Link>
                           );
@@ -297,11 +350,33 @@ const AboutBody = ({
         </div>
         )}
           </Grid>
-          {data.imageLocation === 'right'
+          {(data.imageLocation === 'right'
+            || (data.actionButtonLabel && data.actionLink))
             && (
-              <Grid item lg={3} md={3} sm={12} xs={12} className={classes.imageSection}>
-                {data.image}
-              </Grid>
+            <Grid item lg={3} md={3} sm={12} xs={12} className={classes.imageSection}>
+              {data.image}
+              {data.actionButtonLabel && data.actionLink && (
+                <div className={classes.actionSection}>
+                  {data.actionTitle && (
+                    <div className={classes.actionTitle}>
+                      {data.actionTitle}
+                    </div>
+                  )}
+                  <Link
+                    {...(data.actionLink && data.actionLink.includes('http')
+                      ? { href: data.actionLink, target: '_blank', rel: 'noreferrer' }
+                      : { component: RouterLink, to: data.actionLink })}
+                    title={data.actionButtonLabel}
+                    color="inherit"
+                    underline="none"
+                    className={classes.actionLink}
+                  >
+                    {data.actionButtonLabel}
+                  </Link>
+                </div>
+              )}
+            </Grid>
             )}
         </Grid>
       </div>
@@ -355,14 +430,62 @@ const styles = () => ({
     fontWeight: 'bold',
   }),
   contentSection: {
-    padding: (props) => (props.data.imageLocation === 'right'
+    padding: (props) => ((props.data.imageLocation === 'right' || (props.data.actionButtonLabel && props.data.actionLink))
       ? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important'),
+    marginBottom: (props) => (props.data.marginBottom ? props.data.marginBottom : 0),
     float: 'left',
     background: 'white',
   },
   imageSection: {
     float: 'left',
   },
+  actionSection: {
+    display: 'flex',
+    width: '100%',
+    padding: '25px 25px 35px',
+    flexDirection: 'column',
+    alignItems: 'center',
+    flexShrink: 0,
+    border: '0.5px solid #98B5CB',
+    background: '#EBF3F7',
+    marginTop: '19px',
+  },
+  actionTitle: {
+    color: '#7A9BB1',
+    textAlign: 'center',
+    fontFamily: 'Lato',
+    fontSize: '19px',
+    fontStyle: 'normal',
+    fontWeight: '700',
+    lineHeight: '25px',
+    letterSpacing: '0.15px',
+    textTransform: 'uppercase',
+    wordBreak: 'break-word',
+    marginBottom: '22px',
+  },
+  actionLink: {
+    display: 'flex',
+    width: '210px',
+    height: 'fit-content',
+    minHeight: '45px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '10px',
+    flexShrink: '0',
+    borderRadius: '10px',
+    border: '1px solid #42779A',
+    background: '#0E6292',
+    color: '#FFF',
+    textAlign: 'center',
+    fontFamily: 'Lato',
+    fontSize: '12px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 'normal',
+    letterSpacing: '1px',
+    wordBreak: 'break-word',
+    padding: '15.5px',
+  },
   aboutSection: {
     padding: '0px 45px',
   },
@@ -370,9 +493,9 @@ const styles = () => ({
     width: '100%',
   },
   linkIcon: {
-    width: '0.8em',
+    width: '1em',
     verticalAlign: 'sub',
-    margin: '0px 0px 2px 4px',
+    margin: '0px 0px 2px 2px',
   },
   link: (props) => ({
     color: props.linkColor,

package/src/aboutHeaderView.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { withStyles } from '@material-ui/core';
 const AboutHeader = ({ classes, title }) => (
   <div className={classes.container}>
     <div className={classes.header}>
-      <div id="about_title" className={classes.titleBody}><span className={classes.titleText}>{title}</span></div>
+      <div id="about_title" className={classes.titleBody}><h1 className={classes.titleText}>{title}</h1></div>
     </div>
     <div className={classes.whitePadding} />
   </div>
@@ -33,6 +33,7 @@ const styles = () => ({
     fontFamily: 'Lato',
     fontSize: '35px',
     fontWeight: 'bold',
+    display: 'inline',
   }),
 });