diff --git a/.changeset/green-beers-perform.md b/.changeset/green-beers-perform.md new file mode 100644 index 000000000..25f490aab --- /dev/null +++ b/.changeset/green-beers-perform.md @@ -0,0 +1,15 @@ +--- +"@primer/react-brand": patch +--- + +Adds responsive toggling of feature lists in the `PricingOptions` component. + +`PricingOptions.FeatureList` can now be collapsed at regular and wide viewports. + +```jsx + + + + + +``` diff --git a/apps/docs/content/components/PricingOptions.mdx b/apps/docs/content/components/PricingOptions.mdx index 57e9d3b1a..a2d15a931 100644 --- a/apps/docs/content/components/PricingOptions.mdx +++ b/apps/docs/content/components/PricingOptions.mdx @@ -525,9 +525,11 @@ One item per pricing plan to be displayed. Maximum of 3 items. ### PricingOptions.FeatureList -| Name | Type | Default | required | Description | -| :--------- | :--------------------------------------------------------------------------------------------- | :---------: | :------: | :------------------- | -| `children` | | `undefined` | `true` | The list of features | +| Name | Type | Default | required | Description | +| :----------- | :--------------------------------------------------------------------------------------------- | :---------: | :------: | :---------------------------------------------------------------------------------------------------------- | +| `children` | | `undefined` | `true` | The list of features | +| `expanded` | `boolean` | `true` | `false` | Controls visibility of feature items. Accepts Object type for granular control at different viewport sizes. | +| `hasDivider` | `boolean` | `true` | `false` | Controls visibility of a visual border between feature lists and adjacent actions | ### PricingOptions.FeatureListHeading diff --git a/apps/docs/scripts/components-with-animation.js b/apps/docs/scripts/components-with-animation.js index 8ae0ca290..c5004cc7d 100644 --- a/apps/docs/scripts/components-with-animation.js +++ b/apps/docs/scripts/components-with-animation.js @@ -11,9 +11,9 @@ export const supportedComponents = [ 'Pillar', 'SectionIntro', 'Stack', - 'Statistic', 'Testimonial', 'Text', + 'Statistic', 'Timeline', 'Animate', 'River', diff --git a/package-lock.json b/package-lock.json index c91ed5942..100bb53fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,7 +46,7 @@ }, "apps/storybook": { "name": "@primer/brand-storybook", - "version": "0.34.2", + "version": "0.34.3", "license": "MIT", "devDependencies": { "@babel/preset-env": "^7.22.0", @@ -31323,7 +31323,7 @@ }, "packages/design-tokens": { "name": "@primer/brand-primitives", - "version": "0.34.2", + "version": "0.34.3", "license": "MIT", "devDependencies": { "@primer/primitives": "^7.15.0", @@ -31474,7 +31474,7 @@ }, "packages/e2e": { "name": "@primer/brand-e2e", - "version": "0.34.2", + "version": "0.34.3", "license": "MIT", "devDependencies": { "@github/axe-github": "^0.5.0", @@ -31488,7 +31488,7 @@ }, "packages/fonts": { "name": "@primer/brand-fonts", - "version": "0.34.2", + "version": "0.34.3", "license": "MIT", "engines": { "node": ">=16.0.0", @@ -31497,7 +31497,7 @@ }, "packages/react": { "name": "@primer/react-brand", - "version": "0.34.2", + "version": "0.34.3", "license": "MIT", "dependencies": { "@oddbird/popover-polyfill": "0.4.3", @@ -31546,7 +31546,7 @@ }, "packages/repo-configs": { "name": "@primer/brand-config", - "version": "0.34.2", + "version": "0.34.3", "license": "MIT" } }, diff --git a/packages/react/src/Accordion/Accordion.tsx b/packages/react/src/Accordion/Accordion.tsx index 4602a0ba9..91ff5dba5 100644 --- a/packages/react/src/Accordion/Accordion.tsx +++ b/packages/react/src/Accordion/Accordion.tsx @@ -19,6 +19,7 @@ export type AccordionRootProps = BaseProps & { children: React.ReactElement[] variant?: 'default' | 'emphasis' ref?: React.RefObject + handleOpen?: (boolean) => void } & React.HTMLAttributes type ValidRootChildren = { @@ -27,7 +28,7 @@ type ValidRootChildren = { } export const AccordionRoot = forwardRef( - ({children, className, open = false, variant = 'default', ...rest}, ref) => { + ({children, className, open = false, variant = 'default', handleOpen, ...rest}, ref) => { const detailsRef = useProvidedRefOrCreate(ref as React.RefObject) const [isOpen, setIsOpen] = React.useState(open) @@ -39,7 +40,9 @@ export const AccordionRoot = forwardRef( if (child.type === AccordionContent) { acc.AccordionContent = React.cloneElement(child as React.ReactElement, { open: isOpen, - handleOpen: (newValue: boolean) => setIsOpen(newValue), + handleOpen: (newValue: boolean) => { + setIsOpen(newValue) + }, parentRef: detailsRef, }) as React.ReactElement } @@ -47,7 +50,12 @@ export const AccordionRoot = forwardRef( acc.AccordionHeading = React.cloneElement(child as React.ReactElement, { variant, open: isOpen, - handleOpen: (newValue: boolean) => setIsOpen(newValue), + handleOpen: (newValue: boolean) => { + if (handleOpen) { + handleOpen(newValue) + } + setIsOpen(newValue) + }, parentRef: detailsRef, }) as React.ReactElement } @@ -57,6 +65,10 @@ export const AccordionRoot = forwardRef( {AccordionHeading: null, AccordionContent: null}, ) + useEffect(() => { + setIsOpen(open) + }, [open]) + return (
) => { event.preventDefault() - if (handleOpen) handleOpen(!open) + + if (handleOpen) { + handleOpen(!open) + } }, [handleOpen, open], ) diff --git a/packages/react/src/PricingOptions/PricingOptions.features.stories.tsx b/packages/react/src/PricingOptions/PricingOptions.features.stories.tsx index ad5bd8fe0..16c10dcf0 100644 --- a/packages/react/src/PricingOptions/PricingOptions.features.stories.tsx +++ b/packages/react/src/PricingOptions/PricingOptions.features.stories.tsx @@ -1,5 +1,7 @@ import React from 'react' import {StoryFn, Meta} from '@storybook/react' +import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport' + import {PricingOptions} from '.' import {Box, Grid, Stack} from '..' import imageExample from '../fixtures/images/bento/3.png' @@ -27,6 +29,11 @@ export default { title: 'Components/PricingOptions/Features', component: PricingOptions, decorators: [decorators], + parameters: { + viewport: { + viewports: INITIAL_VIEWPORTS, + }, + }, } as Meta export const DefaultVariant: StoryFn = () => { @@ -588,3 +595,215 @@ export const WithoutFeatures: StoryFn = () => { ) } + +export const CollapsedFeatures: StoryFn = () => { + return ( + + + Copilot Individual + + Code completions, Chat, and more for indie developers and freelancers. + + 10 + + Code completions + Chat in IDE and Mobile + CLI assistance + Security vulnerability filter + + + Free for verified students, teachers, and maintainers of popular open source projects. + + + Start a free trial + + + + + Recommended + Copilot Business + Copilot personalized to your organization. + 19 + + Buy now + + + Contact sales + + + + Everything in Copilot Individual plus: + Chat in IDE and Mobile + CLI assistance + Security vulnerability filter + Code referencing + Public code filter + IP indemnity + + Enterprise-grade security, safety, and privacy + + + + + + Available Feb 2024 + Copilot Enterprise + + Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub + Enterprise Cloud. + + 39 + + Everything in Copilot Business plus: + Chat in IDE and Mobile + CLI assistance + Code completions + + + Join waitlist + + + + ) +} + +export const CollapsedFeaturesNoDividers: StoryFn = () => { + return ( + + + Copilot Individual + + Code completions, Chat, and more for indie developers and freelancers. + + 10 + + Code completions + Chat in IDE and Mobile + CLI assistance + Security vulnerability filter + + + Free for verified students, teachers, and maintainers of popular open source projects. + + + Start a free trial + + + + + Recommended + Copilot Business + Copilot personalized to your organization. + 19 + + Buy now + + + + Everything in Copilot Individual plus: + Chat in IDE and Mobile + CLI assistance + Security vulnerability filter + Code referencing + Public code filter + IP indemnity + + Enterprise-grade security, safety, and privacy + + + + + + Available Feb 2024 + Copilot Enterprise + + Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub + Enterprise Cloud. + + 39 + + Everything in Copilot Business plus: + Chat in IDE and Mobile + CLI assistance + Code completions + + + Join waitlist + + + + ) +} + +export const ExpandedNarrow: StoryFn = () => { + return ( + + + Copilot Individual + + Code completions, Chat, and more for indie developers and freelancers. + + 10 + + Code completions + Chat in IDE and Mobile + CLI assistance + Security vulnerability filter + + + Free for verified students, teachers, and maintainers of popular open source projects. + + + Start a free trial + + + + + Recommended + Copilot Business + Copilot personalized to your organization. + 19 + + Buy now + + + + Everything in Copilot Individual plus: + Chat in IDE and Mobile + CLI assistance + Security vulnerability filter + Code referencing + Public code filter + IP indemnity + + Enterprise-grade security, safety, and privacy + + + + + + Available Feb 2024 + Copilot Enterprise + + Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub + Enterprise Cloud. + + 39 + + Everything in Copilot Business plus: + Chat in IDE and Mobile + CLI assistance + Code completions + + + Join waitlist + + + + ) +} +ExpandedNarrow.parameters = { + viewport: { + defaultViewport: 'iphonexr', + }, +} diff --git a/packages/react/src/PricingOptions/PricingOptions.module.css b/packages/react/src/PricingOptions/PricingOptions.module.css index f6850b761..ae1b4d157 100644 --- a/packages/react/src/PricingOptions/PricingOptions.module.css +++ b/packages/react/src/PricingOptions/PricingOptions.module.css @@ -272,6 +272,10 @@ flex-direction: column; gap: var(--base-size-8); grid-row: feature-list; + margin-block-start: var(--base-size-24); +} + +.PricingOptions__feature-list--has-divider { border-block-start: solid 1px var(--brand-color-border-default); margin: 0; margin-block-start: var(--base-size-24); @@ -308,7 +312,7 @@ /* Remove hover effect */ .PricingOptions__feature-list-accordion::after { - content: none; + content: none !important; } /* Adjust heading spacing */ diff --git a/packages/react/src/PricingOptions/PricingOptions.module.css.d.ts b/packages/react/src/PricingOptions/PricingOptions.module.css.d.ts index b22fe3f0a..9e1f09494 100644 --- a/packages/react/src/PricingOptions/PricingOptions.module.css.d.ts +++ b/packages/react/src/PricingOptions/PricingOptions.module.css.d.ts @@ -21,6 +21,7 @@ declare const styles: { readonly "PricingOptions__price-trailing-text": string; readonly "PricingOptions__footnote": string; readonly "PricingOptions__feature-list": string; + readonly "PricingOptions__feature-list--has-divider": string; readonly "PricingOptions__feature-list-set": string; readonly "PricingOptions__feature-list-heading": string; readonly "PricingOptions__feature-list-item--excluded": string; diff --git a/packages/react/src/PricingOptions/PricingOptions.tsx b/packages/react/src/PricingOptions/PricingOptions.tsx index 2538ee86e..6264b468a 100644 --- a/packages/react/src/PricingOptions/PricingOptions.tsx +++ b/packages/react/src/PricingOptions/PricingOptions.tsx @@ -1,4 +1,4 @@ -import React, {forwardRef, HTMLAttributes, PropsWithChildren, useMemo, type Ref} from 'react' +import React, {forwardRef, HTMLAttributes, PropsWithChildren, useMemo, Ref, Dispatch} from 'react' import {CheckIcon, ChevronDownIcon, XIcon} from '@primer/octicons-react' import clsx from 'clsx' import type {BaseProps} from '../component-helpers' @@ -46,6 +46,35 @@ const testIds = { footnote: 'PricingOptions__footnote', } +type PricingOptionsContextValue = { + allFeatureListsExpanded: boolean + updateFeatureListExpanded: Dispatch +} + +const PricingOptionsContext = React.createContext({ + allFeatureListsExpanded: false, + // eslint-disable-next-line @typescript-eslint/no-empty-function + updateFeatureListExpanded: () => {}, +}) + +const PricingOptionsProvider: React.FC = ({children}) => { + const [allFeatureListsExpanded, setAllFeatureListsExpanded] = React.useState(false) + + const updateFeatureListExpanded = newValue => { + setAllFeatureListsExpanded(() => newValue) + } + + return ( + + {children} + + ) +} + +const usePricingOptions = (): PricingOptionsContextValue => { + return React.useContext(PricingOptionsContext) +} + const PricingOptionsRoot = forwardRef( ( {children, className, 'data-testid': testId, variant = 'default', ...rest}: PropsWithChildren, @@ -60,19 +89,21 @@ const PricingOptionsRoot = forwardRef( ).slice(0, 3) return ( -
)} - > - {filteredChildren.filter(child => React.isValidElement(child) && child.type === PricingOptionsItem)} -
+ +
)} + > + {filteredChildren.filter(child => React.isValidElement(child) && child.type === PricingOptionsItem)} +
+ ) }, ) @@ -314,20 +345,40 @@ const PricingOptionsPrice = forwardRef & { + expanded?: ExpandedProp + hasDivider?: boolean children: React.ReactElement[] 'data-testid'?: string } +type ExpandedProp = boolean | ResponsiveExpandableProps + +type ResponsiveExpandableProps = { + narrow: boolean + regular: boolean + wide: boolean +} + +const defaultExpanded: ExpandedProp = { + narrow: false, + regular: true, + wide: true, +} + type ValidFeatureListChildren = { Heading: React.ReactElement | null Items: React.ReactElement[] }[] const PricingOptionsFeatureList = forwardRef( - ({children, className, 'data-testid': testId, ...rest}, ref) => { - const {isLarge} = useWindowSize() + ({children, className, 'data-testid': testId, hasDivider = true, expanded = defaultExpanded, ...rest}, ref) => { + const runOnce = React.useRef(false) + const [isAccordionOpen, setIsAccordionOpen] = React.useState(false) + const {allFeatureListsExpanded, updateFeatureListExpanded} = usePricingOptions() - const FilteredChidlrenSets = React.Children.toArray(children).reduce((acc, child) => { + const {isMedium: isRegular, isXLarge: isWide} = useWindowSize() + + const FilteredChildrenSet = React.Children.toArray(children).reduce((acc, child) => { if (React.isValidElement(child) && child.type === PricingOptionsFeatureListItem) { if (acc.length === 0) { acc.push({Heading: null, Items: []}) @@ -343,7 +394,7 @@ const PricingOptionsFeatureList = forwardRef ( + const FeatureListItems = FilteredChildrenSet.map(({Heading: HeadingChild, Items}, index) => (
{HeadingChild} @@ -353,34 +404,52 @@ const PricingOptionsFeatureList = forwardRef )) + React.useEffect(() => { + if (!runOnce.current) { + if (typeof expanded === 'boolean') { + return setIsAccordionOpen(expanded) + } else if (typeof expanded === 'object') { + const {narrow, regular, wide} = expanded + if (isRegular) return setIsAccordionOpen(regular) + if (isWide) return setIsAccordionOpen(wide) + return setIsAccordionOpen(narrow) + } + runOnce.current = true + } + }, [expanded, isRegular, isWide]) + + React.useEffect(() => { + if (isAccordionOpen && !runOnce.current) { + updateFeatureListExpanded(true) + runOnce.current = true + } + }, [isAccordionOpen, updateFeatureListExpanded]) + return (
- {!isLarge ? ( - - - - What's included - - - {FeatureListItems} - - - ) : ( - <> - - What's included: - + { + updateFeatureListExpanded(newState) + }} + > + + + What's included + + {FeatureListItems} - - )} + +
) }, diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts index 09cec7573..4933ff4ad 100644 --- a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts +++ b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts @@ -88,6 +88,36 @@ test.describe('Visual Comparison: PricingOptions', () => { expect(await page.screenshot()).toMatchSnapshot() }) + test('PricingOptions / Collapsed Features', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-pricingoptions-features--collapsed-features&viewMode=story', + ) + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + + test('PricingOptions / Collapsed Features No Dividers', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-pricingoptions-features--collapsed-features-no-dividers&viewMode=story', + ) + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + + // eslint-disable-next-line i18n-text/no-en + test.describe('Mobile viewport test for Expanded Narrow', () => { + test.use({viewport: {width: 360, height: 800}}) + test('PricingOptions / Expanded Narrow', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-pricingoptions-features--expanded-narrow&viewMode=story', + ) + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + }) test('PricingOptions / Default', async ({page}) => { await page.goto('http://localhost:6006/iframe.html?args=&id=components-pricingoptions--default&viewMode=story') diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-Mobile-viewp-6e07a-anded-Narrow-PricingOptions-Expanded-Narrow-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-Mobile-viewp-6e07a-anded-Narrow-PricingOptions-Expanded-Narrow-1-linux.png new file mode 100644 index 000000000..92a155ee5 Binary files /dev/null and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-Mobile-viewp-6e07a-anded-Narrow-PricingOptions-Expanded-Narrow-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png index 7ce9ec5b7..8597c980b 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-1-linux.png new file mode 100644 index 000000000..d5370872c Binary files /dev/null and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-No-Dividers-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-No-Dividers-1-linux.png new file mode 100644 index 000000000..3f9c7ac8f Binary files /dev/null and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-No-Dividers-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png index 9f3baa711..736c0629d 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png index e36577cc0..bacc0d4cc 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-1-linux.png index 86b066e76..90c363d8f 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png index e36577cc0..bacc0d4cc 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png index 024283fa4..07d7c57d5 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png index baafb0708..f48f3d252 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png index b6d009589..f4f86a36d 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Without-Features-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Without-Features-1-linux.png index 9a3df4463..e2462ea53 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Without-Features-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Without-Features-1-linux.png differ