Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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>
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', () => {
return (
These are
all completed
and not clickable
null}>
This one
null}>
Doesn't have
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', () => (
<section>
(
<label>Default</label>
)}</section>
onClick={() => setIsOpen(true)}
/>
{props.children({ isOpen, setIsOpen })}
);
};
ModalController.displayName = 'ModalController';
ModalController.propTypes = {
children: PropTypes.func.isRequired,
};
storiesOf('Components|Modals', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('ModalPage', () => (
<div id="{PORTALS_CONTAINER_ID}">
{({ isOpen, setIsOpen }) => (
setIsOpen(false)}
title={'Lorem ipsus'}
subtitle={{'Lorem ipsus ...'}}
components={{
actions: (
</div>
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', () => (
<div style="{{">
record.id}
pageSize={10}
searchFields={searchFields}
initialColumns={columns}
onSearch={onSearch}
maxVisibleFieldCount={3}
/>
</div>
))
return (
<button>Reset Banner</button>
);
}
}
storiesOf('Components|Indicators/Cookie Banner/React', module)
.addParameters({component: CookieBanner})
.addDecorator(withReadme(README))
.add('Default', () => (
<div>
</div>
))
.add('With Custom Notice', () => (
<div>
</div>
value={this.state.formData}
{...this.props}
/>
<pre>{JSON.stringify(this.state.formData, null, 4)}</pre>
)
}
}
storiesOf('Beta/Form', module)
.addDecorator(withReadme(Readme))
.addDecorator(withScreenshot())
.add('Simple', () => {
return (
)
})
.add('Hidden submit button', () => {
return (
)
})
.add('Custom submit button text', () => {
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', () => {
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
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', () => {
return (
This is a success message
This is an alert message
This is an alert message
This is a general balena announcement
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', () => {
const Brand = (
<img src="{logo}" style="{{">
)
return (
Docs
changelog