so-web-components 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +45 -7
  2. package/dist/components/so-lead-text.d.ts +5 -0
  3. package/dist/components/so-lead-text.js +34 -0
  4. package/dist/demo/cdn-demo.html +15 -13
  5. package/dist/demo/index.html +13 -0
  6. package/dist/index.d.ts +2 -1
  7. package/dist/index.js +5 -1
  8. package/dist/styles/tokens.css +13 -0
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -11,10 +11,12 @@ abgeleitet aus dem Layout-Prinzip von so.ch.
11
11
  - Schrift: `Frutiger, sans-serif`
12
12
  - `src/components/so-header.ts` – `<so-header>` Web Component (Shadow DOM)
13
13
  - `src/components/so-breadcrumb.ts` – `<so-breadcrumb>` Web Component (Shadow DOM)
14
+ - `src/components/so-lead-text.ts` – `<so-lead-text>` Web Component für Intro-/Lead-Absätze
14
15
  - `src/demo/index.html` – Demo-Seite
15
16
  - `src/demo/cdn-demo.html` – einfache CDN-Demo-Seite
16
17
  - `tests/so-header.test.ts` – Tests (Jest + JSDOM)
17
18
  - `tests/so-breadcrumb.test.ts` – Tests (Jest + JSDOM)
19
+ - `tests/so-lead-text.test.ts` – Tests (Jest + JSDOM)
18
20
 
19
21
  ## Voraussetzungen
20
22
 
@@ -75,11 +77,11 @@ git push origin v0.1.1
75
77
  Nach dem Publish sind die Web Components z.B. über **unpkg** oder **jsDelivr** verfügbar:
76
78
 
77
79
  ```html
78
- <script type="module" src="https://unpkg.com/so-web-components@0.1.1/dist/index.js"></script>
80
+ <script type="module" src="https://unpkg.com/so-web-components@latest/dist/index.js"></script>
79
81
  ```
80
82
 
81
83
  ```html
82
- <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/index.js"></script>
84
+ <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/index.js"></script>
83
85
  ```
84
86
 
85
87
  Optional ohne Versions-Pin:
@@ -92,7 +94,11 @@ Optional ohne Versions-Pin:
92
94
  <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components/dist/index.js"></script>
93
95
  ```
94
96
 
95
- ### Einfache Test-Webseite via CDN (Version `0.1.1`)
97
+ Hinweis:
98
+ - `@latest` ist möglich und lädt die aktuellste veröffentlichte Version.
99
+ - Für stabile Produktion empfiehlt sich trotzdem ein expliziter Versions-Pin (z.B. `@0.1.8`).
100
+
101
+ ### Einfache Test-Webseite via CDN (Version `latest`)
96
102
 
97
103
  Eine fertige Beispielseite liegt unter `src/demo/cdn-demo.html` (wird nach `dist/demo/cdn-demo.html` kopiert):
98
104
 
@@ -104,10 +110,10 @@ Eine fertige Beispielseite liegt unter `src/demo/cdn-demo.html` (wird nach `dist
104
110
  <meta name="viewport" content="width=device-width,initial-scale=1" />
105
111
  <title>so-web-components CDN Demo</title>
106
112
 
107
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/reset.css" />
108
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/fonts.css" />
109
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/tokens.css" />
110
- <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/index.js"></script>
113
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/reset.css" />
114
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/fonts.css" />
115
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/tokens.css" />
116
+ <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/index.js"></script>
111
117
  </head>
112
118
  <body>
113
119
  <so-header
@@ -177,6 +183,9 @@ Dann im Browser öffnen:
177
183
 
178
184
  <so-header></so-header>
179
185
  <so-breadcrumb></so-breadcrumb>
