mountain_view icon indicating copy to clipboard operation
mountain_view copied to clipboard

Add Meta Data for each Stub

Open ChristineP2 opened this issue 6 years ago • 1 comments

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:

  1. The title would provide clear, shared, terminology for the team to use with each component example
  2. 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.
  3. 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

custom_title_desc_class

ChristineP2 avatar Oct 11 '18 14:10 ChristineP2

+1 for the ideas! Implementation moved to #73 instead of #72.

kitop avatar Oct 17 '18 10:10 kitop