Card component (JSON5)

Card.component

{
  devices: [
    {
      deviceId: 'iPhone SE',
      heightMode: 'At Least',
    },
    {
      deviceId: 'iPhone 8',
      heightMode: 'At Least',
    },
    {
      deviceId: 'iPhone XS Max',
      heightMode: 'At Least',
    },
  ],
  examples: [
    {
      id: 'Headline_only',
      name: 'Headline only',
      params: {
        body: null,
        headline: 'Headline Only',
        image: 'https://picsum.photos/600/600?image=20',
      },
    },
    {
      id: 'All_content',
      name: 'All content',
      params: {
        body: "Located two hours south of Sydney in the Souther Highlands of New South Wales, this destination is truly one you won't want to miss.",
        headline: 'Kangaroo Valley Safari',
        image: 'https://picsum.photos/600/600?image=10',
      },
    },
  ],
  logic: [
    {
      assignee: [
        'layers',
        'Image',
        'image',
      ],
      content: [
        'parameters',
        'image',
      ],
      type: 'AssignExpr',
    },
    {
      assignee: [
        'layers',
        'Headline',
        'text',
      ],
      content: [
        'parameters',
        'headline',
      ],
      type: 'AssignExpr',
    },
    {
      body: [
        {
          assignee: [
            'layers',
            'Body',
            'text',
          ],
          content: [
            'item',
          ],
          type: 'AssignExpr',
        },
        {
          assignee: [
            'layers',
            'Body',
            'visible',
          ],
          content: {
            type: 'LitExpr',
            value: {
              data: true,
              type: 'Boolean',
            },
          },
          type: 'AssignExpr',
        },
      ],
      condition: {
        content: [
          'parameters',
          'body',
        ],
        id: 'item',
        type: 'VarDeclExpr',
      },
      type: 'IfExpr',
    },
  ],
  params: [
    {
      name: 'image',
      type: 'URL',
    },
    {
      name: 'headline',
      type: 'String',
    },
    {
      defaultValue: {
        data: {
          case: 'Some',
          data: {
            data: null,
            tag: 'None',
          },
        },
        type: 'String?',
      },
      name: 'body',
      type: 'String?',
    },
  ],
  root: {
    children: [
      {
        id: 'Image',
        params: {
          alignSelf: 'stretch',
          height: 200,
          image: '',
        },
        type: 'Lona:Image',
      },
      {
        children: [
          {
            id: 'Headline',
            params: {
              accessibilityRole: 'header',
              accessibilityType: 'element',
              alignSelf: 'stretch',
              font: 'headline',
              text: 'Headline',
            },
            type: 'Lona:Text',
          },
          {
            id: 'Body',
            params: {
              accessibilityType: 'element',
              alignSelf: 'stretch',
              font: 'body2',
              numberOfLines: 2,
              text: 'Body',
              visible: false,
            },
            type: 'Lona:Text',
          },
        ],
        id: 'Description',
        params: {
          alignSelf: 'stretch',
          paddingBottom: 16,
          paddingLeft: 16,
          paddingRight: 16,
          paddingTop: 20,
        },
        type: 'Lona:View',
      },
    ],
    id: 'View',
    params: {
      accessibilityElements: [
        'Headline',
        'Body',
      ],
      accessibilityType: 'container',
      alignSelf: 'stretch',
    },
    type: 'Lona:View',
  },
}