teaser hero fix

package.json

@@ -16,31 +16,30 @@
     "license": "ISC",
     "devDependencies": {
         "@11ty/eleventy": "^3.0.0",
-        "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
+        "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "@sbb-esta/lyne-design-tokens": "^1.3.0",
         "eleventy-plugin-compress": "^1.0.5",
-        "esbuild": "^0.19.11",
+        "esbuild": "^0.24.2",
         "gzipper": "^7.2.0",
         "html-minifier": "^4.0.0",
-        "stylelint": "^16.9.0",
+        "stylelint": "^16.12.0",
         "stylelint-config-prettier-scss": "^1.0.0",
         "stylelint-config-standard": "^36.0.1",
-        "stylelint-config-standard-scss": "^13.1.0",
+        "stylelint-config-standard-scss": "^14.0.0",
         "stylelint-use-logical-spec": "^5.0.1"
     },
     "dependencies": {
-        "@11ty/eleventy-fetch": "^4.0.0",
-        "@kevingimbel/eleventy-plugin-mermaid": "^2.1.0",
+        "@11ty/eleventy-fetch": "^5.0.1",
         "@lit-labs/eleventy-plugin-lit": "^1.0.3",
-        "@sbb-esta/lyne-elements": "2.0.1",
-        "@sbb-esta/lyne-elements-experimental": "2.0.1",
+        "@sbb-esta/lyne-elements": "2.0.3",
+        "@sbb-esta/lyne-elements-experimental": "2.0.3",
         "@webcomponents/template-shadowroot": "^0.2.1",
         "copyfiles": "^2.4.1",
         "eleventy-plugin-i18n": "^0.1.3",
         "list.js": "^2.3.1",
         "lodash": "^4.17.21",
-        "markdown-it-attrs": "^4.1.6",
-        "sass": "^1.77.8",
+        "markdown-it-attrs": "^4.3.0",
+        "sass": "^1.83.0",
         "ux-components": "https://github.com/mcilurzo/ux-components/tarball/main"
     }
 }

src/_data/lyne/components/sbbTeaserHero/config.json

@@ -1,5 +1,5 @@
 {
-    "tag":"sbb-teasser-hero",
+    "tag":"sbb-teaser-hero",
     "patternId":"sbbTeaserHero",
     "patternDirectory":"teaser",
     "order": 1050,

src/_data/lyne/components/sbbTeaserHero/playground.json

@@ -1,13 +1,13 @@
 {
     "tag":"sbb-teaser-hero",
-    "content":"<div style='width:100%;'><sbb-teaser-hero class='demo-item' href='#'>Break out and explore castles and palaces.<span slot='link-content'>Find out more</span><figure slot='image' class='sbb-figure'><sbb-image id='image' image-src='https://cdn.img.sbb.ch/content/dam/internet/lyne/Hoehenrundweg-Gryden-Lenk.jpg' alt='Höhenrundweg Gryden Lenk'></sbb-image><sbb-chip-label class='sbb-figure-overlap-start-start chip' style='z-index: 1'>Chip label</sbb-chip-label></figure></sbb-teaser-hero></div>",
+    "content":"<div style='width:100%;'><sbb-teaser-hero class='demo-item' href='#'>Break out and explore castles and palaces.<span class='link-label' slot='link-content'>Kurzer Link</span><figure slot='image' class='sbb-figure'><sbb-image id='image' image-src='https://cdn.img.sbb.ch/content/dam/internet/lyne/Hoehenrundweg-Gryden-Lenk.jpg' alt='Höhenrundweg Gryden Lenk'></sbb-image><sbb-chip-label class='sbb-figure-overlap-start-start chip-label' style='z-index: 1'>Chip label</sbb-chip-label></figure></sbb-teaser-hero></div>",
     "configuration" : [
         {
             "attribute":"link-content",
             "label":"link-content",
-            "target":"demo-item",
+            "target":"link-label",
             "default":"Kurzer Link",
-            "mode":"property",
+            "mode":"value",
             "options" : [{
                 "value":"Kurzer Link",
                 "label":"short"
@@ -18,20 +18,33 @@
             }]
         },
         {
-            "attribute":"chip",
+            "attribute":"class",
             "label":"chip",
-            "target":"chip",
-            "default":"chip",
-            "mode":"slot",
+            "target":"chip-label",
+            "default":"sbb-figure-overlap-start-start chip-label",
+            "mode":"property",
             "options" : [{
-                "value":"chip",
-                "label":"true"
+                "value":"sbb-figure-overlap-start-start chip-label",
+                "label":"top-left"
+            },
+            {
+                "value":"sbb-figure-overlap-start-end chip-label",
+                "label":"top-right"
+            },
+            {
+                "value":"sbb-figure-overlap-end-start chip-label",
+                "label":"bottom-left"
+            },
+            {
+                "value":"sbb-figure-overlap-end-end chip-label",
+                "label":"bottom-right"
             },
             {
-                "value":"test",
+                "value":"chip-label hidden",
                 "label":"false"
             }
             ]
         }
     ]
-}
+}
+

src/_data/lyne/version.js

@@ -1,6 +1,6 @@
 module.exports = {
   url: 'https://raw.githubusercontent.com/sbb-design-systems/lyne-components/',
-  branch: "v2.0.0",
+  branch: "v2.0.3",
   master: "master",
   path: "/src/elements/",
   dok: '/readme.md'

src/_data/translations.js

@@ -247,7 +247,11 @@ module.exports = {
       "showhtml": "Show HTML",
       "chip": "Chip",
       "footnote": "Footnote",
-      "image-alignment": "Image alignment"
+      "image-alignment": "Image alignment",
+      "top-left": "top, left",
+      "top-right": "top, right",
+      "bottom-left": "bottom, left",
+      "bottom-right": "bottom, right",
     }
   },
   de: {
@@ -480,7 +484,11 @@ module.exports = {
       "showhtml": "HTML einblenden",
       "chip": "Chip",
       "footnote": "Footnote",
-      "image-alignment": "Bild-Anordnung"
+      "image-alignment": "Bild-Anordnung",
+      "top-left": "oben, links",
+      "top-right": "oben, rechts",
+      "bottom-left": "unten, links",
+      "bottom-right": "unten, rechts",
     }
   },
   fr: {