1.0.7 • Published 3 years ago

@bumble/styleguide-visual-helpers v1.0.7

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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
1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago