@primer/components 33.1.0-rc.6856bcf5 → 33.1.0

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.default',
-  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,20 +0,0 @@
-import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const BranchName = styled.a<SxProp>`
-  display: inline-block;
-  padding: 2px 6px;
-  font-size: ${get('fontSizes.0')};
-  font-family: ${get('fonts.mono')};
-  color: ${get('colors.accent.fg')};
-  background-color: ${get('colors.accent.subtle')};
-  border-radius: ${get('radii.2')};
-  text-decoration: none;
-
-  ${sx};
-`
-
-export type BranchNameProps = ComponentProps<typeof BranchName>
-export default BranchName

package/src/Breadcrumbs.tsx

@@ -1,101 +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 {get} 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.fg.muted')};
-    font-size: ${get('fontSizes.1')};
-    content: '/';
-  }
-  &:first-child {
-    margin-left: 0;
-  }
-  &:last-child {
-    &::after {
-      content: none;
-    }
-  }
-`
-
-const BreadcrumbsBase = styled.nav<SxProp>`
-  display: flex;
-  justify-content: space-between;
-  ${sx};
-`
-
-export type BreadcrumbsProps = React.PropsWithChildren<
-  {
-    className?: string
-  } & SxProp
->
-
-function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren<BreadcrumbsProps>) {
-  const wrappedChildren = React.Children.map(children, child => <Wrapper>{child}</Wrapper>)
-  return (
-    <BreadcrumbsBase className={className} aria-label="Breadcrumbs" sx={sxProp}>
-      <Box as="ol" my={0} pl={0}>
-        {wrappedChildren}
-      </Box>
-    </BreadcrumbsBase>
-  )
-}
-
-type StyledBreadcrumbsItemProps = {
-  to?: History.LocationDescriptor
-  selected?: boolean
-} & SxProp
-
-const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
-  className: classnames(props.selected && SELECTED_CLASS, props.className),
-  'aria-current': props.selected ? 'page' : null
-}))<StyledBreadcrumbsItemProps>`
-  color: ${get('colors.accent.fg')};
-  display: inline-block;
-  font-size: ${get('fontSizes.1')};
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-  &.selected {
-    color: ${get('colors.fg.default')};
-    pointer-events: none;
-  }
-  ${sx};
-`
-
-Breadcrumbs.displayName = 'Breadcrumbs'
-
-BreadcrumbsItem.displayName = 'Breadcrumbs.Item'
-
-export type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>
-export default Object.assign(Breadcrumbs, {Item: BreadcrumbsItem})
-
-/**
- * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
- */
-export const Breadcrumb = Object.assign(Breadcrumbs, {Item: BreadcrumbsItem})
-
-/**
- * @deprecated Use the `BreadcrumbsProps` type instead
- */
-export type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>
-
-/**
- * @deprecated Use the `BreadcrumbsItemProps` type instead
- */
-export type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>

package/src/Button/Button.tsx

@@ -1,39 +0,0 @@
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps} from './ButtonBase'
-
-const Button = styled(ButtonBase)<ButtonBaseProps & 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.primer.fg.disabled')};
-    background-color: ${get('colors.btn.bg')};
-    border-color: ${get('colors.btn.border')};
-  }
-
-  ${sx};
-`
-
-export type ButtonProps = ComponentProps<typeof Button>
-export default Button

package/src/Button/ButtonBase.tsx

@@ -1,39 +0,0 @@
-import styled from 'styled-components'
-import {variant} from 'styled-system'
-import {ComponentProps} from '../utils/types'
-import buttonBaseStyles from './ButtonStyles'
-
-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'
-}
-
-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,36 +0,0 @@
-import {XIcon} from '@primer/octicons-react'
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-
-const StyledButton = styled.button<SxProp>`
-  border: none;
-  padding: 0;
-  background: transparent;
-  outline: none;
-  cursor: pointer;
-  border-radius: ${get('radii.2')};
-  color: ${get('colors.fg.muted')};
-
-  &:focus {
-    box-shadow: ${get('shadows.btn.focusShadow')};
-  }
-
-  &:hover {
-    color: ${get('colors.accent.fg')};
-  }
-  ${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,42 +0,0 @@
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps} from './ButtonBase'
-
-const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & 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')};
-  }
-
-  ${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,31 +0,0 @@
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps} from './ButtonBase'
-
-const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & SxProp>`
-  color: ${get('colors.accent.fg')};
-  background-color: transparent;
-  border: 0;
-  border-radius: ${get('radii.2')};
-  box-shadow: none;
-
-  &:disabled {
-    color: ${get('colors.primer.fg.disabled')};
-  }
-  &:focus {
-    box-shadow: ${get('shadows.btn.focusShadow')};
-  }
-  &:hover {
-    background-color: ${get('colors.btn.hoverBg')};
-  }
-  &:active {
-    background-color: ${get('colors.btn.selectedBg')};
-  }
-
-  ${sx}
-`
-
-export type ButtonInvisibleProps = ComponentProps<typeof ButtonInvisible>
-export default ButtonInvisible

package/src/Button/ButtonOutline.tsx

@@ -1,42 +0,0 @@
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps} from './ButtonBase'
-
-const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & 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')};
-  }
-
-  ${sx};
-`
-
-export type ButtonOutlineProps = ComponentProps<typeof ButtonOutline>
-export default ButtonOutline

