feat: added legal info

.storybook/preview.js

@@ -19,13 +19,14 @@ export const parameters = {
       order: [
         '00-Intro',
         ['Welcome', 'Getting Started', 'Frameworks', 'Showcases'],
-        '01-Layout',
-        '02-Navigation',
-        '03-Action',
-        '04-Data-Display',
-        '05-Data-Input',
-        '06-Feedback',
-        '07-Utility',
+        '02-Layout',
+        '03-Navigation',
+        '04-Action',
+        '05-Data-Display',
+        '06-Data-Input',
+        '07-Feedback',
+        '08-Utility',
+        '20-Legal',
         '99-Development'
       ]
     }

README.md

@@ -77,6 +77,10 @@ This especially relates to (but doesn't exclude further Deutsche Bahn brand asse
 
 Contributions are very welcome, please refer to the [contribution guide](CONTRIBUTING.md).
 
+## Third party acknowledgments – many kudos for that !!!
+
+- [open privacy by opr.vc](https://opr.vc)
+
 ## Code of conduct
 
 We as members, contributors, and leaders pledge to make participation in our

packages/db-ui-elements-stencil/src/legal/datenschutzerklaerung.stories.tsx

@@ -0,0 +1,14 @@
+import '../stories/showcase/showcase.css';
+
+export default {
+  title: '20-Legal/Datenschutzerklaerung',
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export const datenschutzerklaerung = () => {
+  return `<div class="iframe-container">
+      <iframe src="https://db-ui.github.io/datenschutzerklaerung.html" height="100%" width="100%" />
+    </div>`;
+};

packages/db-ui-elements-stencil/src/legal/imprint.stories.tsx

@@ -0,0 +1,14 @@
+import '../stories/showcase/showcase.css';
+
+export default {
+  title: '20-Legal/Imprint',
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export const imprint = () => {
+  return `<a href="https://www.dbsystel.de/dbsystel-en/legal-3715942" target="_blank" rel="noopener noreferrer">Imprint</a><script type="text/javascript">
+    top.location.href = 'https://www.dbsystel.de/dbsystel-en/legal-3715942';
+</script>`;
+};