bootstrap_styleguide 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 4e07ba219915a8ea0856974ab8abe245b8307880572ea14884c6d7c65fb93700
+  data.tar.gz: 5360c3f70fefb9e1bb224c8f0b341c21e386175372a3bf052ec38aee1eac7924
+SHA512:
+  metadata.gz: 22845b381ed47f6722109a8fd1ba3ed08a58c5bb11ecd74b2659d9306c884e46b5614e5d707ecec017df9152d485b28730e853c06da0a4bb6b18199934134bd2
+  data.tar.gz: e880836d535c4dac0ab8b86d9c4ffbc22528aca9228e77a700d282909eab9d557893b17586b472c7a870b3c9cd2238139b384c39656f3281382578c818f58922

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2021 santiago bertinat
+
+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,31 @@
+# BootstrapStyleguide
+Bootstrap Styleguide is an easy way to generate a complete styleguide for your rails + bootstrap proyect.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'bootstrap_styleguide'
+```
+
+And then execute:
+```bash
+$ bundle install
+```
+
+Or install it yourself as:
+```bash
+$ gem install bootstrap_styleguide
+```
+
+If you want to override the styleguide views and add your custom styles and components please run:
+
+```bash
+$ rails generate bootstrap_styleguide:install
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,18 @@
+require 'bundler/setup'
+
+APP_RAKEFILE = File.expand_path('test/dummy/Rakefile', __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/config/bootstrap_styleguide_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/bootstrap_styleguide .css

data/app/assets/stylesheets/bootstrap_styleguide/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/controllers/bootstrap_styleguide/application_controller.rb

@@ -0,0 +1,5 @@
+module BootstrapStyleguide
+  class ApplicationController < ActionController::Base
+    layout 'styleguide'
+  end
+end

data/app/controllers/bootstrap_styleguide/components_controller.rb

@@ -0,0 +1,5 @@
+module BootstrapStyleguide
+  class ComponentsController < ApplicationController
+
+  end
+end

data/app/controllers/bootstrap_styleguide/content_controller.rb

@@ -0,0 +1,5 @@
+module BootstrapStyleguide
+  class ContentController < ApplicationController
+
+  end
+end

data/app/controllers/bootstrap_styleguide/forms_controller.rb

@@ -0,0 +1,5 @@
+module BootstrapStyleguide
+  class FormsController < ApplicationController
+
+  end
+end

data/app/controllers/bootstrap_styleguide/layout_controller.rb

@@ -0,0 +1,5 @@
+module BootstrapStyleguide
+  class LayoutController < ApplicationController
+
+  end
+end

data/app/controllers/bootstrap_styleguide/styleguide_controller.rb

@@ -0,0 +1,6 @@
+module BootstrapStyleguide
+  class StyleguideController < ApplicationController
+    def index
+    end
+  end
+end

data/app/controllers/bootstrap_styleguide/utilities_controller.rb

@@ -0,0 +1,5 @@
+module BootstrapStyleguide
+  class UtilitiesController < ApplicationController
+
+  end
+end

data/app/helpers/bootstrap_styleguide/application_helper.rb

@@ -0,0 +1,37 @@
+module BootstrapStyleguide
+  module ApplicationHelper
+    def layout_items
+      [:breakpoints, :containers, :grid]
+    end
+
+    def content_items
+      [:typography, :images, :tables]
+    end
+
+    def forms_items
+      [:select, :checks_and_radios, :range, :input_group, :floating_labels]
+    end
+
+    def components_items
+      [
+        :accordion, :alerts, :badge, :breadcrumbs, :buttons, :button_group, :cards, :carousel,
+        :close_button, :collapse, :dropdowns, :modal, :navs_and_tabs, :navbar, :offcanvas, :pagination,
+        :popovers, :progress, :spinners, :toasts, :tooltips
+      ]
+    end
+
+    def utilities_items
+      [:background, :borders, :colors, :shadows, :spacing, :text]
+    end
+
+    def example_with_code(&block)
+      content = capture(&block)
+
+      content += tag.pre class: 'bg-light-gray mt-3 pb-3' do
+        tag.code do
+          "#{content}"
+        end
+      end
+    end
+  end
+end

data/app/jobs/bootstrap_styleguide/application_job.rb

@@ -0,0 +1,4 @@
+module BootstrapStyleguide
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/bootstrap_styleguide/application_mailer.rb

@@ -0,0 +1,6 @@
+module BootstrapStyleguide
+  class ApplicationMailer < ActionMailer::Base
+    default from: 'from@example.com'
+    layout 'mailer'
+  end
+end

data/app/models/bootstrap_styleguide/application_record.rb

@@ -0,0 +1,5 @@
+module BootstrapStyleguide
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/bootstrap_styleguide/components/accordion.html.erb

@@ -0,0 +1,47 @@
+<h1 id="content">Accordion</h1>
+<p class="bd-lead">Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.</p>
+
+<h2>Example</h2>
+
+<p>Click the accordions below to expand/collapse the accordion content.</p>
+
+<%= example_with_code do %>
+  <div class="accordion" id="accordionExample">
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingOne">
+        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+          Accordion Item #1
+        </button>
+      </h2>
+      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+        <div class="accordion-body">
+          <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingTwo">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+          Accordion Item #2
+        </button>
+      </h2>
+      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+        <div class="accordion-body">
+          <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingThree">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+          Accordion Item #3
+        </button>
+      </h2>
+      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+        <div class="accordion-body">
+          <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/bootstrap_styleguide/components/alerts.html.erb

@@ -0,0 +1,33 @@
+<h1 id="content">Alerts</h1>
+<p class="bd-lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
+
+<h2>Example</h2>
+
+<p>Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code>.alert-success</code>).</p>
+
+<%= example_with_code do %>
+  <div class="alert alert-primary" role="alert">
+    A simple primary alert—check it out!
+  </div>
+  <div class="alert alert-secondary" role="alert">
+    A simple secondary alert—check it out!
+  </div>
+  <div class="alert alert-success" role="alert">
+    A simple success alert—check it out!
+  </div>
+  <div class="alert alert-danger" role="alert">
+    A simple danger alert—check it out!
+  </div>
+  <div class="alert alert-warning" role="alert">
+    A simple warning alert—check it out!
+  </div>
+  <div class="alert alert-info" role="alert">
+    A simple info alert—check it out!
+  </div>
+  <div class="alert alert-light" role="alert">
+    A simple light alert—check it out!
+  </div>
+  <div class="alert alert-dark" role="alert">
+    A simple dark alert—check it out!
+  </div>
+<% end %>

