Core 4858 update docs view (#668)

* CORE: deduplication icon

* CORE-4858: add docs view

* fix lint issues

src/modules/documentation-membership/documentation-membership.jsx

@@ -3,6 +3,7 @@ import ReactMarkdown from 'react-markdown'
 
 import styles from './styles.css'
 import { classNames } from '../../utils'
+import tutorial from '../../../assets/tutorial.svg'
 
 const DocumentationMembership = ({
   headerTitle,
@@ -13,6 +14,7 @@ const DocumentationMembership = ({
   imageSource,
   docsTitle,
   mulltyDocs,
+  handleContentOpen,
 }) => (
   <div
     className={classNames.use(styles.documentationWrapper, {
@@ -64,6 +66,17 @@ const DocumentationMembership = ({
                       {value[0]}
                     </span>
                   ))}
+                  {item.tutorial && (
+                    // eslint-disable-next-line max-len
+                    // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
+                    <div
+                      onClick={() => handleContentOpen(item.tutorial)}
+                      className={styles.tutorialWrapper}
+                    >
+                      {item.tutorial?.text}
+                      <img src={tutorial} alt="tutorial icon" />
+                    </div>
+                  )}
                 </div>
               )}
               <ReactMarkdown linkTarget="_blank" className={styles.test}>

src/modules/documentation-membership/styles.css

@@ -225,3 +225,17 @@
   line-height: 130%;
   color: #212121;
 }
+
+
+.tutorial-wrapper {
+  display: flex;
+  align-items: center;
+  margin-left: 32px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  color: #8bc34a;
+  letter-spacing: .035px;
+  gap: 4px;
+}