@primer/components 33.0.0-rc.b3e4ccee → 33.0.0

package/src/Token/_RemoveTokenButton.tsx

@@ -1,111 +0,0 @@
-import React from 'react'
-import {XIcon} from '@primer/octicons-react'
-import styled, {css} from 'styled-components'
-import {variant} from 'styled-system'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import {tokenSizes, TokenSizeKeys, defaultTokenSize} from './TokenBase'
-
-interface TokenButtonProps {
-  borderOffset?: number
-  size?: TokenSizeKeys
-  isParentInteractive?: boolean
-}
-
-const variants = variant<{height: string; width: string}, TokenSizeKeys>({
-  prop: 'size',
-  variants: {
-    small: {
-      height: tokenSizes.small,
-      width: tokenSizes.small
-    },
-    medium: {
-      height: tokenSizes.medium,
-      width: tokenSizes.medium
-    },
-    large: {
-      height: tokenSizes.large,
-      width: tokenSizes.large
-    },
-    extralarge: {
-      height: tokenSizes.extralarge,
-      width: tokenSizes.extralarge
-    }
-  }
-})
-
-const getTokenButtonIconSize = (size?: TokenSizeKeys) => parseInt(tokenSizes[size || defaultTokenSize], 10) * 0.75
-
-const StyledTokenButton = styled.span<TokenButtonProps & SxProp>`
-  background-color: transparent;
-  font-family: inherit;
-  color: currentColor;
-  cursor: pointer;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  user-select: none;
-  appearance: none;
-  text-decoration: none;
-  padding: 0;
-  transform: ${props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`};
-  align-self: baseline;
-  border: 0;
-  border-radius: 999px;
-
-  ${props => {
-    switch (props.size) {
-      case 'large':
-      case 'extralarge':
-        return css`
-          margin-left: ${get('space.2')};
-        `
-      default:
-        return css`
-          margin-left: ${get('space.1')};
-        `
-    }
-  }}
-
-  &:hover,
-  &:focus {
-    // TODO: choose a better functional color variable for this
-    background-color: ${get('colors.neutral.muted')};
-  }
-
-  &:active {
-    // TODO: choose a better functional color variable for this
-    background-color: ${get('colors.neutral.subtle')};
-  }
-
-  ${variants}
-  ${sx}
-`
-
-const RemoveTokenButton: React.FC<ComponentProps<typeof StyledTokenButton>> = ({
-  'aria-label': ariaLabel,
-  isParentInteractive,
-  size,
-  ...rest
-}) => {
-  delete rest.children
-
-  return (
-    <StyledTokenButton
-      as={isParentInteractive ? 'span' : 'button'}
-      tabIndex={isParentInteractive ? -1 : undefined}
-      aria-label={!isParentInteractive ? 'Remove token' : ariaLabel}
-      size={size}
-      {...rest}
-    >
-      <XIcon size={getTokenButtonIconSize(size)} />
-    </StyledTokenButton>
-  )
-}
-
-RemoveTokenButton.defaultProps = {
-  size: defaultTokenSize
-}
-
-export default RemoveTokenButton

package/src/Token/_TokenTextContainer.tsx

@@ -1,47 +0,0 @@
-import styled from 'styled-components'
-import {TokenBaseProps} from './TokenBase'
-
-const TokenTextContainer = styled('span')<Partial<TokenBaseProps>>`
-  flex-grow: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  // reset button styles, make the cursor a pointer, and add line-height
-  background: transparent;
-  border: none;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: 1;
-
-  // reset anchor styles
-  color: currentColor;
-  text-decoration: none;
-
-  // Position psuedo-element above text content, but below the
-  // remove button.
-  // This ensures the <a> or <button> receives the click no
-  // matter where on the token the user clicks.
-  &:is(a, button, [tabIndex='0']) {
-    cursor: pointer;
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-    }
-  }
-`
-
-export default TokenTextContainer

package/src/Token/index.ts

@@ -1,3 +0,0 @@
-export {default} from './Token'
-export {default as IssueLabelToken} from './IssueLabelToken'
-export {default as AvatarToken} from './AvatarToken'

package/src/Tooltip.tsx

@@ -1,263 +0,0 @@
-import classnames from 'classnames'
-import React from 'react'
-import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const TooltipBase = styled.span<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;
-  }
-
-  ${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,31 +0,0 @@
-import styled from 'styled-components'
-import {maxWidth, MaxWidthProps} from 'styled-system'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type StyledTruncateProps = {
-  title: string
-  inline?: boolean
-  expandable?: boolean
-} & MaxWidthProps &
-  SxProp
-
-const Truncate = styled.div<StyledTruncateProps>`
-  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,107 +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 {get} 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<SxProp>`
-  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;
-  }
-
-  ${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
-} & 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')};
-    }
-  }
-
-  ${sx};
-`
-
-UnderlineNavLink.displayName = 'UnderlineNav.Link'
-
-export type UnderlineNavLinkProps = ComponentProps<typeof UnderlineNavLink>
-export default Object.assign(UnderlineNav, {Link: UnderlineNavLink})

