@primer/components 32.1.0 → 33.0.0-rc.b3e4ccee

package/src/Flash.tsx

@@ -0,0 +1,75 @@
+import styled from 'styled-components'
+import {variant} from 'styled-system'
+import {get} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const variants = variant({
+  variants: {
+    default: {
+      color: 'fg.default',
+      backgroundColor: 'accent.subtle',
+      borderColor: 'accent.muted',
+      svg: {
+        color: 'accent.fg'
+      }
+    },
+    success: {
+      color: 'fg.default',
+      backgroundColor: 'success.subtle',
+      borderColor: 'success.muted',
+      svg: {
+        color: 'success.fg'
+      }
+    },
+    danger: {
+      color: 'fg.default',
+      backgroundColor: 'danger.subtle',
+      borderColor: 'danger.muted',
+      svg: {
+        color: 'danger.fg'
+      }
+    },
+    warning: {
+      color: 'fg.default',
+      backgroundColor: 'attention.subtle',
+      borderColor: 'attention.muted',
+      svg: {
+        color: 'attention.fg'
+      }
+    }
+  }
+})
+
+const Flash = styled.div<
+  {
+    variant?: 'default' | 'warning' | 'success' | 'danger'
+    full?: boolean
+  } & SxProp
+>`
+  position: relative;
+  color: ${get('colors.fg.default')};
+  padding: ${get('space.3')};
+  border-style: solid;
+  border-width: ${props => (props.full ? '1px 0px' : '1px')};
+  border-radius: ${props => (props.full ? '0' : get('radii.2'))};
+  margin-top: ${props => (props.full ? '-1px' : '0')};
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  svg {
+    margin-right: ${get('space.2')};
+  }
+
+  ${variants};
+  ${sx};
+`
+
+Flash.defaultProps = {
+  variant: 'default'
+}
+
+export type FlashProps = ComponentProps<typeof Flash>
+export default Flash

package/src/Flex.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+import Box, {BoxProps} from './Box'
+
+export type FlexProps = BoxProps
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Flex> → <Box display="flex">)
+ */
+const Flex = styled(Box)``
+
+Flex.defaultProps = {
+  display: 'flex'
+}
+
+export default Flex

package/src/FormGroup.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+import {get} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const FormGroup = styled.div<SxProp>`
+  margin: ${get('space.3')} 0;
+  font-weight: ${get('fontWeights.normal')};
+  ${sx};
+`
+
+const FormGroupLabel = styled.label<SxProp>`
+  display: block;
+  margin: 0 0 ${get('space.2')};
+  font-size: ${get('fontSizes.1')};
+  font-weight: ${get('fontWeights.bold')};
+  ${sx};
+`
+
+FormGroupLabel.displayName = 'FormGroup.Label'
+
+export type FormGroupProps = ComponentProps<typeof FormGroup>
+export type FormGroupLabelProps = ComponentProps<typeof FormGroupLabel>
+export default Object.assign(FormGroup, {Label: FormGroupLabel})

package/src/Grid.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+import Box, {BoxProps} from './Box'
+
+export type GridProps = BoxProps
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Grid> → <Box display="grid">)
+ */
+const Grid = styled(Box)``
+
+Grid.defaultProps = {
+  display: 'grid'
+}
+
+export default Grid

package/src/Header.tsx

