@primer/components 33.1.0-rc.6856bcf5 → 33.1.0

package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts

@@ -1,195 +0,0 @@
-import {scrollIntoViewingArea} from '../../behaviors/scrollIntoViewingArea'
-
-function scrollPositionFormula(
-  positionData: {viewingAreaEdgePosition: number; childEdgePosition: number; margin: number},
-  isChildAboveViewingArea: boolean
-) {
-  const {viewingAreaEdgePosition, childEdgePosition, margin} = positionData
-  const marginOffset = margin * (isChildAboveViewingArea ? -1 : 1)
-
-  return childEdgePosition - viewingAreaEdgePosition + marginOffset
-}
-
-// The DOMRect constructor isn't available in JSDOM, so we improvise here.
-function makeDOMRect(x: number, y: number, width: number, height: number): DOMRect {
-  return {
-    x,
-    y,
-    width,
-    height,
-    top: y,
-    left: x,
-    right: x + width,
-    bottom: y + height,
-    toJSON() {
-      return this
-    }
-  }
-}
-
-// Since Jest/JSDOM doesn't support layout, we can stub out getBoundingClientRect if we know the
-// correct dimensions. JSDOM will handle the rest of the DOM API used by getAnchoredPosition.
-function createVirtualDOM(viewingAreaRect: DOMRect, childRect: DOMRect) {
-  const viewingArea = document.createElement('div')
-  viewingArea.style.overflow = 'auto'
-  viewingArea.id = 'viewingArea'
-  // eslint-disable-next-line github/unescaped-html-literal
-  viewingArea.innerHTML = '<div id="child"></div>'
-  const child = viewingArea.querySelector('#child')!
-  child.getBoundingClientRect = () => childRect
-  viewingArea.getBoundingClientRect = () => viewingAreaRect
-  return {viewingArea, child}
-}
-
-describe('scrollIntoViewingArea', () => {
-  it('scrolls the expected amount when only the viewingArea element and child element are passed to the function', () => {
-    const scrollToMock = jest.fn()
-    Object.defineProperty(window.Element.prototype, 'scrollTo', {
-      writable: true,
-      value: scrollToMock
-    })
-    const childHeight = 50
-    const viewAreaHeight = 100
-    const childStart = viewAreaHeight + 10
-    const expectedScrollPosition = scrollPositionFormula(
-      {viewingAreaEdgePosition: viewAreaHeight, childEdgePosition: childStart + childHeight, margin: 8},
-      false
-    )
-
-    const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight)
-    const childRect = makeDOMRect(0, childStart, 100, childHeight)
-    const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
-
-    viewingArea.getBoundingClientRect = () => viewingAreaRect
-    viewingArea.scrollTop = 0
-    child.getBoundingClientRect = () => childRect
-
-    scrollIntoViewingArea(child as HTMLDivElement, viewingArea)
-    expect(scrollToMock).toHaveBeenCalledWith({
-      behavior: 'smooth',
-      top: expectedScrollPosition
-    })
-  })
-
-  describe('y-axis', () => {
-    it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
-      const scrollToMock = jest.fn()
-      Object.defineProperty(window.Element.prototype, 'scrollTo', {
-        writable: true,
-        value: scrollToMock
-      })
-      const childHeight = 50
-      const viewAreaHeight = 100
-      const childStart = viewAreaHeight + 10
-      const scrollMargin = 10
-      const expectedScrollPosition = scrollPositionFormula(
-        {viewingAreaEdgePosition: viewAreaHeight, childEdgePosition: childStart + childHeight, margin: scrollMargin},
-        false
-      )
-
-      const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight)
-      const childRect = makeDOMRect(0, childStart, 100, childHeight)
-      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
-
-      viewingArea.getBoundingClientRect = () => viewingAreaRect
-      viewingArea.scrollTop = 0
-      child.getBoundingClientRect = () => childRect
-
-      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto')
-      expect(scrollToMock).toHaveBeenCalledWith({
-        behavior: 'auto',
-        top: expectedScrollPosition
-      })
-    })
-
-    it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
-      const scrollToMock = jest.fn()
-      Object.defineProperty(window.Element.prototype, 'scrollTo', {
-        writable: true,
-        value: scrollToMock
-      })
-      const childHeight = 50
-      const childStart = childHeight * -1 - 10
-      const scrollMargin = 10
-      const expectedScrollPosition = scrollPositionFormula(
-        {viewingAreaEdgePosition: 0, childEdgePosition: childStart, margin: scrollMargin},
-        true
-      )
-
-      const viewingAreaRect = makeDOMRect(0, 0, 100, 100)
-      const childRect = makeDOMRect(0, childStart, 100, childHeight)
-      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
-
-      viewingArea.getBoundingClientRect = () => viewingAreaRect
-      viewingArea.scrollTop = 0
-      child.getBoundingClientRect = () => childRect
-
-      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto')
-      expect(scrollToMock).toHaveBeenCalledWith({
-        behavior: 'auto',
-        top: expectedScrollPosition
-      })
-    })
-  })
-
-  describe('x-axis', () => {
-    it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
-      const scrollToMock = jest.fn()
-      Object.defineProperty(window.Element.prototype, 'scrollTo', {
-        writable: true,
-        value: scrollToMock
-      })
-      const childWidth = 50
-      const viewAreaWidth = 100
-      const childStart = viewAreaWidth + 10
-      const scrollMargin = 10
-      const expectedScrollPosition = scrollPositionFormula(
-        {viewingAreaEdgePosition: viewAreaWidth, childEdgePosition: childStart + childWidth, margin: scrollMargin},
-        false
-      )
-
-      const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaWidth)
-      const childRect = makeDOMRect(childStart, 0, childWidth, 100)
-      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
-
-      viewingArea.getBoundingClientRect = () => viewingAreaRect
-      viewingArea.scrollLeft = 0
-      child.getBoundingClientRect = () => childRect
-
-      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto')
-      expect(scrollToMock).toHaveBeenCalledWith({
-        behavior: 'auto',
-        left: expectedScrollPosition
-      })
-    })
-
-    it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
-      const scrollToMock = jest.fn()
-      Object.defineProperty(window.Element.prototype, 'scrollTo', {
-        writable: true,
-        value: scrollToMock
-      })
-      const childWidth = 50
-      const childStart = childWidth * -1 - 10
-      const scrollMargin = 10
-      const expectedScrollPosition = scrollPositionFormula(
-        {viewingAreaEdgePosition: 0, childEdgePosition: childStart, margin: scrollMargin},
-        true
-      )
-
-      const viewingAreaRect = makeDOMRect(0, 0, 100, 100)
-      const childRect = makeDOMRect(childStart, 0, childWidth, 100)
-      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
-
-      viewingArea.getBoundingClientRect = () => viewingAreaRect
-      viewingArea.scrollTop = 0
-      child.getBoundingClientRect = () => childRect
-
-      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto')
-      expect(scrollToMock).toHaveBeenCalledWith({
-        behavior: 'auto',
-        left: expectedScrollPosition
-      })
-    })
-  })
-})

