handoff-app/config/exportables/components/checkbox.json

Automated documentation toolchain for building client side documentation from figma

{
  "id": "checkbox",
  "group": "Forms",
  "options": {
    "exporter": {
      "search": "Checkbox",
      "supportedVariantProps": {
        "design": ["Theme", "State", "Activity"],
        "layout": ["Size"]
      }
    }
  },
  "parts": [
    {
      "id": "$",
      "tokens": [
        {
          "from": "$",
          "export": ["SPACING"]
        },
        {
          "from": "GROUP[name=':: checkbox']",
          "export": ["OPACITY"]
        },
        {
          "from": "GROUP[name=':: checkbox'] > RECTANGLE[name='body']",
          "export": ["FILL", "BORDER", "SIZE"]
        }
      ]
    },
    {
      "id": "label",
      "tokens": [
        {
          "from": "TEXT[name='Checkbox Label']",
          "export": ["TYPOGRAPHY", "FILL", "OPACITY"]
        }
      ]
    },
    {
      "id": "check",
      "tokens": [
        {
          "from": "GROUP[name=':: checkbox'] > RECTANGLE[name='body']",
          "export": ["BORDER", "SIZE", "EFFECT"]
        },
        {
          "from": "GROUP[name=':: checkbox'] > RECTANGLE[name='color']",
          "export": ["FILL"]
        }
      ]
    },
    {
      "id": "icon",
      "tokens": [
        {
          "from": "GROUP[name=':: checkbox'] > INSTANCE[name='${Activity}']",
          "export": ["SIZE", "FILL"]
        }
      ]
    }
  ]
}