feat(cc-block)!: rename icon property to image and add icon pro…

…perty to receive an IconModel

BREAKING CHANGE: the `icon` property now requires an icon object instead of a URL.
If you want to pass a URL nevertheless, use the new `image` property instead.

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

@@ -90,7 +90,7 @@ export class CcAddonCredentials extends LitElement {
 
   render () {
     return html`
-      <cc-block icon=${ifDefined(this.icon ?? undefined)} state=${this.toggleState}>
+      <cc-block image=${ifDefined(this.icon ?? undefined)} state=${this.toggleState}>
         <div slot="title">${i18n('cc-addon-credentials.title', { name: this.name })}</div>
 
         ${!this.error ? html`

src/components/cc-block/cc-block.js

@@ -1,5 +1,6 @@
 import '../cc-button/cc-button.js';
 import '../cc-expand/cc-expand.js';
+import '../cc-icon/cc-icon.js';
 import '../cc-img/cc-img.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
@@ -9,6 +10,7 @@ const downSvg = new URL('../../assets/down.svg', import.meta.url).href;
 const upSvg = new URL('../../assets/up.svg', import.meta.url).href;
 
 /**
+ * @typedef {import('../common.types.js').IconModel} IconModel
  * @typedef {import('../common.types.js').ToggleStateType} ToggleStateType
  */
 
@@ -30,7 +32,8 @@ export class CcBlock extends LitElement {
 
   static get properties () {
     return {
-      icon: { type: String },
+      icon: { type: Object },
+      image: { type: String },
       noHead: { type: Boolean, attribute: 'no-head', reflect: true },
       ribbon: { type: String, reflect: true },
       state: { type: String, reflect: true },
@@ -41,9 +44,12 @@ export class CcBlock extends LitElement {
   constructor () {
     super();
 
-    /** @type {string|null} Sets the URL of the image before the title. Icon is hidden if nullish. */
+    /** @type {IconModel|null} Sets the icon before the title using a `<cc-icon>`. Icon is hidden if nullish. */
     this.icon = null;
 
+    /** @type {string|null} Sets the icon before the title using a `<cc-img>`. Icon is hidden if nullish. Property will be ignored if `icon` property is already set. */
+    this.image = null;
+
     /** @type {boolean} Hides the head section. */
     this.noHead = false;
 
@@ -81,8 +87,11 @@ export class CcBlock extends LitElement {
       
       ${!this.noHead ? html`
         <div class="head" @click=${this._clickToggle}>
+          ${this.image != null && this.icon == null ? html`
+            <cc-img src="${this.image}"></cc-img>
+          ` : ''}
           ${this.icon != null ? html`
-            <cc-img src="${this.icon}"></cc-img>
+            <cc-icon size="lg" .icon=${this.icon}></cc-icon>
           ` : ''}
           <slot name="title"></slot>
           ${isToggleEnabled ? html`
@@ -158,6 +167,11 @@ export class CcBlock extends LitElement {
           border-radius: var(--cc-border-radius-default, 0.25em);
         }
 
+        cc-icon {
+          align-self: flex-start;
+          margin-right: 1em;
+        }
+
         ::slotted([slot='title']) {
           flex: 1 1 0;
           color: var(--cc-color-text-primary-strongest);

src/components/cc-block/cc-block.stories.js

@@ -2,6 +2,7 @@ import '../cc-button/cc-button.js';
 import '../cc-input-text/cc-input-text.js';
 import '../cc-loader/cc-loader.js';
 import './cc-block.js';
+import { iconRemixInformationFill as iconInfo } from '../../assets/cc-remix.icons.js';
 import { makeStory } from '../../stories/lib/make-story.js';
 import { enhanceStoriesNames } from '../../stories/lib/story-names.js';
 
@@ -52,9 +53,27 @@ export const overlayWithErrorAlert = makeStory(conf, {
   }],
 });
 
+export const image = makeStory(conf, {
+  items: [{
+    image: 'https://assets.clever-cloud.com/logos/nodejs.svg',
+    innerHTML: htmlExample,
+  }],
+});
+
 export const icon = makeStory(conf, {
   items: [{
-    icon: 'https://assets.clever-cloud.com/logos/nodejs.svg',
+    icon: iconInfo,
+    innerHTML: htmlExample,
+  }],
+});
+
+export const imageAndIcon = makeStory(conf, {
+  docs: `
+If you set both \`image\` and \`icon\` properties, the \`image\` property will be ignored:
+  `,
+  items: [{
+    image: 'https://assets.clever-cloud.com/logos/nodejs.svg',
+    icon: iconInfo,
     innerHTML: htmlExample,
   }],
 });
@@ -139,9 +158,17 @@ export const stateWithOverflow = makeStory(conf, {
   }],
 });
 
+export const imageAndOpen = makeStory(conf, {
+  items: [{
+    image: 'https://assets.clever-cloud.com/logos/nodejs.svg',
+    innerHTML: htmlExample,
+    state: 'open',
+  }],
+});
+
 export const iconAndOpen = makeStory(conf, {
   items: [{
-    icon: 'https://assets.clever-cloud.com/logos/nodejs.svg',
+    icon: iconInfo,
     innerHTML: htmlExample,
     state: 'open',
   }],
@@ -151,7 +178,9 @@ enhanceStoriesNames({
   defaultStory,
   overlayWithLoader,
   overlayWithErrorAlert,
+  image,
   icon,
+  imageAndIcon,
   button,
   noHead,
   ribbon,
@@ -160,5 +189,6 @@ enhanceStoriesNames({
   stateWithOpen,
   stateWithClose,
   stateWithOverflow,
+  imageAndOpen,
   iconAndOpen,
 });

src/components/cc-invoice/cc-invoice.js

@@ -61,7 +61,7 @@ export class CcInvoice extends LitElement {
     const amount = invoice.total.amount;
 
     return html`
-      <cc-block icon=${fileSvg} class=${classMap({ 'has-errors': this.error })}>
+      <cc-block image=${fileSvg} class=${classMap({ 'has-errors': this.error })}>
         <div slot="title">${i18n('cc-invoice.title')} ${number}</div>
         ${!this.error ? html`
           <div slot="button">${ccLink(invoice.downloadUrl, i18n('cc-invoice.download-pdf'), skeleton)}</div>