bootstrap-component-helper 0.2.3.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: cfd855cdc1f21cb5e3210fde1e80db3adb6de9bf
+  data.tar.gz: 0bc8b94f06ca5aca763e64bb12b660528389568c
+SHA512:
+  metadata.gz: abd7741bcec9de4520e14d751cad4935e263c6ba28131451045efb8ce27664734aa4ca299badd851c83dbf58b209afad6a1f56397556ea2d01d1754376c78a12
+  data.tar.gz: fe5a70fbc1f3ac66dcf76e480f3928b817e3fb53eceaeea6f62b5594599696ab1651359f2085ee06a1abb95608b914229994a6a016d1a0507fd2f363ec75ac86

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2013 bigxiang
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,39 @@
+# Bootstrap Component Helper
+
+This is a simple gem that wraps some components of Bootstrap. It provides unified components using helpers, faces to someone isn't very familiar with HTML and CSS or doesn't like using them throughout the pages such as some CRM projects.
+
+It's compatible with Rails 4+ and Bootstrap 2.3.2.
+
+## Installation
+
+**Notice**: This gem has included [bootstrap-sass](https://github.com/thomas-mcdonald/bootstrap-sass) and [bootstrap-modal-rails](https://github.com/vicentereig/bootstrap-modal-rails) for you.
+
+Add this line to your application's Gemfile:
+
+    gem 'bootstrap-component-helper', '~> 0.2.3'
+
+And then execute:
+
+    $ bundle install
+
+Add assets
+
+Execute the installation generator:
+
+    $ rails g bootstrap:component_helper:install
+
+## Usage
+
+Visit [Examples](http://bigxiang.github.io/bootstrap-component-helper) and read the comments of app/helpers/*.rb, A dummy Rails project had been added to test directory. In order to use it:
+
+1. `$ cd test/dummy`
+2. `$ rails s`
+3. access `http://localhost:3000` to view examples locally.
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1,14 @@
+#!/usr/bin/env rake
+require "bundler/gem_tasks"
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task :default => :test

data/app/helpers/bootstrap/base_helper.rb

@@ -0,0 +1,60 @@
+#coding: utf-8
+module Bootstrap
+  module BaseHelper
+    include ComponentHelper
+    include ImageHelper
+    include TabHelper
+    include TableHelper
+    include TypographyHelper
+
+    # Public: Simplify a div tag.
+    #
+    # options - Options can be accepted by div tag.
+    # block   - The content of the div tag, can be other helpers or HTML tags
+    #           or just strings.
+    #
+    # Examples
+    #
+    #   div(class: 'hero-unit')
+    #   # => <div class="hero-unit"></div>
+    #
+    #
+    #   = div(class: 'hero-unit') do
+    #     %h1 Hello World
+    #   # => <div class="hero-unit"><h1>Hello World</h1></div>
+    #
+    # Returns the content wrapped by a div tag.
+    def div(options = {}, &block)
+      content_tag('div', nil, options) do
+        capture(&block) if block_given?
+      end
+    end
+
+    # Public: Merge a new class into class option or ext_class option
+    #
+    # new_class - the class string which needs to be merged to the existed
+    #             options.
+    # options   - the options ( default: {} )
+    #
+    # Examples
+    #
+    #   merge_predef_class('nav nav-tabs', { id: 'tabs' })
+    #   # => { id: 'tabs', class: 'nav nav-tabs' }
+    #
+    #   merge_predef_class('nav nav-tabs', { id: 'tabs', class: 'foo' })
+    #   # => { id: 'tabs', class: 'foo nav nav-tabs' }
+    #
+    # Returns the options argument itself.
+    def merge_predef_class(new_class, options = {})
+      existed_class = options[:class] || options[:ext_class]
+
+      if existed_class.blank?
+        options[:class] = new_class
+      else
+        existed_class << " #{new_class}"
+      end
+
+      options
+    end
+  end
+end

data/app/helpers/bootstrap/component_helper.rb

@@ -0,0 +1,570 @@
+module Bootstrap
+  module ComponentHelper
+
+    # Dropdown menus not implemented
+
+    # Public: Button group, combine buttons as a group
+    #
+    # tag      - Symbol or String. Html tag of button group. ( default: :div )
+    # vertical - Boolean. Buttons align vertically. ( default: false )
+    # options  - Other options can be accepted by the tag specified.
+    #            ( default: {} )
+    # block    - The content of a button group, usually are several links with
+    #            button styles.
+    #
+    # Examples
+    #
+    #   = bg do
+    #     = link_to('button 1', '#', class: 'btn')
+    #     = link_to('button 2', '#', class: 'btn')
+    #     = link_to('button 3', '#', class: 'btn')
+    #
+    # Returns the whole button group.
+    def btn_group(tag: :div, vertical: false, **options, &block)
+      class_str = 'btn-group'
+      class_str << ' btn-group-vertical' if vertical
+
+      content_tag(tag, nil, merge_predef_class(class_str, options), &block)
+    end
+
+    alias_method :bg, :btn_group
+
+    # Public: Button toolbar, combine button groups as a toolbar.
+    #
+    #
+    # tag     - Symbol or String. Html tag of the toolbar. ( default: :div )
+    # options - Other options can be accepted by the tag specified.
+    #           ( default: {} )
+    # block   - The content of the toolbar, usually are several button groups
+    #           or buttons.
+    #
+    # Examples
+    #
+    #   = bt do
+    #     = bg do
+    #       = link_to('button 1', '#', class: 'btn')
+    #       = link_to('button 2', '#', class: 'btn')
+    #       = link_to('button 3', '#', class: 'btn')
+    #     = bg do
+    #       = link_to('button 4', '#', class: 'btn')
+    #       = link_to('button 5', '#', class: 'btn')
+    #       = link_to('button 6', '#', class: 'btn')
+    #
+    # Return the whole button toolbar.
+    def btn_toolbar(tag: :div, **options, &block)
+      content_tag(tag, nil, merge_predef_class('btn-toolbar', options), &block)
+    end
+
+    alias_method :bt, :btn_toolbar
+
+    # Button dropdown menus not implemented
+    # Split button dropdowns not implemented
+    # Dropup menus not implemented
+
+    # Public: Bootstrap navigator that can be used in navbar or used as
+    #         tabs or pills. It wraps the list helper. Generate ul and li tags
+    #         as navigator.
+    #
+    # type       - String. Represent the type of the nav. If it's nil or an
+    #              empty string, the nav would be a common nav, usually be used
+    #              in a navbar. If it's tabs or pills, then the nav has its own
+    #              style. ( default: '' )
+    # stacked    - Boolean. Shows whether the nav is sorted stacked.
+    #              ( default: false )
+    # li_options - Default options of all li tag.
+    # options    - Other options can be accepted by ul.
+    # block      - The content of a nav.
+    #
+    # Examples
+    #
+    #   = nav do |item|
+    #     = item.add(link_to('link 1', '#'))
+    #     = item.add(link_to('link 2', '#'))
+    #     = item.add(link_to('link 3', '#'))
+    #   # => <ul class="nav nav-">
+    #          <li><a href="#">link 1</a></li>
+    #          <li><a href="#">link 2</a></li>
+    #          <li><a href="#">link 3</a></li>
+    #        </ul>
+    #
+    #   = nav(type: 'tabs') do |item|
+    #     = item.add(link_to('link 1', '#'))
+    #     = item.add(link_to('link 2', '#'))
+    #     = item.add(link_to('link 3', '#'))
+    #   # => <ul class="nav nav-tabs">
+    #          <li><a href="#">link 1</a></li>
+    #          <li><a href="#">link 2</a></li>
+    #          <li><a href="#">link 3</a></li>
+    #        </ul>
+    #
+    # Returns the whole nav.
+    def nav(type: '', stacked: false, **options, &block)
+      nav_class = 'nav'
+
+      if type.blank? || %w(tabs pills).include?(type)
+        nav_class << " nav-#{type}"
+      else
+        raise "Error nav type, must be in tabs and pills."
+      end
+
+      nav_class << ' nav-stacked' if stacked
+
+      list(merge_predef_class(nav_class, options), &block)
+    end
+
+    # Public: Bootstrap navbar. Only implements the navbar at the top of the
+    #         page.
+    #
+    #
+    # fixed   - Boolean. If set to false, the navbar wouldn't be shown at the
+    #           top of the page always while scrolling the page.
+    #           ( default: true )
+    # fluid   - Boolean. If set to false, the navbar uses a fixed layout for its
+    #           content. ( default: true )
+    # inverse - Boolean. Whether inverses the background color of the navbar.
+    # options - Other options can be accepted by navbar.
+    # block   - the content of a navbar, usually are navs and logos.
+    #
+    # Examples
+    #
+    #   = navbar do
+    #     = link_to('Title', '#', class: 'brand')
+    #     = nav do
+    #       = link_to('link 1', '#')
+    #       = link_to('link 2', '#')
+    #       = link_to('link 3', '#')
+    #   # => <div class="navbar navbar-fixed-top">
+    #          <div class="navbar-inner">
+    #            <a href="#" class="brand">Title</a>
+    #            <ul class="nav nav-">
+    #              <li><a href="#">link 1</a></li>
+    #              <li><a href="#">link 2</a></li>
+    #              <li><a href="#">link 3</a></li>
+    #            </ul>
+    #          </div>
+    #        </div>
+    #
+    #   = navbar(fluid: false) do
+    #     = link_to('Title', '#', class: 'brand')
+    #     = nav do
+    #       = link_to('link 1', '#')
+    #       = link_to('link 2', '#')
+    #       = link_to('link 3', '#')
+    #   # => <div class="navbar navbar-fixed-top">
+    #          <div class="navbar-inner">
+    #            <div class="container">
+    #              <a href="#" class="brand">Title</a>
+    #              <ul class="nav nav-">
+    #                <li><a href="#">link 1</a></li>
+    #                <li><a href="#">link 2</a></li>
+    #                <li><a href="#">link 3</a></li>
+    #              </ul>
+    #            </div>
+    #          </div>
+    #        </div>
+    #
+    # Return the whole navbar
+    def navbar(fluid: true, inverse: false, fixed: true, **options, &block)
+      navbar_class = %w(navbar)
+
+      if fixed
+        navbar_class << 'navbar-fixed-top'
+      else
+        navbar_class << 'navbar-static-top'
+      end
+
+      navbar_class << 'navbar-inverse' if inverse
+
+
+      div(merge_predef_class(navbar_class.join(' '), options)) do
+        div(class: 'navbar-inner') do
+          if fluid
+            capture(&block) if block_given?
+          else
+            div(class: 'container') do
+              capture(&block) if block_given?
+            end
+          end
+        end
+      end
+    end
+
+    # Breadcrumbs not implemented
+
+    # Public: Bootstrap labels.
+    #
+    # text    - String. Label text.
+    # type    - String. A string of success, warning, important, info or inverse
+    #           ( default: 'default' )
+    # tag     - Symbol or String. Html tag of the label. ( default: 'span' )
+    # options - Other options can be accepted by the tag specified.
+    #
+    # Examples
+    #
+    #   l("I'm a label")
+    #   # => <span class="label label-default">I'm a label</span>
+    #
+    #   l("I'm a label", type: 'success')
+    #   # => <span class="label label-success">I'm a label</span>
+    #
+    #   l("I'm a label", style: 'color: #999;')
+    #   # => <span class="label label-default" style="color: #999;">
+    #          I'm a label
+    #        </span>
+    #
+    # Returns the label html.
+    def l(text, type: 'default', tag: 'span', **options)
+      content_tag(tag, text, merge_predef_class("label label-#{type.to_s}", options))
+    end
+
+    # Public: Bootstrap badges.
+    #
+    # text    - String. badge text.
+    # type    - String. A string of success, warning, important, info or inverse
+    #           ( default: 'default' )
+    # tag     - Symbol or String. Html tag of the badge. ( default: 'span' )
+    # options - Other options can be accepted by the tag specified.
+    #
+    # Examples
+    #
+    #   b("I'm a badge")
+    #   # => <span class="badge badge-default">I'm a badge</span>
+    #
+    #   b("I'm a label", type: 'success')
+    #   # => <span class="badge badge-success">I'm a badge</span>
+    #
+    #   b("I'm a label", style: 'color: #999;')
+    #   # => <span class="badge badge-default" style="color: #999;">
+    #          I'm a badge
+    #        </span>
+    #
+    # Returns the badge html.
+    def badge(text, type: 'default', tag: 'span', **options)
+      content_tag(tag, text, merge_predef_class("badge badge-#{type.to_s}", options))
+    end
+
+    alias_method :b, :badge
+
+    # Public: Thumbnails grids of images, videos, text, and more.
+    #
+    # options - Options can be accepted by ul.
+    # block   - The content of thumbnails, usually are several thumbnail holders
+    #
+    # Example
+    #
+    #   = tns do
+    #     = th(3) do
+    #       = tn do
+    #         = image_tag('hello.png')
+    #         %h3 Title
+    #         %p Description
+    #   # => <ul class="thumbnails">
+    #          <li class="span3">
+    #            <div class="thumbnail">
+    #              <img src="/assets/hello.png">
+    #              <h3>Title</h3>
+    #              <p>Description</p>
+    #            </div>
+    #          </li>
+    #        </ul>
+    #
+    # Returns the whole thumbnails
+    def thumbnails(options = {}, &block)
+      content_tag('ul', nil, merge_predef_class('thumbnails', options)) do
+        capture(&block) if block_given?
+      end
+    end
+
+    # Public: Thumbnail holders, represented by li, used in thumbnails helper.
+    #
+    # span    - Integer. Width of thumbnail, 1-12. ( default: 12 )
+    # options - Options can be accepted by li.
+    # block   - The content of thumbnail holder, usually is a thumbnail.
+    #
+    # Examples
+    #   See thumbnails helper.
+    def thumbnail_holder(span = 12, options = {}, &block)
+      content_tag('li', nil, merge_predef_class("span#{span}", options)) do
+        capture(&block) if block_given?
+      end
+    end
+
+    # Public: Thumbnail element.
+    #
+    # tag     - Symbol or String. HTML tag of thumbnail. ( default: :div )
+    # options - Options can be accepted by the tag specified.
+    def thumbnail(tag: :div, **options, &block)
+      content_tag(tag, nil, merge_predef_class('thumbnail', options)) do
+        capture(&block)
+      end
+    end
+
+    alias_method :tns, :thumbnails
+    alias_method :th, :thumbnail_holder
+    alias_method :tn, :thumbnail
+
+    # Public: Bootstrap alerts. For success, warning, and error messages.
+    #
+    # message  - String. The message of alert.
+    # type     - Symbol or String. Type of alerts: error, warning, success,
+    #            info. ( default: :info )
+    # blocked  - Boolean. Add padding-top and padding-bottom to alert.
+    #            ( default: false )
+    # closable - Boolean. Add a close button to alert. ( default: true )
+    # options  - Other options that can be accepted by div.
+    # block    - Content of the alert. It can be a string or a HTML block.
+    #
+    # Examples
+    #
+    #   f(message: 'Hello World')
+    #   # => <div class="alert alert-info">
+    #          <a href="#" class="close" data-dismiss="alert">&times;</a>
+    #          Hello World
+    #        </div>
+    #
+    #   f(message: 'Hello World', type: :success, block: true)
+    #   # => <div class="alert alert-success alert-block">
+    #          <a href="#" class="close" data-dismiss="alert">&times;</a>
+    #          Hello World
+    #        </div>
+    #
+    #   = f do
+    #     %h3 Hello World
+    #     %p foo bar
+    #   # => <div class="alert alert-info">
+    #          <a href="#" class="close" data-dismiss="alert">&times;</a>
+    #          <h3>Hello World</h3>
+    #          <p>foo bar</p>
+    #        </div>
+    #
+    # Returns the whole alert.
+    def f(message: '', type: :info, blocked: false, closable: true, **options, &block)
+      flash_class = 'alert'
+      flash_class << " alert-#{type.to_s}"
+      flash_class << ' alert-block' if blocked
+
+      content_tag(:div, nil, merge_predef_class(flash_class, options)) do
+        content = ''
+        content << '<a href="#" class="close" data-dismiss="alert">&times;</a>' if closable
+        if block_given?
+          content << capture(&block)
+        else
+          content << message if message.present?
+        end
+        content.html_safe
+      end
+    end
+
+    # Public: Bootstrap progress bars.
+    #
+    # type        - String. Type of progress bar. It can be success, warning,
+    #               danger, info. ( default: '' )
+    # percentage  - Integer. Progress of the progress bar. 0 - 100.
+    #               ( default: 0 )
+    # conent      - String. Text of the progress bar. It will be shown in the
+    #               center of the bar. ( default: '' )
+    # bar_options - Other options can be accepted by div.
+    # striped     - Boolean. Uses a gradient to create a striped effect. Not
+    #               available in IE7-8. ( default: false )
+    # active      - Boolean. Add .active to .progress-striped to animate the
+    #               stripes right to left. Not available in all versions of IE.
+    #               ( default: false )
+    # in_table    - Boolean. If progress is in a table, set the margin-bottom
+    #               to zero. ( default: false )
+    # options     - Other options that can be acctpted by div.
+    # block       - The content of the progress. If a block has been passed,
+    #               the arguments of type, percentage, content, bar_options
+    #               would be ignored. The block should contain one or more
+    #               progress bars.
+    #
+    # Examples
+    #
+    #   pg(type: 'success', percentage: 25, striped: true)
+    #   # => <div class="progress progress-striped">
+    #          <div class="bar bar-success" style="width: 25%">
+    #          </div>
+    #        </div>
+    #
+    #   = pg do
+    #     = pb(type: 'success', percentage: 25)
+    #     = pb(type: 'info', percentage: 25)
+    #   # => <div class="progress">
+    #          <div class="bar bar-success" style="width: 25%">
+    #          </div>
+    #          <div class="bar bar-info" style="width: 25%">
+    #          </div>
+    #        </div>
+    #
+    # Return the whole progress component.
+    def progress(type: '',
+                 percentage: 0,
+                 content: '',
+                 bar_options: {},
+                 active: false,
+                 striped: false,
+                 in_table: false,
+                 **options,
+                 &block)
+
+      progress_class = "progress"
+      progress_class << " progress-striped" if striped
+      progress_class << " active" if active
+
+      options[:style] ||= ""
+      options[:style] << "margin-bottom: 0;" if in_table
+
+      div(merge_predef_class(progress_class, options)) do
+        content = ''
+        if block_given?
+          content << capture(&block)
+        else
+          content << progress_bar(bar_options.reverse_merge!(type: type,
+            percentage: percentage, content: content))
+        end
+        content.html_safe
+      end
+    end
+
+    alias_method :pg, :progress
+
+    def progress_bar(type: '', percentage: 0, content: '', **options)
+      bar_class = "bar bar-#{type.to_s}"
+
+      options[:style] ||= ""
+      options[:style] << "width: #{percentage.to_i}%;"
+      content_tag('div', content, merge_predef_class(bar_class, options))
+    end
+
+    alias_method :pb, :progress_bar
+
+    # Miscellaneous Lightweight utility components
+
+    # Public: Bootstrap modal component, wraps bootstrap-modal-rails gem to
+    #         provide more features, see http://jschr.github.io/bootstrap-modal
+    #
+    #
+    # id          - String. HTML id attribute of the modal component.
+    # header_text - String. Text would be shown on the top of the modal.
+    # header      - String. Header of modal, a html string replaces
+    #               default header.
+    # footer_text - String. Text would be shown on the bottom button of
+    #               the modal. ( default: 'Close' )
+    # footer      - String. Footer of modal, a html string replaces default
+    #               footer.
+    # width       - Integer. Width of modal.
+    # static      - Boolean. Static Background with Animation. ( default: true )
+    # fullwidth   - Boolean. Show full width modal. ( default: false )
+    # long        - Boolean. Show very long modal. ( default: false )
+    # options     - Other options can be accepted by div.
+    # block       - HTML block shows the content of the modal.
+    #
+    # Examples
+    #
+    #
+    # Returns the whole modal.
+    def modal(id,
+              header_text,
+              header: "<button type='button' data-dismiss='modal' class='close'>&times;</button><h3>#{header_text}</h3>",
+              footer_text: nil,
+              footer: "<button class='btn' data-dismiss='modal' type='button'>#{footer_text||'Close'}</button>",
+              width: nil,
+              static: true,
+              fullwidth: false,
+              long: false,
+              **options,
+              &block)
+
+      options.merge!(:'data-backdrop' => 'static', :'data-keyboard' => 'false') if static
+      options.merge!(:'data-replace' => 'true') if long
+      options.merge!(:'data-width' => width) if width
+      options.merge!(id: id)
+
+      div(merge_predef_class("modal hide fade #{fullwidth ? 'container' : ''}", options)) do
+        content = ''
+        content << div(class: 'modal-header') do
+          header.html_safe
+        end
+        content << div(class: 'modal-body') do
+          capture(&block) if block_given?
+        end
+        content << div(class: 'modal-footer') do
+          footer.html_safe
+        end
+        content.html_safe
+      end
+    end
+
+    # Public: Show a link which can toggle the modal.
+    #
+    # modal_id - String. HTML id attribute of the modal which should be opened.
+    # text     - String. Text of the trigger.
+    # type     - String. 'a' or 'b', 'a' shows link style, 'b' shows button
+    #            style. ( default: 'a' )
+    # icon     - String or Array. Glyph icon of trigger. Just like glyph_icon
+    #            helper.
+    # options  - Other options can be accepted by link.
+    #
+    # Examples
+    #
+    #   modal_trigger('modal', 'Click Me')
+    #   # => <a href="#modal" id="trigger-modal" data-toggle="modal">
+    #          Click Me
+    #        </a>
+    #
+    #   modal_trigger('modal', 'Click Me', type: 'b', icon: 'plus')
+    #   # => <a href="#modal" id="trigger-modal" data-toggle="modal"
+    #           class="btn">
+    #          <i class="icon-plus"></i>
+    #          Click Me
+    #        </a>
+    #
+    # Returns a link which can open the modal.
+    def modal_trigger(modal_id,
+                      text,
+                      type: 'a',
+                      icon: nil,
+                      **options)
+      options.merge!(id: "trigger-#{modal_id}")
+      options.merge!(:'data-toggle' => 'modal')
+
+      merge_predef_class('btn', options) if type == 'b'
+
+      link_to("##{modal_id}", options) do
+        content = ''
+        content << glyph_icon(icon) if icon
+        content << text
+        content.html_safe
+      end
+    end
+
+    # Public: Show a link which can toggle the modal and the modal itself.
+    #
+    # id              - String. HTML id attribute of the modal which should be
+    #                   opened.
+    # header_text     - String. Text would be shown on the top of the modal.
+    # trigger_text    - String. Text of the trigger.
+    # options         - Options can be accepted by modal, see modal helper.
+    # trigger_options - Options can be accepted by modal trigger, see
+    #                   modal_trigger helper.
+    # block           - HTML block shows the content of the modal.
+    #
+    # Examples
+    #
+    #
+    # Returns a link with a modal would be opened by this link.
+    def modal_with_trigger(id,
+      header_text,
+      trigger_text,
+      options = {},
+      trigger_options = {},
+      &block)
+
+      content = modal(id, header_text, options) do
+        capture(&block) if block_given?
+      end
+
+      content << modal_trigger(id, trigger_text, trigger_options)
+      content.html_safe
+    end
+  end
+end