qpp-style 0.0.9 → 0.0.10

package/components/Modal/Modal.stories.js

@@ -1,159 +0,0 @@
-import React, { useState } from 'react';
-import Modal from './index';
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-
-export default {
-  title: 'Modal',
-  component: Modal,
-  decorators: [withKnobs],
-};
-
-const useModal = () => {
-  const [open, setOpen] = useState(false);
-  const openModal = () => setOpen(true);
-  const closeModal = () => setOpen(false);
-  return [open, openModal, closeModal];
-};
-
-export const WithDesignSystem = () => {
-  const [open, openModal, closeModal] = useModal();
-  const knobIsOpen = boolean('isOpen', false);
-  return (
-    <div className="qpp-u-padding--12">
-      <button className="qpp-c-button" onClick={openModal}>
-        Open Modal
-      </button>
-      <Modal
-        useDesignSystem
-        isOpen={open || knobIsOpen}
-        title={text('Title text', 'Title Text')}
-        onRequestClose={closeModal}
-      >
-        <p>
-          {text(
-            'bodyText',
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.'
-          )}
-        </p>
-      </Modal>
-    </div>
-  );
-};
-
-export const WithDesignSystemDialog = () => {
-  const [open, openModal, closeModal] = useModal();
-  const knobIsOpen = boolean('isOpen', false);
-  return (
-    <div className="qpp-u-padding--12">
-      <button className="qpp-c-button" onClick={openModal}>
-        Open Modal
-      </button>
-      <Modal
-        useDesignSystem
-        isOpen={open || knobIsOpen}
-        title={text('Title text', 'Title Text')}
-        onRequestClose={closeModal}
-        primary={{
-          title: 'Yes, go for it',
-          onClick: () => {
-            console.log('submit');
-            closeModal();
-          },
-        }}
-        secondary={{
-          title: 'No, take me back',
-        }}
-      >
-        <p>
-          {text(
-            'bodyText',
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.'
-          )}
-        </p>
-      </Modal>
-    </div>
-  );
-};
-
-export const WithDesignSystemOverflow = () => {
-  const [open, openModal, closeModal] = useModal();
-  const knobIsOpen = boolean('isOpen', false);
-  return (
-    <div className="qpp-u-padding--12">
-      <button className="qpp-c-button" onClick={openModal}>
-        Open Modal
-      </button>
-      <Modal
-        useDesignSystem
-        isOpen={open || knobIsOpen}
-        title={text('Title text', 'Title Text')}
-        onRequestClose={closeModal}
-        primary={{
-          title: 'Yes, go for it',
-          onClick: () => {
-            console.log('submit');
-            closeModal();
-          },
-        }}
-        secondary={{
-          title: 'No, take me back',
-        }}
-      >
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac
-          pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper
-          vitae lorem ullamcorper, blandit fringilla mauris. Aenean odio nulla,
-          dapibus convallis est ac, tempor congue lorem. Aliquam facilisis
-          tortor eget lectus gravida bibendum. Suspendisse vel posuere risus.
-          Etiam condimentum sollicitudin est, eget auctor lectus suscipit nec.
-          Duis efficitur vitae risus at malesuada. Mauris tempus turpis sed
-          lacus lacinia, et mattis tortor eleifend. In sit amet felis vel quam
-          egestas ultricies ac ac nisl. Morbi elementum dui libero, non
-          convallis risus ornare vel. Maecenas posuere ipsum ut sem aliquet,
-          quis maximus dolor cursus. Praesent vulputate orci tellus, sed
-          fringilla arcu mollis sit amet. Phasellus eros turpis, consequat sit
-          amet placerat sed, mollis ac justo.
-        </p>
-        <p>
-          Cras quis pharetra elit. Mauris lacinia quam quis metus mattis
-          lobortis vel nec arcu. Fusce nec tellus vel nunc cursus vestibulum.
-          Quisque pretium, arcu at sagittis posuere, leo magna tempus nunc, vel
-          malesuada nunc mauris ac ante. Donec arcu velit, imperdiet vitae purus
-          nec, imperdiet auctor nisi. Cras ornare, elit sit amet viverra
-          bibendum, justo dolor congue mi, quis pretium erat orci a lorem. Sed
-          rhoncus quam ut tellus hendrerit accumsan.
-        </p>
-        <p>
-          Donec varius elit vitae elit efficitur fermentum. Vestibulum ante
-          ipsum primis in faucibus orci luctus et ultrices posuere cubilia
-          curae; Nulla facilisi. Ut malesuada venenatis varius. Nunc libero
-          massa, luctus sagittis sapien ultrices, pulvinar venenatis purus. In
-          nec orci ac nibh sagittis lobortis vel sed massa. Morbi pretium odio
-          vitae malesuada ullamcorper. Pellentesque facilisis posuere
-          consectetur. Nam maximus finibus ante, non eleifend neque euismod et.
-        </p>
-        <p>
-          Pellentesque vehicula nec massa nec accumsan. Pellentesque non odio eu
-          felis hendrerit pellentesque non sed neque. Morbi dui nisl, facilisis
-          id gravida non, vehicula at dui. In eleifend suscipit imperdiet.
-          Quisque facilisis augue et mi lobortis tristique. Praesent auctor
-          dictum erat, non mollis ante tempus id. Integer et libero iaculis,
-          imperdiet neque at, pharetra nisl. Suspendisse diam massa, vehicula eu
-          varius ullamcorper, semper vel velit. Morbi consequat mattis nisi, id
-          dignissim est bibendum non. Suspendisse semper laoreet neque, ac
-          tincidunt tortor. Ut posuere urna a convallis consectetur. Mauris
-          varius cursus libero sed molestie. Duis id dignissim arcu. Mauris
-          tincidunt egestas congue.
-        </p>
-        <p>
-          Donec rutrum erat vitae nulla ultricies, quis laoreet orci consequat.
-          Nunc et justo volutpat dolor feugiat convallis. Vivamus efficitur nisi
-          quis risus eleifend, ut tincidunt turpis volutpat. Nam commodo turpis
-          dolor, dapibus rutrum erat facilisis a. Ut a dictum urna. Maecenas vel
-          egestas odio. Ut venenatis est dolor, eget ullamcorper diam finibus
-          et. Proin tincidunt porta pellentesque.
-        </p>
-      </Modal>
-    </div>
-  );
-};

