@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/Tooltip.tsx

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

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

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

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

package/src/__tests__/ActionList.tsx

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

@@ -0,0 +1,138 @@
+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)
+  })
+})