chore: clean up layout (#1018)

* add margin * lint * clean up padding * adjust to storybook display in docs-only mode * pr feedback: add media query * update storyshots * sass comments * use 'fddocs' for fundamental; remove styles not in use Co-authored-by: jbadan <[email protected]>
SAP · May 18, 2020 · 5bbf7f1 · 5bbf7f1
1 parent 0045d9b
commit 5bbf7f1
Show file tree

Hide file tree

Showing 86 changed files with 831 additions and 800 deletions.
diff --git a/.storybook/custom/components/Community.js b/.storybook/custom/components/Community.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 const Community = () => {
     return (
-    <div className='fr-community'>
+    <div className='fddocs-community'>
         <section>
             <h4>Libraries</h4>
             <ul>

diff --git a/.storybook/custom/components/DocsPage.js b/.storybook/custom/components/DocsPage.js
@@ -1,11 +1,12 @@
 import '../custom.scss';
 import Community from './Community';
+import { DocsContext } from '@storybook/addon-docs/blocks';
 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 React, { useContext, useEffect } from 'react';
 import {
     Title,
     Subtitle,
@@ -16,7 +17,10 @@ import {
   } from '@storybook/addon-docs/blocks';
 
 const DocsPage = () => {
-
+    const context = useContext(DocsContext);
+    if(context.kind === 'Visual') {
+        return null;
+    }
     useEffect(() => {
         tocbot.init(
             {
@@ -36,17 +40,15 @@ const DocsPage = () => {
         <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>
+        <Subtitle />
+        <Import />
+        <Description />
+        <Primary />
+        <Stories />
+        <h2 className='sbdocs-h2' id='properties'>Properties</h2>
+        <Props />
+        <Community />
+        <Footer />
       </>
     )
 }

diff --git a/.storybook/custom/components/Footer.js b/.storybook/custom/components/Footer.js
@@ -2,16 +2,16 @@ 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>
+    <footer className='fddocs-footer'>
+        <section className='fddocs-footer--left'>
+            <span className='fddocs-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>
+            <p className='fddocs-footer__copyright'>&copy; Copyright SAP {`${new Date().getFullYear()}`}</p>
         </section>
-        <section className='fr-footer--right'>
+        <section className='fddocs-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>

diff --git a/.storybook/custom/components/Header.js b/.storybook/custom/components/Header.js
@@ -3,12 +3,12 @@ import React from 'react';
 
 const Header = () => {
     return (
-        <header className='fr-header'>
-            <section className='fr-header--left'>
+        <header className='fddocs-header'>
+            <section className='fddocs-header--left'>
                 <span>Fundamental React</span>
             </section>
-            <section className='fr-header--right'>
-                <a className='fr-header__anchor' href='https://github.com/SAP/fundamental-react'
+            <section className='fddocs-header--right'>
+                <a className='fddocs-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>
@@ -17,7 +17,7 @@ const Header = () => {
                     </svg>
                 </a>
                 <a
-                className='fr-header__anchor'
+                className='fddocs-header__anchor'
                 href={`https://github.com/SAP/fundamental-react/tree/v${packageJson.version}`}
                 target='_blank'>
                         {`v${packageJson.version}`}

diff --git a/.storybook/custom/custom.scss b/.storybook/custom/custom.scss
@@ -4,13 +4,17 @@ body {
 
 /* override storybook max width */
 .sbdocs.sbdocs-content {
-    max-width: 2000px;
+    width: 100%;
+    max-width: none;
 }
 
-/* Limit the content to not overlap toc */
-.fr-docs-container {
-    max-width: 80%;
+/* make room for TOCBot */
+@media (min-width: 1024px) {
+    .sbdocs.sbdocs-content {
+        margin-right: 200px;
+    }
 }
+
 /* match the storybook heading styles non-autogenerated headings */
 .toc-heading,
 .sbdocs-h2 {
@@ -29,16 +33,42 @@ body {
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-/* override storybook section titles for color contrast */
-.simplebar-content .sidebar-subheading {
-    color: #404040;
+$docs-hd-tp: 10px; /* top padding */
+$docs-hd-bp: 12px; /* bottom padding */
+$docs-hd-ch: 28px; /* content height */
+$docs-tm: 30px; /* top margin */
+$heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
+
+.sbdocs-h2,
+.sbdocs-h3 {
+    &:focus {
+        outline: none;
+    }
+
+    &:before {
+        content: '';
+        display: block;
+        height: $heading-toc-spacer;
+        margin-top: -$heading-toc-spacer;
+        visibility: hidden;
+    }
+}
+
+/* storybook iframe */
+.sb-show-main {
+    margin: 0;
+}
+
+/* storybook iframe inner wrapper */
+.sbdocs.sbdocs-wrapper {
+    padding-top: 75px;
 }
 
 /* header */
-.fr-header {
+.fddocs-header {
     box-sizing: border-box;
-    height: 40px;
-    position: absolute;
+    padding: $docs-hd-tp 0 $docs-hd-bp 0;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
@@ -68,7 +98,7 @@ body {
     }
 
     a {
-        padding: 10px;
+        padding-right: 20px;
         color: #404040;
         text-decoration: none;
     }
@@ -84,7 +114,7 @@ body {
 }
 
 /* footer */
-.fr-footer {
+.fddocs-footer {
     padding: 16px 0;
     font-size: 14px;
     line-height: 1.33;
@@ -137,7 +167,7 @@ body {
 }
 
 /* community social links */
-.fr-community {
+.fddocs-community {
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -182,7 +212,7 @@ body {
 }
 
 /* story example layout containers */
-.fr-container {
+.fddocs-container {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: row;
@@ -193,18 +223,18 @@ body {
     justify-content: space-around;
     width: 100%;
     padding: 10px 10px;
-}
 
-.break {
-    flex-basis: 100%;
-    height: 0;
-    border-bottom: 10px solid transparent;
-}
+    &--break {
+        flex-basis: 100%;
+        height: 0;
+        border-bottom: 10px solid transparent;
+    }
 
-.demo-icon-wrapper {
-    padding: 10px;
-    float: left;
-    width: 16%;
-    text-align: center;
-    height: 120px;
+    &--icon {
+        padding: 10px;
+        float: left;
+        width: 16%;
+        text-align: center;
+        height: 120px;
+    }
 }
diff --git a/.storybook/custom/toc.scss b/.storybook/custom/toc.scss
@@ -11,18 +11,15 @@
     }
 }
 
-.toc-link {
+a.toc-link {
     margin: 2px 0;
+    color: #0a6ed1;
     padding-left: 15px;
     text-indent: -15px;
 
     &:before {
         width: 0;
     }
-}
-
-a.toc-link {
-    color: #0a6ed1;
 
     &:hover,
     &:focus {
@@ -36,11 +33,11 @@ a.toc-link {
 
 @media (min-width: 1024px) {
     .toc {
-        width: 225px;
+        width: 200px;
         position: fixed;
         top: 0;
         right: 0;
-        padding: 25px + 50px 25px 25px;
+        padding: 75px 0 0 0;
         height: 100%;
         font-size: 14px;
 
@@ -52,19 +49,16 @@ a.toc-link {
         }
     }
 
-    .toc-link {
+    a.toc-link {
         display: inline-block;
         margin: 4px 0;
         text-decoration: none;
         transition: all 0.125s ease-in;
+        color: #32363a;
 
         &:before {
             width: 4px;
         }
-    }
-
-    a.toc-link {
-        color: #32363a;
 
         &:hover,
         &:focus {
@@ -80,10 +74,6 @@ a.toc-link {
         }
     }
 
-    #toc-separator {
-        display: none;
-    }
-
     .toc-heading {
         position: absolute;
         width: 1px;