Story

As a developer, I would like to create a reusable component for drop downs. 

Description

Lets create the dropdown component like the button component we have where we define some types. As starting types we can include default and actions for now. 

the example pictures are provided below. 

All the sub buttons shall be dynamically populated. The texts, icons, icon position, and also the click action should be provided from each usage.  

Design 

Styles That Apply to ALL BUTTON TYPES

• 8px top and bottom vertical padding.
• 16px left and right horizontal padding.
• Minimum 8px spacing between text and icons.
  • When necessary drop downs should include more space between the text and the caret when the button needs to be wider to accommodate the width of dropdown options. Text should be left justified against the padding and caret should be right justified against the padding.
• Carets are always RIGHT JUSTIFIED against the padding.
• Icons are always LEFT JUSTIFIED against the padding.
• 8px spacing between individual buttons.
• 1px border
• Corner Radius = 4px
• No outside shadows on DISABLED, ENABLED, IDLE.
• Small outside shadow on HOVER
• Small inside shadow on CLICK
• 12px Open Sans SimiBold font
• "Title Case" text

Styles Specific to Individual Button Types

Green buttons

1. #91CC93 when DISABLED
2. #5CB85C when ENABLED and IDLE
3. #449D44 on HOVER or IN USE
4. #5CB85C BORDER
5. #FFFFF FONT

Filter - Sort - Page Redirect - Back - All other Line Buttons

1. #CCCCCC Text and Border when DISABLED
2. #FFFFFF background when DISABLED
3. #4a5456 Text and Border when ENABLED and IDLE
4. #FFFFFF Idle Background when ENABLED and IDLE
5. #E6E6E6 Enabled Button Background on HOVER or CLICK
6. #4A5456 Text color on HOVER

AC 

Confirm that the default dropdown button has an example in the test page

Confirm that the actions dropdown button has an example in the test page