feat(cc-addon-credentials-beta): allow specifying one docLink per tab

- Tabs are now objects with `content` and `docLink` properties instead of arrays,
- The `content` property contains the credentials,
- The `docLink` prop has been removed from the component API.

Author: florian-sanders-cc

src/components/cc-addon-credentials-beta/cc-addon-credentials-beta.js

@@ -1,5 +1,6 @@
 import { LitElement, css, html } from 'lit';
 import { iconRemixInformationFill as iconInfo } from '../../assets/cc-remix.icons.js';
+import { fakeString } from '../../lib/fake-strings.js';
 import { i18n } from '../../translations/translation.js';
 import '../cc-addon-credentials-content/cc-addon-credentials-content.js';
 import '../cc-block-details/cc-block-details.js';
@@ -34,7 +35,6 @@ import '../cc-toggle/cc-toggle.js';
 export class CcAddonCredentialsBeta extends LitElement {
   static get properties() {
     return {
-      docLink: { type: Object, attribute: 'doc-link' },
       state: { type: Object },
       _selectedTabName: { type: String, state: true },
     };
@@ -43,11 +43,16 @@ export class CcAddonCredentialsBeta extends LitElement {
   constructor() {
     super();
 
-    /** @type {{ text: string; href: string; }} */
-    this.docLink = null;
-
     /** @type {AddonCredentialsBetaState} */
-    this.state = { type: 'loading', tabs: { default: [] } };
+    this.state = {
+      type: 'loading',
+      tabs: {
+        default: {
+          content: [],
+          docLink: { text: fakeString(10), href: null },
+        },
+      },
+    };
 
     /** @type {TabName} */
     this._selectedTabName = 'default';
@@ -108,7 +113,7 @@ export class CcAddonCredentialsBeta extends LitElement {
     const skeleton = this.state.type === 'loading';
     const tabNames = /** @type {TabName[]} */ (Object.keys(this.state.tabs));
     const toggleChoices = this._getToggleChoices(tabNames);
-    const activeTabContent = this.state.tabs[this._selectedTabName] ?? Object.values(this.state.tabs)[0];
+    const activeTab = this.state.tabs[this._selectedTabName] ?? Object.values(this.state.tabs)[0];
 
     return html`
       <cc-block>
@@ -127,19 +132,15 @@ export class CcAddonCredentialsBeta extends LitElement {
         ${this.state.type === 'loaded' || this.state.type === 'loading'
           ? html`
               <cc-addon-credentials-content
-                .credentials="${activeTabContent}"
+                .credentials="${activeTab.content}"
                 .skeleton="${skeleton}"
                 slot="content"
               ></cc-addon-credentials-content>
             `
           : ''}
-        ${this.docLink != null
-          ? html`
-              <div slot="footer-right">
-                <cc-link .href="${this.docLink?.href}" .icon="${iconInfo}"> ${this.docLink.text} </cc-link>
-              </div>
-            `
-          : ''}
+        <div slot="footer-right">
+          <cc-link .href="${activeTab.docLink.href}" .icon="${iconInfo}">${activeTab.docLink.text}</cc-link>
+        </div>
       </cc-block>
     `;
   }