Prepare release (#2286)

packages/storybook-vue/.storybook/color-mode-switch-addon/register.js

@@ -20,6 +20,12 @@ const inactiveBtnClassName = 'css-am1h1h';
 const separatorClassName = 'css-14kbt3m';
 
 function switchMode(mode) {
+  const currentURL = window.location.href;
+  // avoid changing the mode for following pages (we use a scale component there and it's not working properly with dark mode)
+  if (currentURL.includes('/new-release-sketch-library-update') || currentURL.includes('setup-info-getting-started-for-designers')) {
+    mode = 'light';
+  }
+
   try {
     const previewIframe = document.querySelector('#storybook-preview-iframe');
     previewIframe.contentWindow.document.body.dataset.mode = mode;

packages/storybook-vue/public/fonts/scale-fonts-storybook.css

@@ -96,3 +96,7 @@
 .sbdocs-ol[type='a'] {
   list-style-type: lower-alpha;
 }
+
+.magenta {
+  color: var(--telekom-color-text-and-icon-primary-standard) !important;
+}

packages/storybook-vue/stories/Index.stories.mdx

@@ -15,7 +15,7 @@ import text_de from './Index_de.md';
             : 'Wilkommen beim Scale Design System';
         return (
           <DocsContainer context={context}>
-            <img src="assets/welcome.png" alt={alt} style={{ width: '100%' }} />
+
             {locale && (
               <Description markdown={locale === 'en' ? text_en : text_de} />
             )}

packages/storybook-vue/stories/Index_de.md

@@ -1,29 +1,73 @@
 <br/>
 
-### Scale ist das digitale Design System der Telekom
+<h1 class="magenta"> Wichtige Informationen für alle Nutzer*innen von Scale! </h1>
+<br/>
+<br/>
+<br/>
+
+### Wir, das Team, das das Scale Design System entwickelt hat, möchten einige spannende Neuigkeiten mit Euch teilen.
+
+Nach vielen Jahren, in denen Scale von einem sehr kleinen Team aufgebaut wurde, **haben wir nun die Möglichkeit, einen großen Schritt vorwärts zu machen.**
+
+Gemeinsam mit unserer internen Design-System-Community haben wir bestehende Lösungen mit führenden Design Systemen verglichen und Verbesserungsmöglichkeiten identifiziert, die wir mit diesem nächsten Schritt angehen werden. Nochmals herzlichen Dank an alle, die bisher daran beteiligt waren.
+
+**Wir freuen uns sehr, verkünden zu können, dass wir bereits mit der Arbeit an der nächsten Evolutionsstufe des Telekom Design Systems begonnen haben. Es ist darauf ausgerichtet, alle wichtigen kundenbezogenen Produkte der DT Gruppe in Europa zu unterstützen.**
+
+Ja, das ist ambitioniert, aber wir sind als Team gewachsen und glauben fest daran, dass wir es schaffen können.
+
+Mit diesem neuen Fokus müssen wir auch die Weiterentwicklung des Scale Design Systems denen überlassen, die bereits dazu beigetragen haben, es zu entwickeln: der Open-Source-Community. Obwohl wir leider nicht mehr unterstützen und keine neuen Komponenten mehr erstellen werden: Scale existiert weiter. Veröffentliche gerne Fixes und verbessere das solide Fundament, das wir gemeinsam geschaffen haben.
+
+Für Interessierte, die bisher mit Scale gearbeitet haben, werden wir den Übergang zur nächsten Evolutionsstufe des Design Systems so einfach wie möglich zu machen.
+
+Haben wir dein Interesse geweckt?
 
-Scale ist Teil von Brand & Design. Alle Komponenten sind markenkonform und helfen, ein kohärentes Markenerlebnis zu schaffen.
+Perfekt.
 
-### Code und Design für konsistente Produkte
+Weitere Details folgen.
 
-Das auf unserer Markenidentität basierende Designsystem hilft dir, konsistente Produkte zu entwickeln. So stärkst du die Marke Telekom.
+<br/>
+
+### Was sich jetzt ändert:
+
+Wir werden die Scale Design-Libraries in unseren Telekom Enterprise Workspace migrieren. Danach werden deine Produktdateien von der Library getrennt sein. Alle extern gespeicherten Telekomprojekte müssen ebenfalls in den Telekom Workspace migrieren. Sobald du dies getan hast, werden die Komponenten in den Produktdateien automatisch mit der Library verknüpft sein.
+
+Wenn du die Libraries in deinem Draft-Ordner sichtbar haben möchtest: Klicke unter Settings auf den Link "enable libraries for all files in your drafts". Aktiviere die benötigten Libraries und du findest sie in deinem Draft-Ordner.
+
+<br/>
 
-### Barrierefreiheit „out of the box“
+### Zugang zu den Scale Figma Libraries
 
-Die Komponenten von Scale erfüllen die technischen Anforderungen für das Level AA der Barrierefreiheit. Sie sind ebenso für kundenbezogene Produkte wie für interne Anwendungen geeignet.
+**Telekom Mitarbeiter**
 
-### Kompatibel mit den relevanten Frameworks und Design Tools
+Schritt 1: <br/>
+Richte dir ein Telekom Figma Enterprise Konto ein. [So geht’s](https://seu30.gdc-dmst01.t-systems.com/confluence/display/SETOOLSBETRIEB/Figma@DT+How+to+add+User).
 
-Die UI Libraries gibt es im Figma- und Sketchformat. Die Code Komponenten kannst du als reine Web-Komponenten oder in den Frameworks Vue, React und Angular verwenden.
+Schritt 2: <br/>
+Migriere deine Arbeitsdateien von einem externen Konto in unser Telekom Figma Konto, um die Bibliothek zu nutzen und die Komponenten wieder zu verbinden. Benötigst du Hilfe, wende dich an den <a href="mailto:[email protected]"> Telekom Figma Admin </a> oder sende ein Ticket an den [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233).
+
+Schritt 3: <br/>
+Nach der Migration der Dateien sind die enthaltenen Komponenten automatisch wieder mit der Scale Library in unserem Figma Workspace verbunden. Du kannst die Library auch wieder über das Library Panel aktivieren.
+
+Schritt 4: <br/>
+Lade externe Nutzer*innen zu den Dateien ein, indem du die Freigabefunktion in Figma nutzt. Externe Nutzer*innen benötigen Bearbeitungsrechte im Telekom Figma Workspace, um auf die Dateien zuzugreifen. Alle damit verbundenen Kosten werden der Projektkostenstelle in Rechnung gestellt.
+
+Hinweis: <br/>
+Alle internen Nutzer mit einer Telekom Figma Enterprise Lizenz können nach der Migration von Scale über den bestehenden Link auf die Datei zugreifen.
+
+<br/>
 
-### Für die beste User Experience
+**Externe Nutzer\*innen**
 
-Mit Scale sparst du Zeit – und zwar im gesamten Design- und Entwicklungsprozess: bei der Gestaltung von User Interfaces, beim Prototyping, der Design-Übergabe, der Frontend-Entwicklung und im Freigabeprozess mit Brand & Design. So bleibt mehr Zeit für spezifische Funktionen und Lösungen.
+Externe Nutzer\*innen können die Scale Libraries ausschließlich mit einem Telekom Figma Enterprise Account nutzen.
 
-### Flexibilität und Skalierbarkeit durch Design Tokens
+Schritt 1: <br/>
+Migriere deine Arbeitsdateien von einem externen Konto in unser Telekom Figma Konto, um die Bibliothek zu nutzen und die Komponenten wieder zu verbinden. Benötigst du Hilfe, wende dich an den <a href="mailto:[email protected]"> Telekom Figma Admin </a> oder sende ein Ticket an den [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233).
 
-Durch die Verwendung von Design Tokens ist Scale besonders anpassungsfähig. Änderungen und Erweiterungen lassen sich schnell umsetzen. Auch weitere Themes für bspw. Drittmarken sind schnell erstellt.
+Schritt 2: <br/>
+Nach der Migration deines Projektes solltest du dem Telekom Enterprise Account automatisch als Gast hinzugefügt werden. Sollte das nicht geschehen, kontaktiere deine Telekom internen Ansprechpartner im Projekt, um eine Einladung zu erhalten. Gib bitte unbedingt das Projekt an, an dem du arbeitest, und nenne den Namen eines internen Ansprechpartners.
 
-### Für bessere Kollaboration
+Schritt 3: <br/>
+Nach der Migration der Dateien sind die enthaltenen Komponenten automatisch wieder mit der Scale Library in unserem Figma Workspace verbunden. Du kannst die Library auch wieder über das Library Panel aktivieren.
 
-Ein Designsytsem fördert die Zusammenarbeit zwischen Teams und Stakeholdern. Es schafft eine gemeinsame Grundlage, auf die alle Beteiligten gemeinsam aufbauen können. Als Designer*in oder Entwickler*in kannst du dazu beitragen, Scale zu verbessern. Schicke uns deine neuen oder verbesserten Komponenten, um sie mit deinen Kolleg\*innen in Scale zu teilen.
+Hinweis: <br/>
+Alle externen Nutzer\*innen verlieren nach der Migration den Zugriff auf die Scale Libraries. Wenn du weiterhin Zugriff benötigst, <a href="mailto:[email protected]"> kontaktiere uns </a>, um eine Einladung zu erhalten. Gib bitte unbedingt das Projekt an, an dem du arbeitest, und nenne den Namen eines internen Ansprechpartners.

packages/storybook-vue/stories/Index_en.md

@@ -1,29 +1,73 @@
 <br/>
 
-### Scale is the Telekom Digital Design System
+<h1 class="magenta"> Important Information for all Users of Scale! </h1>
+<br/>
+<br/>
+<br/>
+
+### We, the team, that build the Scale Design System, want to share some exciting updates with you.
+
+After many years, where Scale has been built by a very small team, enabling others to build their products and prototypes, **we were given the opportunity to make a huge leap on the matter.**
+
+In collaboration with our internal design system community, we have assessed current solutions against leading design systems, identifying areas for improvement that we aim to address with this next step. Thanks again to everyone involved so far.
+
+**We could not be happier to announce that we already started working on the next evolution of the Telekom Design System, planned to support all major customer related products of DT Group in Europe.**
+
+Yes, this is ambitious, but we grew as a team and firmly believe we can do it. Bear with us.
+
+**With this new focus, we also must leave the Scale Design System evolution to those who already helped to grow it: The Open-Source Community.**
+
+While sadly, we are not able to provide support anymore and will not build new components, keep in mind Scale is alive and all well
+and can be used as is. Feel free to publish fixes and improve the solid foundation, we built. Even better, for those interested, since we are now working on a larger scale than ever before, we will try to enable an update path to the next evolution of the Design System.
+
+We made you curious?
 
-Scale is a part of Brand & Design. All components are brand compliant and help create a coherent brand experience.
+Perfect.
 
-### Code and design for consistent products
+Stay tuned, more details to follow.
 
-Based on our brand identity, the Scale design system helps you develop consistent products. This is how you contribute to strengthening the Telekom brand.
+<br/>
+
+### What is changing now:
+
+We’ll migrate the scale Figma libraries in our Telekom enterprise workspace. Afterward, your product files will be disconnected from the library. All Telekom projects stored externally have to migrate to the Telekom account as well. Once that’s done, the components will automatically link to the library.
+
+If you want to have the libraries visible in your draft folder: Click on the link “enable libraries for all files in your drafts” under settings. Activate the libraries you need and you will find them in your personal draft.
+
+<br/>
 
-### Accessibility out of the box
+### Access to Figma libraries
 
-Scale components meet the technical requirements for the accessibility level AA. They are just as suitable for customer-focused products as they are for internal use cases.
+**Telekom employees**
 
-### Compatible with the relevant framework and design tools
+Step 1: <br/>
+Get a Telekom Enterprise account [by following these instructions](https://seu30.gdc-dmst01.t-systems.com/confluence/display/SETOOLSBETRIEB/Figma@DT+How+to+add+User).
 
-The UI libraries are available in Figma and Sketch. You can use the code components as pure web components or in the framework for Vue, React, and Angular.
+Step 2: <br/>
+Migrate your working files from an external account into our Telekom Figma account in order to utilize the library and reconnect the components. Reach out to the <a href="mailto:[email protected]"> Telekom Figma Admin </a> for assistance, or submit a ticket to [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233).
+
+Step 3: <br/>
+After migrating the files, the components will automatically reconnect to the Scale library hosted in the Telekom Figma space. You have the option to enable the library in your files directly from the library panel.
+
+Step 4: <br/> Invite external collaborators to the files using the share feature in Figma. External collaborators will require edit rights in the Telekom Figma Account to collaborate, and any associated costs will be charged to the project cost center.
+
+Note: <br/>
+Scale Figma link: All internal employee with a Telekom Figma Enterprise License can access the file through the existing link after Scale migration.
+
+<br/>
 
-### For the best user experience
+**Externals**
 
-Scale saves you time throughout the entire design and development process: for the design of user interfaces, prototyping, design handover, front-end development, and in the approval process with Brand & Design. This leaves more time to create specific features and functionality.
+Externals can utilize the Scale library exclusively with a Telekom Figma Enterprise Account.
 
-### Flexibility and scalability through design tokens
+Step 1: <br/>
+Migrate your working files to your Telekom Figma account to utilize the library and reconnect the components. If you need assistance, contact your <a href="mailto:[email protected]"> Telekom Figma Admin </a> or submit a ticket to [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233).
 
-By including design tokens, Scale is particularly adaptable. Changes and additions can be implemented quickly. Other themes for third-party brands can also be created quickly.
+Step 2: <br/>
+Obtain a guest account with the Telekom Figma Enterprise Account. Typically, after migrating your project, all collaborators in the files are automatically added as guests to Telekom. If you do not yet have access to Telekom Figma, please contact your Telekom internal project contacts to get an invitation. Be sure to mention the project you are working on and provide the name of an internal contact person you are collaborating with.
 
-### For better collaboration
+Step 3: <br/>
+After migrating the files, the components will automatically reconnect to the Scale library hosted in the Telekom Figma space. You have the option to enable the library in your files directly from the library panel.
 
-A design system encourages collaboration between teams and stakeholders. It creates a common foundation on which everyone can build together. As a designer or developer, you can help improve Scale. Send us your new or improved components to share with your colleagues in Scale.
+Note: <br/>
+Scale Figma Link: All external collaborators will not be able to access the Scale Figma library file via the existing link after migration. If you require access to the file, please <a href="mailto:[email protected]"> get in touch with us</a> to be invited. Please ensure to specify the project you are involved in and provide the name of an internal contact person you are collaborating with.