package/src/__tests__/filterObject.test.ts

@@ -1,54 +0,0 @@
-import {isColorValue, isShadowValue, filterObject} from '../utils/theme'
-
-describe('filterObject', () => {
-  const colors = {
-    scale: {
-      gray: [
-        '#fafbfc',
-        '#f6f8fa',
-        '#e1e4e8',
-        '#d1d5da',
-        '#959da5',
-        '#6a737d',
-        '#586069',
-        '#444d56',
-        '#2f363d',
-        '#24292e'
-      ]
-    },
-    btn: {
-      shadow: '0 1px 0 rgba(27,31,35,0.04)'
-    }
-  }
-
-  it('filters out shadow values', () => {
-    const expected = {
-      scale: {
-        gray: [
-          '#fafbfc',
-          '#f6f8fa',
-          '#e1e4e8',
-          '#d1d5da',
-          '#959da5',
-          '#6a737d',
-          '#586069',
-          '#444d56',
-          '#2f363d',
-          '#24292e'
-        ]
-      }
-    }
-
-    expect(filterObject(colors, (value: unknown) => isColorValue(value))).toEqual(expected)
-  })
-
-  it('filters out color values', () => {
-    const expected = {
-      btn: {
-        shadow: '0 1px 0 rgba(27,31,35,0.04)'
-      }
-    }
-
-    expect(filterObject(colors, (value: unknown) => isShadowValue(value))).toEqual(expected)
-  })
-})

package/src/__tests__/hooks/useAnchoredPosition.test.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import {useAnchoredPosition} from '../../hooks/useAnchoredPosition'
-import {render} from '@testing-library/react'
-
-const Component = ({callback}: {callback: (hookReturnValue: ReturnType<typeof useAnchoredPosition>) => void}) => {
-  const floatingElementRef = React.useRef<HTMLDivElement>(null)
-  const anchorElementRef = React.useRef<HTMLDivElement>(null)
-  callback(useAnchoredPosition({floatingElementRef, anchorElementRef}))
-  return (
-    <div style={{position: 'absolute'}}>
-      <div
-        style={{position: 'absolute', top: '20px', left: '20px', height: '50px', width: '50px'}}
-        ref={floatingElementRef}
-      />
-      <div ref={anchorElementRef} />
-    </div>
-  )
-}
-
-it('should should return a position', () => {
-  const cb = jest.fn()
-  render(<Component callback={cb} />)
-  expect(cb).toHaveBeenCalledTimes(2)
-  expect(cb.mock.calls[1][0]['position']).toMatchInlineSnapshot(`
-Object {
-  "anchorSide": "outside-bottom",
-  "left": 0,
-  "top": 4,
-}
-`)
-})

