docs: add header, footer and toc to storybook

.storybook/custom/components/Community.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Community = () => {
+    return (
+    <div className='fr-community'>
+        <section>
+            <h4>Libraries</h4>
+            <ul>
+                <li><a href='https://sap.github.io/fundamental-styles/' target='_blank'>Fundamental Library <strong>Styles</strong></a></li>
+                <li><a href='https://sap.github.io/fundamental-ngx/' target='_blank'>Fundamental Library for <strong>Angular</strong></a></li>
+                <li><a href='https://sap.github.io/fundamental-react/' target='_blank'>Fundamental Library for <strong>React</strong></a></li>
+                <li><a href='https://sap.github.io/fundamental-vue/' target='_blank'>Fundamental Library for <strong>Vue</strong></a></li>
+            </ul>
+        </section>
+        <section>
+        <h4>Community</h4>
+            <ul>
+                <li><a href='https://github.com/sap/fundamental-styles' target='_blank'><img src='./assets/github.png' alt='github logo'/>github.com/sap/fundamental-styles</a></li>
+                <li><a href='https://twitter.com/fundamental_lib' target='_blank'><img src='./assets/twitter.png' alt='twitter logo'/>twitter.com/fundamental_lib</a></li>
+                <li><a href='https://join.slack.com/t/ui-fundamentals/shared_invite/enQtNTIzOTU0Mzc2NTc5LWQzZWI5MWFhYjE5OTc4YzliN2JhOTc1ZjQxZTg1YjZiMWZiYzRkNjMwYzgyMmFkYmNhZDVjMWE5MDIzOWEzMmM' target='_blank'>
+                    <img src='./assets/slack.png' alt='slack logo'/>ui-fundamentals-slack.com</a></li>
+                <li><a href='https://www.linkedin.com/company/sap-graph/' target='_blank'><img src='./assets/linkedin.png' alt='linkedin logo'/>linkedin.com/company/sap-graph/</a></li>
+            </ul>
+        </section>
+    </div>
+    )
+}
+
+Community.displayName = 'Community';
+
+export default Community;

.storybook/custom/components/DocsPage.js

@@ -0,0 +1,56 @@
+import '../custom.scss';
+import Community from './Community';
+import Footer from './Footer';
+import Header from './Header';
+import Import from './Import';
+import Toc from './Toc';
+import tocbot from 'tocbot';
+import React, { useEffect } from 'react';
+import {
+    Title,
+    Subtitle,
+    Description,
+    Primary,
+    Props,
+    Stories,
+  } from '@storybook/addon-docs/blocks';
+
+const DocsPage = () => {
+
+    useEffect(() => {
+        tocbot.init(
+            {
+                tocSelector: '.js-toc',
+                contentSelector: '.sbdocs-wrapper',
+                headingSelector: 'h2.sbdocs-h2, h3.sbdocs-h3, h4.sbdocs-h4',
+                orderedList: true,
+                collapseDepth: 3,
+                hasInnerContainers: true
+            }
+        );
+        document.querySelectorAll('.toc-link').forEach( x => x.setAttribute('target','_self'));
+    }, []);
+
+    return (
+        <>
+        <Header />
+        <Title />
+        <Toc />
+        <div className='fr-docs-container'>
+            <Subtitle />
+            <Import />
+            <Description />
+            <Primary />
+            <Stories />
+            <h2 className='sbdocs-h2' id='properties'>Properties</h2>
+            <Props />
+            <Community />
+            <Footer />
+        </div>
+      </>
+    )
+}
+
+DocsPage.displayName = 'DocsPage';
+
+export default DocsPage;

.storybook/custom/components/Footer.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const Footer = () => {
+    return (
+    <footer className='fr-footer'>
+        <section className='fr-footer--left'>
+            <span className='fr-footer__slogan'>THE BEST RUN</span>
+            <img
+                src='./assets/sap.png'
+                alt='SAP logo'
+                height='16' />
+            <p className='fr-footer__copyright'>&copy; Copyright SAP {`${new Date().getFullYear()}`}</p>
+        </section>
+        <section className='fr-footer--right'>
+            <a href='https://www.sap.com/about/legal/privacy.html' target='_blank'>Privacy</a>
+            <a href='https://www.sap.com/about/legal/impressum.html' target='_blank'>Legal Disclosure</a>
+            <a href='https://www.sap.com/about/legal/copyright.html' target='_blank'>Copyright and Trademarks</a>
+            <a href='https://www.sap.com/corporate/en/legal/terms-of-use.html' target='_blank'>Terms of Use</a>
+        </section>
+    </footer>
+    )
+}
+
+Footer.displayName = 'Footer';
+
+export default Footer;

.storybook/custom/components/Header.js

@@ -0,0 +1,31 @@
+import packageJson from '../../../package.json';
+import React from 'react';
+
+const Header = () => {
+    return (
+        <header className='fr-header'>
+            <section className='fr-header--left'>
+                <span>Fundamental React</span>
+            </section>
+            <section className='fr-header--right'>
+                <a className='fr-header__anchor' href='https://github.com/SAP/fundamental-react'
+                    target='_blank'>
+                    <svg viewBox='0 0 512 499.36' xmlns='http://www.w3.org/2000/svg'>
+                        <title>GitHub</title>
+                        <path d='M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z' fill='#404040'
+                            fillRule='evenodd' />
+                    </svg>
+                </a>
+                <a
+                className='fr-header__anchor'
+                href={`https://github.com/SAP/fundamental-react/tree/v${packageJson.version}`}
+                target='_blank'>
+                        {`v${packageJson.version}`}
+                </a>
+            </section>
+    </header>)
+}
+
+Header.displayName = 'Header';
+
+export default Header;

.storybook/custom/Import.js → .storybook/custom/components/Import.js

@@ -1,4 +1,3 @@
-import './custom.css';
 import { DocsContext } from '@storybook/addon-docs/blocks';
 import { googlecode } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import SyntaxHighlighter from 'react-syntax-highlighter';

.storybook/custom/components/Toc.js

@@ -0,0 +1,15 @@
+import '../toc.scss';
+import React from 'react';
+
+const Toc = () => {
+    return (
+    <>
+        <h2 className='toc-heading'>Contents</h2>
+        <nav className='js-toc toc' />
+    </>
+    )
+}
+
+Toc.displayName = 'Toc';
+
+export default Toc;