@primer/components 0.0.0-20211030163410 → 0.0.0-20211030175556

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;
+  }
+
+  ${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,24 @@
+"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 sx_1 = __importDefault(require("./sx"));
+const Truncate = styled_components_1.default.div `
+  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,88 @@
+"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;
+  }
+
+  ${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')};
+    }
+  }
+
+  ${sx_1.default};
+`;
+UnderlineNavLink.displayName = 'UnderlineNav.Link';
+exports.default = Object.assign(UnderlineNav, { Link: UnderlineNavLink });

package/lib/_TextInputWrapper.jsx

@@ -0,0 +1,120 @@
+"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 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 sizeVariants = styled_system_1.variant({
+    variants: {
+        small: {
+            minHeight: '28px',
+            px: 2,
+            py: '3px',
+            fontSize: 0,
+            lineHeight: '20px'
+        },
+        large: {
+            px: 2,
+            py: '10px',
+            fontSize: 3
+        }
+    }
+});
+const TextInputWrapper = styled_components_1.default.span `
+  display: inline-flex;
+  align-items: stretch;
+  min-height: 34px;
+  font-size: ${constants_1.get('fontSizes.1')};
+  line-height: 20px;
+  color: ${constants_1.get('colors.fg.default')};
+  vertical-align: middle;
+  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
+  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
+  border: 1px solid ${constants_1.get('colors.border.default')};
+  border-radius: ${constants_1.get('radii.2')};
+  outline: none;
+  box-shadow: ${constants_1.get('shadows.primer.shadow.inset')};
+  cursor: text;
+
+  ${props => {
+    if (props.hasIcon) {
+        return styled_components_1.css `
+        padding: 0;
+      `;
+    }
+    else {
+        return styled_components_1.css `
+        padding: 6px 12px;
+      `;
+    }
+}}
+
+  .TextInput-icon {
+    align-self: center;
+    color: ${constants_1.get('colors.fg.muted')};
+    margin: 0 ${constants_1.get('space.2')};
+    flex-shrink: 0;
+  }
+
+  &:focus-within {
+    border-color: ${constants_1.get('colors.accent.emphasis')};
+    box-shadow: ${constants_1.get('shadows.primer.shadow.focus')};
+  }
+
+  ${props => props.contrast &&
+    styled_components_1.css `
+      background-color: ${constants_1.get('colors.canvas.inset')};
+    `}
+
+  ${props => props.disabled &&
+    styled_components_1.css `
+      color: ${constants_1.get('colors.primer.fg.disabled')};
+      background-color: ${constants_1.get('colors.input.disabledBg')};
+      border-color: ${constants_1.get('colors.border.default')};
+    `}
+  
+    ${props => props.block &&
+    styled_components_1.css `
+      display: block;
+      width: 100%;
+    `}
+
+    ${props => props.block &&
+    props.hasIcon &&
+    styled_components_1.css `
+      display: flex;
+    `}
+  
+    // Ensures inputs don't zoom on mobile but are body-font size on desktop
+    @media (min-width: ${constants_1.get('breakpoints.1')}) {
+    font-size: ${constants_1.get('fontSizes.1')};
+  }
+  ${styled_system_1.width}
+  ${styled_system_1.minWidth}
+    ${styled_system_1.maxWidth}
+    ${sizeVariants}
+    ${sx_1.default};
+`;
+exports.default = TextInputWrapper;

package/lib/_UnstyledTextInput.jsx

@@ -0,0 +1,22 @@
+"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 sx_1 = __importDefault(require("./sx"));
+const UnstyledTextInput = styled_components_1.default.input `
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+
+  ${sx_1.default};
+`;
+exports.default = UnstyledTextInput;