From d80cd1432edfcd83045c291d44173d584a2dfc05 Mon Sep 17 00:00:00 2001
From: Arturo Joaquin Lopez Sanabria <arturo.lopez@MacBook-Pro-de-Arturo.local>
Date: Fri, 11 Nov 2022 17:02:59 +0100
Subject: [PATCH 1/4] fix(packages/sui-studio): Remove h1 from SUI Studios

ISSUES CLOSED: #1524
---
 packages/sui-studio/src/components/layout/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/sui-studio/src/components/layout/index.js b/packages/sui-studio/src/components/layout/index.js
index 0acc57f25..72acc03c9 100644
--- a/packages/sui-studio/src/components/layout/index.js
+++ b/packages/sui-studio/src/components/layout/index.js
@@ -54,7 +54,6 @@ export default function Layout({children}) {
         </button>
         <Link to="/">
           <Logo />
-          <h1>SUI Components</h1>
         </Link>
       </div>
       <aside className={sidebarClassName}>

From 5048951140ca574fcad03f93ef0403ace36315c5 Mon Sep 17 00:00:00 2001
From: Arturo Joaquin Lopez Sanabria <arturo.lopez@MacBook-Pro-de-Arturo.local>
Date: Fri, 11 Nov 2022 17:05:58 +0100
Subject: [PATCH 2/4] fix(packages/sui-studio): Recover correct h1 h2 styles
 for API Tab

ISSUES CLOSED: #1537
---
 .../src/components/documentation/Api.js       |  6 ++---
 .../src/components/documentation/_style.scss  | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/sui-studio/src/components/documentation/Api.js b/packages/sui-studio/src/components/documentation/Api.js
index 857a7ddd6..5174ee7fa 100644
--- 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
index 9de3bc828..acf599e9e 100644
--- 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;
   }

From 0f0ec72647cf5135a8f6a862e18eb634e2ad718d Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Mon, 14 Nov 2022 16:47:13 +0100
Subject: [PATCH 3/4] feat(packages/sui-studio): add studio name title

---
 packages/sui-studio/src/components/layout/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/sui-studio/src/components/layout/index.js b/packages/sui-studio/src/components/layout/index.js
index 72acc03c9..0a89f5db7 100644
--- 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,6 +56,7 @@ export default function Layout({children}) {
         </button>
         <Link to="/">
           <Logo />
+          {}
         </Link>
       </div>
       <aside className={sidebarClassName}>
@@ -72,7 +75,7 @@ export default function Layout({children}) {
 
       <div className={mainClassName}>
         <div className="overlay" onClick={() => setMenuIsHidden(true)}>
-          {' '}
+          {name && <h1>{studioName}</h1>}
         </div>
         {children !== null ? children : renderReadme()}
       </div>

From bf47407b026c84ca2de1c895b4379e4a36f20022 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Mon, 14 Nov 2022 17:02:08 +0100
Subject: [PATCH 4/4] feat(packages/sui-studio): add studio name if necessary

---
 packages/sui-studio/src/components/layout/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/sui-studio/src/components/layout/index.js b/packages/sui-studio/src/components/layout/index.js
index 0a89f5db7..809db869f 100644
--- a/packages/sui-studio/src/components/layout/index.js
+++ b/packages/sui-studio/src/components/layout/index.js
@@ -56,7 +56,7 @@ export default function Layout({children}) {
         </button>
         <Link to="/">
           <Logo />
-          {}
+          {studioName && <h1>{studioName}</h1>}
         </Link>
       </div>
       <aside className={sidebarClassName}>
@@ -74,9 +74,7 @@ export default function Layout({children}) {
       </aside>
 
       <div className={mainClassName}>
-        <div className="overlay" onClick={() => setMenuIsHidden(true)}>
-          {name && <h1>{studioName}</h1>}
-        </div>
+        <div className="overlay" onClick={() => setMenuIsHidden(true)} />
         {children !== null ? children : renderReadme()}
       </div>
     </section>