diff --git a/package-lock.json b/package-lock.json index 8ce16820a..829ff093a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,8 +12,8 @@ "@11ty/eleventy-fetch": "^4.0.0", "@kevingimbel/eleventy-plugin-mermaid": "^2.1.0", "@lit-labs/eleventy-plugin-lit": "^1.0.3", - "@sbb-esta/lyne-elements": "1.6.0", - "@sbb-esta/lyne-elements-experimental": "1.6.0", + "@sbb-esta/lyne-elements": "1.7.0", + "@sbb-esta/lyne-elements-experimental": "1.7.0", "@webcomponents/template-shadowroot": "^0.2.1", "copyfiles": "^2.4.1", "eleventy-plugin-i18n": "^0.1.3", @@ -54,6 +54,15 @@ "normalize-path": "^3.0.0" } }, + "node_modules/@11ty/dependency-tree-esm/node_modules/dependency-graph": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", + "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", + "dev": true, + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/@11ty/eleventy": { "version": "3.0.0-beta.1", "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.0.0-beta.1.tgz", @@ -171,6 +180,15 @@ "url": "https://opencollective.com/11ty" } }, + "node_modules/@11ty/eleventy-navigation/node_modules/dependency-graph": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", + "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", + "dev": true, + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/@11ty/eleventy-plugin-bundle": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-2.0.2.tgz", @@ -217,33 +235,6 @@ "url": "https://opencollective.com/11ty" } }, - "node_modules/@11ty/eleventy/node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true - }, - "node_modules/@11ty/eleventy/node_modules/dependency-graph": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz", - "integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@11ty/eleventy/node_modules/js-yaml": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", - "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, - "dependencies": { - "argparse": "^2.0.1" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, "node_modules/@11ty/lodash-custom": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz", @@ -290,80 +281,6 @@ "slash": "^1.0.0" } }, - "node_modules/@11ty/recursive-copy/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", - "dev": true, - "dependencies": { - "balanced-match": "^1.0.0" - } - }, - "node_modules/@11ty/recursive-copy/node_modules/glob": { - "version": "10.4.5", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", - "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", - "dev": true, - "dependencies": { - "foreground-child": "^3.1.0", - "jackspeak": "^3.1.2", - "minimatch": "^9.0.4", - "minipass": "^7.1.2", - "package-json-from-dist": "^1.0.0", - "path-scurry": "^1.11.1" - }, - "bin": { - "glob": "dist/esm/bin.mjs" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/@11ty/recursive-copy/node_modules/minimatch": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", - "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", - "dev": true, - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/@11ty/recursive-copy/node_modules/mkdirp": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz", - "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==", - "dev": true, - "bin": { - "mkdirp": "dist/cjs/src/bin.js" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/@11ty/recursive-copy/node_modules/rimraf": { - "version": "5.0.10", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz", - "integrity": "sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==", - "dev": true, - "dependencies": { - "glob": "^10.3.7" - }, - "bin": { - "rimraf": "dist/esm/bin.mjs" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/@esbuild/aix-ppc64": { "version": "0.19.12", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz", @@ -892,9 +809,9 @@ } }, "node_modules/@lit-labs/ssr-dom-shim": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz", - "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz", + "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==" }, "node_modules/@lit-labs/ssr/node_modules/node-fetch": { "version": "3.3.2", @@ -986,22 +903,22 @@ "dev": true }, "node_modules/@sbb-esta/lyne-elements": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@sbb-esta/lyne-elements/-/lyne-elements-1.6.0.tgz", - "integrity": "sha512-ofOple9rC3KXcW3QdclrGTDXeAN44oeZ4TplSa/YN5Tz/RTjq7FTkM9siLSsE8RX3Qdg+KA4/CPWzSIdVWXjuQ==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@sbb-esta/lyne-elements/-/lyne-elements-1.7.0.tgz", + "integrity": "sha512-etrjkO2qBF8tiWgt4C/HF4yDPZGe+bMMePy2SKm9nCaVM5TDNtM7I3MKVnIwva2PRjMx0Nv2f8GU/27jtsmqZQ==", "dependencies": { "lit": "^3.0.0" } }, "node_modules/@sbb-esta/lyne-elements-experimental": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@sbb-esta/lyne-elements-experimental/-/lyne-elements-experimental-1.6.0.tgz", - "integrity": "sha512-itjo1I9hh66IT/h/Ofo1OltrOg1u6b8SZzP+hHoQOlLhS0vf0+TVvVxHwIF7M/FhUYZGNgf7dbR+xw9caTJxww==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@sbb-esta/lyne-elements-experimental/-/lyne-elements-experimental-1.7.0.tgz", + "integrity": "sha512-4X/VQM3srlHRCzSpfUBfv+mXKf7fIZMTVzwCs27ag6pHKJemn6hPEnCFbFr74cf0ujepfIAJe9yUx42lQ+4X7A==", "dependencies": { "lit": "^3.0.0" }, "peerDependencies": { - "@sbb-esta/lyne-elements": "1.6.0" + "@sbb-esta/lyne-elements": "1.7.0" } }, "node_modules/@sindresorhus/slugify": { @@ -1060,9 +977,9 @@ } }, "node_modules/@types/node": { - "version": "16.18.104", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.104.tgz", - "integrity": "sha512-OF3keVCbfPlkzxnnDBUZJn1RiCJzKeadjiW0xTEb0G1SUJ5gDVb3qnzZr2T4uIFvsbKJbXy1v2DN7e2zaEY7jQ==" + "version": "16.18.105", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.105.tgz", + "integrity": "sha512-w2d0Z9yMk07uH3+Cx0N8lqFyi3yjXZxlbYappPj+AsOlT02OyxyiuNoNHdGt6EuiSm8Wtgp2YV7vWg+GMFrvFA==" }, "node_modules/@types/trusted-types": { "version": "2.0.7", @@ -1139,13 +1056,9 @@ } }, "node_modules/argparse": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", - "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", - "dev": true, - "dependencies": { - "sprintf-js": "~1.0.2" - } + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, "node_modules/array-buffer-byte-length": { "version": "1.0.1", @@ -1473,6 +1386,17 @@ "copyup": "copyfiles" } }, + "node_modules/copyfiles/node_modules/mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "bin": { + "mkdirp": "bin/cmd.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/core-util-is": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", @@ -1626,12 +1550,12 @@ } }, "node_modules/dependency-graph": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", - "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz", + "integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==", "dev": true, "engines": { - "node": ">= 0.6.0" + "node": ">=4" } }, "node_modules/destroy": { @@ -2135,6 +2059,21 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/flat-cache/node_modules/rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "deprecated": "Rimraf versions prior to v4 are no longer supported", + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/flatted": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", @@ -2150,9 +2089,9 @@ } }, "node_modules/foreground-child": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz", - "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", + "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==", "dev": true, "dependencies": { "cross-spawn": "^7.0.0", @@ -2311,6 +2250,28 @@ "node": ">=6.0" } }, + "node_modules/gray-matter/node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dev": true, + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, + "node_modules/gray-matter/node_modules/js-yaml": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", + "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "dev": true, + "dependencies": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, "node_modules/gzipper": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/gzipper/-/gzipper-7.2.0.tgz", @@ -2888,13 +2849,12 @@ } }, "node_modules/js-yaml": { - "version": "3.14.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", - "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dev": true, "dependencies": { - "argparse": "^1.0.7", - "esprima": "^4.0.0" + "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" @@ -2962,9 +2922,9 @@ } }, "node_modules/liquidjs": { - "version": "10.16.1", - "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.16.1.tgz", - "integrity": "sha512-1JFL/Y7ONoajrfwav37yuz5yQHU3+Pgz1XWsg9E/2T8Fp65KalNfMF8QZ3+tNETqGUIB66waOSLOi64niYZE9A==", + "version": "10.16.2", + "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.16.2.tgz", + "integrity": "sha512-Lix6l2tO1nd4ua3RyTENOqzdzkIwRaX5fHiDX8DMOQz+VzT0/fXE0si526mqwSG18bh5YuUygpx26fbQeIt3+A==", "dev": true, "dependencies": { "commander": "^10.0.0" @@ -3008,29 +2968,29 @@ } }, "node_modules/lit": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.4.tgz", - "integrity": "sha512-q6qKnKXHy2g1kjBaNfcoLlgbI3+aSOZ9Q4tiGa9bGYXq5RBXxkVTqTIVmP2VWMp29L4GyvCFm8ZQ2o56eUAMyA==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.0.tgz", + "integrity": "sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw==", "dependencies": { "@lit/reactive-element": "^2.0.4", - "lit-element": "^4.0.4", - "lit-html": "^3.1.2" + "lit-element": "^4.1.0", + "lit-html": "^3.2.0" } }, "node_modules/lit-element": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.6.tgz", - "integrity": "sha512-U4sdJ3CSQip7sLGZ/uJskO5hGiqtlpxndsLr6mt3IQIjheg93UKYeGQjWMRql1s/cXNOaRrCzC2FQwjIwSUqkg==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.1.0.tgz", + "integrity": "sha512-gSejRUQJuMQjV2Z59KAS/D4iElUhwKpIyJvZ9w+DIagIQjfJnhR20h2Q5ddpzXGS+fF0tMZ/xEYGMnKmaI/iww==", "dependencies": { "@lit-labs/ssr-dom-shim": "^1.2.0", "@lit/reactive-element": "^2.0.4", - "lit-html": "^3.1.2" + "lit-html": "^3.2.0" } }, "node_modules/lit-html": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.4.tgz", - "integrity": "sha512-yKKO2uVv7zYFHlWMfZmqc+4hkmSbFp8jgjdZY9vvR9jr4J8fH6FUMXhr+ljfELgmjpvlF7Z1SJ5n5/Jeqtc9YA==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.0.tgz", + "integrity": "sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==", "dependencies": { "@types/trusted-types": "^2.0.2" } @@ -3053,9 +3013,9 @@ "dev": true }, "node_modules/luxon": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz", - "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz", + "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==", "dev": true, "engines": { "node": ">=12" @@ -3078,9 +3038,9 @@ } }, "node_modules/markdown-it-attrs": { - "version": "4.1.6", - "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-4.1.6.tgz", - "integrity": "sha512-O7PDKZlN8RFMyDX13JnctQompwrrILuz2y43pW2GagcwpIIElkAdfeek+erHfxUOlXWPsjFeWmZ8ch1xtRLWpA==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-4.2.0.tgz", + "integrity": "sha512-m7svtUBythvcGFFZAv9VjMEvs8UbHri2sojJ3juJumoOzv8sdkx9a7W3KxiHbXxAbvL3Xauak8TMwCnvigVPKw==", "engines": { "node": ">=6" }, @@ -3088,11 +3048,6 @@ "markdown-it": ">= 9.0.0" } }, - "node_modules/markdown-it/node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" - }, "node_modules/maximatch": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz", @@ -3177,14 +3132,18 @@ } }, "node_modules/mkdirp": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", - "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz", + "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==", + "dev": true, "bin": { - "mkdirp": "bin/cmd.js" + "mkdirp": "dist/cjs/src/bin.js" }, "engines": { "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" } }, "node_modules/moo": { @@ -3854,15 +3813,59 @@ } }, "node_modules/rimraf": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", - "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", - "deprecated": "Rimraf versions prior to v4 are no longer supported", + "version": "5.0.10", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz", + "integrity": "sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==", + "dev": true, "dependencies": { - "glob": "^7.1.3" + "glob": "^10.3.7" }, "bin": { - "rimraf": "bin.js" + "rimraf": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/rimraf/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/rimraf/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/rimraf/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" }, "funding": { "url": "https://github.com/sponsors/isaacs" @@ -4395,9 +4398,9 @@ "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==" }, "node_modules/uglify-js": { - "version": "3.19.1", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.1.tgz", - "integrity": "sha512-y/2wiW+ceTYR2TSSptAhfnEtpLaQ4Ups5zrjB2d3kuVxHj16j/QJwPl5PvuGy9uARb39J0+iKxcRPvtpsx4A4A==", + "version": "3.19.2", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.2.tgz", + "integrity": "sha512-S8KA6DDI47nQXJSi2ctQ629YzwOVs+bQML6DAtvy0wgNdpi+0ySpQK0g2pxBq2xfF2z3YCscu7NNA8nXT9PlIQ==", "dev": true, "bin": { "uglifyjs": "bin/uglifyjs" diff --git a/package.json b/package.json index 78d2b8d9c..0e33ab12a 100644 --- a/package.json +++ b/package.json @@ -28,8 +28,8 @@ "@11ty/eleventy-fetch": "^4.0.0", "@kevingimbel/eleventy-plugin-mermaid": "^2.1.0", "@lit-labs/eleventy-plugin-lit": "^1.0.3", - "@sbb-esta/lyne-elements": "1.6.0", - "@sbb-esta/lyne-elements-experimental": "1.6.0", + "@sbb-esta/lyne-elements": "1.7.0", + "@sbb-esta/lyne-elements-experimental": "1.7.0", "@webcomponents/template-shadowroot": "^0.2.1", "copyfiles": "^2.4.1", "eleventy-plugin-i18n": "^0.1.3", diff --git a/src/_data/lyne/lyneversion.js b/src/_data/lyne/lyneversion.js index 0d6bc5b14..2254e1cb1 100644 --- a/src/_data/lyne/lyneversion.js +++ b/src/_data/lyne/lyneversion.js @@ -1,6 +1,6 @@ module.exports = { url: 'https://raw.githubusercontent.com/sbb-design-systems/lyne-components/', - branch: "v1.6.0", + branch: "v1.7.0", master: "master", path: "/src/elements/", dok: '/readme.md' diff --git a/src/_data/lyne/playgrounds/formfield.json b/src/_data/lyne/playgrounds/formfield.json index 76cca359f..0a76e8ebb 100644 --- a/src/_data/lyne/playgrounds/formfield.json +++ b/src/_data/lyne/playgrounds/formfield.json @@ -71,6 +71,10 @@ "default":"m", "mode":"property", "options" : [{ + "value":"s", + "label":"s" + }, + { "value":"m", "label":"m" }, diff --git a/src/_data/lyne/playgrounds/linklistanchor.json b/src/_data/lyne/playgrounds/linklistanchor.json new file mode 100644 index 000000000..0a97ca6b1 --- /dev/null +++ b/src/_data/lyne/playgrounds/linklistanchor.json @@ -0,0 +1,55 @@ +{ + "tag":"sbb-link-list-anchor", + "content":"Link 1Link 2Link 3", + "configuration" : [{ + "attribute":"title-content", + "label":"title-content", + "target":"demo-item", + "default":"Title", + "mode":"property", + "options" : [{ + "value":"Title", + "label":"true" + }, + { + "value":"", + "label":"false" + }] + }, + { + "attribute":"size", + "label":"size", + "target":"demo-item", + "default":"s", + "mode":"property", + "options" : [{ + "value":"xs", + "label":"xs" + }, + { + "value":"s", + "label":"s" + }, + { + "value":"m", + "label":"m" + }] + }, + { + "attribute":"negative", + "label":"negative", + "target":"demo-item", + "default":"false", + "mode":"boolean", + "options" : [{ + "value":"false", + "label":"false" + }, + { + "value":"true", + "label":"true" + }] + } + + ] +} \ No newline at end of file diff --git a/src/_data/lyne/playgrounds/minibuttongroup.json b/src/_data/lyne/playgrounds/minibuttongroup.json new file mode 100644 index 000000000..871009ada --- /dev/null +++ b/src/_data/lyne/playgrounds/minibuttongroup.json @@ -0,0 +1,46 @@ +{ + "tag":"sbb-mini-button-group", + "content":"", + "configuration" : [ + { + "attribute":"size", + "label":"size", + "target":"demo-item", + "default":"m", + "mode":"property", + "options" : [{ + "value":"s", + "label":"s" + }, + { + "value":"m", + "label":"m" + }, + { + "value":"l", + "label":"l" + }, + { + "value":"xl", + "label":"xl" + }] + }, + + { + "attribute":"negative", + "label":"negative", + "target":"demo-item", + "default":"false", + "mode":"boolean", + "options" : [{ + "value":"false", + "label":"false" + }, + { + "value":"true", + "label":"true" + }] + } + + ] +} \ No newline at end of file diff --git a/src/_data/lyne/playgrounds/teaserhero.json b/src/_data/lyne/playgrounds/teaserhero.json index 1bbd0cc92..5a6756d7d 100644 --- a/src/_data/lyne/playgrounds/teaserhero.json +++ b/src/_data/lyne/playgrounds/teaserhero.json @@ -1,6 +1,6 @@ { "tag":"sbb-teaser-hero", - "content":"Break out and explore castles and palaces.", + "content":"Break out and explore castles and palaces.Label", "configuration" : [ { "attribute":"link-content", @@ -16,6 +16,22 @@ "value":"Ein viel zu langer Linktext wird umbrochen.", "label":"long" }] + }, + { + "attribute":"chip", + "label":"chip", + "target":"chip", + "default":"chip", + "mode":"slot", + "options" : [{ + "value":"chip", + "label":"true" + }, + { + "value":"test", + "label":"false" + } + ] } ] } \ No newline at end of file diff --git a/src/_data/lyne/playgrounds/teaserproduct.json b/src/_data/lyne/playgrounds/teaserproduct.json new file mode 100644 index 000000000..216ea2796 --- /dev/null +++ b/src/_data/lyne/playgrounds/teaserproduct.json @@ -0,0 +1,52 @@ +{ + "tag":"sbb-teaser-hero", + "content":"Benefit from up to 70% discount

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium felis sit amet felis viverra lacinia. Donec et enim mi. Aliquam erat volutpat. Proin ut odio tellus. Donec tempor mi vel dapibus lobortis. Sed at ex sit amet leo suscipit fermentum. Donec consequat hendrerit tortor, ut laoreet velit congue in.

