form.stories.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. import React from 'react';
  2. import {boolean} from '@storybook/addon-knobs';
  3. import {withInfo} from '@storybook/addon-info';
  4. import Form from 'app/views/settings/components/forms/form';
  5. import NewBooleanField from 'app/views/settings/components/forms/booleanField';
  6. import RadioField from 'app/views/settings/components/forms/radioField';
  7. import RangeField from 'app/views/settings/components/forms/rangeField';
  8. import SelectField from 'app/views/settings/components/forms/selectField';
  9. import TextField from 'app/views/settings/components/forms/textField';
  10. export default {
  11. title: 'Forms/Form',
  12. };
  13. export const Default = withInfo(
  14. 'Use the knobs to see how the different field props that can be used affect the form layout.'
  15. )(() => {
  16. const fieldProps = {
  17. alignRight: boolean('Align right', false),
  18. required: boolean('Required', false),
  19. visible: boolean('Visible', true),
  20. disabled: boolean('Disabled', false),
  21. flexibleControlStateSize: boolean('Flexible Control State Size', true),
  22. inline: boolean('Inline (Label and Control on same line)', true),
  23. stacked: boolean('Stacked (Fields are on top of each other without a border)', true),
  24. };
  25. return (
  26. <Form>
  27. <TextField
  28. name="textfieldflexiblecontrol"
  29. label="Text Field With Flexible Control State Size"
  30. placeholder="Type text and then delete it"
  31. {...fieldProps}
  32. />
  33. <NewBooleanField name="field" label="New Boolean Field" {...fieldProps} />
  34. <RadioField
  35. name="radio"
  36. label="Radio Field"
  37. choices={[
  38. ['choice_one', 'Choice One'],
  39. ['choice_two', 'Choice Two'],
  40. ['choice_three', 'Choice Three'],
  41. ]}
  42. {...fieldProps}
  43. />
  44. <SelectField
  45. name="select"
  46. label="Select Field"
  47. choices={[
  48. ['choice_one', 'Choice One'],
  49. ['choice_two', 'Choice Two'],
  50. ['choice_three', 'Choice Three'],
  51. ]}
  52. {...fieldProps}
  53. />
  54. <RangeField
  55. name="rangeField"
  56. label="Range Field"
  57. min={1}
  58. max={10}
  59. step={1}
  60. value={1}
  61. formatLabel={value => {
  62. return `${value} Toaster Strudle${value > 1 ? 's' : ''}`;
  63. }}
  64. {...fieldProps}
  65. />
  66. </Form>
  67. );
  68. });
  69. Default.story = {
  70. name: 'default',
  71. };