feat(buttons): L3-11299 L3-11476 Design System [RW] - Introduce small button component to Seldon, Remove ghost button variant

[smarks8]

Jira ticket

L3-11299
L3-11476

Screenshots

Figma link

Figma Link - Buttons

Summary

• Introduce new small size variant to Button component
• Add new button story that shows all button variants at once, like figma does
• Remove ghost button variant and replace existing instances with tertiary (needs a remix change as well)

Change List (describe the changes made to the files)

This pull request adds support for button sizing (including a new small size) to the Button component, improves Storybook documentation with new stories and a visual grid, and enhances testing and styling for these new features. It also introduces pseudo-state visualization in Storybook for easier UI review.

Button Size Support and API Enhancements:

• Added a new ButtonSizes enum with default and small options, updated the Button component to accept a size prop (defaulting to default), and applied appropriate class names for sizing. [1] [2] [3] [4]
• Updated exports so ButtonSizes is available from both index.ts and Button/index.ts. [1] [2]

Storybook Improvements:

• Added the storybook-addon-pseudo-states package and configured it to enable visualizing hover, focus, and focus-visible states in Storybook. [1] [2]
• Enhanced Button.stories.tsx with new stories for small buttons, small buttons with icons, and an AllVariantsGrid that visually demonstrates all combinations of variants, sizes, and states (static, hover, focus, loading, disabled). [1] [2] [3]
• Added a new SCSS file for the grid layout and styling in Storybook.

Styling and Visuals:

• Added new SCSS rules to style the small button size, including adjusted dimensions and icon sizing.

Testing:

• Added tests to verify default and small size rendering for the Button component, ensuring correct class names are applied. [1] [2]

Acceptance Test (how to verify the PR)

• Check out new small button stories and see that they align with figma

Regression Test

• (Optional) Add verification steps to make sure this PR doesn't break old functionality

Evidence of testing

• Post logs, screenshots, etc

Things to look for during review

• PR title should correctly describe the most significant type of commit. I.e. feat(scope): ... if a minor release should be triggered.
• All commit messages follow convention and are appropriate for the changes
• All references to phillips class prefix are using the prefix variable
• All major areas have a data-testid attribute.
• Document all props with jsdoc comments
• All strings should be translatable.
• Unit tests should be written and should have a coverage of 90% or higher in all areas.

New Components

• Are there any accessibility considerations that need to be taken into account and tested?
• Default story called "Playground" should be created for all new components
• Create a jsdoc comment that has an Overview section and a link to the Figma design for the component
• Export the component and its typescript type from the index.ts file
• Import the component scss file into the componentStyles.scss file.

[netlify]

✅ Deploy Preview for phillips-seldon ready!

Name	Link
🔨 Latest commit	7cd49e8
🔍 Latest deploy log	https://app.netlify.com/projects/phillips-seldon/deploys/698270a95a1fd70008de2beb
😎 Deploy Preview	https://deploy-preview-792--phillips-seldon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

🚀 Storybook preview is ready.

• Preview: https://68b9f094608b90f3cfec5a06-xystywsfnl.chromatic.com/
• Chromatic build: https://www.chromatic.com/build?appId=68b9f094608b90f3cfec5a06&number=308

[smarks8]

Sent to design for review

[Copilot]

Pull request overview

This PR introduces a small button size variant to the Button component, removes the deprecated ghost variant (replaced with tertiary), and enhances Storybook documentation with pseudo-state visualization and a comprehensive visual grid of all button variants.

Changes:

• Added ButtonSizes enum with default and small options, with new small button styling (32px height, constrained width)
• Removed the ghost button variant from types and styles, replacing all usages with tertiary variant
• Enhanced Storybook with pseudo-state addon, new size-specific stories, and an AllVariantsGrid story showing all combinations

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/components/Button/types.ts	Added ButtonSizes enum (default, small) and removed ghost variant from ButtonVariants enum
src/components/Button/Button.tsx	Added size prop to ButtonProps interface and applied size class modifier to button elements
src/components/Button/index.ts	Created barrel export for Button component including ButtonSizes enum
src/index.ts	Exported ButtonSizes enum alongside ButtonVariants for public API
src/components/Button/_button.scss	Added small button styles and removed all ghost variant styling
src/components/Button/_button.stories.scss	Added grid layout styles for AllVariantsGrid story visualization
src/components/Button/Button.stories.tsx	Added SmallButtonVariant, SmallButtonWithIcons, and AllVariantsGrid stories with duplicate args issue
src/components/Button/Button.test.tsx	Added tests for default and small size rendering
src/patterns/ViewingsList/ViewingsListCard.tsx	Replaced ghost variant with tertiary in all button instances
package.json	Added storybook-addon-pseudo-states dependency
package-lock.json	Lockfile update for new storybook addon
.storybook/main.ts	Configured storybook-addon-pseudo-states addon

Comments suppressed due to low confidence (1)

src/components/Button/Button.stories.tsx:224

• Duplicate args assignment for ButtonAsLinkWithPrefetch. The args are already defined at lines 78-81. This duplicate assignment at line 221-223 will override the previous one and may cause confusion. Remove either this duplicate or the earlier one at lines 78-81.

ButtonAsLinkWithPrefetch.args = {
  variant: ButtonVariants.tertiary,
  size: 'md',
};