@primer/components 31.0.0-rc.c90c1dae → 31.0.0

package/src/SideNav.tsx

@@ -1,193 +0,0 @@
-// eslint-disable-next-line import/no-namespace
-import * as History from 'history'
-
-import {COMMON, get} from './constants'
-import styled, {css} from 'styled-components'
-
-import Box from './Box'
-import {ComponentProps} from './utils/types'
-import Link from './Link'
-import React from 'react'
-import classnames from 'classnames'
-import sx from './sx'
-
-type SideNavBaseProps = {
-  variant?: 'lightweight' | 'normal'
-  bordered?: boolean
-} & ComponentProps<typeof Box>
-
-function SideNavBase({variant, className, bordered, children, ...props}: SideNavBaseProps) {
-  const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal'
-  const newClassName = classnames(className, `variant-${variantClassName}`)
-
-  if (!bordered) {
-    props = {...props, borderWidth: 0}
-  }
-
-  return (
-    <Box
-      borderWidth="1px"
-      borderStyle="solid"
-      borderColor="border.default"
-      borderRadius={2}
-      as="nav"
-      className={newClassName}
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-}
-
-const SideNav = styled(SideNavBase)`
-  background-color: ${get('colors.canvas.subtle')};
-
-  ${props =>
-    props.bordered &&
-    css`
-      // Remove duplicate borders from nested SideNavs
-      & > & {
-        border-left: 0;
-        border-right: 0;
-        border-bottom: 0;
-      }
-    `}
-
-  ${COMMON};
-  ${sx};
-`
-type StyledSideNavLinkProps = {
-  to?: History.LocationDescriptor
-  selected?: boolean
-  variant?: 'full' | 'normal'
-}
-
-// used for variant normal hover, focus pseudo selectors
-const CommonAccessibilityVariantNormalStyles = css`
-  background-color: ${get('colors.neutral.subtle')};
-  outline: none;
-  text-decoration: none;
-`
-
-// used for light weight hover, focus pseudo selectors
-const CommonAccessibilityVariantLightWeightStyles = css`
-  color: ${get('colors.fg.default')};
-  text-decoration: none;
-  outline: none;
-`
-
-const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(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 {}
-  }
-})<StyledSideNavLinkProps>`
-  position: relative;
-  display: block;
-  ${props =>
-    props.variant === 'full' &&
-    css`
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    `}
-  width: 100%;
-  text-align: left;
-  font-size: ${get('fontSizes.1')};
-
-  & > ${SideNav} {
-    border-bottom: none;
-  }
-
-  ${SideNav}.variant-normal > & {
-    color: ${get('colors.fg.default')};
-    padding: ${get('space.3')};
-    border: 0;
-    border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
-
-    &:first-child {
-      border-top: 0;
-      border-top-right-radius: ${get('radii.2')};
-      border-top-left-radius: ${get('radii.2')};
-    }
-
-    &:last-child {
-      border-bottom-right-radius: ${get('radii.2')};
-      border-bottom-left-radius: ${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: ${get('shadows.primer.shadow.focus')};
-      z-index: 1;
-    }
-
-    &[aria-current='page'],
-    &[aria-selected='true'] {
-      background-color: ${get('colors.sidenav.selectedBg')};
-
-      // Bar on the left
-      &::before {
-        background-color: ${get('colors.primer.border.active')};
-      }
-    }
-  }
-
-  ${SideNav}.variant-lightweight > & {
-    padding: ${get('space.1')} 0;
-    color: ${get('colors.accent.fg')};
-
-    &:hover {
-      ${CommonAccessibilityVariantLightWeightStyles}
-    }
-
-    &:focus {
-      ${CommonAccessibilityVariantLightWeightStyles}
-      box-shadow: ${get('shadows.primer.shadow.focus')};
-      z-index: 1;
-    }
-
-    &[aria-current='page'],
-    &[aria-selected='true'] {
-      color: ${get('colors.fg.default')};
-      font-weight: ${get('fontWeights.semibold')};
-    }
-  }
-
-  ${sx};
-`
-
-SideNav.defaultProps = {
-  variant: 'normal'
-}
-
-SideNavLink.defaultProps = {
-  variant: 'normal'
-}
-
-SideNavLink.displayName = 'SideNav.Link'
-
-export type SideNavProps = ComponentProps<typeof SideNav>
-export type SideNavLinkProps = ComponentProps<typeof SideNavLink>
-
-export default Object.assign(SideNav, {Link: SideNavLink})