@@ -0,0 +1,74 @@
+// eslint-disable-next-line import/no-namespace
+import * as History from 'history'
+import styled, {css} from 'styled-components'
+import {get} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+type StyledHeaderItemProps = {full?: boolean} & SxProp
+type StyledHeaderProps = SxProp
+type StyledHeaderLinkProps = {to?: History.LocationDescriptor} & SxProp
+
+const Header = styled.div<StyledHeaderProps>`
+  z-index: 32;
+  display: flex;
+  padding: ${get('space.3')};
+  font-size: ${get('fontSizes.1')};
+  line-height: ${get('lineHeights.default')};
+  color: ${get('colors.header.text')};
+  background-color: ${get('colors.header.bg')};
+  align-items: center;
+  flex-wrap: nowrap;
+
+  ${sx};
+`
+const HeaderItem = styled.div<StyledHeaderItemProps>`
+  display: flex;
+  margin-right: ${get('space.3')};
+  align-self: stretch;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  ${({full}) =>
+    full &&
+    css`
+      flex: auto;
+    `};
+
+  ${sx};
+`
+
+HeaderItem.displayName = 'Header.Item'
+
+const HeaderLink = styled.a.attrs<StyledHeaderLinkProps>(({to}) => {
+  const isReactRouter = typeof to === 'string'
+  if (isReactRouter) {
+    // 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 {}
+  }
+})<StyledHeaderLinkProps>`
+  font-weight: ${get('fontWeights.bold')};
+  color: ${get('colors.header.logo')};
+  white-space: nowrap;
+  cursor: pointer;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+
+  &:hover,
+  &:focus {
+    color: ${get('colors.header.text')};
+  }
+
+  ${sx};
+`
+
+HeaderLink.displayName = 'Header.Link'
+
+export type HeaderProps = ComponentProps<typeof Header>
+export type HeaderLinkProps = ComponentProps<typeof HeaderLink>
+export type HeaderItemProps = ComponentProps<typeof HeaderItem>
+export default Object.assign(Header, {Link: HeaderLink, Item: HeaderItem})

package/src/Heading.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+import {get} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const Heading = styled.h2<SxProp>`
+  font-weight: ${get('fontWeights.bold')};
+  font-size: ${get('fontSizes.5')};
+  margin: 0;
+  ${sx};
+`
+
+export type HeadingProps = ComponentProps<typeof Heading>
+export default Heading

package/src/Label.tsx

@@ -0,0 +1,72 @@
+import styled, {css} from 'styled-components'
+import {borderColor, BorderColorProps, variant} from 'styled-system'
+import {get} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const outlineStyles = css`
+  margin-top: -1px; // offsets the 1px border
+  margin-bottom: -1px; // offsets the 1px border
+  color: ${get('colors.fg.muted')};
+  border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
+  box-shadow: none;
+  ${borderColor};
+  background-color: transparent;
+`
+
+const sizeVariant = variant({
+  variants: {
+    small: {
+      fontSize: 0,
+      lineHeight: '16px',
+      padding: '0px 8px'
+    },
+    medium: {
+      fontSize: 0,
+      lineHeight: '20px',
+      padding: '0 8px'
+    },
+    large: {
+      fontSize: 0,
+      lineHeight: '24px',
+      padding: '0 12px'
+    },
+    // corresponds to StateLabel fontSize/lineHeight/padding
+    xl: {
+      fontSize: 1,
+      lineHeight: '16px',
+      padding: '8px 12px'
+    }
+  }
+})
+
+const Label = styled.span<
+  {
+    variant?: 'small' | 'medium' | 'large' | 'xl'
+    dropshadow?: boolean
+    outline?: boolean
+  } & BorderColorProps &
+    SxProp
+>`
+  display: inline-block;
+  font-weight: ${get('fontWeights.semibold')};
+  color: ${get('colors.fg.onEmphasis')};
+  border-radius: ${get('radii.3')};
+  background-color: ${get('colors.neutral.emphasis')};
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  ${sizeVariant}
+  ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')}
+  ${props => (props.outline ? outlineStyles : '')} // must be last to override other values
+  ${sx}
+`
+
+Label.defaultProps = {
+  variant: 'medium'
+}
+
+export type LabelProps = ComponentProps<typeof Label>
+export default Label

package/src/LabelGroup.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+import {get} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const LabelGroup = styled.span<SxProp>`
+  & * {
+    margin-right: ${get('space.1')};
+  }
+  & *:last-child {
+    margin-right: 0;
+  }
+  ${sx};
+`
+
+export type LabelGroupProps = ComponentProps<typeof LabelGroup>
+export default LabelGroup

