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

Flyout
ready

Introduction

Allows for content that can be hidden by default and opened over/above other content on the page by the user.

Examples

Click behaviour

Export 
<div class="fly-out" data-js="fly-out" data-fly-out-event-type="click">
      <a href="#" class="btn btn--tertiary btn--xsmall" data-js="fly-out-toggle">
        <span>Export</span><span class="icon icon--down-grey icon--down-hover-blue"></span>
      </a>
      <div data-js="fly-out-content" class="fly-out__content">
        <nav class="nav nav--chrome">
          <ul class="nav__list nav__list--chrome">
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome"><span class='no-wrap'><span class='icon icon--doc-grey'></span><span>.PDF</span></span></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

Click-Sticky behaviour

Export 
<div class="fly-out" data-js="fly-out" data-fly-out-event-type="click-sticky">
      <a href="#" class="btn btn--tertiary btn--xsmall" data-js="fly-out-toggle">
        <span>Export</span><span class="icon icon--down-grey icon--down-hover-blue"></span>
      </a>
      <div data-js="fly-out-content" class="fly-out__content">
        <nav class="nav nav--chrome">
          <ul class="nav__list nav__list--chrome">
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome"><span class='no-wrap'><span class='icon icon--doc-grey'></span><span>.PDF</span></span></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

Focus behaviour

Export 
<div class="fly-out" data-js="fly-out" data-fly-out-event-type="focus">
      <a href="#" class="btn btn--tertiary btn--xsmall" data-js="fly-out-toggle">
        <span>Export</span><span class="icon icon--down-grey icon--down-hover-blue"></span>
      </a>
      <div data-js="fly-out-content" class="fly-out__content">
        <nav class="nav nav--chrome">
          <ul class="nav__list nav__list--chrome">
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome"><span class='no-wrap'><span class='icon icon--doc-grey'></span><span>.PDF</span></span></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

Hover behaviour

Export 
<div class="fly-out" data-js="fly-out" data-fly-out-event-type="hover">
      <a href="#" class="btn btn--tertiary btn--xsmall" data-js="fly-out-toggle">
        <span>Export</span><span class="icon icon--down-grey icon--down-hover-blue"></span>
      </a>
      <div data-js="fly-out-content" class="fly-out__content">
        <nav class="nav nav--chrome">
          <ul class="nav__list nav__list--chrome">
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome"><span class='no-wrap'><span class='icon icon--doc-grey'></span><span>.PDF</span></span></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

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

Usage

Class/JavaScript Hook Description Required?
[data-js='fly-out'] and .fly-out Placed on outer-most tag that will contain the fly out. Required
[data-js='fly-out-toggle'] and .fly-out__toggle Placed on the tag that will open the fly out when interacted with by user. Note: .fly-out__toggle is only needed when the element is not a link. Required
.fly-out__content Placed on the tag that wraps the fly out content. Required
[data-fly-out-event-type='click|click-sticky|focus|hover'] 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
[data-fly-out-position='center'] Placed on the tag that wraps the fly out content and will force the flyout to be centered within the toggle. Optional