diff --git a/src/components/cc-addon-credentials/cc-addon-credentials.js b/src/components/cc-addon-credentials/cc-addon-credentials.js index 5817ce228..712b5e8f3 100644 --- a/src/components/cc-addon-credentials/cc-addon-credentials.js +++ b/src/components/cc-addon-credentials/cc-addon-credentials.js @@ -90,7 +90,7 @@ export class CcAddonCredentials extends LitElement { render () { return html` - +
${i18n('cc-addon-credentials.title', { name: this.name })}
${!this.error ? html` diff --git a/src/components/cc-block/cc-block.js b/src/components/cc-block/cc-block.js index 72008c5f4..2532e2d46 100644 --- a/src/components/cc-block/cc-block.js +++ b/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 ``. Icon is hidden if nullish. */ this.icon = null; + /** @type {string|null} Sets the icon before the title using a ``. 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`
+ ${this.image != null && this.icon == null ? html` + + ` : ''} ${this.icon != null ? html` - + ` : ''} ${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); diff --git a/src/components/cc-block/cc-block.stories.js b/src/components/cc-block/cc-block.stories.js index 48c72c596..3f37d43ab 100644 --- a/src/components/cc-block/cc-block.stories.js +++ b/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, }); diff --git a/src/components/cc-invoice/cc-invoice.js b/src/components/cc-invoice/cc-invoice.js index ef36b16c6..e8d4b2258 100644 --- a/src/components/cc-invoice/cc-invoice.js +++ b/src/components/cc-invoice/cc-invoice.js @@ -61,7 +61,7 @@ export class CcInvoice extends LitElement { const amount = invoice.total.amount; return html` - +
${i18n('cc-invoice.title')} ${number}
${!this.error ? html`
${ccLink(invoice.downloadUrl, i18n('cc-invoice.download-pdf'), skeleton)}