Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: Adyen/adyen-document-viewer
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.0.1
Choose a base ref
...
head repository: Adyen/adyen-document-viewer
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref
Loading
Showing with 892 additions and 327 deletions.
  1. +9 −2 .eslintrc.cjs
  2. +4 −1 .git-blame-ignore-revs
  3. +2 −1 .github/workflows/npm-publish.yml
  4. +41 −0 .github/workflows/pr.yml
  5. +5 −1 .gitignore
  6. +1 −0 .prettierignore
  7. +21 −0 README.md
  8. +19 −9 package.json
  9. +6 −1 playground/example.js
  10. +2 −1 { → playground}/index.html
  11. +25 −0 playground/loadViaEsModuleImport.html
  12. +312 −0 playground/loadViaUmdScript.html
  13. +205 −201 playground/mock-data.js
  14. +44 −0 playwright.config.ts
  15. +1 −1 prettier.config.js
  16. +7 −3 src/DocumentViewer.tsx
  17. +6 −4 src/components/Accordion/Accordion.tsx
  18. +1 −0 src/components/Accordion/AccordionContext.ts
  19. +5 −3 src/components/Accordion/types.ts
  20. +13 −10 src/components/AccordionItem/AccordionItem.tsx
  21. +1 −0 src/components/AccordionItem/useAccordionContext.ts
  22. +2 −1 src/components/Chapter/Chapter.tsx
  23. +4 −2 src/components/CollapsibleContainer/CollapsibleContainer.tsx
  24. +8 −6 src/components/ContentElements/ContentElements.tsx
  25. +1 −0 src/components/Heading/Heading.mixins.scss
  26. +3 −2 src/components/Heading/Heading.tsx
  27. +8 −3 src/components/Icon/Icon.tsx
  28. +6 −5 src/components/InternalReference/InternalReference.tsx
  29. +4 −2 src/components/Link/Link.tsx
  30. +2 −2 src/components/LinkButton/LinkButton.tsx
  31. +4 −2 src/components/List/List.tsx
  32. +2 −1 src/components/List/ListItem.tsx
  33. +2 −1 src/components/ListElemennt/List.tsx
  34. +4 −2 src/components/Paragraph/Paragraph.tsx
  35. +10 −8 src/components/Section/Section.tsx
  36. +5 −3 src/components/Table/Table.tsx
  37. +2 −1 src/components/Text/Text.tsx
  38. +2 −1 src/components/Weblink/Weblink.tsx
  39. +26 −9 src/index.tsx
  40. +1 −1 src/scss.d.ts
  41. +2 −1 src/style/mixins.scss
  42. +1 −0 src/style/variables.scss
  43. +9 −1 src/types/index.ts
  44. +5 −7 src/utils/scroll.ts
  45. +15 −0 tests/checkBuiltPackageWorks.test.ts
  46. +1 −1 tsconfig-build.json
  47. +1 −1 tsconfig.json
  48. +32 −26 vite.config.ts
