@primer/components 31.0.1 → 31.0.2-rc.1e80de40

package/src/Pagination/Pagination.tsx

@@ -0,0 +1,214 @@
+import React from 'react'
+import styled from 'styled-components'
+import Box from '../Box'
+import {COMMON, get} from '../constants'
+import sx from '../sx'
+import {buildComponentData, buildPaginationModel} from './model'
+
+const Page = styled.a`
+  display: inline-block;
+  min-width: 32px;
+  padding: 5px 10px;
+  font-style: normal;
+  line-height: 20px;
+  color: ${get('colors.fg.default')};
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+
+  margin-right: ${get('space.1')};
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  border: ${get('borderWidths.1')} solid transparent;
+  border-radius: ${get('radii.2')};
+  transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    border-color: ${get('colors.border.default')};
+    outline: 0;
+    transition-duration: 0.1s;
+  }
+
+  &:active {
+    border-color: ${get('colors.border.muted')};
+  }
+
+  &[rel='prev'],
+  &[rel='next'] {
+    color: ${get('colors.accent.fg')};
+  }
+
+  &[aria-current],
+  &[aria-current]:hover {
+    color: ${get('colors.fg.onEmphasis')};
+    background-color: ${get('colors.accent.emphasis')};
+    border-color: transparent;
+  }
+
+  &[aria-disabled],
+  &[aria-disabled]:hover {
+    color: ${get('colors.primer.fg.disabled')}; // check
+    cursor: default;
+    border-color: transparent;
+  }
+
+  @supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {
+    &[rel='prev']::before,
+    &[rel='next']::after {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      vertical-align: text-bottom;
+      content: '';
+      background-color: currentColor;
+    }
+
+    // chevron-left
+    &[rel='prev']::before {
+      margin-right: ${get('space.1')};
+      clip-path: polygon(
+        9.8px 12.8px,
+        8.7px 12.8px,
+        4.5px 8.5px,
+        4.5px 7.5px,
+        8.7px 3.2px,
+        9.8px 4.3px,
+        6.1px 8px,
+        9.8px 11.7px,
+        9.8px 12.8px
+      );
+    }
+
+    // chevron-right
+    &[rel='next']::after {
+      margin-left: ${get('space.1')};
+      clip-path: polygon(
+        6.2px 3.2px,
+        7.3px 3.2px,
+        11.5px 7.5px,
+        11.5px 8.5px,
+        7.3px 12.8px,
+        6.2px 11.7px,
+        9.9px 8px,
+        6.2px 4.3px,
+        6.2px 3.2px
+      );
+    }
+  }
+
+  ${COMMON};
+`
+
+type UsePaginationPagesParameters = {
+  theme?: Record<string, unknown> // set to theme type once /src/theme.js is converted
+  pageCount: number
+  currentPage: number
+  onPageChange: (e: React.MouseEvent, n: number) => void
+  hrefBuilder: (n: number) => string
+  marginPageCount: number
+  showPages?: boolean
+  surroundingPageCount: number
+}
+
+function usePaginationPages({
+  theme,
+  pageCount,
+  currentPage,
+  onPageChange,
+  hrefBuilder,
+  marginPageCount,
+  showPages,
+  surroundingPageCount
+}: UsePaginationPagesParameters) {
+  const pageChange = React.useCallback(n => (e: React.MouseEvent) => onPageChange(e, n), [onPageChange])
+
+  const model = React.useMemo(() => {
+    return buildPaginationModel(pageCount, currentPage, !!showPages, marginPageCount, surroundingPageCount)
+  }, [pageCount, currentPage, showPages, marginPageCount, surroundingPageCount])
+
+  const children = React.useMemo(() => {
+    return model.map(page => {
+      const {props, key, content} = buildComponentData(page, hrefBuilder, pageChange(page.num))
+      return (
+        <Page {...props} key={key} theme={theme}>
+          {content}
+        </Page>
+      )
+    })
+  }, [model, hrefBuilder, pageChange, theme])
+
+  return children
+}
+
+const PaginationContainer = styled.nav`
+  margin-top: 20px;
+  margin-bottom: 15px;
+  text-align: center;
+  ${sx};
+`
+
+export type PaginationProps = {
+  theme?: Record<string, unknown>
+  pageCount: number
+  currentPage: number
+  onPageChange?: (e: React.MouseEvent, n: number) => void
+  hrefBuilder?: (n: number) => string
+  marginPageCount: number
+  showPages?: boolean
+  surroundingPageCount?: number
+}
+
+function Pagination({
+  theme,
+  pageCount,
+  currentPage,
+  onPageChange = noop,
+  hrefBuilder = defaultHrefBuilder,
+  marginPageCount = 1,
+  showPages = true,
+  surroundingPageCount = 2,
+  ...rest
+}: PaginationProps) {
+  const pageElements = usePaginationPages({
+    theme,
+    pageCount,
+    currentPage,
+    onPageChange,
+    hrefBuilder,
+    marginPageCount,
+    showPages,
+    surroundingPageCount
+  })
+  return (
+    <PaginationContainer aria-label="Pagination" {...rest} theme={theme}>
+      <Box display="inline-block" theme={theme}>
+        {pageElements}
+      </Box>
+    </PaginationContainer>
+  )
+}
+
+function defaultHrefBuilder(pageNum: number) {
+  return `#${pageNum}`
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() {}
+
+Pagination.defaultProps = {
+  hrefBuilder: defaultHrefBuilder,
+  marginPageCount: 1,
+  onPageChange: noop,
+  showPages: true,
+  surroundingPageCount: 2
+}
+
+export default Pagination

package/src/Pagination/index.ts

@@ -0,0 +1,4 @@
+import Pagination from './Pagination'
+
+export type {PaginationProps} from './Pagination'
+export default Pagination

package/src/Pagination/model.tsx

@@ -0,0 +1,187 @@
+export function buildPaginationModel(
+  pageCount: number,
+  currentPage: number,
+  showPages: boolean,
+  marginPageCount: number,
+  surroundingPageCount: number
+) {
+  const pages = []
+
+  if (showPages) {
+    const pageNums: Array<number> = []
+    const addPage = (n: number) => {
+      if (n >= 1 && n <= pageCount) {
+        pageNums.push(n)
+      }
+    }
+
+    // Start by defining the window of pages to show around the current page.
+    // If the window goes off either edge, shift it until it fits.
+    let extentLeft = currentPage - surroundingPageCount
+    let extentRight = currentPage + surroundingPageCount
+    if (extentLeft < 1 && extentRight > pageCount) {
+      // Our window is larger than the entire range,
+      // so simply display every page.
+      extentLeft = 1
+      extentRight = pageCount
+    } else if (extentLeft < 1) {
+      while (extentLeft < 1) {
+        extentLeft++
+        extentRight++
+      }
+    } else if (extentRight > pageCount) {
+      while (extentRight > pageCount) {
+        extentLeft--
+        extentRight--
+      }
+    }
+
+    // Next, include the pages in the margins.
+    // If a margin page is already covered in the window,
+    // extend the window to the other direction.
+    for (let i = 1; i <= marginPageCount; i++) {
+      const leftPage = i
+      const rightPage = pageCount - (i - 1)
+      if (leftPage >= extentLeft) {
+        extentRight++
+      } else {
+        addPage(leftPage)
+      }
+      if (rightPage <= extentRight) {
+        extentLeft--
+      } else {
+        addPage(rightPage)
+      }
+    }
+
+    for (let i = extentLeft; i <= extentRight; i++) {
+      addPage(i)
+    }
+
+    const sorted = pageNums
+      .slice()
+      .sort((a, b) => a - b)
+      .filter((item, idx, ary) => !idx || item !== ary[idx - 1])
+    for (let idx = 0; idx < sorted.length; idx++) {
+      const num = sorted[idx]
+      const selected = num === currentPage
+      if (idx === 0) {
+        if (num !== 1) {
+          // If the first page isn't page one,
+          // we need to add a break
+          pages.push({
+            type: 'BREAK',
+            num: 1
+          })
+        }
+        pages.push({
+          type: 'NUM',
+          num,
+          selected
+        })
+      } else {
+        const last = sorted[idx - 1]
+        const delta = num - last
+        if (delta === 1) {
+          pages.push({
+            type: 'NUM',
+            num,
+            selected
+          })
+        } else {
+          // We skipped some, so add a break
+          pages.push({
+            type: 'BREAK',
+            num: num - 1
+          })
+          pages.push({
+            type: 'NUM',
+            num,
+            selected
+          })
+        }
+      }
+    }
+
+    const lastPage = pages[pages.length - 1]
+    if (lastPage.type === 'NUM' && lastPage.num !== pageCount) {
+      // The last page we rendered wasn't the actual last page,
+      // so we need an additional break
+      pages.push({
+        type: 'BREAK',
+        num: pageCount
+      })
+    }
+  }
+
+  const prev = {type: 'PREV', num: currentPage - 1, disabled: currentPage === 1}
+  const next = {type: 'NEXT', num: currentPage + 1, disabled: currentPage === pageCount}
+  return [prev, ...pages, next]
+}
+
+type PageType = {
+  type: string
+  num: number
+  disabled?: boolean
+  selected?: boolean
+}
+
+export function buildComponentData(
+  page: PageType,
+  hrefBuilder: (n: number) => string,
+  onClick: (e: React.MouseEvent) => void
+) {
+  const props = {}
+  let content = ''
+  let key = ''
+
+  switch (page.type) {
+    case 'PREV': {
+      key = 'page-prev'
+      content = 'Previous'
+      if (page.disabled) {
+        Object.assign(props, {as: 'span', 'aria-disabled': 'true'})
+      } else {
+        Object.assign(props, {
+          rel: 'prev',
+          href: hrefBuilder(page.num),
+          'aria-label': 'Previous Page',
+          onClick
+        })
+      }
+      break
+    }
+    case 'NEXT': {
+      key = 'page-next'
+      content = 'Next'
+      if (page.disabled) {
+        Object.assign(props, {as: 'span', 'aria-disabled': 'true'})
+      } else {
+        Object.assign(props, {
+          rel: 'next',
+          href: hrefBuilder(page.num),
+          'aria-label': 'Next Page',
+          onClick
+        })
+      }
+      break
+    }
+    case 'NUM': {
+      key = `page-${page.num}`
+      content = String(page.num)
+      if (page.selected) {
+        Object.assign(props, {as: 'em', 'aria-current': 'page'})
+      } else {
+        Object.assign(props, {href: hrefBuilder(page.num), 'aria-label': `Page ${page.num}`, onClick})
+      }
+      break
+    }
+    case 'BREAK': {
+      key = `page-${page.num}-break`
+      content = '…'
+      Object.assign(props, {as: 'span', 'aria-disabled': true})
+    }
+  }
+
+  return {props, key, content}
+}

package/src/PointerBox.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import BorderBox, {BorderBoxProps} from './BorderBox'
+import Caret, {CaretProps} from './Caret'
+
+export type PointerBoxProps = {
+  caret?: CaretProps['location']
+  bg?: CaretProps['bg']
+  borderColor?: CaretProps['borderColor']
+  border?: CaretProps['borderWidth']
+} & BorderBoxProps
+
+function PointerBox(props: PointerBoxProps) {
+  // don't destructure these, just grab them
+  const {bg, border, borderColor, theme} = props
+  const {caret, children, ...boxProps} = props
+  const caretProps = {
+    bg,
+    borderColor,
+    borderWidth: border,
+    location: caret,
+    theme
+  }
+  return (
+    <BorderBox sx={{position: 'relative'}} {...boxProps}>
+      {children}
+      <Caret {...caretProps} />
+    </BorderBox>
+  )
+}
+
+export default PointerBox

package/src/Popover.tsx

@@ -0,0 +1,236 @@
+import classnames from 'classnames'
+import styled from 'styled-components'
+import Box from './Box'
+import {COMMON, get, LAYOUT, POSITION, SystemCommonProps, SystemLayoutProps, SystemPositionProps} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+type CaretPosition =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'top-left'
+  | 'top-right'
+  | 'left-bottom'
+  | 'left-top'
+  | 'right-bottom'
+  | 'right-top'
+
+type StyledPopoverProps = {
+  caret?: CaretPosition
+  relative?: boolean
+  open?: boolean
+} & SystemCommonProps &
+  SystemLayoutProps &
+  SystemPositionProps &
+  SxProp
+
+const Popover = styled.div.attrs<StyledPopoverProps>(({className, caret}) => {
+  return {
+    className: classnames(className, `caret-pos--${caret}`)
+  }
+})<StyledPopoverProps>`
+  position: ${props => (props.relative ? 'relative' : 'absolute')};
+  z-index: 100;
+  display: ${props => (props.open ? 'block' : 'none')};
+
+  ${COMMON};
+  ${LAYOUT};
+  ${POSITION};
+  ${sx};
+`
+
+const PopoverContent = styled(Box)`
+  border: 1px solid ${get('colors.border.default')};
+  border-radius: ${get('radii.2')};
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: ${get('space.4')};
+  background-color: ${get('colors.canvas.overlay')};
+
+  ${COMMON};
+  ${LAYOUT};
+
+  // Carets
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: '';
+  }
+
+  &::before {
+    top: -${get('space.3')};
+    margin-left: -9px;
+    border: ${get('space.2')} solid transparent; // TODO: solid?
+    border-bottom-color: ${get('colors.border.default')};
+  }
+
+  &::after {
+    top: -14px;
+    margin-left: -${get('space.2')};
+    border: 7px solid transparent; // todo: solid
+    border-bottom-color: ${get('colors.canvas.overlay')};
+  }
+
+  // Bottom-oriented carets
+  ${Popover}.caret-pos--bottom & ,
+  ${Popover}.caret-pos--bottom-right & ,
+  ${Popover}.caret-pos--bottom-left & {
+    &::before,
+    &::after {
+      top: auto;
+      border-bottom-color: transparent;
+    }
+
+    &::before {
+      bottom: -${get('space.3')};
+      border-top-color: ${get('colors.border.default')};
+    }
+
+    &::after {
+      bottom: -14px;
+      // stylelint-disable-next-line primer/borders
+      border-top-color: ${get('colors.canvas.overlay')};
+    }
+  }
+
+  // Top & Bottom: Right-oriented carets
+  ${Popover}.caret-pos--top-right & ,
+  ${Popover}.caret-pos--bottom-right & {
+    right: -9px;
+    margin-right: 0;
+
+    &::before,
+    &::after {
+      left: auto;
+      margin-left: 0;
+    }
+
+    &::before {
+      right: 20px;
+    }
+
+    &::after {
+      right: 21px;
+    }
+  }
+
+  // Top & Bottom: Left-oriented carets
+  ${Popover}.caret-pos--top-left & ,
+  ${Popover}.caret-pos--bottom-left & {
+    left: -9px;
+    margin-left: 0;
+
+    &::before,
+    &::after {
+      left: ${get('space.4')};
+      margin-left: 0;
+    }
+
+    &::after {
+      left: calc(${get('space.4')} + 1px);
+    }
+  }
+
+  // Right- & Left-oriented carets
+  ${Popover}.caret-pos--right & ,
+  ${Popover}.caret-pos--right-top & ,
+  ${Popover}.caret-pos--right-bottom & ,
+  ${Popover}.caret-pos--left & ,
+  ${Popover}.caret-pos--left-top & ,
+  ${Popover}.caret-pos--left-bottom & {
+    &::before,
+    &::after {
+      top: 50%;
+      left: auto;
+      margin-left: 0;
+      border-bottom-color: transparent;
+    }
+
+    &::before {
+      // stylelint-disable-next-line primer/spacing
+      margin-top: calc((${get('space.2')} + 1px) * -1);
+    }
+
+    &::after {
+      margin-top: -${get('space.2')};
+    }
+  }
+
+  // Right-oriented carets
+  ${Popover}.caret-pos--right & ,
+  ${Popover}.caret-pos--right-top & ,
+  ${Popover}.caret-pos--right-bottom & {
+    &::before {
+      right: -${get('space.3')};
+      border-left-color: ${get('colors.border.default')};
+    }
+
+    &::after {
+      right: -14px;
+      // stylelint-disable-next-line primer/borders
+      border-left-color: ${get('colors.canvas.overlay')};
+    }
+  }
+
+  // Left-oriented carets
+  ${Popover}.caret-pos--left & ,
+  ${Popover}.caret-pos--left-top & ,
+  ${Popover}.caret-pos--left-bottom & {
+    &::before {
+      left: -${get('space.3')};
+      border-right-color: ${get('colors.border.default')};
+    }
+
+    &::after {
+      left: -14px;
+      // stylelint-disable-next-line primer/borders
+      border-right-color: ${get('colors.canvas.overlay')};
+    }
+  }
+
+  // Right & Left: Top-oriented carets
+  ${Popover}.caret-pos--right-top & ,
+  ${Popover}.caret-pos--left-top & {
+    &::before,
+    &::after {
+      top: ${get('space.4')};
+    }
+  }
+
+  // Right & Left: Bottom-oriented carets
+  ${Popover}.caret-pos--right-bottom & ,
+  ${Popover}.caret-pos--left-bottom & {
+    &::before,
+    &::after {
+      top: auto;
+    }
+
+    &::before {
+      bottom: ${get('space.3')};
+    }
+
+    &::after {
+      bottom: calc(${get('space.3')} + 1px);
+    }
+  }
+
+  ${sx};
+`
+
+Popover.defaultProps = {
+  caret: 'top'
+}
+
+PopoverContent.displayName = 'Popover.Content'
+
+export type PopoverProps = ComponentProps<typeof Popover>
+export type PopoverContentProps = ComponentProps<typeof PopoverContent>
+export default Object.assign(Popover, {Content: PopoverContent})