@primer/components 0.0.0-2021111191131 → 0.0.0-2021111193153

package/lib/Breadcrumb.js

@@ -1,96 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Box = _interopRequireDefault(require("./Box"));
-
-var _constants = require("./constants");
-
-var _sx = _interopRequireDefault(require("./sx"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const SELECTED_CLASS = 'selected';
-
-const Wrapper = _styledComponents.default.li.withConfig({
-  displayName: "Breadcrumb__Wrapper",
-  componentId: "c1r3ff-0"
-})(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], (0, _constants.get)('colors.gray.2'), (0, _constants.get)('fontSizes.1'));
-
-const BreadcrumbBase = _styledComponents.default.nav.withConfig({
-  displayName: "Breadcrumb__BreadcrumbBase",
-  componentId: "c1r3ff-1"
-})(["display:flex;justify-content:space-between;", ";", ";", ";"], _constants.COMMON, _constants.FLEX, _sx.default);
-
-function Breadcrumb({
-  className,
-  children,
-  theme,
-  ...rest
-}) {
-  const classes = (0, _classnames.default)(className, 'Breadcrumb');
-
-  const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, {
-    theme: theme
-  }, child));
-
-  return /*#__PURE__*/_react.default.createElement(BreadcrumbBase, _extends({
-    className: classes,
-    "aria-label": "breadcrumb",
-    theme: theme
-  }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
-    as: "ol",
-    my: 0,
-    pl: 0
-  }, wrappedChildren));
-}
-
-Breadcrumb.displayName = "Breadcrumb";
-
-const BreadcrumbItem = _styledComponents.default.a.attrs(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
-  className: (0, _classnames.default)(props.selected && SELECTED_CLASS, props.className),
-  'aria-current': props.selected ? 'page' : null
-})).withConfig({
-  displayName: "Breadcrumb__BreadcrumbItem",
-  componentId: "c1r3ff-2"
-})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], (0, _constants.get)('colors.blue.5'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.gray.7'), _constants.COMMON, _sx.default);
-
-Breadcrumb.defaultProps = {
-  theme: _theme.default
-};
-Breadcrumb.propTypes = { ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
-Breadcrumb.displayName = 'Breadcrumb';
-BreadcrumbItem.defaultProps = {
-  theme: _theme.default
-};
-BreadcrumbItem.propTypes = {
-  href: _propTypes.default.string,
-  selected: _propTypes.default.bool,
-  ..._sx.default.propTypes,
-  ..._constants.COMMON.propTypes
-};
-BreadcrumbItem.displayName = 'Breadcrumb.Item';
-
-var _default = Object.assign(Breadcrumb, {
-  Item: BreadcrumbItem
-});
-
-exports.default = _default;

package/lib/hooks/useMouseIntent.js

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-/* adapted from: https://github.com/github/github/blob/a959c0d15c29b98c49b881f520c5947fe24eecb9/app/assets/modules/github/behaviors/button-outline.ts */
-const useMouseIntent = () => {
-  (0, _react.useEffect)(() => {
-    let lastActiveElement = null;
-    let currentInputIsMouse = false;
-
-    function setClass() {
-      lastActiveElement = document.activeElement;
-
-      if (document.body) {
-        document.body.classList.toggle('intent-mouse', currentInputIsMouse);
-      }
-    }
-
-    function onKeyDown() {
-      currentInputIsMouse = false;
-    }
-
-    function onMouseDown() {
-      currentInputIsMouse = true;
-      if (lastActiveElement === document.activeElement) setClass();
-    } // Use mousedown event to make sure outline is remove for holding and dragging
-
-
-    document.addEventListener('mousedown', onMouseDown, {
-      capture: true
-    });
-    document.addEventListener('keydown', onKeyDown, {
-      capture: true
-    });
-    document.addEventListener('focusin', setClass, {
-      capture: true
-    });
-    return () => {
-      document.removeEventListener('keydown', onKeyDown, {
-        capture: true
-      });
-      document.removeEventListener('focusin', setClass, {
-        capture: true
-      });
-      document.removeEventListener('mousedown', onMouseDown, {
-        capture: true
-      });
-    };
-  }, []);
-};
-
-var _default = useMouseIntent;
-exports.default = _default;

package/lib/stories/Button.stories.js

@@ -1,100 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.buttonTableList = exports.buttonGroup = exports.closeButton = exports.invisibleButton = exports.primaryButton = exports.outlineButton = exports.dangerButton = exports.defaultButton = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _default = {
-  title: 'Composite components/Button',
-  component: _.Button,
-  decorators: [Story => {
-    return /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null));
-  }],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'radio',
-        options: ['small', 'medium', 'large']
-      }
-    }
-  }
-};
-exports.default = _default;
-
-const defaultButton = args => /*#__PURE__*/_react.default.createElement(_.Button, args, "Default Button");
-
-exports.defaultButton = defaultButton;
-defaultButton.displayName = "defaultButton";
-
-const dangerButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonDanger, args, "Danger Button");
-
-exports.dangerButton = dangerButton;
-dangerButton.displayName = "dangerButton";
-
-const outlineButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonOutline, args, "Outline Button");
-
-exports.outlineButton = outlineButton;
-outlineButton.displayName = "outlineButton";
-
-const primaryButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonPrimary, args, "Primary Button");
-
-exports.primaryButton = primaryButton;
-primaryButton.displayName = "primaryButton";
-
-const invisibleButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonInvisible, args, "Invisible Button");
-
-exports.invisibleButton = invisibleButton;
-invisibleButton.displayName = "invisibleButton";
-
-const closeButton = args => /*#__PURE__*/_react.default.createElement(_.ButtonClose, _extends({}, args, {
-  onClick: () => alert('button clicked.')
-}));
-
-exports.closeButton = closeButton;
-closeButton.displayName = "closeButton";
-
-const buttonGroup = args => /*#__PURE__*/_react.default.createElement(_.ButtonGroup, {
-  display: "block",
-  my: 2
-}, /*#__PURE__*/_react.default.createElement(_.Button, args, "Button 1"), /*#__PURE__*/_react.default.createElement(_.Button, args, "Button 2"), /*#__PURE__*/_react.default.createElement(_.Button, args, "Button 3"));
-
-exports.buttonGroup = buttonGroup;
-buttonGroup.displayName = "buttonGroup";
-
-const buttonTableList = args => /*#__PURE__*/_react.default.createElement(_.ButtonTableList, args, "Button Table List");
-
-exports.buttonTableList = buttonTableList;
-buttonTableList.displayName = "buttonTableList";
-defaultButton.args = {
-  variant: 'medium'
-};
-dangerButton.args = {
-  variant: 'medium'
-};
-outlineButton.args = {
-  variant: 'medium'
-};
-primaryButton.args = {
-  variant: 'medium'
-};
-invisibleButton.args = {
-  variant: 'medium'
-};
-closeButton.args = {
-  variant: 'medium'
-};
-buttonGroup.args = {
-  variant: 'medium'
-};
-buttonTableList.args = {
-  variant: 'medium'
-};

