Merge 2b819fc into a4bffbe

hashicorp · Dec 8, 2022 · 4299a96 · 4299a96
2 parents a4bffbe + 2b819fc
commit 4299a96
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 4 deletions.
diff --git a/.changeset/cyan-years-retire.md b/.changeset/cyan-years-retire.md
@@ -0,0 +1,5 @@
+---
+'swingset': minor
+---
+
+Adding fullscreen button
diff --git a/page.tsx b/page.tsx
@@ -11,6 +11,7 @@ import { getPeerComponents } from './utils/get-peer-components'
 import { useBaseRoute } from './utils/use-base-route'
 import Nav from './components/nav'
 import { ComponentData, SwingsetPageProps, SwingsetOptions } from './types'
+import classNames from 'classnames'
 
 export default function createPage(swingsetOptions: SwingsetOptions = {}) {
   return function Page({ sourceType, mdxSource, navData }: SwingsetPageProps) {
@@ -19,6 +20,10 @@ export default function createPage(swingsetOptions: SwingsetOptions = {}) {
     const baseRoute = useBaseRoute()
     const [filterValue, setFilterValue] = useState<string | undefined>()
     const searchInputRef = useRef<HTMLInputElement>(null)
+    const [isFullscreen, setIsFullscreen] = useState(false)
+    const handleFullscreenBttnClick = () => {
+      setIsFullscreen(!isFullscreen);
+    }
 
     // Focus the search input when pressing the '/' key
     useEffect(() => {
@@ -70,7 +75,7 @@ export default function createPage(swingsetOptions: SwingsetOptions = {}) {
         <Head>
           <title key="title">Component Library</title>
         </Head>
-        <div className={s.sidebar}>
+        <div className={classNames(s.sidebar, { [s.isFullscreen]: isFullscreen})}>
           <Link href={baseRoute || '/'}>
             <a>{swingsetOptions.logo ?? <span className={s.logo} />}</a>
           </Link>
@@ -88,7 +93,11 @@ export default function createPage(swingsetOptions: SwingsetOptions = {}) {
           </div>
           <Nav navData={filteredNav} />
         </div>
-        <div className={s.stage}>
+        <div className={classNames(s.stage, { [s.isFullscreen]: isFullscreen})}>
+          <button className={s.fullscreenBttn} aria-labelledby="buttonLabel" onClick={handleFullscreenBttnClick}>
+            { isFullscreen ? (<CloseFullscreenIcon />) : (<FullscreenIcon />)}
+            <span id="buttonLabel" hidden>{ isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'}</span>    
+          </button>
           {sourceType === 'index' ? (
             swingsetOptions.index ?? <IndexPage />
           ) : sourceType === 'docs' ? (
@@ -113,6 +122,18 @@ export default function createPage(swingsetOptions: SwingsetOptions = {}) {
   }
 }
 
+const FullscreenIcon = () => {
+  return (
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M5 19v-5h2v3h3v2Zm0-9V5h5v2H7v3Zm9 9v-2h3v-3h2v5Zm3-9V7h-3V5h5v5Z"></path></svg>
+  )
+}
+
+const CloseFullscreenIcon = () => {
+  return (
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M8 19v-3H5v-2h5v5Zm6 0v-5h5v2h-3v3Zm-9-9V8h3V5h2v5Zm9 0V5h2v3h3v2Z"/></svg>
+  )
+}
+
 function IndexPage() {
   return <h1>Welcome to Swingset!</h1>
 }

diff --git a/style.module.css b/style.module.css
@@ -21,6 +21,12 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
+  transform: translateX(0);
+  transition: transform .2s;
+
+  &.isFullscreen {
+    transform: translateX(-250px);
+  }
 }
 
 .sidebar > * {
@@ -98,16 +104,36 @@
 }
 
 .stage {
+  position: relative;
   padding: 20px 30px 30px;
-  float: left;
-  width: calc(100% - 350px);
   margin-left: 270px;
+  transition: margin-left .2s;
+
+  &.isFullscreen {
+    margin-left: 0;
+  }
+}
+
+.fullscreenBttn {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  display: flex;
+  border: 1px solid #999999;
+  border-radius: 4px;
+  width: 32px;
+  height: 32px;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  background-color: transparent;
 }
 
 .stage > :global(.__swingset-headline) {
   margin-bottom: 35px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 .stage > :global(.__swingset-headline) h1:first-child {