package/src/Button/ButtonPrimary.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} from './ButtonBase'
-
-export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & SxProp>`
-  color: ${get('colors.btn.primary.text')};
-  border: 1px solid ${get('colors.btn.primary.border')};
-  background-color: ${get('colors.btn.primary.bg')};
-  box-shadow: ${get('shadows.btn.primary.shadow')};
-
-  &:hover {
-    color: ${get('colors.btn.primary.hoverText')};
-    background-color: ${get('colors.btn.primary.hoverBg')};
-    border-color: ${get('colors.btn.primary.hoverBorder')};
-    box-shadow: ${get('shadows.btn.primary.hoverShadow')};
-  }
-  // focus must come before :active so that the active box shadow overrides
-  &:focus {
-    border-color: ${get('colors.btn.primary.focusBorder')};
-    box-shadow: ${get('shadows.btn.primary.focusShadow')};
-  }
-
-  &:active {
-    background-color: ${get('colors.btn.primary.selectedBg')};
-    box-shadow: ${get('shadows.btn.primary.selectedShadow')};
-  }
-
-  &:disabled {
-    color: ${get('colors.btn.primary.disabledText')};
-    background-color: ${get('colors.btn.primary.disabledBg')};
-    border-color: ${get('colors.btn.primary.disabledBorder')};
-  }
-
-  ${sx};
-`
-
-export type ButtonPrimaryProps = ComponentProps<typeof ButtonPrimary>
-export default ButtonPrimary

package/src/Button/ButtonStyles.tsx

@@ -1,36 +0,0 @@
-import {css} from 'styled-components'
-import {get} from '../constants'
-
-export default css`
-  position: relative;
-  display: inline-block;
-  padding: 6px 16px;
-  font-family: inherit;
-  font-weight: ${get('fontWeights.bold')};
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-  border-radius: ${get('radii.2')};
-  appearance: none;
-  text-decoration: none;
-  text-align: center;
-
-  &:hover {
-    // needed to override link styles
-    text-decoration: none;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:disabled {
-    cursor: default;
-  }
-
-  &:disabled svg {
-    opacity: 0.6;
-  }
-`

package/src/Button/ButtonTableList.tsx

@@ -1,45 +0,0 @@
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-
-const ButtonTableList = styled.summary<SxProp>`
-  display: inline-block;
-  padding: 0;
-  font-size: ${get('fontSizes.1')};
-  color: ${get('colors.fg.muted')};
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  appearance: none; // Corrects inability to style clickable input types in iOS.
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:disabled {
-    &,
-    &:hover {
-      color: ${get('colors.primer.fg.disabled')};
-      cursor: default;
-    }
-  }
-
-  &:after {
-    display: inline-block;
-    margin-left: ${get('space.1')};
-    width: 0;
-    height: 0;
-    vertical-align: -2px;
-    content: '';
-    border: 4px solid transparent;
-    border-top-color: currentcolor;
-  }
-  ${sx};
-`
-
-export type ButtonTableListProps = ComponentProps<typeof ButtonTableList>
-export default ButtonTableList

package/src/Button/index.ts

@@ -1,16 +0,0 @@
-export {default} from './Button'
-export type {ButtonProps} from './Button'
-export {default as ButtonDanger} from './ButtonDanger'
-export type {ButtonDangerProps} from './ButtonDanger'
-export {default as ButtonGroup} from './ButtonGroup'
-export type {ButtonGroupProps} from './ButtonGroup'
-export {default as ButtonOutline} from './ButtonOutline'
-export type {ButtonOutlineProps} from './ButtonOutline'
-export {default as ButtonPrimary} from './ButtonPrimary'
-export type {ButtonPrimaryProps} from './ButtonPrimary'
-export {default as ButtonInvisible} from './ButtonInvisible'
-export type {ButtonInvisibleProps} from './ButtonInvisible'
-export {default as ButtonTableList} from './ButtonTableList'
-export type {ButtonTableListProps} from './ButtonTableList'
-export {default as ButtonClose} from './ButtonClose'
-export type {ButtonCloseProps} from './ButtonClose'