diff --git a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx index 80a38f455..1dca514f7 100644 --- a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx +++ b/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: { diff --git a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.test.tsx b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.test.tsx index 88518c163..f7adbbffa 100644 --- a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.test.tsx +++ b/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(); + + 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(); diff --git a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.tsx b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.tsx index 580c15239..f9b0c3c65 100644 --- a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.tsx +++ b/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 && } {value.label} - {!hideCount && value?.count > 0 && ({value.count})} + {!hideCount && value?.count > 0 && ( + {hideCountParenthesis ? `${value.count}` : `(${value.count})`} + )} ))} @@ -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; diff --git a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/readme.md b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/readme.md index 8d75bcbe4..f8e9954ee 100644 --- a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/readme.md +++ b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/readme.md @@ -38,6 +38,13 @@ The `hideCount` prop will disable the facet count values. ``` +### hideCountParenthesis +The `hideCountParenthesis` prop will disable the facet count parenthesis from rendering. + +```jsx + +``` + ### previewOnFocus If using within Autocomplete, the `previewOnFocus` prop will invoke the `value.preview()` method when the value has been hovered over. diff --git a/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.stories.tsx b/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.stories.tsx index 1b5fe0677..d7f14cb52 100644 --- a/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.stories.tsx +++ b/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, }, }; diff --git a/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.tsx b/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.tsx index 8c621578f..bd91dbd1c 100644 --- a/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.tsx +++ b/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, option: ListOption) => { if (onSelect) { @@ -171,7 +171,9 @@ export const VariantSelection = observer((properties: VariantSelectionProps): JS {selection.label} {selection.selected ? ( - ({selection.selected.value}) + + {hideSelectedOptionParentheses ? `${selection.selected.value}` : `(${selection.selected.value})`} + ) : ( <> )} @@ -241,4 +243,5 @@ export interface VariantSelectionProps extends ComponentProps { selection: VariantSelectionType; type?: 'dropdown' | 'swatches' | 'list'; onSelect?: (e: React.MouseEvent, option: ListOption) => void; + hideSelectedOptionParentheses: boolean; } diff --git a/packages/snap-preact-components/src/components/Molecules/VariantSelection/readme.md b/packages/snap-preact-components/src/components/Molecules/VariantSelection/readme.md index 2b1b465b2..1dc993455 100644 --- a/packages/snap-preact-components/src/components/Molecules/VariantSelection/readme.md +++ b/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 console.log(e, val)}/> +``` + +### hideSelectedOptionParentheses +The `hideSelectedOptionParentheses` prop will disable the selected option parenthesis from rendering. + +```jsx + ``` \ No newline at end of file