11 changes: 9 additions & 2 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['react', '@typescript-eslint', 'import', 'jsx-a11y'],
plugins: ['react', '@typescript-eslint', 'import', 'jsx-a11y', 'simple-import-sort', 'prettier'],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended' /*'prettier/@typescript-eslint'*/,
'plugin:@typescript-eslint/recommended',
'prettier',
],
parserOptions: {
ecmaVersion: 2020,
@@ -86,6 +87,12 @@ module.exports = {
// the base rule can report incorrect errors
'no-useless-constructor': 'off',

// simple-import-sort
'import/order': 'off', // must be off for simple-import-sort to work
'simple-import-sort/exports': 'error',
'simple-import-sort/imports': 'error',
'sort-imports': 'off', // must be off for simple-import-sort to work

// Typescript Rules
'@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true, vars: 'local' }],
'@typescript-eslint/explicit-member-accessibility': 'off',
5 changes: 4 additions & 1 deletion .git-blame-ignore-revs
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
# Change tab width to 2
65c4ba06306fe0b1dedab4a8ae11e769305727c9
65c4ba06306fe0b1dedab4a8ae11e769305727c9

# Run eslint and prettier fix on project files
cbdd2259fdc4220ccbb376ac488806e72f175a1e
3 changes: 2 additions & 1 deletion .github/workflows/npm-publish.yml
Original file line number Diff line number Diff line change
@@ -20,6 +20,7 @@ jobs:
publish-npm:
needs: build
runs-on: ubuntu-latest
environment: release
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
@@ -30,4 +31,4 @@ jobs:
- run: npm run build
- run: npm publish --access public
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
NODE_AUTH_TOKEN: ${{secrets.NPM_ADYEN_DOCUMENT_VIEWER_TOKEN}}
41 changes: 41 additions & 0 deletions .github/workflows/pr.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
name: PR CI

on:
pull_request:
types: [opened, synchronize, reopened]
paths-ignore:
- README.md
- LICENSE
- .gitignore

jobs:
lint:
runs-on: ubuntu-latest
timeout-minutes: 2
steps:
- name: Checkout the repo
uses: actions/checkout@v4

- run: npm i
- run: npm run check:all

build:
runs-on: ubuntu-latest
timeout-minutes: 2
steps:
- name: Checkout the repo
uses: actions/checkout@v4

- run: npm i
- run: npm run build

test:
runs-on: ubuntu-latest
timeout-minutes: 3
steps:
- name: Checkout the repo
uses: actions/checkout@v4

- run: npm i
- run: npx playwright install
- run: npm run test
6 changes: 5 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -3,4 +3,8 @@ node_modules
.idea
dist
adyen-document-viewer.iml
package-lock.json
package-lock.json

# Playwright
test-results/
playwright-report/
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
README.md
21 changes: 21 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -47,6 +47,26 @@ Include the script and stylesheet to a `.html` file
documentViewer.render(document);
```

## Configuration Options

You can customize the behavior of `AdyenDocumentViewer` by passing options during initialization.

| Option | Description | Default |
| ----------------- | ------------------------------------------------------- | ----------- |
| `onExpandSection` | Callback function triggered when a section is expanded. | `undefined` |
| `multiple` | Allow multiple sections to be expanded simultaneously. | `false` |

You can provide an object with the options as the second parameter when creating an instance of `AdyenDocumentViewer`:

```js
const options = {
onExpandSection: (sectionTitle) => console.log(`Section ${sectionTitle} expanded`),
multiple: true,
};

const documentViewer = new AdyenDocumentViewer('#test', options);
```

## Styling

Adyen Document Viewer is themeable and uses CSS variables that can be overridden in order to achieve the desired style. Overrides should be added for `.adyen-document-viewer` class.
@@ -154,6 +174,7 @@ Adyen Document Viewer is themeable and uses CSS variables that can be overridden
--adv-heading-font-size: 32px;
--adv-heading-font-weight: var(--adv-text-font-weight-semi-bold);
--adv-heading-line-height: 40px;
--adv-heading-text-align: left;
--adv-heading-2-font-size: 24px;
--adv-heading-2-font-weight: var(--adv-text-font-weight-semi-bold);
--adv-heading-2-line-height: 32px;
28 changes: 19 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
@@ -7,32 +7,43 @@
"viewer",
"adyen-document-viewer"
],
"version": "1.0.1",
"version": "1.2.0",
"description": "Adyen Document Viewer",
"main": "./dist/adyen-document-viewer.min.umd.cjs",
"module": "./dist/adyen-document-viewer.min.js",
"main": "./dist/adyen-document-viewer.min.js",
"module": "./dist/adyen-document-viewer.min.mjs",
"type": "module",
"types": "./dist/index.d.ts",
"scripts": {
"start": "vite",
"build": "vite build && npm run types:build",
"check:all": "npm run types:check && npm run lint && npm run prettier",
"lint": "eslint 'src/**/*.{js,ts,tsx}'",
"lint:fix": "npm run lint -- --fix",
"prettier": "prettier --config ./prettier.config.js --ignore-unknown --check \"**/*\"",
"prettier:fix": "prettier --config ./prettier.config.js --ignore-unknown --write \"**/*\"",
"fix:all": "npm run prettier:fix && npm run lint:fix",
"test": "playwright test",
"test:debug": "playwright test --debug",
"test:ui": "playwright test --ui",
"types:build": "tsc --project tsconfig-build.json",
"types:check": "tsc && tsc-strict",
"types:check": "tsc",
"types:watch": "tsc --watch --preserveWatchOutput"
},
"dependencies": {
"classnames": "2.5.1",
"preact": "10.19.3"
},
"devDependencies": {
"@playwright/test": "^1.45.3",
"@preact/preset-vite": "^2.8.1",
"@typescript-eslint/eslint-plugin": "^6.19.1",
"@typescript-eslint/parser": "^6.19.1",
"eslint": "^8.12.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.29.1",
"eslint-config-prettier": "^8.10.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-react": "^7.33.2",
"prettier": "3.2.4",
@@ -42,17 +53,16 @@
"stylelint-config-sass-guidelines": "^9.0.1",
"stylelint-scss": "^4.2.0",
"typescript": "^5.3.3",
"typescript-strict-plugin": "^2.2.0",
"vite": "^4.5.1"
},
"license": "SEE LICENSE IN LICENSE",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/Adyen/adyen-document-viewer.git"
},
"files": [
"dist/adyen-document-viewer.min.mjs",
"dist/adyen-document-viewer.min.js",
"dist/adyen-document-viewer.min.umd.cjs",
"dist/adyen-document-viewer.min.css",
"dist/index.d.ts",
"dist/types/index.d.ts",
@@ -62,8 +72,8 @@
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/adyen-document-viewer.min.js",
"require": "./dist/adyen-document-viewer.min.umd.cjs"
"import": "./dist/adyen-document-viewer.min.mjs",
"require": "./dist/adyen-document-viewer.min.js"
},
"./dist/adyen-document-viewer.min.css": "./dist/adyen-document-viewer.min.css"
},
7 changes: 6 additions & 1 deletion playground/example.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import 'preact/debug';

import AdyenDocumentViewer from '../src/index';
import exampleDocument from './mock-data';

const documentViewer = new AdyenDocumentViewer('#document-viewer');
const documentViewer = new AdyenDocumentViewer('#document-viewer', {
onExpandSection: (sectionTitle) => console.log(`${sectionTitle} expanded`),
multiple: false,
});

documentViewer.render(exampleDocument);
3 changes: 2 additions & 1 deletion index.html → playground/index.html
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@
</head>
<body>
<div id="document-viewer"></div>
<script defer type="module" src="/playground/example.js"></script>

<script type="module" src="./example.js"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions playground/loadViaEsModuleImport.html
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>
Loading