@bento-core/about 0.2.0

package/dist/assets/Model-Buttons-ZoomOut.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st2{display:inline;fill:#FFFFFF;}
+	.st3{fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st4{fill:#FFFFFF;}
+	.st5{display:inline;}
+</style>
+<g id="Layer_1" class="st0">
+	<circle class="st1" cx="20.9" cy="21" r="20"/>
+	<path class="st2" d="M32.8,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,26.9,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.3,33,33.4,32.2,32.8,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.2,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st2" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7v0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7v0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+	<path class="st2" d="M20.2,25.3v-9.8c0-0.4,0.3-0.7,0.7-0.7h0c0.4,0,0.7,0.3,0.7,0.7v9.8c0,0.4-0.3,0.7-0.7,0.7h0
+		C20.5,26,20.2,25.7,20.2,25.3z"/>
+</g>
+<g id="Layer_2">
+	<circle class="st3" cx="20.9" cy="20.9" r="20"/>
+	<path class="st4" d="M32.9,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,27,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.4,33,33.4,32.2,32.9,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.3,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st4" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7l0,0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+</g>
+<g id="Layer_3" class="st0">
+	<circle class="st1" cx="20.8" cy="21" r="20"/>
+	<g class="st5">
+		<g>
+			<path class="st4" d="M34.9,20.4l-1.8-1.8c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l0.5,0.5h-7c-0.3-2.1-1.9-3.7-4-4v-7l0.5,0.5
+				c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1L21.3,7c-0.3-0.3-0.8-0.3-1,0l-1.8,1.8c-0.3,0.3-0.3,0.7,0,1
+				c0.3,0.3,0.7,0.3,1,0l0.6-0.5v7c-2.1,0.3-3.7,1.9-4,4h-7l0.5-0.5c0.3-0.3,0.3-0.8,0-1c-0.3-0.3-0.7-0.3-1,0l-1.8,1.8
+				c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1l-0.5-0.5h7
+				c0.3,2.1,1.9,3.7,4,4v7l-0.5-0.5c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2
+				c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8c0.3-0.3,0.3-0.7,0-1c-0.3-0.3-0.7-0.3-1,0l-0.6,0.5v-7c2.1-0.3,3.7-2,4-4h7l-0.5,0.5
+				c-0.3,0.3-0.3,0.7,0,1c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8C35.1,21.2,35.1,20.7,34.9,20.4z M20.9,24.3
+				c-1.8,0-3.3-1.5-3.3-3.3c0-1.8,1.5-3.3,3.3-3.3c1.8,0,3.3,1.5,3.3,3.3C24.2,22.8,22.7,24.3,20.9,24.3z"/>
+			<path class="st4" d="M20.9,35.3c-0.2,0-0.4-0.1-0.6-0.3l-1.8-1.8c-0.2-0.2-0.3-0.4-0.3-0.6c0-0.2,0.1-0.4,0.3-0.6
+				c0.3-0.3,0.9-0.3,1.2,0l0.3,0.3v-6.5c-2-0.4-3.6-2-4-4H9.5l0.3,0.3c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6
+				c-0.3,0.3-0.9,0.3-1.2,0l-1.8-1.8c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8c0.3-0.3,0.9-0.3,1.2,0c0.2,0.1,0.2,0.3,0.3,0.6
+				c0,0.2-0.1,0.5-0.3,0.6l-0.3,0.3H16c0.3-2,1.9-3.6,4-4V9.5l-0.4,0.3c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8
+				c0.1-0.2,0.3-0.2,0.6-0.3c0.2,0,0.5,0.1,0.6,0.3l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2c-0.3,0.3-0.9,0.3-1.2,0l-0.3-0.3v6.6
+				c2,0.4,3.6,1.9,4,4h6.6L32,19.8c-0.3-0.3-0.3-0.9,0-1.2c0.3-0.3,0.9-0.3,1.2,0l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2l-1.8,1.8
+				c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l0.3-0.3h-6.5c-0.4,2-2,3.6-4,4v6.6l0.4-0.3c0.3-0.3,0.9-0.3,1.2,0
+				c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6l-1.8,1.8C21.3,35.2,21.1,35.3,20.9,35.3z M19.1,32.1c-0.2,0-0.3,0.1-0.4,0.2
+				c-0.1,0.1-0.2,0.3-0.2,0.4s0.1,0.3,0.2,0.4l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4
+				c-0.2-0.2-0.6-0.2-0.8,0L21.5,33v-7.3l0.1,0c2-0.3,3.6-1.9,3.9-3.9l0-0.1h7.4l-0.7,0.7c-0.2,0.2-0.2,0.6,0,0.8
+				c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.2-0.2,0.2-0.6,0-0.9L33,18.8c-0.2-0.2-0.6-0.2-0.8,0c-0.2,0.2-0.2,0.6,0,0.8l0.7,0.8h-7.4
+				l0-0.1c-0.3-2-1.9-3.6-3.9-3.9l-0.1,0V9l0.7,0.7c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4S23.2,9,23.1,8.8l-1.8-1.8
+				C21.1,7,21,6.9,20.8,6.9c-0.2,0-0.3,0.1-0.4,0.2l-1.8,1.8c-0.2,0.2-0.2,0.6,0,0.8c0.2,0.2,0.6,0.2,0.8,0L20.3,9v7.3l-0.1,0
+				c-2,0.3-3.6,1.9-3.9,3.9l0,0.1H8.9l0.7-0.7c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.3-0.2-0.4c-0.2-0.2-0.6-0.2-0.9,0l-1.8,1.8
+				c-0.2,0.2-0.2,0.6,0,0.8l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4l-0.7-0.7h7.4l0,0.1
+				c0.3,2,1.9,3.6,3.9,3.9l0.1,0V33l-0.7-0.7C19.4,32.2,19.3,32.1,19.1,32.1z M20.9,24.4c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5
+				c1.9,0,3.5,1.6,3.5,3.5S22.8,24.4,20.9,24.4z M20.9,17.8c-1.8,0-3.2,1.4-3.2,3.2s1.4,3.2,3.2,3.2c1.8,0,3.2-1.4,3.2-3.2
+				S22.6,17.8,20.9,17.8z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_4">
+</g>
+</svg>

package/dist/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AboutBody", {
+  enumerable: true,
+  get: function get() {
+    return _aboutBodyView.default;
+  }
+});
+Object.defineProperty(exports, "AboutHeader", {
+  enumerable: true,
+  get: function get() {
+    return _aboutHeaderView.default;
+  }
+});
+Object.defineProperty(exports, "xoomInOut", {
+  enumerable: true,
+  get: function get() {
+    return _xoomInOutView.default;
+  }
+});
+var _aboutHeaderView = _interopRequireDefault(require("./aboutHeaderView"));
+var _aboutBodyView = _interopRequireDefault(require("./aboutBodyView"));
+var _xoomInOutView = _interopRequireDefault(require("./xoomInOutView"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/xoomInOutView.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@material-ui/core");
+var _reactZoomPanPinch = require("react-zoom-pan-pinch");
+var _ModelButtonsCenter = _interopRequireDefault(require("./assets/Model-Buttons-Center.svg"));
+var _ModelButtonsZoomIn = _interopRequireDefault(require("./assets/Model-Buttons-ZoomIn.svg"));
+var _ModelButtonsZoomOut = _interopRequireDefault(require("./assets/Model-Buttons-ZoomOut.svg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const limitToBounds = false;
+const panningEnabled = true;
+const transformEnabled = true;
+const pinchEnabled = true;
+const limitToWrapperBounds = false;
+const disabled = false;
+const dbClickEnabled = true;
+const lockAxisX = false;
+const lockAxisY = false;
+const velocityEqualToMove = false;
+const enableWheel = true;
+const enableTouchPadPinch = true;
+const enableVelocity = true;
+const disableLimitsOnWheel = true;
+const ModelPage = _ref => {
+  let {
+    classes,
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, {
+    defaultScale: 1,
+    options: {
+      limitToBounds,
+      transformEnabled,
+      disabled
+    },
+    pan: {
+      disabled: !panningEnabled,
+      limitToWrapperBounds,
+      lockAxisX,
+      lockAxisY,
+      velocityEqualToMove,
+      velocity: enableVelocity
+    },
+    pinch: {
+      disabled: !pinchEnabled
+    },
+    doubleClick: {
+      disabled: !dbClickEnabled
+    },
+    wheel: {
+      wheelEnabled: enableWheel,
+      touchPadEnabled: enableTouchPadPinch,
+      disableLimitsOnWheel
+    }
+  }, _ref2 => {
+    let {
+      zoomIn,
+      zoomOut,
+      resetTransform
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.modelContainer
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.tools
+    }, /*#__PURE__*/_react.default.createElement(_core.Button, {
+      onClick: zoomIn,
+      className: classes.button
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: _ModelButtonsZoomIn.default,
+      alt: "Zoom In"
+    })), /*#__PURE__*/_react.default.createElement(_core.Button, {
+      onClick: zoomOut,
+      className: classes.button
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: _ModelButtonsZoomOut.default,
+      alt: "Zoom Out"
+    })), /*#__PURE__*/_react.default.createElement(_core.Button, {
+      onClick: resetTransform,
+      className: classes.button
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: _ModelButtonsCenter.default,
+      alt: "Center "
+    }))), /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.imgSection
+    }, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, null, children)));
+  }));
+};
+const styles = () => ({
+  linkIcon: {
+    width: '20px',
+    verticalAlign: 'sub',
+    margin: '0px 0px 0px 2px'
+  },
+  linkIcon2: {
+    width: '20px',
+    verticalAlign: 'sub',
+    margin: '0px 0px 0px 0px'
+  },
+  link: {
+    color: '#0296C9',
+    fontWeight: 'bolder',
+    '&:hover': {
+      color: '#0296C9',
+      fontWeight: 'bolder',
+      textDecoration: 'none'
+    }
+  },
+  title: {
+    color: '#0B3556',
+    textTransform: 'uppercase',
+    fontWeight: 'bold'
+  },
+  button: {
+    color: 'white',
+    '& img': {
+      width: '40px'
+    }
+  },
+  container: {
+    maxWidth: '1440px',
+    margin: 'auto'
+  },
+  tool: {
+    margin: '20px auto'
+  },
+  schema: {
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+    width: '100%',
+    margin: 'auto'
+  },
+  imgSection: {
+    width: '100%',
+    border: '2px solid #7D92AE',
+    borderRadius: '23px',
+    marginBottom: '20px',
+    height: 'auto',
+    overflow: 'hidden',
+    '& .react-transform-element': {
+      display: '-webkit-box !important'
+    }
+  },
+  img: {
+    width: '100%'
+  },
+  modelContainer: {
+    display: 'flex',
+    maxWidth: '1440px',
+    margin: '-67px 40px 60px 40px',
+    textAlign: 'center',
+    '@media (min-width: 1400px)': {
+      margin: '-67px auto 60px auto'
+    }
+  },
+  tools: {
+    maxWidth: '60px',
+    height: '168px',
+    padding: '4px',
+    marginTop: '100px',
+    background: '#7D92AE',
+    borderRadius: '23px 0px 0px 23px'
+  }
+});
+var _default = (0, _core.withStyles)(styles)(ModelPage);
+exports.default = _default;

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@bento-core/about",
+  "version": "0.2.0",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "cross-env-shell rm -rf dist && NODE_ENV=production BABEL_ENV=es babel src --out-dir dist --copy-files",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": "https://github.com/CBIIT/bento-frontend",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@bento-core/facet-filter": "*",
+    "@material-ui/core": "^4.10.0",
+    "clsx": "*",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.0",
+    "react-redux": "^7.2.1",
+    "react-zoom-pan-pinch": "*"
+  },
+  "dependencies": {
+    "lodash": "^4.17.20"
+  },
+  "author": "CTOS Bento Team",
+  "license": "ISC",
+  "gitHead": "10ee9deeae6dd0f139ecb7a70afc4c96a4e33d74"
+}