package/src/__tests__/hooks/useOnEscapePress.test.tsx

@@ -1,16 +0,0 @@
-import {useOnEscapePress} from '../../hooks/useOnEscapePress'
-import {render, fireEvent} from '@testing-library/react'
-import React from 'react'
-
-it('should call function when user presses escape', () => {
-  const functionToCall = jest.fn()
-  const Component = () => {
-    useOnEscapePress(functionToCall)
-    return <div>content</div>
-  }
-
-  const {getByText} = render(<Component />)
-  const domNode = getByText('content')
-  fireEvent.keyDown(domNode, {key: 'Escape', code: 'Escape', keyCode: 27, charCode: 27})
-  expect(functionToCall).toHaveBeenCalledTimes(1)
-})

package/src/__tests__/hooks/useOnOutsideClick.test.tsx

@@ -1,48 +0,0 @@
-import {useOnOutsideClick} from '../../hooks/useOnOutsideClick'
-import {render} from '@testing-library/react'
-import React, {useRef} from 'react'
-import userEvent from '@testing-library/user-event'
-
-type ComponentProps = {
-  callback: () => void
-}
-const Component = ({callback}: ComponentProps) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const outerButton = useRef<HTMLButtonElement>(null)
-  const secondButton = useRef<HTMLButtonElement>(null)
-  useOnOutsideClick({ignoreClickRefs: [secondButton], containerRef, onClickOutside: callback})
-  return (
-    <div>
-      <button ref={outerButton}>button</button>
-      <button ref={secondButton}>button two</button>
-      <div ref={containerRef}>content</div>
-    </div>
-  )
-}
-it('should call function when user clicks outside container', () => {
-  const mockFunction = jest.fn()
-  const {getByText} = render(<Component callback={mockFunction} />)
-  userEvent.click(getByText('button'))
-  expect(mockFunction).toHaveBeenCalledTimes(1)
-})
-
-it('should not call function when user right clicks', () => {
-  const mockFunction = jest.fn()
-  const {getByText} = render(<Component callback={mockFunction} />)
-  userEvent.click(getByText('button'), {button: 1})
-  expect(mockFunction).toHaveBeenCalledTimes(0)
-})
-
-it('should not call function when clicking on ignored refs', () => {
-  const mockFunction = jest.fn()
-  const {getByText} = render(<Component callback={mockFunction} />)
-  userEvent.click(getByText('button two'))
-  expect(mockFunction).toHaveBeenCalledTimes(0)
-})
-
-it('should not call function when clicking inside container', () => {
-  const mockFunction = jest.fn()
-  const {getByText} = render(<Component callback={mockFunction} />)
-  userEvent.click(getByText('content'))
-  expect(mockFunction).toHaveBeenCalledTimes(0)
-})

package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx

@@ -1,48 +0,0 @@
-import React, {useRef} from 'react'
-import {render, waitFor} from '@testing-library/react'
-import {useOpenAndCloseFocus} from '../../hooks/useOpenAndCloseFocus'
-
-const Component = () => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const returnFocusRef = useRef<HTMLButtonElement>(null)
-  const noButtonRef = useRef<HTMLButtonElement>(null)
-  useOpenAndCloseFocus({containerRef, initialFocusRef: noButtonRef, returnFocusRef})
-  return (
-    <>
-      <button ref={returnFocusRef}>trigger</button>
-      <div ref={containerRef}>
-        <button>yes</button>
-        <button ref={noButtonRef}>no</button>
-      </div>
-    </>
-  )
-}
-
-const ComponentTwo = () => {
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  useOpenAndCloseFocus({containerRef, returnFocusRef: buttonRef})
-  return (
-    <>
-      <button ref={buttonRef}>button trigger</button>
-      <div ref={containerRef}>
-        <button>yes</button>
-        <button>no</button>
-      </div>
-    </>
-  )
-}
-
-it('should focus element passed into function', async () => {
-  const {getByText} = render(<Component />)
-  await waitFor(() => getByText('no'))
-  const noButton = getByText('no')
-  expect(document.activeElement).toEqual(noButton)
-})
-
-it('should focus first element when nothing is passed', async () => {
-  const {getByText} = render(<ComponentTwo />)
-  await waitFor(() => getByText('yes'))
-  const yesButton = getByText('yes')
-  expect(document.activeElement).toEqual(yesButton)
-})