Label

Footnote Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium felis sitamet felis viverra lacinia. Donec et enim mi. Aliquam erat volutpat. Proin ut odio tellus. Donectempor mi vel dapibus lobortis.

", + "configuration" : [ + { + "attribute":"image-alignment", + "label":"image-alignment", + "target":"demo-item", + "default":"after", + "mode":"property", + "options" : [{ + "value":"after", + "label":"after" + }, + { + "value":"before", + "label":"before" + }] + }, + { + "attribute":"negative", + "label":"negative", + "target":"demo-item", + "default":"false", + "mode":"boolean", + "options" : [{ + "value":"false", + "label":"false" + }, + { + "value":"true", + "label":"true" + }] + }, + { + "attribute":"footnote", + "label":"footnote", + "target":"footnote", + "default":"footnote", + "mode":"slot", + "options" : [{ + "value":"footnote", + "label":"true" + }, + { + "value":"test", + "label":"false" + } + ] + } + ] +} \ No newline at end of file diff --git a/src/_data/lyne/playgrounds/teaserproductstatic.json b/src/_data/lyne/playgrounds/teaserproductstatic.json new file mode 100644 index 000000000..84982b214 --- /dev/null +++ b/src/_data/lyne/playgrounds/teaserproductstatic.json @@ -0,0 +1,52 @@ +{ + "tag":"sbb-teaser-hero", + "content":"Benefit from up to 70% discount

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium felis sit amet felis viverra lacinia. Donec et enim mi. Aliquam erat volutpat. Proin ut odio tellus. Donec tempor mi vel dapibus lobortis. Sed at ex sit amet leo suscipit fermentum. Donec consequat hendrerit tortor, ut laoreet velit congue in.

LabelLabel

Footnote Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium felis sitamet felis viverra lacinia. Donec et enim mi. Aliquam erat volutpat. Proin ut odio tellus. Donectempor mi vel dapibus lobortis.

