feat: add basic local storybook implementation for newspack-ui

[thomasguillot]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

• Introduces a new Storybook setup for Newspack UI components

  • Stories are stored inside a dedicated /storybook directory at the root level
  • Configures Storybook to use our CSS-only components
  • Adds comprehensive documentation for each component

• Creates initial component stories:

  1. Badge

     • Documents all variants (primary, secondary, outline, success, error, warning)

  2. Button

     • Documents all variants (primary, secondary, branded, ghost, outline, destructive)
     • Shows size options (x-small, small, medium)
     • Demonstrates layout modifiers (wide, icon, loading)

  3. Segmented Control

     • Shows basic implementation with tabs and panels
     • Documents size options and wide layout

• Change the default size of the icon-only button to be medium, just like a regular button.

  • It means I had to update Reader Activation modals and elements
  • I also added the inner spans (glyph and text) for buttons using icons

Note: My goal is to ultimately have a dedicated Github page.

How to test the changes in this Pull Request:

1. Install and run Storybook:

   npm install
   npm run storybook

   Storybook should open at http://localhost:6006

2. In Storybook's sidebar, verify:

   • Components are listed under "Newspack UI"
   • Badge, Button and Segmented Control components are present

3. Test Badge component:

   • Check all variants render correctly (Primary, Secondary, etc.)

4. Test Button component:

   • Check all variants render correctly (Primary, Secondary, etc.)
   • Try different sizes using the controls panel
   • Test layout options (wide, icon-only)
   • Verify loading state works
   • Ensure all interactive examples work as expected

5. Test Segmented Control component:

   • Verify tabs switch content correctly
   • Test different sizes using the controls panel
   • Check the wide layout option
   • Ensure selected states are visually correct

6. Verify documentation:

   • Code examples should update when changing controls
   • All modifiers should be properly documented
   • CSS classes should match what's being used

7. Check if the Reader Activation modals and elements are sized correctly

   • Mainly buttons that are using icon + text or icon-only

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[thomasguillot]

@laurelfulford Why was the default size for icon-only buttons set to x-small, while regular buttons default to medium? I’ve updated this behaviour so that all buttons now default to medium.

[dkoo]

When I run npm run storybook I get an error message: