{"size": 736, "ext": "js", "max_stars_repo_path": "src/js/components/Form/stories/Info&Error&PostPreFix.js", "max_stars_repo_name": "pdgurav/mnet-ui-base", "max_stars_repo_stars_event_min_datetime": "2020-01-06T21:37:13.000Z", "max_stars_repo_stars_event_max_datetime": "2020-01-06T21:37:13.000Z", "max_issues_repo_path": "src/js/components/Form/stories/Info&Error&PostPreFix.js", "max_issues_repo_name": "pdgurav/mnet-ui-base", "max_issues_repo_issues_event_min_datetime": "2020-07-13T15:29:17.000Z", "max_issues_repo_issues_event_max_datetime": "2021-08-13T09:33:28.000Z", "max_forks_repo_path": "src/js/components/Form/stories/Info&Error&PostPreFix.js", "max_forks_repo_name": "pdgurav/mnet-ui-base", "max_forks_repo_forks_event_min_datetime": "2021-05-07T09:56:20.000Z", "max_forks_repo_forks_event_max_datetime": "2021-09-29T08:57:10.000Z"}
{"max_stars_count": 1, "max_issues_count": 9, "max_forks_count": 4, "avg_line_length": 23.0, "max_line_length": 76, "alphanum_fraction": 0.5461956522}
import React from 'react';
import { storiesOf } from '@storybook/react';

import { Box, FormField, TextInput } from 'mnet-ui-base';

const FormFieldInfoPostFix = props => (
  <>
    <Box align="center" pad="large">
      <FormField
        direction="row"
        label="Label"
        postfix="ms"
        prefix="ms"
        htmlFor="text-input"
        error="Text to call attention to an issue with this field"
        {...props}
      >
        <TextInput
          id="text-input"
          placeholder="placeholder"
          value="Value"
          onChange={() => {}}
        />
      </FormField>
    </Box>
  </>
);

storiesOf('Form', module).add('Info, Error, Post and Pre fix label', () => (
  <FormFieldInfoPostFix />
));
