@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/Flash.tsx

@@ -0,0 +1,77 @@
+import styled from 'styled-components'
+import {variant} from 'styled-system'
+import {COMMON, get, SystemCommonProps} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const variants = variant({
+  variants: {
+    default: {
+      color: 'alert.info.text',
+      backgroundColor: 'alert.info.bg',
+      borderColor: 'alert.info.border',
+      svg: {
+        color: 'alert.info.icon'
+      }
+    },
+    success: {
+      color: 'alert.success.text',
+      backgroundColor: 'alert.success.bg',
+      borderColor: 'alert.success.border',
+      svg: {
+        color: 'alert.success.icon'
+      }
+    },
+    danger: {
+      color: 'alert.error.text',
+      backgroundColor: 'alert.error.bg',
+      borderColor: 'alert.error.border',
+      svg: {
+        color: 'alert.error.icon'
+      }
+    },
+    warning: {
+      color: 'alert.warn.text',
+      backgroundColor: 'alert.warn.bg',
+      borderColor: 'alert.warn.border',
+      svg: {
+        color: 'alert.warn.icon'
+      }
+    }
+  }
+})
+
+const Flash = styled.div<
+  {
+    variant?: 'default' | 'warning' | 'success' | 'danger'
+    full?: boolean
+  } & SystemCommonProps &
+    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')};
+  }
+
+  ${COMMON};
+  ${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,27 @@
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const FormGroup = styled.div<SystemCommonProps & SxProp>`
+  margin: ${get('space.3')} 0;
+  font-weight: ${get('fontWeights.normal')};
+  ${COMMON};
+  ${sx};
+`
+
+const FormGroupLabel = styled.label<SystemTypographyProps & SystemCommonProps & SxProp>`
+  display: block;
+  margin: 0 0 ${get('space.2')};
+  font-size: ${get('fontSizes.1')};
+  font-weight: ${get('fontWeights.bold')};
+  ${TYPOGRAPHY};
+  ${COMMON};
+  ${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,84 @@
+// eslint-disable-next-line import/no-namespace
+import * as History from 'history'
+import styled, {css} from 'styled-components'
+import {BORDER, COMMON, get, SystemBorderProps, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+type StyledHeaderItemProps = {full?: boolean} & SystemCommonProps & SxProp
+type StyledHeaderProps = SystemBorderProps & SystemCommonProps & SxProp
+type StyledHeaderLinkProps = {to?: History.LocationDescriptor} & SystemCommonProps &
+  SxProp &
+  SystemTypographyProps &
+  SystemBorderProps
+
+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;
+
+  ${COMMON}
+  ${BORDER}
+  ${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;
+    `};
+
+  ${COMMON};
+  ${BORDER};
+  ${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')};
+  }
+
+  ${COMMON};
+  ${BORDER};
+  ${TYPOGRAPHY};
+  ${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,21 @@
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import sx, {SxProp} from './sx'
+import theme from './theme'
+import {ComponentProps} from './utils/types'
+
+const Heading = styled.h2<SystemTypographyProps & SystemCommonProps & SxProp>`
+  font-weight: ${get('fontWeights.bold')};
+  font-size: ${get('fontSizes.5')};
+  margin: 0;
+  ${TYPOGRAPHY};
+  ${COMMON};
+  ${sx};
+`
+
+Heading.defaultProps = {
+  theme
+}
+
+export type HeadingProps = ComponentProps<typeof Heading>
+export default Heading

package/src/Label.tsx

@@ -0,0 +1,75 @@
+import styled, {css} from 'styled-components'
+import {borderColor, BorderColorProps, variant} from 'styled-system'
+import {COMMON, get, SystemCommonProps} 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};
+  ${COMMON};
+  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 &
+    SystemCommonProps &
+    SxProp
+>`
+  display: inline-block;
+  font-weight: ${get('fontWeights.semibold')};
+  color: ${get('colors.fg.onEmphasis')};
+  border-radius: ${get('radii.3')};
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  ${sizeVariant}
+  ${COMMON}
+  ${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 = {
+  bg: 'label.primary.border',
+  variant: 'medium'
+}
+
+export type LabelProps = ComponentProps<typeof Label>
+export default Label

package/src/LabelGroup.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const LabelGroup = styled.span<SystemCommonProps & SxProp>`
+  ${COMMON}
+  & * {
+    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,46 @@
+import styled from 'styled-components'
+import {system} from 'styled-system'
+import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+type StyledLinkProps = {
+  hoverColor?: string
+  muted?: boolean
+  underline?: boolean
+} & SystemCommonProps &
+  SxProp &
+  SystemTypographyProps
+
+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;
+  }
+  ${TYPOGRAPHY};
+  ${COMMON};
+  ${sx};
+`
+
+export type LinkProps = ComponentProps<typeof Link>
+export default Link

package/src/Overlay.tsx

@@ -0,0 +1,194 @@
+import styled from 'styled-components'
+import React, {ReactElement, useEffect, useLayoutEffect, useRef} from 'react'
+import {get, COMMON, SystemPositionProps, SystemCommonProps} from './constants'
+import {ComponentProps} from './utils/types'
+import {useOverlay, TouchOrMouseEvent} from './hooks'
+import Portal from './Portal'
+import sx, {SxProp} from './sx'
+import {useCombinedRefs} from './hooks/useCombinedRefs'
+import {AnchorSide} from './behaviors/anchoredPosition'
+import {useTheme} from './ThemeProvider'
+
+type StyledOverlayProps = {
+  width?: keyof typeof widthMap
+  height?: keyof typeof heightMap
+  maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>
+  visibility?: 'visible' | 'hidden'
+  anchorSide?: AnchorSide
+}
+
+const heightMap = {
+  xsmall: '192px',
+  small: '256px',
+  medium: '320px',
+  large: '432px',
+  xlarge: '600px',
+  auto: 'auto',
+  initial: 'auto' // Passing 'initial' initially applies 'auto'
+}
+
+const widthMap = {
+  small: '256px',
+  medium: '320px',
+  large: '480px',
+  xlarge: '640px',
+  xxlarge: '960px',
+  auto: 'auto'
+}
+const animationDuration = 200
+
+function getSlideAnimationStartingVector(anchorSide?: AnchorSide): {x: number; y: number} {
+  if (anchorSide?.endsWith('bottom')) {
+    return {x: 0, y: -1}
+  } else if (anchorSide?.endsWith('top')) {
+    return {x: 0, y: 1}
+  } else if (anchorSide?.endsWith('right')) {
+    return {x: -1, y: 0}
+  } else if (anchorSide?.endsWith('left')) {
+    return {x: 1, y: 0}
+  }
+
+  return {x: 0, y: 0}
+}
+
+const StyledOverlay = styled.div<StyledOverlayProps & SystemCommonProps & SxProp>`
+  background-color: ${get('colors.canvas.overlay')};
+  box-shadow: ${get('shadows.overlay.shadow')};
+  position: absolute;
+  min-width: 192px;
+  max-width: 640px;
+  height: ${props => heightMap[props.height || 'auto']};
+  max-height: ${props => props.maxHeight && heightMap[props.maxHeight]};
+  width: ${props => widthMap[props.width || 'auto']};
+  border-radius: 12px;
+  overflow: hidden;
+  animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')};
+
+  @keyframes overlay-appear {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  visibility: var(--styled-overlay-visibility);
+  :focus {
+    outline: none;
+  }
+  ${COMMON};
+  ${sx};
+`
+export type OverlayProps = {
+  ignoreClickRefs?: React.RefObject<HTMLElement>[]
+  initialFocusRef?: React.RefObject<HTMLElement>
+  returnFocusRef: React.RefObject<HTMLElement>
+  onClickOutside: (e: TouchOrMouseEvent) => void
+  onEscape: (e: KeyboardEvent) => void
+  visibility?: 'visible' | 'hidden'
+  [additionalKey: string]: unknown
+  top: number
+  left: number
+  portalContainerName?: string
+} & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>
+
+/**
+ * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
+ * selection options, dialogs, and more. Overlays use shadows to express elevation. The `Overlay`
+ * component handles all behaviors needed by overlay UIs as well as the common styles that all overlays * should have.
+ * @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
+ * @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.
+ * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
+ * @param onClickOutside  Required. Function to call when clicking outside of the `Overlay`. Typically this function removes the Overlay.
+ * @param onEscape Required. Function to call when user presses `Escape`. Typically this function removes the Overlay.
+ * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
+ * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
+ * @param maxHeight Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
+ * @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
+ * @param top Optional. Vertical position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param left Optional. Horizontal position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
+ */
+const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
+  (
+    {
+      onClickOutside,
+      role = 'none',
+      initialFocusRef,
+      returnFocusRef,
+      ignoreClickRefs,
+      onEscape,
+      visibility = 'visible',
+      height,
+      top,
+      left,
+      anchorSide,
+      portalContainerName,
+      ...rest
+    },
+    forwardedRef
+  ): ReactElement => {
+    const overlayRef = useRef<HTMLDivElement>(null)
+    const combinedRef = useCombinedRefs(overlayRef, forwardedRef)
+    const {theme} = useTheme()
+    const slideAnimationDistance = parseInt(get('space.2')(theme).replace('px', ''))
+    const slideAnimationEasing = get('animation.easeOutCubic')(theme)
+
+    useOverlay({
+      overlayRef,
+      returnFocusRef,
+      onEscape,
+      ignoreClickRefs,
+      onClickOutside,
+      initialFocusRef
+    })
+
+    useEffect(() => {
+      if (height === 'initial' && combinedRef.current?.clientHeight) {
+        combinedRef.current.style.height = `${combinedRef.current.clientHeight}px`
+      }
+    }, [height, combinedRef])
+
+    useLayoutEffect(() => {
+      const {x, y} = getSlideAnimationStartingVector(anchorSide)
+      if ((!x && !y) || !overlayRef.current?.animate || visibility === 'hidden') {
+        return
+      }
+
+      // JS animation is required because Safari does not allow css animations to start paused and then run
+      overlayRef.current.animate(
+        {transform: [`translate(${slideAnimationDistance * x}px, ${slideAnimationDistance * y}px)`, `translate(0, 0)`]},
+        {
+          duration: animationDuration,
+          easing: slideAnimationEasing
+        }
+      )
+    }, [anchorSide, slideAnimationDistance, slideAnimationEasing, visibility])
+
+    return (
+      <Portal containerName={portalContainerName}>
+        <StyledOverlay
+          height={height}
+          role={role}
+          {...rest}
+          ref={combinedRef}
+          style={
+            {
+              top: `${top || 0}px`,
+              left: `${left || 0}px`,
+              ...rest.style,
+              '--styled-overlay-visibility': visibility
+            } as React.CSSProperties
+          }
+        />
+      </Portal>
+    )
+  }
+)
+
+Overlay.defaultProps = {
+  height: 'auto',
+  width: 'auto'
+}
+
+export default Overlay

package/src/Pagehead.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const Pagehead = styled.div<SystemCommonProps & SxProp>`
+  position: relative;
+  padding-top: ${get('space.4')};
+  padding-bottom: ${get('space.4')};
+  margin-bottom: ${get('space.4')};
+  border-bottom: 1px solid ${get('colors.border.default')};
+  ${COMMON};
+  ${sx};
+`
+
+export type PageheadProps = ComponentProps<typeof Pagehead>
+export default Pagehead