fix(documentation): fix about and legal

siemens · Oct 18, 2022 · f393f6e · f393f6e
1 parent 174c49b
commit f393f6e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -99,6 +99,7 @@ export default function Color() {
             <tr key={k}>
               <td>
                 <input
+                  readOnly
                   className="form-control"
                   defaultValue={k}
                   ref={refs[k]}