How to use the storybook-readme/with-readme function in storybook-readme

To help you get started, we’ve selected a few storybook-readme examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github balena-io-modules / rendition / src / components / Tooltip / story.js View on Github external
Box,
  Button,
  DropDownButton,
  Fixed,
  Flex,
  Heading,
  Provider,
  Txt,
  Link
} from '../../'
import Readme from './README.md'

console.log({ Badge })

storiesOf('Core/Tooltips', module)
  .addDecorator(withReadme(Readme))
  .addDecorator(withScreenshot())
  .add('Standard', () => {
    return (
      
        
          <button>
            Tooltip on top
          </button>
github balena-io-modules / rendition / src / components / Steps / story.js View on Github external
import * as React from 'react'
import { storiesOf } from '@storybook/react'
import { faMapSigns } from '@fortawesome/free-solid-svg-icons/faMapSigns'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import withReadme from 'storybook-readme/with-readme'
import { withScreenshot } from 'storybook-chrome-screenshot'
import { Provider, Steps, Step } from '../../'
import Readme from './README.md'

storiesOf('Next/Steps', module)
  .addDecorator(withReadme(Readme))
  .addDecorator(withScreenshot())
  .add('Standard', () =&gt; {
    return (
      
        
          These are
          all completed
          and not clickable
        

        
           null}&gt;
            This one
          
           null}&gt;
            Doesn't have
github commercetools / ui-kit / switches / toggle / toggle.story.js View on Github external
import React from 'react';
import { Value } from 'react-value';
import { storiesOf } from '@storybook/react';
import { withKnobs, boolean, select } from '@storybook/addon-knobs';
import withReadme from 'storybook-readme/with-readme';
import Spacings from '../../materials/spacings';
import Section from '../../.storybook/decorators/section';
import Readme from './README.md';
import Toggle from '.';

storiesOf('Switches', module)
  .addDecorator(withKnobs)
  .addDecorator(withReadme(Readme))
  .add('Toggle', () =&gt; (
    <section>
      
         (
            
              
              <label>Default</label>
            
          )}</section>
github commercetools / merchant-center-application-kit / packages / application-components / src / components / modal-page / modal-page.story.js View on Github external
onClick={() =&gt; setIsOpen(true)}
          /&gt;
        
        {props.children({ isOpen, setIsOpen })}
      
    
  );
};
ModalController.displayName = 'ModalController';
ModalController.propTypes = {
  children: PropTypes.func.isRequired,
};

storiesOf('Components|Modals', module)
  .addDecorator(withKnobs)
  .addDecorator(withReadme(Readme))
  .add('ModalPage', () =&gt; (
    
      <div id="{PORTALS_CONTAINER_ID}">
      
        {({ isOpen, setIsOpen }) =&gt; (
           setIsOpen(false)}
            title={'Lorem ipsus'}
            subtitle={{'Lorem ipsus ...'}}
            components={{
              actions: (
                
                  </div>
github NewbeeFE / antd-data-table / __story__ / maxVisibleFieldCount.stories.tsx View on Github external
import * as React from 'react'
import { storiesOf } from '@storybook/react'
import withReadme from 'storybook-readme/with-readme'

import axios from 'axios'

/** Import component */
import { DataTable, SearchField, SearchInfo } from '../src'

import { searchFields, columns, onSearch, onError } from './share'

storiesOf('DataTable', module)
  .addDecorator(withReadme(require('./maxVisibleFieldCount.md')))
  .add('maxVisibleFieldCount', () =&gt; (
    <div style="{{">
       record.id}
        pageSize={10}
        searchFields={searchFields}
        initialColumns={columns}
        onSearch={onSearch}
        maxVisibleFieldCount={3}
      /&gt;
    </div>
  ))
github Workday / canvas-kit / modules / cookie-banner / react / stories / stories.tsx View on Github external
return (
      
        <button>Reset Banner</button>
        
      
    );
  }
}

storiesOf('Components|Indicators/Cookie Banner/React', module)
  .addParameters({component: CookieBanner})
  .addDecorator(withReadme(README))
  .add('Default', () =&gt; (
    <div>
      
    </div>
  ))
  .add('With Custom Notice', () =&gt; (
    <div>
      </div>
github balena-io-modules / rendition / src / unstable / components / Form / story.js View on Github external
value={this.state.formData}
            {...this.props}
          /&gt;
        
        
          
            <pre>{JSON.stringify(this.state.formData, null, 4)}</pre>
          
        
      
    )
  }
}

storiesOf('Beta/Form', module)
  .addDecorator(withReadme(Readme))
  .addDecorator(withScreenshot())
  .add('Simple', () =&gt; {
    return (
      
        
      
    )
  })
  .add('Hidden submit button', () =&gt; {
    return (
      
        
      
    )
  })
  .add('Custom submit button text', () =&gt; {
github balena-io-modules / rendition / src / components / Card / story.js View on Github external
Link,
  
    Row with Copy component
  ,
  
    <div>Row with</div>
    <div>Flex</div>
  ,
  <div>Lorem Ipsum dolor si amet</div>
]

storiesOf('Next/Card', module)
  .addDecorator(withReadme(Readme))
  .addDecorator(withScreenshot())
  .add('Standard', () =&gt; {
    return (
      
        
          
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
            scelerisque euismod risus at gravida. Pellentesque a nunc semper,
            ultrices lacus nec, mattis mauris
          
          
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
            scelerisque euismod risus at gravida. Pellentesque a nunc semper,
            ultrices lacus nec, mattis mauris
github balena-io-modules / rendition / src / components / Alert / story.js View on Github external
import * as React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { withScreenshot } from 'storybook-chrome-screenshot'
import withReadme from 'storybook-readme/with-readme'
import { Alert, Box, Provider, Link } from '../../'
import AlertReadme from './README.md'

storiesOf('Next/Alert', module)
  .addDecorator(withReadme(AlertReadme))
  .addDecorator(withScreenshot())
  .add('Standard', () =&gt; {
    return (
      
        
          
            This is a success message
          
          
            This is an alert message
          
          
            This is an alert message
          
          
            This is a general balena announcement
github balena-io-modules / rendition / src / components / Navbar / story.js View on Github external
import * as React from 'react'
import { storiesOf } from '@storybook/react'
import { withScreenshot } from 'storybook-chrome-screenshot'
import withReadme from 'storybook-readme/with-readme'
import { Img, Link, Navbar, Provider } from '../../'
import logo from '../../stories/assets/etcher.svg'
import Readme from './README.md'

storiesOf('Core/Navbar', module)
  .addDecorator(withReadme(Readme))
  .addDecorator(withScreenshot())
  .add('Standard', () =&gt; {
    const Brand = (
      
        <img src="{logo}" style="{{">
      
    )
    return (
      
        
          
            Docs
          
          
            changelog