feat: Detailed code component for longer code examples

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -33,6 +33,7 @@ exports[`Gamut Exported Keys 1`] = `
   "DataList",
   "DataTable",
   "DelayedRenderWrapper",
+  "DetailedCode",
   "Dialog",
   "Disclosure",
   "Drawer",

packages/gamut/src/DetailedCode/DetailedCodeBody/index.tsx

@@ -0,0 +1,19 @@
+import { Source } from '@storybook/blocks';
+import { ComponentProps } from 'react';
+import * as React from 'react';
+
+import { DetailedCodeBodyWrapper } from '../elements';
+import { DetailedCodeBodyProps } from '../types';
+
+type SourceLanguage = ComponentProps<typeof Source>['language'];
+
+export const DetailedCodeBody: React.FC<DetailedCodeBodyProps> = ({
+  code,
+  language,
+}) => {
+  return (
+    <DetailedCodeBodyWrapper column>
+      <Source code={code} dark language={language as SourceLanguage} />
+    </DetailedCodeBodyWrapper>
+  );
+};

packages/gamut/src/DetailedCode/DetailedCodeButton/index.tsx

@@ -0,0 +1,70 @@
+import { MiniChevronDownIcon } from '@codecademy/gamut-icons';
+import * as React from 'react';
+
+import { Rotation } from '../../Animation';
+import { Box, FlexBox } from '../../Box';
+import { Text } from '../../Typography';
+import { DetailedCodeButtonWrapper } from '../elements';
+import { DetailedCodeButtonProps } from '../types';
+
+export const DetailedCodeButton: React.FC<DetailedCodeButtonProps> = ({
+  heading,
+  isExpanded,
+  language,
+  setIsExpanded,
+}) => {
+  const handleClick = () => {
+    if (setIsExpanded) {
+      setIsExpanded((prev: boolean) => !prev);
+    }
+  };
+
+  return (
+    <FlexBox>
+      <DetailedCodeButtonWrapper
+        aria-expanded={isExpanded}
+        height="100%"
+        px={16}
+        py={12}
+        variant="interface"
+        width="100%"
+        onClick={handleClick}
+      >
+        <FlexBox
+          alignItems="center"
+          columnGap={16}
+          flexDirection="row"
+          justifyContent="space-between"
+          width="100%"
+        >
+          <FlexBox alignItems="center" columnGap={12}>
+            {heading && (
+              <Text
+                as="h3"
+                fontWeight="title"
+                p={0}
+                textAlign="start"
+                variant="title-xs"
+              >
+                {heading}
+              </Text>
+            )}
+            <Text
+              color="text-secondary"
+              fontFamily="monospace"
+              variant="p-small"
+            >
+              {language}
+            </Text>
+          </FlexBox>
+
+          <Box p={8}>
+            <Rotation height={16} rotated={isExpanded} width={16}>
+              <MiniChevronDownIcon aria-hidden size={16} />
+            </Rotation>
+          </Box>
+        </FlexBox>
+      </DetailedCodeButtonWrapper>
+    </FlexBox>
+  );
+};

packages/gamut/src/DetailedCode/elements.tsx

@@ -0,0 +1,38 @@
+import { css } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+
+import { Anchor } from '../Anchor';
+import { FlexBox } from '../Box';
+
+export const DetailedCodeWrapper = styled(FlexBox)(
+  css({
+    width: '100%',
+    maxHeight: 'fit-content',
+    borderRadius: 'md',
+    border: 1,
+    bg: 'background',
+  })
+);
+
+export const DetailedCodeButtonWrapper = styled(Anchor)(
+  css({
+    borderRadius: 'md',
+    bg: 'inherit',
+  })
+);
+
+export const DetailedCodeBodyWrapper = styled(FlexBox)(
+  css({
+    overflow: 'hidden',
+    '& pre': {
+      margin: 0,
+    },
+    '& > div': {
+      borderRadius: 'none',
+      padding: 0,
+    },
+    '& .docblock-source': {
+      margin: 0,
+    },
+  })
+);

packages/gamut/src/DetailedCode/index.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import * as React from 'react';
+
+import { DetailedCodeBody } from './DetailedCodeBody';
+import { DetailedCodeButton } from './DetailedCodeButton';
+import { DetailedCodeWrapper } from './elements';
+import { DetailedCodeProps } from './types';
+
+const DEFAULT_PREVIEW_LINES = 10;
+
+const getPreviewCode = (code: string, previewLines: number) => {
+  const lines = code.split('\n');
+
+  if (lines.length <= previewLines) {
+    return code;
+  }
+
+  return lines.slice(0, previewLines).join('\n');
+};
+
+export const DetailedCode: React.FC<DetailedCodeProps> = ({
+  code,
+  heading,
+  initiallyExpanded = false,
+  language,
+  preview = false,
+  previewLines = DEFAULT_PREVIEW_LINES,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
+  const normalizedPreviewLines = Math.max(0, previewLines);
+  const previewEnabled = preview && normalizedPreviewLines > 0;
+  const previewCode = previewEnabled
+    ? getPreviewCode(code, normalizedPreviewLines)
+    : code;
+
+  // Show the button to expand the code if there is more code than the preview lines, and hide the button if there is no more code
+  const hasMoreCode =
+    previewEnabled && code.split('\n').length > normalizedPreviewLines;
+
+  const displayedCode = isExpanded ? code : previewCode;
+
+  return (
+    <DetailedCodeWrapper column>
+      <DetailedCodeBody code={displayedCode} language={language} />
+      {hasMoreCode && (
+        <DetailedCodeButton
+          heading={heading}
+          isExpanded={isExpanded}
+          language={language}
+          setIsExpanded={setIsExpanded}
+        />
+      )}
+    </DetailedCodeWrapper>
+  );
+};

packages/gamut/src/DetailedCode/types.ts

@@ -0,0 +1,20 @@
+export interface DetailedCodeProps {
+  code: string;
+  heading?: string;
+  language: string;
+  initiallyExpanded?: boolean;
+  preview?: boolean;
+  previewLines?: number;
+}
+
+export interface DetailedCodeButtonProps {
+  heading?: string;
+  isExpanded?: boolean;
+  language: string;
+  setIsExpanded?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export interface DetailedCodeBodyProps {
+  code: string;
+  language: string;
+}

packages/gamut/src/index.tsx

@@ -16,6 +16,7 @@ export * from './Coachmark';
 export * from './ConnectedForm';
 export * from './ContentContainer';
 export * from './DelayedRenderWrapper';
+export * from './DetailedCode';
 export * from './Disclosure';
 export * from './DataList';
 export * from './Drawer';

packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx

@@ -1,7 +1,9 @@
+import { DetailedCode } from '@codecademy/gamut';
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 
+import { codeExample } from './codeExample';
 import * as ConnectedFormStories from './ConnectedForm.stories';
 
 export const parameters = {
@@ -40,75 +42,7 @@ This hook also returns the `FormRequiredText` component - include this before yo
 
 ### Example code
 
-```tsx
-import {
-  ConnectedCheckbox,
-  ConnectedInput,
-  ConnectedSelect,
-  useConnectedForm,
-} from '@codecademy/gamut';
-
-import { TerminalIcon } from '@codecademy/gamut-icons';
-
-export const GoodForm = () => {
-  const {
-    ConnectedFormGroup,
-    ConnectedForm,
-    connectedFormProps,
-    FormRequiredText,
-  } = useConnectedForm({
-    defaultValues: {
-      thisField: true,
-      thatField: 'zero',
-      anotherField: 'state your name.',
-    },
-    validationRules: {
-      thisField: { required: 'you need to check this.' },
-      thatField: {
-        pattern: {
-          value: /^(?:(?!zero).)*$/,
-          message: 'literally anything but zero',
-        },
-      },
-    },
-  });
-
-  return (
-    <ConnectedForm
-      onSubmit={({ thisField }) => console.log(thisField)}
-      resetOnSubmit
-      {...connectedFormProps}
-    >
-      <SubmitButton>submit this form.</SubmitButton>
-      <ConnectedFormGroup
-        name="thisField"
-        label="cool checkbox bruh"
-        field={{
-          component: ConnectedCheckbox,
-          label: 'check it ouuut',
-        }}
-      />
-      <ConnectedFormGroup
-        name="thatField"
-        label="cool select dude"
-        field={{
-          component: ConnectedSelect,
-          options: ['one', 'two', 'zero'],
-        }}
-      />
-      <ConnectedFormGroup
-        name="anotherField"
-        label="cool input"
-        field={{
-          component: ConnectedInput,
-          icon: TerminalIcon,
-        }}
-      />
-      <FormRequiredText />
-    </ConnectedForm>
-  );
-};
-```
+<DetailedCode language="tsx" code={codeExample} preview />
 
 ## Variants
 

packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/codeExample.ts

@@ -0,0 +1,67 @@
+export const codeExample = `import {
+  ConnectedCheckbox,
+  ConnectedInput,
+  ConnectedSelect,
+  useConnectedForm,
+} from '@codecademy/gamut';
+
+import { TerminalIcon } from '@codecademy/gamut-icons';
+
+export const GoodForm = () => {
+  const {
+    ConnectedFormGroup,
+    ConnectedForm,
+    connectedFormProps,
+    FormRequiredText,
+  } = useConnectedForm({
+    defaultValues: {
+      thisField: true,
+      thatField: 'zero',
+      anotherField: 'state your name.',
+    },
+    validationRules: {
+      thisField: { required: 'you need to check this.' },
+      thatField: {
+        pattern: {
+          value: /^(?:(?!zero).)*$/,
+          message: 'literally anything but zero',
+        },
+      },
+    },
+  });
+
+  return (
+    <ConnectedForm
+      onSubmit={({ thisField }) => console.log(thisField)}
+      resetOnSubmit
+      {...connectedFormProps}
+    >
+      <SubmitButton>submit this form.</SubmitButton>
+      <ConnectedFormGroup
+        name="thisField"
+        label="cool checkbox bruh"
+        field={{
+          component: ConnectedCheckbox,
+          label: 'check it ouuut',
+        }}
+      />
+      <ConnectedFormGroup
+        name="thatField"
+        label="cool select dude"
+        field={{
+          component: ConnectedSelect,
+          options: ['one', 'two', 'zero'],
+        }}
+      />
+      <ConnectedFormGroup
+        name="anotherField"
+        label="cool input"
+        field={{
+          component: ConnectedInput,
+          icon: TerminalIcon,
+        }}
+      />
+      <FormRequiredText />
+    </ConnectedForm>
+  );
+};`;