design-system-starter/dist/esm/index.js

Design system starter

/* design-system-starter v0.0.17 © 2019 Ryan Fitzer */
import React, { useState, useEffect } from 'react';
import { string, func } from 'prop-types';

/**
 * Just a plain `<button type="button" />`
 */

var Button = function Button(_ref) {
  var text = _ref.text,
      onClick = _ref.onClick;
  return React.createElement("button", {
    type: "button",
    className: "button",
    onClick: onClick
  }, text);
};

Button.propTypes = {
  /** The text to show in the button. */
  text: string.isRequired,

  /** A handler function for when the button is clicked. */
  onClick: func
};

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
    return;
  }

  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

/**
 * Button that displays the total clicks it's recieved
 */

var Clicker = function Clicker() {
  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      count = _useState2[0],
      setCount = _useState2[1];

  function updateCount() {
    setCount(count + 1);
  }

  useEffect(function () {
    document.title = "You clicked ".concat(count, " times");
  });
  return React.createElement("div", null, React.createElement("p", {
    className: "msg"
  }, "You clicked ", count, " ", count === 1 ? 'time' : 'times'), React.createElement(Button, {
    text: "Click Me!",
    onClick: updateCount
  }));
};

/**
 * Creates a link element via `<a href />`
 */

var Link = function Link(_ref) {
  var text = _ref.text,
      href = _ref.href;
  return React.createElement("a", {
    className: "link",
    href: href
  }, text);
};

Link.propTypes = {
  /** Link destination */
  href: string.isRequired,

  /** The text to display */
  text: string.isRequired
};

export { Button, Clicker, Link };