186
+ <so-lead-text>
187
+ <p>Ein kurzer Leadtext mit <a href="#">Link</a>.</p>
188
+ </so-lead-text>
180
189
  ```
181
190
 
182
191
  ### 3) Navigation konfigurieren (optional)
@@ -255,3 +264,32 @@ Einfach per CSS Custom Properties:
255
264
  ## Lizenz
256
265
 
257
266
  MIT (für dieses Beispielprojekt).
267
+
268
+
269
+ ### `<so-lead-text>`
270
+
271
+ Für grössere Intro-Absätze unter einer Seitentitel-Zeile.
272
+
273
+ **Beispiel**
274
+
275
+ ```html
276
+ <h1 class="so-page-title">Kartenkatalog</h1>
277
+ <so-lead-text>
278
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
279
+ <p>Mit <a href="https://www.cogeo.org/">einem Link</a> im Text.</p>
280
+ </so-lead-text>
281
+ ```
282
+
283
+ **Custom Properties**
284
+
285
+ - `--so-lead-text-margin-top` (Default `24px`)
286
+ - `--so-lead-text-font-size` (Default `1.125rem`)
287
+ - `--so-lead-text-line-height` (Default `1.55`)
288
+
289
+ ### Standard-Linkstyling in `tokens.css`
290
+
291
+ Ja, das passt gut in `tokens.css` für den globalen Fallback ausserhalb von Shadow-DOM-Komponenten.
292
+
293
+ - Links sind standardmässig unterstrichen.
294
+ - Hover/Focus rendert rot (`#e01f26`).
295
+ - Übersteuerbar via CSS-Variablen `--so-link-color` und `--so-link-hover-color`.
package/dist/components/so-lead-text.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare class SoLeadText extends HTMLElement {
2
+ constructor();
3
+ connectedCallback(): void;
4
+ private render;
5
+ }
package/dist/components/so-lead-text.js ADDED
@@ -0,0 +1,34 @@
1
+ export class SoLeadText extends HTMLElement {
2
+ constructor() {
3
+ super();
4
+ this.attachShadow({ mode: "open" });
5
+ }
6
+ connectedCallback() {
7
+ this.render();
8
+ }
9
+ render() {
10
+ if (!this.shadowRoot)
11
+ return;
12
+ this.shadowRoot.innerHTML = `
13
+ <style>
14
+ :host {
15
+ display: block;
16
+ margin-top: var(--so-lead-text-margin-top, 24px);
17
+ color: inherit;
18
+ }
19
+
20
+ ::slotted(p) {
21
+ margin: 0 0 18px;
22
+ font-size: var(--so-lead-text-font-size, 1.125rem);
23
+ line-height: var(--so-lead-text-line-height, 1.55);
24
+ }
25
+
26
+ ::slotted(p:last-child) {
27
+ margin-bottom: 0;
28
+ }
29
+ </style>
30
+
31
+ <slot></slot>
32
+ `;
33
+ }
34
+ }
package/dist/demo/cdn-demo.html CHANGED
@@ -6,12 +6,12 @@
6
6
  <title>so-web-components CDN Demo</title>
7
7
 
8
8
  <!-- Basis-Styles und Fonts von CDN -->
9
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/reset.css" />
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/fonts.css" />
11
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/tokens.css" />
9
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/reset.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/fonts.css" />
11
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/tokens.css" />
12
12
 
13
13
  <!-- Web Components von CDN -->
14
- <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/index.js"></script>
14
+ <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/index.js"></script>
15
15
 
16
16
  <style>
17
17
  body {
@@ -22,18 +22,17 @@
22
22
  }
23
23
 
24
24
  main {
25
- max-width: 960px;
25
+ max-width: 1040px;
26
26
  margin: 0 auto;
27
27
  padding: 24px;
28
28
  }
29
29
 
