feat(cc-invoice-list): move doc link into cc-block footer slot

CleverCloud · Oct 18, 2024 · ff67820 · ff67820
1 parent 2925166
commit ff67820
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/src/components/cc-invoice-list/cc-invoice-list.js b/src/components/cc-invoice-list/cc-invoice-list.js
@@ -1,6 +1,8 @@
 import { css, html, LitElement } from 'lit';
+import { iconRemixInformationFill as iconInfo } from '../../assets/cc-remix.icons.js';
 import { ResizeController } from '../../controllers/resize-controller.js';
 import { sortBy, unique } from '../../lib/utils.js';
+import { ccLink, linkStyles } from '../../templates/cc-link/cc-link.js';
 import { i18n } from '../../translations/translation.js';
 import '../cc-block-section/cc-block-section.js';
 import '../cc-block/cc-block.js';
@@ -11,6 +13,7 @@ import '../cc-select/cc-select.js';
 import '../cc-toggle/cc-toggle.js';
 
 const BREAKPOINTS = [520];
+const INVOICE_DOCUMENTATION = 'https://developers.clever-cloud.com/doc/billing/unified-invoices/';
 
 /**
  * @param {string} dateString
@@ -75,18 +78,18 @@ export class CcInvoiceList extends LitElement {
   render() {
     if (this.state.type === 'error') {
       return this._renderView(html`
-        <cc-notice intent="warning" message="${i18n('cc-invoice-list.error')}"></cc-notice>
+        <cc-notice slot="content" intent="warning" message="${i18n('cc-invoice-list.error')}"></cc-notice>
       `);
     }
 
     if (this.state.type === 'loading') {
       return this._renderView(html`
-        <cc-block-section>
+        <cc-block-section slot="content">
           <div slot="title">${i18n('cc-invoice-list.pending')}</div>
           <cc-invoice-table></cc-invoice-table>
         </cc-block-section>
 
-        <cc-block-section>
+        <cc-block-section slot="content">
           <div slot="title">${i18n('cc-invoice-list.processed')}</div>
           <cc-invoice-table></cc-invoice-table>
         </cc-block-section>
@@ -122,7 +125,7 @@ export class CcInvoiceList extends LitElement {
     const hasYearSelector = filteredProcessedInvoiceTableState.invoices.length > 0 && yearChoices.length > 1;
 
     return this._renderView(html`
-      <cc-block-section>
+      <cc-block-section slot="content">
         <div slot="title">${i18n('cc-invoice-list.pending')}</div>
         ${pendingInvoicesTableState.invoices.length > 0
           ? html` <cc-invoice-table .state=${pendingInvoicesTableState}></cc-invoice-table> `
@@ -134,14 +137,14 @@ export class CcInvoiceList extends LitElement {
 
       ${processingInvoicesTableState.invoices.length > 0
         ? html`
-            <cc-block-section>
+            <cc-block-section slot="content">
               <div slot="title">${i18n('cc-invoice-list.processing')}</div>
               <cc-invoice-table .state=${processingInvoicesTableState}></cc-invoice-table>
             </cc-block-section>
           `
         : ''}
 
-      <cc-block-section>
+      <cc-block-section slot="content">
         <div slot="title">${i18n('cc-invoice-list.processed')}</div>
         ${hasYearSelector
           ? html`
@@ -178,14 +181,21 @@ export class CcInvoiceList extends LitElement {
   _renderView(content) {
     return html`
       <cc-block>
-        <div slot="title">${i18n('cc-invoice-list.title')}</div>
+        <div slot="header-title">${i18n('cc-invoice-list.title')}</div>
         ${content}
+        <div slot="footer-right">
+          ${ccLink(
+            `${INVOICE_DOCUMENTATION}`,
+            html`<cc-icon .icon="${iconInfo}"></cc-icon> ${i18n('cc-invoice-list.documentation.text')}`,
+          )}
+        </div>
       </cc-block>
     `;
   }
 
   static get styles() {
     return [
+      linkStyles,
       // language=CSS
       css`
         :host {
@@ -212,6 +222,12 @@ export class CcInvoiceList extends LitElement {
           color: var(--cc-color-text-weak);
           font-style: italic;
         }
+
+        [slot='footer-right'] .cc-link {
+          align-items: center;
+          display: flex;
+          gap: 0.5em;
+        }
       `,
     ];
   }

diff --git a/src/translations/translations.en.js b/src/translations/translations.en.js
@@ -625,6 +625,7 @@ export const translations = {
   'cc-invoice.title': `Invoice`,
   //#endregion
   //#region cc-invoice-list
+  'cc-invoice-list.documentation.text': `Clever Cloud billing - Documentation`,
   'cc-invoice-list.error': `An error occured while loading invoices.`,
   'cc-invoice-list.pending': `Pending invoices`,
   'cc-invoice-list.pending.no-invoices': `No pending invoices at the moment.`,

diff --git a/src/translations/translations.fr.js b/src/translations/translations.fr.js
@@ -637,6 +637,7 @@ export const translations = {
   'cc-invoice.title': `Facture`,
   //#endregion
   //#region cc-invoice-list
+  'cc-invoice-list.documentation.text': `Facturation chez Clever Cloud - Documentation`,
   'cc-invoice-list.error': `Une erreur est survenue pendant le chargement des factures.`,
   'cc-invoice-list.pending': `Factures en attente de paiement`,
   'cc-invoice-list.pending.no-invoices': `Il n'y a aucune facture en attente de paiement pour le moment.`,