Allow media helper to accept an icon as an alternative to an image

[Stanton]

• phpunit tests
• documentation
• browser testing

Closes #315

[codecov-io]

Current coverage is 100% (diff: 100%)

Merging #317 into develop will not change coverage

@@           develop   #317   diff @@
=====================================
  Files           14     14          
  Lines          397    397          
  Methods         29     29          
  Messages         0      0          
  Branches         0      0          
=====================================
  Hits           397    397          
  Misses           0      0          
  Partials         0      0          

Powered by Codecov. Last update 327f161...749b0fd

[Stanton]

Updated page for gitbook (when feature ready for merge)

Media

The media object is, typically, an image on the left with descriptive content on the right. This is our implementation of http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

Example usage

{{
    html.media({
        'image': 'github.png',
        'image_alt': 'GitHub logo',
        'title': 'Title',
        'description': 'Description'
    })
}}

<div class="media">
    <img src="github.png" alt="GitHub logo" class="media__image" />
    <div class="media__body">
        <p>Title</p>
        <span class="small-type muted">Description</span>
    </div>
</div>

See the Pen docs - media object by Pulsar (@pulsar) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Options

Option	Type	Description
action	html/twig	A button/indicator to display on the right hand side
class	string	CSS classes, space separated
description	string	Small descriptive text to sit underneath the title
href	string	If type is link, set the href attribute on the a
icon	string	Icon name used to display on the left hand side (alternative to image)
icon_colour	string	Text colour to use for the icon, useful for branding
id	string	A unique identifier, if required
image	string	URL for the image to display on the left hand side
image_alt	string	Alt attribute for the image
title	string	The main title for this object
type	string	Markup scheme to use, can be either div (default) or link
data-*	string	Data attributes, eg: 'data-foo': 'bar'

Icons instead of images

Supply an icon instead of image to choose from the hundreds of icons available within Pulsar. Use in conjunction with the optional icon_colour to improve how they look or to maintain branding for brand icons.

{{
    html.media({
        'icon': 'youtube-square',
        'icon_colour': '#e52d27',
        'title': 'YouTube',
        'description': 'Upload video to YouTube'
    })
}}

Optional action

You can place actions on the right hand side, like remove buttons or status indicators.

{{
    html.media({
        'image': 'github.png',
        'image_alt': 'GitHub logo',
        'title': 'Title',
        'description': 'Description'
        'action': html.remove_button({
            'target': '#example'
        })
    })
}}

See the Pen docs - media object - action by Pulsar (@pulsar) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

[langy]

👍