💄(frontend) add classname to components

To be easily customized, we added a classname to most of the components.
2025-03-26 18:53:19 +01:00
parent 65e450c6cc
commit d3a7ee74b3
64 changed files with 137 additions and 36 deletions
--- a/src/frontend/apps/impress/src/components/BoxButton.tsx
+++ b/src/frontend/apps/impress/src/components/BoxButton.tsx
@@ -44,6 +44,7 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
          ${$css || ''}
        `}
        {...props}
+        className={`--docs--box-button ${props.className || ''}`}
        onClick={(event: React.MouseEvent<HTMLDivElement>) => {
          if (props.disabled) {
            return;
--- a/src/frontend/apps/impress/src/components/Card.tsx
+++ b/src/frontend/apps/impress/src/components/Card.tsx
@@ -14,6 +14,7 @@ export const Card = ({

  return (
    <Box
+      className={`--docs--card ${props.className || ''}`}
      $background="white"
      $radius="4px"
      $css={css`
--- a/src/frontend/apps/impress/src/components/DropButton.tsx
+++ b/src/frontend/apps/impress/src/components/DropButton.tsx
@@ -71,6 +71,7 @@ export const DropButton = ({
        onPress={() => onOpenChangeHandler(true)}
        aria-label={label}
        $css={buttonCss}
+        className="--docs--drop-button"
      >
        {button}
      </StyledButton>
@@ -79,6 +80,7 @@ export const DropButton = ({
        triggerRef={triggerRef}
        isOpen={isLocalOpen}
        onOpenChange={onOpenChangeHandler}
+        className="--docs--drop-button-popover"
      >
        {children}
      </StyledPopover>
--- a/src/frontend/apps/impress/src/components/Icon.tsx
+++ b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -36,6 +36,7 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
      $padding="4px"
      $margin="auto"
      {...textProps}
+      className={`--docs--icon-bg ${textProps.className || ''}`}
    >
      {iconName}
    </Text>
--- a/src/frontend/apps/impress/src/components/InfiniteScroll.tsx
+++ b/src/frontend/apps/impress/src/components/InfiniteScroll.tsx
@@ -30,7 +30,10 @@ export const InfiniteScroll = ({
  };

  return (
-    <Box {...boxProps}>
+    <Box
+      {...boxProps}
+      className={`--docs--infinite-scroll ${boxProps.className || ''}`}
+    >
      {children}
      <InView onChange={loadMore}>
        {!isLoading && hasMore && (
--- a/src/frontend/apps/impress/src/components/LoadMoreText.tsx
+++ b/src/frontend/apps/impress/src/components/LoadMoreText.tsx
@@ -20,6 +20,7 @@ export const LoadMoreText = ({
      $align="center"
      $gap="0.4rem"
      $padding={{ horizontal: '2xs', vertical: 'sm' }}
+      className="--docs--load-more"
    >
      <Icon
        $theme="primary"
--- a/src/frontend/apps/impress/src/components/TextErrors.tsx
+++ b/src/frontend/apps/impress/src/components/TextErrors.tsx
@@ -28,7 +28,12 @@ export const TextErrors = ({
  const { t } = useTranslation();

  return (
-    <AlertStyled canClose={canClose} type={VariantType.ERROR} icon={icon}>
+    <AlertStyled
+      canClose={canClose}
+      type={VariantType.ERROR}
+      icon={icon}
+      className="--docs--text-errors"
+    >
      <Box $direction="column" $gap="0.2rem">
        {causes &&
          causes.map((cause, i) => (
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
@@ -119,8 +119,6 @@ export const QuickSearchStyle = createGlobalStyle`
  }
 }

-
-
 .c__modal__scroller:has(.quick-search-container),
 .c__modal__scroller:has(.noPadding) {
  padding: 0 !important;
@@ -138,6 +136,4 @@ export const QuickSearchStyle = createGlobalStyle`
    margin-bottom: 0;
  }
 }
-
-
 `;
--- a/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
+++ b/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
@@ -28,6 +28,7 @@ export const HorizontalSeparator = ({
          ? '#e5e5e533'
          : colorsTokens()['greyscale-100']
      }
+      className="--docs--horizontal-separator"
    />
  );
 };
--- a/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx
+++ b/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx
@@ -18,6 +18,7 @@ export const ButtonLogin = () => {
        onClick={() => gotoLogin()}
        color="primary-text"
        aria-label={t('Login')}
+        className="--docs--button-login"
      >
        {t('Login')}
      </Button>
@@ -25,7 +26,12 @@ export const ButtonLogin = () => {
  }

  return (
-    <Button onClick={gotoLogout} color="primary-text" aria-label={t('Logout')}>
+    <Button
+      onClick={gotoLogout}
+      color="primary-text"
+      aria-label={t('Logout')}
+      className="--docs--button-logout"
+    >
      {t('Logout')}
    </Button>
  );
@@ -45,6 +51,7 @@ export const ProConnectButton = () => {
        }
      `}
      $radius="4px"
+      className="--docs--proconnect-button"
    >
      <ProConnectImg />
    </BoxButton>
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -133,6 +133,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
      $padding={{ top: 'md' }}
      $background="white"
      $css={cssEditor(readOnly)}
+      className="--docs--editor-container"
    >
      {errorAttachment && (
        <Box $margin={{ bottom: 'big', top: 'none', horizontal: 'large' }}>
@@ -192,7 +193,7 @@ export const BlockNoteEditorVersion = ({
  }, [setEditor, editor]);

  return (
-    <Box $css={cssEditor(readOnly)}>
+    <Box $css={cssEditor(readOnly)} className="--docs--editor-container">
      <BlockNoteView editor={editor} editable={!readOnly} theme="light" />
    </Box>
  );
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx
@@ -104,7 +104,7 @@ export function AIGroupButton() {
    <Components.Generic.Menu.Root>
      <Components.Generic.Menu.Trigger>
        <Components.FormattingToolbar.Button
-          className="bn-button bn-menu-item"
+          className="bn-button bn-menu-item --docs--ai-actions-menu-trigger"
          data-test="ai-actions"
          label="AI"
          mainTooltip={t('AI Actions')}
@@ -116,7 +116,7 @@ export function AIGroupButton() {
        />
      </Components.Generic.Menu.Trigger>
      <Components.Generic.Menu.Dropdown
-        className="bn-menu-dropdown bn-drag-handle-menu"
+        className="bn-menu-dropdown bn-drag-handle-menu --docs--ai-actions-menu"
        sub={true}
      >
        {canAITransform && (
@@ -193,7 +193,7 @@ export function AIGroupButton() {
          <Components.Generic.Menu.Root position="right" sub={true}>
            <Components.Generic.Menu.Trigger sub={false}>
              <Components.Generic.Menu.Item
-                className="bn-menu-item"
+                className="bn-menu-item --docs--ai-translate-menu-trigger"
                subTrigger={true}
              >
                <Box $direction="row" $gap="0.6rem">
@@ -206,7 +206,7 @@ export function AIGroupButton() {
            </Components.Generic.Menu.Trigger>
            <Components.Generic.Menu.Dropdown
              sub={true}
-              className="bn-menu-dropdown"
+              className="bn-menu-dropdown --docs--ai-translate-menu"
            >
              {languages.map((language) => (
                <AIMenuItemTranslate
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx
@@ -94,7 +94,7 @@ export const FileDownloadButton = ({
  return (
    <>
      <Components.FormattingToolbar.Button
-        className="bn-button"
+        className="bn-button --docs--editor-file-download-button"
        label={
          dict.formatting_toolbar.file_download.tooltip[fileBlock.type] ||
          dict.formatting_toolbar.file_download.tooltip['file']
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
@@ -82,6 +82,7 @@ export function MarkdownButton() {
    <Components.FormattingToolbar.Button
      mainTooltip={t('Convert Markdown')}
      onClick={handleConvertMarkdown}
+      className="--docs--editor-markdown-button"
    >
      M
    </Components.FormattingToolbar.Button>
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
@@ -59,7 +59,10 @@ export const ModalConfirmDownloadUnsafe = ({
        </Text>
      }
    >
-      <Box aria-label={t('Modal confirmation to download the attachment')}>
+      <Box
+        aria-label={t('Modal confirmation to download the attachment')}
+        className="--docs--modal-confirm-download-unsafe"
+      >
        <Box>
          <Box $direction="column" $gap="0.35rem" $margin={{ top: 'sm' }}>
            <Text $variation="700">{t('This file is flagged as unsafe.')}</Text>
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
@@ -49,8 +49,16 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
          <TableContent />
        </Box>
      )}
-      <Box $maxWidth="868px" $width="100%" $height="100%">
-        <Box $padding={{ horizontal: isDesktop ? '54px' : 'base' }}>
+      <Box
+        $maxWidth="868px"
+        $width="100%"
+        $height="100%"
+        className="--docs--doc-editor"
+      >
+        <Box
+          $padding={{ horizontal: isDesktop ? '54px' : 'base' }}
+          className="--docs--doc-editor-header"
+        >
          {isVersion ? (
            <DocVersionHeader title={doc.title} />
          ) : (
@@ -64,6 +72,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
          $width="100%"
          $css="overflow-x: clip; flex: 1;"
          $position="relative"
+          className="--docs--doc-editor-content"
        >
          <Box $css="flex:1;" $position="relative" $width="100%">
            {isVersion ? (
@@ -115,7 +124,7 @@ export const DocVersionEditor = ({
    }

    return (
-      <Box $margin="large">
+      <Box $margin="large" className="--docs--doc-version-editor-error">
        <TextErrors
          causes={error.cause}
          icon={
--- a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
@@ -155,6 +155,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
        $margin={{ bottom: 'xl' }}
        aria-label={t('Content modal to export the document')}
        $gap="1rem"
+        className="--docs--modal-export-content"
      >
        <Text $variation="600" $size="sm">
          {t('Download your document in a .docx or .pdf format.')}
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
@@ -38,6 +38,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
        $padding={{ top: isDesktop ? '4xl' : 'md' }}
        $gap={spacings['base']}
        aria-label={t('It is the card information about the document.')}
+        className="--docs--doc-header"
      >
        {(docIsPublic || docIsAuth) && (
          <Box
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
@@ -107,6 +107,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
      <Box
        as="span"
        role="textbox"
+        className="--docs--doc-title-input"
        contentEditable
        defaultValue={titleDisplay || undefined}
        onKeyDownCapture={handleKeyDown}
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -176,6 +176,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
      $align="center"
      $gap="0.5rem 1.5rem"
      $wrap={isSmallMobile ? 'wrap' : 'nowrap'}
+      className="--docs--doc-toolbox"
    >
      <Box
        $direction="row"
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx
@@ -22,6 +22,7 @@ export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
        $padding={{ vertical: 'base' }}
        $gap={spacings['base']}
        aria-label={t('It is the document title')}
+        className="--docs--doc-version-header"
      >
        <DocTitleText title={title} />
        <HorizontalSeparator />
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
@@ -84,7 +84,10 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
        </Text>
      }
    >
-      <Box aria-label={t('Content modal to delete document')}>
+      <Box
+        aria-label={t('Content modal to delete document')}
+        className="--docs--modal-remove-doc"
+      >
        {!isError && (
          <Text $size="sm" $variation="600">
            {t('Are you sure you want to delete this document ?')}
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
@@ -11,7 +11,11 @@ type DocSearchItemProps = {
 export const DocSearchItem = ({ doc }: DocSearchItemProps) => {
  const { isDesktop } = useResponsiveStore();
  return (
-    <Box data-testid={`doc-search-item-${doc.id}`} $width="100%">
+    <Box
+      data-testid={`doc-search-item-${doc.id}`}
+      $width="100%"
+      className="--docs--doc-search-item"
+    >
      <QuickSearchItemContent
        left={
          <Box $direction="row" $align="center" $gap="10px" $width="100%">
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
@@ -71,6 +71,7 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
        aria-label={t('Search modal')}
        $direction="column"
        $justify="space-between"
+        className="--docs--doc-search-modal"
      >
        <QuickSearch
          placeholder={t('Type the name of a document')}
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
@@ -122,6 +122,7 @@ export const DocShareAddMemberList = ({
      $css={css`
        border: 1px solid ${color['greyscale-200']};
      `}
+      className="--docs--doc-share-add-member-list"
    >
      <Box
        $direction="row"
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
@@ -34,6 +34,7 @@ export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
        color: ${color['greyscale-1000']};
        font-size: ${fontSize['xs']};
      `}
+      className="--docs--doc-share-add-member-list-item"
    >
      <Text $variation="1000" $size="xs">
        {user.full_name || user.email}
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx
@@ -84,6 +84,7 @@ export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
    <Box
      $width="100%"
      data-testid={`doc-share-invitation-row-${invitation.email}`}
+      className="--docs--doc-share-invitation-item"
    >
      <SearchUserRow
        isInvitation={true}
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx
@@ -72,6 +72,7 @@ export const DocShareMemberItem = ({ doc, access }: Props) => {
    <Box
      $width="100%"
      data-testid={`doc-share-member-row-${access.user.email}`}
+      className="--docs--doc-share-member-item"
    >
      <SearchUserRow
        alwaysShowRight={true}
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
@@ -195,7 +195,7 @@ export const DocShareModal = ({ doc, onClose }: Props) => {
          aria-label={t('Share modal')}
          $height={canViewAccesses ? modalContentHeight : 'auto'}
          $overflow="hidden"
-          className="noPadding"
+          className="--docs--doc-share-modal noPadding "
          $justify="space-between"
        >
          <Box
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
@@ -20,6 +20,7 @@ export const DocShareModalFooter = ({ doc, onClose }: Props) => {
      $css={css`
        flex-shrink: 0;
      `}
+      className="--docs--doc-share-modal-footer"
    >
      <HorizontalSeparator $withPadding={true} />

--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalInviteUserByEmail.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalInviteUserByEmail.tsx
@@ -12,7 +12,11 @@ type Props = {
 export const DocShareModalInviteUserRow = ({ user }: Props) => {
  const { t } = useTranslation();
  return (
-    <Box $width="100%" data-testid={`search-user-row-${user.email}`}>
+    <Box
+      $width="100%"
+      data-testid={`search-user-row-${user.email}`}
+      className="--docs--doc-share-modal-invite-user-row"
+    >
      <SearchUserRow
        user={user}
        right={
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
@@ -91,6 +91,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
      $padding={{ horizontal: 'base' }}
      aria-label={t('Doc visibility card')}
      $gap={spacing['base']}
+      className="--docs--doc-visibility"
    >
      <Text $weight="700" $size="sm" $variation="700">
        {t('Link parameters')}
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
@@ -31,7 +31,12 @@ export const SearchUserRow = ({
      right={right}
      alwaysShowRight={alwaysShowRight}
      left={
-        <Box $direction="row" $align="center" $gap={spacings['xs']}>
+        <Box
+          $direction="row"
+          $align="center"
+          $gap={spacings['xs']}
+          className="--docs--search-user-row"
+        >
          <UserAvatar
            user={user}
            background={isInvitation ? colors['greyscale-400'] : undefined}
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
@@ -49,6 +49,7 @@ export const UserAvatar = ({ user, background }: Props) => {
        color: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.5);
      `}
+      className="--docs--user-avatar"
    >
      <Box
        $direction="row"
--- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
@@ -60,6 +60,7 @@ export const Heading = ({
      $radius="4px"
      $background={isActive ? `${colorsTokens()['greyscale-100']}` : 'none'}
      $css="text-align: left;"
+      className="--docs--table-content-heading"
    >
      <Text
        $width="100%"
--- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
@@ -122,6 +122,7 @@ export const TableContent = () => {
          gap: var(--c--theme--spacings--2xs);
        `}
      `}
+      className="--docs--table-content"
    >
      {!isHover && (
        <BoxButton onClick={onOpen} $justify="center" $align="center">
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
@@ -107,7 +107,10 @@ export const ModalConfirmationVersion = ({
        </Text>
      }
    >
-      <Box aria-label={t('Modal confirmation to restore the version')}>
+      <Box
+        aria-label={t('Modal confirmation to restore the version')}
+        className="--docs--modal-confirmation-version"
+      >
        <Box>
          <Text $variation="600">
            {t('Your current document will revert to this version.')}
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
@@ -51,7 +51,7 @@ export const ModalSelectVersion = ({
        <NoPaddingStyle />
        <Box
          aria-label="version history modal"
-          className="noPadding"
+          className="--docs--modal-select-version noPadding"
          $direction="row"
          $height="100%"
          $maxHeight="calc(100vh - 2em - 12px)"
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
@@ -44,6 +44,7 @@ export const VersionItem = ({
        `}
        $hasTransition
        $minWidth="13rem"
+        className="--docs--version-item"
      >
        <Box
          $padding={{ vertical: '0.7rem', horizontal: 'small' }}
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx
@@ -109,7 +109,10 @@ export const VersionList = ({
  }, [] as Versions[]);

  return (
-    <Box $css="overflow-y: auto; overflow-x: hidden;">
+    <Box
+      $css="overflow-y: auto; overflow-x: hidden;"
+      className="--docs--version-list"
+    >
      <InfiniteScroll
        hasMore={hasNextPage}
        isLoading={isFetchingNextPage}
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -60,6 +60,7 @@ export const DocsGrid = ({
      $maxWidth="960px"
      $maxHeight="calc(100vh - 52px - 2rem)"
      $align="center"
+      className="--docs--doc-grid"
    >
      <DocsGridLoader isLoading={isRefetching || loading} />
      <Card
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
@@ -49,6 +49,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
            background-color: var(--c--theme--colors--greyscale-100);
          }
        `}
+        className="--docs--doc-grid-item"
      >
        <StyledLink
          $css={css`
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
@@ -26,6 +26,7 @@ export const DocsGridItemSharedButton = ({ doc, handleClick }: Props) => {
        </Text>
      }
      placement="top"
+      className="--docs--doc-tooltip-grid-item-shared-button"
    >
      <Button
        style={{ minWidth: '50px', justifyContent: 'center' }}
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx
@@ -31,6 +31,7 @@ export const DocsGridLoader = ({ isLoading }: DocsGridLoaderProps) => {
        $background="rgba(255, 255, 255, 0.5)"
        $zIndex={998}
        $position="absolute"
+        className="--docs--doc-grid-loader"
      >
        <Loader />
      </Box>
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
@@ -38,7 +38,12 @@ export const SimpleDocItem = ({
  const { untitledDocument } = useTrans();

  return (
-    <Box $direction="row" $gap={spacings.sm} $overflow="auto">
+    <Box
+      $direction="row"
+      $gap={spacings.sm}
+      $overflow="auto"
+      className="--docs--simple-doc-item"
+    >
      <Box
        $direction="row"
        $align="center"
--- a/src/frontend/apps/impress/src/features/footer/Footer.tsx
+++ b/src/frontend/apps/impress/src/features/footer/Footer.tsx
@@ -21,7 +21,7 @@ export const Footer = () => {
  const logo = themeTokens().logo;

  return (
-    <Box $position="relative" as="footer">
+    <Box $position="relative" as="footer" className="--docs--footer">
      <BlueStripe />
      <Box $padding={{ top: 'large', horizontal: 'big', bottom: 'small' }}>
        <Box
@@ -31,7 +31,7 @@ export const Footer = () => {
          $justify="space-between"
          $css="flex-wrap: wrap;"
        >
-          <Box>
+          <Box className="--docs--footer-logo">
            <Box $align="center" $gap="6rem" $direction="row">
              {logo && (
                <Image
@@ -52,6 +52,7 @@ export const Footer = () => {
              row-gap: .5rem;
              flex-wrap: wrap;
            `}
+            className="--docs--footer-external-links"
          >
            {[
              {
@@ -99,6 +100,7 @@ export const Footer = () => {
            column-gap: 1rem;
            row-gap: .5rem;
          `}
+          className="--docs--footer-internal-links"
        >
          {[
            {
@@ -145,6 +147,7 @@ export const Footer = () => {
          $margin={{ top: 'big' }}
          $variation="600"
          $display="inline"
+          className="--docs--footer-licence"
        >
          {t('Unless otherwise stated, all content on this site is under')}{' '}
          <StyledLink
--- a/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
@@ -21,6 +21,7 @@ export const ButtonTogglePanel = () => {
          iconName={isPanelOpen ? 'close' : 'menu'}
        />
      }
+      className="--docs--button-toggle-panel"
    />
  );
 };
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -39,6 +39,7 @@ export const Header = () => {
        background-color: ${colors['greyscale-000']};
        border-bottom: 1px solid ${colors['greyscale-200']};
      `}
+      className="--docs--header"
    >
      {!isDesktop && <ButtonTogglePanel />}
      <StyledLink href="/">
--- a/src/frontend/apps/impress/src/features/header/components/Title.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Title.tsx
@@ -10,7 +10,12 @@ export const Title = () => {
  const spacings = theme.spacingsTokens();

  return (
-    <Box $direction="row" $align="center" $gap={spacings['2xs']}>
+    <Box
+      $direction="row"
+      $align="center"
+      $gap={spacings['2xs']}
+      className="--docs--title"
+    >
      <Text
        $margin="none"
        as="h2"
--- a/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
@@ -29,6 +29,7 @@ export default function HomeBanner() {
      $height="100vh"
      $margin={{ top: `-${getHeaderHeight(isSmallMobile)}px` }}
      $position="relative"
+      className="--docs--home-banner"
    >
      <Box
        $width="100%"
--- a/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
@@ -30,6 +30,7 @@ function HomeProConnect() {
    <Box
      $justify="center"
      $height={!isMobile ? `calc(100vh - ${parentGap})` : 'auto'}
+      className="--docs--home-proconnect"
    >
      <Box
        $gap={spacings['md']}
--- a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
@@ -33,10 +33,10 @@ export function HomeContent() {
  const isFrLanguage = i18n.resolvedLanguage === 'fr';

  return (
-    <Box as="main">
+    <Box as="main" className="--docs--home-content">
      <HomeHeader />
      {isSmallMobile && (
-        <Box $css="& .panel-header{display: none;}">
+        <Box $css="& .--docs--left-panel-header{display: none;}">
          <LeftPanel />
        </Box>
      )}
--- a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
@@ -31,6 +31,7 @@ export const HomeHeader = () => {
      $width="100%"
      $padding={{ horizontal: 'small' }}
      $height={`${isSmallMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px`}
+      className="--docs--home-header"
    >
      <Box
        $align="center"
--- a/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
@@ -93,6 +93,7 @@ export const HomeSection = ({
        opacity: ${isVisible ? 1 : 0};
        ${$css}
      `}
+      className="--docs--home-section"
    >
      <Box
        $direction={direction}
--- a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
+++ b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
@@ -70,6 +70,7 @@ export const LanguagePicker = () => {
        aria-label={t('Language')}
        $direction="row"
        $gap="0.5rem"
+        className="--docs--language-picker-text"
      >
        <Text $isMaterialIcon $color="inherit" $size="xl">
          translate
--- a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
@@ -53,6 +53,7 @@ export const LeftPanelTargetFilters = () => {
      $justify="center"
      $padding={{ horizontal: 'sm' }}
      $gap={spacing['2xs']}
+      className="--docs--left-panel-target-filters"
    >
      {defaultQueries.map((query) => {
        const isActive = target === query.targetQuery;
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
@@ -45,7 +45,8 @@ export const LeftPanel = () => {
            min-width: 300px;
            overflow: hidden;
            border-right: 1px solid ${colors['greyscale-200']};
-        `}
+          `}
+          className="--docs--left-panel-desktop"
        >
          <Box
            $css={css`
@@ -72,6 +73,7 @@ export const LeftPanel = () => {
              transform: translateX(${isPanelOpen ? '0' : '-100dvw'});
              background-color: var(--c--theme--colors--greyscale-000);
            `}
+            className="--docs--left-panel-mobile"
          >
            <Box
              data-testid="left-panel-mobile"
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx
@@ -21,6 +21,7 @@ export const LeftPanelContent = () => {
            $css={css`
              flex: 0 0 auto;
            `}
+            className="--docs--home-left-panel-content"
          >
            <SeparatedSection showSeparator={false}>
              <LeftPanelTargetFilters />
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
@@ -18,6 +18,7 @@ export const LeftPanelDocContent = () => {
      $flex={1}
      $width="100%"
      $css="width: 100%; overflow-y: auto; overflow-x: hidden;"
+      className="--docs--left-panel-doc-content"
    >
      <SeparatedSection showSeparator={false}>
        <Box $padding={{ horizontal: 'sm' }}>
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
@@ -38,6 +38,7 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
        }
      `}
      key={doc.id}
+      className="--docs--left-panel-favorite-item"
    >
      <StyledLink href={`/docs/${doc.id}`} $css="overflow: auto;">
        <SimpleDocItem showAccesses doc={doc} />
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
@@ -24,7 +24,7 @@ export const LeftPanelFavorites = () => {
  }

  return (
-    <Box>
+    <Box className="--docs--left-panel-favorites">
      <HorizontalSeparator $withPadding={false} />
      <Box
        $justify="center"
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
@@ -51,7 +51,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {

  return (
    <>
-      <Box $width="100%" className="panel-header">
+      <Box $width="100%" className="--docs--left-panel-header">
        <SeparatedSection>
          <Box
            $padding={{ horizontal: 'sm' }}
--- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
@@ -23,7 +23,7 @@ export function MainLayout({
  const currentBackgroundColor = !isDesktop ? 'white' : backgroundColor;

  return (
-    <div>
+    <Box className="--docs--main-layout">
      <Header />
      <Box
        $direction="row"
@@ -54,6 +54,6 @@ export function MainLayout({
          {children}
        </Box>
      </Box>
-    </div>
+    </Box>
  );
 }
--- a/src/frontend/apps/impress/src/layouts/PageLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/PageLayout.tsx
@@ -20,6 +20,7 @@ export function PageLayout({
    <Box
      $minHeight={`calc(100vh - ${HEADER_HEIGHT}px)`}
      $margin={{ top: `${HEADER_HEIGHT}px` }}
+      className="--docs--page-layout"
    >
      <Header />
      <Box as="main" $width="100%" $css="flex-grow:1;">