package/src/aboutBodyView.js

@@ -0,0 +1,373 @@
+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 }) => {
+  function boldText(text) {
+    const boldedText = text.split('$$').map((splitedText) => {
+      if (splitedText != null && (/\*(.*)\*/.test(splitedText))) {
+        return (<span className={classes.title}>{splitedText.match(/\*(.*)\*/).pop()}</span>);
+      }
+      return splitedText;
+    });
+    return boldedText;
+  }
+  return (
+    <>
+      <div className={classes.container}>
+        <Grid container spacing={16} direction="row" className={classes.aboutSection}>
+          {data.imageLocation === 'left'
+            && (
+              <Grid item lg={3} md={3} sm={12} xs={12} className={classes.imageSection}>
+                {data.image}
+              </Grid>
+            )}
+          <Grid item lg={9} md={9} sm={12} xs={12} className={classes.contentSection}>
+            <span className={classes.text}>
+              {data.content ? data.content.map((contentObj) => (
+                <>
+                  {/* Ordered List with Numbers logic */}
+                  {contentObj.listWithNumbers && (
+                    <div className={classes.text}>
+                      {/* Numbered ordered list */}
+                      <ol>
+                        { contentObj.listWithNumbers.map((listObj) => (
+                          listObj.listWithAlpahbets ? (
+                            // Alphetised sub ordered list
+                            <ol type="a">
+                              {/* bolding text if necessary */}
+                              { listObj.listWithAlpahbets.map((listObj1) => <li>{listObj1.includes('$$') ? boldText(listObj1) : listObj1}</li>)}
+                            </ol>
+                          ) : <li>{listObj.includes('$$') ? boldText(listObj) : listObj}</li>
+                        ))}
+                      </ol>
+                    </div>
+                  )}
+                  {/* Ordered List with Alphabets logic */}
+                  {contentObj.listWithAlpahbets && (
+                    <div className={classes.text}>
+                      {/* Alphabetised ordered list */}
+                      <ol type="a">
+                        { contentObj.listWithAlpahbets.map((listObj) => <li>{listObj.includes('$$') ? boldText(listObj) : listObj}</li>)}
+                      </ol>
+                    </div>
+                  )}
+
+                  {/* 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 type = linkAttrs.find((link) => link.includes('type:')); // 0 : no img
+                          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}
+                              {type ? '' : (
+                                <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}
+                                />
+                              )}
+
+                            </>
+                          );
+                        }
+                        // For email
+                        if (splitedParagraph != null && (/@(.*)@/.test(splitedParagraph))) {
+                          return (<span className={classes.email}>{splitedParagraph.match(/@(.*)@/).pop()}</span>);
+                        }
+                        // For sub headings
+                        if (splitedParagraph != null && (/#(.*)#/.test(splitedParagraph))) {
+                          return (<div className={classes.title}>{splitedParagraph.match(/#(.*)#/).pop()}</div>);
+                        }
+                        // For bolding inline words
+                        if (splitedParagraph != null && (/\*(.*)\*/.test(splitedParagraph))) {
+                          return (<span className={classes.title}>{splitedParagraph.match(/\*(.*)\*/).pop()}</span>);
+                        }
+                        // For downloading things
+                        if (splitedParagraph != null && (/{(.*)}/.test(splitedParagraph))) {
+                          const downloadAttrs = splitedParagraph.match(/{(.*)}/).pop().split(',');
+                          const downloadLink = downloadAttrs.find((link) => link.includes('link:'));
+                          const downloadTitle = downloadAttrs.find((link) => link.includes('title:'));
+                          return (
+                            <Link
+                              target="_blank"
+                              className={classes.link}
+                              href={downloadLink ? downloadLink.replace('link:', '') : ''}
+                            >
+                              {downloadTitle ? downloadTitle.replace('title:', '') : ''}
+                            </Link>
+                          );
+                        }
+                        return splitedParagraph;
+                      })}
+                    </div>
+                  )}
+
+                  {/* Table logic */}
+                  {contentObj.table && (
+                    <div className={classes.tableDiv}>
+                      <table className={classes.table}>
+                        <thead className={classes.tableHeader}>
+                          <tr className={classes.tableBodyRow}>
+                            <th className={classes.headerCell} aria-label="Index" />
+                            { contentObj.table[0].head.map((rowObj) => {
+                              let outputHTML = <th className={classes.headerCell}>{rowObj}</th>;
+                              if (rowObj != null && (/{(.*)}/.test(rowObj))) {
+                                const thAttrs = rowObj.match(/{(.*)}/).pop().split('$$');
+                                const inlineStyleStr = thAttrs.find((thAttr) => thAttr.includes('style:')).replace('style:', '').replace(/'/g, '');
+                                const inlineStyleMap = {};
+                                inlineStyleStr.split(',').forEach((style) => {
+                                  // eslint-disable-next-line prefer-destructuring
+                                  inlineStyleMap[style.split(':')[0]] = style.split(':')[1];
+                                });
+                                const text = thAttrs.find((thAttr) => thAttr.includes('text:'));
+                                outputHTML = (
+                                  <th className={classes.headerCell} style={inlineStyleMap}>
+                                    {text.replace('text:', '')}
+                                  </th>
+                                );
+                              }
+                              return outputHTML;
+                            })}
+                          </tr>
+                        </thead>
+                        <tbody>
+                          { contentObj.table[1].body.map((rowObj, index) => (
+                            <>
+                              <tr className={classes.tableBodyRow}>
+                                <td className={classes.tableCell}>{index + 1}</td>
+                                {/* eslint-disable-next-line max-len */}
+                                { rowObj.row.map((rowValue) => {
+                                  let outputHTML = (
+                                    <td className={classes.tableCell}>
+                                      {rowValue}
+                                    </td>
+                                  );
+                                  // add inline style
+                                  if (rowValue != null && (/{(.*)}/.test(rowValue))) {
+                                    const thAttrs = rowValue.match(/{(.*)}/).pop().split('$$');
+                                    const inlineStyleStr = thAttrs.find((thAttr) => thAttr.includes('style:')).replace('style:', '').replace(/'/g, '');
+                                    const inlineStyleMap = {};
+                                    inlineStyleStr.split(',').forEach((style) => {
+                                      // eslint-disable-next-line prefer-destructuring
+                                      inlineStyleMap[style.split(':')[0]] = style.split(':')[1];
+                                    });
+                                    const text = thAttrs.find((thAttr) => thAttr.includes('text:'));
+                                    outputHTML = (
+                                      <td className={classes.tableCell} style={inlineStyleMap}>
+                                        {text.replace('text:', '')}
+                                      </td>
+                                    );
+                                  }
+
+                                  if (rowValue != null && ((/\[(.+)\]\((.+)\)/g.test(rowValue)) || (/\((.+)\)\[(.+)\]/g.test(rowValue)))) {
+                                    const title = rowValue.match(/\[(.*)\]/).pop();
+                                    const linkAttrs = rowValue.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 link = (
+                                      <Link
+                                        title={title}
+                                        target={target ? target.replace('target:', '') : '_blank'}
+                                        rel="noreferrer"
+                                        href={url ? url.replace('url:', '') : rowValue.match(/\((.*)\)/).pop()}
+                                        color="inherit"
+                                        className={classes.tableLink}
+                                      >
+                                        {title}
+                                      </Link>
+                                    );
+                                    outputHTML = (
+                                      <td className={classes.tableCell}>
+                                        {link}
+                                        {type ? '' : (
+                                          <img
+                                            src={tableExternalIcon}
+                                            alt="outbounnd web site icon"
+                                            className={classes.tablelinkIcon}
+                                          />
+                                        )}
+
+                                      </td>
+                                    );
+                                  }
+                                  return outputHTML;
+                                })}
+                              </tr>
+                            </>
+                          )) }
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+                  <br />
+                </>
+              )) : ''}
+            </span>
+          </Grid>
+          {data.imageLocation === 'right'
+            && (
+              <Grid item lg={3} md={3} sm={12} xs={12} className={classes.imageSection}>
+                {data.image}
+              </Grid>
+            )}
+        </Grid>
+      </div>
+      {data.secondaryZoomImageTitle
+        && <div className={classes.secondayTitle}>{data.secondaryZoomImageTitle}</div>}
+      {data.secondaryImage && <XoomInOut>{data.secondaryImageData}</XoomInOut>}
+    </>
+  );
+};
+
+const styles = () => ({
+  container: {
+    margin: '16px auto 16px auto',
+    color: '#000000',
+    fontFamily: (props) => (props.data.fontFamily ? props.data.fontFamily : 'Nunito'),
+    fontSize: '15px',
+    lineHeight: '22px',
+    maxWidth: '1440px',
+  },
+  maxWidthContainer: {
+    margin: '0px auto 0px auto',
+    maxWidth: '1440px',
+  },
+  secondayTitle: {
+    display: 'block',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    marginBottom: '70px',
+    color: '#033D6F',
+    fontSize: '28px',
+    fontFamily: 'Lato',
+  },
+  text: {
+    // height: '476px',
+    // width: '675px',
+    color: '#000000',
+    fontFamily: (props) => (props.data.fontFamily ? props.data.fontFamily : 'Nunito'),
+    fontSize: '16px',
+    lineHeight: (props) => (props.data.lineHeight ? props.data.lineHeight : '30px'),
+  },
+  title: (props) => ({
+    color: props.titleColor,
+    fontWeight: 'bold',
+  }),
+  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',
+  },
+  imageSection: {
+    float: 'left',
+  },
+  aboutSection: {
+    padding: '60px 45px',
+  },
+  img: {
+    width: '100%',
+  },
+  linkIcon: {
+    width: '20px',
+    verticalAlign: 'sub',
+    margin: '0px 0px 0px 2px',
+  },
+  link: (props) => ({
+    color: props.linkColor,
+    '&:hover': {
+      color: props.linkColor,
+    },
+  }),
+  tableDiv: {
+    marginTop: '0px',
+  },
+  tablelinkIcon: {
+    width: '15px',
+    verticalAlign: 'sub',
+    margin: '0px 0px 0px 2px',
+  },
+  tableLink: {
+    fontWeight: 'bolder',
+    textDecoration: 'underline',
+  },
+  table: {
+    borderSpacing: '0',
+    borderCollapse: 'collapse',
+    fontSize: '12px',
+    fontWeight: 'bold',
+    letterSpacing: '0.025em',
+    lineHeight: '30px',
+    textAlign: 'left',
+    width: '100%',
+  },
+  tableHeader: {
+    fontFamily: (props) => (props.data.fontFamily ? props.data.fontFamily : 'Nunito'),
+    color: '#194563',
+    textTransform: 'uppercase',
+
+  },
+  tableBodyRow: {
+    borderSpacing: '0',
+    borderCollapse: 'collapse',
+    color: '#3E7AAA',
+  },
+  tableCell: {
+    fontFamily: (props) => (props.data.fontFamily ? props.data.fontFamily : 'Nunito'),
+    fontSize: '14px',
+    padding: '8px 15px 8px 0px',
+    borderBottom: '0.66px solid #087CA5',
+  },
+  headerCell: {
+    borderBottom: '4px solid #087CA5',
+    borderSpacing: '0',
+    borderCollapse: 'collapse',
+    fontWeight: 'bolder',
+  },
+  MyCasesWizardStep4: {
+    width: '600px',
+  },
+});
+
+AboutBody.defaultProps = {
+  classes: {},
+  data: {
+    content: [],
+    fontFamily: 'Nunito',
+    lineHeight: '30px',
+  },
+  linkColor: '#0296C9',
+  titleColor: '#0B3556',
+  externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
+};
+
+export default withStyles(styles)(AboutBody);