larva modules: `age-gate`

Available Variants

prototype

You must be 21 to enter.

age-gate README

age-gate

This module is relied heavily upon in the pmc-age-gate plugin and contains js- classes in the twig file that are important to its functionality. Custom JS and CSS (to handle pop-up modal in which the age gate module will appear) are handled in the aforementioned plugin.

age-gate Twig The markup file.

<div class="age-gate // js-AgeGate {{ age_gate_class }}">
	<div class="age-gate-inner // {{ age_gate_inner_class }}">
		<div class="age-gate-header // {{ age_gate_header_class }}">
			{% if c_svg_header %}
				{% include "@larva/components/c-svg/c-svg.twig" with c_svg_header %}
			{% endif %}
			{% if c_lazy_image_header %}
				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image_header %}
			{% endif %}
			{% if c_heading %}
				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
			{% endif %}
		</div>
		<div class="age-gate-form // {{ age_gate_form_class }}">
			<form class="js-AgeGateForm">
				{% if o_input_group %}
					{% include "@larva/objects/o-input-group/o-input-group.twig" with o_input_group %}
				{% endif %}
				<div class="age-gate-error // js-AgeGateError {{ age_gate_error_class }}"></div>
				<div class="age-gate-button-wrapper">
					{% include "@larva/components/c-button/c-button.twig" with c_button %}
				</div>
			</form>
		</div>
		<div class="age-gate-footer // {{ age_gate_footer_class }}">
			{% if c_dek %}
				{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
			{% endif %}
			{% if c_svg_footer %}
				{% include "@larva/components/c-svg/c-svg.twig" with c_svg_footer %}
			{% endif %}
			{% if c_lazy_image_footer %}
				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image_footer %}
			{% endif %}
		</div>
	</div>
</div>

age-gate JSON The data object for this pattern.

{
	"age_gate_class": "lrv-u-height-100p lrv-u-padding-t-2 lrv-u-background-color-black lrv-u-text-align-center lrv-u-color-white",
	"age_gate_inner_class": "lrv-u-max-width-1000 lrv-u-margin-lr-auto",
	"age_gate_form_class": "lrv-u-border-b-1",
	"age_gate_error_class": "lrv-a-font-primary-s",
	"form_wrapper_class": "",
	"age_gate_footer_class": "lrv-u-border-t-1 lrv-u-margin-t-025",
	"c_heading": {
		"c_heading_classes": " lrv-a-font-primary-l lrv-u-margin-b-2",
		"c_heading_id_attr": "section-heading",
		"c_heading_text": "You must be 21 to enter.",
		"c_heading_url": "",
		"c_heading_link_classes": "",
		"c_heading_outer": false,
		"c_heading_outer_classes": "",
		"c_heading_is_primary_heading": false
	},
	"c_svg_header": {
		"c_svg_classes": "lrv-u-width-150 lrv-u-margin-lr-auto lrv-u-margin-b-2",
		"c_svg_name": "brand-logo-white"
	},
	"o_input_group": {
		"o_input_group_class": "lrv-u-margin-b-2",
		"o_input_group_items": [
			{
				"c_input_type_attr": "text",
				"c_input_id_attr": "pmc-age-gate-month",
				"c_input_label_class": "lrv-a-screen-reader-only",
				"c_input_label_text": "Input Example",
				"c_input_class": "lrv-a-font-primary-m lrv-u-color-white lrv-u-background-color-grey-darkest lrv-u-padding-lr-050 lrv-u-padding-tb-150 lrv-u-width-100 lrv-u-text-align-center",
				"c_input_placeholder_attr": "MM",
				"c_input_size_attr": 4,
				"c_input_maxlength_attr": 2,
				"c_input_error_attr": "Please enter a valid month"
			},
			{
				"c_input_type_attr": "text",
				"c_input_id_attr": "pmc-age-gate-day",
				"c_input_label_class": "lrv-a-screen-reader-only",
				"c_input_label_text": "Input Example",
				"c_input_class": "lrv-a-font-primary-m lrv-u-color-white lrv-u-background-color-grey-darkest lrv-u-padding-lr-050 lrv-u-padding-tb-150 lrv-u-width-100 lrv-u-text-align-center",
				"c_input_placeholder_attr": "DD",
				"c_input_size_attr": 4,
				"c_input_maxlength_attr": 2,
				"c_input_error_attr": "Please enter a valid day"
			},
			{
				"c_input_type_attr": "text",
				"c_input_id_attr": "pmc-age-gate-year",
				"c_input_label_class": "lrv-a-screen-reader-only",
				"c_input_label_text": "Input Example",
				"c_input_class": "lrv-a-font-primary-m lrv-u-color-white lrv-u-background-color-grey-darkest lrv-u-padding-lr-050 lrv-u-padding-tb-150 lrv-u-width-100 lrv-u-text-align-center",
				"c_input_placeholder_attr": "YYYY",
				"c_input_size_attr": 4,
				"c_input_maxlength_attr": 4,
				"c_input_error_attr": "Please enter a valid year"
			}
		]
	},
	"c_button": {
		"c_button_classes": " lrv-u-margin-t-2 lrv-u-color-white lrv-u-background-color-brand-primary lrv-u-padding-lr-2 lrv-u-padding-tb-075 lrv-u-margin-b-2 lrv-u-text-align-center lrv-u-text-transform-uppercase lrv-a-font-primary-m",
		"c_button_ga_tracking": {},
		"c_button_inner_classes": "",
		"c_button_rel_attr": "",
		"c_button_screen_reader_text": "Sign Up",
		"c_button_target_attr": "",
		"c_button_text": "View",
		"c_button_type_attr": "submit",
		"c_button_url": ""
	},
	"c_dek": {
		"c_dek_classes": "lrv-a-font-primary-xs",
		"c_dek_markup": "",
		"c_dek_text": "Legal text."
	}
}