CORE-4567: reader logo section

.lintstagedrc

@@ -1,4 +1,4 @@
 {
   "*.{js,jsx}": ["npm run lint:js -- --fix", "git add"],
-  "*.{json,scss,css}": ["npm run lint:css -- --write", "git add"]
+  "*.{scss,css}": ["npm run lint:css -- ", "git add"]
 }

package.json

@@ -45,15 +45,18 @@
     "@sentry/browser": "^5.29.2",
     "@sentry/node": "^5.29.2",
     "@zeit/next-workers": "^1.0.0",
+    "canvas": "^2.11.2",
     "core-js": "^3.8.1",
     "cssnano": "^4.1.10",
     "file-saver": "^2.0.5",
+    "fit-curve": "^0.2.0",
     "next": "^10.0.3",
     "next-transpile-modules": "^6.0.0",
     "pdfjs-dist": "^2.4.456",
-    "postcss": "^8.2.1",
+    "postcss": "8.4.14",
     "postcss-extend": "^1.0.5",
-    "postcss-preset-env": "^6.7.0",
+    "postcss-extend-rule": "^4.0.0",
+    "postcss-preset-env": "^7.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-ga": "^3.3.0",

reader/components/logo/index.jsx

@@ -0,0 +1,26 @@
+import Icon from '@oacore/design/lib/elements/icon'
+import { classNames } from '@oacore/design/lib/utils'
+import React from 'react'
+
+import styles from './styles.module.css'
+
+const DataProviderLogo = ({
+  alt,
+  imageSrc,
+  size = 'md',
+  useDefault = true,
+}) => (
+  <div
+    className={classNames.use(styles.circle, styles[size], {
+      [styles.hidden]: !useDefault,
+    })}
+  >
+    {imageSrc ? (
+      <img src={imageSrc} alt={alt} className={styles.image} />
+    ) : (
+      <Icon src="#office-building" className={styles.image} />
+    )}
+  </div>
+)
+
+export default DataProviderLogo

reader/components/logo/styles.module.css

@@ -0,0 +1,23 @@
+.circle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 88px;
+  height: 88px;
+  padding: 0.1rem;
+  border: 1px solid var(--primary);
+  border-radius: 50%;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  color: var(--gray-700);
+  object-fit: contain;
+  border-radius: 50%;
+}
+
+.hidden {
+  display: none;
+}

reader/components/main-area/index.jsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import Viewer from '../viewer'
 import PdfLoader from '../pdf-loader/pdf-loader'
 import ThumbnailSidebar from '../thumbnails-sidebar'
 import OutlineSidebar from '../outline-sidebar'
 import { useGlobalStore } from '../../store'
 import { setDocument } from '../../store/document/actions'
 import styles from './styles.module.css'
+import Viewer from '../viewer/index'
 
-const MainArea = () => {
+const MainArea = ({ members }) => {
   const [{ metadata, ui, document }, dispatch] = useGlobalStore()
 
   return (
@@ -31,6 +31,7 @@ const MainArea = () => {
           metadata={metadata}
           setDocument={(d) => dispatch(setDocument(d))}
           globalDispatch={dispatch}
+          members={members}
         />
       </PdfLoader>
     </div>

reader/components/outline-sidebar/outline-renderer.jsx

@@ -30,7 +30,12 @@ const OutlineItem = ({ isExpanded, item, linkService }) => {
   const [isOpen, toggleIsOpen] = useState(isExpanded)
 
   return (
-    <li className={styles.outlineItem} role="treeitem" aria-expanded={isOpen}>
+    <li
+      className={styles.outlineItem}
+      role="treeitem"
+      aria-expanded={isOpen}
+      aria-selected={isOpen}
+    >
       {Boolean(item.items.length) && (
         <button
           type="button"

reader/components/recommender/index.jsx

@@ -31,10 +31,11 @@ const Recommender = React.memo(({ containerWidth }) => {
     }
 
     const instance = recommenderRef.current
-    if (recommenderRef.current) observer.current.observe(recommenderRef.current)
+
+    if (instance) observer.current.observe(instance)
 
     return () => {
-      observer.current.unobserve(instance?.current)
+      if (instance) observer.current.unobserve(instance)
     }
   }, [recommenderRef])