update to sb10, fix moved overlay, address line count

Author: nhivpham

packages/styleguide/.storybook/components/Elements/DetailedCode/DetailedCodeBody/index.tsx

@@ -1,4 +1,4 @@
-import { Source } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs/blocks';
 
 import { DetailedCodeBodyWrapper, FloatingIndicator } from '../elements';
 import { DetailedCodeBodyProps } from '../types';
@@ -10,11 +10,13 @@ export const DetailedCodeBody: React.FC<DetailedCodeBodyProps> = ({
   codeLines,
 }) => {
   return (
-    <DetailedCodeBodyWrapper hasShowCodeButton={showEllipses}>
+    <DetailedCodeBodyWrapper
+      className={showEllipses ? `detailed-code-body-preview` : undefined}
+    >
       <Source code={code} dark language={language} />
       {showEllipses && (
         <FloatingIndicator aria-label="More code below">
-          ...{codeLines} more lines
+          ... {codeLines} more line{codeLines === 1 ? '' : 's'}
         </FloatingIndicator>
       )}
     </DetailedCodeBodyWrapper>

packages/styleguide/.storybook/components/Elements/DetailedCode/elements.tsx

@@ -1,4 +1,4 @@
-import { css } from '@codecademy/gamut-styles';
+import { css, spacing } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import { FlexBox, Box } from '@codecademy/gamut';
 
@@ -12,17 +12,17 @@ export const DetailedCodeWrapper = styled(FlexBox)(
   })
 );
 
-export const DetailedCodeBodyWrapper = styled(FlexBox)<{
-  hasShowCodeButton?: boolean;
-}>(({ hasShowCodeButton }) =>
+export const DetailedCodeBodyWrapper = styled(FlexBox)(
   css({
     position: 'relative',
     flexDirection: 'column',
     /* Override Storybook's Source component default styles to remove unwanted spacing and borders in the container */
     '& .docblock-source': {
       borderRadius: 'none',
       margin: 0,
-      pb: hasShowCodeButton ? 32 : 0,
+    },
+    [`&.detailed-code-body-preview .docblock-source pre`]: {
+      paddingBottom: spacing[48],
     },
   })
 );

packages/styleguide/.storybook/components/Elements/DetailedCode/index.tsx

@@ -35,7 +35,11 @@ export const DetailedCode: React.FC<DetailedCodeProps> = ({
         code={displayedCode}
         language={language}
         showEllipses={hasMoreCode && !isExpanded}
-        codeLines={codeLines.length}
+        codeLines={
+          previewEnabled
+            ? Math.max(0, codeLines.length - normalizedPreviewLines)
+            : 0
+        }
       />
       {hasMoreCode && (
         <DetailedCodeButton

packages/styleguide/.storybook/components/Elements/DetailedCode/types.ts

@@ -1,4 +1,4 @@
-import { Source } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs/blocks';
 import { ComponentProps } from 'react';
 
 type SourceLanguage = ComponentProps<typeof Source>['language'];