Code

5 points small. 8 points medium. 13 points max.

Prerequisites:

Setup HubL Local Server

1. Start from LaunchPad Starter

LaunchPad Starter is your main project repo but all our modules are shared between projects, and that's why we use a submodule (sub repo) called launchpad-modules

2. Create a New Module Branch (e.g. sr-module-name-01) in launchpad-modules

3. Build the Module (html / css / js)

All modules are in launchpad-starter/custom/page/sr-templates Modules consist of a template and a JSON, both having the same name. To get started you can clone SR Demo or any existing module.

If your module has any external dependencies (JS / CSS) please add them to launchpad-starter/custom/page/sr-templates/sr-assets/pattern-library/[module-name] and reference them in your JSON.

4. Create JSON

At this point we only need a basic JSON file so that we can deploy the module (next step). You can use this as a starting point for you JSON:

{
	"custom_module": {
		"author": "[e-mail]",
		"name": "MODULE NAME",
		"css_assets": [],
		"editable_contexts": [],
		"external_js": [],
		"icon" : "https://www.lean-labs.com/hubfs/srco-assets/sr-logo-icon.svg",
		"purchased": true,
		"hostTemplateTypes": ["PAGE", "BLOG_POST", "BLOG_LISTING"],
		"js_assets": [],
		"other_assets": [],
		"fields": [{
				"default": true,
				"label": "Enabled",
				"name": "enabled",
				"type": "boolean"
			},
			{
				"type": "group",
				"name": "design_settings",
				"label": "Design Settings",
				"children": [
					
							{
								"default": null,
								"label": "ID",
								"name": "sr_module_id",
								"type": "text"
							},
							{
								"default": null,
								"label": "Class",
								"name": "class",
								"type": "text"
							},
							{
								"choices": [
									[
										"container", "Page"
									],
									[
										"container-fluid", "Full Width"
									]
								],
								"default": "container",
								"display": "select",
								"label": "Layout",
								"name": "layout",
								"type": "choice",
								"required": true
							},
							{
								"choices": [
									[
										"min", "Minimum"
									],
									[
										"narrow", "Narrow"
									],
									[
										"wide", "Wide"
									],
									[
										"max", "Maximum"
									]
								],
								"default": "max",
								"display": "select",
								"label": "Container Width",
								"name": "container_width",
								"type": "choice",
								"required": true
							},
							{
								"choices": [
									[
										"auto", "Use default values"
									],
									[
										"zero", "No Padding"
									],
									[
										"half", "Small padding"
									],
									[
										"full", "Large padding"
									],
									[
										"custom", "Custom padding"
									]
								],
								"id": "top_bottom_padding",
								"default": "full",
								"display": "select",
								"label": "Top Bottom Padding",
								"name": "top_bottom_padding",
								"type": "choice",
								"required": true
							},
							{
								"name": "custom_padding",
								"type": "text",
								"label": "Custom Padding",
								"help_text": "Top, Right, Bottom, Left",
								"visibility": {
									"controlling_field": "top_bottom_padding",
									"controlling_value_regex": "custom",
									"operator": "EQUAL",
									"access": null
								},
								"default": "1rem 0rem 1rem 0rem"
							},
							{
								"default": false,
								"label": "Border Top",
								"name": "border_top",
								"type": "boolean"
							},
							{
								"default": false,
								"label": "Border Bottom",
								"name": "border_bottom",
								"type": "boolean"
							},
							{
								"choices": [
									[
										"image", "Image"
									],
									[
										"color", "Color"
									],
									[
										"custom", "Custom"
									]
								],
								"id": "background_option",
								"default": "color",
								"display": "select",
								"label": "Background Option",
								"name": "background_option",
								"type": "choice",
								"required": true
							},
							{
								"default": {
									"src": "",
									"alt": ""
								},
								"label": "Background Image",
								"name": "background_image",
								"visibility": {
									"controlling_field": "background_option",
									"controlling_value_regex": "image",
									"operator": "EQUAL"
								},
								"type": "image"
							},
							{
								"default": {
									"color": "#343a40",
									"opacity": 30
								},
								"label": "Background Overlay Color",
								"name": "background_overlay_color",
								"visibility": {
									"controlling_field": "background_option",
									"controlling_value_regex": "image",
									"operator": "EQUAL"
								},
								"help_text": "Recommended Width: 2880x1920px",
								"type": "color"
							},
							{
								"choices": [
									[
										"primary", "Primary"
									],
									[
										"secondary", "Secondary"
									],
									[
										"tertiary", "Tertiary"
									],
									[
										"white", "White"
									],
									[
										"black", "Black"
									],
									[
										"dark", "Dark"
									],
									[
										"light", "Light"
									],
									[
										"success", "Success"
									],
									[
										"info", "Info"
									],
									[
										"warning", "Warning"
									],
									[
										"danger", "Danger"
									],
									[
										"none", "None"
									]
								],
								"default": "white",
								"display": "select",
								"label": "Background Color",
								"name": "background_color",
								"type": "choice",
								"visibility": {
									"controlling_field": "background_option",
									"controlling_value_regex": "color",
									"operator": "EQUAL"
								},
								"required": true
							},
							{
								"default": {
									"color": "#fff"
								},
								"label": "Background Custom",
								"name": "background_custom",
								"visibility": {
									"controlling_field": "background_option",
									"controlling_value_regex": "custom",
									"operator": "EQUAL"
								},
								"type": "color"
							}
			]},
			{
				"default": "",
				"label": "Heading",
				"name": "heading",
				"type": "text"
			},
			{
				"choices": [
					[
						"1", "H1"
					],
					[
						"2", "H2"
					],
					[
						"3", "H3"
					],
					[
						"4", "H4"
					],
					[
						"5", "H5"
					],
					[
						"6", "H6"
					]
				],
				"default": "2",
				"display": "select",
				"label": "Heading Size",
				"name": "heading_size",
				"visibility" : {
					"controlling_field" : "heading",
					"controlling_value_regex" : null,
					"operator" : null,
					"access" : null
				},
				"type": "choice",
				"required": true
			},
			{
				"name": "heading_display_size",
				"label": "Heading Display Size",
				"required": true,
				"locked": false,
				"display": "select",
				"visibility": {
					"controlling_field": "heading",
					"controlling_value_regex": null,
					"operator": null,
					"access": null
				},
				"choices": [
					[
						"auto",
						"Auto"
					],
					[
						"h1",
						"H1"
					],
					[
						"h2",
						"H2"
					],
					[
						"h3",
						"H3"
					],
					[
						"h4",
						"H4"
					],
					[
						"h5",
						"H5"
					],
					[
						"h6",
						"H6"
					],
					[
						"display-4",
						"L"
					],
					[
						"display-3",
						"XL"
					],
					[
						"display-2",
						"XXL"
					],
					[
						"display-1",
						"XXXL"
					]
				],
				"type": "choice",
				"default": "auto"
			},
			{
				"default": "",
				"label": "Description",
				"name": "description",
				"type": "richtext"
			},
			{
				"choices": [
					[
						"auto", "Auto"
					],
					[
						"left", "Left"
					],
					[
						"center", "Center"
					],
					[
						"right", "Right"
					]
				],
				"default": "auto",
				"display": "select",
				"label": "Text Align",
				"name": "text_align",
				"type": "choice",
				"required": true
			},
			{
				"choices": [
					[
						"auto", "Auto"
					],
					[
						"primary", "Primary"
					],
					[
						"secondary", "Secondary"
					],
					[
						"tertiary", "Tertiary"
					],
					[
						"white", "White"
					],
					[
						"black", "Black"
					],
					[
						"dark", "Dark"
					],
					[
						"light", "Light"
					],
					[
						"success", "Success"
					],
					[
						"info", "Info"
					],
					[
						"warning", "Warning"
					],
					[
						"danger", "Danger"
					]
				],
				"default": "auto",
				"display": "select",
				"label": "Text Color",
				"name": "text_color",
				"type": "choice",
				"required": true
			}
		],
		"source": "",
		"widgetLabel": "1.0.0"
	},
	"custom_module_template": "MODULE_NAME.html",
	"available_builder": true,
	"category": 0,
	"files": []
}

Replace YOUR_EMAIL, MODULE_NAME, MODULE_VERSION, and MODULE_TEMPLATE.

MODULE_VERSION should be 1.0.0 if this is a new module and MODULE_TEMPLATE should be your module template (e.g. sr-new-module-01.html).

For available fields see here.

4. Deploy Module to HubSpot

Use SR App to deploy your module to a test portal and add it to a new page. We will use the preview link for the Code Review (next step)

Setup SR App Locally

5. Browser + Mobile Responsiveness Test

We need to make sure that our module works well on the latest 2 versions of each browser including mobile and also test different screen sizes.

We have a Browser Stack account. Ping Miles or Stephen for details.

Once the module has been tested and is ready for implementation, set your Liquid Planner task in Review, assign Giles and provide him with the preview link.

Giles to test as well as insert multiple stylesheets & content variations to evaluate the module. Live Slack Review for Giles to present all areas for revision. Revise and repeat review with Giles until approved for HS Implementation.