telekom · nowseemee · May 24, 2022 · Jan 12, 2022 · Jan 26, 2022 · Jan 26, 2022
@@ -43,10 +43,7 @@ export const parameters = {
         'About Scale',
         'FAQ',
         'New Release',
-        [
-          'Release Notes',
-          'Sketch Library Update'
-        ],
+        ['Release Notes', 'Sketch Library Update'],
         'Setup & Info',
         [
           'Getting Started For Designers',
@@ -69,10 +66,12 @@ export const parameters = {
           'Shadows',
         ],
         'Update History',
-        [ 'Design', 'Development'],
+        ['Design', 'Development'],
         'Components',
         'Beta Components',
         'Contact',
+        'Legal',
+        ['Disclaimer', 'Legal Notice', 'Privacy'],
       ],
     },
   },

@@ -9,30 +9,30 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from "react";
-import Events from "@storybook/core-events";
-import { addons, types } from "@storybook/addons";
-import { useGlobals } from "@storybook/api";
-import sidebarLinks from "../../sidebar-links.json";
-
-const sidebarClassName = "css-ohbggj";
+import React from 'react';
+import Events from '@storybook/core-events';
+import { addons, types } from '@storybook/addons';
+import { useGlobals } from '@storybook/api';
+import sidebarLinks from '../../sidebar-links.json';
 
 const createLink = ({ title, href }) => {
-  const link = document.createElement("a");
+  const link = document.createElement('a');
   link.href = href;
   link.id = `sidebar-link-${title}`;
-  link.target = "_blank";
-  link.rel = "noopener noreferrer";
-  link.setAttribute("class", "sidebar-item css-8l36wn");
+  link.target = '_blank';
+  link.rel = 'noopener noreferrer';
+  link.setAttribute('class', 'sidebar-item css-8l36wn');
   link.innerHTML = title;
   return link;
 };
 
 let sidebarLinksContainer;
 
