wix-style-react/src/FormField/docs/FormField.demo.js

wix-style-react

import React from 'react';
import { StorybookComponents } from 'wix-storybook-utils/StorybookComponents';
import FormField from '..';
import Dropdown from '../../Dropdown';
import Input from '../../Input';
import ToggleSwitch from '../../ToggleSwitch';

export default () => {
  const [status, setStatus] = React.useState(0);
  const [checked, setChecked] = React.useState(true);

  return (
    <StorybookComponents.Stack flexDirection="column">
      <StorybookComponents.Stack>
        <FormField label="Status">
          <Dropdown
            selectedId={status}
            onSelect={value => setStatus(value.id)}
            options={[
              { id: 0, value: 'In Stock' },
              { id: 1, value: 'Out of Stock' },
            ]}
          />
        </FormField>

        <FormField label="SKU">
          <Input placeholder="e.g. SK000001" />
        </FormField>
      </StorybookComponents.Stack>
      <FormField
        id="formfieldToggleSwitchId"
        infoContent="Track this product's inventory by adding stock quantities per variant"
        label="Track Inventory"
        labelPlacement="right"
        stretchContent={false}
      >
        <ToggleSwitch
          id="formfieldToggleSwitchId"
          size="small"
          checked={checked}
          onChange={() => setChecked(!checked)}
        />
      </FormField>
    </StorybookComponents.Stack>
  );
};