#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")
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:"
  indent="true"
  indent_offset="large"
  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:"
  indent
  indent_offset="x-large"
  wrap
  direction="horizontal"
>
  <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 indent="default" label="A long horizontal legend (FormLabel) with a lot of informative text and a default indent:">
  <Checkbox id="alone-1" label="Checkbox" />
</FormRow>

<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
  section_style="mint-green"
  section_spacing="default"
  indent={true}
  label="A long horizontal legend (FormLabel) with a lot of informative text and a default indent:"
>
  <Checkbox label="Checkbox" />
</FormRow>

const CustomRow = styled(FormRow)`
  align-items: flex-end;
  > .dnb-form-label {
    max-width: 12rem;
    background: var(--color-white);
    color: var(--color-fire-red);
  }
`
render(
  <CustomRow label="A long horizontal legend (FormLabel) with a lot of informative text and a max-width of 12rem:">
    <Checkbox label="Checkbox" />
  </CustomRow>
)