30
- h1 {
31
- margin: 0 0 12px;
32
- font-size: 1.5rem;
33
- }
34
-
35
- p {
30
+ .so-page-title {
36
31
  margin: 0;
32
+ font-size: 2.25rem;
33
+ line-height: 1.15;
34
+ font-weight: 900;
35
+ letter-spacing: 0;
37
36
  }
38
37
  </style>
39
38
  </head>
@@ -47,8 +46,11 @@
47
46
  </so-breadcrumb>
48
47
 
49
48
  <main>
50
- <h1>Demo-Seite für einfache Webseiten</h1>
51
- <p>Diese Seite lädt <code>so-header</code> und <code>so-breadcrumb</code> direkt aus dem CDN.</p>
49
+ <h1 class="so-page-title">Kartenkatalog</h1>
50
+ <so-lead-text>
51
+ <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Nisi donec vulputate posuere auctor dictum ante. Eu convallis mi consequat per sollicitudin vestibulum odio ut maximus. Maecenas tellus sodales eget nunc volutpat nam integer?</p>
52
+ <p>Ad diam tristique netus conubia dui maecenas pretium aenean. Ridiculus <a href="https://www.cogeo.org/" target="_blank" rel="noopener noreferrer">Cloud Optimized GeoTIFF</a> dictum ligula pretium, ridiculus maecenas tortor.</p>
53
+ </so-lead-text>
52
54
  </main>
53
55
  </body>
54
56
  </html>
package/dist/demo/index.html CHANGED
@@ -12,7 +12,15 @@
12
12
  body{ background: var(--so-bg); color: var(--so-fg); font-family: var(--so-font-family); }
13
13
  main{ padding: 2rem 0; }
14
14
  .so-container{ max-width: var(--so-container-size-full); margin-inline:auto; padding-inline: var(--so-container-padding); }
15
+ .so-page-title {
16
+ margin: 0;
17
+ font-size: 2.25rem;
18
+ line-height: 1.15;
19
+ font-weight: 900;
20
+ letter-spacing: 0;
21
+ }
15
22
  .hero{
23
+ margin-top: 2rem;
16
24
  height: 260px;
17
25
  border-radius: 12px;
18
26
  background: linear-gradient(135deg, rgba(0,0,0,0.08), rgba(0,0,0,0.02));
@@ -38,6 +46,11 @@
38
46
 
39
47
  <main>
40
48
  <div class="so-container">
49
+ <h1 class="so-page-title">Kartenkatalog</h1>
50
+ <so-lead-text>
51
+ <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Nisi donec vulputate posuere auctor dictum ante. Eu convallis mi consequat per sollicitudin vestibulum odio ut maximus. Maecenas tellus sodales eget nunc volutpat nam integer?</p>
52
+ <p>Ad diam tristique netus conubia dui maecenas pretium aenean. Ridiculus <a href="https://www.cogeo.org/" target="_blank" rel="noopener noreferrer">Cloud Optimized GeoTIFF</a> dictum ligula pretium, ridiculus maecenas tortor.</p>
53
+ </so-lead-text>
41
54
  <div class="hero">Willkommen beim Kanton Solothurn</div>
42
55
  </div>
43
56
  </main>
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import { SoBreadcrumb, SoBreadcrumbItem } from "./components/so-breadcrumb.js";
2
2
  import { SoHeader } from "./components/so-header.js";
3
- export { SoBreadcrumb, SoBreadcrumbItem, SoHeader };
3
+ import { SoLeadText } from "./components/so-lead-text.js";
4
+ export { SoBreadcrumb, SoBreadcrumbItem, SoHeader, SoLeadText };
package/dist/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { SoBreadcrumb, SoBreadcrumbItem } from "./components/so-breadcrumb.js";
2
2
  import { SoHeader } from "./components/so-header.js";
3
+ import { SoLeadText } from "./components/so-lead-text.js";
3
4
  if (!customElements.get("so-header")) {
4
5
  customElements.define("so-header", SoHeader);
5
6
  }
@@ -9,4 +10,7 @@ if (!customElements.get("so-breadcrumb")) {
9
10
  if (!customElements.get("so-breadcrumb-item")) {
10
11
  customElements.define("so-breadcrumb-item", SoBreadcrumbItem);
11
12
  }
12
- export { SoBreadcrumb, SoBreadcrumbItem, SoHeader };
13
+ if (!customElements.get("so-lead-text")) {
14
+ customElements.define("so-lead-text", SoLeadText);
15
+ }
16
+ export { SoBreadcrumb, SoBreadcrumbItem, SoHeader, SoLeadText };
package/dist/styles/tokens.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --so-bg: #fff;
4
4
  --so-fg: rgb(47, 72, 88);
5
5
  --so-border-color: rgb(223, 223, 223);
6
+ --so-link-color: inherit;
7
+ --so-link-hover-color: #e01f26;
6
8
 
7
9
  -webkit-font-smoothing: antialiased;
8
10
  -moz-osx-font-smoothing: grayscale; /* mac Firefox */
@@ -52,3 +54,14 @@
52
54
  margin-inline: auto;
53
55
  padding-inline: var(--so-container-padding);
54
56
  }
57
+
58
+
59
+ a{
60
+ color: var(--so-link-color);
61
+ text-decoration: underline;
62
+ }
63
+
64
+ a:hover,
65
+ a:focus-visible{
66
+ color: var(--so-link-hover-color);
67
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "so-web-components",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/edigonzales/so-web-components.git"