package/lib-esm/Breadcrumb.js

@@ -1,70 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-import Box from './Box';
-import { COMMON, FLEX, get } from './constants';
-import sx from './sx';
-import theme from './theme';
-const SELECTED_CLASS = 'selected';
-const Wrapper = styled.li.withConfig({
-  displayName: "Breadcrumb__Wrapper",
-  componentId: "c1r3ff-0"
-})(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], get('colors.gray.2'), get('fontSizes.1'));
-const BreadcrumbBase = styled.nav.withConfig({
-  displayName: "Breadcrumb__BreadcrumbBase",
-  componentId: "c1r3ff-1"
-})(["display:flex;justify-content:space-between;", ";", ";", ";"], COMMON, FLEX, sx);
-
-function Breadcrumb({
-  className,
-  children,
-  theme,
-  ...rest
-}) {
-  const classes = classnames(className, 'Breadcrumb');
-  const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, {
-    theme: theme
-  }, child));
-  return /*#__PURE__*/React.createElement(BreadcrumbBase, _extends({
-    className: classes,
-    "aria-label": "breadcrumb",
-    theme: theme
-  }, rest), /*#__PURE__*/React.createElement(Box, {
-    as: "ol",
-    my: 0,
-    pl: 0
-  }, wrappedChildren));
-}
-
-Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbItem = styled.a.attrs(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
-  className: classnames(props.selected && SELECTED_CLASS, props.className),
-  'aria-current': props.selected ? 'page' : null
-})).withConfig({
-  displayName: "Breadcrumb__BreadcrumbItem",
-  componentId: "c1r3ff-2"
-})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.blue.5'), get('fontSizes.1'), get('colors.gray.7'), COMMON, sx);
-Breadcrumb.defaultProps = {
-  theme
-};
-Breadcrumb.propTypes = { ...COMMON.propTypes,
-  ...sx.propTypes
-};
-Breadcrumb.displayName = 'Breadcrumb';
-BreadcrumbItem.defaultProps = {
-  theme
-};
-BreadcrumbItem.propTypes = {
-  href: PropTypes.string,
-  selected: PropTypes.bool,
-  ...sx.propTypes,
-  ...COMMON.propTypes
-};
-BreadcrumbItem.displayName = 'Breadcrumb.Item';
-export default Object.assign(Breadcrumb, {
-  Item: BreadcrumbItem
-});

