Skip to content

chore: update new component development's landing page #11427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

chore: update new component development's landing page #11427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
771ebe4
chore: update landing page
ilhan007 Apr 28, 2025
ef358af
Merge branch 'main' into chore-update-create-package-index-page
ilhan007 Apr 30, 2025
512b430
chore: add border-radius to settings links
ilhan007 Apr 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions packages/create-package/template/src/themes/sap_fiori_3/parameters-bundle.css
View file
Open in desktop

This file was deleted.

76 changes: 62 additions & 14 deletions packages/create-package/template/test/pages/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ body {
background-color: var(--sapBackgroundColor);
font-size: var(--sapFontSize);
font-family: var(--sapFontFamily);
padding: 2rem;
}

h1 {
Expand All @@ -11,31 +12,78 @@ h1 {
}

h2 {
font-size: var(--sapFontHeader3Size);
margin-bottom: 0.5rem;
font-size: var(--sapFontHeader4Size);
}

a {
margin: 0.25rem;
padding: 0.5rem;
}

a.link {
color: var(--sapLinkColor);
}

.app, .app-settings, .app-docs, .app-first-component {
a.theme-link {
color: var(--sapButton_Emphasized_TextColor);
background-color: var(--sapButton_Emphasized_Background);
text-decoration: none;
border-radius: 0.25rem;
}

a.lang-link {
color: var(--sapButton_Attention_TextColor);
background-color: var(--sapButton_Attention_Background);
text-decoration: none;
border-radius: 0.25rem;
}

.app {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
align-items: center;
}

.app-nav {
display: flex;
width: 100%;
flex-direction: row;
justify-content: flex-end;
}

.app-logo {
height: 230px;
width: 230px;
height: 5rem;
width: 5rem;
}

.app-first-component {
margin-bottom: 3rem;
.app-header {
display: flex;
flex-direction: row;
align-items: center;
}

.app-docs {
margin-top: 3rem;
.app-main {
display: flex;
flex-direction: row;
align-items: flex-start;
padding-top: 2rem;
}

a {
margin: 0.25rem;
color: var(--sapLinkColor);
.app-main-demo {
padding: 2rem;
border-radius: 0.5rem;
box-sizing: border-box;
background-color: var(--sapTile_Background);
}

.app-main-settings {
display: flex;
flex-direction: column;
padding: 0 2rem;
}

@media (max-width: 768px) {
.app-main {
flex-direction: column;
}
}
76 changes: 35 additions & 41 deletions packages/create-package/template/test/pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,53 @@
<!DOCTYPE html>
<html>
<html lang="en">

<head>
<meta charset="utf-8">

<title>{{INIT_PACKAGE_VAR_TAG}}</title>
<title>UI5 Web Components</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">

<script data-ui5-config type="application/json">
{
"theme": "sap_horizon_dark",
"language": "EN"
}
</script>

<link rel="stylesheet" type="text/css" href="./css/index.css">
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
</head>

<body>
<div class="app">
<a href="https://sap.github.io/ui5-webcomponents/docs/getting-started/first-steps/" target="_blank"><img src="./img/logo.png" class="app-logo" alt="logo"/></a>

<div class="app-first-component">
<h1>Hooray! It's Your First Web Component!</h1>
<div> <pre>&lt;{{INIT_PACKAGE_VAR_TAG}}>&lt;/{{INIT_PACKAGE_VAR_TAG}}> </pre></div>
<{{INIT_PACKAGE_VAR_TAG}} id="myFirstComponent"></{{INIT_PACKAGE_VAR_TAG}}>
</div>

<div class="app-settings">

<h2>Switch themes</h2>
<div style="display: flex; flex-direction: row;">
<a class="link" href="?sap-ui-theme=sap_horizon">Horizon</a>
<a class="link" href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a>
<a class="link" href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a>
<a class="link" href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a>
<nav class="app-nav">
<a class="link" href="https://sap.github.io/ui5-webcomponents/">Website</a>
<a class="link" href="https://sap.github.io/ui5-webcomponents/components/">Components</a>
<a class="link" href="https://sap.github.io/ui5-webcomponents/docs/development/package/">Development</a>
</nav>

<header class="app-header">
<a href="https://sap.github.io/ui5-webcomponents/" target="_blank"><img src="./img/logo.png" class="app-logo" alt="logo"/></a>
<h1>UI5 Web Components</h1>
</header>

<main class="app-main">
<div class="app-main-demo">
<h2>Congrats! It's your First Web Component 🎉</h2>
<div> <pre>&lt;{{INIT_PACKAGE_VAR_TAG}}>&lt;/{{INIT_PACKAGE_VAR_TAG}}> </pre></div>
<{{INIT_PACKAGE_VAR_TAG}} id="myFirstComponent"></{{INIT_PACKAGE_VAR_TAG}}>
</div>

<h2>Switch language</h2>
<div>
<a class="link" href="?sap-ui-language=en">English</a>
<a class="link" href="?sap-ui-language=de">German</a>
<a class="link" href="?sap-ui-language=es">Spanish</a>
<a class="link" href="?sap-ui-language=fr">French</a>
<div class="app-main-settings">
<h3>Switch theme</h3>
<div style="display: grid; grid-template-columns: 1fr 1fr;">
<a class="link theme-link" href="?sap-ui-theme=sap_horizon">Horizon Morning</a>
<a class="link theme-link" href="?sap-ui-theme=sap_horizon_dark">Horizon Evening</a>
<a class="link theme-link" href="?sap-ui-theme=sap_horizon_hcb">High Contrast Black</a>
<a class="link theme-link" href="?sap-ui-theme=sap_horizon_hcw">High Contrast White</a>
</div>

<h3>Switch language</h3>
<div style="display: grid; grid-template-columns: 1fr 1fr;">
<a class="link lang-link" href="?sap-ui-language=en">English</a>
<a class="link lang-link" href="?sap-ui-language=de">German</a>
<a class="link lang-link" href="?sap-ui-language=es">Spanish</a>
<a class="link lang-link" href="?sap-ui-language=fr">French</a>
</div>
</div>
</div>

<div class="app-docs">
<a class="link" href="https://sap.github.io/ui5-webcomponents/">Website</a>
<a class="link" href="https://sap.github.io/ui5-webcomponents/components/">Components</a>
<a class="link" href="https://sap.github.io/ui5-webcomponents/play/">Playground</a>
<a class="link" href="https://sap.github.io/ui5-webcomponents/docs/development/package/">Development Docs</a>
</div>
</main>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion packages/tools/lib/create-new-component/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const generateFiles = (componentName, tagName, library, packageName) => {

// Change the color of the output
console.warn('\x1b[33m%s\x1b[0m', `
Now, import the component via: "import ${componentName} from "./${componentName}.js";
Now, import the component in src/bundle.esm.ts via: "import ${componentName} from ./${componentName}.js";
And, add it to your HTML: <${tagName}></${tagName}>.`);
}

Expand Down
Loading