Merge pull request #1538 from SUI-Components/fix/fix-api-tab-styles

Fix/fix api tab styles
SUI-Components · Nov 14, 2022 · 6441e16 · 6441e16
2 parents 9159b06 + bf47407
commit 6441e16
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/packages/sui-studio/src/components/documentation/Api.js b/packages/sui-studio/src/components/documentation/Api.js
@@ -40,7 +40,7 @@ export default function Api({params}) {
 
       return (
         <div className="sui-StudioProps-prop" key={propName}>
-          <h3>{propName}</h3>
+          <h2 className="sui-StudioProps-h2">{propName}</h2>
           <div>
             <div className="sui-StudioProps-tag sui-StudioProps-required">
               <span>required</span>
@@ -69,8 +69,8 @@ export default function Api({params}) {
     const {props} = componentDoc
     return (
       <Fragment key={index}>
-        <h1>{componentDoc.displayName}</h1>
-        <h2>Props</h2>
+        <h1 className="sui-StudioProps-h1">{componentDoc.displayName}</h1>
+        <blockquote className="sui-StudioProps-blockquote">Props</blockquote>
         {renderPropsApi({props})}
       </Fragment>
     )

diff --git a/packages/sui-studio/src/components/documentation/_style.scss b/packages/sui-studio/src/components/documentation/_style.scss
@@ -1,4 +1,26 @@
 .sui-StudioProps {
+  &-h1,
+  &-h2 {
+    font-weight: 400;
+    line-height: 1.25;
+    padding-bottom: 0.4em;
+  }
+  &-h1 {
+    font-size: 2.25em;
+    border-bottom: 1px solid #eaecef;
+  }
+  &-h2 {
+    font-size: 0.875em;
+    font-weight: 700;
+    margin-top: 56px;
+    text-transform: uppercase;
+  }
+  &-blockquote {
+    border-left: 0.25em solid #dfe2e5;
+    color: #6a737d;
+    padding: 0 1em;
+    margin: 0;
+  }
   &-prop {
     padding: 0 16px 24px 0;
   }

diff --git a/packages/sui-studio/src/components/layout/index.js b/packages/sui-studio/src/components/layout/index.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import React, {useEffect, useState, useRef} from 'react'
 
 import cx from 'classnames'
 import PropTypes from 'prop-types'
@@ -9,12 +9,14 @@ import Markdown from '../documentation/Markdown.js'
 import {iconMenu} from '../icons/index.js'
 import Navigation from '../navigation/index.js'
 import {fetchComponentsReadme} from '../tryRequire.js'
+import {getStudioName} from '../utils.js'
 import Logo from './Logo.js'
 
 export default function Layout({children}) {
   const [readme, setReadme] = useState(null)
   const [menuIsHidden, setMenuIsHidden] = useState(false)
   const [search, setSearch] = useState('')
+  const {current: studioName} = useRef(getStudioName())
 
   const handleChange = e => {
     setSearch(e.target.value)
@@ -54,7 +56,7 @@ export default function Layout({children}) {
         </button>
         <Link to="/">
           <Logo />
-          <h1>SUI Components</h1>
+          {studioName && <h1>{studioName}</h1>}
         </Link>
       </div>
       <aside className={sidebarClassName}>
@@ -72,9 +74,7 @@ export default function Layout({children}) {
       </aside>
 
       <div className={mainClassName}>
-        <div className="overlay" onClick={() => setMenuIsHidden(true)}>
-          {' '}
-        </div>
+        <div className="overlay" onClick={() => setMenuIsHidden(true)} />
         {children !== null ? children : renderReadme()}
       </div>
     </section>