CORE: reuse docs (#651)

oacore · Dec 11, 2023 · 804c4bd · 804c4bd
1 parent 7450f33
commit 804c4bd
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 66 deletions.
diff --git a/src/modules/documentation-membership-nav/documentation-membership-nav.jsx b/src/modules/documentation-membership-nav/documentation-membership-nav.jsx
@@ -1,7 +1,9 @@
 import React, { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
 
 import styles from './styles.css'
 import { classNames } from '../../utils'
+import Icon from '../../elements/icon'
 
 const DocumentationMembershipNav = ({
   textData,
@@ -31,23 +33,28 @@ const DocumentationMembershipNav = ({
 
   return (
     <ul className={styles.sider}>
-      {Object.keys(textData.navItems).map((item, i) => (
+      {Object.values(textData.navItems).map((item, i) => (
         // eslint-disable-next-line max-len
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions,jsx-a11y/click-events-have-key-events
         <li
           className={classNames.use(styles.siderItem, {
+            [styles.hiddenItem]: item.hidden,
             [styles.activeItem]: !activeIndex
-              ? activeItem === item
+              ? activeItem === i
               : activeIndex === i,
           })}
-          key={textData.navItems[item].item}
-          onClick={() => handleClick(textData.navItems[item], item)}
+          key={item.item}
+          onClick={() => handleClick(item, i)}
         >
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a className={styles.siderItemLink}>{textData.navItems[item].item}</a>
-          {activeItem === item || activeIndex === i ? (
+          <ReactMarkdown className={styles.siderItemLink}>
+            {item.item}
+          </ReactMarkdown>
+          {activeItem === i || activeIndex === i ? (
             // eslint-disable-next-line react/no-unescaped-entities
-            <span className={styles.logo}>></span>
+            <span className={styles.logo}>
+              <Icon src="#active-arrow" />
+            </span>
           ) : (
             ''
           )}

diff --git a/src/modules/documentation-membership-nav/styles.css b/src/modules/documentation-membership-nav/styles.css
@@ -32,6 +32,10 @@
   background: #e0e0e0;
 }
 
+.hidden-item {
+  display: none;
+}
+
 .logo {
   width: 20px;
 }
diff --git a/src/modules/documentation-membership/documentation-membership.jsx b/src/modules/documentation-membership/documentation-membership.jsx
@@ -4,76 +4,115 @@ import ReactMarkdown from 'react-markdown'
 import styles from './styles.css'
 import { classNames } from '../../utils'
 
+const ASSETS_BASE_URL = 'https://oacore.github.io/content/'
+
 const DocumentationMembership = ({
   headerTitle,
   headerCaption,
   highlight,
   nav,
   docs,
+  imageSource,
 }) => (
   <div className={styles.documentationWrapper}>
     <h2 className={styles.documentationHeader}>{headerTitle}</h2>
     {headerCaption}
-    <div className={styles.placement}>
+    <div
+      className={classNames.use(styles.placement, {
+        [styles.placementHeight]: imageSource,
+      })}
+    >
       {nav}
       <div className={styles.documentationInnerWrapper}>
         {docs?.map((item, index) => (
-          <div key={item.id} className={styles.documentationItem} id={item.id}>
-            <h3
-              className={classNames.use(styles.documentationItemTitle, {
-                [styles.highlighted]: highlight === index,
-              })}
+          <>
+            {item.divider && <div className={styles.divider} />}
+            <div
+              key={item.id}
+              className={styles.documentationItem}
+              id={item.id}
             >
-              {item.title}
-            </h3>
-            <div className={styles.typeWrapper}>
-              {Object.entries(item?.membershipTypes).map((value) => (
-                <span
-                  key={item.id + value[0] + value[1]}
-                  className={classNames
-                    .use(styles.membership)
-                    .join(
-                      value[1] === 'Yes' ? styles.enabled : styles.disabled
-                    )}
-                >
-                  {value[0]}
-                </span>
-              ))}
-            </div>
-            <ReactMarkdown>{item.descriptionAbout}</ReactMarkdown>
-            <div>
-              {item?.images?.map((img, i) => (
-                <div className={styles.cardWrapper}>
-                  <div
-                    className={classNames.use({
-                      [styles.imgWrapper]: img.source,
-                    })}
-                  >
-                    {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}
-                    <img
-                      className={classNames.use(styles.image, {
-                        [styles.logoBanner]: item.id === 'logo-banner',
-                        [styles.logoPersonalised]:
-                          item.id === 'personalised-banner',
-                        [styles.badgeImage]: img.source,
-                        [styles.badgeImageHeight]:
-                          img.source?.includes('square'),
+              <h3
+                className={classNames.use(styles.documentationItemTitle, {
+                  [styles.highlighted]: highlight === index,
+                })}
+              >
+                {item.title}
+              </h3>
+              {item.membershipTypes && (
+                <div className={styles.typeWrapper}>
+                  {Object.entries(item?.membershipTypes).map((value) => (
+                    <span
+                      key={item.id + value[0] + value[1]}
+                      className={classNames
+                        .use(styles.membership)
+                        .join(
+                          value[1] === 'Yes' ? styles.enabled : styles.disabled
+                        )}
+                    >
+                      {value[0]}
+                    </span>
+                  ))}
+                </div>
+              )}
+              <ReactMarkdown linkTarget="_blank" className={styles.test}>
+                {item.descriptionAbout}
+              </ReactMarkdown>
+              <div>
+                {item?.images?.map((img, i) => (
+                  <div className={styles.cardWrapper}>
+                    <div
+                      className={classNames.use({
+                        [styles.imgWrapper]: img.source,
+                        [styles.imgSpread]: imageSource,
                       })}
-                      src={img.file}
-                      alt="image"
-                      // eslint-disable-next-line react/no-array-index-key
-                      key={item.id + i}
-                    />
-                  </div>
-                  {img.source && (
-                    <div className={styles.textAlignment}>
-                      <span className={styles.text}>{img.source}</span>
+                    >
+                      {/* eslint-disable-next-line max-len */}
+                      {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}
+                      <img
+                        className={classNames.use(styles.image, {
+                          [styles.logoBanner]: item.id === 'logo-banner',
+                          [styles.logoPersonalised]:
+                            item.id === 'personalised-banner',
+                          [styles.badgeImage]: img.source,
+                          [styles.badgeImageHeight]:
+                            img.source?.includes('square'),
+                        })}
+                        src={
+                          imageSource ? ASSETS_BASE_URL + img.file : img.file
+                        }
+                        alt="image"
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={item.id + i}
+                      />
                     </div>
+                    {img.source && (
+                      <div className={styles.textAlignment}>
+                        <span className={styles.text}>{img.source}</span>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              {item?.subTitle && (
+                <ReactMarkdown className={styles.documentationSubTitle}>
+                  {item?.subTitle}
+                </ReactMarkdown>
+              )}
+              {item?.subDescription && (
+                <ReactMarkdown
+                  className={classNames.use(
+                    styles.documentationSubDescription,
+                    {
+                      [styles.subBorder]: item.border,
+                    }
                   )}
-                </div>
-              ))}
+                >
+                  {item?.subDescription}
+                </ReactMarkdown>
+              )}
             </div>
-          </div>
+          </>
         ))}
       </div>
     </div>

diff --git a/src/modules/documentation-membership/styles.css b/src/modules/documentation-membership/styles.css
@@ -3,10 +3,18 @@
 }
 
 .documentation-inner-wrapper {
-  width: calc(100vw - 370px);
+  width: calc(100% - 370px);
   overflow-y: scroll;
 }
 
+.divider {
+  width: 100%;
+  height: 24px;
+  margin: 24px 0 16px;
+  background: #f5f5f5;
+  border-radius: 2px;
+}
+
 .documentation-header {
   font-size: 24px;
   font-style: normal;
@@ -15,12 +23,11 @@
   color: #212121;
 }
 
-.documentation-sub-title {
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-  color: #212121;
+.sub-border {
+  padding: 16px;
+  margin-bottom: 16px;
+  border: 1px solid #000;
+  border-radius: 2px;
 }
 
 .placement {
@@ -30,13 +37,18 @@
   overflow-y: scroll;
 }
 
+.placement-height {
+  max-height: 2224px;
+}
+
 .documentation-item {
   padding: 8px 0;
   border-bottom: 2px dashed #eee;
 }
 
 .documentation-item p {
   margin: 24px 0;
+  line-height: 24px;
 }
 
 .documentation-item ul {
@@ -98,6 +110,16 @@
   gap: 4px;
 }
 
+.documentation-sub-title {
+  display: flex;
+  justify-content: center;
+  font-size: 16px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 24px;
+  color: #212121;
+}
+
 .enabled {
   color: #212121;
   background: #fae2d2;
@@ -136,6 +158,10 @@
   padding-right: 24px;
 }
 
+.img-spread {
+  width: 100%;
+}
+
 .text {
   font-size: 16px;
   font-style: normal;
@@ -151,3 +177,12 @@
 .badge-image-height {
   height: 90px;
 }
+
+.sub-border p {
+  margin: 0 0 24px;
+}
+
+
+.documentation-sub-title p {
+  margin: 8px 0;
+}