-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add unique header to app preview (#13626)
Co-authored-by: Michael <michael.queyrichon@digdir.no>
- Loading branch information
Showing
32 changed files
with
657 additions
and
300 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
:root { | ||
font-family: Roboto, 'San Fransisco', 'Helvetica Neue', Helvetica, Arial, sans-serif; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 0 additions & 14 deletions
14
frontend/app-preview/src/components/AppBarConfig/AppPreviewBarConfig.test.tsx
This file was deleted.
Oops, something went wrong.
85 changes: 0 additions & 85 deletions
85
frontend/app-preview/src/components/AppBarConfig/AppPreviewBarConfig.tsx
This file was deleted.
Oops, something went wrong.
60 changes: 0 additions & 60 deletions
60
frontend/app-preview/src/components/AppPreviewSubMenu.test.tsx
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
10 changes: 10 additions & 0 deletions
10
frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} |
43 changes: 43 additions & 0 deletions
43
frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 />); | ||
}; |
24 changes: 24 additions & 0 deletions
24
frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { AppPreviewSubMenu } from './AppPreviewSubMenu'; |
23 changes: 2 additions & 21 deletions
23
...c/components/AppPreviewSubMenu.module.css → ...rolHeader/PreviewControlHeader.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.