README.md in actionview-component-1.7.0 vs README.md in actionview-component-1.8.0

- old
+ new

@@ -199,11 +199,10 @@ `ActiveModel::ValidationError: Validation failed: Title can't be blank` #### Content Areas - A component can declare additional content areas to be rendered in the component. For example: `app/components/modal_component.rb`: ```ruby class ModalComponent < ActionView::Component::Base @@ -302,11 +301,11 @@ `app/views/with_block.html.erb`: ```erb <%= render(ModalComponent) do |component| %> <% component.with(:header) do %> - <span class="help_icon">Hello</span> + <span class="help_icon">Hello</span> <% end %> <% component.with(:body) do %> <p>Have a great day.</p> <% end %> <% end %> @@ -348,11 +347,11 @@ `app/views/with_block.html.erb`: ```erb <%= render(ModalComponent) do |component| %> <% component.with(:header) do %> - <span class="help_icon">Hello</span> + <span class="help_icon">Hello</span> <% end %> <% component.with(:body) do %> <p>Have a great day.</p> <% end %> <% end %> @@ -365,10 +364,61 @@ <p>Have a great day.</p> <% end %> <% end %> ``` +### Conditional Rendering + +Components can implement a `#render?` method which indicates if they should be rendered, or not at all. + +For example, you might have a component that displays a "Please confirm your email address" banner to users who haven't confirmed their email address. The logic for rendering the banner would need to go in either the component template: + +``` +<!-- app/components/confirm_email_component.html.erb --> +<% if user.requires_confirmation? %> + <div class="alert"> + Please confirm your email address. + </div> +<% end %> +``` + +or the view that renders the component: + +```erb +<!-- app/views/_banners.html.erb --> +<% if current_user.requires_confirmation? %> + <%= render(ConfirmEmailComponent, user: current_user) %> +<% end %> +``` + +The `#render?` hook allows you to move this logic into the Ruby class, leaving your views more readable and declarative in style: + +```ruby +# app/components/confirm_email_component.rb +class ConfirmEmailComponent < ApplicationComponent + def initialize(user:) + @user = user + end + + def render? + @user.requires_confirmation? + end +end +``` + +``` +<!-- app/components/confirm_email_component.html.erb --> +<div class="banner"> + Please confirm your email address. +</div> +``` + +```erb +<!-- app/views/_banners.html.erb --> +<%= render(ConfirmEmailComponent, user: current_user) %> +``` + ### Testing Components are unit tested directly. The `render_inline` test helper wraps the result in `Nokogiri.HTML`, allowing us to test the component above as: ```ruby @@ -442,10 +492,20 @@ ```ruby config.action_view_component.preview_path = "#{Rails.root}/lib/component_previews" ``` +#### Configuring TestController + +By default components tests and previews expect your Rails project to contain an `ApplicationController` class from which Controller classes inherit. +This can be configured using the `test_controller` option. +For example, if your controllers inherit from `BaseController`, set the following in `config/application.rb`: + +```ruby +config.action_view_component.test_controller = "BaseController" +``` + ### Setting up RSpec If you're using RSpec, you can configure component specs to have access to test helpers. Add the following to `spec/rails_helper.rb`: @@ -496,9 +556,38 @@ - [Demo repository, actionview-component-demo](https://github.com/joelhawksley/actionview-component-demo) ## Contributing Bug reports and pull requests are welcome on GitHub at https://github.com/github/actionview-component. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct. We recommend reading the [contributing guide](./CONTRIBUTING.md) as well. + +## Contributors + +`actionview-component` is built by: + +|<img src="https://avatars.githubusercontent.com/joelhawksley?s=256" alt="joelhawksley" width="128" />|<img src="https://avatars.githubusercontent.com/tenderlove?s=256" alt="tenderlove" width="128" />|<img src="https://avatars.githubusercontent.com/jonspalmer?s=256" alt="jonspalmer" width="128" />|<img src="https://avatars.githubusercontent.com/juanmanuelramallo?s=256" alt="juanmanuelramallo" width="128" />|<img src="https://avatars.githubusercontent.com/vinistock?s=256" alt="vinistock" width="128" />| +|:---:|:---:|:---:|:---:|:---:| +|@joelhawksley|@tenderlove|@jonspalmer|@juanmanuelramallo|@vinistock| +|Denver|Seattle|Boston||Toronto| + +|<img src="https://avatars.githubusercontent.com/metade?s=256" alt="metade" width="128" />|<img src="https://avatars.githubusercontent.com/asgerb?s=256" alt="asgerb" width="128" />|<img src="https://avatars.githubusercontent.com/xronos-i-am?s=256" alt="xronos-i-am" width="128" />|<img src="https://avatars.githubusercontent.com/dylnclrk?s=256" alt="dylnclrk" width="128" />|<img src="https://avatars.githubusercontent.com/kaspermeyer?s=256" alt="kaspermeyer" width="128" />| +|:---:|:---:|:---:|:---:|:---:| +|@metade|@asgerb|@xronos-i-am|@dylnclrk|@kaspermeyer| +|London|Copenhagen|Russia, Kirov|Berkeley, CA|Denmark| + +|<img src="https://avatars.githubusercontent.com/rdavid1099?s=256" alt="rdavid1099" width="128" />|<img src="https://avatars.githubusercontent.com/kylefox?s=256" alt="kylefox" width="128" />|<img src="https://avatars.githubusercontent.com/traels?s=256" alt="traels" width="128" />|<img src="https://avatars.githubusercontent.com/rainerborene?s=256" alt="rainerborene" width="128" />|<img src="https://avatars.githubusercontent.com/jcoyne?s=256" alt="jcoyne" width="128" />| +|:---:|:---:|:---:|:---:|:---:| +|@rdavid1099|@kylefox|@traels|@rainerborene|@jcoyne| +|Los Angeles|Edmonton|Odense, Denmark|Brazil|Minneapolis| + +|<img src="https://avatars.githubusercontent.com/elia?s=256" alt="elia" width="128" />|<img src="https://avatars.githubusercontent.com/cesariouy?s=256" alt="cesariouy" width="128" />|<img src="https://avatars.githubusercontent.com/spdawson?s=256" alt="spdawson" width="128" />|<img src="https://avatars.githubusercontent.com/rmacklin?s=256" alt="rmacklin" width="128" />|<img src="https://avatars.githubusercontent.com/michaelem?s=256" alt="michaelem" width="128" />| +|:---:|:---:|:---:|:---:|:---:| +|@elia|@cesariouy|@spdawson|@rmacklin|@michaelem| +|Milan||United Kingdom||Berlin| + +|<img src="https://avatars.githubusercontent.com/mellowfish?s=256" alt="mellowfish" width="128" />|<img src="https://avatars.githubusercontent.com/horacio?s=256" alt="horacio" width="128" />|<img src="https://avatars.githubusercontent.com/dukex?s=256" alt="dukex" width="128" />|<img src="https://avatars.githubusercontent.com/dark-panda?s=256" alt="dark-panda" width="128" />| +|:---:|:---:|:---:|:---:| +|@mellowfish|@horacio|@dukex|@dark-panda| +|Spring Hill, TN|Buenos Aires|São Paulo|| ## License The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).