Card component (JSX)

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: (
    <Lona.View
      _id="View"
      accessibilityElements="Headline"
      accessibilityElements="Body"
      accessibilityType="container"
      alignSelf="stretch"
    >
      <Lona.Image _id="Image" alignSelf="stretch" height={200} />
      <Lona.View
        _id="Description"
        alignSelf="stretch"
        paddingBottom={16}
        paddingLeft={16}
        paddingRight={16}
        paddingTop={20}
      >
        <Lona.Text
          _id="Headline"
          accessibilityRole="header"
          accessibilityType="element"
          alignSelf="stretch"
          font="headline"
          text="Headline"
        />
        <Lona.Text
          _id="Body"
          _visible="false"
          accessibilityType="element"
          alignSelf="stretch"
          font="body2"
          numberOfLines={2}
          text="Body"
        />
      </Lona.View>
    </Lona.View>
  )
});