-
Notifications
You must be signed in to change notification settings - Fork 73
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(html-test-app): migrate examples to test app
- Loading branch information
1 parent
2dc75aa
commit 3a4a5f2
Showing
82 changed files
with
2,579 additions
and
4 deletions.
There are no files selected for viewing
33 changes: 33 additions & 0 deletions
33
packages/html-test-app/src/preview-examples/about-and-legal.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,33 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>About and legal example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <ix-basic-navigation> | ||
| <ix-menu> | ||
| <ix-menu-about> | ||
| <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item> | ||
| <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item> | ||
| </ix-menu-about> | ||
| </ix-menu> | ||
| </ix-basic-navigation> | ||
|
|
||
| <script> | ||
| (async function () { | ||
| await window.customElements.whenDefined('ix-menu'); | ||
| const instance = document.querySelector('ix-menu'); | ||
| await instance.toggleAbout(true); | ||
| })(); | ||
| </script> | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></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,46 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Blind example</title> | ||
| <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <div | ||
| style="height: 12rem; width: 100%" | ||
| id="grid-container" | ||
| class="ag-theme-alpine-dark ag-theme-ix" | ||
| ></div> | ||
| <script> | ||
| (async function () { | ||
| const container = document.querySelector('#grid-container'); | ||
|
|
||
| const gridOptions = { | ||
| columnDefs: [ | ||
| { field: 'make', resizable: true, checkboxSelection: true }, | ||
| { field: 'model', resizable: true, sortable: true, filter: true }, | ||
| { field: 'price', resizable: true }, | ||
| ], | ||
| rowData: [ | ||
| { make: 'Toyota', model: 'Celica', price: 35000, checked: false }, | ||
| { make: 'Ford', model: 'Mondeo', price: 32000, checked: true }, | ||
| { make: 'Porsche', model: 'Boxster', price: 72000, checked: false }, | ||
| ], | ||
| rowSelection: 'multiple', | ||
| suppressCellFocus: true, | ||
| checkboxSelection: true, | ||
| }; | ||
|
|
||
| new agGrid.Grid(container, gridOptions); | ||
| })(); | ||
| </script> | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></script> | ||
| </body> | ||
| </html> |
28 changes: 28 additions & 0 deletions
28
packages/html-test-app/src/preview-examples/animated-tabs.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,28 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Animated tabs example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <ix-animated-tabs> | ||
| <ix-animated-tab icon="document"> | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr | ||
| </ix-animated-tab> | ||
| <ix-animated-tab icon="cut" count="10"> | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr | ||
| </ix-animated-tab> | ||
| <ix-animated-tab icon="star"> | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr | ||
| </ix-animated-tab> | ||
| </ix-animated-tabs> | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></script> | ||
| </body> | ||
| </html> |
23 changes: 23 additions & 0 deletions
23
packages/html-test-app/src/preview-examples/basic-navigation-without-header.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,23 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Basic navigation without header example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <ix-basic-navigation hide-header> | ||
| <ix-menu> | ||
| <ix-menu-item>Item 1</ix-menu-item> | ||
| <ix-menu-item>Item 2</ix-menu-item> | ||
| </ix-menu> | ||
| </ix-basic-navigation> | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></script> | ||
| </body> | ||
| </html> |
48 changes: 48 additions & 0 deletions
48
packages/html-test-app/src/preview-examples/basic-navigation.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,48 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Basic navigation example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <ix-basic-navigation> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="32" | ||
| height="32" | ||
| viewBox="0 0 184.567 138" | ||
| slot="logo" | ||
| > | ||
| <defs> | ||
| <linearGradient | ||
| id="x05mhzd7ga" | ||
| x1=".5" | ||
| x2=".5" | ||
| y2="1" | ||
| gradientUnits="objectBoundingBox" | ||
| > | ||
| <stop offset="0" stop-color="#00ffb9" /> | ||
| <stop offset="1" stop-color="#0cc" /> | ||
| </linearGradient> | ||
| </defs> | ||
| <path | ||
| data-name="Vereinigungsmenge 41" | ||
| d="M0 126c0-.337.014-.67.041-1H0V60a12 12 0 1 1 24 0v65h-.042c.027.329.042.663.042 1a12 12 0 0 1-24 0zm50.944 8.052a12 12 0 0 1 0-16.969L99.027 69 50.944 20.919A12 12 0 0 1 67.915 3.947L116 52.03l48.083-48.084a12 12 0 0 1 16.969 16.971L132.969 69l48.084 48.084a12 12 0 0 1-16.969 16.971L116 85.971l-48.085 48.082a12 12 0 0 1-16.971 0zM0 12a12 12 0 1 1 12 12A12 12 0 0 1 0 12z" | ||
| style="fill: url(#x05mhzd7ga)" | ||
| /> | ||
| </svg> | ||
| <ix-menu> | ||
| <ix-menu-item>Item 1</ix-menu-item> | ||
| <ix-menu-item>Item 2</ix-menu-item> | ||
| </ix-menu> | ||
| </ix-basic-navigation> | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></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,28 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Blind example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <ix-blind label="Example"> | ||
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy | ||
| eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam | ||
| voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet | ||
| clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit | ||
| amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam | ||
| nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed | ||
| diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. | ||
| Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor | ||
| sit amet. | ||
| </ix-blind> | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></script> | ||
| </body> | ||
| </html> |
27 changes: 27 additions & 0 deletions
27
packages/html-test-app/src/preview-examples/breadcrumb-next-items.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,27 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Breadcrumb next items example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <ix-breadcrumb> | ||
| <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item> | ||
| <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item> | ||
| <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item> | ||
| </ix-breadcrumb> | ||
|
|
||
| <script> | ||
| const instance = document.querySelector('ix-breadcrumb'); | ||
| instance.nextItems = ['Next Item 1']; | ||
| </script> | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></script> | ||
| </body> | ||
| </html> |
24 changes: 24 additions & 0 deletions
24
packages/html-test-app/src/preview-examples/breadcrumb-truncate.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,24 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Breadcrumb truncate example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <ix-breadcrumb visible-item-count="3"> | ||
| <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item> | ||
| <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item> | ||
| <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item> | ||
| <ix-breadcrumb-item label="Item 4"></ix-breadcrumb-item> | ||
| <ix-breadcrumb-item label="Item 5"></ix-breadcrumb-item> | ||
| </ix-breadcrumb> | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></script> | ||
| </body> | ||
| </html> |
22 changes: 22 additions & 0 deletions
22
packages/html-test-app/src/preview-examples/breadcrumb.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,22 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Breadcrumb example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <ix-breadcrumb> | ||
| <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item> | ||
| <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item> | ||
| <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item> | ||
| </ix-breadcrumb> | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></script> | ||
| </body> | ||
| </html> |
22 changes: 22 additions & 0 deletions
22
packages/html-test-app/src/preview-examples/button-group.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,22 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Test example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <div class="btn-group"> | ||
| <ix-button outline>Left</ix-button> | ||
| <ix-button>Middle</ix-button> | ||
| <ix-button outline>Right</ix-button> | ||
| </div> | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></script> | ||
| </body> | ||
| </html> |
23 changes: 23 additions & 0 deletions
23
packages/html-test-app/src/preview-examples/button-selected.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,23 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Button selected example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <ix-button class="m-1" variant="Secondary" invisible | ||
| >Not selected</ix-button | ||
| > | ||
| <ix-button class="m-1" variant="Secondary" invisible selected | ||
| >Selected</ix-button | ||
| > | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></script> | ||
| </body> | ||
| </html> |
20 changes: 20 additions & 0 deletions
20
packages/html-test-app/src/preview-examples/button-with-icon.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,20 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Button with icon example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
|
|
||
| <ix-icon-button icon="star"> </ix-icon-button> | ||
|
|
||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></script> | ||
| </body> | ||
| </html> |
21 changes: 21 additions & 0 deletions
21
packages/html-test-app/src/preview-examples/buttons copy.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,21 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: 2022 Siemens AG | ||
| SPDX-License-Identifier: MIT | ||
| --> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Buttons example</title> | ||
| </head> | ||
| <body class="theme-brand-dark"> | ||
| <!-- Preview code --> | ||
| <ix-button class="m-1" variant="primary">Button</ix-button> | ||
| <ix-button class="m-1" variant="secondary">Button</ix-button> | ||
| <ix-button class="m-1" outline>Button</ix-button> | ||
| <ix-button class="m-1" invisible>Button</ix-button> | ||
| <!-- Preview code --> | ||
| <script type="module" src="./init.js"></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
Oops, something went wrong.