data/app/views/bootstrap_styleguide/components/badge.html.erb

@@ -0,0 +1,41 @@
+<h1 id="content">Badges</h1>
+<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
+
+<h2>Example</h2>
+
+<p>Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of v5, badges no longer have focus or hover styles for links.</p>
+
+<h3>Headings</h3>
+
+<%= example_with_code  do %>
+  <h1>Example heading <span class="badge bg-secondary">New</span></h1>
+  <h2>Example heading <span class="badge bg-secondary">New</span></h2>
+  <h3>Example heading <span class="badge bg-secondary">New</span></h3>
+  <h4>Example heading <span class="badge bg-secondary">New</span></h4>
+  <h5>Example heading <span class="badge bg-secondary">New</span></h5>
+  <h6>Example heading <span class="badge bg-secondary">New</span></h6>
+<% end %>
+
+<h3>Buttons</h3>
+
+<p>Badges can be used as part of links or buttons to provide a counter.</p>
+
+<%= example_with_code do %>
+  <button type="button" class="btn btn-primary">
+    Notifications <span class="badge bg-secondary">4</span>
+  </button>
+<% end %>
+
+<h3>Positioned</h3>
+
+<p>Use utilities to modify a <code>.badge</code> and position it in the corner of a link or button.</p>
+
+<%= example_with_code do %>
+  <button type="button" class="btn btn-primary position-relative">
+    Inbox
+    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+      99+
+      <span class="visually-hidden">unread messages</span>
+    </span>
+  </button>
+<% end %>

data/app/views/bootstrap_styleguide/components/breadcrumbs.html.erb

