@vtex/styleguide

Styleguide

VTEX Styleguide React components (Docs)

• Usage
• Developing
  • Setup
  • Running
  • Snapshots
• Developing using npm link
• Publishing
• Docs

Usage

yarn add @vtex/styleguide --exact
# or
npm install @vtex/styleguide --save-exact

import Button from '@vtex/styleguide/lib/Button'

Developing

Setup

yarn install

Running

yarn styleguide

Snapshots

To save the components snapshots use:

yarn snap:test

Check the snapshots and to approve the changes use:

yarn snap:approve

You can use the option --filter to just test or approve a specific component. Example:

yarn snap:approve --filter "Button"

Developing using npm link

Run this in this repo:

yarn develop

In your project run:

npm link @vtex/styleguide

Import (case a <Button> component in lib):

import Button from '@vtex/styleguide/lib/Button'

Publishing

releasy pre
npm publish

Docs

To update the docs:

yarn deploy

Known issues

• Your project has to run with webpack >= 2. Here's a guide for upgrading Webpack to v2.

Changelog

[4.0.0] - 2018-05-28

Added

• Toggle add size prop: small or regular (default)
• Icon BoldCheck
• Checkbox: New component
• Tabs New component
• Input prefix prop
• Emptystate New component
• Provide codemod script to automatically transform Button deprecated props. To run it:

    yarn global add jscodeshift
    jscodeshift -t node_modules/@vtex/styleguide/codemod/button-v4.js --ignore-pattern node_modules <path>
  

Changed

• [BREAKING] Button change primary and secondary to variation="primary" and variation="secondary"
• [BREAKING] Button change default variation from tertiary to primary
• [BREAKING] Button change size values to "small", "regular" and "large"
• [BREAKING] Button change default size to "regular"
• Button fix secondary button colors to blue tones
• Card Container to 100% width
• Card change prop fullWidth to noPadding
• Check icon change SVG and size prop type
• Deny icon change SVG and size prop type
• Dropdown fix value prop type
• Input fix required prop type
• Radio increase radio input area
• Toggle fix disabled contrast