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

wix-style-react

export const _structure = `
<FormField
  label="Label"
  suffix={
    <StorybookComponents.Placeholder>
      Suffix Area
    </StorybookComponents.Placeholder>
  }
>
  <StorybookComponents.Placeholder>
    Any Form Element
  </StorybookComponents.Placeholder>
</FormField>`;

export const _labelSize = `
<StorybookComponents.Stack flexDirection="column">
  <FormField labelSize="small" label="Small (default)">
    <Input />
  </FormField>
  <FormField labelSize="tiny" label="Tiny">
    <Input size="small" />
  </FormField>
</StorybookComponents.Stack>;
`;

export const _labelPlacement = `
<StorybookComponents.Stack flexDirection="column">
  <FormField label="Top" labelPlacement="top">
    <Input />
  </FormField>
  <FormField label="Left" labelPlacement="left">
    <Input />
  </FormField>
  <FormField label="Right" labelPlacement="right" stretchContent={false}>
    <ToggleSwitch checked />
  </FormField>
</StorybookComponents.Stack>;`;

export const _labelAlignment = `
<StorybookComponents.Stack>
  <FormField label="Top" labelPlacement="left" labelAlignment="top">
    <InputArea minHeight="90px" />
  </FormField>
  <FormField label="Middle" labelPlacement="left" labelAlignment="middle">
    <Input />
  </FormField>
</StorybookComponents.Stack>;`;

export const _required = `
<StorybookComponents.Stack>
  <FormField label="Required Field" required>
    <Input />
  </FormField>
  <FormField label="Innesential Field (Optional)">
    <Input />
  </FormField>
</StorybookComponents.Stack>`;

export const _additionalInfo = `
<FormField label="Hover info icon to see more info" infoContent="This is an additional context for what user is expected to input">
  <Input />
</FormField>;`;

export const _suffix = `
<FormField
  label="Label"
  suffix={
    <TextButton size="small" suffixIcon={<Icons.ExternalLinkSmall/>}>
      External Link
    </TextButton>
  }
>
  <InputArea />
</FormField>;`;

export const _characterCount = `
() => {
  const [charCount, setCharCount] = React.useState(0);
  const [value, setValue] = React.useState('');

  const handleOnChange = value => {
    if (value.length <= 20) {
      setValue(value);
      setCharCount(value.length);
    }
  };
  return (
    <FormField label="Enter more than 20 characters" charCount={20 - charCount}>
      <Input value={value} onChange={event => handleOnChange(event.target.value)} />
    </FormField>
  );
};`;

export const _stretchContent = `
<FormField label="Not stretched content" labelPlacement="right" stretchContent={false}>
  <ToggleSwitch checked />
</FormField>;`;

export const _regularForm = `
<Card>
  <Card.Header title="New Dish" />
  <Card.Divider/>
  <Card.Content>
    <Layout>
      <Cell span={4}>
        <FormField label="Image">
          <ImageViewer width="100%" height="176px" />
        </FormField>
      </Cell>
      <Cell span={8}>
        <Layout gap="24px">
          <Cell span={8}>
            <FormField label="Name">
              <Input value="My New Dish" />
            </FormField>
          </Cell>
          <Cell span={4}>
            <FormField label="Price">
              <Input value="0" prefix={<Input.Affix>$</Input.Affix>} />
            </FormField>
          </Cell>
          <Cell>
            <FormField label="Description">
              <InputArea
                placeholder="Enter your dish details"
                resizable
                rows={3}
              />
            </FormField>
          </Cell>
        </Layout>
      </Cell>
      <Cell span={6}>
        <FormField label="Labels" infoContent="Choose your preferences">
          <Layout>
            <Cell span={6}>
              <Box direction="vertical" gap="12px">
                <Checkbox>Special</Checkbox>
                <Checkbox>Vegan</Checkbox>
                <Checkbox>Vegeterian</Checkbox>
              </Box>
            </Cell>
            <Cell span={6}>
              <Box direction="vertical" gap="12px">
                <Checkbox>Gluten Free</Checkbox>
                <Checkbox>Organic</Checkbox>
                <Checkbox>Spicy</Checkbox>
              </Box>
            </Cell>
          </Layout>
        </FormField>
      </Cell>
      <Cell span={3}>
        <FormField label="Visibility">
          <Checkbox checked>Visible</Checkbox>
        </FormField>
      </Cell>
      <Cell span={3}>
        <FormField label="Inventory">
          <Checkbox checked>In Stock</Checkbox>
        </FormField>
      </Cell>
    </Layout>
  </Card.Content>
</Card>;`;

export const _sideLabels = `
<CustomModalLayout
  showHeaderDivider
  primaryButtonText="Save"
  secondaryButtonText="Cancel"
  onCloseButtonClick={() => {}}
  title="New Contact"
>
  <Layout gap="24px">
    <Cell span={2}>
      <FormField label="Name" />
    </Cell>
    <Cell span={10}>
      <Box direction="vertical" gap="12px">
        <Input placeholder="First Name" />
        <Input placeholder="Last Name" />
      </Box>
    </Cell>
    <Cell span={2}>
      <FormField label="Email" />
    </Cell>
    <Cell span={10}>
      <Box direction="vertical" gap="6px">
        <Input placeholder="Email Address" />
        <Checkbox checked> Send welcome email</Checkbox>
      </Box>
    </Cell>
    <Cell span={2}>
      <FormField label="Phone" />
    </Cell>
    <Cell span={10}>
      <Input placeholder="e.g. +44 XXX XXXXX" />
    </Cell>
    <Cell span={2}>
      <FormField label="Address" />
    </Cell>
    <Cell span={10}>
      <Box direction="vertical" gap="12px">
        <Input placeholder="Street" />
        <Layout cols={2} gap="12px">
          <Input placeholder="City" />
          <Input placeholder="Zip code" />
          <Dropdown placeholder="Country"/>
        </Layout>
      </Box>
    </Cell>
    <Cell span={2}>
      <FormField label="Labels" />
    </Cell>
    <Cell span={10}>
      <MultiSelect
        mode="select"
        customSuffix={<TextButton>+ Add Label</TextButton>}
      />
    </Cell>
  </Layout>
</CustomModalLayout>;`;