#FormStatus (StatusMessage)

<FormStatus text="Failure text" />

<FormStatus
  title="Hover title"
  text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus"
  state="info"
/>

<FormStatus
  stretch={true}
  text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus"
  state="warn"
/>

<FormStatus state="warn" variant="outlined">
  Warningmessage. Take notice!
</FormStatus>

<FormStatus state="marketing" variant="outlined">
  Marketingmessage. What a deal!
</FormStatus>

<Input
  label="Input with status:"
  status="You have to fill in this field"
  value="Input value"
/>

const CustomStatus = () => (
  <>
    My info <Link href="/">with a link</Link> and more text
  </>
)

render(
  <Input
    label="Input with custom status:"
    status={<CustomStatus />}
    status_state="info"
    value="Input value"
  />
)

const myHTML = `
  My HTML
  <a class="dnb-anchor" href="/" target="_blank">with a link</a>
  and more text
`

const CustomStatus = () => (
  <span
    dangerouslySetInnerHTML={{
      __html: myHTML,
    }}
  />
)

render(
  <FormStatus state="info" size="large" variant="outlined">
    <CustomStatus />
  </FormStatus>
)

<Icon
  icon={InfoIcon}
  size="medium"
  title="Some title"
  inherit_color={false}
  right
/>
<Icon
  icon={WarnIcon}
  size="medium"
  title="Some title"
  inherit_color={false}
  right
/>
<Icon
  icon={ErrorIcon}
  size="medium"
  title="Some title"
  inherit_color={false}
  right
/>
<Icon
  icon={MarketingIcon}
  size="medium"
  title="Some title"
  inherit_color={false}
/>