package/src/Spinner.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const sizeMap = {
-  small: '16px',
-  medium: '32px',
-  large: '64px'
-}
-
-export interface SpinnerInternalProps {
-  /** Sets the width and height of the spinner. */
-  size?: keyof typeof sizeMap
-}
-
-function Spinner({size: sizeKey = 'medium', ...props}: SpinnerInternalProps) {
-  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(Spinner)<SystemCommonProps & SxProp>`
-  @keyframes rotate-keyframes {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  animation: rotate-keyframes 1s linear infinite;
-
-  ${COMMON}
-  ${sx}
-`
-
-StyledSpinner.displayName = 'Spinner'
-
-export type SpinnerProps = ComponentProps<typeof StyledSpinner>
-export default StyledSpinner

package/src/StateLabel.tsx

@@ -1,102 +0,0 @@
-import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, QuestionIcon} from '@primer/octicons-react'
-import React from 'react'
-import styled from 'styled-components'
-import {variant} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
-import StyledOcticon from './StyledOcticon'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const octiconMap = {
-  issueOpened: IssueOpenedIcon,
-  pullOpened: GitPullRequestIcon,
-  issueClosed: IssueClosedIcon,
-  pullClosed: GitPullRequestIcon,
-  pullMerged: GitMergeIcon,
-  draft: GitPullRequestIcon
-}
-
-const colorVariants = 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'
-    }
-  }
-})
-
-const sizeVariants = variant({
-  prop: 'variant',
-  variants: {
-    small: {
-      paddingX: 2,
-      paddingY: 1,
-      fontSize: 0
-    },
-    normal: {
-      paddingX: '12px',
-      paddingY: 2,
-      fontSize: 1
-    }
-  }
-})
-
-type StyledStateLabelBaseProps = {
-  variant?: 'small' | 'normal'
-  status?: keyof typeof octiconMap
-} & SystemCommonProps &
-  SxProp
-
-const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
-  display: inline-flex;
-  align-items: center;
-  font-weight: ${get('fontWeights.bold')};
-  line-height: 16px;
-  color: ${get('colors.canvas.default')};
-  text-align: center;
-  border-radius: ${get('radii.3')};
-  ${colorVariants};
-  ${sizeVariants};
-  ${COMMON};
-  ${sx};
-`
-
-export type StateLabelProps = ComponentProps<typeof StateLabelBase>
-
-function StateLabel({children, status, variant: variantProp, ...rest}: StateLabelProps) {
-  const octiconProps = variantProp === 'small' ? {width: '1em'} : {}
-  return (
-    <StateLabelBase {...rest} variant={variantProp} status={status}>
-      {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
-      {status && <StyledOcticon mr={1} {...octiconProps} icon={octiconMap[status] || QuestionIcon} />}
-      {children}
-    </StateLabelBase>
-  )
-}
-
-StateLabel.defaultProps = {
-  variant: 'normal'
-}
-
-export default StateLabel

package/src/StyledOcticon.tsx

@@ -1,24 +0,0 @@
-import {IconProps} from '@primer/octicons-react'
-import React from 'react'
-import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type OcticonProps = {icon: React.ElementType} & IconProps
-
-function Octicon({icon: IconComponent, ...rest}: OcticonProps) {
-  return <IconComponent {...rest} />
-}
-
-const StyledOcticon = styled(Octicon)<SystemCommonProps & SxProp>`
-  ${COMMON}
-  ${sx}
-`
-
-StyledOcticon.defaultProps = {
-  size: 16
-}
-
-export type StyledOcticonProps = ComponentProps<typeof StyledOcticon>
-export default StyledOcticon

package/src/SubNav.tsx

@@ -1,129 +0,0 @@
-import classnames from 'classnames'
-// eslint-disable-next-line import/no-namespace
-import * as History from 'history'
-import React from 'react'
-import styled from 'styled-components'
-import {COMMON, FLEX, get, SystemBorderProps, SystemCommonProps, SystemFlexProps} from './constants'
-import Box, {BoxProps} from './Box'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const ITEM_CLASS = 'SubNav-item'
-const SELECTED_CLASS = 'selected'
-
-const SubNavBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
-  display: flex;
-  justify-content: space-between;
-
-  .SubNav-body {
-    display: flex;
-    margin-bottom: -1px;
-
-    > * {
-      margin-left: ${get('space.2')};
-    }
-
-    > *:first-child {
-      margin-left: 0;
-    }
-  }
-
-  .SubNav-actions {
-    align-self: center;
-  }
-
-  ${COMMON};
-  ${FLEX};
-  ${sx};
-`
-
-export type SubNavProps = {
-  actions?: React.ReactNode
-  align?: 'right'
-  full?: boolean
-  label?: string
-} & ComponentProps<typeof SubNavBase>
-
-function SubNav({actions, className, children, label, ...rest}: SubNavProps) {
-  const classes = classnames(className, 'SubNav')
-  return (
-    <SubNavBase className={classes} aria-label={label} {...rest}>
-      <div className="SubNav-body">{children}</div>
-      {actions && <div className="SubNav-actions">{actions}</div>}
-    </SubNavBase>
-  )
-}
-
-export type SubNavLinksProps = BoxProps
-
-function SubNavLinks(props: SubNavLinksProps) {
-  return <Box display="flex" {...props} />
-}
-
-type StyledSubNavLinkProps = {
-  to?: History.LocationDescriptor
-  selected?: boolean
-} & SystemCommonProps &
-  SxProp &
-  SystemBorderProps
-
-const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
-  className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
-}))<StyledSubNavLinkProps>`
-  padding-left: ${get('space.3')};
-  padding-right: ${get('space.3')};
-  font-weight: ${get('fontWeights.semibold')};
-  font-size: ${get('fontSizes.1')};
-  line-height: 20px; //custom value for SubNav
-  min-height: 34px; //custom value for SubNav
-  color: ${get('colors.fg.default')};
-  text-align: center;
-  text-decoration: none;
-  border-top: 1px solid ${get('colors.border.default')};
-  border-bottom: 1px solid ${get('colors.border.default')};
-  border-right: 1px solid ${get('colors.border.default')};
-  display: flex;
-  align-items: center;
-
-  &:first-of-type {
-    border-top-left-radius: ${get('radii.2')};
-    border-bottom-left-radius: ${get('radii.2')};
-    border-left: 1px solid ${get('colors.border.default')};
-  }
-
-  &:last-of-type {
-    border-top-right-radius: ${get('radii.2')};
-    border-bottom-right-radius: ${get('radii.2')};
-  }
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    background-color: ${get('colors.canvas.subtle')};
-    transition: 0.2s ease;
-
-    .SubNav-octicon {
-      color: ${get('colors.fg.muted')};
-    }
-  }
-
-  &.selected {
-    color: ${get('colors.fg.onEmphasis')};
-    background-color: ${get('colors.accent.emphasis')};
-    border-color: ${get('colors.accent.emphasis')};
-    .SubNav-octicon {
-      color: ${get('colors.fg.onEmphasis')};
-    }
-  }
-
-  ${COMMON};
-  ${sx};
-`
-
-SubNavLink.displayName = 'SubNav.Link'
-
-SubNavLinks.displayName = 'SubNav.Links'
-
-export type SubNavLinkProps = ComponentProps<typeof SubNavLink>
-export default Object.assign(SubNav, {Link: SubNavLink, Links: SubNavLinks})

