#FormRow

<FormRow>
  <Input label="Default horizontal FormRow:" placeholder="Input ..." />
</FormRow>

<FormRow direction="vertical" label="Label legend for the inputs:">
  <Input label="Vertical direction:" placeholder="Input A ..." />
  <Input
    label="Vertical direction:"
    placeholder="Input B ..."
    top="small"
  />
</FormRow>

<FormRow
  label={
    <Ingress top="0" bottom="small">
      Custom legend:
    </Ingress>
  }
  label_direction="vertical"
>
  <Input label="Label A:" value="Input A" right="small" />
  <Input label="Label B:" value="Input B" />
</FormRow>

const CustomRow = styled(FormRow)`
  .dnb-form-row__content .dnb-button {
    align-self: flex-end;
    transform: translateY(0.25rem); /* 4px down */
  }
`
render(
  <CustomRow
    label={
      <Space element="span" className="dnb-h--large" top="0" bottom="0">
        Legend
      </Space>
    }
    label_direction="vertical"
  >
    <Input label="Vertical input label" value="Input" right="small" />
    <Button text="Button" />
  </CustomRow>
)

// 1. In the nested FormRow we reset the layout to not be vertical
// 2. So we can use a different direction ("label_direction")
// 1. In the nested FormRow we reset the layout to not be vertical
// 2. So we can use a different direction ("label_direction")
render(
  <FormRow
    label={
      <Space
        element="span"
        className="dnb-h--large"
        top={false}
        bottom="large"
        no_collapse={true}
      >
        Custom vertical legend:
      </Space>
    }
    vertical
  >
    <Input label="Vertical input A" />
    <Input label="Vertical input B" top="medium" />
    <FormRow vertical={false} label_direction="horizontal" top="medium">
      <Input label="Horizontal input A" right="small" />
      <Input label="Horizontal input B" />
    </FormRow>
    <Input label="Vertical input C" top="medium" />
  </FormRow>
)

<FormRow
  label="A long horizontal legend (FormLabel) with a lot of informative text:"
  direction="horizontal"
>
  <Input label="Input label A:" right="small" />
  <Input label="Input label B:" />
</FormRow>

<FormRow
  label="Long label labwl Adipiscing mauris dis proin nec Condimentum egestas class blandit netus non a suscipit id urna:"
  direction="horizontal"
  wrap
>
  <Input label="Input A:" top="small" right="small" />
  <Input label="Input B:" top="small" right="small" />
  <Input label="Input C:" top="small" right="small" />
</FormRow>

<FormSet label_direction="vertical">
  <FormRow label="Label legend for the inputs:">
    <Input
      label="Vertical label direction:"
      placeholder="Input A ..."
      right="small"
    />
    <Input label="Vertical label direction:" placeholder="Input B ..." />
  </FormRow>
  <FormRow label="Checkbox legend:" top="medium">
    <Checkbox label="Checkbox" />
  </FormRow>
</FormSet>

<FormRow vertical={true} disabled={true}>
  <Input label="Vertical input A:" placeholder="Input A ..." />
  <Input
    label="Vertical input B:"
    placeholder="Input B ..."
    top="medium"
  />
</FormRow>

const PhoneRow = styled(FormRow)`
  .dnb-dropdown__shell,
  .dnb-dropdown__list {
    width: auto;
    min-width: 6rem;
  }
  @media screen and (max-width: 40em) {
    .dnb-dropdown {
      margin-bottom: 0.5rem;
    }
  }
`
render(
  <FormRow vertical={true}>
    <Input label="Input" placeholder="Input ..." bottom />
    <PhoneRow
      label="Phone number"
      label_direction="vertical"
      vertical={false}
    >
      <Dropdown
        right="small"
        title="Country code"
        data={['+47', '+48', '+49']}
        value={0}
      />
      <Input placeholder="Your phone number" />
    </PhoneRow>
  </FormRow>
)

<FormRow
  vertical
  section_style="mint-green"
  section_spacing
  label="A long horizontal legend (FormLabel) with a lot of informative text:"
>
  <Checkbox label="Checkbox" />
</FormRow>