package/lib-esm/hooks/useMouseIntent.js

@@ -1,50 +0,0 @@
-/* adapted from: https://github.com/github/github/blob/a959c0d15c29b98c49b881f520c5947fe24eecb9/app/assets/modules/github/behaviors/button-outline.ts */
-import { useEffect } from 'react';
-
-const useMouseIntent = () => {
-  useEffect(() => {
-    let lastActiveElement = null;
-    let currentInputIsMouse = false;
-
-    function setClass() {
-      lastActiveElement = document.activeElement;
-
-      if (document.body) {
-        document.body.classList.toggle('intent-mouse', currentInputIsMouse);
-      }
-    }
-
-    function onKeyDown() {
-      currentInputIsMouse = false;
-    }
-
-    function onMouseDown() {
-      currentInputIsMouse = true;
-      if (lastActiveElement === document.activeElement) setClass();
-    } // Use mousedown event to make sure outline is remove for holding and dragging
-
-
-    document.addEventListener('mousedown', onMouseDown, {
-      capture: true
-    });
-    document.addEventListener('keydown', onKeyDown, {
-      capture: true
-    });
-    document.addEventListener('focusin', setClass, {
-      capture: true
-    });
-    return () => {
-      document.removeEventListener('keydown', onKeyDown, {
-        capture: true
-      });
-      document.removeEventListener('focusin', setClass, {
-        capture: true
-      });
-      document.removeEventListener('mousedown', onMouseDown, {
-        capture: true
-      });
-    };
-  }, []);
-};
-
-export default useMouseIntent;

package/lib-esm/stories/Button.stories.js

@@ -1,65 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import React from 'react';
-import { BaseStyles, Button, ButtonClose, ButtonDanger, ButtonGroup, ButtonInvisible, ButtonOutline, ButtonPrimary, ButtonTableList } from '..';
-export default {
-  title: 'Composite components/Button',
-  component: Button,
-  decorators: [Story => {
-    return /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null));
-  }],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'radio',
-        options: ['small', 'medium', 'large']
-      }
-    }
-  }
-};
-export const defaultButton = args => /*#__PURE__*/React.createElement(Button, args, "Default Button");
-defaultButton.displayName = "defaultButton";
-export const dangerButton = args => /*#__PURE__*/React.createElement(ButtonDanger, args, "Danger Button");
-dangerButton.displayName = "dangerButton";
-export const outlineButton = args => /*#__PURE__*/React.createElement(ButtonOutline, args, "Outline Button");
-outlineButton.displayName = "outlineButton";
-export const primaryButton = args => /*#__PURE__*/React.createElement(ButtonPrimary, args, "Primary Button");
-primaryButton.displayName = "primaryButton";
-export const invisibleButton = args => /*#__PURE__*/React.createElement(ButtonInvisible, args, "Invisible Button");
-invisibleButton.displayName = "invisibleButton";
-export const closeButton = args => /*#__PURE__*/React.createElement(ButtonClose, _extends({}, args, {
-  onClick: () => alert('button clicked.')
-}));
-closeButton.displayName = "closeButton";
-export const buttonGroup = args => /*#__PURE__*/React.createElement(ButtonGroup, {
-  display: "block",
-  my: 2
-}, /*#__PURE__*/React.createElement(Button, args, "Button 1"), /*#__PURE__*/React.createElement(Button, args, "Button 2"), /*#__PURE__*/React.createElement(Button, args, "Button 3"));
-buttonGroup.displayName = "buttonGroup";
-export const buttonTableList = args => /*#__PURE__*/React.createElement(ButtonTableList, args, "Button Table List");
-buttonTableList.displayName = "buttonTableList";
-defaultButton.args = {
-  variant: 'medium'
-};
-dangerButton.args = {
-  variant: 'medium'
-};
-outlineButton.args = {
-  variant: 'medium'
-};
-primaryButton.args = {
-  variant: 'medium'
-};
-invisibleButton.args = {
-  variant: 'medium'
-};
-closeButton.args = {
-  variant: 'medium'
-};
-buttonGroup.args = {
-  variant: 'medium'
-};
-buttonTableList.args = {
-  variant: 'medium'
-};