@@ -0,0 +1,42 @@
+<h1 id="content">Breadcrumb</h1>
+<p class="bd-lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
+
+<h2>Example</h2>
+
+<p>Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.</p>
+
+<%= example_with_code do %>
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item active" aria-current="page">Home</li>
+    </ol>
+  </nav>
+
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+  </nav>
+<% end %>
+
+<h2>Dividers</h2>
+
+<p>Dividers are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code>content</code></a>. They can be changed by modifying a local CSS custom property <code>--bs-breadcrumb-divider</code>, or through the <code>$breadcrumb-divider</code> Sass variable — and <code>$breadcrumb-divider-flipped</code> for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.</p>
+
+<%= example_with_code do %>
+  <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Library</li>
+    </ol>
+  </nav>
+<% end %>

data/app/views/bootstrap_styleguide/components/button_group.html.erb

@@ -0,0 +1,67 @@
+<h1 id="content">Button group</h1>
+<p class="bd-lead">Group a series of buttons together on a single line or stack them in a vertical column.</p>
+
+<h2>Basic example</h2>
+<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
+
+<%= example_with_code do %>
+  <div class="btn-group" role="group" aria-label="Basic example">
+    <button type="button" class="btn btn-primary">Left</button>
+    <button type="button" class="btn btn-primary">Middle</button>
+    <button type="button" class="btn btn-primary">Right</button>
+  </div>
+<% end %>
+
+<h2>Checkbox and radio button groups</h2>
+
+<p>Combine button-like checkbox and radio toggle buttons into a seamless looking button group.</p>
+
+<%= example_with_code do %>
+  <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
+
+    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
+
+    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
+  </div>
+<% end %>
+
+<% example_with_code do %>
+  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
+    <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
+
+    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
+
+    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
+  </div>
+<% end %>
+
+<h2>Sizing</h2>
+
+<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including each one when nesting multiple groups.</p>
+
+<%= example_with_code do %>
+    <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
+      <button type="button" class="btn btn-outline-dark">Left</button>
+      <button type="button" class="btn btn-outline-dark">Middle</button>
+      <button type="button" class="btn btn-outline-dark">Right</button>
+    </div>
+    <br>
+    <div class="btn-group mt-2" role="group" aria-label="Default button group">
+      <button type="button" class="btn btn-outline-dark">Left</button>
+      <button type="button" class="btn btn-outline-dark">Middle</button>
+      <button type="button" class="btn btn-outline-dark">Right</button>
+    </div>
+    <br>
+    <div class="btn-group btn-group-sm mt-2" role="group" aria-label="Small button group">
+      <button type="button" class="btn btn-outline-dark">Left</button>
+      <button type="button" class="btn btn-outline-dark">Middle</button>
+      <button type="button" class="btn btn-outline-dark">Right</button>
+    </div>
+<% end %>

data/app/views/bootstrap_styleguide/components/buttons.html.erb

@@ -0,0 +1,43 @@
+<h1 class="bd-title" id="content">Buttons</h1>
+
+<p>Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
+
+<h2>Examples</h2>
+<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
+
+<%= example_with_code do %>
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-success">Success</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-light">Light</button>
+  <button type="button" class="btn btn-dark">Dark</button>
+
+  <button type="button" class="btn btn-link">Link</button>
+<% end %>
+
+<h2>Outline buttons</h2>
+<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code>.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
+
+<%= example_with_code do %>
+  <button type="button" class="btn btn-outline-primary">Primary</button>
+  <button type="button" class="btn btn-outline-secondary">Secondary</button>
+  <button type="button" class="btn btn-outline-success">Success</button>
+  <button type="button" class="btn btn-outline-danger">Danger</button>
+  <button type="button" class="btn btn-outline-warning">Warning</button>
+  <button type="button" class="btn btn-outline-info">Info</button>
+  <button type="button" class="btn btn-outline-light">Light</button>
+  <button type="button" class="btn btn-outline-dark">Dark</button>
+<% end %>
+
+<h2>Sizes</h2>
+
+<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p>
+
+<%= example_with_code do %>
+  <button type="button" class="btn btn-primary btn-lg">Large button</button>
+  <button type="button" class="btn btn-secondary">Default button</button>
+  <button type="button" class="btn btn-secondary btn-sm">Small button</button>
+<% end %>

data/app/views/bootstrap_styleguide/components/cards.html.erb

