mountain_view
mountain_view copied to clipboard
Add Meta Data for each Stub
The ability to provide a specific title, description, and additional class information on a per stub basis would provide a number of benefits when using the style guide:
- The title would provide clear, shared, terminology for the team to use with each component example
- The description can be used to provide use instructions for when and how each component should be used within the site, or other relevant information for each variant.
- The class option would give you the ability to showcase a component that otherwise would have display issues. For example, we have a button that is used on dark backgrounds, it is very light and cannot be seen without a dark background on the parent div.
Example stub file:
:meta:
'Buttons are available in 4 types: primary, secondary, outline, and outline_inverse.
Method can be get (will generate a link with a role of button) or post, submit, cancel, reset (will generate a button/formtastic button).
If a form object is provided for the location, formtastic action will be used.
:stubs:
-
:mv_title: 'Primary Get Button'
:mv_description:
'This button should be the default, unless you are specifically instructed to use a different button, use this one.'
:type: 'primary'
:name: 'My Primary Link Button'
:method: 'get'
:location: 'javascript:void(0)'
-
:mv_title: 'Outline Get Button'
:mv_description:
'This button will only be used according to the rules set forth by the UX team.'
:type: 'outline'
:name: 'My Outline Link Button'
:method: 'get'
:location: 'javascript:void(0)'
-
:mv_title: 'Outline Inverse Get Button'
:mv_description:
'This button will only be used only on dark backgrounds.'
:mv_classes: 'mv_item_background--dark'
:type: 'outline_inverse'
:name: 'My Outline Inverse Link Button'
:method: 'get'
:location: 'javascript:void(0)'
See PR #72
Here is an example using all 3 keys. Note that the rounded corners are now visible due to the change in class, the title change, and the additional description information
+1 for the ideas! Implementation moved to #73 instead of #72.