@primer/components 29.1.0-rc.79e8b21e → 29.1.0

package/src/Tooltip.tsx

@@ -1,263 +0,0 @@
-import classnames from 'classnames'
-import React from 'react'
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const TooltipBase = styled.span<SystemCommonProps & SxProp>`
-  position: relative;
-
-  &::before {
-    position: absolute;
-    z-index: 1000001;
-    display: none;
-    width: 0px;
-    height: 0px;
-    color: ${get('colors.neutral.emphasisPlus')};
-    pointer-events: none;
-    content: '';
-    border: 6px solid transparent;
-    opacity: 0;
-  }
-
-  &::after {
-    position: absolute;
-    z-index: 1000000;
-    display: none;
-    padding: 0.5em 0.75em;
-    font: normal normal 11px/1.5 ${get('fonts.normal')};
-    -webkit-font-smoothing: subpixel-antialiased;
-    color: ${get('colors.fg.onEmphasis')};
-    text-align: center;
-    text-decoration: none;
-    text-shadow: none;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: break-word;
-    white-space: pre;
-    pointer-events: none;
-    content: attr(aria-label);
-    background: ${get('colors.neutral.emphasisPlus')};
-    border-radius: ${get('radii.1')};
-    opacity: 0;
-  }
-
-  // delay animation for tooltip
-  @keyframes tooltip-appear {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  &:hover,
-  &:active,
-  &:focus {
-    &::before,
-    &::after {
-      display: inline-block;
-      text-decoration: none;
-      animation-name: tooltip-appear;
-      animation-duration: 0.1s;
-      animation-fill-mode: forwards;
-      animation-timing-function: ease-in;
-      animation-delay: 0.4s;
-    }
-  }
-
-  &.tooltipped-no-delay:hover,
-  &.tooltipped-no-delay:active,
-  &.tooltipped-no-delay:focus {
-    &::before,
-    &::after {
-      animation-delay: 0s;
-    }
-  }
-
-  &.tooltipped-multiline:hover,
-  &.tooltipped-multiline:active,
-  &.tooltipped-multiline:focus {
-    &::after {
-      display: table-cell;
-    }
-  }
-
-  // Tooltipped south
-  &.tooltipped-s,
-  &.tooltipped-se,
-  &.tooltipped-sw {
-    &::after {
-      top: 100%;
-      right: 50%;
-      margin-top: 6px;
-    }
-
-    &::before {
-      top: auto;
-      right: 50%;
-      bottom: -7px;
-      margin-right: -6px;
-      border-bottom-color: ${get('colors.neutral.emphasisPlus')};
-    }
-  }
-
-  &.tooltipped-se {
-    &::after {
-      right: auto;
-      left: 50%;
-      margin-left: -${get('space.3')};
-    }
-  }
-
-  &.tooltipped-sw::after {
-    margin-right: -${get('space.3')};
-  }
-
-  // Tooltips above the object
-  &.tooltipped-n,
-  &.tooltipped-ne,
-  &.tooltipped-nw {
-    &::after {
-      right: 50%;
-      bottom: 100%;
-      margin-bottom: 6px;
-    }
-
-    &::before {
-      top: -7px;
-      right: 50%;
-      bottom: auto;
-      margin-right: -6px;
-      border-top-color: ${get('colors.neutral.emphasisPlus')};
-    }
-  }
-
-  &.tooltipped-ne {
-    &::after {
-      right: auto;
-      left: 50%;
-      margin-left: -${get('space.3')};
-    }
-  }
-
-  &.tooltipped-nw::after {
-    margin-right: -${get('space.3')};
-  }
-
-  // Move the tooltip body to the center of the object.
-  &.tooltipped-s::after,
-  &.tooltipped-n::after {
-    transform: translateX(50%);
-  }
-
-  // Tooltipped to the left
-  &.tooltipped-w {
-    &::after {
-      right: 100%;
-      bottom: 50%;
-      margin-right: 6px;
-      transform: translateY(50%);
-    }
-
-    &::before {
-      top: 50%;
-      bottom: 50%;
-      left: -7px;
-      margin-top: -6px;
-      border-left-color: ${get('colors.neutral.emphasisPlus')};
-    }
-  }
-
-  // tooltipped to the right
-  &.tooltipped-e {
-    &::after {
-      bottom: 50%;
-      left: 100%;
-      margin-left: 6px;
-      transform: translateY(50%);
-    }
-
-    &::before {
-      top: 50%;
-      right: -7px;
-      bottom: 50%;
-      margin-top: -6px;
-      border-right-color: ${get('colors.neutral.emphasisPlus')};
-    }
-  }
-
-  &.tooltipped-multiline {
-    &::after {
-      width: max-content;
-      max-width: 250px;
-      word-wrap: break-word;
-      white-space: pre-line;
-      border-collapse: separate;
-    }
-
-    &.tooltipped-s::after,
-    &.tooltipped-n::after {
-      right: auto;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &.tooltipped-w::after,
-    &.tooltipped-e::after {
-      right: 100%;
-    }
-  }
-
-  &.tooltipped-align-right-2::after {
-    right: 0;
-    margin-right: 0;
-  }
-
-  &.tooltipped-align-right-2::before {
-    right: 15px;
-  }
-
-  &.tooltipped-align-left-2::after {
-    left: 0;
-    margin-left: 0;
-  }
-
-  &.tooltipped-align-left-2::before {
-    left: 10px;
-  }
-  ${COMMON};
-  ${sx};
-`
-
-export type TooltipProps = {
-  direction?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
-  text?: string
-  noDelay?: boolean
-  align?: 'left' | 'right'
-  wrap?: boolean
-} & ComponentProps<typeof TooltipBase>
-
-function Tooltip({direction = 'n', children, className, text, noDelay, align, wrap, ...rest}: TooltipProps) {
-  const classes = classnames(
-    className,
-    `tooltipped-${direction}`,
-    align && `tooltipped-align-${align}-2`,
-    noDelay && 'tooltipped-no-delay',
-    wrap && 'tooltipped-multiline'
-  )
-  return (
-    <TooltipBase role="tooltip" aria-label={text} {...rest} className={classes}>
-      {children}
-    </TooltipBase>
-  )
-}
-
-Tooltip.alignments = ['left', 'right']
-
-Tooltip.directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw']
-
-export default Tooltip

