DrBoolean

var App = React.createClass({

  render: function() {
    return (
      <div>
        <Notification>
          <h2 className="slds-text-heading--small">Beware of the Trash Dragons!</h2>
        </Notification>
      </div>
    );

DrBoolean

var React = require('react');
var Notification = require('./notification');

var App = React.createClass({

  render: function() {
    return (
      <div>
        <Notification />
      </div>

DrBoolean

  render: function() {
    return (
      <div className="slds-notify-container">
        <div className="slds-notify slds-notify--alert" role="alert">
          <span className="slds-assistive-text">info</span>
          <button className="slds-button slds-notify__close slds-icon--small">
            <svg aria-hidden="true" className="slds-button__icon slds-button__icon--inverse" dangerouslySetInnerHTML={{__html:'<use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>'}}>
            </svg>
            <span className="slds-assistive-text">Close</span>
          </button>

DrBoolean

var App = React.createClass({

  render: function() {
    return (
      <div>
        <Notification.Toast theme="error">
          <h2 className="slds-text-heading--small">Beware of the Trash Dragons!</h2>
        </Notification.Toast>
      </div>
    );

DrBoolean

var React = require('react');

var Notification = React.createClass({

  render: function() {
    return <div />;
  }
}

module.exports = Notification;

DrBoolean

  render: function() {
    return (
      <div className="slds-notify-container">
        <div className="slds-notify slds-notify--alert" role="alert">
          <span className="slds-assistive-text">info</span>
          <button className="slds-button slds-notify__close slds-icon--small">
            <svg aria-hidden="true" className="slds-button__icon slds-button__icon--inverse" dangerouslySetInnerHTML={{__html:'<use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>'}}>
            </svg>
            <span className="slds-assistive-text">Close</span>
          </button>

DrBoolean

var App = React.createClass({

  render: function() {
    return (
      <div>
        <Notification theme="error">
          <h2 className="slds-text-heading--small">Beware of the Trash Dragons!</h2>
        </Notification>
      </div>
    );

DrBoolean

var Notification = React.createClass({

  render: function() {
    var theme = this.props.theme || 'info';
    var themeClass = 'slds-theme--' + theme;
    var className = "slds-notify slds-notify-alert " + themeClass;

    return (
      <div className="slds-notify-container">
        <div className={className} role="alert">

DrBoolean

var Notification = function(variant) {
  var comp = React.createClass({
    render: function() {
      var theme = this.props.theme || 'info';
      var themeClass = 'slds-theme--' + theme;
      var className = "slds-notify slds-notify--" + variant + ' ' + themeClass;

      return (
        <div className="slds-notify-container">
          <div className={className} role="alert">

DrBoolean

var _One = function(v) {
  this.value = v;
};

var _Many = function(v, vs) {
  this.value = v;
  this.tail = vs;
};

var One = function(x) { return new _One(x); };