@bento-core/about 1.0.0 → 1.0.1-testProject.0

package/dist/aboutBodyView.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _core = require("@material-ui/core");
 var _xoomInOutView = _interopRequireDefault(require("./xoomInOutView"));
-var _AboutTableExternalLink = _interopRequireDefault(require("./assets/About-Table-ExternalLink.svg"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const AboutBody = _ref => {
   let {
@@ -56,7 +55,9 @@ const AboutBody = _ref => {
   // Alphetised sub ordered list
   _react.default.createElement("ol", {
     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.listWithAlpahbets && /*#__PURE__*/_react.default.createElement("div", {
+  }, 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", {
     className: classes.text
   }, /*#__PURE__*/_react.default.createElement("ol", {
     type: "a"
@@ -69,7 +70,6 @@ const AboutBody = _ref => {
       const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
       const target = linkAttrs.find(link => link.includes('target:'));
       const url = linkAttrs.find(link => link.includes('url:'));
-      const type = linkAttrs.find(link => link.includes('type:')); // 0 : no img
       const href = splitedParagraph.match(/\((.*)\)/).pop();
       const link = /*#__PURE__*/_react.default.createElement(_core.Link, {
         title: title,
@@ -79,7 +79,7 @@ const AboutBody = _ref => {
         color: "inherit",
         className: classes.link
       }, title);
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, type ? '' : /*#__PURE__*/_react.default.createElement("img", {
+      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',
         ,
@@ -187,13 +187,46 @@ const AboutBody = _ref => {
       outputHTML = /*#__PURE__*/_react.default.createElement("td", {
         className: classes.tableCell
       }, link, type ? '' : /*#__PURE__*/_react.default.createElement("img", {
-        src: _AboutTableExternalLink.default,
+        src: externalIconImage,
         alt: "outbounnd web site icon",
         className: classes.tablelinkIcon
       }));
     }
     return outputHTML;
-  }))))))), /*#__PURE__*/_react.default.createElement("br", null))) : '')), data.imageLocation === 'right' && /*#__PURE__*/_react.default.createElement(_core.Grid, {
+  }))))))), /*#__PURE__*/_react.default.createElement("br", null))) : ''), data.downloadableContentTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.downloadableContentContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.downloadableContentTitle
+  }, data.downloadableContentTitle), /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.text
+  }, data.downloadableContent ? data.downloadableContent.map(contentObj => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, contentObj.paragraph && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.text
+  }, contentObj.paragraph.split('$$').map(splitedParagraph => {
+    // Checking for regex ()[] pattern
+    if (splitedParagraph != null && (/\[(.+)\]\((.+)\)/g.test(splitedParagraph) || /\((.+)\)\[(.+)\]/g.test(splitedParagraph))) {
+      const title = splitedParagraph.match(/\[(.*)\]/).pop();
+      const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
+      const target = linkAttrs.find(link => link.includes('target:'));
+      const url = linkAttrs.find(link => link.includes('url:'));
+      const href = splitedParagraph.match(/\((.*)\)/).pop();
+      const link = /*#__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);
+      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',
+        ,
+        alt: "outbounnd web site icon",
+        className: classes.linkIcon
+      }));
+    }
+    return splitedParagraph;
+  })))) : ''))), data.imageLocation === 'right' && /*#__PURE__*/_react.default.createElement(_core.Grid, {
     item: true,
     lg: 3,
     md: 3,
@@ -213,6 +246,9 @@ const styles = () => ({
     lineHeight: '22px',
     maxWidth: '1440px'
   },
+  tabbedParag: {
+    paddingLeft: '40px'
+  },
   maxWidthContainer: {
     margin: '0px auto 0px auto',
     maxWidth: '1440px'
@@ -236,32 +272,35 @@ const styles = () => ({
   },
   title: props => ({
     color: props.titleColor,
-    fontWeight: 'bold'
+    fontWeight: '500',
+    fontSize: '24px'
   }),
   email: props => ({
     color: props.linkColor,
     fontWeight: 'bold'
   }),
   contentSection: {
-    padding: props => props.data.imageLocation === 'right' ? '8px 25px 8px 0px !important' : '8px 0px 8px 25px !important',
-    float: 'left'
+    padding: props => props.data.imageLocation === 'right' ? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important',
+    float: 'left',
+    background: 'white'
   },
   imageSection: {
     float: 'left'
   },
   aboutSection: {
-    padding: '60px 45px'
+    padding: '0px 45px'
   },
   img: {
     width: '100%'
   },
   linkIcon: {
-    width: '20px',
+    width: '0.8em',
     verticalAlign: 'sub',
-    margin: '0px 0px 0px 2px'
+    margin: '0px 0px 2px 4px'
   },
   link: props => ({
     color: props.linkColor,
+    fontWeight: '600',
     '&:hover': {
       color: props.linkColor
     }
@@ -283,7 +322,6 @@ const styles = () => ({
     borderCollapse: 'collapse',
     fontSize: '12px',
     fontWeight: 'bold',
-    letterSpacing: '0.025em',
     lineHeight: '30px',
     textAlign: 'left',
     width: '100%'
@@ -312,6 +350,19 @@ const styles = () => ({
   },
   MyCasesWizardStep4: {
     width: '600px'
+  },
+  downloadableContentContainer: {
+    background: '#ebebeb',
+    padding: '32px',
+    borderRadius: '8px'
+  },
+  downloadableContentTitle: {
+    fontWeight: 'bold',
+    marginBottom: '20px',
+    color: '#1280AE',
+    fontSize: '20px',
+    fontFamily: 'Lato',
+    letterSpacing: '0.025em'
   }
 });
 AboutBody.defaultProps = {

package/dist/aboutHeaderView.js

@@ -7,6 +7,11 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _core = require("@material-ui/core");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const AboutHeader = _ref => {
   let {
     classes,
@@ -29,13 +34,13 @@ const styles = () => ({
   header: {
     padding: '45px'
   },
-  container: props => ({
+  container: props => _objectSpread({
     background: props.background
-  }),
-  whitePadding: {
-    height: '6px',
-    background: 'white'
-  },
+  }, props.container),
+  whitePadding: props => _objectSpread({
+    height: props.background,
+    background: props.background
+  }, props.whitePadding),
   titleBody: {
     textAlign: 'center'
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/about",
-  "version": "1.0.0",
+  "version": "1.0.1-testProject.0",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   },
   "author": "CTOS Bento Team",
   "license": "ISC",
-  "gitHead": "4493c4a5fa666211345fea022ec06841a323d446"
+  "gitHead": "1809e1d1607e3eaa4b1ff9f0f0e56da7b2c3525a"
 }

package/src/aboutBodyView.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Grid, Link, withStyles } from '@material-ui/core';
 import XoomInOut from './xoomInOutView';
-import tableExternalIcon from './assets/About-Table-ExternalLink.svg';
 
-const AboutBody = ({ classes, data, externalIconImage }) => {
+const AboutBody = ({
+  classes, data, externalIconImage,
+}) => {
   function boldText(text) {
     const boldedText = text.split('$$').map((splitedText) => {
       if (splitedText != null && (/\*(.*)\*/.test(splitedText))) {
@@ -44,6 +45,14 @@ const AboutBody = ({ classes, data, externalIconImage }) => {
                       </ol>
                     </div>
                   )}
+                  {contentObj.listWithBullets && (
+                    <div className={classes.text}>
+                      {/* Alphabetised ordered list */}
+                      <ul>
+                        { contentObj.listWithBullets.map((listObj) => <li>{listObj.includes('$$') ? boldText(listObj) : listObj}</li>)}
+                      </ul>
+                    </div>
+                  )}
                   {/* Ordered List with Alphabets logic */}
                   {contentObj.listWithAlpahbets && (
                     <div className={classes.text}>
@@ -64,7 +73,6 @@ const AboutBody = ({ classes, data, externalIconImage }) => {
                           const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
                           const target = linkAttrs.find((link) => link.includes('target:'));
                           const url = linkAttrs.find((link) => link.includes('url:'));
-                          const type = linkAttrs.find((link) => link.includes('type:')); // 0 : no img
                           const href = splitedParagraph.match(/\((.*)\)/).pop();
 
                           const link = (
@@ -83,7 +91,7 @@ const AboutBody = ({ classes, data, externalIconImage }) => {
                           return (
                             <>
                               {link}
-                              {type ? '' : (
+                              {href.includes('@') || !href.includes('http') ? '' : (
                                 <img
                                   src={externalIconImage}
                                   // externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
@@ -207,7 +215,7 @@ const AboutBody = ({ classes, data, externalIconImage }) => {
                                         {link}
                                         {type ? '' : (
                                           <img
-                                            src={tableExternalIcon}
+                                            src={externalIconImage}
                                             alt="outbounnd web site icon"
                                             className={classes.tablelinkIcon}
                                           />
@@ -229,6 +237,65 @@ const AboutBody = ({ classes, data, externalIconImage }) => {
                 </>
               )) : ''}
             </span>
+            {data.downloadableContentTitle
+        && (
+        <div className={classes.downloadableContentContainer}>
+          <div className={classes.downloadableContentTitle}>{data.downloadableContentTitle}</div>
+          <span className={classes.text}>
+            {data.downloadableContent ? data.downloadableContent.map((contentObj) => (
+              <>
+                {/* Ordered List with Numbers logic */}
+
+                {/* Paragraphs */}
+                {contentObj.paragraph && (
+                <div className={classes.text}>
+                  { contentObj.paragraph.split('$$').map((splitedParagraph) => {
+                    // Checking for regex ()[] pattern
+                    if (splitedParagraph != null && ((/\[(.+)\]\((.+)\)/g.test(splitedParagraph)) || (/\((.+)\)\[(.+)\]/g.test(splitedParagraph)))) {
+                      const title = splitedParagraph.match(/\[(.*)\]/).pop();
+                      const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
+                      const target = linkAttrs.find((link) => link.includes('target:'));
+                      const url = linkAttrs.find((link) => link.includes('url:'));
+                      const href = splitedParagraph.match(/\((.*)\)/).pop();
+
+                      const link = (
+                        <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>
+                      );
+
+                      return (
+                        <>
+                          {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}
+                            />
+                          )}
+
+                        </>
+                      );
+                    }
+
+                    return splitedParagraph;
+                  })}
+                </div>
+                )}
+              </>
+            )) : ''}
+          </span>
+        </div>
+        )}
           </Grid>
           {data.imageLocation === 'right'
             && (
@@ -254,6 +321,9 @@ const styles = () => ({
     lineHeight: '22px',
     maxWidth: '1440px',
   },
+  tabbedParag: {
+    paddingLeft: '40px',
+  },
   maxWidthContainer: {
     margin: '0px auto 0px auto',
     maxWidth: '1440px',
@@ -277,7 +347,8 @@ const styles = () => ({
   },
   title: (props) => ({
     color: props.titleColor,
-    fontWeight: 'bold',
+    fontWeight: '500',
+    fontSize: '24px',
   }),
   email: (props) => ({
     color: props.linkColor,
@@ -285,25 +356,27 @@ const styles = () => ({
   }),
   contentSection: {
     padding: (props) => (props.data.imageLocation === 'right'
-      ? '8px 25px 8px 0px !important' : '8px 0px 8px 25px !important'),
+      ? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important'),
     float: 'left',
+    background: 'white',
   },
   imageSection: {
     float: 'left',
   },
   aboutSection: {
-    padding: '60px 45px',
+    padding: '0px 45px',
   },
   img: {
     width: '100%',
   },
   linkIcon: {
-    width: '20px',
+    width: '0.8em',
     verticalAlign: 'sub',
-    margin: '0px 0px 0px 2px',
+    margin: '0px 0px 2px 4px',
   },
   link: (props) => ({
     color: props.linkColor,
+    fontWeight: '600',
     '&:hover': {
       color: props.linkColor,
     },
@@ -325,7 +398,6 @@ const styles = () => ({
     borderCollapse: 'collapse',
     fontSize: '12px',
     fontWeight: 'bold',
-    letterSpacing: '0.025em',
     lineHeight: '30px',
     textAlign: 'left',
     width: '100%',
@@ -356,6 +428,19 @@ const styles = () => ({
   MyCasesWizardStep4: {
     width: '600px',
   },
+  downloadableContentContainer: {
+    background: '#ebebeb',
+    padding: '32px',
+    borderRadius: '8px',
+  },
+  downloadableContentTitle: {
+    fontWeight: 'bold',
+    marginBottom: '20px',
+    color: '#1280AE',
+    fontSize: '20px',
+    fontFamily: 'Lato',
+    letterSpacing: '0.025em',
+  },
 });
 
 AboutBody.defaultProps = {

package/src/aboutHeaderView.js

@@ -16,11 +16,13 @@ const styles = () => ({
   },
   container: (props) => ({
     background: props.background,
+    ...props.container,
+  }),
+  whitePadding: (props) => ({
+    height: props.background,
+    background: props.background,
+    ...props.whitePadding,
   }),
-  whitePadding: {
-    height: '6px',
-    background: 'white',
-  },
   titleBody: {
     textAlign: 'center',
   },