From f393f6e7e876ea67192fbbac0cb8399d9c90ff9a Mon Sep 17 00:00:00 2001
From: goncalosard <innsiiiider@hotmail.com>
Date: Wed, 12 Oct 2022 11:33:07 +0100
Subject: [PATCH] fix(documentation): fix about and legal

---
 .../src/components/menu-about/menu-about.tsx  | 29 +++++++++++++------
 .../core/src/components/menu-about/readme.md  |  2 +-
 .../controls/navigation/about-and-legal.md    |  2 +-
 .../documentation/src/components/Color.tsx    |  1 +
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/components/menu-about/menu-about.tsx b/packages/core/src/components/menu-about/menu-about.tsx
index ba09159118..839c9eb279 100644
--- a/packages/core/src/components/menu-about/menu-about.tsx
+++ b/packages/core/src/components/menu-about/menu-about.tsx
@@ -34,8 +34,7 @@ export class MenuAbout {
   /**
    * Active tab
    */
-  @Prop({ mutable: true, reflect: true }) activeTabLabel: string =
-    this.i18nImprintLabel;
+   @Prop({ mutable: true }) activeTabLabel: string;
 
   /**
    * Label of first tab
@@ -71,11 +70,12 @@ export class MenuAbout {
   }
 
   componentWillLoad() {
-    this.setTab(this.activeTabLabel || this.aboutItems[0]?.label);
+    if (this.aboutItems.length) {
+      this.setTab(this.activeTabLabel || this.aboutItems[0].label);
+    }
   }
 
   componentDidLoad() {
-    this.setTab(this.activeTabLabel || this.aboutItems[0]?.label);
     forceUpdate(this.el);
   }
 
@@ -98,6 +98,21 @@ export class MenuAbout {
     return this.aboutItems.indexOf(selectedItem);
   }
 
+  private getTabItems() {
+    return this.aboutItems.map(({ label }) => {
+      return (
+        <ix-tab-item
+          class={{
+            active: label === this.activeTabLabel,
+          }}
+          onClick={() => this.setTab(label)}
+        >
+          {label}
+        </ix-tab-item>
+      );
+    });
+  }
+
   render() {
     return (
       <Host
@@ -120,11 +135,7 @@ export class MenuAbout {
           selected={this.getSelectedTabIndex(this.activeTabLabel)}
           class="about-tabs"
         >
-          {this.labels.map((label) => (
-            <ix-tab-item onClick={() => this.setTab(label)}>
-              {label}
-            </ix-tab-item>
-          ))}
+          {this.getTabItems()}
         </ix-tabs>
         <div class="about-items">
           <slot></slot>
diff --git a/packages/core/src/components/menu-about/readme.md b/packages/core/src/components/menu-about/readme.md
index 9770f14819..e742dabe48 100644
--- a/packages/core/src/components/menu-about/readme.md
+++ b/packages/core/src/components/menu-about/readme.md
@@ -13,7 +13,7 @@ SPDX-License-Identifier: MIT
 
 | Property           | Attribute              | Description        | Type      | Default                       |
 | ------------------ | ---------------------- | ------------------ | --------- | ----------------------------- |
-| `activeTabLabel`   | `active-tab-label`     | Active tab         | `string`  | `this.i18nImprintLabel`       |
+| `activeTabLabel`   | `active-tab-label`     | Active tab         | `string`  | `undefined`                   |
 | `i18nImprintLabel` | `i-1-8n-imprint-label` |                    | `string`  | `'Imprint'`                   |
 | `label`            | `label`                | Label of first tab | `string`  | `'About & legal information'` |
 | `show`             | `show`                 | Internal           | `boolean` | `false`                       |
diff --git a/packages/documentation/docs/controls/navigation/about-and-legal.md b/packages/documentation/docs/controls/navigation/about-and-legal.md
index 07ec5d22f5..4daba806c1 100644
--- a/packages/documentation/docs/controls/navigation/about-and-legal.md
+++ b/packages/documentation/docs/controls/navigation/about-and-legal.md
@@ -16,7 +16,7 @@ import SourceAngular from './../../auto-generated/previews/angular/about-and-leg
 
 ## Usage
 
-<Preview name="about-and-legal" height="30rem">
+<Preview name="about-and-legal" height="30rem" width="100%" noMargin>
   <TabItem value="javascript">
     <SourceWebComponent />
   </TabItem>
diff --git a/packages/documentation/src/components/Color.tsx b/packages/documentation/src/components/Color.tsx
index f703a68f74..256d34bc46 100644
--- a/packages/documentation/src/components/Color.tsx
+++ b/packages/documentation/src/components/Color.tsx
@@ -99,6 +99,7 @@ export default function Color() {
             <tr key={k}>
               <td>
                 <input
+                  readOnly
                   className="form-control"
                   defaultValue={k}
                   ref={refs[k]}