@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/SideNav.tsx

@@ -0,0 +1,193 @@
+// 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

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

@@ -0,0 +1,110 @@
+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: 'prState.closed.bg',
+      color: 'prState.closed.text',
+      borderColor: 'prState.closed.border'
+    },
+    pullClosed: {
+      backgroundColor: 'prState.closed.bg',
+      color: 'prState.closed.text',
+      borderColor: 'prState.closed.border'
+    },
+    pullMerged: {
+      backgroundColor: 'prState.merged.bg',
+      color: 'prState.merged.text',
+      borderColor: 'prState.merged.border'
+    },
+    issueOpened: {
+      backgroundColor: 'prState.open.bg',
+      color: 'prState.open.text',
+      borderColor: 'prState.open.border'
+    },
+    pullOpened: {
+      backgroundColor: 'prState.open.bg',
+      color: 'prState.open.text',
+      borderColor: 'prState.open.border'
+    },
+    draft: {
+      backgroundColor: 'prState.draft.bg',
+      color: 'prState.draft.text',
+      borderColor: 'prState.draft.border'
+    }
+  }
+})
+
+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')};
+  border-width: 1px;
+  border-style: solid;
+  ${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

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

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

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

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