feat(components): added props to toggle parentheses in variantSelecti…

packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx

@@ -72,6 +72,17 @@ export default {
 			},
 			control: { type: 'boolean' },
 		},
+		hideCountParenthesis: {
+			defaultValue: false,
+			description: 'Hide facet option count parenthesis',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				defaultValue: { summary: false },
+			},
+			control: { type: 'boolean' },
+		},
 		previewOnFocus: {
 			description: 'Invoke facet value preview upon focus',
 			table: {

packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.test.tsx

@@ -70,6 +70,21 @@ describe('ListValue Component hiding checkbox and count', () => {
 });
 
 describe('FacetListOptions generic props work', () => {
+	it('can hide count parenthesis', () => {
+		const rendered = render(<FacetListOptions values={listFacetMock.values as FacetValue[]} hideCountParenthesis={true} />);
+
+		const listOption = rendered.container.querySelectorAll('.ss__facet-list-options__option');
+
+		expect(listOption).toHaveLength(listFacetMock.values!.length);
+
+		expect(listOption[0]).toHaveTextContent(listFacetMock.values![0].label!);
+
+		const optionCount = listOption[0].querySelector('.ss__facet-list-options__option__value__count');
+		expect(optionCount).toHaveTextContent(listFacetMock.values![0].count!.toString());
+		expect(optionCount).not.toHaveTextContent('(');
+		expect(optionCount).not.toHaveTextContent(')');
+	});
+
 	it('can disable styling', () => {
 		const rendered = render(<FacetListOptions values={listFacetMock.values as FacetValue[]} disableStyles={true} />);
 

packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.tsx

@@ -52,7 +52,8 @@ export const FacetListOptions = observer((properties: FacetListOptionsProps): JS
 		...properties.theme?.components?.facetListOptions,
 	};
 
-	const { values, hideCheckbox, hideCount, onClick, previewOnFocus, valueProps, facet, disableStyles, className, style } = props;
+	const { values, hideCheckbox, hideCount, hideCountParenthesis, onClick, previewOnFocus, valueProps, facet, disableStyles, className, style } =
+		props;
 
 	const subProps: FacetListOptionsSubProps = {
 		checkbox: {
@@ -102,7 +103,9 @@ export const FacetListOptions = observer((properties: FacetListOptionsProps): JS
 						{!hideCheckbox && <Checkbox {...subProps.checkbox} checked={value.filtered} disableA11y={true} />}
 						<span className="ss__facet-list-options__option__value">
 							{value.label}
-							{!hideCount && value?.count > 0 && <span className="ss__facet-list-options__option__value__count">({value.count})</span>}
+							{!hideCount && value?.count > 0 && (
+								<span className="ss__facet-list-options__option__value__count">{hideCountParenthesis ? `${value.count}` : `(${value.count})`}</span>
+							)}
 						</span>
 					</a>
 				))}
@@ -117,6 +120,7 @@ export interface FacetListOptionsProps extends ComponentProps {
 	values?: FacetValue[];
 	hideCheckbox?: boolean;
 	hideCount?: boolean;
+	hideCountParenthesis?: boolean;
 	facet?: ValueFacet;
 	onClick?: (e: React.MouseEvent) => void;
 	previewOnFocus?: boolean;

packages/snap-preact-components/src/components/Molecules/FacetListOptions/readme.md

@@ -38,6 +38,13 @@ The `hideCount` prop will disable the facet count values.
 <FacetListOptions values={listFacet.values} hideCount={true} />
 ```
 
+### hideCountParenthesis
+The `hideCountParenthesis` prop will disable the facet count parenthesis from rendering.
+
+```jsx
+<FacetListOptions values={listFacet.values} hideCountParenthesis={true} />
+```
+
 ### previewOnFocus
 If using within Autocomplete, the `previewOnFocus` prop will invoke the `value.preview()` method when the value has been hovered over.
 

packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.stories.tsx

@@ -64,6 +64,17 @@ export default {
 			},
 			action: 'onSelect',
 		},
+		hideSelectedOptionParentheses: {
+			defaultValue: false,
+			description: 'Hide selected option parenthesis',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				defaultValue: { summary: false },
+			},
+			control: { type: 'boolean' },
+		},
 		...componentArgs,
 	},
 };

packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.tsx

@@ -72,7 +72,7 @@ export const VariantSelection = observer((properties: VariantSelectionProps): JS
 		...properties.theme?.components?.variantSelection,
 	};
 
-	const { type, selection, onSelect, disableStyles, className, style } = props;
+	const { type, selection, onSelect, hideSelectedOptionParentheses, disableStyles, className, style } = props;
 
 	const onSelectHandler = (e: React.MouseEvent<HTMLElement, MouseEvent>, option: ListOption) => {
 		if (onSelect) {
@@ -171,7 +171,9 @@ export const VariantSelection = observer((properties: VariantSelectionProps): JS
 														<span className="ss__dropdown__button-wrapper__label">{selection.label}</span>
 
 														{selection.selected ? (
-															<span className="ss__dropdown__button-wrapper__selection">({selection.selected.value})</span>
+															<span className="ss__dropdown__button-wrapper__selection">
+																{hideSelectedOptionParentheses ? `${selection.selected.value}` : `(${selection.selected.value})`}
+															</span>
 														) : (
 															<></>
 														)}
@@ -241,4 +243,5 @@ export interface VariantSelectionProps extends ComponentProps {
 	selection: VariantSelectionType;
 	type?: 'dropdown' | 'swatches' | 'list';
 	onSelect?: (e: React.MouseEvent<HTMLElement, MouseEvent>, option: ListOption) => void;
+	hideSelectedOptionParentheses: boolean;
 }

packages/snap-preact-components/src/components/Molecules/VariantSelection/readme.md

@@ -33,4 +33,11 @@ The `onSelect` prop allows you to provide a callback function that is triggered
 
 ```jsx
 <VariantSelection selection={VariantSelection} type={'swatches'} onSelect={(e, val) => console.log(e, val)}/>
+```
+
+### hideSelectedOptionParentheses
+The `hideSelectedOptionParentheses` prop will disable the selected option parenthesis from rendering.
+
+```jsx
+<VariantSelection selection={VariantSelection} hideSelectedOptionParentheses={true} />
 ```