refactor(preact-components-price): wrap price symbol in a label for s…

…tyling
searchspring · Jun 20, 2024 · b85bc84 · b85bc84
1 parent a7a5fa0
commit b85bc84
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/snap-preact-components/src/components/Atoms/Price/Price.test.tsx b/packages/snap-preact-components/src/components/Atoms/Price/Price.test.tsx
@@ -43,8 +43,13 @@ describe('Price Component', () => {
 		};
 		const rendered = render(<Price {...args} />);
 		const priceElement = rendered.container.querySelector('.ss__price');
+		const symbolElement = rendered.container.querySelector('.ss__price__symbol');
+
 		const priceText = priceElement?.textContent;
 		expect(priceText).toBe('1.099.99 £');
+
+		expect(symbolElement).toBeDefined();
+		expect(symbolElement?.textContent).toBe(args.symbol);
 	});
 
 	it('renders with additional style using prop', () => {

diff --git a/packages/snap-preact-components/src/components/Atoms/Price/Price.tsx b/packages/snap-preact-components/src/components/Atoms/Price/Price.tsx
@@ -56,12 +56,11 @@ export function Price(properties: PriceProps): JSX.Element {
 	} = props;
 
 	const formattedPrice = filters.currency(+value, {
-		symbol,
+		symbol: '',
 		decimalPlaces,
 		padDecimalPlaces,
 		thousandsSeparator,
 		decimalSeparator,
-		symbolAfter,
 	});
 
 	const styling: { css?: StylingCSS } = {};
@@ -76,7 +75,9 @@ export function Price(properties: PriceProps): JSX.Element {
 	) : (
 		<CacheProvider>
 			<span {...styling} className={classnames('ss__price', { 'ss__price--strike': lineThrough }, className)}>
+				{symbol && !symbolAfter ? <label className={'ss__price__symbol'}>{symbol}</label> : <></>}
 				{formattedPrice}
+				{symbol && symbolAfter ? <label className={'ss__price__symbol'}>{symbol}</label> : <></>}
 			</span>
 		</CacheProvider>
 	);