package/src/_TextInputWrapper.tsx

@@ -1,113 +0,0 @@
-import styled, {css} from 'styled-components'
-import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthProps} from 'styled-system'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-
-const sizeVariants = variant({
-  variants: {
-    small: {
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: 0,
-      lineHeight: '20px'
-    },
-    large: {
-      px: 2,
-      py: '10px',
-      fontSize: 3
-    }
-  }
-})
-
-type StyledWrapperProps = {
-  disabled?: boolean
-  hasIcon?: boolean
-  block?: boolean
-  contrast?: boolean
-  variant?: 'small' | 'large'
-} & WidthProps &
-  MinWidthProps &
-  MaxWidthProps &
-  SxProp
-
-const TextInputWrapper = styled.span<StyledWrapperProps>`
-  display: inline-flex;
-  align-items: stretch;
-  min-height: 34px;
-  font-size: ${get('fontSizes.1')};
-  line-height: 20px;
-  color: ${get('colors.fg.default')};
-  vertical-align: middle;
-  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
-  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: 1px solid ${get('colors.border.default')};
-  border-radius: ${get('radii.2')};
-  outline: none;
-  box-shadow: ${get('shadows.primer.shadow.inset')};
-  cursor: text;
-
-  ${props => {
-    if (props.hasIcon) {
-      return css`
-        padding: 0;
-      `
-    } else {
-      return css`
-        padding: 6px 12px;
-      `
-    }
-  }}
-
-  .TextInput-icon {
-    align-self: center;
-    color: ${get('colors.fg.muted')};
-    margin: 0 ${get('space.2')};
-    flex-shrink: 0;
-  }
-
-  &:focus-within {
-    border-color: ${get('colors.accent.emphasis')};
-    box-shadow: ${get('shadows.primer.shadow.focus')};
-  }
-
-  ${props =>
-    props.contrast &&
-    css`
-      background-color: ${get('colors.canvas.inset')};
-    `}
-
-  ${props =>
-    props.disabled &&
-    css`
-      color: ${get('colors.primer.fg.disabled')};
-      background-color: ${get('colors.input.disabledBg')};
-      border-color: ${get('colors.border.default')};
-    `}
-  
-    ${props =>
-    props.block &&
-    css`
-      display: block;
-      width: 100%;
-    `}
-
-    ${props =>
-    props.block &&
-    props.hasIcon &&
-    css`
-      display: flex;
-    `}
-  
-    // Ensures inputs don't zoom on mobile but are body-font size on desktop
-    @media (min-width: ${get('breakpoints.1')}) {
-    font-size: ${get('fontSizes.1')};
-  }
-  ${width}
-  ${minWidth}
-    ${maxWidth}
-    ${sizeVariants}
-    ${sx};
-`
-
-export default TextInputWrapper

package/src/_UnstyledTextInput.tsx

@@ -1,19 +0,0 @@
-import styled from 'styled-components'
-import sx from './sx'
-
-const UnstyledTextInput = styled.input`
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  &:focus {
-    outline: 0;
-  }
-
-  ${sx};
-`
-
-export default UnstyledTextInput

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
-  }
-}