package/src/Link.tsx

@@ -0,0 +1,42 @@
+import styled from 'styled-components'
+import {system} from 'styled-system'
+import {get} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+type StyledLinkProps = {
+  hoverColor?: string
+  muted?: boolean
+  underline?: boolean
+} & SxProp
+
+const hoverColor = system({
+  hoverColor: {
+    property: 'color',
+    scale: 'colors'
+  }
+})
+
+const Link = styled.a<StyledLinkProps>`
+  color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
+  text-decoration: ${props => (props.underline ? 'underline' : 'none')};
+  &:hover {
+    text-decoration: ${props => (props.muted ? 'none' : 'underline')};
+    ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
+  }
+  &:is(button) {
+    display: inline-block;
+    padding: 0;
+    font-size: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border: 0;
+    appearance: none;
+  }
+  ${sx};
+`
+
+export type LinkProps = ComponentProps<typeof Link>
+export default Link

package/src/NewButton/button-counter.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {SxProp} from '../sx'
+import CounterLabel from '../CounterLabel'
+
+export type CounterProps = {
+  children: number
+} & SxProp
+
+export const Counter = ({children, sx: sxProp = {}, ...props}: CounterProps) => {
+  return (
+    <CounterLabel data-component="ButtonCounter" sx={{ml: 2, ...sxProp}} {...props}>
+      {children}
+    </CounterLabel>
+  )
+}

package/src/NewButton/button.tsx

