feat: Add code pane layouts (#1217)

* Add code pane layout options.

* Add documentation for code layouts.

* Add tests and update api somewhat.

* Remove comments, undo irrelevant change.

* Add changeset.

* Update naming in api docs.

* Rename Code layout.

* Replace center justified content with scrollable content. Allow for codepane grid.

* Pass CodePaneProps in a more typescript and friendly manner.

* Update docs and tests.

* Remove unused code.

* Update slide-layout types

* Update api-reference.md

* RM showInlineLineNumbers

Co-authored-by: Grant Sander <[email protected]>

Author: ZimChristine

.changeset/shiny-dingos-check.md

@@ -0,0 +1,5 @@
+---
+'spectacle': minor
+---
+
+feat: Add single and multiple code pane Slide Layouts with options.

docs/api-reference.md

@@ -448,3 +448,38 @@ A vertically-centered Quote layout for if you want to present a quote and attrib
 | `attribution`      | `ReactNode`                    | ✅        | `William Shakespeare` |
 | `quoteProps`       | [Text Props](#typography-tags) | ❌        | { fontSize: "100px" } |
 | `attributionProps` | [Text Props](#typography-tags) | ❌        | { fontSize: "48px" }  |
+
+### `SlideLayout.Code`
+
+A layout with a single code pane and an optional title for if you want one code block per slide.
+
+| Props           | Type                              | Required | Example                                                          |
+|-----------------|-----------------------------------|----------|------------------------------------------------------------------|
+| `...slideProps` | [Slide Props](#slide)             | ❌        |                                                                  |
+| `title`         | `string`                          | ❌        | `Show me the code!`                                              |
+| `titleProps`    | [Heading Props](#typography-tags) | ❌        | `{ color: 'red' }`                                               |
+| `children`      | `string`                          | ✅        | `const Component = (props: componentProps): JSX.Element = {...}` |
+| `language`      | `boolean`                         | ✅        | `false`                                                          |
+| `codePaneProps` | `CodePaneProps`                   | ❌        |                                                                  |
+
+### `SlideLayout.MultiCodeLayout`
+
+A layout with multiple code panes and optional descriptions, and an optional title for if you want more than one code block per slide or code with description text.
+
+| Props           | Type                              | Required | Example                                                                                                             |
+|-----------------|-----------------------------------|----------|---------------------------------------------------------------------------------------------------------------------|
+| `...slideProps` | [Slide Props](#slide)             | ❌        |                                                                                                                     |
+| `title`         | `string`                          | ❌        | `Show me the code!`                                                                                                 |
+| `titleProps`    | [Heading Props](#typography-tags) | ❌        | `{ color: 'red' }`                                                                                                  |
+| `numColumns`    | `number`                          | ❌        | `{2}`                                                                                                               |
+| `codeBlocks`    | `CodeBlock[]`                     | ✅        | `[{ code: 'console.log("hello world!")', language: 'jsx', description: 'Say hello', codePaneProps: {...} }, {...}]` |
+
+where
+
+```ts
+type CodeBlock = Omit<CodePaneProps, 'children'> & {
+  code: CodePaneProps['children'];
+  description?: string | ReactNode;
+  descriptionProps?: ComponentProps<typeof Text>;
+}
+```

packages/spectacle/src/components/code-pane.tsx

@@ -149,15 +149,13 @@ const CodePane = forwardRef<HTMLDivElement, CodePaneProps>(
        * default theme with no valid values.
        */
       const {
-        size: { width = 1366 },
         space = [0, 0, 0],
         fontSizes: { monospace = '20px' }
       } = theme;
 
       return {
         padding: space[0],
         margin: 0,
-        width: width - space[2] * 2 - space[0] * 2,
         fontSize: monospace
       };
     }, [theme]);

packages/spectacle/src/components/slide-layout.test.tsx

@@ -272,4 +272,59 @@ describe('SlideLayout', () => {
       fontSize: '48px'
     });
   });
+
+  it('SlideLayout.Code should render a titled slide with title props passed through', () => {
+    const { getByText } = renderInDeck(
+      <SlideLayout.Code
+        language={'js'}
+        title={'Hello World!'}
+        titleProps={{ fontSize: '24px' }}
+      >
+        {'console.log("Hello World!");'}
+      </SlideLayout.Code>
+    );
+
+    expect(getByText('Hello World!')).toHaveStyle({ fontSize: '24px' });
+  });
+
+  it('SlideLayout.MultiCodeLayout should contain more than one code pane', () => {
+    const { queryAllByTestId } = renderInDeck(
+      <SlideLayout.MultiCodeLayout
+        codeBlocks={[
+          { code: `const greeting = 'hello world.'`, language: `jsx` },
+          { code: `const greeting = 'hello again world.'`, language: `jsx` }
+        ]}
+      />
+    );
+
+    expect(queryAllByTestId('CodePane')).toHaveLength(2);
+  });
+
+  it('SlideLayout.MultiCodeLayout should render multiple code panes with description props passed through', () => {
+    const { getByText } = renderInDeck(
+      <SlideLayout.MultiCodeLayout
+        codeBlocks={[
+          {
+            code: `let greeting = 'hello world.'`,
+            language: `jsx`,
+            description: `assign a variable to a string.`,
+            descriptionProps: { color: 'blue' }
+          },
+          {
+            code: `greeting = 'hello again world.'`,
+            language: `jsx`,
+            description: `reassign the variable.`,
+            descriptionProps: { color: 'cyan' }
+          }
+        ]}
+      />
+    );
+
+    expect(getByText('assign a variable to a string.')).toHaveStyle({
+      color: 'blue'
+    });
+    expect(getByText('reassign the variable.')).toHaveStyle({
+      color: 'cyan'
+    });
+  });
 });

packages/spectacle/src/components/slide-layout.tsx

@@ -1,5 +1,7 @@
+import * as React from 'react';
 import Slide, { SlideProps } from './slide/slide';
-import { Box, FlexBox } from './layout-primitives';
+import { Box, FlexBox, Grid } from './layout-primitives';
+import CodePane, { CodePaneProps } from './code-pane';
 import { ComponentProps, Fragment, ReactNode } from 'react';
 import {
   Heading,
@@ -192,11 +194,110 @@ const Quote = ({
   </Slide>
 );
 
+/**
+ * Generic Codepane utility with optional Description text
+ */
+const CodeLayout = ({
+  text,
+  textProps,
+  children,
+  ...props
+}: CodePaneProps & {
+  text?: string | ReactNode;
+  textProps?: ComponentProps<typeof Text>;
+}) => (
+  <Box data-testid="CodePane">
+    {text ? (
+      <Text margin={8} {...textProps}>
+        {text}
+      </Text>
+    ) : null}
+    <CodePane {...props}>{children}</CodePane>
+  </Box>
+);
+
+/**
+ * single Code Pane with optional Title layout
+ */
+const Code = ({
+  children,
+  language,
+  title,
+  titleProps,
+  codePaneProps,
+  ...rest
+}: Omit<SlideProps, 'children'> & {
+  children: string;
+  language: string;
+  title?: string | ReactNode;
+  titleProps?: ComponentProps<typeof Text>;
+  codePaneProps?: CodePaneProps;
+}) => {
+  return (
+    <Slide {...rest}>
+      <Box display="inline-block" style={{ overflow: 'scroll' }}>
+        {title ? <Heading {...titleProps}>{title}</Heading> : null}
+        <CodeLayout language={language} {...codePaneProps}>
+          {children}
+        </CodeLayout>
+      </Box>
+    </Slide>
+  );
+};
+
+/**
+ * multiple Code Panes with optional Description, with optional Title layout
+ */
+const MultiCodeLayout = ({
+  codeBlocks,
+  title,
+  titleProps,
+  numColumns = 1,
+  ...rest
+}: Omit<SlideProps, 'children'> & {
+  codeBlocks: Array<
+    Omit<CodePaneProps, 'children'> & {
+      code: CodePaneProps['children'];
+      description?: string | ReactNode;
+      descriptionProps?: ComponentProps<typeof Text>;
+    }
+  >;
+  title?: string | ReactNode;
+  titleProps?: ComponentProps<typeof Text>;
+  numColumns?: number;
+}) => {
+  return (
+    <Slide {...rest}>
+      <Box display="inline-block" style={{ overflow: 'scroll' }}>
+        {title ? <Heading {...titleProps}>{title}</Heading> : null}
+        <Grid
+          gridRowGap={1}
+          gridColumnGap={1}
+          gridTemplateColumns={`repeat(${numColumns}, minmax(100px, 1fr))`}
+          maxWidth="100%"
+        >
+          {codeBlocks.map(
+            ({ description, descriptionProps, code, ...codePaneProps }, i) => (
+              <CodeLayout
+                key={i}
+                text={description}
+                textProps={descriptionProps}
+                {...codePaneProps}
+              >
+                {code}
+              </CodeLayout>
+            )
+          )}
+        </Grid>
+      </Box>
+    </Slide>
+  );
+};
+
 /**
  * Layouts to consider:
  * - Image (left, right, full bleed?)
  * - Intro
- * - Code Snippet (syntax highlighting)
  */
 
 export default {
@@ -207,5 +308,7 @@ export default {
   Section,
   BigFact,
   Quote,
-  Statement
+  Statement,
+  Code,
+  MultiCodeLayout
 };