Button components

[ddfridley]

This Button component will be the base of all of our buttons.

• <Button >

<Button
   className="" // may or may not be passed. Should be applied to the outer most tag, after local classNames
   style={} // may or may not be passed, Should be applied to the outer most tag
   onDone=()=>{} // a function that is called when the button is clicked.  - if it exists
   title="" // text to display on hover
   disabled=false
   disableOnClick=false // if true, the button gets disabled after click and stays disabled - prevents resubmission
>
   text or <span></span>
</Button>

• className may have 'hover' in it. This will occur when the user is hovering over the parent component, and the parent component wants the button to go into the hover state as well. In the styles definition, .hover (the class name) should do the same thing as :hover (the pseudo class).

The width of the button shall be determined by the name passed, but can be over ridden by the style or class.

figma

The base shall have the shape and border as shown in figma - based on the Secondary button.

Then create additional components using <Button>, but passing classNames with styles to match the figma

• <ModifierButton />
• <SecondaryButtom />
• <PrimaryButton />
• <TextButton /> see figma
• colors and padding and such for styles should be in theme.js - think of reusable names
• Create Storybook cases for each of the buttons and exercise their props

Stretch goal:

• When someone long presses the button (like on a smartphone) show the title text. #66

[ddfridley]

@Jojoliu66 I just added the TextButton to this.

[ddfridley]

@Jojoliu66 I added the requirement that the hover class name be supported.

[ddfridley]

Done by PR #64