diff --git a/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-highlighted-value-block-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-highlighted-value-block-1-snap.png index 662a43fc70..997d7cf010 100644 Binary files a/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-highlighted-value-block-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-highlighted-value-block-1-snap.png differ diff --git a/src/community/__stories__/blocks-story.tsx b/src/community/__stories__/blocks-story.tsx index 82fdeee26b..328d4b7edf 100644 --- a/src/community/__stories__/blocks-story.tsx +++ b/src/community/__stories__/blocks-story.tsx @@ -133,8 +133,10 @@ type HighlightedValueBlockArgs = { secondaryValue: string; + pretitle: string; title: string; description: string; + strikedValue: string; }; export const BlockHighlightedValue: StoryComponent = ({ @@ -143,16 +145,20 @@ export const BlockHighlightedValue: StoryComponent = value, text, secondaryValue, + pretitle, title, description, + strikedValue, }) => { return ( {headline}} + pretitle={pretitle} title={title} description={description} + strikedValue={strikedValue} headings={[ {value, text}, {value: secondaryValue, valueColor: vars.colors.textSecondary}, @@ -167,8 +173,10 @@ BlockHighlightedValue.storyName = 'HighlightedValueBlock'; BlockHighlightedValue.args = { headline: 'Priority', headlineType: 'promo', - text: 'text', + pretitle: 'Pretitle', + strikedValue: 'striked Value', value: '20', + text: 'text', secondaryValue: '20', title: 'title', description: 'description', diff --git a/src/community/blocks.tsx b/src/community/blocks.tsx index 30830bc7a4..3352f62e91 100644 --- a/src/community/blocks.tsx +++ b/src/community/blocks.tsx @@ -160,7 +160,9 @@ interface HighlightedValueBlockProps { headline?: RendersNullableElement; headings?: ReadonlyArray; title?: string; + pretitle?: string; description?: ReadonlyArray | string; + strikedValue?: string; 'aria-label'?: string; } @@ -168,13 +170,22 @@ export const HighlightedValueBlock = ({ headline, headings, title, + pretitle, description, + strikedValue, 'aria-label': ariaLabel, }: HighlightedValueBlockProps): JSX.Element => { return (
{headline && {headline}} - + + {pretitle && {pretitle}} + {strikedValue && ( + + {strikedValue} + + )} + {headings && ( {headings.map((heading, index) => (