@primer/components 0.0.0-20211030175556 → 0.0.0-20211030175634

package/lib/SideNav.jsx

@@ -1,173 +0,0 @@
-"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, 'aria-label': ariaLabel }) {
-    const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
-    const newClassName = classnames_1.default(className, `variant-${variantClassName}`);
-    return (<Box_1.default borderWidth={bordered ? '1px' : 0} borderStyle="solid" borderColor="border.default" borderRadius={2} as="nav" className={newClassName} aria-label={ariaLabel}>
-      {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;
-      }
-    `}
-
-  ${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

@@ -1,35 +0,0 @@
-"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.jsx

@@ -1,93 +0,0 @@
-"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};
-  ${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 {...octiconProps} icon={octiconMap[status] || octicons_react_1.QuestionIcon} sx={{ mr: 1 }}/>}
-      {children}
-    </StateLabelBase>);
-}
-StateLabel.defaultProps = {
-    variant: 'normal'
-};
-exports.default = StateLabel;

package/lib/StyledOcticon.jsx

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

package/lib/SubNav.jsx

@@ -1,101 +0,0 @@
-"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 = '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;
-  }
-
-  ${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>);
-}
-const SubNavLinks = styled_components_1.default.div `
-  display: flex;
-  ${sx_1.default};
-`;
-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')};
-    }
-  }
-
-  ${sx_1.default};
-`;
-SubNavLink.displayName = 'SubNav.Link';
-SubNavLinks.displayName = 'SubNav.Links';
-exports.default = Object.assign(SubNav, { Link: SubNavLink, Links: SubNavLinks });

package/lib/TabNav.jsx

@@ -1,58 +0,0 @@
-"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')};
-  ${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')};
-  }
-
-  ${sx_1.default};
-`;
-TabNavLink.displayName = 'TabNav.Link';
-exports.default = Object.assign(TabNav, { Link: TabNavLink });

package/lib/Text.jsx

@@ -1,14 +0,0 @@
-"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

@@ -1,23 +0,0 @@
-"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;