{
  "displayName": "Social Media Feed",
  "defaultWidth": 375,
  "defaultHeight": 528,
  "props": [
    {
      "name": "items",
      "displayName": "What is this a list of?",
      "type": "list"
    }
  ],
  "childComponents": [
    {
      "name": "background",
      "displayName": "Background",
      "props": [
        {
          "name": "color",
          "displayName": "Color",
          "type": "color",
          "default": "@background"
        },
        {
          "name": "border",
          "displayName": "Border",
          "type": "boolean",
          "default": false
        },
        {
          "name": "borderColor",
          "displayName": "Border Color",
          "type": "color",
          "default": "@contrast:color",
          "enabled": {
            "border": true
          }
        },
        {
          "name": "borderWidth",
          "displayName": "Border Width",
          "type": "number",
          "default": 1,
          "control": {
            "type": "slider",
            "min": 0,
            "max": 5
          },
          "enabled": {
            "border": true
          }
        },
        {
          "name": "borderRadius",
          "displayName": "Border Radius",
          "type": "number",
          "default": 4,
          "control": {
            "type": "slider",
            "min": 0,
            "max": 20
          }
        },
        {
          "name": "padding",
          "displayName": "Padding",
          "type": "number",
          "default": 6,
          "control": {
            "type": "slider",
            "min": 1,
            "max": 10
          }
        }
      ]
    },
    {
      "name": "header",
      "displayName": "Header",
      "role": "listItem",
      "reference": "items",
      "props": [
        {
          "name": "profilePicture",
          "displayName": "Profile Picture",
          "type": "image"
        },
        {
          "name": "text1",
          "displayName": "First line of text",
          "default": "Username",
          "type": "text",
          "styles": {
            "fontFamily": "@body",
            "fontSize": 16,
            "fontWeight": 600,
            "color": "@text"
          }
        },
        {
          "name": "text2",
          "displayName": "Second line of text",
          "default": "Title",
          "type": "text",
          "styles": {
            "fontFamily": "@body",
            "fontSize": 12,
            "fontWeight": 400,
            "color": "#757575"
          }
        },
        {
          "name": "text3",
          "displayName": "Third line of text",
          "default": "Created Date",
          "type": "text",
          "styles": {
            "fontFamily": "@body",
            "fontSize": 12,
            "fontWeight": 400,
            "color": "#9e9e9e"
          }
        },
        {
          "name": "rightIcon1Enabled",
          "displayName": "Enable First Right Icon",
          "type": "boolean",
          "default": true
        },
        {
          "name": "rightIcon1Color",
          "displayName": "Right Icon 1 Color",
          "type": "color",
          "default": "#353535",
          "enabled": {
            "rightIcon1Enabled": true
          }
        },
        {
          "name": "rightIcon1",
          "displayName": "Icon",
          "type": "icon",
          "enabled": {
            "rightIcon1Enabled": true
          }
        },
        {
          "name": "onPressRightIcon1",
          "displayName": "First Right Icon Actions",
          "type": "action",
          "enabled": {
            "rightIcon1Enabled": true
          }
        },
        {
          "name": "rightIcon2Enabled",
          "displayName": "Enable Second Right Icon",
          "type": "boolean",
          "default": false
        },
        {
          "name": "rightIcon2Color",
          "displayName": "Right Icon 2 Color",
          "type": "color",
          "default": "#353535",
          "enabled": {
            "rightIcon2Enabled": true
          }
        },
        {
          "name": "rightIcon2",
          "displayName": "Icon",
          "type": "icon",
          "enabled": {
            "rightIcon2Enabled": true
          }
        },
        {
          "name": "onPressRightIcon2",
          "displayName": "Second Right Icon Actions",
          "type": "action",
          "enabled": {
            "rightIcon2Enabled": true
          }
        }
      ]
    },
    {
      "name": "content",
      "displayName": "Content",
      "role": "listItem",
      "reference": "items",
      "props": [
        {
          "name": "topCaption",
          "displayName": "Top Caption",
          "type": "text",
          "default": "Caption",
          "styles": {
            "fontFamily": "@body",
            "fontSize": 12,
            "fontWeight": 400,
            "color": "@text",
            "textAlignment": "left"
          }
        },
        {
          "name": "contentImage",
          "displayName": "Image",
          "type": "image"
        }
      ]
    },
    {
      "name": "bottomText",
      "displayName": "Bottom Text",
      "role": "listItem",
      "reference": "items",
      "props": [
        {
          "name": "enabled",
          "type": "boolean",
          "default": true
        },
        {
          "name": "leftText",
          "displayName": "Left Text",
          "type": "text",
          "default": "Reaction count",
          "styles": {
            "fontFamily": "@body",
            "fontSize": 10,
            "color": "#757575",
            "fontWeight": 400
          }
        },
        {
          "name": "rightText",
          "displayName": "Right Text",
          "type": "text",
          "default": "Comment count",
          "styles": {
            "fontFamily": "@body",
            "fontSize": 10,
            "color": "#757575",
            "fontWeight": 400
          }
        }
      ]
    },
    {
      "name": "buttons",
      "displayName": "Buttons",
      "role": "listItem",
      "reference": "items",
      "props": [
        {
          "name": "leftIcon1Type",
          "displayName": "Icon Type",
          "type": "text",
          "default": "icon",
          "control": {
            "type": "menu",
            "options": [
              { "label": "Icon", "value": "icon" },
              { "label": "Toggle", "value": "toggle" }
            ]
          }
        },
        {
          "name": "leftIcon1Color",
          "displayName": "Left Icon 1 Color",
          "type": "color",
          "default": "#353535",
          "enabled": {
            "leftIcon1Type": "icon"
          }
        },
        {
          "name": "leftIcon1",
          "displayName": "Left Icon 1",
          "type": "icon",
          "enabled": {
            "leftIcon1Type": "icon"
          }
        },
        {
          "name": "onPressLeftIcon1",
          "displayName": "Left Icon 1 Click Actions",
          "type": "action",
          "enabled": {
            "leftIcon1Type": "icon"
          }
        },
        {
          "name": "leftIcon1Input",
          "displayName": "What does this toggle?",
          "type": "boolean",
          "role": "autosaveInput",
          "enabled": {
            "leftIcon1Type": "toggle"
          }
        },
        {
          "name": "leftIcon1ActiveIcon",
          "displayName": "Active Icon",
          "type": "icon",
          "default": "check-box",
          "enabled": {
            "leftIcon1Type": "toggle"
          }
        },
        {
          "name": "leftIcon1ActiveColor",
          "displayName": "Active Color",
          "type": "color",
          "default": "@primary",
          "enabled": {
            "leftIcon1Type": "toggle"
          }
        },
        {
          "name": "leftIcon1InactiveIcon",
          "displayName": "Inactive Icon",
          "type": "icon",
          "default": "check-box-outline-blank",
          "enabled": {
            "leftIcon1Type": "toggle"
          }
        },
        {
          "name": "leftIcon1InactiveColor",
          "displayName": "Inactive Color",
          "type": "color",
          "default": "#bbb",
          "enabled": {
            "leftIcon1Type": "toggle"
          }
        },
        {
          "name": "leftIcon1ActiveActions",
          "displayName": "Additional actions only when toggle is turned ON",
          "type": "action",
          "enabled": {
            "leftIcon1Type": "toggle"
          }
        },
        {
          "name": "leftIcon1InactiveActions",
          "displayName": "Additional actions only when toggle is turned OFF",
          "type": "action",
          "enabled": {
            "leftIcon1Type": "toggle"
          }
        },
        {
          "name": "leftIcon1Label",
          "displayName": "Left Icon 1 Label",
          "type": "text",
          "default": "Reaction",
          "styles": {
            "fontFamily": "@body",
            "fontSize": 14,
            "color": "#353535",
            "fontWeight": 500
          }
        },
        {
          "name": "enableLeftIcon2",
          "displayName": "Enable Left Icon 2",
          "type": "boolean",
          "default": true
        },
        {
          "name": "leftIcon2Type",
          "displayName": "Icon Type",
          "type": "text",
          "default": "icon",
          "control": {
            "type": "menu",
            "options": [
              { "label": "Icon", "value": "icon" },
              { "label": "Toggle", "value": "toggle" }
            ]
          },
          "enabled": {
            "enableLeftIcon2": true
          }
        },
        {
          "name": "leftIcon2Color",
          "displayName": "Left Icon 2 Color",
          "type": "color",
          "default": "#353535",
          "enabled": {
            "leftIcon2Type": "icon",
            "enableLeftIcon2": true
          }
        },
        {
          "name": "leftIcon2",
          "displayName": "Left Icon 2",
          "type": "icon",
          "enabled": {
            "leftIcon2Type": "icon",
            "enableLeftIcon2": true
          }
        },
        {
          "name": "leftIcon2Input",
          "displayName": "What does this toggle?",
          "type": "boolean",
          "role": "autosaveInput",
          "enabled": {
            "leftIcon2Type": "toggle",
            "enableLeftIcon2": true
          }
        },
        {
          "name": "leftIcon2ActiveIcon",
          "displayName": "Active Icon",
          "type": "icon",
          "default": "check-box",
          "enabled": {
            "leftIcon2Type": "toggle",
            "enableLeftIcon2": true
          }
        },
        {
          "name": "leftIcon2ActiveColor",
          "displayName": "Active Color",
          "type": "color",
          "default": "@primary",
          "enabled": {
            "leftIcon2Type": "toggle",
            "enableLeftIcon2": true
          }
        },
        {
          "name": "leftIcon2InactiveIcon",
          "displayName": "Inactive Icon",
          "type": "icon",
          "default": "check-box-outline-blank",
          "enabled": {
            "leftIcon2Type": "toggle",
            "enableLeftIcon2": true
          }
        },
        {
          "name": "leftIcon2InactiveColor",
          "displayName": "Inactive Color",
          "type": "color",
          "default": "#bbb",
          "enabled": {
            "leftIcon2Type": "toggle",
            "enableLeftIcon2": true
          }
        },
        {
          "name": "leftIcon2ActiveActions",
          "displayName": "Additional actions only when toggle is turned ON",
          "type": "action",
          "enabled": {
            "leftIcon2Type": "toggle",
            "enableLeftIcon2": true
          }
        },
        {
          "name": "leftIcon2InactiveActions",
          "displayName": "Additional actions only when toggle is turned OFF",
          "type": "action",
          "enabled": {
            "leftIcon2Type": "toggle",
            "enableLeftIcon2": true
          }
        },
        {
          "name": "leftIcon2Label",
          "displayName": "Left Icon 2 Label",
          "type": "text",
          "default": "Reaction",
          "styles": {
            "fontFamily": "@body",
            "fontSize": 14,
            "color": "#353535",
            "fontWeight": 500
          },
          "enabled": {
            "enableLeftIcon2": true
          }
        },
        {
          "name": "onPressLeftIcon2",
          "displayName": "Left Icon 2 Click Actions",
          "type": "action",
          "enabled": {
            "leftIcon2Type": "icon",
            "enableLeftIcon2": true
          }
        },
        {
          "name": "enableRightIcon",
          "displayName": "Enable Right Icon",
          "type": "boolean",
          "default": true
        },
        {
          "name": "rightIconType",
          "displayName": "Icon Type",
          "type": "text",
          "default": "icon",
          "control": {
            "type": "menu",
            "options": [
              { "label": "Icon", "value": "icon" },
              { "label": "Toggle", "value": "toggle" }
            ]
          },
          "enabled": {
            "enableRightIcon": true
          }
        },
        {
          "name": "rightIconColor",
          "displayName": "Right Icon Color",
          "type": "color",
          "default": "#353535",
          "enabled": {
            "rightIconType": "icon",
            "enableRightIcon": true
          }
        },
        {
          "name": "rightIcon",
          "displayName": "Right Icon",
          "type": "icon",
          "enabled": {
            "enableRightIcon": true,
            "rightIconType": "icon"
          }
        },
        {
          "name": "onPressRightIcon",
          "displayName": "Right Icon Click Actions",
          "type": "action",
          "enabled": {
            "enableRightIcon": true,
            "rightIconType": "icon"
          }
        },
        {
          "name": "rightIconInput",
          "displayName": "What does this toggle?",
          "type": "boolean",
          "role": "autosaveInput",
          "enabled": {
            "rightIconType": "toggle",
            "enableRightIcon": true
          }
        },
        {
          "name": "rightIconActiveIcon",
          "displayName": "Active Icon",
          "type": "icon",
          "default": "check-box",
          "enabled": {
            "rightIconType": "toggle",
            "enableRightIcon": true
          }
        },
        {
          "name": "rightIconActiveColor",
          "displayName": "Active Color",
          "type": "color",
          "default": "@primary",
          "enabled": {
            "rightIconType": "toggle",
            "enableRightIcon": true
          }
        },
        {
          "name": "rightIconInactiveIcon",
          "displayName": "Inactive Icon",
          "type": "icon",
          "default": "check-box-outline-blank",
          "enabled": {
            "rightIconType": "toggle",
            "enableRightIcon": true
          }
        },
        {
          "name": "rightIconInactiveColor",
          "displayName": "Inactive Color",
          "type": "color",
          "default": "#bbb",
          "enabled": {
            "rightIconType": "toggle",
            "enableRightIcon": true
          }
        },
        {
          "name": "rightIconActiveActions",
          "displayName": "Additional actions only when toggle is turned ON",
          "type": "action",
          "enabled": {
            "rightIconType": "toggle",
            "enableRightIcon": true
          }
        },
        {
          "name": "rightIconInactiveActions",
          "displayName": "Additional actions only when toggle is turned OFF",
          "type": "action",
          "enabled": {
            "rightIconType": "toggle",
            "enableRightIcon": true
          }
        },
        {
          "name": "enableBottomButton",
          "displayName": "Enable Bottom Button",
          "type": "boolean",
          "default": false
        },
        {
          "name": "bottomButtonColor",
          "displayName": "Bottom Button Color",
          "type": "color",
          "default": "@primary",
          "enabled": {
            "enableBottomButton": true
          }
        },
        {
          "name": "bottomButtonText",
          "displayName": "Bottom Button Text",
          "type": "text",
          "default": "Learn More",
          "styles": {
            "fontFamily": "@body",
            "fontSize": 14,
            "color": "@contrast:bottomButtonColor",
            "fontWeight": 500
          },
          "enabled": {
            "enableBottomButton": true
          }
        },
        {
          "name": "onPressBottomButton",
          "displayName": "Bottom Button Click Actions",
          "type": "action",
          "enabled": {
            "enableBottomButton": true
          }
        }
      ]
    }
  ]
}