Name		Name	Last commit message	Last commit date
parent directory ..
README.md		README.md
accordion_component.html.erb		accordion_component.html.erb
accordion_component.rb		accordion_component.rb
alert_component.html.erb		alert_component.html.erb
alert_component.rb		alert_component.rb
alert_icon_component.html.erb		alert_icon_component.html.erb
alert_icon_component.rb		alert_icon_component.rb
badge_component.html.erb		badge_component.html.erb
badge_component.rb		badge_component.rb
badge_component.scss		badge_component.scss
barcode_component.html.erb		barcode_component.html.erb
barcode_component.rb		barcode_component.rb
base_component.rb		base_component.rb
block_link_component.html.erb		block_link_component.html.erb
block_link_component.rb		block_link_component.rb
button_component.html.erb		button_component.html.erb
button_component.rb		button_component.rb
captcha_submit_button_component.html.erb		captcha_submit_button_component.html.erb
captcha_submit_button_component.rb		captcha_submit_button_component.rb
captcha_submit_button_component.scss		captcha_submit_button_component.scss
captcha_submit_button_component.ts		captcha_submit_button_component.ts
click_observer_component.rb		click_observer_component.rb
click_observer_component.scss		click_observer_component.scss
click_observer_component.ts		click_observer_component.ts
clipboard_button_component.rb		clipboard_button_component.rb
clipboard_button_component.scss		clipboard_button_component.scss
clipboard_button_component.ts		clipboard_button_component.ts
countdown_alert_component.rb		countdown_alert_component.rb
countdown_alert_component.ts		countdown_alert_component.ts
countdown_component.rb		countdown_component.rb
countdown_component.ts		countdown_component.ts
download_button_component.rb		download_button_component.rb
flash_component.html.erb		flash_component.html.erb
flash_component.rb		flash_component.rb
form_link_component.html.erb		form_link_component.html.erb
form_link_component.rb		form_link_component.rb
form_link_component.ts		form_link_component.ts
icon_component.html.erb		icon_component.html.erb
icon_component.rb		icon_component.rb
icon_component.scss		icon_component.scss
icon_list_component.html.erb		icon_list_component.html.erb
icon_list_component.rb		icon_list_component.rb
icon_list_component.scss		icon_list_component.scss
icon_list_item_component.html.erb		icon_list_item_component.html.erb
javascript_required_component.html.erb		javascript_required_component.html.erb
javascript_required_component.rb		javascript_required_component.rb
language_picker_component.html.erb		language_picker_component.html.erb
language_picker_component.rb		language_picker_component.rb
login_button_component.html.erb		login_button_component.html.erb
login_button_component.rb		login_button_component.rb
login_button_component.scss		login_button_component.scss
manageable_authenticator_component.html.erb		manageable_authenticator_component.html.erb
manageable_authenticator_component.rb		manageable_authenticator_component.rb
manageable_authenticator_component.scss		manageable_authenticator_component.scss
manageable_authenticator_component.ts		manageable_authenticator_component.ts
memorable_date_component.html.erb		memorable_date_component.html.erb
memorable_date_component.rb		memorable_date_component.rb
memorable_date_component.scss		memorable_date_component.scss
memorable_date_component.ts		memorable_date_component.ts
modal_component.html.erb		modal_component.html.erb
modal_component.rb		modal_component.rb
modal_component.scss		modal_component.scss
modal_component.ts		modal_component.ts
one_time_code_input_component.html.erb		one_time_code_input_component.html.erb
one_time_code_input_component.rb		one_time_code_input_component.rb
one_time_code_input_component.scss		one_time_code_input_component.scss
one_time_code_input_component.ts		one_time_code_input_component.ts
page_footer_component.rb		page_footer_component.rb
page_heading_component.rb		page_heading_component.rb
password_confirmation_component.html.erb		password_confirmation_component.html.erb
password_confirmation_component.rb		password_confirmation_component.rb
password_confirmation_component.scss		password_confirmation_component.scss
password_confirmation_component.ts		password_confirmation_component.ts
password_strength_component.html.erb		password_strength_component.html.erb
password_strength_component.rb		password_strength_component.rb
password_strength_component.scss		password_strength_component.scss
password_strength_component.ts		password_strength_component.ts
password_toggle_component.html.erb		password_toggle_component.html.erb
password_toggle_component.rb		password_toggle_component.rb
password_toggle_component.scss		password_toggle_component.scss
password_toggle_component.ts		password_toggle_component.ts
phone_input_component.html.erb		phone_input_component.html.erb
phone_input_component.rb		phone_input_component.rb
phone_input_component.scss		phone_input_component.scss
phone_input_component.ts		phone_input_component.ts
print_button_component.rb		print_button_component.rb
print_button_component.ts		print_button_component.ts
process_list_component.html.erb		process_list_component.html.erb
process_list_component.rb		process_list_component.rb
process_list_item_component.html.erb		process_list_item_component.html.erb
security_key_image_component.rb		security_key_image_component.rb
security_key_image_component.scss		security_key_image_component.scss
spinner_button_component.html.erb		spinner_button_component.html.erb
spinner_button_component.rb		spinner_button_component.rb
spinner_button_component.ts		spinner_button_component.ts
status_page_component.html.erb		status_page_component.html.erb
status_page_component.rb		status_page_component.rb
step_indicator_component.html.erb		step_indicator_component.html.erb
step_indicator_component.rb		step_indicator_component.rb
step_indicator_component.ts		step_indicator_component.ts

README.md

Components

This folder contains a collection of components implemented using the ViewComponent gem. Components are reusable user interface elements, and usually comprise of a component class and ERB template. They are similar to partials in many of their use-cases, but have a few advantages in the form of class-based presenter logic, testability, performance, and conveniences for loading accompanying script and style assets.

Each component must implement a class extending the BaseComponent class.

Optional files:

.html.erb: Used as the template for the component
.ts: A corresponding JavaScript bundle will be created and loaded automatically any time the component is rendered
.scss: A corresponding CSS stylesheet will be created and loaded automatically any time the component is rendered

Example:

components/
├─ example_component.rb
├─ example_component.html.erb
├─ example_component.scss
└─ example_component.ts

Refer to the ViewComponent gem documentation for more information.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

components

components

README.md

Components

Files

components

Directory actions

More options

Directory actions

More options

Latest commit

History

components

Folders and files

parent directory

README.md

Components