From ab4aba6510ad698933e7b466c3d7a30249e67bd6 Mon Sep 17 00:00:00 2001 From: Christine Zimmerman Date: Tue, 30 Aug 2022 10:05:10 -0700 Subject: [PATCH 01/14] Add code pane layout options. --- .../spectacle/src/components/slide-layout.tsx | 108 +++++++++++++++++- 1 file changed, 106 insertions(+), 2 deletions(-) diff --git a/packages/spectacle/src/components/slide-layout.tsx b/packages/spectacle/src/components/slide-layout.tsx index 44f6b5000..3e2b66ad6 100644 --- a/packages/spectacle/src/components/slide-layout.tsx +++ b/packages/spectacle/src/components/slide-layout.tsx @@ -1,5 +1,6 @@ import Slide, { SlideProps } from './slide/slide'; import { Box, FlexBox } from './layout-primitives'; +import CodePane from './code-pane'; import { ComponentProps, Fragment, ReactNode } from 'react'; import { Heading, @@ -195,11 +196,112 @@ const Quote = ({ ); + +/** + * Generic Codepane utility with optional Description text + */ +const CodeLayout = ({ + children, + language, + key, + text, + textProps, + ...props +}: SlideProps & { + children: string; + language: string; + key?: number; + text?: string | ReactNode; + textProps?: ComponentProps; +}) => ( + + {text ? ( + + {text} + + ) : null} + + {children} + + +); + +/** + * single Code Pane with optional Title layout + */ +const SingleCodeLayout = ({ + children, + language, + title, + titleProps, + ...rest +}: SlideProps & { + children: string; + language: string; + title?: string | ReactNode; + titleProps?: ComponentProps; +}) => { + return ( + + + {title ? {title} : null} + + {children} + + + + ); +}; + +/** + * multiple Code Panes with optional Description, with optional Title layout + */ +const MultiCodeLayout = ({ + children, + title, + titleProps, + textProps, + ...rest +}: SlideProps & { + children: { + code: string; + language: string; + description?: string | ReactNode; + }[]; + title?: string | ReactNode; + titleProps?: ComponentProps; + textProps: ComponentProps; +}) => { + return ( + + + {title ? {title} : null} + {children.map(({ code, language, description, ...props }, i) => ( + + {code} + + ))} + + + ); +}; + /** * Layouts to consider: * - Image (left, right, full bleed?) * - Intro - * - Code Snippet (syntax highlighting) */ export default { @@ -210,5 +312,7 @@ export default { Section, BigFact, Quote, - Statement + Statement, + SingleCodeLayout, + MultiCodeLayout }; From 3a04ed204dae56b20f7e4a215979b477a72aefac Mon Sep 17 00:00:00 2001 From: Christine Zimmerman Date: Tue, 30 Aug 2022 11:03:07 -0700 Subject: [PATCH 02/14] Add documentation for code layouts. --- docs/api-reference.md | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/docs/api-reference.md b/docs/api-reference.md index 5a3c09bab..b311f69f7 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -444,7 +444,31 @@ A vertically-centered Quote layout for if you want to present a quote and attrib | Props | Type | Required | Example | |-----------------------|---------------------------------|----------|------------------------| | `...slideProps` | [Slide Props](#slide) | ❌ | | -| `quote` | `string | ReactNode` | ✅ | `To be, or not to be` | -| `attribution` | `string | ReactNode` | ✅ | `William Shakespeare` | +| `quote` | `string | ReactNode` | ✅ | `To be, or not to be` | +| `attribution` | `string | ReactNode` | ✅ | `William Shakespeare` | | `quoteProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "100px" } | -| `attributionProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } | \ No newline at end of file +| `attributionProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } | + +### `SlideLayout.SingleCodeLayout` + +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` | + +### `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' }` | +| `children` | `PropTypes.arrayOf(PropTypes.object([Code Pane props](#code-pane)))` | ✅ | `[{ code: 'console.log("hello world!")', language: 'jsx', description: 'Say hello', props: {...} }, {...}]` | +| `language` | `boolean` | ✅ | `false` | From 52215a49dc461f073e1d75a7d6b177761f6363f1 Mon Sep 17 00:00:00 2001 From: Christine Zimmerman Date: Tue, 30 Aug 2022 16:35:38 -0700 Subject: [PATCH 03/14] Add tests and update api somewhat. --- .../spectacle/src/components/code-pane.tsx | 1 + .../src/components/slide-layout.test.tsx | 58 +++++++++++++++++++ .../spectacle/src/components/slide-layout.tsx | 35 ++++++----- 3 files changed, 79 insertions(+), 15 deletions(-) diff --git a/packages/spectacle/src/components/code-pane.tsx b/packages/spectacle/src/components/code-pane.tsx index fa1650bbc..14640623d 100644 --- a/packages/spectacle/src/components/code-pane.tsx +++ b/packages/spectacle/src/components/code-pane.tsx @@ -171,6 +171,7 @@ const CodePane = forwardRef( language={language} wrapLines showLineNumbers={showLineNumbers} + showInlineLineNumbers lineProps={getLineProps} lineNumberStyle={getLineNumberStyle} style={syntaxTheme} diff --git a/packages/spectacle/src/components/slide-layout.test.tsx b/packages/spectacle/src/components/slide-layout.test.tsx index 2fc9f2f85..52ca5c7bf 100644 --- a/packages/spectacle/src/components/slide-layout.test.tsx +++ b/packages/spectacle/src/components/slide-layout.test.tsx @@ -264,4 +264,62 @@ describe('SlideLayout', () => { fontSize: '48px' }); }); + + // It should pass props through to the code pane component + // It should pass title props through + // Multi should render more than one code pane component + it('SlideLayout.SingleCodeLayout should render a titled slide with props passed through', () => { + const { getByText } = renderInDeck( + + {'console.log("Hello World!");'} + + ); + + expect(getByText('Hello World!')).toHaveStyle({ fontSize: '24px' }); + }); + + it('SlideLayout.MultiCodeLayout should contain more than one code pane', () => { + const { queryAllByTestId } = renderInDeck( + + ); + + expect(queryAllByTestId('CodePane')).toHaveLength(2); + }); + + it('SlideLayout.MultiCodeLayout should render multiple code panes with description props passed through', () => { + const { getByText } = renderInDeck( + + ); + + expect(getByText('assign a variable to a string.')).toHaveStyle({ + color: 'cyan' + }); + expect(getByText('reassign the variable.')).toHaveStyle({ + color: 'cyan' + }); + }); }); diff --git a/packages/spectacle/src/components/slide-layout.tsx b/packages/spectacle/src/components/slide-layout.tsx index 3e2b66ad6..af93873f5 100644 --- a/packages/spectacle/src/components/slide-layout.tsx +++ b/packages/spectacle/src/components/slide-layout.tsx @@ -203,18 +203,16 @@ const Quote = ({ const CodeLayout = ({ children, language, - key, text, textProps, ...props -}: SlideProps & { +}: Omit & { children: string; language: string; - key?: number; text?: string | ReactNode; textProps?: ComponentProps; }) => ( - + {text ? ( {text} @@ -235,7 +233,7 @@ const SingleCodeLayout = ({ title, titleProps, ...rest -}: SlideProps & { +}: Omit & { children: string; language: string; title?: string | ReactNode; @@ -263,20 +261,19 @@ const SingleCodeLayout = ({ * multiple Code Panes with optional Description, with optional Title layout */ const MultiCodeLayout = ({ - children, + codePaneProps, title, titleProps, - textProps, ...rest -}: SlideProps & { - children: { +}: Omit & { + codePaneProps: { code: string; language: string; description?: string | ReactNode; + descriptionProps?: ComponentProps; }[]; title?: string | ReactNode; titleProps?: ComponentProps; - textProps: ComponentProps; }) => { return ( @@ -288,11 +285,19 @@ const MultiCodeLayout = ({ }} > {title ? {title} : null} - {children.map(({ code, language, description, ...props }, i) => ( - - {code} - - ))} + {codePaneProps.map( + ({ code, language, description, descriptionProps, ...props }, i) => ( + + {code} + + ) + )} ); From 2a05fad34f2904e19f9e6f964a34c5ff0c912f3a Mon Sep 17 00:00:00 2001 From: Christine Zimmerman Date: Wed, 31 Aug 2022 10:25:33 -0700 Subject: [PATCH 04/14] Remove comments, undo irrelevant change. --- docs/api-reference.md | 4 ++-- packages/spectacle/src/components/slide-layout.test.tsx | 9 +++------ 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/docs/api-reference.md b/docs/api-reference.md index b311f69f7..0e6d8dfd8 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -444,8 +444,8 @@ A vertically-centered Quote layout for if you want to present a quote and attrib | Props | Type | Required | Example | |-----------------------|---------------------------------|----------|------------------------| | `...slideProps` | [Slide Props](#slide) | ❌ | | -| `quote` | `string | ReactNode` | ✅ | `To be, or not to be` | -| `attribution` | `string | ReactNode` | ✅ | `William Shakespeare` | +| `quote` | `string | ReactNode` | ✅ | `To be, or not to be` | +| `attribution` | `string | ReactNode` | ✅ | `William Shakespeare` | | `quoteProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "100px" } | | `attributionProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } | diff --git a/packages/spectacle/src/components/slide-layout.test.tsx b/packages/spectacle/src/components/slide-layout.test.tsx index 52ca5c7bf..9be22f397 100644 --- a/packages/spectacle/src/components/slide-layout.test.tsx +++ b/packages/spectacle/src/components/slide-layout.test.tsx @@ -265,10 +265,7 @@ describe('SlideLayout', () => { }); }); - // It should pass props through to the code pane component - // It should pass title props through - // Multi should render more than one code pane component - it('SlideLayout.SingleCodeLayout should render a titled slide with props passed through', () => { + it('SlideLayout.SingleCodeLayout should render a titled slide with title props passed through', () => { const { getByText } = renderInDeck( { code: `let greeting = 'hello world.'`, language: `jsx`, description: `assign a variable to a string.`, - descriptionProps: { color: 'cyan' } + descriptionProps: { color: 'blue' } }, { code: `greeting = 'hello again world.'`, @@ -316,7 +313,7 @@ describe('SlideLayout', () => { ); expect(getByText('assign a variable to a string.')).toHaveStyle({ - color: 'cyan' + color: 'blue' }); expect(getByText('reassign the variable.')).toHaveStyle({ color: 'cyan' From 1f6e157682994530ea7065fe72cf67dd8002291e Mon Sep 17 00:00:00 2001 From: Christine Zimmerman Date: Wed, 31 Aug 2022 10:29:32 -0700 Subject: [PATCH 05/14] Add changeset. --- .changeset/shiny-dingos-check.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/shiny-dingos-check.md diff --git a/.changeset/shiny-dingos-check.md b/.changeset/shiny-dingos-check.md new file mode 100644 index 000000000..b047afaed --- /dev/null +++ b/.changeset/shiny-dingos-check.md @@ -0,0 +1,5 @@ +--- +'spectacle': minor +--- + +feat: Add single and multiple code pane Slide Layouts with options. From 4e4b30ac6fa4e8ffaf3845383f8709aae29fff4b Mon Sep 17 00:00:00 2001 From: Christine Zimmerman Date: Wed, 31 Aug 2022 10:34:39 -0700 Subject: [PATCH 06/14] Update naming in api docs. --- docs/api-reference.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/api-reference.md b/docs/api-reference.md index 0e6d8dfd8..cebf67061 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -470,5 +470,4 @@ A layout with multiple code panes and optional descriptions, and an optional tit | `...slideProps` | [Slide Props](#slide) | ❌ | | | `title` | `string` | ❌ | `Show me the code!` | | `titleProps` | [Heading Props](#typography-tags) | ❌ | `{ color: 'red' }` | -| `children` | `PropTypes.arrayOf(PropTypes.object([Code Pane props](#code-pane)))` | ✅ | `[{ code: 'console.log("hello world!")', language: 'jsx', description: 'Say hello', props: {...} }, {...}]` | -| `language` | `boolean` | ✅ | `false` | +| `codePaneProps` | `PropTypes.arrayOf(PropTypes.object([Code Pane props](#code-pane)))` | ✅ | `[{ code: 'console.log("hello world!")', language: 'jsx', description: 'Say hello', props: {...} }, {...}]` | From fc54d41e9c88599a58eb26ca734c6d78b6364aea Mon Sep 17 00:00:00 2001 From: Christine Zimmerman Date: Thu, 1 Sep 2022 12:45:23 -0700 Subject: [PATCH 07/14] Rename Code layout. --- docs/api-reference.md | 2 +- packages/spectacle/src/components/slide-layout.test.tsx | 6 +++--- packages/spectacle/src/components/slide-layout.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/api-reference.md b/docs/api-reference.md index cebf67061..0806eae12 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -449,7 +449,7 @@ A vertically-centered Quote layout for if you want to present a quote and attrib | `quoteProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "100px" } | | `attributionProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } | -### `SlideLayout.SingleCodeLayout` +### `SlideLayout.Code` A layout with a single code pane and an optional title for if you want one code block per slide. diff --git a/packages/spectacle/src/components/slide-layout.test.tsx b/packages/spectacle/src/components/slide-layout.test.tsx index 9be22f397..abb1a16a0 100644 --- a/packages/spectacle/src/components/slide-layout.test.tsx +++ b/packages/spectacle/src/components/slide-layout.test.tsx @@ -265,15 +265,15 @@ describe('SlideLayout', () => { }); }); - it('SlideLayout.SingleCodeLayout should render a titled slide with title props passed through', () => { + it('SlideLayout.Code should render a titled slide with title props passed through', () => { const { getByText } = renderInDeck( - {'console.log("Hello World!");'} - + ); expect(getByText('Hello World!')).toHaveStyle({ fontSize: '24px' }); diff --git a/packages/spectacle/src/components/slide-layout.tsx b/packages/spectacle/src/components/slide-layout.tsx index af93873f5..815c92e76 100644 --- a/packages/spectacle/src/components/slide-layout.tsx +++ b/packages/spectacle/src/components/slide-layout.tsx @@ -227,7 +227,7 @@ const CodeLayout = ({ /** * single Code Pane with optional Title layout */ -const SingleCodeLayout = ({ +const Code = ({ children, language, title, @@ -318,6 +318,6 @@ export default { BigFact, Quote, Statement, - SingleCodeLayout, + Code, MultiCodeLayout }; From 33af0c0077796519ff11a28758db52bdd64629df Mon Sep 17 00:00:00 2001 From: Christine Zimmerman Date: Thu, 1 Sep 2022 15:44:58 -0700 Subject: [PATCH 08/14] Replace center justified content with scrollable content. Allow for codepane grid. --- .../spectacle/src/components/code-pane.tsx | 1 - .../spectacle/src/components/slide-layout.tsx | 60 +++++++++---------- 2 files changed, 30 insertions(+), 31 deletions(-) diff --git a/packages/spectacle/src/components/code-pane.tsx b/packages/spectacle/src/components/code-pane.tsx index 14640623d..45daf6a0e 100644 --- a/packages/spectacle/src/components/code-pane.tsx +++ b/packages/spectacle/src/components/code-pane.tsx @@ -157,7 +157,6 @@ const CodePane = forwardRef( return { padding: space[0], margin: 0, - width: width - space[2] * 2 - space[0] * 2, fontSize: monospace }; }, [theme]); diff --git a/packages/spectacle/src/components/slide-layout.tsx b/packages/spectacle/src/components/slide-layout.tsx index 815c92e76..b0c71a2ee 100644 --- a/packages/spectacle/src/components/slide-layout.tsx +++ b/packages/spectacle/src/components/slide-layout.tsx @@ -1,5 +1,5 @@ import Slide, { SlideProps } from './slide/slide'; -import { Box, FlexBox } from './layout-primitives'; +import { Box, FlexBox, Grid } from './layout-primitives'; import CodePane from './code-pane'; import { ComponentProps, Fragment, ReactNode } from 'react'; import { @@ -241,18 +241,12 @@ const Code = ({ }) => { return ( - + {title ? {title} : null} {children} - + ); }; @@ -264,6 +258,7 @@ const MultiCodeLayout = ({ codePaneProps, title, titleProps, + numColumns = 1, ...rest }: Omit & { codePaneProps: { @@ -274,31 +269,36 @@ const MultiCodeLayout = ({ }[]; title?: string | ReactNode; titleProps?: ComponentProps; + numColumns?: number; }) => { return ( - + {title ? {title} : null} - {codePaneProps.map( - ({ code, language, description, descriptionProps, ...props }, i) => ( - - {code} - - ) - )} - + + {codePaneProps.map( + ( + { code, language, description, descriptionProps, ...props }, + i + ) => ( + + {code} + + ) + )} + + ); }; From e4c941aa08428c786d0c8391a2d9d612d52d0e1f Mon Sep 17 00:00:00 2001 From: Christine Zimmerman Date: Fri, 2 Sep 2022 11:24:56 -0700 Subject: [PATCH 09/14] Pass CodePaneProps in a more typescript and friendly manner. --- .../spectacle/src/components/slide-layout.tsx | 35 +++++++++++-------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/packages/spectacle/src/components/slide-layout.tsx b/packages/spectacle/src/components/slide-layout.tsx index b0c71a2ee..76d704135 100644 --- a/packages/spectacle/src/components/slide-layout.tsx +++ b/packages/spectacle/src/components/slide-layout.tsx @@ -1,6 +1,6 @@ import Slide, { SlideProps } from './slide/slide'; import { Box, FlexBox, Grid } from './layout-primitives'; -import CodePane from './code-pane'; +import CodePane, { CodePaneProps } from './code-pane'; import { ComponentProps, Fragment, ReactNode } from 'react'; import { Heading, @@ -208,7 +208,7 @@ const CodeLayout = ({ ...props }: Omit & { children: string; - language: string; + language: string | undefined; text?: string | ReactNode; textProps?: ComponentProps; }) => ( @@ -232,18 +232,20 @@ const Code = ({ language, title, titleProps, + codePaneProps, ...rest }: Omit & { children: string; language: string; title?: string | ReactNode; titleProps?: ComponentProps; + codePaneProps?: CodePaneProps; }) => { return ( {title ? {title} : null} - + {children} @@ -251,22 +253,21 @@ const Code = ({ ); }; +interface CodeBlocks extends CodePaneProps { + description?: string | ReactNode; + descriptionProps?: ComponentProps; +} /** * multiple Code Panes with optional Description, with optional Title layout */ const MultiCodeLayout = ({ - codePaneProps, + codeBlocks, title, titleProps, numColumns = 1, ...rest }: Omit & { - codePaneProps: { - code: string; - language: string; - description?: string | ReactNode; - descriptionProps?: ComponentProps; - }[]; + codeBlocks: CodeBlocks[]; title?: string | ReactNode; titleProps?: ComponentProps; numColumns?: number; @@ -281,9 +282,15 @@ const MultiCodeLayout = ({ gridTemplateColumns={`repeat(${numColumns}, minmax(100px, 1fr))`} maxWidth="100%" > - {codePaneProps.map( + {codeBlocks.map( ( - { code, language, description, descriptionProps, ...props }, + { + description, + descriptionProps, + language, + children, + ...codePaneProps + }, i ) => ( - {code} + {children} ) )} From ef1e9d85924aadc1bb3042b7466262906aea6275 Mon Sep 17 00:00:00 2001 From: Christine Zimmerman Date: Fri, 2 Sep 2022 11:57:21 -0700 Subject: [PATCH 10/14] Update docs and tests. --- docs/api-reference.md | 6 ++++-- .../spectacle/src/components/slide-layout.test.tsx | 12 ++++++------ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/api-reference.md b/docs/api-reference.md index 0806eae12..3bd61a324 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -459,7 +459,8 @@ A layout with a single code pane and an optional title for if you want one code | `title` | `string` | ❌ | `Show me the code!` | | `titleProps` | [Heading Props](#typography-tags) | ❌ | `{ color: 'red' }` | | `children` | `string` | ✅ | `const Component = (props: componentProps): JSX.Element = {...}` | -| `language` | `boolean` | ✅ | `false` | +| `language` | `boolean` | ✅ | `false` | +| `codePaneProps` | CodePaneProps | ❌ | | ### `SlideLayout.MultiCodeLayout` @@ -470,4 +471,5 @@ A layout with multiple code panes and optional descriptions, and an optional tit | `...slideProps` | [Slide Props](#slide) | ❌ | | | `title` | `string` | ❌ | `Show me the code!` | | `titleProps` | [Heading Props](#typography-tags) | ❌ | `{ color: 'red' }` | -| `codePaneProps` | `PropTypes.arrayOf(PropTypes.object([Code Pane props](#code-pane)))` | ✅ | `[{ code: 'console.log("hello world!")', language: 'jsx', description: 'Say hello', props: {...} }, {...}]` | +| `numColumns` | `number` | ❌ | `{2}` | +| `codeBlocks` | `CodePaneProps & {description?: string | ReactNode, descriptionProps?: ComponentProps}[]` | ✅ | `[{ children: 'console.log("hello world!")', language: 'jsx', description: 'Say hello', codePaneProps: {...} }, {...}]` | diff --git a/packages/spectacle/src/components/slide-layout.test.tsx b/packages/spectacle/src/components/slide-layout.test.tsx index abb1a16a0..0794d14b7 100644 --- a/packages/spectacle/src/components/slide-layout.test.tsx +++ b/packages/spectacle/src/components/slide-layout.test.tsx @@ -282,9 +282,9 @@ describe('SlideLayout', () => { it('SlideLayout.MultiCodeLayout should contain more than one code pane', () => { const { queryAllByTestId } = renderInDeck( ); @@ -295,15 +295,15 @@ describe('SlideLayout', () => { it('SlideLayout.MultiCodeLayout should render multiple code panes with description props passed through', () => { const { getByText } = renderInDeck( Date: Fri, 2 Sep 2022 16:51:06 -0700 Subject: [PATCH 11/14] Remove unused code. --- packages/spectacle/src/components/code-pane.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/spectacle/src/components/code-pane.tsx b/packages/spectacle/src/components/code-pane.tsx index 5030850a6..ec5303720 100644 --- a/packages/spectacle/src/components/code-pane.tsx +++ b/packages/spectacle/src/components/code-pane.tsx @@ -149,7 +149,6 @@ const CodePane = forwardRef( * default theme with no valid values. */ const { - size: { width = 1366 }, space = [0, 0, 0], fontSizes: { monospace = '20px' } } = theme; From 4758abc594dd57febd23c2b8331fb21138c581a9 Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Tue, 6 Sep 2022 16:04:10 -0500 Subject: [PATCH 12/14] Update slide-layout types --- .../src/components/slide-layout.test.tsx | 8 ++-- .../spectacle/src/components/slide-layout.tsx | 38 +++++++------------ 2 files changed, 17 insertions(+), 29 deletions(-) diff --git a/packages/spectacle/src/components/slide-layout.test.tsx b/packages/spectacle/src/components/slide-layout.test.tsx index d77178fc9..12e1886a7 100644 --- a/packages/spectacle/src/components/slide-layout.test.tsx +++ b/packages/spectacle/src/components/slide-layout.test.tsx @@ -291,8 +291,8 @@ describe('SlideLayout', () => { const { queryAllByTestId } = renderInDeck( ); @@ -305,13 +305,13 @@ describe('SlideLayout', () => { & { - children: string; - language: string | undefined; +}: CodePaneProps & { text?: string | ReactNode; textProps?: ComponentProps; }) => ( @@ -214,9 +212,7 @@ const CodeLayout = ({ {text} ) : null} - - {children} - + {children} ); @@ -249,10 +245,6 @@ const Code = ({ ); }; -interface CodeBlocks extends CodePaneProps { - description?: string | ReactNode; - descriptionProps?: ComponentProps; -} /** * multiple Code Panes with optional Description, with optional Title layout */ @@ -263,7 +255,13 @@ const MultiCodeLayout = ({ numColumns = 1, ...rest }: Omit & { - codeBlocks: CodeBlocks[]; + codeBlocks: Array< + Omit & { + code: CodePaneProps['children']; + description?: string | ReactNode; + descriptionProps?: ComponentProps; + } + >; title?: string | ReactNode; titleProps?: ComponentProps; numColumns?: number; @@ -279,24 +277,14 @@ const MultiCodeLayout = ({ maxWidth="100%" > {codeBlocks.map( - ( - { - description, - descriptionProps, - language, - children, - ...codePaneProps - }, - i - ) => ( + ({ description, descriptionProps, code, ...codePaneProps }, i) => ( - {children} + {code} ) )} From 514ad30101ee53be4fdafdf550159fe801400dd3 Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Tue, 6 Sep 2022 16:13:49 -0500 Subject: [PATCH 13/14] Update api-reference.md --- docs/api-reference.md | 40 +++++++++++++++++++++++++--------------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/docs/api-reference.md b/docs/api-reference.md index fb1d14321..e43c2fca7 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -453,23 +453,33 @@ A vertically-centered Quote layout for if you want to present a quote and attrib 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 | ❌ | | +| 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` | `CodePaneProps & {description?: string | ReactNode, descriptionProps?: ComponentProps}[]` | ✅ | `[{ children: 'console.log("hello world!")', language: 'jsx', description: 'Say hello', codePaneProps: {...} }, {...}]` | +| 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 & { + code: CodePaneProps['children']; + description?: string | ReactNode; + descriptionProps?: ComponentProps; +} +``` From 233ab8e500b903aeffbd88f06beb506dc1f0be6c Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Tue, 6 Sep 2022 16:14:24 -0500 Subject: [PATCH 14/14] RM showInlineLineNumbers --- packages/spectacle/src/components/code-pane.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/spectacle/src/components/code-pane.tsx b/packages/spectacle/src/components/code-pane.tsx index ec5303720..000f546a4 100644 --- a/packages/spectacle/src/components/code-pane.tsx +++ b/packages/spectacle/src/components/code-pane.tsx @@ -169,7 +169,6 @@ const CodePane = forwardRef( language={language} wrapLines showLineNumbers={showLineNumbers} - showInlineLineNumbers lineProps={getLineProps} lineNumberStyle={getLineNumberStyle} style={syntaxTheme}