{
  "notice": {
    "title" : "Notice",
    "status": {
      "ready": true
    },
    "introduction": "<p>Used to provide helpful information to users. Can point upwards or downwards for extra contextual help.</p><p>To dynamically show a notice that slides in at the top of the page, you need to make use of the <code>$.pfNotice</code> scripts.</p>",
    "examples": [
      {
        "description": "JS Notice alert",
        "inline": "<button class='btn btn--primary debug--show-notice' data-notice-content='You can only get rid of me by closing me... muahahahaha!' data-notice-dismissible='true' data-notice-type='success'>Show dismissible notice</button>"
      },
      {
        "description": "JS Dismissable Notice alert",
        "inline": "<button class='btn btn--primary debug--show-notice' data-notice-content='An error occurred' data-notice-type='error'>Show auto-dismiss notice</button>"
      }
    ],
    "dependencies": [
      "src/styles/base/*.scss",
      "src/styles/components/elements/_icon.scss",
      "src/styles/components/blocks/_notice.scss",
      "src/scripts/modules/jquery.pfNotice.js"
    ],
    "usages": {
      "body": [
        [
          "<code>.notice</code>",
          "Creates a notice element that can have a wide range of children as content.",
          "Required"
        ],
        [
          "<code>.notice--pointer-up</code>",
          "Creates an upward pointer above the notice block.",
          "Optional"
        ],
        [
          "<code>.notice--pointer-up</code>",
          "Creates a downward pointer below the notice block.",
          "Optional"
        ],
        [
          "<code>.notice--info</code>",
          "Creates an info styled version",
          "Optional"
        ],
        [
          "<code>.notice--success</code>",
          "Creates a success styled version",
          "Optional"
        ],
        [
          "<code>.notice--error</code>",
          "Creates an error styled version",
          "Optional"
        ],
        [
          "<code>.notice--close</code>",
          "Adds necessary styling for a notice with a close action.",
          "Optional"
        ],
        [
          "<code>.notice__close</code>",
          "Added to the close link to apply its correct styling and positioning. If used, the following classes are also required on the element: <code>.icon</code> and <code>.link--silent</code>, which is less expensive than recreating or extending these styles in the CSS.",
          "Required"
        ],
        [
          "<code>[data-js=notice]</code>",
          "Add to any notice that has JavaScript events bound to it. Currently, this only applies to notices with close actions.",
          "Optional"
        ],
        [
          "<code>[data-js=notice-close]</code>",
          "Added to close link to bind necessary JavScript event.",
          "Required"
        ],
        [
          "<code class='language-js'>$.pfNotice.open({content: 'Hello'})</code>",
          "String. Content displayed in the notice. Can contain HTML.",
          "Required when using the JS API"
        ],
        [
          "<code class='language-js'>$.pfNotice.open({type: 'success'})</code>",
          "String. The style of the notice, like 'success', 'error', etc.",
          "Optional. 'Default' by default."
        ],
        [
          "<code class='language-js'>$.pfNotice.open({dismissable: true})</code>",
          "Boolean. true to be a dismissible notice, false to dismiss automatically",
          "Optional. False by default."
        ],
        [
          "<code class='language-js'>$.pfNotice.open({closeDelay: 7000})</code>",
          "Integer. Number of milliseconds before the notice closes",
          "Optional. Default is 7000ms"
        ]
      ]
    }
  }
}