React Styleguidist example of problematic HTML in Markdown

Readme.md

Basic button:

<Button>Push Me</Button>

Big pink button:

<Button size="large" color="deeppink">
  Lick Me
</Button>

And you can use any Markdown here.

Fenced code blocks with js, jsx or javascript languages are rendered as a interactive playgrounds:

<Button>Push Me</Button>

You can add a custom props to an example wrapper (```js { "props": { "className": "checks" } }):

<Button>I’m transparent!</Button>

Or disable an editor by passing a noeditor modifier (```js noeditor):

<Button>Push Me</Button>

To render an example as highlighted source code add a static modifier: (```js static):

import React from 'react';

Fenced blocks with other languages are rendered as highlighted code:

<h1>Hello world</h1>

Each example has its own state that you can access at the state variable and change with the setState function. Default state is {}:

<div>
  <Button
    size="small"
    onClick={() => setState({ isOpen: true })}
    disabled={state.isOpen}
  >
    Show Me
  </Button>
  {state.isOpen && (
    <Button size="small" onClick={() => setState({ isOpen: false })}>
      Hide Me
    </Button>
  )}
</div>

You can change the default state:

initialState = { count: 42 }
;<Button onClick={() => setState({ count: state.count + 1 })}>
  {state.count}
</Button>

Release checklist

• Verify it is possible to install all dependencies and build the library by removing node_modules and running npm install
• Run docker-compose up to start ui-library in Docker (used for visual testing)
• Run npm run release
• Push branch to origin
• Open pull request from release/next to master
• Merge pull request from release/next to master
• Open pull request from master to develop and solve possible conflicts.
• Merge pull request from master to develop
• Make sure new version is published to Artifactory (check next section)
• Run npm run build to build styleguide
• Run npm run deploy:dev -- --user common to publish styleguide to http://common.ui-library.fo.dev.dixons.com/ (common user has super secure password as we have everywhere)
• Delete branch release/next from origin