Example markdown driving

solar-TextInput-README.md

Following is the markdown that produces http://design.bulb.co.uk/#/patterns/modules/TextInput/README.md.

Text Input

Text input enables the user to interact with and input data.

Without validation

<TextInput
  id="name"
  label="Account number"
  status="unknown"
/>

Members can sign up to the Bulb Feed-In Tariff using an online form. When testing this form, we found that users wanted their information prefilled in the relevant places rather needing to replicate it several times. If members have information on their Bulb account, they expect this information to be pre-filled into any Bulb forms when they are logged in.

<TextInput
  id="name"
  label="Account number"
  description="This is found at the top of your bill."
  status="unknown"
/>

Members can submit meter readings in their Bulb account, but sometimes need to submit fewer digits than what the interface requires. When testing this form, we found that providing further assistance for text input (such as a reminder to input a 0 first, mirroring their meter) helped users submit the correct reading. Provide clear advice for any requirements relating to a text input.

With positive validation

<TextInput
  id="name"
  label="Account number"
  description="This is found at the top of your bill."
  status="valid"
>
  valid value
</TextInput>

With negative validation

<TextInput
  id="name"
  label="Account number"
  description="This is found at the top of your bill."
  status="invalid"
  errorMessage="Incorrect value"
>
  invalid value
</TextInput>