@eightshift/frontend-libs/blocks/init/src/Blocks/components/lists/manifest.json

A collection of useful frontend utility modules. powered by Eightshift

{
	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/component.json",
	"componentName": "lists",
	"title": "List",
	"componentClass": "lists",
	"example": {
		"attributes": {
			"listsContent": "<li>List item 1</li><li>List item 2</li><li>List item 3</li>",
			"listsOrdered": "ul",
			"listsSize": "default",
			"listsColor": "primary500",
			"listsUse": true
		}
	},
	"attributes": {
		"listsContent": {
			"type": "string"
		},
		"listsOrdered": {
			"type": "string",
			"default": "ul"
		},
		"listsSize": {
			"type": "string",
			"default": "body:regular"
		},
		"listsColor": {
			"type": "string",
			"default": "primary500"
		},
		"listsColorOnlyMarker": {
			"type": "boolean",
			"default": false
		},
		"listsUse": {
			"type": "boolean",
			"default": true
		}
	},
	"options": {
		"listsOrdered": [
			{
				"label": "Ordered",
				"value": "ol",
				"icon": "listOrdered"
			},
			{
				"label": "Bulleted",
				"value": "ul",
				"icon": "listUnordered"
			}
		],
		"listsSize": [
			{
				"label": "48",
				"value": "h4",
				"weights": ["bold", "medium"]
			},
			{
				"label": "32",
				"value": "h5",
				"weights": ["bold", "medium"]
			},
			{
				"label": "24",
				"value": "h6",
				"weights": ["bold", "medium"]
			},
			{
				"label": "16",
				"value": "body",
				"weights": ["bold", "medium", "regular"]
			},
			{
				"label": "14",
				"value": "caption",
				"weights": ["bold", "regular"]
			},
			{
				"label": "12",
				"value": "info-text",
				"weights": ["regular"]
			}
		],
		"listsColor": [
			"white",
			"black",
			"primary500"
		]
	},
	"variables": {
		"listsOrdered": {
			"ol": [
				{
					"variable": {
						"lists-style": "nums"
					}
				}
			]
		},
		"listsSize": {
			"h4:bold": [
				{
					"variable": {
						"lists-font-size": "2.5rem",
						"lists-line-height": "1.4",
						"lists-font-weight": "bold",
						"lists-letter-spacing": "-1px"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-font-size": "3rem",
						"lists-line-height": "1.42"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-line-height": "1.35"
					}
				}
			],
			"h4:medium": [
				{
					"variable": {
						"lists-font-size": "2.5rem",
						"lists-line-height": "1.4",
						"lists-font-weight": "500",
						"lists-letter-spacing": "-1px"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-font-size": "3rem",
						"lists-line-height": "1.42"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-line-height": "1.35"
					}
				}
			],
			"h5:bold": [
				{
					"variable": {
						"lists-font-size": "2rem",
						"lists-line-height": "1.39",
						"lists-font-weight": "bold",
						"lists-letter-spacing": "-1px"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-line-height": "1.49"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-line-height": "1.3"
					}
				}
			],
			"h5:medium": [
				{
					"variable": {
						"lists-font-size": "2rem",
						"lists-line-height": "1.39",
						"lists-font-weight": "500",
						"lists-letter-spacing": "-1px"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-line-height": "1.49"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-line-height": "1.3"
					}
				}
			],
			"h6:bold": [
				{
					"variable": {
						"lists-font-size": "1.5rem",
						"lists-line-height": "1.35",
						"lists-font-weight": "bold",
						"lists-letter-spacing": "-1px"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-line-height": "1.4"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-letter-spacing": "0"
					}
				}
			],
			"h6:medium": [
				{
					"variable": {
						"lists-font-size": "1.5rem",
						"lists-line-height": "1.35",
						"lists-font-weight": "500",
						"lists-letter-spacing": "-1px"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-line-height": "1.4"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-letter-spacing": "0"
					}
				}
			],
			"body:bold": [
				{
					"variable": {
						"lists-font-size": "1rem",
						"lists-line-height": "1.39",
						"lists-font-weight": "bold"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-line-height": "1.4"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-letter-spacing": "0"
					}
				}
			],
			"body:medium": [
				{
					"variable": {
						"lists-font-size": "1rem",
						"lists-line-height": "1.39",
						"lists-font-weight": "500"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-line-height": "1.4"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-letter-spacing": "0"
					}
				}
			],
			"body:regular": [
				{
					"variable": {
						"lists-font-size": "1rem",
						"lists-line-height": "1.39",
						"lists-font-weight": "normal"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-line-height": "1.4"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-letter-spacing": "0"
					}
				}
			],
			"caption:bold": [
				{
					"variable": {
						"lists-font-size": "0.875rem",
						"lists-line-height": "1.4",
						"lists-font-weight": "bold"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-line-height": "1.52"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-line-height": "1.5"
					}
				}
			],
			"caption:regular": [
				{
					"variable": {
						"lists-font-size": "0.875rem",
						"lists-line-height": "1.4",
						"lists-font-weight": "normal"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-line-height": "1.52"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-line-height": "1.5"
					}
				}
			],
			"info-text:regular": [
				{
					"variable": {
						"lists-font-size": "0.75rem",
						"lists-line-height": "1.37",
						"lists-font-weight": "normal"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"lists-line-height": "1.55"
					}
				},
				{
					"breakpoint": "desktop",
					"variable": {
						"lists-line-height": "1.5"
					}
				}
			]
		},
		"listsColor": {
			"white": [
				{
					"variable": {
						"lists-marker-color": "var(--global-colors-white)",
						"lists-link-color": "var(--global-colors-primary500)"
					}
				}
			],
			"black": [
				{
					"variable": {
						"lists-marker-color": "var(--global-colors-black)",
						"lists-link-color": "var(--global-colors-primary500)"
					}
				}
			],
			"primary500": [
				{
					"variable": {
						"lists-marker-color": "var(--global-colors-primary500)",
						"lists-link-color": "var(--global-colors-black)"
					}
				}
			]
		}
	}
}