feat(redmine 1258408): added DocumentView to DocumentDetails page

.changeset/popular-pandas-bow.md

@@ -0,0 +1,5 @@
+---
+'@smile/react-front-kit': minor
+---
+
+Added `DocumentView` iframe to `DocumentDetails` example page

packages/react-front-kit/src/Pages/DocumentDetails/DocumentDetails.tsx

@@ -30,6 +30,7 @@ import {
   CardNative,
   CardPermissions,
 } from './DocumentDetails.mock';
+import { DocumentView } from './DocumentView';
 
 const theme = primaryTheme;
 theme.colorScheme = 'dark';
@@ -156,7 +157,9 @@ export function DocumentDetails(): ReactElement {
               </div>
             </div>
             <Space h="xl" />
-            <div className={classes.document} />
+            <div className={classes.document}>
+              <DocumentView url="/packages/react-front-kit/src/Pages/DocumentDetails/example.pdf" />
+            </div>
           </Flex>
         </Grid.Col>
         <Grid.Col className={classes.colRight} span={4}>

packages/react-front-kit/src/Pages/DocumentDetails/DocumentView.tsx

@@ -0,0 +1,13 @@
+import type { ReactElement } from 'react';
+
+interface IDocumentViewProps {
+  title?: string;
+  url: string;
+}
+
+export function DocumentView(props: IDocumentViewProps): ReactElement {
+  const { title = 'document', url } = props;
+
+  // eslint-disable-next-line react/iframe-missing-sandbox
+  return <iframe height="100%" src={url} title={title} width="100%" />;
+}