@primer/components 31.2.0-rc.c53cfd9e → 31.2.0

package/lib/SideNav.jsx

@@ -0,0 +1,177 @@
+"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 constants_1 = require("./constants");
+const styled_components_1 = __importStar(require("styled-components"));
+const Box_1 = __importDefault(require("./Box"));
+const Link_1 = __importDefault(require("./Link"));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const sx_1 = __importDefault(require("./sx"));
+function SideNavBase({ variant, className, bordered, children, ...props }) {
+    const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
+    const newClassName = classnames_1.default(className, `variant-${variantClassName}`);
+    if (!bordered) {
+        props = { ...props, borderWidth: 0 };
+    }
+    return (<Box_1.default borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} as="nav" className={newClassName} {...props}>
+      {children}
+    </Box_1.default>);
+}
+const SideNav = styled_components_1.default(SideNavBase) `
+  background-color: ${constants_1.get('colors.canvas.subtle')};
+
+  ${props => props.bordered &&
+    styled_components_1.css `
+      // Remove duplicate borders from nested SideNavs
+      & > & {
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 0;
+      }
+    `}
+
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+// used for variant normal hover, focus pseudo selectors
+const CommonAccessibilityVariantNormalStyles = styled_components_1.css `
+  background-color: ${constants_1.get('colors.neutral.subtle')};
+  outline: none;
+  text-decoration: none;
+`;
+// used for light weight hover, focus pseudo selectors
+const CommonAccessibilityVariantLightWeightStyles = styled_components_1.css `
+  color: ${constants_1.get('colors.fg.default')};
+  text-decoration: none;
+  outline: none;
+`;
+const SideNavLink = styled_components_1.default(Link_1.default).attrs(props => {
+    const isReactRouter = typeof props.to === 'string';
+    if (isReactRouter || props.selected) {
+        // according to their docs, NavLink supports aria-current:
+        // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
+        return { 'aria-current': 'page' };
+    }
+    else {
+        return {};
+    }
+}) `
+  position: relative;
+  display: block;
+  ${props => props.variant === 'full' &&
+    styled_components_1.css `
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    `}
+  width: 100%;
+  text-align: left;
+  font-size: ${constants_1.get('fontSizes.1')};
+
+  & > ${SideNav} {
+    border-bottom: none;
+  }
+
+  ${SideNav}.variant-normal > & {
+    color: ${constants_1.get('colors.fg.default')};
+    padding: ${constants_1.get('space.3')};
+    border: 0;
+    border-top: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
+
+    &:first-child {
+      border-top: 0;
+      border-top-right-radius: ${constants_1.get('radii.2')};
+      border-top-left-radius: ${constants_1.get('radii.2')};
+    }
+
+    &:last-child {
+      border-bottom-right-radius: ${constants_1.get('radii.2')};
+      border-bottom-left-radius: ${constants_1.get('radii.2')};
+    }
+
+    // Bar on the left
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 3px;
+      pointer-events: none;
+      content: '';
+    }
+
+    &:hover {
+      ${CommonAccessibilityVariantNormalStyles}
+    }
+
+    &:focus {
+      ${CommonAccessibilityVariantNormalStyles}
+      box-shadow: ${constants_1.get('shadows.primer.shadow.focus')};
+      z-index: 1;
+    }
+
+    &[aria-current='page'],
+    &[aria-selected='true'] {
+      background-color: ${constants_1.get('colors.sidenav.selectedBg')};
+
+      // Bar on the left
+      &::before {
+        background-color: ${constants_1.get('colors.primer.border.active')};
+      }
+    }
+  }
+
+  ${SideNav}.variant-lightweight > & {
+    padding: ${constants_1.get('space.1')} 0;
+    color: ${constants_1.get('colors.accent.fg')};
+
+    &:hover {
+      ${CommonAccessibilityVariantLightWeightStyles}
+    }
+
+    &:focus {
+      ${CommonAccessibilityVariantLightWeightStyles}
+      box-shadow: ${constants_1.get('shadows.primer.shadow.focus')};
+      z-index: 1;
+    }
+
+    &[aria-current='page'],
+    &[aria-selected='true'] {
+      color: ${constants_1.get('colors.fg.default')};
+      font-weight: ${constants_1.get('fontWeights.semibold')};
+    }
+  }
+
+  ${sx_1.default};
+`;
+SideNav.defaultProps = {
+    variant: 'normal'
+};
+SideNavLink.defaultProps = {
+    variant: 'normal'
+};
+SideNavLink.displayName = 'SideNav.Link';
+exports.default = Object.assign(SideNav, { Link: SideNavLink });

package/lib/Spinner.jsx

@@ -0,0 +1,35 @@
+"use strict";
+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 styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const sizeMap = {
+    small: '16px',
+    medium: '32px',
+    large: '64px'
+};
+function Spinner({ size: sizeKey = 'medium', ...props }) {
+    const size = sizeMap[sizeKey];
+    return (<svg height={size} width={size} viewBox="0 0 16 16" fill="none" {...props}>
+      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeOpacity="0.25" strokeWidth="2" vectorEffect="non-scaling-stroke"/>
+      <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" vectorEffect="non-scaling-stroke"/>
+    </svg>);
+}
+const StyledSpinner = styled_components_1.default(Spinner) `
+  @keyframes rotate-keyframes {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  animation: rotate-keyframes 1s linear infinite;
+
+  ${constants_1.COMMON}
+  ${sx_1.default}
+`;
+StyledSpinner.displayName = 'Spinner';
+exports.default = StyledSpinner;

package/lib/StateLabel.d.ts

@@ -4,7 +4,7 @@ import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const StateLabelBase: import("styled-components").StyledComponent<"span", any, {
     variant?: "small" | "normal" | undefined;
-    status?: "issueClosed" | "pullClosed" | "pullMerged" | "issueOpened" | "pullOpened" | "draft" | undefined;
+    status?: "issueClosed" | "pullClosed" | "pullMerged" | "issueOpened" | "pullOpened" | "draft" | "issueDraft" | undefined;
 } & SystemCommonProps & SxProp, never>;
 export declare type StateLabelProps = ComponentProps<typeof StateLabelBase>;
 declare function StateLabel({ children, status, variant: variantProp, ...rest }: StateLabelProps): JSX.Element;

package/lib/StateLabel.js

@@ -29,7 +29,8 @@ const octiconMap = {
   issueClosed: _octiconsReact.IssueClosedIcon,
   pullClosed: _octiconsReact.GitPullRequestIcon,
   pullMerged: _octiconsReact.GitMergeIcon,
-  draft: _octiconsReact.GitPullRequestIcon
+  draft: _octiconsReact.GitPullRequestIcon,
+  issueDraft: _octiconsReact.IssueDraftIcon
 };
 const colorVariants = (0, _styledSystem.variant)({
   prop: 'status',
@@ -57,6 +58,10 @@ const colorVariants = (0, _styledSystem.variant)({
     draft: {
       backgroundColor: 'neutral.emphasis',
       color: 'fg.onEmphasis'
+    },
+    issueDraft: {
+      backgroundColor: 'neutral.emphasis',
+      color: 'fg.onEmphasis'
     }
   }
 });

package/lib/StateLabel.jsx

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const octicons_react_1 = require("@primer/octicons-react");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const constants_1 = require("./constants");
+const StyledOcticon_1 = __importDefault(require("./StyledOcticon"));
+const sx_1 = __importDefault(require("./sx"));
+const octiconMap = {
+    issueOpened: octicons_react_1.IssueOpenedIcon,
+    pullOpened: octicons_react_1.GitPullRequestIcon,
+    issueClosed: octicons_react_1.IssueClosedIcon,
+    pullClosed: octicons_react_1.GitPullRequestIcon,
+    pullMerged: octicons_react_1.GitMergeIcon,
+    draft: octicons_react_1.GitPullRequestIcon,
+    issueDraft: octicons_react_1.IssueDraftIcon
+};
+const colorVariants = styled_system_1.variant({
+    prop: 'status',
+    variants: {
+        issueClosed: {
+            backgroundColor: 'danger.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        pullClosed: {
+            backgroundColor: 'danger.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        pullMerged: {
+            backgroundColor: 'done.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        issueOpened: {
+            backgroundColor: 'success.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        pullOpened: {
+            backgroundColor: 'success.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        draft: {
+            backgroundColor: 'neutral.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        issueDraft: {
+            backgroundColor: 'neutral.emphasis',
+            color: 'fg.onEmphasis'
+        }
+    }
+});
+const sizeVariants = styled_system_1.variant({
+    prop: 'variant',
+    variants: {
+        small: {
+            paddingX: 2,
+            paddingY: 1,
+            fontSize: 0
+        },
+        normal: {
+            paddingX: '12px',
+            paddingY: 2,
+            fontSize: 1
+        }
+    }
+});
+const StateLabelBase = styled_components_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  font-weight: ${constants_1.get('fontWeights.bold')};
+  line-height: 16px;
+  color: ${constants_1.get('colors.canvas.default')};
+  text-align: center;
+  border-radius: ${constants_1.get('radii.3')};
+  ${colorVariants};
+  ${sizeVariants};
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+function StateLabel({ children, status, variant: variantProp, ...rest }) {
+    const octiconProps = variantProp === 'small' ? { width: '1em' } : {};
+    return (<StateLabelBase {...rest} variant={variantProp} status={status}>
+      {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
+      {status && <StyledOcticon_1.default mr={1} {...octiconProps} icon={octiconMap[status] || octicons_react_1.QuestionIcon}/>}
+      {children}
+    </StateLabelBase>);
+}
+StateLabel.defaultProps = {
+    variant: 'normal'
+};
+exports.default = StateLabel;

package/lib/StyledOcticon.jsx

@@ -0,0 +1,20 @@
+"use strict";
+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 styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+function Octicon({ icon: IconComponent, ...rest }) {
+    return <IconComponent {...rest}/>;
+}
+const StyledOcticon = styled_components_1.default(Octicon) `
+  ${constants_1.COMMON}
+  ${sx_1.default}
+`;
+StyledOcticon.defaultProps = {
+    size: 16
+};
+exports.default = StyledOcticon;

package/lib/SubNav.jsx

@@ -0,0 +1,104 @@
+"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 Box_1 = __importDefault(require("./Box"));
+const sx_1 = __importDefault(require("./sx"));
+const ITEM_CLASS = 'SubNav-item';
+const SELECTED_CLASS = 'selected';
+const SubNavBase = styled_components_1.default.nav `
+  display: flex;
+  justify-content: space-between;
+
+  .SubNav-body {
+    display: flex;
+    margin-bottom: -1px;
+
+    > * {
+      margin-left: ${constants_1.get('space.2')};
+    }
+
+    > *:first-child {
+      margin-left: 0;
+    }
+  }
+
+  .SubNav-actions {
+    align-self: center;
+  }
+
+  ${constants_1.COMMON};
+  ${constants_1.FLEX};
+  ${sx_1.default};
+`;
+function SubNav({ actions, className, children, label, ...rest }) {
+    const classes = classnames_1.default(className, 'SubNav');
+    return (<SubNavBase className={classes} aria-label={label} {...rest}>
+      <div className="SubNav-body">{children}</div>
+      {actions && <div className="SubNav-actions">{actions}</div>}
+    </SubNavBase>);
+}
+function SubNavLinks(props) {
+    return <Box_1.default display="flex" {...props}/>;
+}
+const SubNavLink = 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-left: ${constants_1.get('space.3')};
+  padding-right: ${constants_1.get('space.3')};
+  font-weight: ${constants_1.get('fontWeights.semibold')};
+  font-size: ${constants_1.get('fontSizes.1')};
+  line-height: 20px; //custom value for SubNav
+  min-height: 34px; //custom value for SubNav
+  color: ${constants_1.get('colors.fg.default')};
+  text-align: center;
+  text-decoration: none;
+  border-top: 1px solid ${constants_1.get('colors.border.default')};
+  border-bottom: 1px solid ${constants_1.get('colors.border.default')};
+  border-right: 1px solid ${constants_1.get('colors.border.default')};
+  display: flex;
+  align-items: center;
+
+  &:first-of-type {
+    border-top-left-radius: ${constants_1.get('radii.2')};
+    border-bottom-left-radius: ${constants_1.get('radii.2')};
+    border-left: 1px solid ${constants_1.get('colors.border.default')};
+  }
+
+  &:last-of-type {
+    border-top-right-radius: ${constants_1.get('radii.2')};
+    border-bottom-right-radius: ${constants_1.get('radii.2')};
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: ${constants_1.get('colors.canvas.subtle')};
+    transition: 0.2s ease;
+
+    .SubNav-octicon {
+      color: ${constants_1.get('colors.fg.muted')};
+    }
+  }
+
+  &.selected {
+    color: ${constants_1.get('colors.fg.onEmphasis')};
+    background-color: ${constants_1.get('colors.accent.emphasis')};
+    border-color: ${constants_1.get('colors.accent.emphasis')};
+    .SubNav-octicon {
+      color: ${constants_1.get('colors.fg.onEmphasis')};
+    }
+  }
+
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+SubNavLink.displayName = 'SubNav.Link';
+SubNavLinks.displayName = 'SubNav.Links';
+exports.default = Object.assign(SubNav, { Link: SubNavLink, Links: SubNavLinks });

package/lib/TabNav.jsx

@@ -0,0 +1,60 @@
+"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 = 'TabNav-item';
+const SELECTED_CLASS = 'selected';
+const TabNavBase = styled_components_1.default.div `
+  margin-top: 0;
+  border-bottom: 1px solid ${constants_1.get('colors.border.default')};
+  ${constants_1.COMMON}
+  ${sx_1.default}
+`;
+const TabNavBody = styled_components_1.default.nav `
+  display: flex;
+  margin-bottom: -1px;
+  overflow: auto;
+`;
+function TabNav({ children, 'aria-label': ariaLabel, ...rest }) {
+    return (<TabNavBase {...rest}>
+      <TabNavBody aria-label={ariaLabel}>{children}</TabNavBody>
+    </TabNavBase>);
+}
+const TabNavLink = 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: 8px 12px;
+  font-size: ${constants_1.get('fontSizes.1')};
+  line-height: 20px;
+  color: ${constants_1.get('colors.fg.default')};
+  text-decoration: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-bottom: 0;
+
+  &:hover,
+  &:focus {
+    color: ${constants_1.get('colors.fg.default')};
+    text-decoration: none;
+  }
+
+  &.selected {
+    color: ${constants_1.get('colors.fg.default')};
+    border-color: ${constants_1.get('colors.border.default')};
+    border-top-right-radius: ${constants_1.get('radii.2')};
+    border-top-left-radius: ${constants_1.get('radii.2')};
+    background-color: ${constants_1.get('colors.canvas.default')};
+  }
+
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+TabNavLink.displayName = 'TabNav.Link';
+exports.default = Object.assign(TabNav, { Link: TabNavLink });

package/lib/Text.jsx

@@ -0,0 +1,14 @@
+"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 constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const Text = styled_components_1.default.span `
+  ${constants_1.TYPOGRAPHY};
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+exports.default = Text;

package/lib/TextInput.jsx

@@ -0,0 +1,23 @@
+"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 _UnstyledTextInput_1 = __importDefault(require("./_UnstyledTextInput"));
+const _TextInputWrapper_1 = __importDefault(require("./_TextInputWrapper"));
+// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
+const TextInput = react_1.default.forwardRef(({ icon: IconComponent, block, className, contrast, disabled, sx: sxProp, theme, width: widthProp, minWidth: minWidthProp, maxWidth: maxWidthProp, variant: variantProp, ...inputProps }, ref) => {
+    // this class is necessary to style FilterSearch, plz no touchy!
+    const wrapperClasses = classnames_1.default(className, 'TextInput-wrapper');
+    return (<_TextInputWrapper_1.default block={block} className={wrapperClasses} contrast={contrast} disabled={disabled} hasIcon={!!IconComponent} sx={sxProp} theme={theme} width={widthProp} minWidth={minWidthProp} maxWidth={maxWidthProp} variant={variantProp}>
+        {IconComponent && <IconComponent className="TextInput-icon"/>}
+        <_UnstyledTextInput_1.default ref={ref} disabled={disabled} {...inputProps}/>
+      </_TextInputWrapper_1.default>);
+});
+TextInput.defaultProps = {
+    type: 'text'
+};
+TextInput.displayName = 'TextInput';
+exports.default = TextInput;