diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js index 321e7b5b7..91cb45c09 100644 --- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js +++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js @@ -15,7 +15,7 @@ * * SPDX-License-Identifier: Apache-2.0 */ - +import lng from '@lightningjs/core'; import Icon from '../Icon'; import Badge from '../Badge'; import { parseInlineContent, flatten, measureTextWidth } from '../../utils'; @@ -89,8 +89,6 @@ export default class InlineContent extends Base { const base = { flexItem: { ...this.contentProperties, - // apply contentProperties object props first if those are defined - // otherwise will use the style props marginBottom: isLast ? 0 : this._marginBottom, marginRight: isLast ? 0 @@ -101,7 +99,14 @@ export default class InlineContent extends Base { // text not separated by icons/badges are grouped together if (isText(item)) { const nextItem = this._parsedContent[index + 1]; - if (nextItem && isText(nextItem)) { + if ( + (nextItem && isText(nextItem)) || + (this.contentWrap && + nextItem && + nextItem.newline && + this._parsedContent[index + 2] && + isText(this._parsedContent[index + 2])) + ) { base.flexItem.marginRight = 0; } this.childList.a(this._createText(base, item)); @@ -346,8 +351,7 @@ export default class InlineContent extends Base { typeof text.style === 'string' ? this.customStyleMappings[text.style] : text.style; - - return { + const textComponent = { ...base, y: this.textY !== undefined ? this.textY : this.style.textY, h: @@ -360,6 +364,31 @@ export default class InlineContent extends Base { text: text.text || text } }; + if (textOverrideStyles?.textDecoration === 'line-through') { + const textWidth = measureTextWidth({ + ...this.style.textStyle, + ...textOverrideStyles, + text: text.text || text + }); + const strikethroughLine = { + rect: true, + w: textWidth, + color: + this.style.strikethroughColor || + textOverrideStyles?.textColor || + this.style.textStyle.textColor, + h: textComponent.h * this.style.strikethroughRatio, + y: textComponent.h / 2, + mountY: 1 + }; + return { + type: lng.Component, + w: textWidth + textComponent.flexItem.marginRight, + h: textComponent.h, + children: [{ ...textComponent }, { ...strikethroughLine }] + }; + } + return textComponent; } _createBadge(base, badge) { @@ -508,6 +537,9 @@ export default class InlineContent extends Base { announce += item.announce; } else if (item.text) { announce += item.text; + if (item.style?.textDecoration === 'line-through') { + announce += 'strikethrough'; + } } else if (item.title) { announce += item.title; } else if (item.badge) { diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.stories.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.stories.js index 1f42d1e74..51146b877 100644 --- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.stories.js +++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.stories.js @@ -231,3 +231,29 @@ WithTruncation.args = { maxLines: 2, maxLinesSuffix: '...' }; + +export const WithStrikeThrough = args => + class WithParsing extends lng.Component { + static _template() { + return { + InlineContent: { + type: InlineContentComponent, + x: 550, + w: 400, + contentWrap: args.contentWrap, + contentProperties: args.contentProperties, + justify: args.justify, + content: [ + 'Rent', + { newline: true }, + { + text: '$19.99', + style: { textDecoration: 'line-through' } + }, + { newline: true }, + '$12.99' + ] + } + }; + } + }; diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.styles.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.styles.js index a22831256..9287060ab 100644 --- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.styles.js +++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.styles.js @@ -22,6 +22,8 @@ export const base = theme => ({ iconHeight: theme.spacer.xxl + theme.spacer.xs, contentSpacing: theme.spacer.md, marginBottom: 0, + strikethroughRatio: 0.08, + strikethroughColor: theme.color.textNeutral, textStyle: { ...theme.typography.body1 },