What the heck happened to the rest of the UIF documentation?

All the CSS-only components have been moved across to the Storybook version of our UIF docs.

The jQuery dependent components are considered legacy, and while still currently available, are not going to be actively developed upon any longer. Also, it's a schlep trying to get jQuery to work within webpack/storybook, so they can stay here.

Please consider using CSS-only components for maximum ongoing happiness. 💖

Notice
ready

Introduction

Used to provide helpful information to users. Can point upwards or downwards for extra contextual help.

To dynamically show a notice that slides in at the top of the page, you need to make use of the $.pfNotice scripts.

Examples

JS Notice alert

<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>

JS Dismissable Notice alert

<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

Usage

Class/JavaScript Hook Description Required?
.notice Creates a notice element that can have a wide range of children as content. Required
.notice--pointer-up Creates an upward pointer above the notice block. Optional
.notice--pointer-up Creates a downward pointer below the notice block. Optional
.notice--info Creates an info styled version Optional
.notice--success Creates a success styled version Optional
.notice--error Creates an error styled version Optional
.notice--close Adds necessary styling for a notice with a close action. Optional
.notice__close Added to the close link to apply its correct styling and positioning. If used, the following classes are also required on the element: .icon and .link--silent, which is less expensive than recreating or extending these styles in the CSS. Required
[data-js=notice] Add to any notice that has JavaScript events bound to it. Currently, this only applies to notices with close actions. Optional
[data-js=notice-close] Added to close link to bind necessary JavScript event. Required
$.pfNotice.open({content: 'Hello'}) String. Content displayed in the notice. Can contain HTML. Required when using the JS API
$.pfNotice.open({type: 'success'}) String. The style of the notice, like 'success', 'error', etc. Optional. 'Default' by default.
$.pfNotice.open({dismissable: true}) Boolean. true to be a dismissible notice, false to dismiss automatically Optional. False by default.
$.pfNotice.open({closeDelay: 7000}) Integer. Number of milliseconds before the notice closes Optional. Default is 7000ms