Skip to content

Commit

Permalink
Support a minimal CodeBlock (#766)
Browse files Browse the repository at this point in the history
  • Loading branch information
AaronMoat authored Jan 2, 2025
1 parent 2fb59f5 commit 1732add
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 35 deletions.
5 changes: 5 additions & 0 deletions .changeset/seven-kangaroos-repeat.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'scoobie': minor
---

CodeBlock: allow copy and labels to be optional
14 changes: 14 additions & 0 deletions src/components/CodeBlock.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,17 @@ export const Multi: Story = {
},
},
};

export const Minimal: Story = {
args: {
children: JSON.stringify(
{ stuff: 'things', otherStuff: [{ id: 17 }] },
null,
2,
),
label: '',
language: 'json',
copy: false,
lineNumbers: false,
},
};
87 changes: 52 additions & 35 deletions src/components/CodeBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ interface Props {
language?: string;
size?: Size;
trim?: boolean;
lineNumbers?: boolean;
copy?: boolean;
}

export const CodeBlock = ({
Expand All @@ -38,6 +40,8 @@ export const CodeBlock = ({
language: rawLanguage,
size = DEFAULT_SIZE,
trim = true,
lineNumbers = true,
copy = true,
}: Props) => {
const children = normaliseChildren(
typeof rawChildren === 'string'
Expand Down Expand Up @@ -90,47 +94,58 @@ export const CodeBlock = ({
</Box>
) : undefined;

const topRow =
children.some(({ label }) => label) || copy || graphqlPlaygroundButton;

return (
<Stack space={tablePadding}>
<ScrollableInline whiteSpace="nowrap">
<Box display="flex" justifyContent="spaceBetween">
<Box display="flex">
{children.map(({ label }, labelIndex) => (
<Box
component="span"
key={label}
paddingLeft={labelIndex === 0 ? undefined : tablePadding}
>
<Text
size={smallerSize}
tone={index.value === labelIndex ? 'secondary' : undefined}
weight="medium"
>
{children.length === 1 || index.value === labelIndex ? (
label
) : (
<TextLinkButton
onClick={() =>
setIndex({ dirty: true, value: labelIndex })
{topRow ? (
<ScrollableInline whiteSpace="nowrap">
<Box display="flex" justifyContent="spaceBetween">
<Box display="flex">
{children.map(({ label }, labelIndex) =>
label ? (
<Box
component="span"
key={label}
paddingLeft={labelIndex === 0 ? undefined : tablePadding}
>
<Text
size={smallerSize}
tone={
index.value === labelIndex ? 'secondary' : undefined
}
weight="medium"
>
{label}
</TextLinkButton>
)}
</Text>
</Box>
))}
</Box>

<Box display="flex">
<Box component="span" paddingLeft={tablePadding}>
<CopyableText size={smallerSize}>{child.code}</CopyableText>
{children.length === 1 || index.value === labelIndex ? (
label
) : (
<TextLinkButton
onClick={() =>
setIndex({ dirty: true, value: labelIndex })
}
>
{label}
</TextLinkButton>
)}
</Text>
</Box>
) : null,
)}
</Box>

{graphqlPlaygroundButton}
<Box display="flex">
{copy ? (
<Box component="span" paddingLeft={tablePadding}>
<CopyableText size={smallerSize}>{child.code}</CopyableText>
</Box>
) : null}

{graphqlPlaygroundButton}
</Box>
</Box>
</Box>
</ScrollableInline>
</ScrollableInline>
) : null}

<Box borderRadius="large" className={styles.codeContainer}>
<Highlight
Expand All @@ -141,7 +156,9 @@ export const CodeBlock = ({
>
{({ getTokenProps, tokens }) => (
<Box display="flex">
<LineNumbers count={tokens.length} size={size} />
{lineNumbers ? (
<LineNumbers count={tokens.length} size={size} />
) : null}

<Lines getTokenProps={getTokenProps} lines={tokens} size={size} />
</Box>
Expand Down

0 comments on commit 1732add

Please sign in to comment.