-addons.register("@telekom/scale-sidebar-links-addon", (api) => {
+addons.register('@telekom/scale-sidebar-links-addon', (api) => {
   api.on(Events.STORY_CHANGED, (title) => {
-    const content = document.getElementsByTagName('iframe') && document.getElementsByTagName('iframe')[0];
+    const content =
+      document.getElementsByTagName('iframe') &&
+      document.getElementsByTagName('iframe')[0];
     _paq.push(['setDocumentTitle', title]);
     _paq.push(['trackPageView']);
     _paq.push(['MediaAnalytics::scanForMedia', content]);
@@ -45,8 +45,8 @@ addons.register("@telekom/scale-sidebar-links-addon", (api) => {
     type: types.TAB,
     route: () => {
       const [{ locale }] = useGlobals();
-      const sidebarContainer = document.querySelector(
-          "#storybook-explorer-tree > div > div"
+      const sidebarLinksContainerInjectTarget = document.querySelector(
+        '#contact-your-feedback--page'
       );
 
       React.useEffect(() => {
@@ -57,10 +57,11 @@ addons.register("@telekom/scale-sidebar-links-addon", (api) => {
         if (sidebarLinksContainer) {
           sidebarLinksContainer.remove();
         }
-        sidebarLinksContainer = document.createElement("div");
-        sidebarLinksContainer.setAttribute("style", "margin-top: 48px;");
-        sidebarLinksContainer.id = "sidebar-links";
-        sidebarContainer.appendChild(sidebarLinksContainer);
+        sidebarLinksContainer = document.createElement('div');
+        sidebarLinksContainer.id = 'sidebar-links';
+        sidebarLinksContainerInjectTarget.parentNode.appendChild(
+          sidebarLinksContainer
+        );
 
         sidebarLinks[locale].forEach((link) => {
           sidebarLinksContainer.appendChild(createLink(link));

@@ -84,3 +84,7 @@
   font-size: 16px !important;
   line-height: 24px !important;
 }
+
+.sbdocs-ol[type='a'] {
+  list-style-type: lower-alpha;
+}
@@ -92,3 +92,7 @@
   font-size: 16px !important;
   line-height: 24px !important;
 }
+
+.sbdocs-ol[type='a'] {
+  list-style-type: lower-alpha;
+}
@@ -3,36 +3,12 @@
     {
       "title": "Kontakt",
       "href": "mailto:contact@brand-design.telekom.com"
-    },
-    {
-      "title": "Nutzungsbedingungen",
-      "href": "https://www.brand-design.telekom.com/nutzungsbedingungen/"
-    },
-    {
-      "title": "Impressum",
-      "href": "https://www.brand-design.telekom.com/impressum/"
-    },
-    {
-      "title": "Datenschutz",
-      "href": "https://www.brand-design.telekom.com/datenschutz/"
     }
   ],
   "en": [
     {
       "title": "Contact",
       "href": "mailto:contact@brand-design.telekom.com"
-    },
-    {
-      "title": "Terms of Use",
-      "href": "https://www.brand-design.telekom.com/en/terms-of-use/"
-    },
-    {
-      "title": "Legal Notice",
-      "href": "https://www.brand-design.telekom.com/en/legal-notice/"
-    },
-    {
-      "title": "Privacy",
-      "href": "https://www.brand-design.telekom.com/en/privacy/"
     }
   ]
 }
@@ -0,0 +1,22 @@
+import { Meta, Description, DocsContainer } from '@storybook/addon-docs/blocks';
+
+import text_en from './Disclaimer_en.md';
+import text_de from './Disclaimer_de.md';
+
+<Meta
+  title="Legal/Disclaimer"
+  parameters={{
+    docs: {
+      container: ({ context }) => {
+        const locale = context && context.globals && context.globals.locale;
+        return (
+          <DocsContainer context={context}>
+            {locale && (
+              <Description markdown={locale === 'en' ? text_en : text_de} />
+            )}
+          </DocsContainer>
+        );
+      },
+    },
+  }}
+/>
@@ -0,0 +1,11 @@
+# Haftungsausschluss
+
+Die Deutsche Telekom AG übernimmt keine Garantie dafür, dass die auf dieser Webseite bereitgestellten Informationen vollständig, richtig und in jedem Fall aktuell sind. Dies gilt auch für alle Links, auf die diese Webseite direkt oder indirekt verweist. Die Deutsche Telekom AG ist nicht verantwortlich für den Inhalt von Seiten, die über einen solchen Link erreicht werden.
+
+Die Deutsche Telekom AG behält sich das Recht vor, ohne Ankündigung Änderungen oder Ergänzungen der bereitgestellten Informationen vorzunehmen. Die Bereitstellung dieser Informationen stellt von Seiten der Deutschen Telekom AG kein vertragliches Angebot für Auskünfte, Beratung oder ähnliche Vertragsbeziehungen dar. Jegliche Haftung für die Nutzung und Richtigkeit der Webseiteninhalte sowie die Verfügbarkeit der Webseite ist ausgeschlossen. Die Deutsche Telekom AG haftet deshalb nicht für besondere, indirekte oder Folgeschäden oder jegliche Schäden, die aus Nutzungsausfall, Verlust von Daten oder entgangenem Gewinn resultieren, gleich ob durch eine Vertragshandlung oder durch Fahrlässigkeit oder sonstige unerlaubte Handlung, und die aus oder in Zusammenhang mit der Nutzung von auf dieser Website verfügbaren Dokumenten oder Informationen entstehen.
+
+© 2022 und Anbieter im Sinne des Staatsvertrages über Mediendienste (MDStV):
+
+Deutsche Telekom AG<br>
+Friedrich-Ebert-Allee 140<br>
+53113 Bonn
@@ -0,0 +1,11 @@
+# Disclaimer
+
+Deutsche Telekom AG does not guarantee that the information provided on this website is complete, correct, or in any case up to date. This also applies to all links which this website refers to directly or indirectly. Deutsche Telekom AG is not responsible for the content of any page accessed via such a link.
+
+Deutsche Telekom AG reserves the right to make changes or additions to the information provided without prior notice. Providing this information by Deutsche Telekom AG does not constitute a contractual offer for information, advice, or similar contractual relationships. Any liability is excluded for the use of the content of the website or the correctness of the content or the accessibility of the website. Therefore, Deutsche Telekom AG shall not be liable for any special, indirect, or consequential damages or any damages whatsoever resulting from loss of use, data, or profits, whether in an action of contract, negligence, or other tortious action, arising out of or in connection with the use or performance of documents or information available from this website.
+
+© 2022 and provider within the meaning of the MDStV:
+
+Deutsche Telekom AG<br>
+Friedrich-Ebert-Allee 140<br>
+53113 Bonn
@@ -0,0 +1,22 @@
+import { Meta, Description, DocsContainer } from '@storybook/addon-docs/blocks';
+
+import text_en from './LegalNotice_en.md';
+import text_de from './LegalNotice_de.md';
+
+<Meta
+  title="Legal/Legal Notice"
+  parameters={{
+    docs: {
+      container: ({ context }) => {
+        const locale = context && context.globals && context.globals.locale;
+        return (
+          <DocsContainer context={context}>
+            {locale && (
+              <Description markdown={locale === 'en' ? text_en : text_de} />
+            )}
+          </DocsContainer>
+        );
+      },
+    },
+  }}
+/>
@@ -0,0 +1,41 @@
+# Impressum
+
+Brand & Design ist ein Dienst der Bereiche Telekom „Customer Experience Management“ und „Group Brand Strategy and Marketing Communications“ der Deutschen Telekom AG.
+
+Deutsche Telekom AG<br>
+Friedrich-Ebert-Allee 140<br>
+53113 Bonn
+
+E-Mail: [contact-NOSPAM-brand-design.telekom.com](mailto:contact-NOSPAM-brand-design.telekom.com)<br>
+Phone: +49 228 181-24299
+
+**Handelsregister:**
+Amtsgericht Bonn HRB 6794<br>
+Sitz der Gesellschaft: Bonn<br>
+USt-IdNr. DE 123475223<br>
+WEEE-Reg.-Nr. DE50478376
+
+## Vertretungsberechtigt
+
+Timotheus Höttges<br>
+Adel Al-Saleh<br>
+Birgit Bohle<br>
+Srinivasan Gopalan<br>
+Dr. Christian P. Illek<br>
+Thorsten Langheim<br>
+Dominique Leroy<br>
+Claudia Nemat<br>
+
+## Aufsichtsbehörde
+
+Bundesnetzagentur für Elektrizität, Gas, Telekommunikation, Post und Eisenbahnen
+Tulpenfeld 4<br>
+53113 Bonn
+
+## Verantwortlich
+
+Ole Heydekamp<br>
+Leiter Customer Experience Management<br>
+
+Alexander Engelhardt<br>
+Leiter Markenmanagement
@@ -0,0 +1,40 @@
+# Legal Notice
+
+Brand & Design is a service offered by Telekom Customer Experience Management as well as Brand Strategy and Marketing Communications, Deutsche Telekom AG.
+
+Deutsche Telekom AG<br>
+Friedrich-Ebert-Allee 140<br>
+53113 Bonn
+E-Mail: [contact-NOSPAM-brand-design.telekom.com](mailto:contact-NOSPAM-brand-design.telekom.com)<br>
+Phone: +49 228 181-24299
+
+**Commercial Register:**
+Bonn District Court (Amtsgericht) HRB 6794,<br>
+Registered Office, Bonn,<br>
+VAT ID: DE 123475223, WEEE Reg. No. DE50478376
+
+## Authorized Representatives
+
+Timotheus Höttges<br>
+Adel Al-Saleh<br>
+Birgit Bohle<br>
+Srinivasan Gopalan<br>
+Dr. Christian P. Illek<br>
+Thorsten Langheim<br>
+Dominique Leroy<br>
+Claudia Nemat<br>
+
+## Regulatory Authority
+
+Federal Network Agency for Electricity, Gas, Telecommunications, Post and Railway<br>
+Tulpenfeld 4<br>
+53113 Bonn
+Germany
+
+## Responsible
+
+Ole Heydekamp<br>
+Lead Customer Experience Management<br>
+
+Alexander Engelhardt<br>
+Vice President Brand Management
@@ -0,0 +1,22 @@
+import { Meta, Description, DocsContainer } from '@storybook/addon-docs/blocks';
+
+import text_en from './Privacy_en.md';
+import text_de from './Privacy_de.md';
+
+<Meta
+  title="Legal/Privacy"
+  parameters={{
+    docs: {
+      container: ({ context }) => {
+        const locale = context && context.globals && context.globals.locale;
+        return (
+          <DocsContainer context={context}>
+            {locale && (
+              <Description markdown={locale === 'en' ? text_en : text_de} />
+            )}
+          </DocsContainer>
+        );
+      },
+    },
+  }}
+/>
@@ -0,0 +1,66 @@
+# Datenschutzhinweise
+
+Der Schutz deiner personenbezogenen Daten hat für die Deutsche Telekom AG einen hohen Stellenwert. Wir informieren dich stets darüber, welche personenbezogenen Daten erfasst werden, wie wir diese verwenden und welche Gestaltungsmöglichkeiten du dabei hast.
+
+## 1. Welche Daten werden erfasst, wie werden sie verwendet und wie lange werden sie gespeichert?
+
+Wir erfassen lediglich **technische Merkmale**: Wenn du unsere Webseiten besuchst, erfasst der Webserver vorübergehend den Domain-Namen oder die IP-Adresse deines Computers, die Dateianfrage des Clients (Dateiname und URL), den http-Antwort-Code und die Webseite, von der aus du unsere Seite aufrufst. Die erfassten Daten werden ausschließlich für Zwecke der Datensicherheit, insbesondere zur Abwehr von Angriffsversuchen auf unseren Webserver verwendet (Art. 6 Abs.1f DSGVO). Sie werden weder für die Erstellung von individuellen Nutzerprofilen verwendet noch an Dritte weitergegeben. Die Daten werden nach spätestens sieben Tagen wieder gelöscht. Wir behalten uns das Recht vor, anonymisierte Datensätze statistisch auszuwerten.
+
+## 2. Kontrolle der von Social-Media-Plugins verwendeten Daten und bei Verlinkungen zu Social-Media-Plattformen
+
+Wir verwenden keine Social-Media-Plugins und verlinken nicht auf Social-Media-Plattformen.
+
+## 3. Wird mein Nutzungsverhalten ausgewertet, z. B. für Werbung, Tracking oder Betrugsprävention?
+
+Wir möchten, dass du unsere Webseiten gerne nutzt und unsere Produkte und Dienste in Anspruch nimmst. Daran haben wir ein wirtschaftliches Interesse. Damit du die Informationen findest, die dich interessieren und wir unsere Webseiten nutzerfreundlich ausgestalten können, analysieren wir anonymisiert und pseudonymisiert das Nutzungsverhalten. Im Rahmen der gesetzlichen Regelungen legen wir, oder von uns im Rahmen einer Auftragsverarbeitung beauftragte Unternehmen, Nutzungsprofile an. Ein unmittelbarer Rückschluss auf deine Person ist dabei nicht möglich. Nachfolgend informieren wir dich allgemein über die verschiedenen Zwecke, Techniken, Speicherdauer sowie die Verarbeitungsländer.
+
+### Techniken
+
+### Erforderliche Cookies
+
+Diese Cookies sind notwendig, damit du durch die Seiten navigieren und wesentliche Funktionen nutzen kannst. Sie ermöglichen Grundfunktionen, um den Zugriff auf gesicherte Bereiche der Webseite zu gewährleisten. Rechtsgrundlage für diese Cookies ist Art. 6 Abs. 1b DSGVO bzw. bei Drittstaaten Art. 49 Abs. 1b DSGVO.
+
+| Name   | Description                               | Expires / Max-Age | Location    |
+| ------ | ----------------------------------------- | ----------------- | ----------- |
+| Matomo | Webseitensicherheit, Webseitenoptimierung | 24 Stunden        | Deutschland |
+
+## 4. Wo finde ich die Informationen, die für mich wichtig sind?
+
+Dieser **Datenschutzinhinweis** gibt einen Überblick über die Punkte, die für die Verarbeitung deiner Daten auf diesem Webportal durch die Deutsche Telekom gelten. Weitere Informationen, auch zum Datenschutz im Allgemeinen oder in speziellen Produkten, erhältst du auf https://www.telekom.com/en/corporate-responsibility/data-protection-data-security/data-protection und unter http://www.telekom.de/datenschutzhinweise.
+
+## 5. Wer ist für die Datenverarbeitung verantwortlich? An wen muss ich mich wenden, wenn ich Fragen zum Datenschutz bei der Deutschen Telekom habe?
+
+Datenverantwortliche ist die Deutsche Telekom AG. Bei Fragen kontaktiere bitte unseren Kundenservice oder unseren Datenschutzbeauftragten, Dr. Claus D. Ulmer, Friedrich-Ebert-Allee 140, 53113 Bonn, datenschutz@telekom.de.
+
+## 6. Welche Rechte habe ich?
+
+Du hast das Recht,
+
+<ol type="a">
+    <li><b>Auskunft</b> zu verlangen zu Kategorien der verarbeiteten personenbezogenen Daten, Verarbeitungszwecken, etwaigen Empfängern der Daten und der geplanten Speicherdauer (Art. 15 DSGVO);</li>
+    <li>die <b>Berichtigung</b> bzw. Ergänzung unrichtiger oder unvollständiger Daten zu verlangen (Art. 16 DSGVO);</li>
+    <li>eine erteilte Einwilligung jederzeit mit Wirkung für die Zukunft <b>zu widerrufen</b> (Art. 7 Abs. 3 DSGVO);</li>
+    <li>einer Datenverarbeitung, die aufgrund eines berechtigten Interesses erfolgen soll, aus Gründen <b>zu widersprechen</b>, die sich aus deiner besonderen Situation ergeben (Art. 21 Abs. 1 DSGVO);</li>
+    <li>in bestimmten Fällen im Rahmen des Art. 17 DSGVO die <b>Löschung</b> von Daten zu verlangen – insbesondere soweit die Daten für den vorgesehenen Zweck nicht mehr erforderlich sind bzw. unrechtmäßig verarbeitet werden - oder du deine Einwilligung gemäß oben (c) widerrufen oder einen Widerspruch gemäß oben (d) erklärt hast;</li>
+    <li>unter bestimmten Voraussetzungen die <b>Einschränkung</b> der Verarbeitung zu verlangen, soweit eine Löschung nicht möglich bzw. die Löschpflicht streitig ist (Art. 18 DSGVO);</li>
+    <li>auf <b>Datenübertragbarkeit</b>, d. h. du kannst die Daten, die du uns bereitgestellt hast, in einem gängigen maschinenlesbaren Format wie z. B.  CSV erhalten und, soweit erforderlich, an Dritte übermitteln (Art. 20 DSGVO);</li>
+    <li>sich bei der zuständigen <b>Aufsichtsbehörde</b> über die Datenverarbeitung zu <b>beschweren</b> (für Telekommunikationsverträge: Bundesbeauftragte für den Datenschutz und die Informationsfreiheit; für alle übrigen: Landesbeauftragte für den Datenschutz und die Informationsfreiheit Nordrhein-Westfalen).</li>
+</ol>
+
+## 7. An wen gibt die Deutsche Telekom AG meine Daten weiter?
+
+Wir geben deine Daten ausschließlich **aufgrund gesetzlicher Verpflichtung** weiter: In bestimmen Fällen sind wir gesetzlich dazu verpflichtet, bestimmte Daten an die anfragende staatliche Stelle zu übermitteln.
+
+## 8. Wo werden meine Daten verarbeitet?
+
+Deine Daten werden in Deutschland und im europäischen Ausland verarbeitet. Findet eine Verarbeitung deiner Daten in Ausnahmefällen auch in Ländern außerhalb der Europäischen Union (in sog. Drittstaaten) statt, geschieht dies,
+
+<ol type="a">
+    <li>soweit du hierin ausdrücklich eingewilligt hast (Art. 49 Abs. 1a DSGVO). (In den meisten Ländern außerhalb der EU entspricht das Datenschutzniveau nicht den EU-Standards. Dies betrifft insbesondere umfassende Überwachungs- und Kontrollrechte staatliche Behörden – z. B. in den USA, die in den Datenschutz der europäischen Bürgerinnen und Bürger unverhältnismäßig eingreifen.),</li>
+    <li>oder soweit es für unsere Leistungserbringung dir gegenüber erforderlich ist (Art. 49 Abs. 1b DSGVO),</li>
+    <li>oder soweit es gesetzlich vorgesehen ist (Art. 49 Abs. 1c DSGVO).</li>
+</ol>
+
+Darüber hinaus erfolgt eine Verarbeitung deiner Daten in Drittstaaten nur, soweit durch bestimmte Maßnahmen sichergestellt ist, dass hierfür ein angemessenes Datenschutzniveau besteht (z. B. Angemessenheitsbeschluss der EU-Kommission oder sog. geeignete Garantien, Art. 44 ff. DSGVO).
+
+**© Deutsche Telekom AG – April 2022**