{
  "flyout": {
    "title": "Flyout",
    "status": {
      "ready": true
    },
    "introduction": "<p>Allows for content that can be hidden by default and opened over/above other content on the page by the user.</p>",
    "examples": [
      {
        "description": "Click behaviour",
        "template": "fly-out",
        "template-data": {
          "description": "Click",
          "type": "click"
        }
      },
      {
        "description": "Click-Sticky behaviour",
        "template": "fly-out",
        "template-data": {
          "description": "Click-Sticky",
          "type": "click-sticky"
        }
      },
      {
        "description": "Focus behaviour",
        "template": "fly-out",
        "template-data": {
          "description": "Focus",
          "type": "focus"
        }
      },
      {
        "description": "Hover behaviour",
        "template": "fly-out",
        "template-data": {
          "description": "Hover",
          "type": "hover"
        }
      }
    ],
    "dependencies": [
      "src/scripts/modules/jquery.pfFlyOut.js",
      "src/scripts/modules/jquery.pfHelpers.js",
      "src/styles/base/*.scss",
      "src/styles/components/blocks/_fly-out.scss",
      "src/styles/components/blocks/_nav.scss",
      "src/styles/components/elements/_icon.scss",
      "src/styles/images.scss"
    ],
    "usages": {
      "body": [
        [
          "<code>[data-js='fly-out']</code> and <code>.fly-out</code>",
          "Placed on outer-most tag that will contain the fly out.",
          "Required"
        ],
        [
          "<code>[data-js='fly-out-toggle']</code> and <code>.fly-out__toggle</code>",
          "Placed on the tag that will open the fly out when interacted with by user. Note: <code>.fly-out__toggle</code> is only needed when the element is not a link.",
          "Required"
        ],
        [
          "<code>.fly-out__content</code>",
          "Placed on the tag that wraps the fly out content.",
          "Required"
        ],
        [
          "<code>[data-fly-out-event-type='click|click-sticky|focus|hover']</code>",
          "Placed on the tag that wraps the fly out content. Specifies the event type that opens the fly out. 'click-sticky' means the user must click on the toggle again to close it.",
          "Required"
        ],
        [
          "<code>[data-fly-out-position='center']</code>",
          "Placed on the tag that wraps the fly out content and will force the flyout to be centered within the toggle.",
          "Optional"
        ]
      ]
    }
  }
}