Merge f743804 into a4bffbe

hashicorp · Dec 8, 2022 · c40c969 · c40c969
2 parents a4bffbe + f743804
commit c40c969
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 6 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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "url": "https://github.com/hashicorp/swingset/issues"
   },
   "dependencies": {
+    "@reach/visually-hidden": "^0.17.0",
     "classnames": "^2.3.1",
     "copy-text-to-clipboard": "^2.2.0",
     "fsexists": "^1.0.1",

diff --git a/page.tsx b/page.tsx
@@ -11,6 +11,8 @@ 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'
+import VisuallyHidden from '@reach/visually-hidden'
 
 export default function createPage(swingsetOptions: SwingsetOptions = {}) {
   return function Page({ sourceType, mdxSource, navData }: SwingsetPageProps) {
@@ -19,6 +21,20 @@ 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 = () => {
+      router.replace({
+        query: { ...router.query, isFullscreen: !isFullscreen }
+      })
+    }
+
+    useEffect(() => {
+      if (router.query.isFullscreen && router.query.isFullscreen === 'true') {
+        setIsFullscreen(true)
+      } else {
+        setIsFullscreen(false)
+      }
+    }, [router.query.isFullscreen])
 
     // Focus the search input when pressing the '/' key
     useEffect(() => {
@@ -70,7 +86,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 +104,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} onClick={handleFullscreenBttnClick}>
+            { isFullscreen ? (<CloseFullscreenIcon />) : (<FullscreenIcon />)}
+            <VisuallyHidden>{ isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'}</VisuallyHidden>    
+          </button>
           {sourceType === 'index' ? (
             swingsetOptions.index ?? <IndexPage />
           ) : sourceType === 'docs' ? (
@@ -113,6 +133,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 {