Add carousel

Author: OskarDamkjaer

src/browser/components/TabNavigation/styled.tsx

@@ -33,7 +33,7 @@ export const StyledDrawer: any = styled.div`
   background-color: #31333b;
   overflow-x: hidden;
   overflow-y: auto;
-  width: ${(props: any) => (props.open ? '300px' : '0px')};
+  width: ${(props: any) => (props.open ? 'auto' : '0px')};
   transition: 0.2s ease-out;
   z-index: 1;
 `

src/browser/documentation/guides/allGuides.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { DrawerBrowserCommand } from 'browser-components/drawer'
+import Slide from 'browser/modules/Carousel/Slide'
+
+const title = 'all guides'
+const slides = [
+  <Slide key="first">
+    use the dropdown to pick a guide
+    <br />
+    You can also access Browser guides by running
+    <DrawerBrowserCommand> :play {'<guide_name>'} </DrawerBrowserCommand>
+    in the main editor
+  </Slide>
+]
+
+export default { title, slides }

src/browser/documentation/guides/movie-graph.tsx

@@ -21,7 +21,6 @@
 import React from 'react'
 import ManualLink from 'browser-components/ManualLink'
 import Slide from '../../modules/Carousel/Slide'
-import TextCommand from 'browser/modules/DecoratedText/TextCommand'
 
 const title = 'Movie Graph'
 const category = 'graphExamples'

src/browser/documentation/index.ts

@@ -89,6 +89,7 @@ import helpHelp from './dynamic/help'
 import helpPlay from './dynamic/play'
 
 // Carousels
+import allGuides from './guides/allGuides'
 import guideConcepts from './guides/concepts'
 import guideCypher from './guides/cypher'
 import guideIntro from './guides/intro'
@@ -128,6 +129,7 @@ export type GuideChapter =
   | 'typography'
   | 'unfound'
   | 'writeCode'
+  | 'allGuides'
 
 type DocItem = {
   title: string
@@ -297,6 +299,7 @@ const docs: AllDocumentation = {
   play: {
     title: 'Guides & Examples',
     chapters: {
+      allGuides: allGuides,
       concepts: guideConcepts,
       cypher: guideCypher,
       iconography: guideIconography,

src/browser/modules/Carousel/Carousel.tsx

@@ -45,8 +45,9 @@ export default function Carousel({
   withDirectives,
   originFrameId,
   initialSlide = 1,
-  slides = []
-}: any) {
+  slides = [],
+  showSideButtons
+}: any): JSX.Element {
   const [visibleSlide, setVisibleSlide] = useState(() => {
     if (initialSlide <= slides.length) {
       return initialSlide - 1
@@ -110,7 +111,7 @@ export default function Carousel({
       onKeyUp={(e: any) => onKeyDown(e)}
       tabIndex="0"
     >
-      {visibleSlide > 0 && (
+      {showSideButtons && visibleSlide > 0 && (
         <CarouselButton
           className="previous-slide  rounded"
           data-testid="previousSlide"
@@ -163,7 +164,7 @@ export default function Carousel({
           getSlide(visibleSlide)
         )}
       </SlideContainer>
-      {visibleSlide < slides.length - 1 && (
+      {showSideButtons && visibleSlide < slides.length - 1 && (
         <CarouselButton
           className="next-slide rounded"
           data-testid="nextSlide"

src/browser/modules/Docs/Docs.tsx

@@ -26,17 +26,31 @@ import Slide from '../Carousel/Slide'
 import MdxSlide from './MDX/MdxSlide'
 import { splitMdxSlides } from './MDX/splitMdx'
 
+type DocsProps = {
+  slides?: JSX.Element[] | null
+  content?: JSX.Element | null
+  html?: string
+  mdx?: string
+  initialSlide?: number
+  onSlide?: Function
+  lastUpdate?: number
+  originFrameId?: string
+  withDirectives?: true
+  showSideButtons?: boolean
+}
+
 export default function Docs({
   slides,
   content,
   html,
   mdx,
-  withDirectives,
   initialSlide,
   onSlide,
   originFrameId,
-  lastUpdate
-}: any) {
+  withDirectives = true,
+  lastUpdate,
+  showSideButtons = true
+}: DocsProps): JSX.Element | null {
   const [stateSlides, setStateSlides] = useState<JSX.Element[]>([])
 
   useEffect(() => {
@@ -68,15 +82,13 @@ export default function Docs({
       return
     }
 
-    if (withDirectives) {
-      slide = <Directives originFrameId={originFrameId} content={slide} />
-    }
+    slide = <Directives originFrameId={originFrameId} content={slide} />
     setStateSlides([slide])
 
     if (onSlide) {
       onSlide({ hasPrev: false, hasNext: false, slideIndex: 0 })
     }
-  }, [slides, content, html, withDirectives, lastUpdate])
+  }, [slides, content, html, lastUpdate])
 
   if (stateSlides.length > 1) {
     return (
@@ -86,6 +98,7 @@ export default function Docs({
         initialSlide={initialSlide}
         withDirectives={withDirectives}
         originFrameId={originFrameId}
+        showSideButtons={showSideButtons}
       />
     )
   } else if (stateSlides.length) {