feat: add unique header to app preview (#13626)

Co-authored-by: Michael <[email protected]>

frontend/app-preview/App.css

@@ -0,0 +1,3 @@
+:root {
+  font-family: Roboto, 'San Fransisco', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}

frontend/app-preview/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import './App.css';
 import { createRoot } from 'react-dom/client';
 import { PreviewApp } from './src/PreviewApp';
 import { BrowserRouter } from 'react-router-dom';

frontend/app-preview/src/PreviewApp.module.css

@@ -1,7 +1,3 @@
-:root {
-  --font-family: 'Inter', sans-serif;
-}
-
 .previewContainer {
   --toolbar-height: 80px;
   --subtoolbar-height: 60px;

frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.module.css

@@ -0,0 +1,10 @@
+.subHeader {
+  display: flex;
+  align-items: center;
+  height: var(--subtoolbar-height);
+  padding-inline: var(--fds-spacing-4);
+}
+
+.icon {
+  font-size: var(--fds-sizing-6);
+}

frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { AppPreviewSubMenu } from './AppPreviewSubMenu';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import { useMediaQuery } from '@studio/components/src/hooks/useMediaQuery';
+import { renderWithProviders } from 'app-preview/test/mocks';
+
+jest.mock('@studio/components/src/hooks/useMediaQuery');
+
+describe('AppPreviewSubMenu', () => {
+  afterEach(() => jest.clearAllMocks());
+
+  it('should render the back-to-editing link with text on large screens', () => {
+    (useMediaQuery as jest.Mock).mockReturnValue(false);
+
+    renderAppPreviewSubMenu();
+
+    expect(screen.getByText(textMock('top_menu.preview_back_to_editing'))).toBeInTheDocument();
+  });
+
+  it('should render the back-to-editing link without text on small screens', () => {
+    (useMediaQuery as jest.Mock).mockReturnValue(true);
+
+    renderAppPreviewSubMenu();
+
+    expect(
+      screen.queryByText(textMock('top_menu.preview_back_to_editing')),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should have the correct aria-label set on the link', () => {
+    (useMediaQuery as jest.Mock).mockReturnValue(true);
+
+    renderAppPreviewSubMenu();
+
+    const link = screen.getByRole('link', { name: textMock('top_menu.preview_back_to_editing') });
+    expect(link).toHaveAttribute('aria-label', textMock('top_menu.preview_back_to_editing'));
+  });
+});
+
+const renderAppPreviewSubMenu = () => {
+  return renderWithProviders()(<AppPreviewSubMenu />);
+};

frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import classes from './AppPreviewSubMenu.module.css';
+import { useTranslation } from 'react-i18next';
+import { StudioPageHeader, useMediaQuery } from '@studio/components';
+import { ArrowLeftIcon } from '@studio/icons';
+import { MEDIA_QUERY_MAX_WIDTH } from 'app-shared/constants';
+import { useBackToEditingHref } from 'app-preview/src/hooks/useBackToEditingHref';
+
+export const AppPreviewSubMenu = () => {
+  const { t } = useTranslation();
+  const shouldDisplayText = !useMediaQuery(MEDIA_QUERY_MAX_WIDTH);
+  const backToEditingHref: string = useBackToEditingHref();
+
+  return (
+    <div className={classes.subHeader}>
+      <StudioPageHeader.HeaderButton asChild color='dark' variant='preview'>
+        <a href={backToEditingHref} aria-label={t('top_menu.preview_back_to_editing')}>
+          <ArrowLeftIcon className={classes.icon} />
+          {shouldDisplayText && t('top_menu.preview_back_to_editing')}
+        </a>
+      </StudioPageHeader.HeaderButton>
+    </div>
+  );
+};

frontend/app-preview/src/components/AppPreviewSubMenu/index.ts

@@ -0,0 +1 @@
+export { AppPreviewSubMenu } from './AppPreviewSubMenu';

frontend/app-preview/src/components/AppPreviewSubMenu.module.css → frontend/app-preview/src/components/PreviewControlHeader/PreviewControlHeader.module.css

@@ -1,27 +1,8 @@
-.elements svg {
-  color: #fff;
-}
-
-.properties {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.subHeader {
-  color: white;
-  border-bottom: 1px solid gray;
-  background-color: #0c6536;
-  display: flex;
-  align-items: center;
-  height: var(--subtoolbar-height);
-  margin-top: 80px;
-}
-
-.leftSubHeaderComponents {
+.wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
+  padding-top: var(--fds-spacing-4);
 }
 
 .viewSizeButtons {