", + "configuration" : [ + { + "attribute":"image-alignment", + "label":"image-alignment", + "target":"demo-item", + "default":"after", + "mode":"property", + "options" : [{ + "value":"after", + "label":"after" + }, + { + "value":"before", + "label":"before" + }] + }, + { + "attribute":"negative", + "label":"negative", + "target":"demo-item", + "default":"false", + "mode":"boolean", + "options" : [{ + "value":"false", + "label":"false" + }, + { + "value":"true", + "label":"true" + }] + }, + { + "attribute":"footnote", + "label":"footnote", + "target":"footnote", + "default":"footnote", + "mode":"slot", + "options" : [{ + "value":"footnote", + "label":"true" + }, + { + "value":"test", + "label":"false" + } + ] + } + ] +} \ No newline at end of file diff --git a/src/_data/lyne/readmes/teaserpaid/teaserpaid.js b/src/_data/lyne/readmes/button/minibuttongroup.js similarity index 74% rename from src/_data/lyne/readmes/teaserpaid/teaserpaid.js rename to src/_data/lyne/readmes/button/minibuttongroup.js index 5ba292b2d..5be5885b3 100644 --- a/src/_data/lyne/readmes/teaserpaid/teaserpaid.js +++ b/src/_data/lyne/readmes/button/minibuttongroup.js @@ -2,7 +2,7 @@ const EleventyFetch = require("@11ty/eleventy-fetch"); var lyneversion = require('../../lyneversion'); -let url = lyneversion.url+lyneversion.branch+"/src/elements-experimental/"+"teaser-paid"+lyneversion.dok; +let url = lyneversion.url+lyneversion.branch+lyneversion.path+"button/mini-button-group"+lyneversion.dok; const md = async function() { return EleventyFetch(url, { diff --git a/src/_data/lyne/readmes/linklist/linklist.js b/src/_data/lyne/readmes/linklist/linklist.js index ea3ab93e6..6e7076ba2 100644 --- a/src/_data/lyne/readmes/linklist/linklist.js +++ b/src/_data/lyne/readmes/linklist/linklist.js @@ -2,7 +2,7 @@ const EleventyFetch = require("@11ty/eleventy-fetch"); var lyneversion = require('../../lyneversion'); -let url = lyneversion.url+lyneversion.branch+lyneversion.path+"link-list"+lyneversion.dok; +let url = lyneversion.url+lyneversion.branch+lyneversion.path+"link-list/link-list"+lyneversion.dok; const md = async function() { return EleventyFetch(url, { diff --git a/src/_data/lyne/readmes/linklist/linklistanchor.js b/src/_data/lyne/readmes/linklist/linklistanchor.js new file mode 100644 index 000000000..12796ec57 --- /dev/null +++ b/src/_data/lyne/readmes/linklist/linklistanchor.js @@ -0,0 +1,17 @@ +const EleventyFetch = require("@11ty/eleventy-fetch"); + +var lyneversion = require('../../lyneversion'); + +let url = lyneversion.url+lyneversion.branch+lyneversion.path+"link-list/link-list-anchor"+lyneversion.dok; + +const md = async function() { + return EleventyFetch(url, { + duration: "1s", + type: "text" + }); +} + +module.exports = async function() { + let result = await md(); + return result; + }; diff --git a/src/_data/lyne/readmes/teaserhero/teaserhero.js b/src/_data/lyne/readmes/teaserhero/teaserhero.js index c73eeb5ad..869a63ce7 100644 --- a/src/_data/lyne/readmes/teaserhero/teaserhero.js +++ b/src/_data/lyne/readmes/teaserhero/teaserhero.js @@ -2,7 +2,7 @@ const EleventyFetch = require("@11ty/eleventy-fetch"); var lyneversion = require('../../lyneversion'); -let url = lyneversion.url+lyneversion.branch+"/src/elements-experimental/"+"teaser-hero"+lyneversion.dok; +let url = lyneversion.url+lyneversion.branch+lyneversion.path+"teaser-hero"+lyneversion.dok; const md = async function() { return EleventyFetch(url, { diff --git a/src/_data/lyne/readmes/teaserproduct/teaserproduct.js b/src/_data/lyne/readmes/teaserproduct/teaserproduct.js new file mode 100644 index 000000000..c885fca39 --- /dev/null +++ b/src/_data/lyne/readmes/teaserproduct/teaserproduct.js @@ -0,0 +1,17 @@ +const EleventyFetch = require("@11ty/eleventy-fetch"); + +var lyneversion = require('../../lyneversion'); + +let url = lyneversion.url+lyneversion.branch+lyneversion.path+"teaser-product/teaser-product"+lyneversion.dok; + +const md = async function() { + return EleventyFetch(url, { + duration: "1s", + type: "text" + }); +} + +module.exports = async function() { + let result = await md(); + return result; + }; diff --git a/src/_data/lyne/readmes/teaserproduct/teaserproductstatic.js b/src/_data/lyne/readmes/teaserproduct/teaserproductstatic.js new file mode 100644 index 000000000..3037347f5 --- /dev/null +++ b/src/_data/lyne/readmes/teaserproduct/teaserproductstatic.js @@ -0,0 +1,17 @@ +const EleventyFetch = require("@11ty/eleventy-fetch"); + +var lyneversion = require('../../lyneversion'); + +let url = lyneversion.url+lyneversion.branch+lyneversion.path+"teaser-product/teaser-product-static"+lyneversion.dok; + +const md = async function() { + return EleventyFetch(url, { + duration: "1s", + type: "text" + }); +} + +module.exports = async function() { + let result = await md(); + return result; + }; diff --git a/src/_data/translations.js b/src/_data/translations.js index 7e14010c5..2ad7f1652 100644 --- a/src/_data/translations.js +++ b/src/_data/translations.js @@ -59,13 +59,13 @@ module.exports = { "description": "Description", "keywords": "Keywords", "state": "Status", - "contact": "Contact", + "contact": "Contact" }, lyne: { "action": "Action", "active": "Active", "align-group": "Align group", - "alignment": "Anordnung", + "alignment": "Alignment", "after": "After", "after-centered": "After, centred", "below": "Below", @@ -243,6 +243,9 @@ module.exports = { "storybooklink": "Try it out on Storybook", "copyhtml": "Copy HTML to clipboard.", "showhtml": "Show HTML", + "chip": "Chip", + "footnote": "Footnote", + "image-alignment": "Image alignment" } }, de: { @@ -287,7 +290,7 @@ module.exports = { "description": "Beschreibung", "keywords": "Keywords", "state": "Status", - "contact": "Kontakt", + "contact": "Kontakt" }, lyne: { "action": "Aktion", @@ -470,7 +473,10 @@ module.exports = { "in-progress": "In-Progress", "storybooklink": "Auf Storybook ausprobieren", "copyhtml": "HTML in Zwischenablage kopiert.", - "showhtml": "HTML einblenden" + "showhtml": "HTML einblenden", + "chip": "Chip", + "footnote": "Footnote", + "image-alignment": "Bild-Anordnung" } }, fr: { @@ -515,7 +521,7 @@ module.exports = { "description": "Description", "keywords": "Mots clés", "state": "Statut", - "contact": "Contact", + "contact": "Contact" }, }, it: { @@ -560,7 +566,7 @@ module.exports = { "description": "Descrizione", "keywords": "Parole chiave", "state": "Stato", - "contact": "Contatto", + "contact": "Contatto" }, }, icons: { diff --git a/src/assets/css/_component-browser.scss b/src/assets/css/_component-browser.scss index 3e945d1ca..c3d77e201 100644 --- a/src/assets/css/_component-browser.scss +++ b/src/assets/css/_component-browser.scss @@ -167,6 +167,11 @@ } .component-list { + box-sizing: border-box; + width: 100%; + overflow: scroll; + @include sbb.scrollbar; + &.horizontal { display: flex; flex-direction: row; @@ -195,7 +200,6 @@ } } } - &.vertical { sbb-title { &:first-child { @@ -206,23 +210,16 @@ sbb-teaser { width: 100%; margin-bottom: var(--sbb-spacing-fixed-4x); - +/* img { max-width: var(--sbb-spacing-fixed-30x); } + */ } } - - box-sizing: border-box; - width: 100%; - overflow: scroll; - @include sbb.scrollbar; - - &.component { padding: var(--sbb-spacing-responsive-s); } - &.overview { padding: var(--sbb-spacing-responsive-m); @@ -244,8 +241,9 @@ &.tree { padding: 0 var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-m); } + } - + } .button-header { diff --git a/src/assets/css/_content.scss b/src/assets/css/_content.scss index 3e4be36bf..5156d2d84 100644 --- a/src/assets/css/_content.scss +++ b/src/assets/css/_content.scss @@ -83,12 +83,13 @@ h2.with-icon { sbb-icon { padding: 0 8px 0 0; margin-top: -3px; + stroke: var(--sbb-color-black); + stroke-width: 1.5; @include sbb.mq($from: medium) { margin-top: 2px; padding: 0px 12px 0px 0; } - stroke: var(--sbb-color-black); - stroke-width: 1.5; + } } @@ -99,12 +100,13 @@ h3.with-icon { sbb-icon { padding: 0 12px 0 0; margin-top: -5px; + stroke: var(--sbb-color-black); + stroke-width: 1.5; @include sbb.mq($from: medium) { padding: 0 12px 0 0; margin-top: -3px; } - stroke: var(--sbb-color-black); - stroke-width: 1.5; + } } @@ -256,11 +258,11 @@ sbb-table-wrapper + sbb-table-wrapper { padding: var(--sbb-spacing-fixed-8x) var(--sbb-spacing-fixed-8x); background-color: var(--sbb-color-white); border: solid 1px var(--sbb-color-cloud); + min-height: var(--sbb-spacing-fixed-24x); @include sbb.mq($from: medium) { padding: var(--sbb-spacing-fixed-8x); } - min-height: var(--sbb-spacing-fixed-24x); - + &[data-background="white"] { background-color: var(--sbb-color-white); } @@ -280,7 +282,6 @@ sbb-table-wrapper + sbb-table-wrapper { &[data-background="black"] { background-color: var(--sbb-color-black); } - sbb-clock { width: 50%; } diff --git a/src/assets/css/_footer.scss b/src/assets/css/_footer.scss index 1a420315e..7d4863235 100644 --- a/src/assets/css/_footer.scss +++ b/src/assets/css/_footer.scss @@ -30,13 +30,12 @@ sbb-footer { } .clock { + grid-column: 1 / 1; + order: 1; sbb-clock { max-width: 100px; margin-bottom: var(--sbb-spacing-responsive-xl); } - - grid-column: 1 / 1; - order: 1; } .footer-divider { diff --git a/src/assets/css/_onetrust.scss b/src/assets/css/_onetrust.scss index 518d1ee0c..a5099ebab 100644 --- a/src/assets/css/_onetrust.scss +++ b/src/assets/css/_onetrust.scss @@ -127,7 +127,7 @@ white-space: nowrap; text-overflow: ellipsis; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - + margin: 0; &:hover, &:focus { background-color: var(--sbb-color-red125); @@ -135,8 +135,6 @@ opacity: 1; outline: none; } - - margin: 0; } #onetrust-pc-btn-handler.cookie-setting-link { @@ -155,7 +153,7 @@ white-space: nowrap; text-overflow: ellipsis; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - + margin: 0 !important; &:hover, &:focus { background-color: var(--sbb-color-red125); @@ -163,8 +161,6 @@ opacity: 1; outline: none; } - - margin: 0 !important; } } } @@ -173,11 +169,10 @@ } #onetrust-pc-sdk { + padding-bottom: 96px !important; @include sbb.mq($from: medium) { border-radius: 24px !important; } - padding-bottom: 96px !important; - .ot-pc-header, #ot-pc-content, .ot-pc-header { @@ -245,7 +240,6 @@ } } } - #ot-pc-content { width: 100%; padding: 20px 0 0 0; @@ -329,7 +323,7 @@ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: var(--sbb-color-cement); color: var(--sbb-color-black); - + margin-bottom: 0; &:hover, &:focus { background-color: var(--sbb-color-cement); @@ -337,8 +331,6 @@ opacity: 1; outline: none; } - - margin-bottom: 0; } .ot-cat-item { @@ -559,7 +551,6 @@ } } } - #ot-pc-lst { position: absolute; top: 96px; @@ -620,7 +611,6 @@ } } } - .ot-pc-footer { @include sbb.shadow-level-5-hard; @@ -645,15 +635,6 @@ white-space: nowrap; text-overflow: ellipsis; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - - &:hover, - &:focus { - background-color: var(--sbb-color-red125); - color: var(--sbb-color-white); - opacity: 1; - outline: none; - } - padding: 10px 20px; text-align: center; min-width: inherit; @@ -662,6 +643,13 @@ font-weight: normal; font-size: 15px; float: left; + &:hover, + &:focus { + background-color: var(--sbb-color-red125); + color: var(--sbb-color-white); + opacity: 1; + outline: none; + } } .ot-btn-subcntr { @@ -694,7 +682,6 @@ margin: 0 !important; background-color: transparent !important; width: auto !important; - &:hover { background-color: transparent !important; } diff --git a/src/assets/css/_teasers.scss b/src/assets/css/_teasers.scss index 0087d6c58..d2d021106 100644 --- a/src/assets/css/_teasers.scss +++ b/src/assets/css/_teasers.scss @@ -7,11 +7,10 @@ margin-top: var(--sbb-spacing-responsive-xxl); sbb-teaser { + margin-bottom: var(--sbb-spacing-responsive-xs); a img { border-radius: var(--sbb-border-radius-4x); - } - - margin-bottom: var(--sbb-spacing-responsive-xs); + } } @include sbb.mq($from: small) { diff --git a/src/assets/images/lyne/anatomy/anatomy_link_list_anchor.webp b/src/assets/images/lyne/anatomy/anatomy_link_list_anchor.webp new file mode 100644 index 000000000..b12ea55d9 Binary files /dev/null and b/src/assets/images/lyne/anatomy/anatomy_link_list_anchor.webp differ diff --git a/src/assets/images/lyne/anatomy/anatomy_link_list_anchor@2x.webp b/src/assets/images/lyne/anatomy/anatomy_link_list_anchor@2x.webp new file mode 100644 index 000000000..cac303faa Binary files /dev/null and b/src/assets/images/lyne/anatomy/anatomy_link_list_anchor@2x.webp differ diff --git a/src/assets/images/lyne/anatomy/anatomy_link_list_anchor@3x.webp b/src/assets/images/lyne/anatomy/anatomy_link_list_anchor@3x.webp new file mode 100644 index 000000000..c03ce8cdb Binary files /dev/null and b/src/assets/images/lyne/anatomy/anatomy_link_list_anchor@3x.webp differ diff --git a/src/assets/images/lyne/anatomy/anatomy_mini_button_group.webp b/src/assets/images/lyne/anatomy/anatomy_mini_button_group.webp new file mode 100644 index 000000000..d2113127f Binary files /dev/null and b/src/assets/images/lyne/anatomy/anatomy_mini_button_group.webp differ diff --git a/src/assets/images/lyne/anatomy/anatomy_mini_button_group@2x.webp b/src/assets/images/lyne/anatomy/anatomy_mini_button_group@2x.webp new file mode 100644 index 000000000..b67c52adc Binary files /dev/null and b/src/assets/images/lyne/anatomy/anatomy_mini_button_group@2x.webp differ diff --git a/src/assets/images/lyne/anatomy/anatomy_mini_button_group@3x.webp b/src/assets/images/lyne/anatomy/anatomy_mini_button_group@3x.webp new file mode 100644 index 000000000..5c4b4d584 Binary files /dev/null and b/src/assets/images/lyne/anatomy/anatomy_mini_button_group@3x.webp differ diff --git a/src/assets/images/lyne/anatomy/anatomy_teaser_product.webp b/src/assets/images/lyne/anatomy/anatomy_teaser_product.webp index ad9f5896f..f468b2b26 100644 Binary files a/src/assets/images/lyne/anatomy/anatomy_teaser_product.webp and b/src/assets/images/lyne/anatomy/anatomy_teaser_product.webp differ diff --git a/src/assets/images/lyne/anatomy/anatomy_teaser_product@2x.webp b/src/assets/images/lyne/anatomy/anatomy_teaser_product@2x.webp index 905dfd9ae..82484d83d 100644 Binary files a/src/assets/images/lyne/anatomy/anatomy_teaser_product@2x.webp and b/src/assets/images/lyne/anatomy/anatomy_teaser_product@2x.webp differ diff --git a/src/assets/images/lyne/anatomy/anatomy_teaser_product@3x.webp b/src/assets/images/lyne/anatomy/anatomy_teaser_product@3x.webp index 05e590248..ff892c45f 100644 Binary files a/src/assets/images/lyne/anatomy/anatomy_teaser_product@3x.webp and b/src/assets/images/lyne/anatomy/anatomy_teaser_product@3x.webp differ diff --git a/src/assets/images/lyne/anatomy/anatomy_teaser_product_static.webp b/src/assets/images/lyne/anatomy/anatomy_teaser_product_static.webp new file mode 100644 index 000000000..d2f732e2f Binary files /dev/null and b/src/assets/images/lyne/anatomy/anatomy_teaser_product_static.webp differ diff --git a/src/assets/images/lyne/anatomy/anatomy_teaser_product_static@2x.webp b/src/assets/images/lyne/anatomy/anatomy_teaser_product_static@2x.webp new file mode 100644 index 000000000..126b88f70 Binary files /dev/null and b/src/assets/images/lyne/anatomy/anatomy_teaser_product_static@2x.webp differ diff --git a/src/assets/images/lyne/anatomy/anatomy_teaser_product_static@3x.webp b/src/assets/images/lyne/anatomy/anatomy_teaser_product_static@3x.webp new file mode 100644 index 000000000..9a7fe2129 Binary files /dev/null and b/src/assets/images/lyne/anatomy/anatomy_teaser_product_static@3x.webp differ diff --git a/src/de/design-system/lyne/components/button/mini-button-group/anatomy.md b/src/de/design-system/lyne/components/button/mini-button-group/anatomy.md new file mode 100644 index 000000000..5ba7f9b93 --- /dev/null +++ b/src/de/design-system/lyne/components/button/mini-button-group/anatomy.md @@ -0,0 +1,27 @@ +--- +tags: mini-button-group-lyne_de +title: Anatomie +key: mini-button-group-lyne-anatomy_de +parent: mini-button-group-lyne_de +icon: specification +order: 2 +permalink: false +--- + +{{ imageOnGreyBackground({ + url: '/assets/images/lyne/anatomy/anatomy_mini_button_group', + alt: 'Anatomie der Komponente', + title: 'Anatomie der Komponente' +}) }} + + + +|Nummer|Typ|Beschreibung|Optional|Hinweis| +|------|---|------------|--------|-------| +|1|Komponente|`sbb-mini-button`|Nein|| +|2|Komponente|`sbb-divider`|Ja|| + + +{.sbb-table} + + \ No newline at end of file diff --git a/src/de/design-system/lyne/components/button/mini-button-group/examples.njk b/src/de/design-system/lyne/components/button/mini-button-group/examples.njk new file mode 100644 index 000000000..9418d2cbc --- /dev/null +++ b/src/de/design-system/lyne/components/button/mini-button-group/examples.njk @@ -0,0 +1,21 @@ +--- +tags: mini-button-group-lyne_de +title: Demo +key: mini-button-group-lyne-examples_de +parent: mini-button-group-lyne_de +icon: demo +order: 3 +permalink: false +--- + +{{ lynePlayground({ + json: lyne.playgrounds.minibuttongroup, + translations: translations["de"].lyne +}) }} + + +{{ lyneExamples({ + tag: "sbb-mini-button-group", + stories: lyne.stories[0], + translations: translations["de"].lyne +}) }} \ No newline at end of file diff --git a/src/de/design-system/lyne/components/button/mini-button-group/implementation.md b/src/de/design-system/lyne/components/button/mini-button-group/implementation.md new file mode 100644 index 000000000..c1d93a50e --- /dev/null +++ b/src/de/design-system/lyne/components/button/mini-button-group/implementation.md @@ -0,0 +1,12 @@ +--- +tags: mini-button-group-lyne_de +title: Implementation +key: mini-button-group-lyne-implementation_de +parent: mini-button-group-lyne_de +icon: implementation +order: 4 +permalink: false +--- +{{ lyne.readmes.button.minibuttongroup | absolutelinks | safe }} + + diff --git a/src/de/design-system/lyne/components/button/mini-button-group/index.md b/src/de/design-system/lyne/components/button/mini-button-group/index.md new file mode 100644 index 000000000..d5aba8916 --- /dev/null +++ b/src/de/design-system/lyne/components/button/mini-button-group/index.md @@ -0,0 +1,14 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_de + - lyne_components_de + - lyne_components_mini_button_de + - lyne_components_button_siblings_de + - page +key: mini-button-group-lyne_de +title: Mini-Button-Group +parent: button-folder-lyne_de +keywords: button, icon, split, action +order: 140 +--- diff --git a/src/de/design-system/lyne/components/button/mini-button-group/overview.md b/src/de/design-system/lyne/components/button/mini-button-group/overview.md new file mode 100644 index 000000000..e1de6eeb2 --- /dev/null +++ b/src/de/design-system/lyne/components/button/mini-button-group/overview.md @@ -0,0 +1,26 @@ +--- +tags: mini-button-group-lyne_de +title: Info +key: mini-button-group-lyne-overview_de +parent: mini-button-group-lyne_de +icon: overview +order: 1 +permalink: false + +--- + +## Was macht die Komponente? +Eine Mini-Button-Group ist eine horizontale Anordung von Mini-Buttons. + +## Wann soll die Komponente eingesetzt werden? +* Um eine Liste von mehreren Mini-Buttons platzsparend und übersichtlich darzustellen. + +## Regeln +* Mini-Buttons können mit der Divider-Komponente thematisch grupiert werden. +* Die verfügbaren Grössen (S, M, L, XL) orientieren sich nach den verfügbaren Formular-Elementen und sollten konsistent eingesetzt werden. + +{{ lyneComponentLinks({ + translations: translations["de"].lyne, + mode: "child", + collection: collections.lyne_components_mini_button_group_children_de +}) }} \ No newline at end of file diff --git a/src/de/design-system/lyne/components/button/mini-button/index.md b/src/de/design-system/lyne/components/button/mini-button/index.md index 64461e9c8..22be6a28d 100644 --- a/src/de/design-system/lyne/components/button/mini-button/index.md +++ b/src/de/design-system/lyne/components/button/mini-button/index.md @@ -5,6 +5,7 @@ tags: - lyne_components_de - lyne_components_mini_button_de - lyne_components_button_siblings_de + - lyne_components_mini_button_group_children_de - page key: mini-button-lyne_de title: Mini-Button diff --git a/src/de/design-system/lyne/components/divider/index.md b/src/de/design-system/lyne/components/divider/index.md index 0dfb9a06e..125098b9d 100644 --- a/src/de/design-system/lyne/components/divider/index.md +++ b/src/de/design-system/lyne/components/divider/index.md @@ -3,6 +3,7 @@ layout: pattern-lyne.njk tags: - lyne_de - lyne_components_de + - lyne_components_mini_button_group_children_de - page key: divider-lyne_de title: Divider diff --git a/src/de/design-system/lyne/components/link-list/index.md b/src/de/design-system/lyne/components/link-list/index.md index f53355455..9747fa86d 100644 --- a/src/de/design-system/lyne/components/link-list/index.md +++ b/src/de/design-system/lyne/components/link-list/index.md @@ -1,13 +1,13 @@ ---- -layout: pattern-lyne.njk -tags: - - lyne_de - - lyne_components_de - - lyne_components_link_list_de - - page -key: link-list-lyne_de -title: Link-List -parent: components-lyne_de -keywords: link-list, action -order: 220 ---- +--- +layout: redirect.njk +tags: + - lyne_de + - lyne_components_de + - page +key: link-list-folder-lyne_de +title: Link-List +parent: components-lyne_de +keywords: link, list, anchor +order: 220 +redirect: link-list/ +--- diff --git a/src/de/design-system/lyne/components/link-list/link-list-anchor/anatomy.md b/src/de/design-system/lyne/components/link-list/link-list-anchor/anatomy.md new file mode 100644 index 000000000..34e49b476 --- /dev/null +++ b/src/de/design-system/lyne/components/link-list/link-list-anchor/anatomy.md @@ -0,0 +1,27 @@ +--- +tags: link-list-anchor-lyne_de +title: Anatomie +key: link-list-anchor-lyne-anatomy_de +parent: link-list-anchor-lyne_de +icon: specification +order: 2 +permalink: false +--- + +{{ imageOnGreyBackground({ + url: '/assets/images/lyne/anatomy/anatomy_link_list_anchor', + alt: 'Anatomie der Komponente', + title: 'Anatomie der Komponente' +}) }} + + + +|Nummer|Typ|Beschreibung|Optional|Hinweis| +|------|---|------------|--------|-------| +|1|Komponente|`sbb-title`|Ja|| +|1|Komponente|`sbb-block-link`|Nein|| + + +{.sbb-table} + + diff --git a/src/de/design-system/lyne/components/link-list/link-list-anchor/examples.njk b/src/de/design-system/lyne/components/link-list/link-list-anchor/examples.njk new file mode 100644 index 000000000..b5d8b73c6 --- /dev/null +++ b/src/de/design-system/lyne/components/link-list/link-list-anchor/examples.njk @@ -0,0 +1,19 @@ +--- +tags: link-list-anchor-lyne_de +title: Demo +key: link-list-anchor-lyne-examples_de +parent: link-list-anchor-lyne_de +icon: demo +order: 3 +permalink: false +--- +{{ lynePlayground({ + json: lyne.playgrounds.linklistanchor, + translations: translations["de"].lyne + }) }} + + {{ lyneExamples({ + tag: "sbb-link-list-anchor", + stories: lyne.stories[0], + translations: translations["de"].lyne + }) }} \ No newline at end of file diff --git a/src/de/design-system/lyne/components/link-list/link-list-anchor/implementation.md b/src/de/design-system/lyne/components/link-list/link-list-anchor/implementation.md new file mode 100644 index 000000000..7f57c4975 --- /dev/null +++ b/src/de/design-system/lyne/components/link-list/link-list-anchor/implementation.md @@ -0,0 +1,12 @@ +--- +tags: link-list-anchor-lyne_de +title: Implementation +key: link-list-anchor-lyne-implementation_de +parent: link-list-anchor-lyne_de +icon: implementation +order: 4 +permalink: false +--- +{{ lyne.readmes.linklist.linklistanchor | absolutelinks | safe }} + + diff --git a/src/de/design-system/lyne/components/link-list/link-list-anchor/index.md b/src/de/design-system/lyne/components/link-list/link-list-anchor/index.md new file mode 100644 index 000000000..c5ed590f8 --- /dev/null +++ b/src/de/design-system/lyne/components/link-list/link-list-anchor/index.md @@ -0,0 +1,13 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_de + - lyne_components_de + - lyne_components_link_list_anchor_de + - page +key: link-list-anchor-lyne_de +title: Link-List-Anchor +parent: link-list-folder-lyne_de +keywords: link-list, anchor, link +order: 10 +--- diff --git a/src/de/design-system/lyne/components/link-list/link-list-anchor/overview.md b/src/de/design-system/lyne/components/link-list/link-list-anchor/overview.md new file mode 100644 index 000000000..b90e6aa6d --- /dev/null +++ b/src/de/design-system/lyne/components/link-list/link-list-anchor/overview.md @@ -0,0 +1,20 @@ +--- +tags: link-list-anchor-lyne_de +title: Info +key: link-list-anchor-lyne-overview_de +parent: link-list-anchor-lyne_de +icon: overview +order: 1 +permalink: false +--- + +## Was macht die Komponente? +Die Komponente bietet eine Sammlung von Links, die zu Inhalten der aktuellen Seite führen. + +## Wann soll die Komponente eingesetzt werden? +* Um eine Übersicht der Inhalte der aktuellen Seite darzustellen. +* Um Nutzenden schnellen Zugang zu Inhalten anzubieten. + +## Regeln +* Verwende beschreibende und aussagekräftige Link-Texte, um den Zielinhalt verständlich zu machen. +* Achte darauf, dass die Links in der Liste chronologisch geordnet sind. diff --git a/src/de/design-system/lyne/components/link-list/anatomy.md b/src/de/design-system/lyne/components/link-list/link-list/anatomy.md similarity index 100% rename from src/de/design-system/lyne/components/link-list/anatomy.md rename to src/de/design-system/lyne/components/link-list/link-list/anatomy.md diff --git a/src/de/design-system/lyne/components/link-list/examples.njk b/src/de/design-system/lyne/components/link-list/link-list/examples.njk similarity index 100% rename from src/de/design-system/lyne/components/link-list/examples.njk rename to src/de/design-system/lyne/components/link-list/link-list/examples.njk diff --git a/src/de/design-system/lyne/components/link-list/implementation.md b/src/de/design-system/lyne/components/link-list/link-list/implementation.md similarity index 100% rename from src/de/design-system/lyne/components/link-list/implementation.md rename to src/de/design-system/lyne/components/link-list/link-list/implementation.md diff --git a/src/de/design-system/lyne/components/link-list/link-list/index.md b/src/de/design-system/lyne/components/link-list/link-list/index.md new file mode 100644 index 000000000..af8ea004d --- /dev/null +++ b/src/de/design-system/lyne/components/link-list/link-list/index.md @@ -0,0 +1,13 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_de + - lyne_components_de + - lyne_components_link_list_de + - page +key: link-list-lyne_de +title: Link-List +parent: link-list-folder-lyne_de +keywords: link-list, link +order: 10 +--- diff --git a/src/de/design-system/lyne/components/link-list/overview.md b/src/de/design-system/lyne/components/link-list/link-list/overview.md similarity index 100% rename from src/de/design-system/lyne/components/link-list/overview.md rename to src/de/design-system/lyne/components/link-list/link-list/overview.md diff --git a/src/de/design-system/lyne/components/teaser/teaser-paid/examples.njk b/src/de/design-system/lyne/components/teaser/teaser-paid/examples.njk deleted file mode 100644 index 59bf50c01..000000000 --- a/src/de/design-system/lyne/components/teaser/teaser-paid/examples.njk +++ /dev/null @@ -1,15 +0,0 @@ ---- -tags: teaser-paid-lyne_de -title: Demo -key: teaser-paid-lyne-examples_de -parent: teaser-paid-lyne_de -icon: demo -order: 3 -permalink: false ---- - - {{ lyneExamples({ - tag: "sbb-teaser-paid", - stories: lyne.stories[0], - translations: translations["de"].lyne - }) }} \ No newline at end of file diff --git a/src/de/design-system/lyne/components/teaser/teaser-paid/implementation.md b/src/de/design-system/lyne/components/teaser/teaser-paid/implementation.md deleted file mode 100644 index 763bb974b..000000000 --- a/src/de/design-system/lyne/components/teaser/teaser-paid/implementation.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -tags: teaser-paid-lyne_de -title: Implementation -key: teaser-paid-lyne-implementation_de -parent: teaser-paid-lyne_de -icon: implementation -order: 4 -permalink: false ---- -{{ lyne.readmes.teaserpaid.teaserpaid | absolutelinks | safe }} - - diff --git a/src/de/design-system/lyne/components/teaser/teaser-product-static/anatomy.md b/src/de/design-system/lyne/components/teaser/teaser-product-static/anatomy.md new file mode 100644 index 000000000..fd720f576 --- /dev/null +++ b/src/de/design-system/lyne/components/teaser/teaser-product-static/anatomy.md @@ -0,0 +1,29 @@ +--- +tags: teaser-product-static-lyne_de +title: Anatomie +key: teaser-product-static-lyne-anatomy_de +parent: teaser-product-static-lyne_de +icon: specification +order: 2 +permalink: false +--- + +{{ imageOnGreyBackground({ + url: '/assets/images/lyne/anatomy/anatomy_teaser_product_static', + alt: 'Anatomie der Komponente', + title: 'Anatomie der Komponente' +}) }} + + + +|Nummer|Typ|Beschreibung|Optional|Hinweis| +|------|---|------------|--------|-------| +|1|Komponente|`sbb-image`|Nein|| +|2|Slot|Für textuellen Inhalt.|Nein|| +|3|Komponente|`sbb-action-group`|Nein|Enthält mehrere Buttons oder Links| +|4|Slot|Footnote|Ja|| + + +{.sbb-table} + + \ No newline at end of file diff --git a/src/de/design-system/lyne/components/teaser/teaser-product-static/examples.njk b/src/de/design-system/lyne/components/teaser/teaser-product-static/examples.njk new file mode 100644 index 000000000..26d84add5 --- /dev/null +++ b/src/de/design-system/lyne/components/teaser/teaser-product-static/examples.njk @@ -0,0 +1,20 @@ +--- +tags: teaser-product-static-lyne_de +title: Demo +key: teaser-product-static-lyne-examples_de +parent: teaser-product-static-lyne_de +icon: demo +order: 3 +permalink: false +--- +{{ lynePlayground({ + json: lyne.playgrounds.teaserproductstatic, + wide: true, + translations: translations["de"].lyne + }) }} + + {{ lyneExamples({ + tag: "sbb-teaser-product-static", + stories: lyne.stories[0], + translations: translations["de"].lyne + }) }} \ No newline at end of file diff --git a/src/de/design-system/lyne/components/teaser/teaser-product-static/implementation.md b/src/de/design-system/lyne/components/teaser/teaser-product-static/implementation.md new file mode 100644 index 000000000..347e45716 --- /dev/null +++ b/src/de/design-system/lyne/components/teaser/teaser-product-static/implementation.md @@ -0,0 +1,12 @@ +--- +tags: teaser-product-static-lyne_de +title: Implementation +key: teaser-product-static-lyne-implementation_de +parent: teaser-product-static-lyne_de +icon: implementation +order: 4 +permalink: false +--- +{{ lyne.readmes.teaserproduct.teaserproductstatic | absolutelinks | safe }} + + diff --git a/src/de/design-system/lyne/components/teaser/teaser-product-static/index.md b/src/de/design-system/lyne/components/teaser/teaser-product-static/index.md new file mode 100644 index 000000000..7d1003922 --- /dev/null +++ b/src/de/design-system/lyne/components/teaser/teaser-product-static/index.md @@ -0,0 +1,14 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_de + - lyne_components_de + - lyne_components_teaser_product-static_de + - lyne_components_teaser_siblings_de + - page +key: teaser-product-static-lyne_de +title: Teaser-Product-Static +parent: teaser-folder-lyne_de +keywords: teaser-product-static +order: 660 +--- diff --git a/src/de/design-system/lyne/components/teaser/teaser-paid/overview.md b/src/de/design-system/lyne/components/teaser/teaser-product-static/overview.md similarity index 79% rename from src/de/design-system/lyne/components/teaser/teaser-paid/overview.md rename to src/de/design-system/lyne/components/teaser/teaser-product-static/overview.md index 04b1c5bdd..000c0b77b 100644 --- a/src/de/design-system/lyne/components/teaser/teaser-paid/overview.md +++ b/src/de/design-system/lyne/components/teaser/teaser-product-static/overview.md @@ -1,8 +1,8 @@ --- -tags: teaser-paid-lyne_de +tags: teaser-product-static-lyne_de title: Info -key: teaser-paid-lyne-overview_de -parent: teaser-paid-lyne_de +key: teaser-product-static-lyne-overview_de +parent: teaser-product-static-lyne_de icon: overview order: 1 permalink: false @@ -19,6 +19,7 @@ Ein Teaser ist eine Vorschau, der Nutzende neugierig machen und sie dazu anregen * Verwende eine prägnante und einladende Überschrift sowie eine kurze, interessante Beschreibung. * Verwende nicht zu viele verschiedene Teaser-Arten- und Grössen auf einer Seite. * Mehrere Teaser können mit einem Titel strukturiert werden. +* Der Teaser-Product-Static soll nur verwendet werden, wenn der Teaser mehrere CTA enthalten soll. {{ lyneComponentLinks({ translations: translations["de"].lyne, diff --git a/src/de/design-system/lyne/components/teaser/teaser-paid/anatomy.md b/src/de/design-system/lyne/components/teaser/teaser-product/anatomy.md similarity index 58% rename from src/de/design-system/lyne/components/teaser/teaser-paid/anatomy.md rename to src/de/design-system/lyne/components/teaser/teaser-product/anatomy.md index 19125775e..798a85bf6 100644 --- a/src/de/design-system/lyne/components/teaser/teaser-paid/anatomy.md +++ b/src/de/design-system/lyne/components/teaser/teaser-product/anatomy.md @@ -1,15 +1,15 @@ --- -tags: teaser-paid-lyne_de +tags: teaser-product-lyne_de title: Anatomie -key: teaser-paid-lyne-anatomy_de -parent: teaser-paid-lyne_de +key: teaser-product-lyne-anatomy_de +parent: teaser-product-lyne_de icon: specification order: 2 permalink: false --- {{ imageOnGreyBackground({ - url: '/assets/images/lyne/anatomy/anatomy_teaser_paid', + url: '/assets/images/lyne/anatomy/anatomy_teaser_product', alt: 'Anatomie der Komponente', title: 'Anatomie der Komponente' }) }} @@ -19,7 +19,9 @@ permalink: false |Nummer|Typ|Beschreibung|Optional|Hinweis| |------|---|------------|--------|-------| |1|Komponente|`sbb-image`|Nein|| -|2|Komponente|`sbb-chip`|Ja|| +|2|Slot|Für textuellen Inhalt.|Nein|| +|3|Komponente|`sbb-button`|Nein|| +|4|Slot|Footnote|Ja|| {.sbb-table} diff --git a/src/de/design-system/lyne/components/teaser/teaser-product/examples.njk b/src/de/design-system/lyne/components/teaser/teaser-product/examples.njk new file mode 100644 index 000000000..f643ef838 --- /dev/null +++ b/src/de/design-system/lyne/components/teaser/teaser-product/examples.njk @@ -0,0 +1,20 @@ +--- +tags: teaser-product-lyne_de +title: Demo +key: teaser-product-lyne-examples_de +parent: teaser-product-lyne_de +icon: demo +order: 3 +permalink: false +--- +{{ lynePlayground({ + json: lyne.playgrounds.teaserproduct, + wide: true, + translations: translations["de"].lyne + }) }} + + {{ lyneExamples({ + tag: "sbb-teaser-product", + stories: lyne.stories[0], + translations: translations["de"].lyne + }) }} \ No newline at end of file diff --git a/src/de/design-system/lyne/components/teaser/teaser-product/implementation.md b/src/de/design-system/lyne/components/teaser/teaser-product/implementation.md new file mode 100644 index 000000000..6e5be38c2 --- /dev/null +++ b/src/de/design-system/lyne/components/teaser/teaser-product/implementation.md @@ -0,0 +1,12 @@ +--- +tags: teaser-product-lyne_de +title: Implementation +key: teaser-product-lyne-implementation_de +parent: teaser-product-lyne_de +icon: implementation +order: 4 +permalink: false +--- +{{ lyne.readmes.teaserproduct.teaserproduct | absolutelinks | safe }} + + diff --git a/src/de/design-system/lyne/components/teaser/teaser-paid/index.md b/src/de/design-system/lyne/components/teaser/teaser-product/index.md similarity index 57% rename from src/de/design-system/lyne/components/teaser/teaser-paid/index.md rename to src/de/design-system/lyne/components/teaser/teaser-product/index.md index f31d4381b..247f7d2ae 100644 --- a/src/de/design-system/lyne/components/teaser/teaser-paid/index.md +++ b/src/de/design-system/lyne/components/teaser/teaser-product/index.md @@ -3,12 +3,12 @@ layout: pattern-lyne.njk tags: - lyne_de - lyne_components_de - - lyne_components_teaser_paid_de + - lyne_components_teaser_product_de - lyne_components_teaser_siblings_de - page -key: teaser-paid-lyne_de -title: Teaser-Paid +key: teaser-product-lyne_de +title: Teaser-Product parent: teaser-folder-lyne_de -keywords: teaser-paid +keywords: teaser-product order: 660 --- diff --git a/src/de/design-system/lyne/components/teaser/teaser-product/overview.md b/src/de/design-system/lyne/components/teaser/teaser-product/overview.md new file mode 100644 index 000000000..49e25a35a --- /dev/null +++ b/src/de/design-system/lyne/components/teaser/teaser-product/overview.md @@ -0,0 +1,29 @@ +--- +tags: teaser-product-lyne_de +title: Info +key: teaser-product-lyne-overview_de +parent: teaser-product-lyne_de +icon: overview +order: 1 +permalink: false +--- + +## Was macht die Komponente? +Ein Teaser ist eine Vorschau, der Nutzende neugierig machen und sie dazu anregen soll, auf weitere Inhalte oder Seiten zu klicken. + +## Wann soll die Komponente eingesetzt werden? +* Um Inhalte, Artikel, Produkte oder Dienstleistungen hervorzuheben und zu bewerben. +* Um Nutzende auf weiterführende Informationen oder interessante Inhalte aufmerksam zu machen. + +## Regeln +* Verwende eine prägnante und einladende Überschrift sowie eine kurze, interessante Beschreibung. +* Verwende nicht zu viele verschiedene Teaser-Arten- und Grössen auf einer Seite. +* Mehrere Teaser können mit einem Titel strukturiert werden. +* Beim Teaser-Product ist nur eine CTA erlaubt. Sollten mehrere CTA benötigt werden, kann der Teaser-Product-Static verwendet werden. + + +{{ lyneComponentLinks({ + translations: translations["de"].lyne, + mode: "sibling", + collection: collections.lyne_components_teaser_siblings_de +}) }} \ No newline at end of file diff --git a/src/en/design-system/lyne/components/button/mini-button-group/anatomy.md b/src/en/design-system/lyne/components/button/mini-button-group/anatomy.md new file mode 100644 index 000000000..af0820a3e --- /dev/null +++ b/src/en/design-system/lyne/components/button/mini-button-group/anatomy.md @@ -0,0 +1,27 @@ +--- +tags: mini-button-group-lyne_en +title: Anatomy +key: mini-button-group-lyne-anatomy_en +parent: mini-button-group-lyne_en +icon: specification +order: 2 +permalink: false +--- + +{{ imageOnGreyBackground({ + url: '/assets/images/lyne/anatomy/anatomy_mini_button_group', + alt: 'Anatomy of the component', + title: 'Anatomy of the component' +}) }} + + + +|Number|Type|Description|Optional|Info| +|------|---|------------|--------|-------| +|1|Component|`sbb-mini-button`|No|| +|2|Component|`sbb-divider`|Yes|| + + +{.sbb-table} + + \ No newline at end of file diff --git a/src/en/design-system/lyne/components/button/mini-button-group/examples.njk b/src/en/design-system/lyne/components/button/mini-button-group/examples.njk new file mode 100644 index 000000000..a7c76629f --- /dev/null +++ b/src/en/design-system/lyne/components/button/mini-button-group/examples.njk @@ -0,0 +1,21 @@ +--- +tags: mini-button-group-lyne_en +title: Demo +key: mini-button-group-lyne-examples_en +parent: mini-button-group-lyne_en +icon: demo +order: 3 +permalink: false +--- + +{{ lynePlayground({ + json: lyne.playgrounds.minibuttongroup, + translations: translations["en"].lyne +}) }} + + +{{ lyneExamples({ + tag: "sbb-mini-button-group", + stories: lyne.stories[0], + translations: translations["en"].lyne +}) }} \ No newline at end of file diff --git a/src/en/design-system/lyne/components/button/mini-button-group/implementation.md b/src/en/design-system/lyne/components/button/mini-button-group/implementation.md new file mode 100644 index 000000000..c2da1532b --- /dev/null +++ b/src/en/design-system/lyne/components/button/mini-button-group/implementation.md @@ -0,0 +1,12 @@ +--- +tags: mini-button-group-lyne_en +title: Implementation +key: mini-button-group-lyne-implementation_en +parent: mini-button-group-lyne_en +icon: implementation +order: 4 +permalink: false +--- +{{ lyne.readmes.button.minibuttongroup | absolutelinks | safe }} + + diff --git a/src/en/design-system/lyne/components/button/mini-button-group/index.md b/src/en/design-system/lyne/components/button/mini-button-group/index.md new file mode 100644 index 000000000..55628f4e8 --- /dev/null +++ b/src/en/design-system/lyne/components/button/mini-button-group/index.md @@ -0,0 +1,14 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_en + - lyne_components_en + - lyne_components_mini_button_en + - lyne_components_button_siblings_en + - page +key: mini-button-group-lyne_en +title: Mini-Button-Group +parent: button-folder-lyne_en +keywords: button, icon, split, action +order: 140 +--- diff --git a/src/en/design-system/lyne/components/button/mini-button-group/overview.md b/src/en/design-system/lyne/components/button/mini-button-group/overview.md new file mode 100644 index 000000000..67014ef8f --- /dev/null +++ b/src/en/design-system/lyne/components/button/mini-button-group/overview.md @@ -0,0 +1,27 @@ +--- +tags: mini-button-group-lyne_en +title: Info +key: mini-button-group-lyne-overview_en +parent: mini-button-group-lyne_en +icon: overview +order: 1 +permalink: false + +--- + +## What does the component do? +A mini button group is a horizontal arrangement of mini buttons. + +## When should the component be used? +* To display a list of several mini buttons in a space-saving and clear manner. + +## Rules +* Mini buttons can be grouped thematically with the divider component. +* The available sizes (S, M, L, XL) are based on the available form elements and should be used consistently. + +{{ lyneComponentLinks({ + translations: translations["en"].lyne, + mode: "child", + collection: collections.lyne_components_mini_button_group_children_en +}) }} + diff --git a/src/en/design-system/lyne/components/button/mini-button/index.md b/src/en/design-system/lyne/components/button/mini-button/index.md index f3c6396e8..aae660a43 100644 --- a/src/en/design-system/lyne/components/button/mini-button/index.md +++ b/src/en/design-system/lyne/components/button/mini-button/index.md @@ -5,6 +5,7 @@ tags: - lyne_components_en - lyne_components_mini_button_en - lyne_components_button_siblings_en + - lyne_components_mini_button_group_children_en - page key: mini-button-lyne_en title: Mini-Button diff --git a/src/en/design-system/lyne/components/divider/index.md b/src/en/design-system/lyne/components/divider/index.md index 51b6ad5a6..65e2afc67 100644 --- a/src/en/design-system/lyne/components/divider/index.md +++ b/src/en/design-system/lyne/components/divider/index.md @@ -3,6 +3,7 @@ layout: pattern-lyne.njk tags: - lyne_en - lyne_components_en + - lyne_components_mini_button_group_children_en - page key: divider-lyne_en title: Divider diff --git a/src/en/design-system/lyne/components/link-list/index.md b/src/en/design-system/lyne/components/link-list/index.md index 8cdc13c74..ffe067246 100644 --- a/src/en/design-system/lyne/components/link-list/index.md +++ b/src/en/design-system/lyne/components/link-list/index.md @@ -1,13 +1,13 @@ ---- -layout: pattern-lyne.njk -tags: - - lyne_en - - lyne_components_en - - lyne_components_link_list_en - - page -key: link-list-lyne_en -title: Link-List -parent: components-lyne_en -keywords: link-list, action -order: 220 ---- +--- +layout: redirect.njk +tags: + - lyne_en + - lyne_components_en + - page +key: link-list-folder-lyne_en +title: Link-List +parent: components-lyne_en +keywords: link, list, anchor +order: 220 +redirect: link-list/ +--- diff --git a/src/en/design-system/lyne/components/teaser/teaser-paid/anatomy.md b/src/en/design-system/lyne/components/link-list/link-list-anchor/anatomy.md similarity index 57% rename from src/en/design-system/lyne/components/teaser/teaser-paid/anatomy.md rename to src/en/design-system/lyne/components/link-list/link-list-anchor/anatomy.md index 180f9670d..08985b09f 100644 --- a/src/en/design-system/lyne/components/teaser/teaser-paid/anatomy.md +++ b/src/en/design-system/lyne/components/link-list/link-list-anchor/anatomy.md @@ -1,15 +1,15 @@ --- -tags: teaser-paid-lyne_en +tags: link-list-anchor-lyne_en title: Anatomy -key: teaser-paid-lyne-anatomy_en -parent: teaser-paid-lyne_en +key: link-list-anchor-lyne-anatomy_en +parent: link-list-anchor-lyne_en icon: specification order: 2 permalink: false --- {{ imageOnGreyBackground({ - url: '/assets/images/lyne/anatomy/anatomy_teaser_paid', + url: '/assets/images/lyne/anatomy/anatomy_link_list_anchor', alt: 'Anatomy of the component', title: 'Anatomy of the component' }) }} @@ -18,8 +18,8 @@ permalink: false |Number|Type|Description|Optional|Info| |------|---|------------|--------|-------| -|1|Component|`sbb-image`|No|| -|2|Component|`sbb-chip`|Yes|| +|1|Component|`sbb-title`|Yes|| +|1|Component|`sbb-block-link`|No|| {.sbb-table} diff --git a/src/en/design-system/lyne/components/link-list/link-list-anchor/examples.njk b/src/en/design-system/lyne/components/link-list/link-list-anchor/examples.njk new file mode 100644 index 000000000..9c2ff27d1 --- /dev/null +++ b/src/en/design-system/lyne/components/link-list/link-list-anchor/examples.njk @@ -0,0 +1,19 @@ +--- +tags: link-list-anchor-lyne_en +title: Demo +key: link-list-anchor-lyne-examples_en +parent: link-list-anchor-lyne_en +icon: demo +order: 3 +permalink: false +--- +{{ lynePlayground({ + json: lyne.playgrounds.linklistanchor, + translations: translations["en"].lyne + }) }} + + {{ lyneExamples({ + tag: "sbb-link-list-anchor", + stories: lyne.stories[0], + translations: translations["en"].lyne + }) }} \ No newline at end of file diff --git a/src/en/design-system/lyne/components/link-list/link-list-anchor/implementation.md b/src/en/design-system/lyne/components/link-list/link-list-anchor/implementation.md new file mode 100644 index 000000000..6633a16c7 --- /dev/null +++ b/src/en/design-system/lyne/components/link-list/link-list-anchor/implementation.md @@ -0,0 +1,12 @@ +--- +tags: link-list-anchor-lyne_en +title: Implementation +key: link-list-anchor-lyne-implementation_en +parent: link-list-anchor-lyne_en +icon: implementation +order: 4 +permalink: false +--- +{{ lyne.readmes.linklist.linklistanchor | absolutelinks | safe }} + + diff --git a/src/en/design-system/lyne/components/link-list/link-list-anchor/index.md b/src/en/design-system/lyne/components/link-list/link-list-anchor/index.md new file mode 100644 index 000000000..cf8bc54eb --- /dev/null +++ b/src/en/design-system/lyne/components/link-list/link-list-anchor/index.md @@ -0,0 +1,13 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_en + - lyne_components_en + - lyne_components_link_list_anchor_en + - page +key: link-list-anchor-lyne_en +title: Link-List-Anchor +parent: link-list-folder-lyne_en +keywords: link-list, anchor, link +order: 10 +--- diff --git a/src/en/design-system/lyne/components/link-list/link-list-anchor/overview.md b/src/en/design-system/lyne/components/link-list/link-list-anchor/overview.md new file mode 100644 index 000000000..9cedcb6c8 --- /dev/null +++ b/src/en/design-system/lyne/components/link-list/link-list-anchor/overview.md @@ -0,0 +1,20 @@ +--- +tags: link-list-anchor-lyne_en +title: Info +key: link-list-anchor-lyne-overview_en +parent: link-list-anchor-lyne_en +icon: overview +order: 1 +permalink: false +--- + +## What does the component do? +The component provides a collection of links that lead to content on the current page. + +## When should the component be used? +* To display an overview of the content of the current page. +* To offer users quick access to content. + +## Rules +* Use descriptive and meaningful link texts to make the target content understandable. +* Make sure that the links in the list are in chronological order. \ No newline at end of file diff --git a/src/en/design-system/lyne/components/link-list/anatomy.md b/src/en/design-system/lyne/components/link-list/link-list/anatomy.md similarity index 100% rename from src/en/design-system/lyne/components/link-list/anatomy.md rename to src/en/design-system/lyne/components/link-list/link-list/anatomy.md diff --git a/src/en/design-system/lyne/components/link-list/examples.njk b/src/en/design-system/lyne/components/link-list/link-list/examples.njk similarity index 100% rename from src/en/design-system/lyne/components/link-list/examples.njk rename to src/en/design-system/lyne/components/link-list/link-list/examples.njk diff --git a/src/en/design-system/lyne/components/link-list/implementation.md b/src/en/design-system/lyne/components/link-list/link-list/implementation.md similarity index 100% rename from src/en/design-system/lyne/components/link-list/implementation.md rename to src/en/design-system/lyne/components/link-list/link-list/implementation.md diff --git a/src/en/design-system/lyne/components/link-list/link-list/index.md b/src/en/design-system/lyne/components/link-list/link-list/index.md new file mode 100644 index 000000000..66525fce0 --- /dev/null +++ b/src/en/design-system/lyne/components/link-list/link-list/index.md @@ -0,0 +1,13 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_en + - lyne_components_en + - lyne_components_link_list_en + - page +key: link-list-lyne_en +title: Link-List +parent: link-list-folder-lyne_en +keywords: link-list, action +order: 220 +--- diff --git a/src/en/design-system/lyne/components/link-list/overview.md b/src/en/design-system/lyne/components/link-list/link-list/overview.md similarity index 100% rename from src/en/design-system/lyne/components/link-list/overview.md rename to src/en/design-system/lyne/components/link-list/link-list/overview.md diff --git a/src/en/design-system/lyne/components/teaser/teaser-paid/examples.njk b/src/en/design-system/lyne/components/teaser/teaser-paid/examples.njk deleted file mode 100644 index 3ecd01246..000000000 --- a/src/en/design-system/lyne/components/teaser/teaser-paid/examples.njk +++ /dev/null @@ -1,15 +0,0 @@ ---- -tags: teaser-paid-lyne_en -title: Demo -key: teaser-paid-lyne-examples_en -parent: teaser-paid-lyne_en -icon: demo -order: 3 -permalink: false ---- - - {{ lyneExamples({ - tag: "sbb-teaser-paid", - stories: lyne.stories[0], - translations: translations["en"].lyne - }) }} \ No newline at end of file diff --git a/src/en/design-system/lyne/components/teaser/teaser-paid/implementation.md b/src/en/design-system/lyne/components/teaser/teaser-paid/implementation.md deleted file mode 100644 index ae1d70630..000000000 --- a/src/en/design-system/lyne/components/teaser/teaser-paid/implementation.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -tags: teaser-paid-lyne_en -title: Implementation -key: teaser-paid-lyne-implementation_en -parent: teaser-paid-lyne_en -icon: implementation -order: 4 -permalink: false ---- -{{ lyne.readmes.teaserpaid.teaserpaid | absolutelinks | safe }} - - diff --git a/src/en/design-system/lyne/components/teaser/teaser-product-static/anatomy.md b/src/en/design-system/lyne/components/teaser/teaser-product-static/anatomy.md new file mode 100644 index 000000000..f0d2e3995 --- /dev/null +++ b/src/en/design-system/lyne/components/teaser/teaser-product-static/anatomy.md @@ -0,0 +1,29 @@ +--- +tags: teaser-product-static-lyne_en +title: Anatomie +key: teaser-product-static-lyne-anatomy_en +parent: teaser-product-static-lyne_en +icon: specification +order: 2 +permalink: false +--- + +{{ imageOnGreyBackground({ + url: '/assets/images/lyne/anatomy/anatomy_teaser_product_static', + alt: 'Anatomy of the component', + title: 'Anatomy of the component' +}) }} + + + +|Number|Type|Description|Optional|Info| +|------|---|------------|--------|-------| +|1|Component|`sbb-image`|No|| +|2|Slot|Für textuellen Inhalt.|No|| +|3|Component|`sbb-action-group`|No|Contains multpile buttons or links| +|4|Slot|Footnote|Yes|| + + +{.sbb-table} + + \ No newline at end of file diff --git a/src/en/design-system/lyne/components/teaser/teaser-product-static/examples.njk b/src/en/design-system/lyne/components/teaser/teaser-product-static/examples.njk new file mode 100644 index 000000000..5d9fb3b8f --- /dev/null +++ b/src/en/design-system/lyne/components/teaser/teaser-product-static/examples.njk @@ -0,0 +1,20 @@ +--- +tags: teaser-product-static-lyne_en +title: Demo +key: teaser-product-static-lyne-examples_en +parent: teaser-product-static-lyne_en +icon: demo +order: 3 +permalink: false +--- +{{ lynePlayground({ + json: lyne.playgrounds.teaserproductstatic, + wide: true, + translations: translations["en"].lyne + }) }} + + {{ lyneExamples({ + tag: "sbb-teaser-product-static", + stories: lyne.stories[0], + translations: translations["en"].lyne + }) }} \ No newline at end of file diff --git a/src/en/design-system/lyne/components/teaser/teaser-product-static/implementation.md b/src/en/design-system/lyne/components/teaser/teaser-product-static/implementation.md new file mode 100644 index 000000000..c6262f490 --- /dev/null +++ b/src/en/design-system/lyne/components/teaser/teaser-product-static/implementation.md @@ -0,0 +1,12 @@ +--- +tags: teaser-product-static-lyne_en +title: Implementation +key: teaser-product-static-lyne-implementation_en +parent: teaser-product-static-lyne_en +icon: implementation +order: 4 +permalink: false +--- +{{ lyne.readmes.teaserproduct.teaserproductstatic | absolutelinks | safe }} + + diff --git a/src/en/design-system/lyne/components/teaser/teaser-product-static/index.md b/src/en/design-system/lyne/components/teaser/teaser-product-static/index.md new file mode 100644 index 000000000..5c21cff38 --- /dev/null +++ b/src/en/design-system/lyne/components/teaser/teaser-product-static/index.md @@ -0,0 +1,14 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_en + - lyne_components_en + - lyne_components_teaser_product-static_en + - lyne_components_teaser_siblings_en + - page +key: teaser-product-static-lyne_en +title: Teaser-Product-Static +parent: teaser-folder-lyne_en +keywords: teaser-product-static +order: 660 +--- diff --git a/src/en/design-system/lyne/components/teaser/teaser-paid/overview.md b/src/en/design-system/lyne/components/teaser/teaser-product-static/overview.md similarity index 78% rename from src/en/design-system/lyne/components/teaser/teaser-paid/overview.md rename to src/en/design-system/lyne/components/teaser/teaser-product-static/overview.md index 832eb216c..ca6440fd8 100644 --- a/src/en/design-system/lyne/components/teaser/teaser-paid/overview.md +++ b/src/en/design-system/lyne/components/teaser/teaser-product-static/overview.md @@ -1,8 +1,8 @@ --- -tags: teaser-paid-lyne_en +tags: teaser-product-static-lyne_en title: Info -key: teaser-paid-lyne-overview_en -parent: teaser-paid-lyne_en +key: teaser-product-static-lyne-overview_en +parent: teaser-product-static-lyne_en icon: overview order: 1 permalink: false @@ -19,6 +19,7 @@ A teaser is a preview that is intended to arouse users' curiosity and encourage * Use a catchy and inviting headline and a short, interesting description. * Do not use too many different teaser types and sizes on one page. * Several teasers can be structured with one title. +* The teaser-product-static should only be used if the teaser is to contain several CTAs. {{ lyneComponentLinks({ translations: translations["en"].lyne, diff --git a/src/en/design-system/lyne/components/teaser/teaser-product/anatomy.md b/src/en/design-system/lyne/components/teaser/teaser-product/anatomy.md new file mode 100644 index 000000000..1363c944c --- /dev/null +++ b/src/en/design-system/lyne/components/teaser/teaser-product/anatomy.md @@ -0,0 +1,29 @@ +--- +tags: teaser-product-lyne_en +title: Anatomie +key: teaser-product-lyne-anatomy_en +parent: teaser-product-lyne_en +icon: specification +order: 2 +permalink: false +--- + +{{ imageOnGreyBackground({ + url: '/assets/images/lyne/anatomy/anatomy_teaser_product', + alt: 'Anatomy of the component', + title: 'Anatomy of the component' +}) }} + + + +|Number|Type|Description|Optional|Info| +|------|---|------------|--------|-------| +|1|Component|`sbb-image`|No|| +|2|Slot|Für textuellen Inhalt.|No|| +|3|Component|`sbb-button`|No|| +|4|Slot|Footnote|Yes|| + + +{.sbb-table} + + \ No newline at end of file diff --git a/src/en/design-system/lyne/components/teaser/teaser-product/examples.njk b/src/en/design-system/lyne/components/teaser/teaser-product/examples.njk new file mode 100644 index 000000000..59bfcd22f --- /dev/null +++ b/src/en/design-system/lyne/components/teaser/teaser-product/examples.njk @@ -0,0 +1,20 @@ +--- +tags: teaser-product-lyne_en +title: Demo +key: teaser-product-lyne-examples_en +parent: teaser-product-lyne_en +icon: demo +order: 3 +permalink: false +--- +{{ lynePlayground({ + json: lyne.playgrounds.teaserproduct, + wide: true, + translations: translations["en"].lyne + }) }} + + {{ lyneExamples({ + tag: "sbb-teaser-product", + stories: lyne.stories[0], + translations: translations["en"].lyne + }) }} \ No newline at end of file diff --git a/src/en/design-system/lyne/components/teaser/teaser-product/implementation.md b/src/en/design-system/lyne/components/teaser/teaser-product/implementation.md new file mode 100644 index 000000000..af6592dcd --- /dev/null +++ b/src/en/design-system/lyne/components/teaser/teaser-product/implementation.md @@ -0,0 +1,12 @@ +--- +tags: teaser-product-lyne_en +title: Implementation +key: teaser-product-lyne-implementation_en +parent: teaser-product-lyne_en +icon: implementation +order: 4 +permalink: false +--- +{{ lyne.readmes.teaserproduct.teaserproduct | absolutelinks | safe }} + + diff --git a/src/en/design-system/lyne/components/teaser/teaser-paid/index.md b/src/en/design-system/lyne/components/teaser/teaser-product/index.md similarity index 57% rename from src/en/design-system/lyne/components/teaser/teaser-paid/index.md rename to src/en/design-system/lyne/components/teaser/teaser-product/index.md index 97937c554..8472bfe31 100644 --- a/src/en/design-system/lyne/components/teaser/teaser-paid/index.md +++ b/src/en/design-system/lyne/components/teaser/teaser-product/index.md @@ -3,12 +3,12 @@ layout: pattern-lyne.njk tags: - lyne_en - lyne_components_en - - lyne_components_teaser_paid_en + - lyne_components_teaser_product_en - lyne_components_teaser_siblings_en - page -key: teaser-paid-lyne_en -title: Teaser-Paid +key: teaser-product-lyne_en +title: Teaser-Product parent: teaser-folder-lyne_en -keywords: teaser-paid +keywords: teaser-product order: 660 --- diff --git a/src/en/design-system/lyne/components/teaser/teaser-product/overview.md b/src/en/design-system/lyne/components/teaser/teaser-product/overview.md new file mode 100644 index 000000000..876a6afc7 --- /dev/null +++ b/src/en/design-system/lyne/components/teaser/teaser-product/overview.md @@ -0,0 +1,29 @@ +--- +tags: teaser-product-lyne_en +title: Info +key: teaser-product-lyne-overview_en +parent: teaser-product-lyne_en +icon: overview +order: 1 +permalink: false +--- + +## What does the component do? +A teaser is a preview that is intended to arouse users' curiosity and encourage them to click on further content or pages. + +## When should the component be used? +* To highlight and promote content, articles, products or services. +* To make users aware of further information or interesting content. + +## Rules +* Use a catchy and inviting headline and a short, interesting description. +* Do not use too many different teaser types and sizes on one page. +* Several teasers can be structured with one title. +* Only one CTA is permitted for the teaser-product. If several CTAs are required, the teaser-product-static can be used. + + +{{ lyneComponentLinks({ + translations: translations["en"].lyne, + mode: "sibling", + collection: collections.lyne_components_teaser_siblings_en +}) }} \ No newline at end of file diff --git a/src/fr/design-system/lyne/components/button/mini-button-group/index.md b/src/fr/design-system/lyne/components/button/mini-button-group/index.md new file mode 100644 index 000000000..533835a6c --- /dev/null +++ b/src/fr/design-system/lyne/components/button/mini-button-group/index.md @@ -0,0 +1,15 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_fr + - lyne_components_fr + - page +key: mini-button-group-lyne_fr +title: Mini Button-Group +parent: button-folder-lyne_fr +keywords: button, icon, split, action +order: 140 +availablelanguages: + - de + - en +--- diff --git a/src/fr/design-system/lyne/components/teaser/teaser-product-static/index.md b/src/fr/design-system/lyne/components/teaser/teaser-product-static/index.md new file mode 100644 index 000000000..8b49f78bc --- /dev/null +++ b/src/fr/design-system/lyne/components/teaser/teaser-product-static/index.md @@ -0,0 +1,15 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_fr + - lyne_components_fr + - page +key: teaser-product-static-lyne_fr +title: Teaser-Hero +parent: teaser-folder-lyne_fr +keywords: teaser-product-static +order: 660 +availablelanguages: + - de + - en +--- diff --git a/src/fr/design-system/lyne/components/teaser/teaser-paid/index.md b/src/fr/design-system/lyne/components/teaser/teaser-product/index.md similarity index 66% rename from src/fr/design-system/lyne/components/teaser/teaser-paid/index.md rename to src/fr/design-system/lyne/components/teaser/teaser-product/index.md index f716e8f82..fbd2c5679 100644 --- a/src/fr/design-system/lyne/components/teaser/teaser-paid/index.md +++ b/src/fr/design-system/lyne/components/teaser/teaser-product/index.md @@ -4,10 +4,10 @@ tags: - lyne_fr - lyne_components_fr - page -key: teaser-paid-lyne_fr -title: Teaser-Paid +key: teaser-product-lyne_fr +title: Teaser-Hero parent: teaser-folder-lyne_fr -keywords: teaser-paid +keywords: teaser-product order: 660 availablelanguages: - de diff --git a/src/it/design-system/lyne/components/button/mini-button-group/index.md b/src/it/design-system/lyne/components/button/mini-button-group/index.md new file mode 100644 index 000000000..ce1a5e81c --- /dev/null +++ b/src/it/design-system/lyne/components/button/mini-button-group/index.md @@ -0,0 +1,15 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_it + - lyne_components_it + - page +key: mini-button-group-lyne_it +title: Mini Button-Group +parent: button-folder-lyne_it +keywords: button, icon, split, action +order: 140 +availablelanguages: + - de + - en +--- diff --git a/src/it/design-system/lyne/components/teaser/teaser-product-static/index.md b/src/it/design-system/lyne/components/teaser/teaser-product-static/index.md new file mode 100644 index 000000000..42cd572ab --- /dev/null +++ b/src/it/design-system/lyne/components/teaser/teaser-product-static/index.md @@ -0,0 +1,15 @@ +--- +layout: pattern-lyne.njk +tags: + - lyne_it + - lyne_components_it + - page +key: teaser-product-static-lyne_it +title: Teaser-Hero +parent: teaser-folder-lyne_it +keywords: teaser-product-static +order: 660 +availablelanguages: + - de + - en +--- diff --git a/src/it/design-system/lyne/components/teaser/teaser-paid/index.md b/src/it/design-system/lyne/components/teaser/teaser-product/index.md similarity index 66% rename from src/it/design-system/lyne/components/teaser/teaser-paid/index.md rename to src/it/design-system/lyne/components/teaser/teaser-product/index.md index 62231e091..ed8627121 100644 --- a/src/it/design-system/lyne/components/teaser/teaser-paid/index.md +++ b/src/it/design-system/lyne/components/teaser/teaser-product/index.md @@ -4,10 +4,10 @@ tags: - lyne_it - lyne_components_it - page -key: teaser-paid-lyne_it -title: Teaser-Paid +key: teaser-product-lyne_it +title: Teaser-Hero parent: teaser-folder-lyne_it -keywords: teaser-paid +keywords: teaser-product order: 660 availablelanguages: - de