feat(cc-addon-option): add icon property to receive an IconModel

CleverCloud · Jun 26, 2023 · b72e0b5 · b72e0b5
1 parent 205265d
commit b72e0b5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/src/components/cc-addon-option/cc-addon-option.js b/src/components/cc-addon-option/cc-addon-option.js
@@ -1,10 +1,14 @@
+import '../cc-icon/cc-icon.js';
 import '../cc-img/cc-img.js';
 import '../cc-toggle/cc-toggle.js';
 import { css, html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { dispatchCustomEvent } from '../../lib/events.js';
 import { i18n } from '../../lib/i18n.js';
 
+/**
+ * @typedef {import('../common.types.js').IconModel} IconModel
+ */
+
 /**
  * A component that allows to enable or disable an add-on option.
  *
@@ -23,6 +27,7 @@ export class CcAddonOption extends LitElement {
   static get properties () {
     return {
       enabled: { type: Boolean, reflect: true },
+      icon: { type: Object },
       logo: { type: String },
       title: { type: String },
     };
@@ -34,6 +39,9 @@ export class CcAddonOption extends LitElement {
     /** @type {boolean} Enable the option by default. */
     this.enabled = false;
 
+    /** @type {IconModel|null} The logo icon of the option. Has priority over the logo property. */
+    this.icon = null;
+
     /** @type {string|null} The logo URL of the option. */
     this.logo = null;
 
@@ -53,7 +61,12 @@ export class CcAddonOption extends LitElement {
     ];
 
     return html`
-      <cc-img class="logo" src=${ifDefined(this.logo ?? undefined)}></cc-img>
+      ${this.icon != null ? html`
+        <cc-icon class="icon" .icon=${this.icon}></cc-icon>
+      ` : ''}
+      ${this.logo != null && this.icon == null ? html`
+        <cc-img class="logo" src=${this.logo}></cc-img>
+      ` : ''}
       <div class="option-main">
         <div class="option-name">${this.title}</div>
         <slot class="option-details"></slot>
@@ -105,6 +118,11 @@ export class CcAddonOption extends LitElement {
           height: 1.6em;
           border-radius: var(--cc-border-radius-default, 0.25em);
         }
+        
+        .icon {
+          --cc-icon-color: #012a51;
+          --cc-icon-size: 28px;
+        }
 
         cc-toggle {
           margin-top: 0.5em;

diff --git a/src/components/cc-addon-option/cc-addon-option.stories.js b/src/components/cc-addon-option/cc-addon-option.stories.js
@@ -1,4 +1,5 @@
 import './cc-addon-option.js';
+import { iconRemixShieldKeyholeFill as iconEncryptionAtRest } from '../../assets/cc-remix.icons.js';
 import { makeStory } from '../../stories/lib/make-story.js';
 import { enhanceStoriesNames } from '../../stories/lib/story-names.js';
 
@@ -35,6 +36,17 @@ export const defaultStory = makeStory(conf, {
   ],
 });
 
+export const defaultWithIcon = makeStory(conf, {
+  items: [
+    {
+      ...optionExample,
+      icon: iconEncryptionAtRest,
+      logo: null,
+      innerHTML: htmlExample,
+    },
+  ],
+});
+
 export const defaultEnabled = makeStory(conf, {
   items: [
     {
@@ -47,5 +59,6 @@ export const defaultEnabled = makeStory(conf, {
 
 enhanceStoriesNames({
   defaultStory,
+  defaultWithIcon,
   defaultEnabled,
 });
diff --git a/src/components/common.types.d.ts b/src/components/common.types.d.ts
@@ -27,6 +27,7 @@ interface AddonProvider {
 interface AddonOption {
   name: string;
   enabled: boolean;
+  icon?: IconModel;
   // Option specific params
   flavor: Flavor; // for "apm" and "kibana" options
   price: number; // for "encryption" option