Pull request #67: EOA-5526: Add BICS theme to Colibri

Merge in DEV/colibri-docs from feature/EOA-5526_Add_BICS_Theme_CR to release/current

* commit '3e577bfee8dbd0137d01bafba7caa66880b7bb45':
  EOA-5526: updating 'default' to 'telesign' theme
  EOA-5526: Updating Pattern stories so they react correctly to theme changes
  EOA-5526: Adding BICS theme to our docs

Author: crojas-ts

.storybook/preview.ts

@@ -171,7 +171,7 @@ export const withThemeProvider: DecoratorFunction<WebComponentsRenderer> = (
   const body = document.querySelector('body.sb-show-main');
   if (!(body instanceof HTMLElement)) return story();
 
-  body.setAttribute('data-theme', theme || 'default');
+  body.setAttribute('data-theme', theme || 'telesign');
   return story();
 };
 
@@ -200,27 +200,27 @@ const preview: Preview = {
       storySort: {
         order: [
           'Welcome',
-          'Frameworks',
+          'Framework Integration',
           'Foundation',
           'Actions',
+          'Data Visualization',
           'Feedback',
-          'Images & Icons',
           'Forms',
+          'Helpers',
+          'Images & Icons',
           'Layouts',
           'Navigation',
           'Overlays',
-          'Titles & Texts',
-          'Data Visualization',
-          'Helpers',
           'Patterns',
+          'Titles & Texts',
         ],
       },
     },
     docs: {
       container: (props: any) => {
         const { theme } = props.context.store.userGlobals.globals;
         const body = document.querySelector('body');
-        body!.setAttribute('data-theme', theme.toLowerCase() ?? 'default');
+        body!.setAttribute('data-theme', theme.toLowerCase() ?? 'telesign');
 
         return createElement(DocsContainer, props);
       },
@@ -239,12 +239,13 @@ const preview: Preview = {
     theme: {
       name: 'Theme',
       description: 'Theme for Colibri components',
-      defaultValue: 'default',
+      defaultValue: 'telesign',
       toolbar: {
         icon: 'globe',
         items: [
-          { value: 'default', title: 'Theme: default' },
+          { value: 'telesign', title: 'Theme: Telesign' },
           { value: 'massive', title: 'Theme: Massive' },
+          { value: 'bics', title: 'Theme: BICS' },
         ],
         dynamicTitle: true,
       },

README.md

@@ -9,7 +9,7 @@ Our documentation system is built using Storybook, providing an interactive envi
 - [Overview](#overview)
 - [Getting Started](#getting-started)
 - [Documentation Structure](#documentation-structure)
-- [Writing Documentation](#writing-documentation) 
+- [Writing Documentation](#writing-documentation)
 - [Development](#development)
 - [Customization](#customization)
 - [Best Practices](#best-practices)
@@ -276,7 +276,7 @@ The system supports theme switching through the `data-theme` attribute:
 
 ```typescript
 decorators: [
-  (story, context) => html` <div data-theme=${context.args.mode || 'default'}>${story()}</div> `,
+  (story, context) => html` <div data-theme=${context.args.mode || 'telesign'}>${story()}</div> `,
 ];
 ```
 

src/_storybook/components/MainLogo/MainLogo.styles.ts

@@ -47,7 +47,7 @@ export const MainLogoStyles = css`
   }
 
   /* Theme-specific colors - set via JavaScript */
-  :host([data-current-theme='default']) {
+  :host([data-current-theme='telesign']) {
     --logo-telesign-color: #011ac2;
     --logo-primary-color: #ffffff; /* To be updated to the #011ac2 once UX/UI team fixes the tokens issue */
     --logo-dark-color: #ffffff;

src/_storybook/components/MainLogo/MainLogo.ts

@@ -54,7 +54,7 @@ export class MainLogo extends LitElement {
         return 'massive';
       case 'bics':
         return 'bics';
-      case 'default':
+      case 'telesign':
       default:
         return 'telesign';
     }
@@ -63,14 +63,14 @@ export class MainLogo extends LitElement {
   private _getThemeFromContext(): string {
     const storybook = document.querySelector('[data-theme]');
     if (storybook) {
-      return storybook.getAttribute('data-theme') || 'default';
+      return storybook.getAttribute('data-theme') || 'telesign';
     }
 
     const body = document.body;
     if (body.classList.contains('theme-massive')) return 'massive';
     if (body.classList.contains('theme-bics')) return 'bics';
 
-    return 'default';
+    return 'telesign';
   }
 
   private async _loadLogo(): Promise<void> {
@@ -158,7 +158,7 @@ export class MainLogo extends LitElement {
 
   private _getCurrentTheme(): string {
     const body = document.querySelector('body.sb-show-main');
-    return body?.getAttribute('data-theme') || 'default';
+    return body?.getAttribute('data-theme') || 'telesign';
   }
 
   private _observeThemeChanges(): void {