Added newsitem view

packages/layout/index.ts

@@ -5,6 +5,7 @@ import installToast from './config/toast';
 import DefaultView from './views/DefaultView';
 import FileView from './views/FileView';
 import ImageView from './views/ImageView';
+import NewsItemView from './views/NewsItemView';
 import LinkView from './views/LinkView';
 import EventView from './views/EventView';
 
@@ -20,6 +21,7 @@ export default function install(config: ConfigType) {
   config.views.contentTypesViews = {
     File: FileView,
     Image: ImageView,
+    'News Item': NewsItemView,
     Link: LinkView,
     Event: EventView,
     ...config.views.contentTypesViews,

packages/layout/news/6709.feature

@@ -0,0 +1 @@
+Added News Item content type view @thet

packages/layout/views/NewsItemView.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { vi } from 'vitest';
+import NewsItemView from './NewsItemView';
+
+expect.extend(toHaveNoViolations);
+
+vi.mock('react-router', () => ({
+  useFetcher: vi.fn(() => ({
+    data: { results: { items: [] }, breadcrumbs: { items: [] } },
+    state: 'idle',
+    load: vi.fn(),
+  })),
+  useRouteLoaderData: vi.fn(() => ({
+    content: {
+      '@type': 'News Item',
+      title: 'My news item',
+      description: 'This is a news item.',
+    },
+  })),
+}));
+
+it('NewsItemView basic test', async () => {
+  await import('react-router');
+  const { container } = render(<NewsItemView />);
+
+  const results = await axe(container);
+
+  expect(results).toHaveNoViolations();
+  const title = screen.getByRole('heading', { level: 1 });
+  expect(title).toHaveTextContent('My news item');
+  const description = screen.getByText(/This is a news item\./i);
+  expect(description).toBeInTheDocument();
+});

packages/layout/views/NewsItemView.tsx

@@ -0,0 +1,30 @@
+import RenderBlocks from '../blocks/RenderBlocks';
+import type { RootLoader } from '@plone/aurora/app/root';
+import { Container } from '@plone/components';
+import { hasBlocksData } from '@plone/helpers';
+import { useRouteLoaderData } from 'react-router';
+
+export default function DefaultView() {
+  const rootData = useRouteLoaderData<RootLoader>('root');
+
+  if (!rootData || rootData.content['@type'] !== 'News Item') {
+    return null;
+  }
+
+  const { content } = rootData;
+  const hasBlocks = hasBlocksData(content);
+
+  return (
+    <Container width="default">
+      {hasBlocks && <RenderBlocks content={content} />}
+      {!hasBlocks && (
+        <>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {Boolean(content.description) && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </>
+      )}
+    </Container>
+  );
+}