feat(suite): Use CardList

packages/analytics-docs/src/components/VersionsSidebar.tsx

@@ -1,16 +1,20 @@
 import styled from 'styled-components';
 
-import { Badge, Box, CardList, Column, H3, Text, variables } from '@trezor/components';
 import type { SuiteThemeColors } from '@trezor/components';
+import { Badge, Box, CardList, Column, H3, Text, variables } from '@trezor/components';
 
 import { HEADER_HEIGHT } from '../constants';
 import type { EventDoc } from '../types';
 import type { VersionWithEvents } from '../utils/filterUtils';
 import { getEventId } from '../utils/filterUtils';
 
+const SCROLL_OFFSET_TOP = 110;
+
 const scrollToEvent = (eventName: string) => {
     const el = document.getElementById(getEventId(eventName));
-    el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    if (!el) return;
+    const y = el.getBoundingClientRect().top + window.scrollY - SCROLL_OFFSET_TOP;
+    window.scrollTo({ top: y, behavior: 'smooth' });
 };
 
 export const SIDEBAR_WIDTH = 280;
@@ -53,17 +57,18 @@ export const VersionsSidebar = ({ versionsWithEvents }: VersionsSidebarProps) =>
                         {version}
                     </Badge>
 
-                    <CardList>
+                    <CardList margin={{ top: 8 }}>
                         {events
                             .sort((a: EventDoc, b: EventDoc) =>
                                 (a.name ?? '').localeCompare(b.name ?? ''),
                             )
                             .map(event => (
                                 <CardList.Item
+                                    paddingType="small"
                                     onClick={() => scrollToEvent(event.name)}
                                     key={event.name}
                                 >
-                                    <Text>{event.name}</Text>
+                                    <Text typographyStyle="label">{event.name}</Text>
                                 </CardList.Item>
                             ))}
                     </CardList>

packages/components/src/components/CardList/CardListItem.tsx

@@ -1,10 +1,20 @@
 import { Row } from '../Flex/Flex';
 import { GhostContainer, type GhostContainerProps } from '../GhostContainer/GhostContainer';
 
-export type CardListItemProps = Omit<GhostContainerProps, 'borderRadius' | 'padding'>;
+export const cardListItemPaddingTypes = ['normal', 'small'] as const;
+export type CardListItemPaddingType = (typeof cardListItemPaddingTypes)[number];
 
-export const CardListItem = ({ children, ...rest }: CardListItemProps) => (
-    <GhostContainer as="div" borderRadius={0} padding={{ vertical: 16, horizontal: 20 }} {...rest}>
+const paddingMap: Record<CardListItemPaddingType, { vertical: number; horizontal: number }> = {
+    normal: { vertical: 16, horizontal: 20 },
+    small: { vertical: 8, horizontal: 12 },
+};
+
+export type CardListItemProps = Omit<GhostContainerProps, 'borderRadius' | 'padding'> & {
+    paddingType?: CardListItemPaddingType;
+};
+
+export const CardListItem = ({ children, paddingType = 'normal', ...rest }: CardListItemProps) => (
+    <GhostContainer as="div" borderRadius={0} padding={paddingMap[paddingType]} {...rest}>
         <Row justifyContent="space-between" gap={12} overflow="hidden">
             {children}
         </Row>

packages/components/src/index.ts

@@ -35,7 +35,12 @@ export {
     type AllowedCardListFrameProps,
     type AllowedCardListTextProps,
 } from './components/CardList/CardList';
-export { CardListItem, type CardListItemProps } from './components/CardList/CardListItem';
+export {
+    CardListItem,
+    cardListItemPaddingTypes,
+    type CardListItemProps,
+    type CardListItemPaddingType,
+} from './components/CardList/CardListItem';
 export { Collapsible, type CollapsibleProps } from './components/Collapsible/Collapsible';
 export {
     CollapsibleBox,