package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx

@@ -1,39 +0,0 @@
-import {useProvidedStateOrCreate} from '../../hooks/useProvidedStateOrCreate'
-import {render} from '@testing-library/react'
-import React, {useState} from 'react'
-
-it('will use the provided state', () => {
-  const Component = () => {
-    const [state, setState] = useState('foo')
-    const [combinedState] = useProvidedStateOrCreate(state, setState, 'bar')
-    return <div>{combinedState}</div>
-  }
-
-  const doc = render(<Component />)
-  expect(doc.baseElement.textContent).toEqual('foo')
-})
-
-it('will set state correctly when provided a set state method', () => {
-  const Component = () => {
-    const [state, setState] = useState('foo')
-    const [combinedState, setCombinedState] = useProvidedStateOrCreate(state, setState, 'bar')
-    if (combinedState !== 'baz') setCombinedState('baz')
-    return <div>{combinedState}</div>
-  }
-
-  const doc = render(<Component />)
-  expect(doc.baseElement.textContent).toEqual('baz')
-})
-
-it('if not provided a state, will use an internal state', () => {
-  const Component = () => {
-    const state = undefined
-    const setState = undefined
-    const [combinedState, setCombinedState] = useProvidedStateOrCreate(state, setState, '')
-    if (combinedState !== 'bar') setCombinedState('bar')
-    return <div>{combinedState}</div>
-  }
-
-  const doc = render(<Component />)
-  expect(doc.baseElement.textContent).toEqual('bar')
-})

package/src/__tests__/theme.test.ts

@@ -1,41 +0,0 @@
-import {isShadowValue} from '../utils/theme'
-
-describe('isShadowValue', () => {
-  it('accepts transparent', () => {
-    expect(isShadowValue('0 0 0 transparent')).toBe(true)
-  })
-
-  it('accepts hex colors', () => {
-    expect(isShadowValue('0 0 0 #ff0000')).toBe(true)
-    expect(isShadowValue('0 0 0 #ff0')).toBe(true)
-  })
-
-  it('accepts rgba colors', () => {
-    expect(isShadowValue('0 0 0 rgb(255, 0, 0)')).toBe(true)
-    expect(isShadowValue('0 0 0 rgba(255,0,0,0.2)')).toBe(true)
-  })
-
-  it('accepts px values', () => {
-    expect(isShadowValue('12px 24px 0 #000')).toBe(true)
-  })
-
-  it('accepts em values', () => {
-    expect(isShadowValue('0.5em 1em 0 #000')).toBe(true)
-  })
-
-  it('accepts inset values', () => {
-    expect(isShadowValue('inset 12px 24px 0 #000')).toBe(true)
-  })
-
-  it('rejects individual colors', () => {
-    expect(isShadowValue('red')).toBe(false)
-    expect(isShadowValue('#f00')).toBe(false)
-    expect(isShadowValue('rgb(255, 0, 0)')).toBe(false)
-  })
-
-  it('rejects individual numeric values', () => {
-    expect(isShadowValue('0')).toBe(false)
-    expect(isShadowValue('12px')).toBe(false)
-    expect(isShadowValue('0.5em')).toBe(false)
-  })
-})

package/src/__tests__/themeGet.test.ts

@@ -1,15 +0,0 @@
-import {themeGet} from '..'
-
-describe('themeGet', () => {
-  it('acccepts theme prop', () => {
-    expect(themeGet('example')({theme: {example: 'test'}})).toBe('test')
-  })
-
-  it('allows theme prop to override primer theme', () => {
-    expect(themeGet('colors.gray.0')({theme: {colors: {gray: ['#f00']}}})).toBe('#f00')
-  })
-
-  it('uses primer theme as fallback', () => {
-    expect(themeGet('space.1')({})).toBe('4px')
-  })
-})

package/src/__tests__/themePreval.test.ts

@@ -1,8 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-test('snapshot theme-preval.js', () => {
-  // Snapshot test the build output of theme-preval.js to catch any unexpected changes
-  const themePrevalFile = fs.readFileSync(path.resolve(__dirname, '../../lib/theme-preval.js'), 'utf8')
-  expect(themePrevalFile).toMatchSnapshot()
-})

package/src/__tests__/useSafeTimeout.test.tsx