package/src/TabNav.tsx

@@ -1,77 +0,0 @@
-import classnames from 'classnames'
-// eslint-disable-next-line import/no-namespace
-import * as History from 'history'
-import React from 'react'
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const ITEM_CLASS = 'TabNav-item'
-const SELECTED_CLASS = 'selected'
-
-const TabNavBase = styled.div<SystemCommonProps & SxProp>`
-  margin-top: 0;
-  border-bottom: 1px solid ${get('colors.border.default')};
-  ${COMMON}
-  ${sx}
-`
-
-const TabNavBody = styled.nav`
-  display: flex;
-  margin-bottom: -1px;
-  overflow: auto;
-`
-
-export type TabNavProps = ComponentProps<typeof TabNavBase>
-
-function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
-  return (
-    <TabNavBase {...rest}>
-      <TabNavBody aria-label={ariaLabel}>{children}</TabNavBody>
-    </TabNavBase>
-  )
-}
-
-type StyledTabNavLinkProps = {
-  to?: History.LocationDescriptor
-  selected?: boolean
-} & SystemCommonProps &
-  SxProp &
-  SystemTypographyProps
-
-const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
-  className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
-}))<StyledTabNavLinkProps>`
-  padding: 8px 12px;
-  font-size: ${get('fontSizes.1')};
-  line-height: 20px;
-  color: ${get('colors.fg.default')};
-  text-decoration: none;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-bottom: 0;
-
-  &:hover,
-  &:focus {
-    color: ${get('colors.fg.default')};
-    text-decoration: none;
-  }
-
-  &.selected {
-    color: ${get('colors.fg.default')};
-    border-color: ${get('colors.border.default')};
-    border-top-right-radius: ${get('radii.2')};
-    border-top-left-radius: ${get('radii.2')};
-    background-color: ${get('colors.canvas.default')};
-  }
-
-  ${COMMON};
-  ${sx};
-`
-
-TabNavLink.displayName = 'TabNav.Link'
-
-export type TabNavLinkProps = ComponentProps<typeof TabNavLink>
-export default Object.assign(TabNav, {Link: TabNavLink})

package/src/Text.tsx

@@ -1,13 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const Text = styled.span<SystemTypographyProps & SystemCommonProps & SxProp>`
-  ${TYPOGRAPHY};
-  ${COMMON};
-  ${sx};
-`
-
-export type TextProps = ComponentProps<typeof Text>
-export default Text

package/src/TextInput.tsx

@@ -1,68 +0,0 @@
-import classnames from 'classnames'
-import React from 'react'
-import {ComponentProps, Merge} from './utils/types'
-import UnstyledTextInput from './_UnstyledTextInput'
-import TextInputWrapper from './_TextInputWrapper'
-
-type NonPassthroughProps = {
-  className?: string
-  icon?: React.ComponentType<{className?: string}>
-} & Pick<
-  ComponentProps<typeof TextInputWrapper>,
-  'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'
->
-
-// Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
-type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>
-
-// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
-const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
-  (
-    {
-      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(className, 'TextInput-wrapper')
-
-    return (
-      <TextInputWrapper
-        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 ref={ref} disabled={disabled} {...inputProps} />
-      </TextInputWrapper>
-    )
-  }
-)
-
-TextInput.defaultProps = {
-  type: 'text'
-}
-
-TextInput.displayName = 'TextInput'
-
-export type TextInputProps = ComponentProps<typeof TextInput>
-export default TextInput