TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

Bumble Styleguide Visual Helpers

Available tools

Work in progress: This is a list of visual components, which can help with most regular test-cases.

It is a React UI based list of components with zero dependencies (build based on consumer setup) for visual regression tests.

For easier work with different devices / media-queries we introduced several components:

  • StyleguidePlaceholder returns mockup of component with provided parameters
  • StyleguideCell returns component and its legend
  • StyleguideDeviceFrame returns one of predefined frames, based on mobile device aspect-ratio
  • StyleguideDeviceGroup returns set of predefined frames, based on mobile device aspect-ratio
  • getImageUrl returns static image mockup src with provided parameters - as inlined image or as image from placeholder.com
  • noop method for adding mock functions in props.
import { getImageUrl } from "@bumble/styleguide-visual-helpers";

How to define fonts-sizes for placeholders / legends for all tools

Now we can setup consistent font-sizes via config

this is example of how to setup these settings in config:

module.exports = {
    // part of config
    legendFontSize: 25,

    placeholderFontSize: 30,

If you would prefer to setup individualy font-sizes - you can do it for each instance of component.

How to deploy new version?

There are 3 simple steps to follow:

  • yarn build or npm run build
  • add new version to package.json file
  • npm publish




Package Sidebar


npm i @bumble/styleguide-visual-helpers

Weekly Downloads






Unpacked Size

35.3 kB

Total Files


Last publish


  • nikhilverma
  • tomrw
  • juanatbadoo
  • miloss
  • gandhi_rahul
  • mattjleach
  • ykolbin
  • winner95
  • langolf
  • bumble-core-services