@@ -0,0 +1,283 @@
+import React, {forwardRef} from 'react'
+import Box from '../Box'
+import styled from 'styled-components'
+import sx, {merge, SxProp} from '../sx'
+import {useTheme, Theme} from '../ThemeProvider'
+import {VariantType, ButtonProps} from './types'
+
+const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
+
+const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => {
+  const style = {
+    default: {
+      color: 'btn.text',
+      backgroundColor: 'btn.bg',
+      boxShadow: `${theme?.shadows.btn.shadow}, ${theme?.shadows.btn.insetShadow}`,
+      '&:hover:not([disabled])': {
+        backgroundColor: 'btn.hoverBg'
+      },
+      // focus must come before :active so that the active box shadow overrides
+      '&:focus:not([disabled])': {
+        boxShadow: `${theme?.shadows.btn.focusShadow}`
+      },
+      '&:active:not([disabled])': {
+        backgroundColor: 'btn.selectedBg',
+        boxShadow: `${theme?.shadows.btn.shadowActive}`
+      },
+      '&:disabled': {
+        color: 'primer.fg.disabled',
+        backgroundColor: 'btn.disabledBg'
+      }
+    },
+    primary: {
+      color: 'btn.primary.text',
+      backgroundColor: 'btn.primary.bg',
+      borderColor: 'border.subtle',
+      boxShadow: `${theme?.shadows.btn.primary.shadow}`,
+      '&:hover:not([disabled])': {
+        color: 'btn.primary.hoverText',
+        backgroundColor: 'btn.primary.hoverBg'
+      },
+      // focus must come before :active so that the active box shadow overrides
+      '&:focus:not([disabled])': {
+        boxShadow: `${theme?.shadows.btn.primary.focusShadow}`
+      },
+      '&:active:not([disabled])': {
+        backgroundColor: 'btn.primary.selectedBg',
+        boxShadow: `${theme?.shadows.btn.primary.selectedShadow}`
+      },
+      '&:disabled': {
+        color: 'btn.primary.disabledText',
+        backgroundColor: 'btn.primary.disabledBg'
+      },
+      '[data-component="ButtonCounter"]': {
+        backgroundColor: 'btn.primary.counterBg',
+        color: 'btn.primary.text'
+      }
+    },
+    danger: {
+      color: 'btn.danger.text',
+      backgroundColor: 'btn.bg',
+      boxShadow: `${theme?.shadows.btn.shadow}`,
+      '&:hover:not([disabled])': {
+        color: 'btn.danger.hoverText',
+        backgroundColor: 'btn.danger.hoverBg',
+        borderColor: 'btn.danger.hoverBorder',
+        boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`,
+        '[data-component="ButtonCounter"]': {
+          backgroundColor: 'btn.danger.hoverCounterBg',
+          color: 'btn.danger.hoverText'
+        }
+      },
+      // focus must come before :active so that the active box shadow overrides
+      '&:focus:not([disabled])': {
+        borderColor: 'btn.danger.focusBorder',
+        boxShadow: `${theme?.shadows.btn.danger.focusShadow}`
+      },
+      '&:active:not([disabled])': {
+        color: 'btn.danger.selectedText',
+        backgroundColor: 'btn.danger.selectedBg',
+        boxShadow: `${theme?.shadows.btn.danger.selectedShadow}`,
+        borderColor: 'btn.danger.selectedBorder'
+      },
+      '&:disabled': {
+        color: 'btn.danger.disabledText',
+        backgroundColor: 'btn.danger.disabledBg',
+        borderColor: 'btn.danger.disabledBorder',
+        '[data-component="ButtonCounter"]': {
+          backgroundColor: 'btn.danger.disabledCounterBg'
+        }
+      },
+      '[data-component="ButtonCounter"]': {
+        color: 'btn.danger.text',
+        backgroundColor: 'btn.danger.counterBg'
+      }
+    },
+    invisible: {
+      color: 'accent.fg',
+      backgroundColor: 'transparent',
+      border: '0',
+      boxShadow: 'none',
+      '&:hover:not([disabled])': {
+        backgroundColor: 'btn.hoverBg'
+      },
+      // focus must come before :active so that the active box shadow overrides
+      '&:focus:not([disabled])': {
+        boxShadow: `${theme?.shadows.btn.focusShadow}`
+      },
+      '&:active:not([disabled])': {
+        backgroundColor: 'btn.selectedBg'
+      },
+      '&:disabled': {
+        color: 'primer.fg.disabled'
+      }
+    },
+    outline: {
+      color: 'btn.outline.text',
+      boxShadow: `${theme?.shadows.btn.shadow}`,
+
+      '&:hover': {
+        color: 'btn.outline.hoverText',
+        backgroundColor: 'btn.outline.hoverBg',
+        borderColor: 'outline.hoverBorder',
+        boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
+        '[data-component="ButtonCounter"]': {
+          backgroundColor: 'btn.outline.hoverCounterBg',
+          color: 'btn.outline.hoverText'
+        }
+      },
+      // focus must come before :active so that the active box shadow overrides
+      '&:focus': {
+        borderColor: 'btn.outline.focusBorder',
+        boxShadow: `${theme?.shadows.btn.outline.focusShadow}`
+      },
+
+      '&:active:not([disabled])': {
+        color: 'btn.outline.selectedText',
+        backgroundColor: 'btn.outline.selectedBg',
+        boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`,
+        borderColor: 'btn.outline.selectedBorder'
+      },
+
+      '&:disabled': {
+        color: 'btn.outline.disabledText',
+        backgroundColor: 'btn.outline.disabledBg',
+        borderColor: 'btn.border',
+        '[data-component="ButtonCounter"]': {
+          backgroundColor: 'btn.outline.disabledCounterBg'
+        }
+      },
+      '[data-component="ButtonCounter"]': {
+        backgroundColor: 'btn.outline.counterBg',
+        color: 'btn.outline.text'
+      }
+    }
+  }
+  return style[variant]
+}
+
+const getSizeStyles = (size = 'medium', variant: VariantType = 'default', iconOnly: boolean) => {
+  let paddingY, paddingX, fontSize
+  switch (size) {
+    case 'small':
+      paddingY = 3
+      paddingX = 12
+      fontSize = 0
+      break
+    case 'large':
+      paddingY = 9
+      paddingX = 20
+      fontSize = 2
+      break
+    case 'medium':
+    default:
+      paddingY = 5
+      paddingX = 16
+      fontSize = 1
+  }
+  if (iconOnly) {
+    paddingX = paddingY + 2
+  }
+  if (variant === 'invisible') {
+    paddingY = paddingY + 1
+  }
+  return {
+    paddingY: `${paddingY}px`,
+    paddingX: `${paddingX}px`,
+    fontSize,
+    '[data-component="ButtonCounter"]': {
+      fontSize
+    }
+  }
+}
+
+const ButtonBase = styled.button<SxProp>(sx)
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({children, sx: sxProp = {}, ...props}, forwardedRef): JSX.Element => {
+    const {
+      icon: Icon,
+      leadingIcon: LeadingIcon,
+      trailingIcon: TrailingIcon,
+      variant = 'default',
+      size = 'medium'
+    } = props
+    const iconOnly = !!Icon
+    const {theme} = useTheme()
+
+    const styles = {
+      borderRadius: '2',
+      border: '1px solid',
+      borderColor: theme?.colors.btn.border,
+      display: 'grid',
+      gridTemplateAreas: '"leadingIcon text trailingIcon"',
+      fontWeight: 'bold',
+      lineHeight: TEXT_ROW_HEIGHT,
+      whiteSpace: 'nowrap',
+      verticalAlign: 'middle',
+      cursor: 'pointer',
+      appearance: 'none',
+      userSelect: 'none',
+      textDecoration: 'none',
+      textAlign: 'center',
+      '& > :not(:last-child)': {
+        mr: '2'
+      },
+      '&:focus': {
+        outline: 'none'
+      },
+      '&:disabled': {
+        cursor: 'default'
+      },
+      '&:disabled svg': {
+        opacity: '0.6'
+      },
+      '[data-component="leadingIcon"]': {
+        gridArea: 'leadingIcon'
+      },
+      '[data-component="text"]': {
+        gridArea: 'text'
+      },
+      '[data-component="trailingIcon"]': {
+        gridArea: 'trailingIcon'
+      }
+    }
+    const iconWrapStyles = {
+      display: 'inline-block'
+    }
+    const sxStyles = merge.all([
+      styles,
+      getSizeStyles(size, variant, iconOnly),
+      getVariantStyles(variant, theme),
+      sxProp as SxProp
+    ])
+    return (
+      <ButtonBase sx={sxStyles} ref={forwardedRef} {...props}>
+        {LeadingIcon && (
+          <Box as="span" data-component="leadingIcon" sx={iconWrapStyles} aria-hidden={!iconOnly}>
+            <LeadingIcon />
+          </Box>
+        )}
+        <span data-component="text" hidden={Icon ? true : false}>
+          {children}
+        </span>
+        {Icon && (
+          <Box data-component="icon-only" as="span" sx={{display: 'inline-block'}} aria-hidden={!iconOnly}>
+            <Icon />
+          </Box>
+        )}
+        {TrailingIcon && (
+          <Box as="span" data-component="trailingIcon" sx={{...iconWrapStyles, ml: 2}} aria-hidden={!iconOnly}>
+            <TrailingIcon />
+          </Box>
+        )}
+      </ButtonBase>
+    )
+  }
+)
+
+Button.displayName = 'Button'
+
+Object.assign(Button, {})
+
+export {Button}

package/src/NewButton/index.ts

@@ -0,0 +1,10 @@
+import {Button} from './button'
+import {Counter} from './button-counter'
+import {ButtonProps} from './types'
+// change this when moving to released state
+
+export type {ButtonProps as NewButtonProps}
+
+export const NewButton = Object.assign(Button, {
+  Counter
+})