Add form label component

[bryanrsmith]

Label

• Describe the proposed API:
  Export a styled.label with appropriate styling defaults set.

• Are there existing specs or designs?
  https://app.zeplin.io/project/58a23c2d4597afb248c13a43/screen/59ee876e4582a457c39dbefe, but it violates the spacing scale by using a 6px margin. We should work with Amber to choose between 4px or 8px.

[bryanrsmith]

https://git.faithlife.dev/Logos/CommunicationsApi/pull/126#discussion_r139946

[smaxa20]

Would this be something that's attached to inputs that a consumer could opt into with a prop?

<Input medium label='Username' />

Or are you envisioning a separate component that the consumer would add themselves?

<Label>Username</Label>
<Input medium />

[bryanrsmith]

It would simply be a styled label, so

<Label>
    Username
    <Input />
</Label>

[LawrenceRafferty]

I can wait to see the final implementation but I think I have something to learn here. If it is just a label how will you control the vertical space between the label text and the top of the input? (In my implementation I used the label for layout and wrapped the text in its own div for the text style and spacing via margin-bottom.)

[RobertBolender]

Found a spec that confirms 4px spacing:
https://app.zeplin.io/project/58a23c2d4597afb248c13a43/screen/5d16949f0a092b50fe76f286