@primer/components 31.2.0-rc.b718ff50 → 31.2.0-rc.decfca99

package/lib/Token/_RemoveTokenButton.jsx

@@ -0,0 +1,108 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const octicons_react_1 = require("@primer/octicons-react");
+const styled_components_1 = __importStar(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+const TokenBase_1 = require("./TokenBase");
+const variants = styled_system_1.variant({
+    prop: 'size',
+    variants: {
+        small: {
+            height: TokenBase_1.tokenSizes.small,
+            width: TokenBase_1.tokenSizes.small
+        },
+        medium: {
+            height: TokenBase_1.tokenSizes.medium,
+            width: TokenBase_1.tokenSizes.medium
+        },
+        large: {
+            height: TokenBase_1.tokenSizes.large,
+            width: TokenBase_1.tokenSizes.large
+        },
+        extralarge: {
+            height: TokenBase_1.tokenSizes.extralarge,
+            width: TokenBase_1.tokenSizes.extralarge
+        }
+    }
+});
+const getTokenButtonIconSize = (size) => parseInt(TokenBase_1.tokenSizes[size || TokenBase_1.defaultTokenSize], 10) * 0.75;
+const StyledTokenButton = styled_components_1.default.span `
+  background-color: transparent;
+  font-family: inherit;
+  color: currentColor;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  appearance: none;
+  text-decoration: none;
+  padding: 0;
+  transform: ${props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`};
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+
+  ${props => {
+    switch (props.size) {
+        case 'large':
+        case 'extralarge':
+            return styled_components_1.css `
+          margin-left: ${constants_1.get('space.2')};
+        `;
+        default:
+            return styled_components_1.css `
+          margin-left: ${constants_1.get('space.1')};
+        `;
+    }
+}}
+
+  &:hover,
+  &:focus {
+    // TODO: choose a better functional color variable for this
+    background-color: ${constants_1.get('colors.neutral.muted')};
+  }
+
+  &:active {
+    // TODO: choose a better functional color variable for this
+    background-color: ${constants_1.get('colors.neutral.subtle')};
+  }
+
+  ${variants}
+  ${sx_1.default}
+`;
+const RemoveTokenButton = ({ 'aria-label': ariaLabel, isParentInteractive, size, ...rest }) => {
+    delete rest.children;
+    return (<StyledTokenButton as={isParentInteractive ? 'span' : 'button'} tabIndex={isParentInteractive ? -1 : undefined} aria-label={!isParentInteractive ? 'Remove token' : ariaLabel} size={size} {...rest}>
+      <octicons_react_1.XIcon size={getTokenButtonIconSize(size)}/>
+    </StyledTokenButton>);
+};
+RemoveTokenButton.defaultProps = {
+    size: TokenBase_1.defaultTokenSize
+};
+exports.default = RemoveTokenButton;

package/lib/Token/_TokenTextContainer.jsx

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const TokenTextContainer = styled_components_1.default('span') `
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  // reset button styles, make the cursor a pointer, and add line-height
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+  width: auto;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  line-height: 1;
+
+  // reset anchor styles
+  color: currentColor;
+  text-decoration: none;
+
+  // Position psuedo-element above text content, but below the
+  // remove button.
+  // This ensures the <a> or <button> receives the click no
+  // matter where on the token the user clicks.
+  &:is(a, button, [tabIndex='0']) {
+    cursor: pointer;
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+`;
+exports.default = TokenTextContainer;

package/lib/Token/index.js

@@ -1,31 +1,12 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Token.default;
-  }
-});
-Object.defineProperty(exports, "IssueLabelToken", {
-  enumerable: true,
-  get: function () {
-    return _IssueLabelToken.default;
-  }
-});
-Object.defineProperty(exports, "AvatarToken", {
-  enumerable: true,
-  get: function () {
-    return _AvatarToken.default;
-  }
-});
-
-var _Token = _interopRequireDefault(require("./Token"));
-
-var _IssueLabelToken = _interopRequireDefault(require("./IssueLabelToken"));
-
-var _AvatarToken = _interopRequireDefault(require("./AvatarToken"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarToken = exports.IssueLabelToken = exports.default = void 0;
+var Token_1 = require("./Token");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Token_1).default; } });
+var IssueLabelToken_1 = require("./IssueLabelToken");
+Object.defineProperty(exports, "IssueLabelToken", { enumerable: true, get: function () { return __importDefault(IssueLabelToken_1).default; } });
+var AvatarToken_1 = require("./AvatarToken");
+Object.defineProperty(exports, "AvatarToken", { enumerable: true, get: function () { return __importDefault(AvatarToken_1).default; } });

package/lib/Tooltip.jsx

@@ -0,0 +1,246 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const TooltipBase = styled_components_1.default.span `
+  position: relative;
+
+  &::before {
+    position: absolute;
+    z-index: 1000001;
+    display: none;
+    width: 0px;
+    height: 0px;
+    color: ${constants_1.get('colors.neutral.emphasisPlus')};
+    pointer-events: none;
+    content: '';
+    border: 6px solid transparent;
+    opacity: 0;
+  }
+
+  &::after {
+    position: absolute;
+    z-index: 1000000;
+    display: none;
+    padding: 0.5em 0.75em;
+    font: normal normal 11px/1.5 ${constants_1.get('fonts.normal')};
+    -webkit-font-smoothing: subpixel-antialiased;
+    color: ${constants_1.get('colors.fg.onEmphasis')};
+    text-align: center;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: break-word;
+    white-space: pre;
+    pointer-events: none;
+    content: attr(aria-label);
+    background: ${constants_1.get('colors.neutral.emphasisPlus')};
+    border-radius: ${constants_1.get('radii.1')};
+    opacity: 0;
+  }
+
+  // delay animation for tooltip
+  @keyframes tooltip-appear {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    &::before,
+    &::after {
+      display: inline-block;
+      text-decoration: none;
+      animation-name: tooltip-appear;
+      animation-duration: 0.1s;
+      animation-fill-mode: forwards;
+      animation-timing-function: ease-in;
+      animation-delay: 0.4s;
+    }
+  }
+
+  &.tooltipped-no-delay:hover,
+  &.tooltipped-no-delay:active,
+  &.tooltipped-no-delay:focus {
+    &::before,
+    &::after {
+      animation-delay: 0s;
+    }
+  }
+
+  &.tooltipped-multiline:hover,
+  &.tooltipped-multiline:active,
+  &.tooltipped-multiline:focus {
+    &::after {
+      display: table-cell;
+    }
+  }
+
+  // Tooltipped south
+  &.tooltipped-s,
+  &.tooltipped-se,
+  &.tooltipped-sw {
+    &::after {
+      top: 100%;
+      right: 50%;
+      margin-top: 6px;
+    }
+
+    &::before {
+      top: auto;
+      right: 50%;
+      bottom: -7px;
+      margin-right: -6px;
+      border-bottom-color: ${constants_1.get('colors.neutral.emphasisPlus')};
+    }
+  }
+
+  &.tooltipped-se {
+    &::after {
+      right: auto;
+      left: 50%;
+      margin-left: -${constants_1.get('space.3')};
+    }
+  }
+
+  &.tooltipped-sw::after {
+    margin-right: -${constants_1.get('space.3')};
+  }
+
+  // Tooltips above the object
+  &.tooltipped-n,
+  &.tooltipped-ne,
+  &.tooltipped-nw {
+    &::after {
+      right: 50%;
+      bottom: 100%;
+      margin-bottom: 6px;
+    }
+
+    &::before {
+      top: -7px;
+      right: 50%;
+      bottom: auto;
+      margin-right: -6px;
+      border-top-color: ${constants_1.get('colors.neutral.emphasisPlus')};
+    }
+  }
+
+  &.tooltipped-ne {
+    &::after {
+      right: auto;
+      left: 50%;
+      margin-left: -${constants_1.get('space.3')};
+    }
+  }
+
+  &.tooltipped-nw::after {
+    margin-right: -${constants_1.get('space.3')};
+  }
+
+  // Move the tooltip body to the center of the object.
+  &.tooltipped-s::after,
+  &.tooltipped-n::after {
+    transform: translateX(50%);
+  }
+
+  // Tooltipped to the left
+  &.tooltipped-w {
+    &::after {
+      right: 100%;
+      bottom: 50%;
+      margin-right: 6px;
+      transform: translateY(50%);
+    }
+
+    &::before {
+      top: 50%;
+      bottom: 50%;
+      left: -7px;
+      margin-top: -6px;
+      border-left-color: ${constants_1.get('colors.neutral.emphasisPlus')};
+    }
+  }
+
+  // tooltipped to the right
+  &.tooltipped-e {
+    &::after {
+      bottom: 50%;
+      left: 100%;
+      margin-left: 6px;
+      transform: translateY(50%);
+    }
+
+    &::before {
+      top: 50%;
+      right: -7px;
+      bottom: 50%;
+      margin-top: -6px;
+      border-right-color: ${constants_1.get('colors.neutral.emphasisPlus')};
+    }
+  }
+
+  &.tooltipped-multiline {
+    &::after {
+      width: max-content;
+      max-width: 250px;
+      word-wrap: break-word;
+      white-space: pre-line;
+      border-collapse: separate;
+    }
+
+    &.tooltipped-s::after,
+    &.tooltipped-n::after {
+      right: auto;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.tooltipped-w::after,
+    &.tooltipped-e::after {
+      right: 100%;
+    }
+  }
+
+  &.tooltipped-align-right-2::after {
+    right: 0;
+    margin-right: 0;
+  }
+
+  &.tooltipped-align-right-2::before {
+    right: 15px;
+  }
+
+  &.tooltipped-align-left-2::after {
+    left: 0;
+    margin-left: 0;
+  }
+
+  &.tooltipped-align-left-2::before {
+    left: 10px;
+  }
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+function Tooltip({ direction = 'n', children, className, text, noDelay, align, wrap, ...rest }) {
+    const classes = classnames_1.default(className, `tooltipped-${direction}`, align && `tooltipped-align-${align}-2`, noDelay && 'tooltipped-no-delay', wrap && 'tooltipped-multiline');
+    return (<TooltipBase role="tooltip" aria-label={text} {...rest} className={classes}>
+      {children}
+    </TooltipBase>);
+}
+Tooltip.alignments = ['left', 'right'];
+Tooltip.directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
+exports.default = Tooltip;

package/lib/Truncate.jsx

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const Truncate = styled_components_1.default.div `
+  ${constants_1.TYPOGRAPHY}
+  ${constants_1.COMMON}
+  display: ${props => (props.inline ? 'inline-block' : 'inherit')};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: ${props => (props.inline ? 'top' : 'initial')};
+  white-space: nowrap;
+  ${styled_system_1.maxWidth}
+  ${props => (props.expandable ? `&:hover { max-width: 10000px; }` : '')}
+  ${sx_1.default};
+`;
+Truncate.defaultProps = {
+    expandable: false,
+    inline: false,
+    maxWidth: 125
+};
+exports.default = Truncate;

package/lib/UnderlineNav.jsx

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const ITEM_CLASS = 'UnderlineNav-item';
+const SELECTED_CLASS = 'selected';
+const UnderlineNavBase = styled_components_1.default.nav `
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid ${constants_1.get('colors.border.muted')};
+  &.UnderlineNav--right {
+    justify-content: flex-end;
+
+    .UnderlineNav-item {
+      margin-right: 0;
+      margin-left: ${constants_1.get('space.3')};
+    }
+
+    .UnderlineNav-actions {
+      flex: 1 1 auto;
+    }
+  }
+  &.UnderlineNav--full {
+    display: block;
+  }
+
+  .UnderlineNav-body {
+    display: flex;
+    margin-bottom: -1px;
+  }
+
+  .UnderlineNav-actions {
+    align-self: center;
+  }
+
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+function UnderlineNav({ actions, className, align, children, full, label, theme, ...rest }) {
+    const classes = classnames_1.default(className, 'UnderlineNav', align && `UnderlineNav--${align}`, full && 'UnderlineNav--full');
+    return (<UnderlineNavBase className={classes} aria-label={label} theme={theme} {...rest}>
+      <div className="UnderlineNav-body">{children}</div>
+      {actions && <div className="UnderlineNav-actions">{actions}</div>}
+    </UnderlineNavBase>);
+}
+const UnderlineNavLink = styled_components_1.default.a.attrs(props => ({
+    activeClassName: typeof props.to === 'string' ? 'selected' : '',
+    className: classnames_1.default(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
+})) `
+  padding: ${constants_1.get('space.3')} ${constants_1.get('space.2')};
+  margin-right: ${constants_1.get('space.3')};
+  font-size: ${constants_1.get('fontSizes.1')};
+  line-height: ${constants_1.get('lineHeights.default')};
+  color: ${constants_1.get('colors.fg.default')};
+  text-align: center;
+  border-bottom: 2px solid transparent;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: ${constants_1.get('colors.fg.default')};
+    text-decoration: none;
+    border-bottom-color: ${constants_1.get('colors.neutral.muted')};
+    transition: 0.2s ease;
+
+    .UnderlineNav-octicon {
+      color: ${constants_1.get('colors.fg.muted')};
+    }
+  }
+
+  &.selected {
+    color: ${constants_1.get('colors.fg.default')};
+    border-bottom-color: ${constants_1.get('colors.primer.border.active')};
+
+    .UnderlineNav-octicon {
+      color: ${constants_1.get('colors.fg.default')};
+    }
+  }
+
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+UnderlineNavLink.displayName = 'UnderlineNav.Link';
+exports.default = Object.assign(UnderlineNav, { Link: UnderlineNavLink });

package/lib/_TextInputWrapper.js

@@ -39,13 +39,13 @@ const sizeVariants = (0, _styledSystem.variant)({
 const TextInputWrapper = _styledComponents.default.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return (0, _styledComponents.css)(["padding:0;"]);
   } else {
     return (0, _styledComponents.css)(["padding:6px 12px;"]);
   }
-}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
+}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), props => props.block && props.hasIcon && (0, _styledComponents.css)(["display:flex;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
 
 var _default = TextInputWrapper;
 exports.default = _default;