v3.2.0

New in this version:

Support for Storybook v7

Version 7 of Storybook has been in beta for a while but is soon about to launch. We needed to make some updates to how the happo-plugin-storybook library handled the new environment.

Theming support

This is great for testing dark mode! If you want to include different themes with Happo, you can now add a happo.themes option to a Storybook story. For a CSF, this is what it can look like:

export const ThemedBox = () => (
  <Box>I'm a themed box</Box>
);
ThemedBox.parameters = {
  happo: { themes: ['light', 'dark'] },
};

Happo will split up this story in two separate screenshots. One where the light theme is applied and one where the dark theme is applied. You are responsible for handling the theme switching, so make sure you also add the logic for switching themes to your .storybook/preview.js file. Here's an example that makes use of the storybook-dark-theme library:

import { setThemeSwitcher } from 'happo-plugin-storybook/register';

setThemeSwitcher((theme, channel) => {
  return new Promise((resolve) => {
    const isDarkMode = theme === 'dark';

    // Listen for dark mode to change and resolve.
    channel.once(DARK_MODE_EVENT_NAME, resolve);
    // Change the theme.
    channel.emit(DARK_MODE_EVENT_NAME, isDarkMode);
  });
});

The function passed to setThemeSwitcher can be async. Happo will await it before continuing with the screenshot process.

If you want a default config for happo.themes for all stories, you can use global parameters:

// .storybook/preview.js

export const parameters = {
  happo: { themes: ['light', 'dark'] },
};