@primer/components 29.0.0-rc.f749c85e → 29.1.0

package/src/AvatarStack.tsx

@@ -1,161 +0,0 @@
-import classnames from 'classnames'
-import React from 'react'
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
-import {Box} from '.'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type StyledAvatarStackWrapperProps = {
-  count?: number
-} & SystemCommonProps &
-  SxProp
-
-const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
-  display: flex;
-  position: relative;
-  height: 20px;
-  min-width: ${props => (props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px')};
-
-  .pc-AvatarItem {
-    flex-shrink: 0;
-    height: 20px;
-    width: 20px;
-    box-shadow: 0 0 0 1px ${get('colors.bg.canvas')};
-    margin-left: -11px;
-    position: relative;
-    overflow: hidden;
-    transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
-      box-shadow 0.1s ease-in-out;
-
-    &:first-child {
-      margin-left: 0;
-    }
-    &:nth-child(n + 4) {
-      display: none;
-    }
-  }
-
-  &.pc-AvatarStack--two {
-    min-width: 30px;
-    .pc-AvatarItem {
-      &:nth-child(n + 3) {
-        display: none;
-      }
-    }
-  }
-
-  &.pc-AvatarStack--three-plus {
-    min-width: 38px;
-    .pc-AvatarItem {
-      &:nth-child(3) {
-        opacity: ${100 - 3 * 15}%;
-        margin-left: -17px;
-      }
-      &:nth-child(4) {
-        opacity: ${100 - 4 * 15}%;
-        margin-left: -17px;
-      }
-      &:nth-child(5) {
-        opacity: ${100 - 5 * 15}%;
-        margin-left: -17px;
-      }
-      &:nth-child(n + 4) {
-        display: block;
-      }
-      &:nth-child(n + 6) {
-        opacity: 0;
-        visibility: hidden;
-      }
-    }
-  }
-
-  &.pc-AvatarStack--right {
-    justify-content: flex-end;
-    .pc-AvatarItem {
-      margin-left: 0 !important;
-      margin-right: -11px;
-
-      &:first-child {
-        margin-right: 0;
-      }
-    }
-
-    .pc-AvatarStackBody {
-      flex-direction: row-reverse;
-
-      &:hover {
-        .pc-AvatarItem {
-          margin-right: ${get('space.1')}!important;
-          margin-left: 0 !important;
-
-          &:first-child {
-            margin-right: 0 !important;
-          }
-        }
-      }
-    }
-  }
-
-  &.pc-AvatarStack--three-plus.pc-AvatarStack--right {
-    .pc-AvatarItem {
-      &:nth-child(3) {
-        margin-right: -17px;
-      }
-      &:nth-child(4) {
-        margin-right: -17px;
-      }
-      &:nth-child(5) {
-        margin-right: -17px;
-      }
-    }
-  }
-
-  .pc-AvatarStackBody:hover {
-    width: auto;
-
-    .pc-AvatarItem {
-      margin-left: ${get('space.1')};
-      opacity: 100%;
-      visibility: visible;
-      box-shadow: 0 0 0 4px ${get('colors.bg.canvas')};
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
-
-  ${COMMON}
-  ${sx};
-`
-const transformChildren = (children: React.ReactNode) => {
-  return React.Children.map(children, (child, index) => {
-    if (!React.isValidElement(child)) return child
-    return React.cloneElement(child, {
-      className: classnames(child.props.className, 'pc-AvatarItem'),
-      sx: {zIndex: 10 - index, ...child.props.sx}
-    })
-  })
-}
-
-export type AvatarStackProps = {
-  alignRight?: boolean
-} & ComponentProps<typeof AvatarStackWrapper>
-
-const AvatarStack = ({children, alignRight, ...rest}: AvatarStackProps) => {
-  const count = React.Children.count(children)
-  const wrapperClassNames = classnames({
-    'pc-AvatarStack--two': count === 2,
-    'pc-AvatarStack--three-plus': count > 2,
-    'pc-AvatarStack--right': alignRight
-  })
-  return (
-    <AvatarStackWrapper count={count} className={wrapperClassNames} {...rest}>
-      <Box position="absolute" display="flex" width="38px" className="pc-AvatarStackBody">
-        {transformChildren(children)}
-      </Box>
-    </AvatarStackWrapper>
-  )
-}
-
-export default AvatarStack

package/src/BaseStyles.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import styled, {createGlobalStyle} from 'styled-components'
-import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
-import {ComponentProps} from './utils/types'
-
-const GlobalStyle = createGlobalStyle`
-  * { box-sizing: border-box; }
-  body { margin: 0; }
-  table { border-collapse: collapse; }
-  
-  [role="button"]:focus:not(:focus-visible):not(.focus-visible),
-  [role="tabpanel"][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
-  button:focus:not(:focus-visible):not(.focus-visible),
-  summary:focus:not(:focus-visible):not(.focus-visible),
-  a:focus:not(:focus-visible):not(.focus-visible) {
-    outline: none;
-    box-shadow: none;
-  }
-
-  [tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
-  details-dialog:focus:not(:focus-visible):not(.focus-visible) {
-    outline: none;
-  }
-`
-
-const Base = styled.div<SystemTypographyProps & SystemCommonProps>`
-  ${TYPOGRAPHY};
-  ${COMMON};
-`
-
-export type BaseStylesProps = ComponentProps<typeof Base>
-
-function BaseStyles(props: BaseStylesProps) {
-  const {children, ...rest} = props
-
-  // load polyfill for :focus-visible
-  require('focus-visible')
-
-  return (
-    <Base {...rest} data-portal-root>
-      <GlobalStyle />
-      {children}
-    </Base>
-  )
-}
-
-BaseStyles.defaultProps = {
-  color: 'text.primary',
-  fontFamily: 'normal',
-  lineHeight: 'default'
-}
-
-export default BaseStyles

package/src/BorderBox.tsx

@@ -1,18 +0,0 @@
-import styled from 'styled-components'
-import Box, {BoxProps} from './Box'
-
-export type BorderBoxProps = BoxProps
-
-/**
- * @deprecated Use the Box component instead (i.e. <BorderBox> → <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2}>)
- */
-const BorderBox = styled(Box)``
-
-BorderBox.defaultProps = {
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  borderColor: 'border.primary',
-  borderRadius: 2
-}
-
-export default BorderBox

package/src/Box.tsx

@@ -1,54 +0,0 @@
-import styled from 'styled-components'
-import {
-  background,
-  BackgroundProps,
-  border,
-  BorderProps,
-  color,
-  ColorProps,
-  flexbox,
-  FlexboxProps,
-  grid,
-  GridProps,
-  layout,
-  LayoutProps,
-  position,
-  PositionProps,
-  shadow,
-  ShadowProps,
-  space,
-  SpaceProps,
-  typography,
-  TypographyProps
-} from 'styled-system'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type StyledBoxProps = SpaceProps &
-  ColorProps &
-  TypographyProps &
-  LayoutProps &
-  FlexboxProps &
-  GridProps &
-  BackgroundProps &
-  BorderProps &
-  PositionProps &
-  ShadowProps &
-  SxProp
-
-const Box = styled.div<StyledBoxProps>(
-  space,
-  color,
-  typography,
-  layout,
-  flexbox,
-  grid,
-  background,
-  border,
-  position,
-  shadow,
-  sx
-)
-
-export type BoxProps = ComponentProps<typeof Box>
-export default Box

package/src/BranchName.tsx

@@ -1,19 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const BranchName = styled.a<SystemCommonProps & SxProp>`
-  display: inline-block;
-  padding: 2px 6px;
-  font-size: ${get('fontSizes.0')};
-  font-family: ${get('fonts.mono')};
-  color: ${get('colors.branchName.text')};
-  background-color: ${get('colors.branchName.bg')};
-  border-radius: ${get('radii.2')};
-  ${COMMON};
-  ${sx};
-`
-
-export type BranchNameProps = ComponentProps<typeof BranchName>
-export default BranchName

package/src/Breadcrumb.tsx

@@ -1,87 +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 Box from './Box'
-import {COMMON, FLEX, get, SystemCommonProps, SystemFlexProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const SELECTED_CLASS = 'selected'
-
-const Wrapper = styled.li`
-  display: inline-block;
-  white-space: nowrap;
-  list-style: none;
-  &::after {
-    padding-right: 0.5em;
-    padding-left: 0.5em;
-    color: ${get('colors.text.disabled')};
-    font-size: ${get('fontSizes.1')};
-    content: '/';
-  }
-  &:first-child {
-    margin-left: 0;
-  }
-  &:last-child {
-    &::after {
-      content: none;
-    }
-  }
-`
-
-const BreadcrumbBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
-  display: flex;
-  justify-content: space-between;
-  ${COMMON};
-  ${FLEX};
-  ${sx};
-`
-
-export type BreadcrumbProps = ComponentProps<typeof BreadcrumbBase>
-
-function Breadcrumb({className, children, theme, ...rest}: React.PropsWithChildren<BreadcrumbProps>) {
-  const classes = classnames(className, 'Breadcrumb')
-  const wrappedChildren = React.Children.map(children, child => <Wrapper theme={theme}>{child}</Wrapper>)
-  return (
-    <BreadcrumbBase className={classes} aria-label="breadcrumb" theme={theme} {...rest}>
-      <Box as="ol" my={0} pl={0}>
-        {wrappedChildren}
-      </Box>
-    </BreadcrumbBase>
-  )
-}
-
-type StyledBreadcrumbItemProps = {
-  to?: History.LocationDescriptor
-  selected?: boolean
-} & SystemCommonProps &
-  SxProp
-
-const BreadcrumbItem = styled.a.attrs<StyledBreadcrumbItemProps>(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
-  className: classnames(props.selected && SELECTED_CLASS, props.className),
-  'aria-current': props.selected ? 'page' : null
-}))<StyledBreadcrumbItemProps>`
-  color: ${get('colors.text.link')};
-  display: inline-block;
-  font-size: ${get('fontSizes.1')};
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-  &.selected {
-    color: ${get('colors.text.primary')};
-    pointer-events: none;
-  }
-  ${COMMON}
-  ${sx};
-`
-
-Breadcrumb.displayName = 'Breadcrumb'
-
-BreadcrumbItem.displayName = 'Breadcrumb.Item'
-
-export type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>
-export default Object.assign(Breadcrumb, {Item: BreadcrumbItem})

package/src/Button/Button.tsx

@@ -1,40 +0,0 @@
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
-
-const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
-  color: ${get('colors.btn.text')};
-  background-color: ${get('colors.btn.bg')};
-  border: 1px solid ${get('colors.btn.border')};
-  box-shadow: ${get('shadows.btn.shadow')}, ${get('shadows.btn.insetShadow')}};
-
-  &:hover {
-    background-color: ${get('colors.btn.hoverBg')};
-    border-color: ${get('colors.btn.hoverBorder')};
-  }
-
-  // focus must come before :active so that the active box shadow overrides
-  &:focus {
-    border-color: ${get('colors.btn.focusBorder')};
-    box-shadow: ${get('shadows.btn.focusShadow')};
-  }
-
-  &:active {
-    background-color: ${get('colors.btn.selectedBg')};
-    box-shadow: ${get('shadows.btn.shadowActive')};
-  }
-
-  &:disabled {
-    color: ${get('colors.text.disabled')};
-    background-color: ${get('colors.btn.bg')};
-    border-color: ${get('colors.btn.border')};
-  }
-
-  ${buttonSystemProps};
-  ${sx};
-`
-
-export type ButtonProps = ComponentProps<typeof Button>
-export default Button

package/src/Button/ButtonBase.tsx

@@ -1,43 +0,0 @@
-import styled from 'styled-components'
-import {compose, fontSize, FontSizeProps, variant} from 'styled-system'
-import {COMMON, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
-import {ComponentProps} from '../utils/types'
-import buttonBaseStyles from './ButtonStyles'
-
-export const buttonSystemProps = compose(fontSize, COMMON, LAYOUT)
-export type ButtonSystemProps = FontSizeProps & SystemCommonProps & SystemLayoutProps
-
-const variants = variant({
-  variants: {
-    small: {
-      p: '4px 12px',
-      fontSize: 0
-    },
-    medium: {
-      fontSize: 1
-    },
-    large: {
-      fontSize: 2,
-      p: '10px 20px'
-    }
-  }
-})
-
-type StyledButtonBaseProps = {
-  as?: 'button' | 'a' | 'summary' | 'input' | string | React.ReactType
-  variant?: 'small' | 'medium' | 'large'
-} & FontSizeProps
-
-const ButtonBase = styled.button.attrs<StyledButtonBaseProps>(({disabled, onClick}) => ({
-  onClick: disabled ? undefined : onClick
-}))<StyledButtonBaseProps>`
-  ${buttonBaseStyles}
-  ${variants}
-`
-
-ButtonBase.defaultProps = {
-  variant: 'medium'
-}
-
-export type ButtonBaseProps = ComponentProps<typeof ButtonBase>
-export default ButtonBase

package/src/Button/ButtonClose.tsx

@@ -1,40 +0,0 @@
-import {XIcon} from '@primer/octicons-react'
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-
-type StyledButtonProps = SystemCommonProps & SystemLayoutProps & SxProp
-
-const StyledButton = styled.button<StyledButtonProps>`
-  border: none;
-  padding: 0;
-  background: transparent;
-  outline: none;
-  cursor: pointer;
-  border-radius: ${get('radii.2')};
-  color: ${get('colors.text.secondary')};
-
-  &:focus {
-    box-shadow: ${get('shadows.btn.focusShadow')};
-  }
-
-  &:hover {
-    color: ${get('colors.text.link')};
-  }
-  ${COMMON};
-  ${LAYOUT};
-  ${sx};
-`
-
-const ButtonClose = forwardRef<HTMLButtonElement, ComponentProps<typeof StyledButton>>((props, ref) => {
-  return (
-    <StyledButton ref={ref} aria-label="Close" {...props}>
-      <XIcon />
-    </StyledButton>
-  )
-})
-
-export type ButtonCloseProps = ComponentProps<typeof ButtonClose>
-export default ButtonClose

package/src/Button/ButtonDanger.tsx

@@ -1,43 +0,0 @@
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
-
-const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
-  color: ${get('colors.btn.danger.text')};
-  border: 1px solid ${get('colors.btn.border')};
-  background-color: ${get('colors.btn.bg')};
-  box-shadow: ${get('shadows.btn.shadow')};
-
-  &:hover {
-    color: ${get('colors.btn.danger.hoverText')};
-    background-color: ${get('colors.btn.danger.hoverBg')};
-    border-color: ${get('colors.btn.danger.hoverBorder')};
-    box-shadow: ${get('shadows.btn.danger.hoverShadow')};
-  }
-  // focus must come before :active so that the active box shadow overrides
-  &:focus {
-    border-color: ${get('colors.btn.danger.focusBorder')};
-    box-shadow: ${get('shadows.btn.danger.focusShadow')};
-  }
-
-  &:active {
-    color: ${get('colors.btn.danger.selectedText')};
-    background-color: ${get('colors.btn.danger.selectedBg')};
-    box-shadow: ${get('shadows.btn.danger.selectedShadow')};
-    border-color: ${get('colors.btn.danger.selectedBorder')};
-  }
-
-  &:disabled {
-    color: ${get('colors.btn.danger.disabledText')};
-    background-color: ${get('colors.btn.danger.disabledBg')};
-    border-color: ${get('colors.btn.danger.disabledBorder')};
-  }
-
-  ${buttonSystemProps};
-  ${sx};
-`
-
-export type ButtonDangerProps = ComponentProps<typeof ButtonDanger>
-export default ButtonDanger

package/src/Button/ButtonGroup.tsx

@@ -1,55 +0,0 @@
-import styled from 'styled-components'
-import Box from '../Box'
-import {get} from '../constants'
-import sx from '../sx'
-import {ComponentProps} from '../utils/types'
-
-const ButtonGroup = styled(Box)`
-  vertical-align: middle;
-
-  && > * {
-    position: relative;
-    border-right-width: 0;
-    border-radius: 0;
-
-    :first-child {
-      border-top-left-radius: ${get('radii.2')};
-      border-bottom-left-radius: ${get('radii.2')};
-      margin-right: 0;
-    }
-
-    :not(:first-child) {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    :last-child {
-      border-right-width: 1px;
-      border-top-right-radius: ${get('radii.2')};
-      border-bottom-right-radius: ${get('radii.2')};
-    }
-
-    :focus,
-    :active,
-    :hover {
-      border-right-width: 1px;
-      + * {
-        border-left-width: 0;
-      }
-    }
-
-    :focus,
-    :active {
-      z-index: 1;
-    }
-  }
-
-  ${sx};
-`
-
-ButtonGroup.defaultProps = {
-  display: 'inline-block'
-}
-
-export type ButtonGroupProps = ComponentProps<typeof ButtonGroup>
-export default ButtonGroup

package/src/Button/ButtonInvisible.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
-
-const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
-  color: ${get('colors.text.link')};
-  background-color: transparent;
-  border: 0;
-  border-radius: ${get('radii.2')};
-  box-shadow: none;
-
-  &:disabled {
-    color: ${get('colors.text.disabled')};
-  }
-
-  &:focus {
-    box-shadow: ${get('shadows.btn.focusShadow')};
-  }
-
-  ${buttonSystemProps};
-  ${sx}
-`
-
-export type ButtonInvisibleProps = ComponentProps<typeof ButtonInvisible>
-export default ButtonInvisible

package/src/Button/ButtonOutline.tsx

@@ -1,43 +0,0 @@
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
-
-const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
-  color: ${get('colors.btn.outline.text')};
-  border: 1px solid ${get('colors.btn.border')};
-  background-color: ${get('colors.btn.bg')};
-  box-shadow: ${get('shadows.btn.shadow')};
-
-  &:hover {
-    color: ${get('colors.btn.outline.hoverText')};
-    background-color: ${get('colors.btn.outline.hoverBg')};
-    border-color: ${get('colors.btn.outline.hoverBorder')};
-    box-shadow: ${get('shadows.btn.outline.hoverShadow')};
-  }
-  // focus must come before :active so that the active box shadow overrides
-  &:focus {
-    border-color: ${get('colors.btn.outline.focusBorder')};
-    box-shadow: ${get('shadows.btn.outline.focusShadow')};
-  }
-
-  &:active {
-    color: ${get('colors.btn.outline.selectedText')};
-    background-color: ${get('colors.btn.outline.selectedBg')};
-    box-shadow: ${get('shadows.btn.outline.selectedShadow')};
-    border-color: ${get('colors.btn.outline.selectedBorder')};
-  }
-
-  &:disabled {
-    color: ${get('colors.btn.outline.disabledText')};
-    background-color: ${get('colors.btn.outline.disabledBg')};
-    border-color: ${get('colors.btn.border')};
-  }
-
-  ${buttonSystemProps};
-  ${sx};
-`
-
-export type ButtonOutlineProps = ComponentProps<typeof ButtonOutline>
-export default ButtonOutline