package/src/Truncate.tsx

@@ -1,36 +0,0 @@
-import styled from 'styled-components'
-import {maxWidth, MaxWidthProps} from 'styled-system'
-import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type StyledTruncateProps = {
-  title: string
-  inline?: boolean
-  expandable?: boolean
-} & MaxWidthProps &
-  SystemTypographyProps &
-  SystemCommonProps &
-  SxProp
-
-const Truncate = styled.div<StyledTruncateProps>`
-  ${TYPOGRAPHY}
-  ${COMMON}
-  display: ${props => (props.inline ? 'inline-block' : 'inherit')};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: ${props => (props.inline ? 'top' : 'initial')};
-  white-space: nowrap;
-  ${maxWidth}
-  ${props => (props.expandable ? `&:hover { max-width: 10000px; }` : '')}
-  ${sx};
-`
-
-Truncate.defaultProps = {
-  expandable: false,
-  inline: false,
-  maxWidth: 125
-}
-
-export type TruncateProps = ComponentProps<typeof Truncate>
-export default Truncate

package/src/UnderlineNav.tsx

@@ -1,110 +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 {COMMON, get, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const ITEM_CLASS = 'UnderlineNav-item'
-const SELECTED_CLASS = 'selected'
-
-const UnderlineNavBase = styled.nav`
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid ${get('colors.border.muted')};
-  &.UnderlineNav--right {
-    justify-content: flex-end;
-
-    .UnderlineNav-item {
-      margin-right: 0;
-      margin-left: ${get('space.3')};
-    }
-
-    .UnderlineNav-actions {
-      flex: 1 1 auto;
-    }
-  }
-  &.UnderlineNav--full {
-    display: block;
-  }
-
-  .UnderlineNav-body {
-    display: flex;
-    margin-bottom: -1px;
-  }
-
-  .UnderlineNav-actions {
-    align-self: center;
-  }
-
-  ${COMMON};
-  ${sx};
-`
-
-export type UnderlineNavProps = {
-  actions?: React.ReactNode
-  align?: 'right'
-  full?: boolean
-  label?: string
-} & ComponentProps<typeof UnderlineNavBase>
-
-function UnderlineNav({actions, className, align, children, full, label, theme, ...rest}: UnderlineNavProps) {
-  const classes = classnames(className, 'UnderlineNav', align && `UnderlineNav--${align}`, full && 'UnderlineNav--full')
-  return (
-    <UnderlineNavBase className={classes} aria-label={label} theme={theme} {...rest}>
-      <div className="UnderlineNav-body">{children}</div>
-      {actions && <div className="UnderlineNav-actions">{actions}</div>}
-    </UnderlineNavBase>
-  )
-}
-
-type StyledUnderlineNavLinkProps = {
-  to?: History.LocationDescriptor
-  selected?: boolean
-} & SystemCommonProps &
-  SxProp
-
-const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
-  className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
-}))<StyledUnderlineNavLinkProps>`
-  padding: ${get('space.3')} ${get('space.2')};
-  margin-right: ${get('space.3')};
-  font-size: ${get('fontSizes.1')};
-  line-height: ${get('lineHeights.default')};
-  color: ${get('colors.fg.default')};
-  text-align: center;
-  border-bottom: 2px solid transparent;
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    color: ${get('colors.fg.default')};
-    text-decoration: none;
-    border-bottom-color: ${get('colors.neutral.muted')};
-    transition: 0.2s ease;
-
-    .UnderlineNav-octicon {
-      color: ${get('colors.fg.muted')};
-    }
-  }
-
-  &.selected {
-    color: ${get('colors.fg.default')};
-    border-bottom-color: ${get('colors.primer.border.active')};
-
-    .UnderlineNav-octicon {
-      color: ${get('colors.fg.default')};
-    }
-  }
-
-  ${COMMON};
-  ${sx};
-`
-
-UnderlineNavLink.displayName = 'UnderlineNav.Link'
-
-export type UnderlineNavLinkProps = ComponentProps<typeof UnderlineNavLink>
-export default Object.assign(UnderlineNav, {Link: UnderlineNavLink})