@@ -1,36 +0,0 @@
-import {renderHook} from '@testing-library/react-hooks'
-import useSafeTimeout from '../hooks/useSafeTimeout'
-
-afterEach(() => {
-  jest.useRealTimers()
-})
-
-test('should call callback after time', async () => {
-  const {result, waitFor} = renderHook(() => useSafeTimeout())
-  const mockFunction = jest.fn()
-  result.current.safeSetTimeout(mockFunction, 300)
-  await waitFor(() => expect(mockFunction).toHaveBeenCalled())
-})
-
-test('should clear timeouts when safeClearTimeout is called', () => {
-  jest.useFakeTimers()
-  jest.spyOn(global, 'clearTimeout')
-  const {result} = renderHook(() => useSafeTimeout())
-  const mockFunction = jest.fn()
-  const timeoutId = result.current.safeSetTimeout(mockFunction, 300)
-  result.current.safeClearTimeout(timeoutId)
-  expect(clearTimeout).toHaveBeenCalledTimes(1)
-  expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId)
-})
-
-test('should clear timeouts when the component is unmounted', () => {
-  jest.useFakeTimers()
-  jest.spyOn(global, 'clearTimeout')
-  const {result, unmount} = renderHook(() => useSafeTimeout())
-  const mockFunction = jest.fn()
-  const timeoutId = result.current.safeSetTimeout(mockFunction, 300)
-
-  unmount()
-  expect(clearTimeout).toHaveBeenCalledTimes(1)
-  expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId)
-})

package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ComponentWithSlots renders all slots 1`] = `
-<div>
-  <div>
-    first
-    <span>
-      free form
-       
-      second
-       
-    </span>
-  </div>
-</div>
-`;
-
-exports[`ComponentWithSlots renders with context passed to children 1`] = `
-<div>
-  <div>
-    <span>
-      free form
-       
-       
-      hi
-       
-      third
-    </span>
-  </div>
-</div>
-`;
-
-exports[`ComponentWithSlots renders with just one slot 1`] = `
-<div>
-  <div>
-    first
-    <span>
-      free form
-       
-       
-    </span>
-  </div>
-</div>
-`;
-
-exports[`ComponentWithSlots renders without any slots 1`] = `
-<div>
-  <div>
-    <span>
-      free form
-       
-       
-    </span>
-  </div>
-</div>
-`;

package/src/__tests__/utils/createSlots.test.tsx

@@ -1,74 +0,0 @@
-import React from 'react'
-import 'babel-polyfill'
-import {render, waitFor} from '@testing-library/react'
-import createSlots from '../../utils/create-slots'
-
-// setup a component with slots
-const {Slots, Slot} = createSlots(['One', 'Two', 'Three'])
-type ContextTypes = {salutation?: string}
-
-const ComponentWithSlots: React.FC<ContextTypes> = ({salutation, children}) => {
-  return (
-    <Slots context={{salutation}}>
-      {slots => (
-        <div>
-          {slots.One}
-          <span>
-            {children} {slots.Two} {slots.Three}
-          </span>
-        </div>
-      )}
-    </Slots>
-  )
-}
-const SlotItem1: React.FC = ({children}) => <Slot name="One">{children}</Slot>
-const SlotItem2: React.FC = ({children}) => <Slot name="Two">{children}</Slot>
-const SlotItem3: React.FC = ({children}) => (
-  <Slot name="Three">
-    {(context: ContextTypes) => (
-      <>
-        {context.salutation} {children}
-      </>
-    )}
-  </Slot>
-)
-
-describe('ComponentWithSlots', () => {
-  it('renders all slots', async () => {
-    const component = render(
-      <ComponentWithSlots>
-        <SlotItem1>first</SlotItem1>
-        <SlotItem2>second</SlotItem2>
-        free form
-      </ComponentWithSlots>
-    )
-
-    await waitFor(() => component.getByText('first'))
-    expect(component.container).toMatchSnapshot()
-  })
-
-  it('renders without any slots', async () => {
-    const component = render(<ComponentWithSlots>free form</ComponentWithSlots>)
-    expect(component.container).toMatchSnapshot()
-  })
-
-  it('renders with just one slot', async () => {
-    const component = render(
-      <ComponentWithSlots>
-        <SlotItem1>first</SlotItem1>
-        free form
-      </ComponentWithSlots>
-    )
-    expect(component.container).toMatchSnapshot()
-  })
-
-  it('renders with context passed to children', async () => {
-    const component = render(
-      <ComponentWithSlots salutation="hi">
-        <SlotItem3>third</SlotItem3>
-        free form
-      </ComponentWithSlots>
-    )
-    expect(component.container).toMatchSnapshot()
-  })
-})