@@ -0,0 +1,72 @@
+<h1 class="bd-title" id="content">Cards</h1>
+
+<p>Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</p>
+
+<h2>Example</h2>
+
+<p>Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.</p>
+
+<p>Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.</p>
+
+<%= example_with_code do %>
+  <div class="card" style="width: 18rem;">
+    <img src="..." class="card-img-top" alt="...">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      <a href="#" class="btn btn-primary">Go somewhere</a>
+    </div>
+  </div>
+<% end %>
+
+<%= example_with_code do %>
+  <div class="card" style="width: 18rem;">
+    <img src="..." class="card-img-top" alt="...">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    </div>
+    <ul class="list-group list-group-flush">
+      <li class="list-group-item">An item</li>
+      <li class="list-group-item">A second item</li>
+      <li class="list-group-item">A third item</li>
+    </ul>
+    <div class="card-body">
+      <a href="#" class="card-link">Card link</a>
+      <a href="#" class="card-link">Another link</a>
+    </div>
+  </div>
+<% end %>
+
+<h2>Header and footer</h2>
+
+<p>Add an optional header and/or footer within a card.</p>
+
+<%= example_with_code do %>
+  <div class="card">
+    <div class="card-header">
+      Featured
+    </div>
+    <div class="card-body">
+      <h5 class="card-title">Special title treatment</h5>
+      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+      <a href="#" class="btn btn-primary">Go somewhere</a>
+    </div>
+  </div>
+<% end %>
+
+<%= example_with_code do %>
+  <div class="card text-center">
+    <div class="card-header">
+      Featured
+    </div>
+    <div class="card-body">
+      <h5 class="card-title">Special title treatment</h5>
+      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+      <a href="#" class="btn btn-primary">Go somewhere</a>
+    </div>
+    <div class="card-footer text-muted">
+      2 days ago
+    </div>
+  </div>
+<% end %>

data/app/views/bootstrap_styleguide/components/carousel.html.erb

@@ -0,0 +1,5 @@
+<h1 class="bd-title" id="content">Carousel</h1>
+
+<p>A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
+
+<h2>Example</h2>

data/app/views/bootstrap_styleguide/components/close_button.html.erb

@@ -0,0 +1,10 @@
+<h1 id="content">Close button</h1>
+<p class="bd-lead">A generic close button for dismissing content like modals and alerts.</p>
+
+<h2>Example</h2>
+
+<p>Provide an option to dismiss or close a component with <code>.btn-close</code>. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default <code>background-image</code>. <strong>Be sure to include text for screen readers</strong>, as we’ve done with <code>aria-label</code>.</p>
+
+<%= example_with_code do %>
+  <button type="button" class="btn-close" aria-label="Close"></button>
+<% end %>

data/app/views/bootstrap_styleguide/components/collapse.html.erb

@@ -0,0 +1,59 @@
+
+<h1 id="content">Collapse</h1>
+<p class="bd-lead">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
+
+<h2>Example</h2>
+
+<p>Click the buttons below to show and hide another element via class changes:</p>
+
+<ul>
+  <li><code>.collapse</code> hides content</li>
+  <li><code>.collapsing</code> is applied during transitions</li>
+  <li><code>.collapse.show</code> shows content</li>
+</ul>
+
+<p>Generally, we recommend using a button with the <code>data-bs-target</code> attribute. While not recommended from a semantic point of view, you can also use a link with the <code>href</code> attribute (and a <code>role="button"</code>). In both cases, the <code>data-bs-toggle="collapse"</code> is required.</p>
+
+<%= example_with_code do %>
+  <p>
+    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
+      Link with href
+    </a>
+    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+      Button with data-bs-target
+    </button>
+  </p>
+  <div class="collapse" id="collapseExample">
+    <div class="card card-body">
+      Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
+    </div>
+  </div>
+<% end %>
+
+<h2>Multiple targets</h2>
+
+<p>A <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> can show and hide multiple elements by referencing them with a selector in its <code>href</code> or <code>data-bs-target</code> attribute. Multiple <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> can show and hide an element if they each reference it with their <code>href</code> or <code>data-bs-target</code> attribute</p>
+
+<%= example_with_code do %>
+  <p>
+    <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
+    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
+    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
+  </p>
+  <div class="row">
+    <div class="col">
+      <div class="collapse multi-collapse" id="multiCollapseExample1">
+        <div class="card card-body">
+          Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
+        </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="collapse multi-collapse" id="multiCollapseExample2">
+        <div class="card card-body">
+          Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>