From f8574f92b28e2df3a2b989ba4a08f5ab5a909316 Mon Sep 17 00:00:00 2001
From: Galimede <mat.degand@outlook.fr>
Date: Wed, 5 Apr 2023 15:12:48 +0200
Subject: [PATCH] feat(cc-header-addon): make use of the cc-notice instead of
 cc-error

---
 src/components/cc-header-addon/cc-header-addon.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/cc-header-addon/cc-header-addon.js b/src/components/cc-header-addon/cc-header-addon.js
index 16aedf40b..6b786ae99 100644
--- a/src/components/cc-header-addon/cc-header-addon.js
+++ b/src/components/cc-header-addon/cc-header-addon.js
@@ -1,6 +1,6 @@
 import '../cc-img/cc-img.js';
 import '../cc-input-text/cc-input-text.js';
-import '../cc-error/cc-error.js';
+import '../cc-notice/cc-notice.js';
 import '../cc-zone/cc-zone.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
@@ -39,7 +39,7 @@ export class CcHeaderAddon extends LitElement {
   static get properties () {
     return {
       addon: { type: Object },
-      error: { type: Boolean },
+      error: { type: Boolean, reflect: true },
       noVersion: { type: Boolean, attribute: 'no-version' },
       version: { type: String },
       zone: { type: Object },
@@ -114,7 +114,7 @@ export class CcHeaderAddon extends LitElement {
       ` : ''}
 
       ${this.error ? html`
-        <cc-error></img>${i18n('cc-header-addon.error')}</cc-error>
+        <cc-notice intent="warning" message="${i18n('cc-header-addon.error')}"></cc-notice>
       ` : ''}
     `;
   }
@@ -133,6 +133,10 @@ export class CcHeaderAddon extends LitElement {
           background-color: var(--cc-color-bg-default, #fff);
           border-radius: var(--cc-border-radius-default, 0.25em);
         }
+        
+        :host([error]) {
+          border: none;
+        }
 
         .main {
           display: flex;
@@ -182,11 +186,6 @@ export class CcHeaderAddon extends LitElement {
           font-weight: bold;
         }
 
-        cc-error {
-          padding: var(--cc-gap);
-          text-align: center;
-        }
-
         .messages {
           display: flex;
           box-sizing: border-box;