-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Playwright tests for the built package to ensure that both import…
… methods work
- Loading branch information
1 parent
f5d2722
commit 581cf05
Showing
8 changed files
with
439 additions
and
29 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
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
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,25 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Adyen Document Viewer Example</title> | ||
|
|
||
| <link rel="stylesheet" href="/adyen-document-viewer.min.css" /> | ||
| </head> | ||
| <body> | ||
| <div id="document-viewer"></div> | ||
|
|
||
| <script type="module"> | ||
| import AdyenDocumentViewer from '/adyen-document-viewer.min.mjs?url'; | ||
| import exampleDocument from './mock-data'; | ||
|
|
||
| const documentViewer = new AdyenDocumentViewer('#document-viewer', { | ||
| onExpandSection: (sectionTitle) => console.log(`${sectionTitle} expanded`), | ||
| multiple: false, | ||
| }); | ||
|
|
||
| documentViewer.render(exampleDocument); | ||
| </script> | ||
| </body> | ||
| </html> |
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,312 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Adyen Document Viewer Example</title> | ||
|
|
||
| <link rel="stylesheet" href="/adyen-document-viewer.min.css" /> | ||
| </head> | ||
| <body> | ||
| <div id="document-viewer"></div> | ||
|
|
||
| <script src="/adyen-document-viewer.min.js"></script> | ||
| <script> | ||
| const exampleDocument = { | ||
| title: { | ||
| type: 'text', | ||
| content: 'Example document', | ||
| styles: [], | ||
| }, | ||
| contentElements: [ | ||
| { | ||
| type: 'chapter', | ||
| title: { | ||
| type: 'text', | ||
| content: 'First chapter', | ||
| styles: [], | ||
| }, | ||
| contentElements: [ | ||
| { | ||
| type: 'section', | ||
| title: { | ||
| type: 'text', | ||
| content: 'First section', | ||
| styles: [], | ||
| }, | ||
| label: '1', | ||
| contentElements: [ | ||
| { | ||
| type: 'paragraph', | ||
| contentElements: [ | ||
| { | ||
| type: 'text', | ||
| content: | ||
| 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'weblink', | ||
| url: 'https://www.lipsum.com', | ||
| displayText: { | ||
| type: 'text', | ||
| content: 'Lorem Ipsum', | ||
| styles: [], | ||
| }, | ||
| }, | ||
| { | ||
| type: 'text', | ||
| content: | ||
| ' has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'text', | ||
| content: ' This is a bold and italic example. ', | ||
| styles: ['BOLD', 'ITALIC'], | ||
| }, | ||
| { | ||
| type: 'internalReference', | ||
| referencedLabel: 'tableReference', | ||
| displayText: { | ||
| type: 'text', | ||
| content: 'This should take you to the table in the section below.', | ||
| styles: [], | ||
| }, | ||
| }, | ||
| { | ||
| type: 'paragraph', | ||
| contentElements: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Below we have a list:', | ||
| styles: [], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| type: 'list', | ||
| style: { | ||
| ordered: true, | ||
| }, | ||
| items: [ | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'text', | ||
| content: 'first item in BI.', | ||
| styles: ['BOLD', 'ITALIC'], | ||
| }, | ||
| ], | ||
| subList: null, | ||
| }, | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Second item:', | ||
| styles: [], | ||
| }, | ||
| ], | ||
| subList: { | ||
| type: 'list', | ||
| style: { | ||
| ordered: false, | ||
| }, | ||
| items: [ | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'text', | ||
| content: 'First Sub item:', | ||
| styles: [], | ||
| }, | ||
| ], | ||
| subList: null, | ||
| }, | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'internalReference', | ||
| referencedLabel: '2', | ||
| displayText: { | ||
| type: 'text', | ||
| content: 'Second section', | ||
| styles: [], | ||
| }, | ||
| }, | ||
| ], | ||
| subList: null, | ||
| }, | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Third List item:', | ||
| styles: [], | ||
| }, | ||
| ], | ||
| subList: { | ||
| type: 'list', | ||
| style: { | ||
| ordered: true, | ||
| }, | ||
| items: [ | ||
| { | ||
| content: [ | ||
| { | ||
| type: 'text', | ||
| content: 'First Sub Sub item:', | ||
| styles: '[Array(0)]', | ||
| }, | ||
| ], | ||
| subList: null, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| type: 'section', | ||
| title: { | ||
| type: 'text', | ||
| content: 'Second section', | ||
| styles: [], | ||
| }, | ||
| label: '2', | ||
| contentElements: [ | ||
| { | ||
| type: 'paragraph', | ||
| contentElements: [ | ||
| { | ||
| type: 'internalReference', | ||
| referencedLabel: 'tableReference', | ||
| displayText: { | ||
| type: 'text', | ||
| content: 'This should take you to the table below.', | ||
| styles: [], | ||
| }, | ||
| }, | ||
| { | ||
| type: 'text', | ||
| content: | ||
| ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'weblink', | ||
| url: 'https://www.lipsum.com', | ||
| displayText: { | ||
| type: 'text', | ||
| content: 'Lorem Ipsum', | ||
| styles: [], | ||
| }, | ||
| }, | ||
| { | ||
| type: 'text', | ||
| content: | ||
| ' has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'table', | ||
| rows: [ | ||
| [ | ||
| { | ||
| elements: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Row 1', | ||
| styles: ['BOLD'], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| elements: [ | ||
| { | ||
| type: 'text', | ||
| content: 'We have a website here', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'breakline', | ||
| }, | ||
| { | ||
| type: 'weblink', | ||
| url: 'https://www.exampleurlgoeshere.com', | ||
| displayText: null, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| [ | ||
| { | ||
| elements: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Row 2', | ||
| styles: ['BOLD'], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| elements: [ | ||
| { | ||
| type: 'text', | ||
| content: 'Just some text on the first line', | ||
| styles: [], | ||
| }, | ||
| { | ||
| type: 'breakline', | ||
| }, | ||
| { | ||
| type: 'text', | ||
| content: 'Just some text on the next line', | ||
| styles: [], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| ], | ||
| titlePrefix: { | ||
| type: 'text', | ||
| content: '1.', | ||
| styles: [], | ||
| }, | ||
| title: { | ||
| type: 'text', | ||
| content: 'Lorem Ipsum', | ||
| styles: [], | ||
| }, | ||
| style: { | ||
| columnSizes: ['SMALL', 'LARGE'], | ||
| alignment: 'LEFT', | ||
| }, | ||
| label: 'tableReference', | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| const documentViewer = new AdyenDocumentViewer('#document-viewer', { | ||
| onExpandSection: (sectionTitle) => console.log(`${sectionTitle} expanded`), | ||
| multiple: false, | ||
| }); | ||
|
|
||
| documentViewer.render(exampleDocument); | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.