Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | /*
Copyright (C) 2017 Red Hat, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { Button } from '@patternfly/react-core';
import { Document } from './Document';
import React from 'react';
import { text } from '@storybook/addon-knobs';
const obj = {
title: 'Document',
includeStories: [], // or don't load this file at all
};
export default obj;
export const document = () => (
<div style={{ width: 300 }}>
<Document
title={text('Title', 'Some title that can be extra long')}
footer={text('footer', 'Source document')}
actions={[<Button key={'1'}>some action</Button>]}
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium
assumenda atque consequuntur cupiditate doloremque eius eligendi et, ex,
harum impedit ipsum magnam minus, officia provident qui quidem veniam.
Facere, quo.
</Document>
</div>
);
export const states = () => (
<div>
<Document
style={{ width: 250, marginRight: 10, display: 'inline-block' }}
title={'Selected'}
selected={true}
/>
<Document
style={{ width: 250, marginRight: 10, display: 'inline-block' }}
title={'DropTarget'}
dropTarget={true}
/>
<Document
style={{ width: 250, marginRight: 10, display: 'inline-block' }}
title={'DropAccepted'}
dropAccepted={true}
/>
</div>
);
export const noActions = () => (
<div style={{ width: 300 }}>
<Document title={'Lorem dolor'} footer={'Lorem dolor'}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium
assumenda atque consequuntur cupiditate doloremque eius eligendi et, ex,
harum impedit ipsum magnam minus, officia provident qui quidem veniam.
Facere, quo.
</Document>
</div>
);
export const stacked = () => (
<div style={{ width: 300 }}>
<Document title={'Lorem dolor'} footer={'Lorem dolor'} stacked={true} />
<Document title={'Lorem dolor'} footer={'Lorem dolor'} stacked={true} />
<Document title={'Lorem dolor'} footer={'Lorem dolor'} stacked={true} />
</div>
);
|