@primer/blueprints - npm Package Compare versions

Comparing version 0.0.0-04db6a1 to 0.0.0-0c839fc

dist/index.esm.js

@@ -1,8 +0,8 @@
-import { Box, Button, BorderBox, Absolute, StyledOcticon, Relative, Text, Link, Avatar, Flex, Sticky } from '@primer/components';
-import styled from 'styled-components';
 import React, { useEffect, useState } from 'react';
 import ReactDOM, { findDOMNode } from 'react-dom';
+import { Button, BorderBox, Absolute, Box, StyledOcticon, Relative, Text, Link, Avatar, Flex, Sticky } from '@primer/components';
 import Octicon, { Clippy, getIconByName, MarkGithub, PrimitiveDot, Comment, Info, FileCode, Alert } from '@githubprimer/octicons-react';
 import getConfig from 'next/config';
 import TreeModel from 'tree-model';
+import { join } from 'path';
 import Measure from 'react-measure';
@@ -13,6 +13,5 @@ import HTMLtoJSX from 'html-2-jsx';
 import 'prop-types';
-import dynamic from 'next/dynamic';
 import NextLink from 'next/link';
+import styled from 'styled-components';
 import { withRouter } from 'next/router';
-import { join } from 'path';
 
@@ -227,13 +226,2 @@ function _classCallCheck(instance, Constructor) {
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var BoxShadow = styled(Box)(_templateObject());
-
 var ClipboardCopy =
@@ -426,2 +414,29 @@ /*#__PURE__*/
 
+function sortCompare(a, b, get) {
+  var aa = get(a);
+  var bb = get(b);
+  return typeof aa === 'string' && typeof bb === 'string' ? aa.localeCompare(bb) : undefined;
+}
+function nodeSort(a, b) {
+  return sortCompare(a, b, function (node) {
+    return node.meta.sort_title || node.meta.title;
+  });
+}
+function addPath(el, path) {
+  // if there's no path, just return the element
+  if (!path) return el; // if this is a link it'll have an "href"; otherwise, add "path"
+
+  var prop = el.props.href ? 'href' : 'path';
+  var value = el.props[prop];
+  var props = {}; // if there's a value and it's not absolute, prefix it with the path
+
+  if (value && !value.match(/^(\/|https?:)/)) {
+    props[prop] = join(path, value);
+  } else {
+    props[prop] = path;
+  }
+
+  return React.cloneElement(el, props);
+}
+
 var Frame =
@@ -714,16 +729,2 @@ /*#__PURE__*/
 
-var DetailsDialog = dynamic(function () {
-  return import('details-dialog-element').then(function () {
-    return React.createFactory('details-dialog');
-  });
-}, {
-  ssr: false,
-  loadableGenerated: {
-    webpack: function webpack() {
-      return [require.resolveWeak('details-dialog-element')];
-    },
-    modules: ['details-dialog-element']
-  }
-});
-
 function Link$1(_ref) {
@@ -741,2 +742,13 @@ var href = _ref.href,
 
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var BoxShadow = styled(Box)(_templateObject());
+
 var HeaderText = function HeaderText(props) {
@@ -839,16 +851,89 @@ return React.createElement(Text, _extends({
 var NavLink = withRouter(function (_ref) {
-  var _ref$is = _ref.is,
-      Tag = _ref$is === void 0 ? NodeLink : _ref$is,
-      href = _ref.href,
+  var href = _ref.href,
       router = _ref.router,
-      rest = _objectWithoutProperties(_ref, ["is", "href", "router"]);
+      rest = _objectWithoutProperties(_ref, ["href", "router"]);
 
-  return React.createElement(Tag, _extends({
+  return React.createElement(Box, rest, React.createElement(NodeLink, _extends({
     href: href,
-    color: "white",
-    px: 4,
-    fontWeight: router.pathname === href ? 'bold' : null
-  }, rest));
+    color: router.pathname === href ? 'black' : undefined,
+    fontSize: 1
+  }, rest)));
 });
 
+/**
+ * A <Section> gets a `path` and optional children. If it has children it will
+ * render those and prepend each child's `href` prop with the provided `path`.
+ * This means that you can do:
+ *
+ * ```jsx
+ * <Section path="/section">
+ *   <Link href="foo">Links to /section/foo</Link>
+ * </Section>
+ * ```
+ *
+ * If no children are provided, it renders a <NavList> with the provided
+ * `path`.
+ */
+
+var Section = function Section(_ref) {
+  var path = _ref.path,
+      children = _ref.children;
+  return React.createElement(BorderBox, {
+    p: 5,
+    border: 0,
+    borderBottom: 1,
+    borderRadius: 0,
+    width: "100%"
+  }, children && path ? React.Children.map(children, function (child) {
+    return addPath(child, path);
+  }) : React.createElement(NavList, {
+    path: path
+  }));
+};
+
+Section.displayName = "Section";
+
+/**
+ * A <Section.Link> is really just a <NodeLink> that's bold when its `href`
+ * matches the current path, wrapped in a <Box> for whitespace.
+ */
+var SectionLink = withRouter(function (_ref2) {
+  var href = _ref2.href,
+      router = _ref2.router,
+      rest = _objectWithoutProperties(_ref2, ["href", "router"]);
+
+  return React.createElement(Box, rest, React.createElement(NodeLink, _extends({
+    href: href
+  }, rest, {
+    fontSize: 2,
+    fontWeight: router.pathname.startsWith(href) ? 'bold' : null
+  })));
+});
+Section.Link = SectionLink;
+
+/**
+ * A <NavList> renders a <Section.Link> for the given `path` and looks up the
+ * path in the page tree. If a node is found, it renders a <NavLink> for each
+ * of the node's children.
+ */
+
+function NavList(_ref) {
+  var path = _ref.path;
+  var node = rootPage.first(function (node) {
+    return node.path === path;
+  });
+  var children = node ? node.children.sort(nodeSort) : [];
+  return React.createElement(React.Fragment, null, React.createElement(Section.Link, {
+    color: "gray.9",
+    href: path,
+    mb: 3
+  }), children.map(function (child) {
+    return React.createElement(NavLink, {
+      mt: 2,
+      href: child.path,
+      key: child.path
+    });
+  }));
+}
+
 function Outline(_ref) {
@@ -991,108 +1076,24 @@ var outline = _ref.outline,
 
-function SideNav(props) {
-  return React.createElement(Relative, {
-    is: "nav"
-  }, React.createElement(Box, _extends({
-    id: "sidenav"
-  }, props), React.createElement(Flex, {
-    flexDirection: "column",
-    alignItems: "start"
-  }, React.createElement(Router, null, React.createElement(RouteMatch, {
-    path: "/blueprints"
-  }, React.createElement(Section, {
-    path: "components"
-  }))))));
-}
-SideNav.displayName = "SideNav";
-
 /**
- * A <Section> gets a `path` and optional children. If it has children it will
- * render those and prepend each child's `href` prop with the provided `path`.
- * This means that you can do:
+ * <RouteMatch> is just a way to conditionally render content without a wrapper
+ * element when contained directly in a <Router>:
  *
  * ```jsx
- * <Section path="/section">
- *   <Link href="foo">Links to /section/foo</Link>
- * </Section>
+ * <Router>
+ *   <RouteMatch path="/some/dir">
+ *     this will only show up on pages whose path begins with "/some/dir"
+ *   </RouteMatch>
+ * </Router>
  * ```
- *
- * If no children are provided, it renders a <NavList> with the provided
- * `path`.
  */
-var Section = function Section(_ref) {
+
+function RouteMatch(_ref) {
   var path = _ref.path,
       children = _ref.children;
-  return React.createElement(BorderBox, {
-    p: 5,
-    border: 0,
-    borderBottom: 1,
-    borderRadius: 0,
-    width: "100%"
-  }, children && path ? React.Children.map(children, function (child) {
+  return path ? React.Children.map(children, function (child) {
     return addPath(child, path);
-  }) : React.createElement(NavList, {
-    path: path
-  }));
-};
-
-Section.displayName = "Section";
-
-/**
- * A <NavList> renders a <SectionLink> for the given `path` and looks up the
- * path in the page tree. If a node is found, it renders a <NavLink> for each
- * of the node's children.
- */
-function NavList(_ref2) {
-  var path = _ref2.path;
-  var node = rootPage.first(function (node) {
-    return node.path === path;
-  });
-  var children = node ? node.children.sort(nodeSort) : [];
-  return React.createElement(React.Fragment, null, React.createElement(SectionLink, {
-    href: path,
-    mb: 3
-  }), children.map(function (child) {
-    return React.createElement(NavLink$1, {
-      href: child.path,
-      key: child.path
-    });
-  }));
+  }) : children;
 }
-/**
- * A <SectionLink> is really just a <NodeLink> that's bold when its `href`
- * matches the current path, wrapped in a <Box> for whitespace.
- */
 
-
-var SectionLink = withRouter(function (_ref3) {
-  var href = _ref3.href,
-      router = _ref3.router,
-      rest = _objectWithoutProperties(_ref3, ["href", "router"]);
-
-  return React.createElement(Box, rest, React.createElement(NodeLink, {
-    href: href,
-    color: "gray.9",
-    fontSize: 2,
-    fontWeight: router.pathname.startsWith(href) ? 'bold' : null
-  }));
-});
 /**
- * A <NavLink> is a <NodeLink> that turns black when its `href` matches the
- * current path, wrapped in a <Box> for whitespace.
- */
-
-var NavLink$1 = withRouter(function (_ref4) {
-  var href = _ref4.href,
-      router = _ref4.router,
-      rest = _objectWithoutProperties(_ref4, ["href", "router"]);
-
-  return React.createElement(Box, {
-    mt: 2
-  }, React.createElement(NodeLink, _extends({
-    href: href,
-    color: router.pathname === href ? 'black' : undefined,
-    fontSize: 1
-  }, rest)));
-});
-/**
  * This is inspired by React Router's <Router> component, in that it looks for
@@ -1104,5 +1105,5 @@ * children with the `path` prop and only renders the _first_ one that matches
 
-var Router = withRouter(function (_ref5) {
-  var router = _ref5.router,
-      children = _ref5.children;
+var Router = withRouter(function (_ref) {
+  var router = _ref.router,
+      children = _ref.children;
   var matched = false;
@@ -1119,52 +1120,16 @@ return React.Children.toArray(children).map(function (child) {
 });
-/**
- * <RouteMatch> is just a way to conditionally render content without a wrapper
- * element when contained directly in a <Router>:
- *
- * ```jsx
- * <Router>
- *   <RouteMatch path="/some/dir">
- *     this will only show up on pages whose path begins with "/some/dir"
- *   </RouteMatch>
- * </Router>
- * ```
- */
 
-function RouteMatch(_ref6) {
-  var path = _ref6.path,
-      children = _ref6.children;
-  return path ? React.Children.map(children, function (child) {
-    return addPath(child, path);
-  }) : children;
+function SideNav(props) {
+  return React.createElement(Relative, {
+    is: "nav"
+  }, React.createElement(Box, _extends({
+    id: "sidenav"
+  }, props), React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "start"
+  }, React.createElement(Router, null, props.children))));
 }
 
-function sortCompare(a, b, get) {
-  var aa = get(a);
-  var bb = get(b);
-  return typeof aa === 'string' && typeof bb === 'string' ? aa.localeCompare(bb) : undefined;
-}
+SideNav.displayName = "SideNav";
 
-function nodeSort(a, b) {
-  return sortCompare(a, b, function (node) {
-    return node.meta.sort_title || node.meta.title;
-  });
-}
-
-function addPath(el, path) {
-  // if there's no path, just return the element
-  if (!path) return el; // if this is a link it'll have an "href"; otherwise, add "path"
-
-  var prop = el.props.href ? 'href' : 'path';
-  var value = el.props[prop];
-  var props = {}; // if there's a value and it's not absolute, prefix it with the path
-
-  if (value && !value.match(/^(\/|https?:)/)) {
-    props[prop] = join(path, value);
-  } else {
-    props[prop] = path;
-  }
-
-  return React.cloneElement(el, props);
-}
-
-export { BoxShadow, ClipboardCopy, CodeExample, Contributors, DetailsDialog, Frame, Header, Link$1 as Link, NavLink, NodeLink, Outline, PackageHeader, SideNav, StatusLabel, CommonStyles, CommonScripts, config, assetPrefix, assetPath, getAssetPath, requirePage, pathMap, pageTree, rootPage };
+export { ClipboardCopy, CodeExample, Contributors, Frame, Header, Link$1 as Link, NavLink, NavList, NodeLink, Outline, PackageHeader, RouteMatch, Router, Section, SideNav, StatusLabel, CommonStyles, CommonScripts, config, assetPrefix, assetPath, getAssetPath, requirePage, pathMap, pageTree, rootPage, sortCompare, nodeSort, addPath };

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@primer/components'), require('styled-components'), require('react'), require('react-dom'), require('@githubprimer/octicons-react'), require('next/config'), require('tree-model'), require('react-measure'), require('html-2-jsx'), require('react-live'), require('prism-github/prism-github.scss'), require('prop-types'), require('next/dynamic'), require('next/link'), require('next/router'), require('path')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@primer/components', 'styled-components', 'react', 'react-dom', '@githubprimer/octicons-react', 'next/config', 'tree-model', 'react-measure', 'html-2-jsx', 'react-live', 'prism-github/prism-github.scss', 'prop-types', 'next/dynamic', 'next/link', 'next/router', 'path'], factory) :
-  (factory((global.primer = {}),global.components,global.styled,global.React,global.ReactDOM,global.Octicon,global.getConfig,global.TreeModel,global.Measure,global.HTMLtoJSX,global.reactLive,null,global.propTypes,global.dynamic,global.NextLink,global.router,global.path));
-}(this, (function (exports,components,styled,React,ReactDOM,Octicon,getConfig,TreeModel,Measure,HTMLtoJSX,reactLive,prismGithub_scss,propTypes,dynamic,NextLink,router,path) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('@primer/components'), require('@githubprimer/octicons-react'), require('next/config'), require('tree-model'), require('path'), require('react-measure'), require('html-2-jsx'), require('react-live'), require('prism-github/prism-github.scss'), require('prop-types'), require('next/link'), require('styled-components'), require('next/router')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', '@primer/components', '@githubprimer/octicons-react', 'next/config', 'tree-model', 'path', 'react-measure', 'html-2-jsx', 'react-live', 'prism-github/prism-github.scss', 'prop-types', 'next/link', 'styled-components', 'next/router'], factory) :
+  (factory((global.primer = {}),global.React,global.ReactDOM,global.components,global.Octicon,global.getConfig,global.TreeModel,global.path,global.Measure,global.HTMLtoJSX,global.reactLive,null,global.propTypes,global.NextLink,global.styled,global.router));
+}(this, (function (exports,React,ReactDOM,components,Octicon,getConfig,TreeModel,path,Measure,HTMLtoJSX,reactLive,prismGithub_scss,propTypes,NextLink,styled,router) { 'use strict';
 
-  styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled;
   var React__default = 'default' in React ? React['default'] : React;
@@ -16,4 +15,4 @@ var ReactDOM__default = 'default' in ReactDOM ? ReactDOM['default'] : ReactDOM;
   propTypes = propTypes && propTypes.hasOwnProperty('default') ? propTypes['default'] : propTypes;
-  dynamic = dynamic && dynamic.hasOwnProperty('default') ? dynamic['default'] : dynamic;
   NextLink = NextLink && NextLink.hasOwnProperty('default') ? NextLink['default'] : NextLink;
+  styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled;
 
@@ -228,13 +227,2 @@ function _classCallCheck(instance, Constructor) {
 
-  function _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n"]);
-
-    _templateObject = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var BoxShadow = styled(components.Box)(_templateObject());
-
   var ClipboardCopy =
@@ -427,2 +415,29 @@ /*#__PURE__*/
 
+  function sortCompare(a, b, get) {
+    var aa = get(a);
+    var bb = get(b);
+    return typeof aa === 'string' && typeof bb === 'string' ? aa.localeCompare(bb) : undefined;
+  }
+  function nodeSort(a, b) {
+    return sortCompare(a, b, function (node) {
+      return node.meta.sort_title || node.meta.title;
+    });
+  }
+  function addPath(el, path$$1) {
+    // if there's no path, just return the element
+    if (!path$$1) return el; // if this is a link it'll have an "href"; otherwise, add "path"
+
+    var prop = el.props.href ? 'href' : 'path';
+    var value = el.props[prop];
+    var props = {}; // if there's a value and it's not absolute, prefix it with the path
+
+    if (value && !value.match(/^(\/|https?:)/)) {
+      props[prop] = path.join(path$$1, value);
+    } else {
+      props[prop] = path$$1;
+    }
+
+    return React__default.cloneElement(el, props);
+  }
+
   var Frame =
@@ -715,16 +730,2 @@ /*#__PURE__*/
 
-  var DetailsDialog = dynamic(function () {
-    return import('details-dialog-element').then(function () {
-      return React__default.createFactory('details-dialog');
-    });
-  }, {
-    ssr: false,
-    loadableGenerated: {
-      webpack: function webpack() {
-        return [require.resolveWeak('details-dialog-element')];
-      },
-      modules: ['details-dialog-element']
-    }
-  });
-
   function Link(_ref) {
@@ -742,2 +743,13 @@ var href = _ref.href,
 
+  function _templateObject() {
+    var data = _taggedTemplateLiteral(["\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n"]);
+
+    _templateObject = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  var BoxShadow = styled(components.Box)(_templateObject());
+
   var HeaderText = function HeaderText(props) {
@@ -840,16 +852,89 @@ return React__default.createElement(components.Text, _extends({
   var NavLink = router.withRouter(function (_ref) {
-    var _ref$is = _ref.is,
-        Tag = _ref$is === void 0 ? NodeLink : _ref$is,
-        href = _ref.href,
+    var href = _ref.href,
         router$$1 = _ref.router,
-        rest = _objectWithoutProperties(_ref, ["is", "href", "router"]);
+        rest = _objectWithoutProperties(_ref, ["href", "router"]);
 
-    return React__default.createElement(Tag, _extends({
+    return React__default.createElement(components.Box, rest, React__default.createElement(NodeLink, _extends({
       href: href,
-      color: "white",
-      px: 4,
-      fontWeight: router$$1.pathname === href ? 'bold' : null
-    }, rest));
+      color: router$$1.pathname === href ? 'black' : undefined,
+      fontSize: 1
+    }, rest)));
   });
 
+  /**
+   * A <Section> gets a `path` and optional children. If it has children it will
+   * render those and prepend each child's `href` prop with the provided `path`.
+   * This means that you can do:
+   *
+   * ```jsx
+   * <Section path="/section">
+   *   <Link href="foo">Links to /section/foo</Link>
+   * </Section>
+   * ```
+   *
+   * If no children are provided, it renders a <NavList> with the provided
+   * `path`.
+   */
+
+  var Section = function Section(_ref) {
+    var path$$1 = _ref.path,
+        children = _ref.children;
+    return React__default.createElement(components.BorderBox, {
+      p: 5,
+      border: 0,
+      borderBottom: 1,
+      borderRadius: 0,
+      width: "100%"
+    }, children && path$$1 ? React__default.Children.map(children, function (child) {
+      return addPath(child, path$$1);
+    }) : React__default.createElement(NavList, {
+      path: path$$1
+    }));
+  };
+
+  Section.displayName = "Section";
+
+  /**
+   * A <Section.Link> is really just a <NodeLink> that's bold when its `href`
+   * matches the current path, wrapped in a <Box> for whitespace.
+   */
+  var SectionLink = router.withRouter(function (_ref2) {
+    var href = _ref2.href,
+        router$$1 = _ref2.router,
+        rest = _objectWithoutProperties(_ref2, ["href", "router"]);
+
+    return React__default.createElement(components.Box, rest, React__default.createElement(NodeLink, _extends({
+      href: href
+    }, rest, {
+      fontSize: 2,
+      fontWeight: router$$1.pathname.startsWith(href) ? 'bold' : null
+    })));
+  });
+  Section.Link = SectionLink;
+
+  /**
+   * A <NavList> renders a <Section.Link> for the given `path` and looks up the
+   * path in the page tree. If a node is found, it renders a <NavLink> for each
+   * of the node's children.
+   */
+
+  function NavList(_ref) {
+    var path$$1 = _ref.path;
+    var node = rootPage.first(function (node) {
+      return node.path === path$$1;
+    });
+    var children = node ? node.children.sort(nodeSort) : [];
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Section.Link, {
+      color: "gray.9",
+      href: path$$1,
+      mb: 3
+    }), children.map(function (child) {
+      return React__default.createElement(NavLink, {
+        mt: 2,
+        href: child.path,
+        key: child.path
+      });
+    }));
+  }
+
   function Outline(_ref) {
@@ -992,108 +1077,24 @@ var outline = _ref.outline,
 
-  function SideNav(props) {
-    return React__default.createElement(components.Relative, {
-      is: "nav"
-    }, React__default.createElement(components.Box, _extends({
-      id: "sidenav"
-    }, props), React__default.createElement(components.Flex, {
-      flexDirection: "column",
-      alignItems: "start"
-    }, React__default.createElement(Router, null, React__default.createElement(RouteMatch, {
-      path: "/blueprints"
-    }, React__default.createElement(Section, {
-      path: "components"
-    }))))));
-  }
-  SideNav.displayName = "SideNav";
-
   /**
-   * A <Section> gets a `path` and optional children. If it has children it will
-   * render those and prepend each child's `href` prop with the provided `path`.
-   * This means that you can do:
+   * <RouteMatch> is just a way to conditionally render content without a wrapper
+   * element when contained directly in a <Router>:
    *
    * ```jsx
-   * <Section path="/section">
-   *   <Link href="foo">Links to /section/foo</Link>
-   * </Section>
+   * <Router>
+   *   <RouteMatch path="/some/dir">
+   *     this will only show up on pages whose path begins with "/some/dir"
+   *   </RouteMatch>
+   * </Router>
    * ```
-   *
-   * If no children are provided, it renders a <NavList> with the provided
-   * `path`.
    */
-  var Section = function Section(_ref) {
+
+  function RouteMatch(_ref) {
     var path$$1 = _ref.path,
         children = _ref.children;
-    return React__default.createElement(components.BorderBox, {
-      p: 5,
-      border: 0,
-      borderBottom: 1,
-      borderRadius: 0,
-      width: "100%"
-    }, children && path$$1 ? React__default.Children.map(children, function (child) {
+    return path$$1 ? React__default.Children.map(children, function (child) {
       return addPath(child, path$$1);
-    }) : React__default.createElement(NavList, {
-      path: path$$1
-    }));
-  };
-
-  Section.displayName = "Section";
-
-  /**
-   * A <NavList> renders a <SectionLink> for the given `path` and looks up the
-   * path in the page tree. If a node is found, it renders a <NavLink> for each
-   * of the node's children.
-   */
-  function NavList(_ref2) {
-    var path$$1 = _ref2.path;
-    var node = rootPage.first(function (node) {
-      return node.path === path$$1;
-    });
-    var children = node ? node.children.sort(nodeSort) : [];
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement(SectionLink, {
-      href: path$$1,
-      mb: 3
-    }), children.map(function (child) {
-      return React__default.createElement(NavLink$1, {
-        href: child.path,
-        key: child.path
-      });
-    }));
+    }) : children;
   }
-  /**
-   * A <SectionLink> is really just a <NodeLink> that's bold when its `href`
-   * matches the current path, wrapped in a <Box> for whitespace.
-   */
 
-
-  var SectionLink = router.withRouter(function (_ref3) {
-    var href = _ref3.href,
-        router$$1 = _ref3.router,
-        rest = _objectWithoutProperties(_ref3, ["href", "router"]);
-
-    return React__default.createElement(components.Box, rest, React__default.createElement(NodeLink, {
-      href: href,
-      color: "gray.9",
-      fontSize: 2,
-      fontWeight: router$$1.pathname.startsWith(href) ? 'bold' : null
-    }));
-  });
   /**
-   * A <NavLink> is a <NodeLink> that turns black when its `href` matches the
-   * current path, wrapped in a <Box> for whitespace.
-   */
-
-  var NavLink$1 = router.withRouter(function (_ref4) {
-    var href = _ref4.href,
-        router$$1 = _ref4.router,
-        rest = _objectWithoutProperties(_ref4, ["href", "router"]);
-
-    return React__default.createElement(components.Box, {
-      mt: 2
-    }, React__default.createElement(NodeLink, _extends({
-      href: href,
-      color: router$$1.pathname === href ? 'black' : undefined,
-      fontSize: 1
-    }, rest)));
-  });
-  /**
    * This is inspired by React Router's <Router> component, in that it looks for
@@ -1105,5 +1106,5 @@ * children with the `path` prop and only renders the _first_ one that matches
 
-  var Router = router.withRouter(function (_ref5) {
-    var router$$1 = _ref5.router,
-        children = _ref5.children;
+  var Router = router.withRouter(function (_ref) {
+    var router$$1 = _ref.router,
+        children = _ref.children;
     var matched = false;
@@ -1120,57 +1121,19 @@ return React__default.Children.toArray(children).map(function (child) {
   });
-  /**
-   * <RouteMatch> is just a way to conditionally render content without a wrapper
-   * element when contained directly in a <Router>:
-   *
-   * ```jsx
-   * <Router>
-   *   <RouteMatch path="/some/dir">
-   *     this will only show up on pages whose path begins with "/some/dir"
-   *   </RouteMatch>
-   * </Router>
-   * ```
-   */
 
-  function RouteMatch(_ref6) {
-    var path$$1 = _ref6.path,
-        children = _ref6.children;
-    return path$$1 ? React__default.Children.map(children, function (child) {
-      return addPath(child, path$$1);
-    }) : children;
+  function SideNav(props) {
+    return React__default.createElement(components.Relative, {
+      is: "nav"
+    }, React__default.createElement(components.Box, _extends({
+      id: "sidenav"
+    }, props), React__default.createElement(components.Flex, {
+      flexDirection: "column",
+      alignItems: "start"
+    }, React__default.createElement(Router, null, props.children))));
   }
 
-  function sortCompare(a, b, get) {
-    var aa = get(a);
-    var bb = get(b);
-    return typeof aa === 'string' && typeof bb === 'string' ? aa.localeCompare(bb) : undefined;
-  }
+  SideNav.displayName = "SideNav";
 
-  function nodeSort(a, b) {
-    return sortCompare(a, b, function (node) {
-      return node.meta.sort_title || node.meta.title;
-    });
-  }
-
-  function addPath(el, path$$1) {
-    // if there's no path, just return the element
-    if (!path$$1) return el; // if this is a link it'll have an "href"; otherwise, add "path"
-
-    var prop = el.props.href ? 'href' : 'path';
-    var value = el.props[prop];
-    var props = {}; // if there's a value and it's not absolute, prefix it with the path
-
-    if (value && !value.match(/^(\/|https?:)/)) {
-      props[prop] = path.join(path$$1, value);
-    } else {
-      props[prop] = path$$1;
-    }
-
-    return React__default.cloneElement(el, props);
-  }
-
-  exports.BoxShadow = BoxShadow;
   exports.ClipboardCopy = ClipboardCopy;
   exports.CodeExample = CodeExample;
   exports.Contributors = Contributors;
-  exports.DetailsDialog = DetailsDialog;
   exports.Frame = Frame;
@@ -1180,5 +1143,9 @@ exports.Header = Header;
   exports.NavLink = NavLink;
+  exports.NavList = NavList;
   exports.NodeLink = NodeLink;
   exports.Outline = Outline;
   exports.PackageHeader = PackageHeader;
+  exports.RouteMatch = RouteMatch;
+  exports.Router = Router;
+  exports.Section = Section;
   exports.SideNav = SideNav;
@@ -1196,2 +1163,5 @@ exports.StatusLabel = StatusLabel;
   exports.rootPage = rootPage;
+  exports.sortCompare = sortCompare;
+  exports.nodeSort = nodeSort;
+  exports.addPath = addPath;
 
@@ -1198,0 +1168,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

package.json

 {
   "name": "@primer/blueprints",
-  "version": "0.0.0-04db6a1",
+  "version": "0.0.0-0c839fc",
   "description": "Components for GitHub Documentation Sites",
@@ -5,0 +5,0 @@ "main": "dist/index.umd.js",

src/components.js

@@ -1,6 +0,4 @@
-export {default as BoxShadow} from './BoxShadow'
 export {default as ClipboardCopy} from './ClipboardCopy'
 export {default as CodeExample} from './CodeExample'
 export {default as Contributors} from './Contributors'
-export {default as DetailsDialog} from './DetailsDialog'
 export {default as Frame} from './Frame'
@@ -10,6 +8,10 @@ export {default as Header} from './Header'
 export {default as NavLink} from './NavLink'
+export {default as NavList} from './NavList'
 export {default as NodeLink} from './NodeLink'
 export {default as Outline} from './Outline'
 export {default as PackageHeader} from './PackageHeader'
+export {default as RouteMatch} from './RouteMatch'
+export {default as Router} from './Router'
+export {default as Section} from './Section'
 export {default as SideNav} from './SideNav'
 export {default as StatusLabel} from './StatusLabel'

src/Header.js

 import React from 'react'
 import PropTypes from 'prop-types'
+import styled from 'styled-components'
 import Octicon, {MarkGithub} from '@githubprimer/octicons-react'
 import {Text, Flex, Sticky, BorderBox, Box} from '@primer/components'
-import BoxShadow from './BoxShadow'
 import Link from './Link'
 
+const BoxShadow = styled(Box)`
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+`
+
 const HeaderText = props => <Text fontSize={2} {...props} />
@@ -9,0 +13,0 @@

src/NavLink.js

 import React from 'react'
 import {withRouter} from 'next/router'
+import {Box} from '@primer/components'
 import NodeLink from './NodeLink'
 
-export default withRouter(({is: Tag = NodeLink, href, router, ...rest}) => (
-  <Tag href={href} color="white" px={4} fontWeight={router.pathname === href ? 'bold' : null} {...rest} />
-))
+const NavLink = withRouter(({href, router, ...rest}) => {
+  return (
+    <Box {...rest}>
+      <NodeLink href={href} color={router.pathname === href ? 'black' : undefined} fontSize={1} {...rest} />
+    </Box>
+  )
+})
+
+export default NavLink

src/redirect.js

@@ -31,1 +31,14 @@ import Router from 'next/router'
 }
+
+export function redirectTrailingSlash(context, status = 301) {
+  const {
+    req: {url},
+    res
+  } = context
+  if (url.endsWith('/')) {
+    const withoutSlash = url.substr(0, url.length - 1)
+    res.writeHead(status, {Location: withoutSlash})
+    res.end()
+    return true
+  }
+}

src/SideNav.js

 import React from 'react'
-import {join} from 'path'
-import {withRouter} from 'next/router'
-import {Box, BorderBox, Flex, Relative} from '@primer/components'
-import NodeLink from './NodeLink'
-import {rootPage} from './utils'
+import {Box, Flex, Relative} from '@primer/components'
+import Router from './Router'
 
-export default function SideNav(props) {
+function SideNav(props) {
   return (
@@ -13,7 +10,3 @@ <Relative is="nav">
         <Flex flexDirection="column" alignItems="start">
-          <Router>
-            <RouteMatch path="/blueprints">
-              <Section path="components" />
-            </RouteMatch>
-          </Router>
+          <Router>{props.children}</Router>
         </Flex>
@@ -25,122 +18,2 @@ </Box>
 
-/**
- * A <Section> gets a `path` and optional children. If it has children it will
- * render those and prepend each child's `href` prop with the provided `path`.
- * This means that you can do:
- *
- * ```jsx
- * <Section path="/section">
- *   <Link href="foo">Links to /section/foo</Link>
- * </Section>
- * ```
- *
- * If no children are provided, it renders a <NavList> with the provided
- * `path`.
- */
-const Section = ({path, children}) => (
-  <BorderBox p={5} border={0} borderBottom={1} borderRadius={0} width="100%">
-    {children && path ? React.Children.map(children, child => addPath(child, path)) : <NavList path={path} />}
-  </BorderBox>
-)
-
-/**
- * A <NavList> renders a <SectionLink> for the given `path` and looks up the
- * path in the page tree. If a node is found, it renders a <NavLink> for each
- * of the node's children.
- */
-function NavList({path}) {
-  const node = rootPage.first(node => node.path === path)
-  const children = node ? node.children.sort(nodeSort) : []
-  return (
-    <>
-      <SectionLink href={path} mb={3} />
-      {children.map(child => (
-        <NavLink href={child.path} key={child.path} />
-      ))}
-    </>
-  )
-}
-
-/**
- * A <SectionLink> is really just a <NodeLink> that's bold when its `href`
- * matches the current path, wrapped in a <Box> for whitespace.
- */
-const SectionLink = withRouter(({href, router, ...rest}) => (
-  <Box {...rest}>
-    <NodeLink href={href} color="gray.9" fontSize={2} fontWeight={router.pathname.startsWith(href) ? 'bold' : null} />
-  </Box>
-))
-
-/**
- * A <NavLink> is a <NodeLink> that turns black when its `href` matches the
- * current path, wrapped in a <Box> for whitespace.
- */
-const NavLink = withRouter(({href, router, ...rest}) => {
-  return (
-    <Box mt={2}>
-      <NodeLink href={href} color={router.pathname === href ? 'black' : undefined} fontSize={1} {...rest} />
-    </Box>
-  )
-})
-
-/**
- * This is inspired by React Router's <Router> component, in that it looks for
- * children with the `path` prop and only renders the _first_ one that matches
- * the beginning of the current path. Children without a `path` prop are always
- * rendered.
- */
-const Router = withRouter(({router, children}) => {
-  let matched = false
-  return React.Children.toArray(children).map(child => {
-    if (child.props.path) {
-      if (!matched && router.pathname.indexOf(child.props.path) === 0) {
-        return (matched = child)
-      }
-    } else {
-      return child
-    }
-  })
-})
-
-/**
- * <RouteMatch> is just a way to conditionally render content without a wrapper
- * element when contained directly in a <Router>:
- *
- * ```jsx
- * <Router>
- *   <RouteMatch path="/some/dir">
- *     this will only show up on pages whose path begins with "/some/dir"
- *   </RouteMatch>
- * </Router>
- * ```
- */
-function RouteMatch({path, children}) {
-  return path ? React.Children.map(children, child => addPath(child, path)) : children
-}
-
-function sortCompare(a, b, get) {
-  const aa = get(a)
-  const bb = get(b)
-  return typeof aa === 'string' && typeof bb === 'string' ? aa.localeCompare(bb) : undefined
-}
-
-function nodeSort(a, b) {
-  return sortCompare(a, b, node => node.meta.sort_title || node.meta.title)
-}
-
-function addPath(el, path) {
-  // if there's no path, just return the element
-  if (!path) return el
-
-  // if this is a link it'll have an "href"; otherwise, add "path"
-  const prop = el.props.href ? 'href' : 'path'
-  const value = el.props[prop]
-  const props = {}
-  // if there's a value and it's not absolute, prefix it with the path
-  if (value && !value.match(/^(\/|https?:)/)) {
-    props[prop] = join(path, value)
-  } else {
-    props[prop] = path
-  }
-  return React.cloneElement(el, props)
-}
+export default SideNav

src/utils.js

 import React from 'react'
 import getConfig from 'next/config'
 import TreeModel from 'tree-model'
+import {join} from 'path'
 
@@ -88,1 +89,28 @@ export const CommonStyles = () => {
 }
+
+export function sortCompare(a, b, get) {
+  const aa = get(a)
+  const bb = get(b)
+  return typeof aa === 'string' && typeof bb === 'string' ? aa.localeCompare(bb) : undefined
+}
+
+export function nodeSort(a, b) {
+  return sortCompare(a, b, node => node.meta.sort_title || node.meta.title)
+}
+
+export function addPath(el, path) {
+  // if there's no path, just return the element
+  if (!path) return el
+
+  // if this is a link it'll have an "href"; otherwise, add "path"
+  const prop = el.props.href ? 'href' : 'path'
+  const value = el.props[prop]
+  const props = {}
+  // if there's a value and it's not absolute, prefix it with the path
+  if (value && !value.match(/^(\/|https?:)/)) {
+    props[prop] = join(path, value)
+  } else {
+    props[prop] = path
+  }
+  return React.cloneElement(el, props)
+}

No alert changes

Improved metrics

Number of package files

26

increased by8.33%

Worsened metrics

Total package byte prevSize

95436

decreased by-1.87%

Lines of code

2771

decreased by-1.84%

No dependency changes