generalize scrolling component, use it in all the API docs

src/components/Scroll.jsx

@@ -8,8 +8,7 @@ export default class TocScroll extends React.Component {
         element: PropTypes.string,
         offset: PropTypes.number,
         timeout: PropTypes.number,
-        children: PropTypes.node.isRequired,
+        children: PropTypes.node.isRequired
-        deprecation: PropTypes.bool
     }
 
     componentDidMount() {
@@ -75,7 +74,7 @@ export default class TocScroll extends React.Component {
             <a
                 onClick={this.handleClick}
                 href={`#${this.props.element}`}
-                data-deprecated={!!this.props.deprecation}
+                {...this.props}
             >
                 {this.props.children}
             </a>

src/components/Sidebar.module.scss

@@ -116,8 +116,8 @@
     }
 
     code {
-        background: none !important; // stylelint-disable-line
+        background: none;
-        color: inherit !important; // stylelint-disable-line
+        color: inherit;
     }
 
     [data-deprecated='true'] code {

src/styles/global.scss

@@ -283,11 +283,11 @@ samp {
 }
 
 :not(pre) > code {
-    background: darken($brand-white, 5%) !important;
+    background: darken($brand-white, 5%);
-    color: $brand-grey-dark !important;
+    color: $brand-grey-dark;
     display: inline-block;
-    padding-left: .3rem !important;
+    padding-left: .3rem;
-    padding-right: .3rem !important;
+    padding-right: .3rem;
 }
 
 pre {

src/templates/Swagger/Toc.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import slugify from 'slugify'
 import Scrollspy from 'react-scrollspy'
+import Scroll from '../../components/Scroll'
 import { cleanPathKey } from './utils'
 import stylesSidebar from '../../components/Sidebar.module.scss'
 
@@ -13,9 +14,13 @@ const Toc = ({ data }) => {
 
         return (
             <li key={key}>
-                <a href={`#${slugify(cleanPathKey(key))}`}>
+                <Scroll
+                    type="id"
+                    element={`${slugify(cleanPathKey(key))}`}
+                    offset={-20}
+                >
                     <code>{cleanPathKey(key)}</code>
-                </a>
+                </Scroll>
             </li>
         )
     })
@@ -32,7 +37,7 @@ const Toc = ({ data }) => {
 }
 
 Toc.propTypes = {
-    data: PropTypes.array
+    data: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
 }
 
 export default Toc

src/templates/Typedoc/Entities.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import slugify from 'slugify'
+import Scroll from '../../components/Scroll'
 import styles from './Entities.module.scss'
 import { filterByKindOfProperty } from './utils'
 
@@ -16,7 +17,11 @@ const Type = ({ type }) => {
     return (
         <div className={styles.type}>
             <span>
-                {isInternal && <a href={`#${slugify(name)}`}>{type.name}</a>}
+                {isInternal && (
+                    <Scroll type="id" element={`${slugify(name)}`} offset={-20}>
+                        {type.name}
+                    </Scroll>
+                )}
                 {!isInternal && <span>{type.name}</span>}
             </span>
 
@@ -173,7 +178,13 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
                 <div className={styles.deprecation}>
                     <strong>Deprecated</strong>: use{' '}
                     <code>
-                        <a href={`#${deprecatedSlug}`}>{deprecatedUse}</a>
+                        <Scroll
+                            type="id"
+                            element={`${deprecatedSlug}`}
+                            offset={-20}
+                        >
+                            {deprecatedUse}
+                        </Scroll>
                     </code>{' '}
                     instead
                 </div>

src/templates/Typedoc/Entities.module.scss

@@ -34,6 +34,8 @@
 
         code {
             opacity: 1;
+            background: none;
+            padding: 0;
         }
 
         .sourceLink {

src/templates/Typedoc/Toc.jsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import slugify from 'slugify'
 import Scrollspy from 'react-scrollspy'
-import TocScroll from './TocScroll'
+import Scroll from '../../components/Scroll'
 import { filterByKindOfProperty } from './utils'
 import stylesSidebar from '../../components/Sidebar.module.scss'
 
@@ -19,14 +19,14 @@ export default class Toc extends PureComponent {
 
             return (
                 <li key={name}>
-                    <TocScroll
+                    <Scroll
                         type="id"
                         element={`${parentName}-${slugify(name)}`}
-                        deprecation={!!deprecation}
+                        data-deprecated={!!deprecation}
                         offset={-20}
                     >
                         <code>{name}</code>
-                    </TocScroll>
+                    </Scroll>
                 </li>
             )
         })
@@ -43,9 +43,9 @@ export default class Toc extends PureComponent {
 
         return (
             <li key={name}>
-                <TocScroll type="id" element={`${slugify(name)}`} offset={-20}>
+                <Scroll type="id" element={`${slugify(name)}`} offset={-20}>
                     <code>{name}</code>
-                </TocScroll>
+                </Scroll>
                 <Scrollspy
                     items={subIds[0]}
                     currentClassName={stylesSidebar.scrollspyActive}