1import React from 'react';
2import { InlineFieldRow } from './InlineFieldRow';
3import mdx from './InlineFieldRow.mdx';
4import { InlineField } from './InlineField';
5import { Input } from '../Input/Input';
6
7export default {
8  title: 'Forms/InlineFieldRow',
9  component: InlineFieldRow,
10  parameters: {
11    docs: {
12      page: mdx,
13    },
14  },
15};
16
17export const single = () => {
18  return (
19    <div style={{ width: '100%' }}>
20      <InlineFieldRow>
21        <InlineField label="Label Row 1">
22          <Input placeholder="Label" />
23        </InlineField>
24        <InlineField label="Label Row 1">
25          <Input placeholder="Label" />
26        </InlineField>
27      </InlineFieldRow>
28      <InlineFieldRow>
29        <InlineField label="Label Row 2">
30          <Input placeholder="Label" />
31        </InlineField>
32        <InlineField label="Label Row 2">
33          <Input placeholder="Label" />
34        </InlineField>
35        <InlineField label="Label Row 2 Grow" grow>
36          <Input placeholder="Label" />
37        </InlineField>
38      </InlineFieldRow>
39    </div>
40  );
41};
42