package/components/NotificationBanner/NotificationBanner.stories.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import NotificationBanner from './NotificationBannerUI';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-
-export default {
-  title: 'NotificationBanner',
-  component: NotificationBanner,
-  decorators: [withKnobs],
-};
-
-export const ExampleNotificationBanner = () => (
-  <NotificationBanner
-    dismissable={boolean('dismissable', false)}
-    content="CONTENT"
-    label="LABEL"
-    name="NAME"
-    fromStorage={false}
-    color="blue"
-  />
-);
-
-ExampleNotificationBanner.storyName = 'example NotificationBanner';

package/components/NotificationBanner/NotificationBannerUI.jsx

@@ -1,282 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import SanitizedContent from '../SanitizedContent';
-import { CloseXIcon, BellOutline } from '../../lib/SvgComponents.jsx';
-
-/**
- * Renders the QPP NotificationBanner content.
- */
-export default class NotificationBannerUI extends Component {
-  /**
-   * @param {Object} props - An object containing content and config data
-   * @param {Boolean} props.dismissable - Whether to render a close button
-   * @param {String} props.content - An HTML string of content
-   * @param {String} props.name - The unique name of this NotificationBanner
-   * @param {Boolean} props.fromStorage - Whether to load content from
-   * localStorage
-   */
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      content: props.content,
-      label: props.label,
-      color: props.color,
-    };
-
-    this._renderCloseButton = this.renderCloseButton.bind(this);
-    this._collapseNotification = this.collapseNotification.bind(this);
-    this._expandNotification = this.expandNotification.bind(this);
-    this._setBannerHeight = this.setBannerHeight.bind(this);
-  }
-
-  /**
-   * If any notifications are found in localStorage, filter to ones that match
-   * this instance's unique props.name. If the notification is active, set the
-   * content, otherwise empty it.
-   */
-  componentDidMount() {
-    const notifications = this.getNotificationsFromStorage() || [];
-    const now = new Date();
-
-    notifications
-      .filter((x) => x.name === this.props.name)
-      .forEach((x) => {
-        if (this.isNotificationCurrent(now, x)) {
-          this.setState({
-            content: this.props.fromStorage ? x.content : this.props.content,
-            label:
-              this.props.fromStorage && x.label ? x.label : this.props.label,
-            color:
-              this.props.fromStorage && x.color ? x.color : this.props.color,
-            expanded: this.isNotificationExpanded(x),
-          });
-        }
-      });
-
-    if (window.innerWidth <= 767) {
-      this.setState({
-        expanded: false,
-      });
-    }
-
-    window.addEventListener('load', this._setBannerHeight);
-    window.addEventListener('resize', this._setBannerHeight);
-  }
-
-  /**
-   * Attempt to read notifications from localStorage
-   * @return {Array} An array of notification objects
-   */
-  getNotificationsFromStorage() {
-    try {
-      return JSON.parse(window.localStorage.getItem('notifications'));
-    } catch (e) {
-      return [];
-    }
-  }
-
-  setBannerHeight() {
-    if (this.state.content) {
-      this.bannerContainer.style.transition = 'none';
-
-      this.setState({
-        height: this.state.expanded
-          ? '100%'
-          : this.collapsedWrapper.offsetHeight + 'px',
-      });
-    }
-  }
-
-  /**
-   * Check the notification properties to determine whether it is still active
-   * based on the current date and time.
-   *
-   * @param {Date} now
-   * @param {Object} notification
-   * @return {Boolean}
-   */
-  isNotificationCurrent(now, notification) {
-    const startDate = new Date(notification.startDate);
-    const endDate = new Date(notification.endDate);
-    const isActive =
-      (!this.isDateValid(startDate) && !this.isDateValid(endDate)) ||
-      (startDate <= now && now <= endDate);
-
-    return isActive;
-  }
-
-  isNotificationExpanded(notification) {
-    const dateDismissed = new Date(notification.dateDismissed);
-    const dateUpdated = new Date(notification.dateUpdated);
-    const notDismissed =
-      (this.isDateValid(dateUpdated) &&
-        this.isDateValid(dateDismissed) &&
-        dateUpdated >= dateDismissed) ||
-      !this.isDateValid(dateDismissed);
-
-    return notDismissed;
-  }
-
-  /**
-   * Whether the date is valid, i.e. not null
-   *
-   * @param {Date} date
-   * @return {Boolean}
-   */
-  isDateValid(date) {
-    return !isNaN(Date.parse(date));
-  }
-
-  /**
-   * Try to find this NotificationBanner instance in localStorage, or else add
-   * a minimal version of it, and mark it with a dateDismissed, then update
-   * localStorage.
-   */
-  markNotificationClosed() {
-    let found = false;
-    const dateDismissed = new Date().toISOString();
-    let notifications = (this.getNotificationsFromStorage() || []).map(
-      (notification) => {
-        if (notification.name === this.props.name) {
-          notification.dateDismissed = dateDismissed;
-          found = true;
-        }
-
-        return notification;
-      }
-    );
-
-    if (!found) {
-      notifications = notifications.concat([
-        {
-          name: this.props.name,
-          dateDismissed,
-        },
-      ]);
-    }
-
-    window.localStorage.setItem('notifications', JSON.stringify(notifications));
-  }
-
-  /**
-   * Callback when the user dimisses a notification. Mark it as dismissed in
-   * localStorage, empty the contents, and dispatch a custom event to notify
-   * any observers that it has been dismissed.
-   */
-  collapseNotification(e) {
-    e.stopPropagation();
-    this.markNotificationClosed();
-
-    this.bannerContainer.style.transition = 'height .2s ease-out';
-    this.setState({
-      expanded: false,
-      height: this.collapsedWrapper.offsetHeight + 'px',
-    });
-  }
-
-  expandNotification() {
-    if (!this.state.expanded) {
-      this.bannerContainer.style.transition = 'height .2s ease-out';
-      this.setState({
-        expanded: true,
-        height: '100%',
-      });
-    }
-  }
-
-  /**
-   * Renders the close button if the notification instance is dismissable.
-   *
-   * @return {String} HTML content
-   */
-  renderCloseButton() {
-    if (this.props.dismissable) {
-      return (
-        <button
-          onClick={this._collapseNotification}
-          type="button"
-          className="notification-banner-close"
-        >
-          <svg className="close-icon" aria-hidden="true" focusable="false">
-            <CloseXIcon />
-          </svg>
-          <span className="sr-only">Close</span>
-        </button>
-      );
-    } else {
-      return '';
-    }
-  }
-
-  /**
-   * Render the notification if it has any contents.
-   *
-   * @return {String} HTML content
-   */
-  render() {
-    if (this.state.content === '') {
-      return <div id="notification-banner" />;
-    } else {
-      const notificationStatus = this.state.expanded ? 'expanded' : 'collapsed';
-      const className = `notification-banner  notification-banner-${this.state.color} ${notificationStatus}`;
-
-      return (
-        <div
-          style={{ height: this.state.height }}
-          ref={(elem) => (this.bannerContainer = elem)}
-          className={className}
-        >
-          <div
-            ref={(elem) => (this.expandedWrapper = elem)}
-            className={`notification-banner-wrapper expanded-view`}
-          >
-            <div className="notification-banner-label">{this.state.label}</div>
-            <div className="notification-banner-content">
-              <SanitizedContent
-                html={
-                  this.state.expanded
-                    ? this.state.content
-                    : '<p>Nothing to see here</p>'
-                }
-              />
-            </div>
-            {this.state.expanded && this._renderCloseButton()}
-          </div>
-
-          <div
-            ref={(elem) => (this.collapsedWrapper = elem)}
-            className={`notification-banner-wrapper collapsed-view`}
-            onClick={this._expandNotification}
-          >
-            <button className={`notification-banner-label`}>
-              {this.state.label}
-              <span className="bell-icon">
-                <svg aria-hidden="true" focusable="false">
-                  <BellOutline />
-                </svg>
-              </span>
-            </button>
-          </div>
-        </div>
-      );
-    }
-  }
-}
-
-NotificationBannerUI.propTypes = {
-  dismissable: PropTypes.bool,
-  content: PropTypes.string,
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  fromStorage: PropTypes.bool,
-  color: PropTypes.string,
-};
-
-NotificationBannerUI.defaultProps = {
-  dismissable: true,
-  content: '',
-  fromStorage: false,
-  label: 'Update',
-  color: 'blue',
-};