package/src/__tests__/.eslintrc.json

@@ -1,11 +0,0 @@
-{
-  "extends": [
-    "plugin:jest/recommended"
-  ],
-  "parserOptions": {
-    "project": "../../tsconfig.json"
-  },
-  "rules": {
-    "@typescript-eslint/no-non-null-assertion": 0
-  }
-}

package/src/__tests__/ActionList.tsx

@@ -1,49 +0,0 @@
-import {cleanup, render as HTMLRender} from '@testing-library/react'
-import 'babel-polyfill'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import React from 'react'
-import theme from '../theme'
-import {ActionList} from '../ActionList'
-import {COMMON} from '../constants'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {BaseStyles, ThemeProvider} from '..'
-expect.extend(toHaveNoViolations)
-
-function SimpleActionList(): JSX.Element {
-  return (
-    <ThemeProvider theme={theme}>
-      <BaseStyles>
-        <ActionList
-          items={[
-            {text: 'New file'},
-            ActionList.Divider,
-            {text: 'Copy link'},
-            {text: 'Edit file'},
-            {text: 'Delete file', variant: 'danger'}
-          ]}
-        />
-      </BaseStyles>
-    </ThemeProvider>
-  )
-}
-
-describe('ActionList', () => {
-  behavesAsComponent({
-    Component: ActionList,
-    systemPropArray: [COMMON],
-    options: {skipAs: true, skipSx: true},
-    toRender: () => <ActionList items={[]} />
-  })
-
-  checkExports('ActionList', {
-    default: undefined,
-    ActionList
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<SimpleActionList />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})

package/src/__tests__/ActionMenu.tsx

@@ -1,138 +0,0 @@
-import {cleanup, render as HTMLRender, act, fireEvent} from '@testing-library/react'
-import 'babel-polyfill'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import React from 'react'
-import theme from '../theme'
-import {ActionMenu} from '../ActionMenu'
-import {COMMON} from '../constants'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {BaseStyles, SSRProvider, ThemeProvider} from '..'
-import {ItemProps} from '../ActionList/Item'
-expect.extend(toHaveNoViolations)
-
-const items = [
-  {text: 'New file'},
-  {text: 'Copy link'},
-  {text: 'Edit file'},
-  {text: 'Delete file', variant: 'danger'}
-] as ItemProps[]
-
-const mockOnActivate = jest.fn()
-
-function SimpleActionMenu(): JSX.Element {
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          <div id="something-else">X</div>
-          <ActionMenu onAction={mockOnActivate} anchorContent="Menu" items={items} />
-          <div id="portal-root"></div>
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
-
-describe('ActionMenu', () => {
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  behavesAsComponent({
-    Component: ActionMenu,
-    systemPropArray: [COMMON],
-    options: {skipAs: true, skipSx: true},
-    toRender: () => (
-      <SSRProvider>
-        <ActionMenu items={[]} />
-      </SSRProvider>
-    )
-  })
-
-  checkExports('ActionMenu', {
-    default: undefined,
-    ActionMenu
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<SimpleActionMenu />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('should trigger the overlay on trigger click', async () => {
-    const menu = HTMLRender(<SimpleActionMenu />)
-    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Menu')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const itemText = items
-      .map((i: ItemProps) => {
-        if (i.hasOwnProperty('text')) {
-          return i.text
-        }
-      })
-      .join('')
-    expect(portalRoot?.textContent?.trim()).toEqual(itemText)
-  })
-
-  it('should dismiss the overlay on menuitem click', async () => {
-    const menu = HTMLRender(<SimpleActionMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Menu')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const menuItem = await menu.queryByText(items[0].text!)
-    act(() => {
-      fireEvent.click(menuItem as Element)
-    })
-    expect(portalRoot?.textContent).toEqual('') // menu items are hidden
-  })
-
-  it('should dismiss the overlay on clicking outside overlay', async () => {
-    const menu = HTMLRender(<SimpleActionMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Menu')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const somethingElse = (await menu.baseElement.querySelector('#something-else')) as HTMLElement
-    act(() => {
-      fireEvent.mouseDown(somethingElse)
-    })
-    expect(portalRoot?.textContent).toEqual('') // menu items are hidden
-  })
-
-  it('should pass correct values to onAction on menu click', async () => {
-    const menu = HTMLRender(<SimpleActionMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Menu')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const menuItem = (await portalRoot?.querySelector("[role='menuitem']")) as HTMLElement
-    act(() => {
-      fireEvent.click(menuItem)
-    })
-
-    // onAction has been called with correct argument
-    expect(mockOnActivate).toHaveBeenCalledTimes(1)
-    const arg = mockOnActivate.mock.calls[0][0]
-    expect(arg.text).toEqual(items[0].text)
-  })
-})