42 lines
943 B
JavaScript
42 lines
943 B
JavaScript
import React from 'react'
|
|
import { number } from '@storybook/addon-knobs'
|
|
|
|
import { Offset } from './Offset'
|
|
import { Indicator } from './Indicator'
|
|
import { Segment } from './Segment'
|
|
|
|
export default {
|
|
component: Offset,
|
|
title: 'Offset'
|
|
}
|
|
|
|
const offsetKnob = () =>
|
|
number('Offset', 0, {
|
|
range: true,
|
|
min: -50,
|
|
max: 50,
|
|
step: 1
|
|
})
|
|
|
|
export const BlockElement = () => (
|
|
<Offset offset={offsetKnob()}>
|
|
<div style={{ textAlign: 'center' }}>This text is centered</div>
|
|
</Offset>
|
|
)
|
|
|
|
export const InlineElement = () => (
|
|
<Offset offset={offsetKnob()}>
|
|
This a long text to see that inline elements get pushed far to the left. To
|
|
be precise they get pushed half the container with to the left. Use
|
|
text-align: center for better display.
|
|
</Offset>
|
|
)
|
|
|
|
export const WithIndicator = () => (
|
|
<Offset offset={offsetKnob()}>
|
|
<Indicator>
|
|
<Segment>Hello World</Segment>
|
|
</Indicator>
|
|
</Offset>
|
|
)
|