<commit_before>import { color, Link, Sans, Serif } from "@artsy/palette"
import match from "autosuggest-highlight/match"
import parse from "autosuggest-highlight/parse"
import React, { SFC } from "react"
import { SuggestionItemContainer } from "./SuggestionItemContainer"
interface Props {
  display: string
  label: string
  query: string
  href: string
}

export const SuggestionItem: SFC<Props> = ({ href, display, label, query }) => {
  if (label === "FirstItem") {
    return (
      <Link noUnderline href={href}>
        <SuggestionItemContainer>Search "{query}"</SuggestionItemContainer>
      </Link>
    )
  }

  const matches = match(display, query)
  const parts = parse(display, matches)

  return (
    <Link noUnderline href={href}>
      <SuggestionItemContainer>
        <Serif size="3">
          {parts.map(({ highlight, text }, index) => {
            return highlight ? <strong key={index}>{text}</strong> : text
          })}
        </Serif>
        <Sans color={color("black60")} size="2">
          {label}
        </Sans>
      </SuggestionItemContainer>
    </Link>
  )
}<commit_msg>Specify color on suggestion item links, so that they aren't ever underlined.<commit_after>import { color, Link, Sans, Serif } from "@artsy/palette"
import match from "autosuggest-highlight/match"
import parse from "autosuggest-highlight/parse"
import React, { SFC } from "react"
import { SuggestionItemContainer } from "./SuggestionItemContainer"
interface Props {
  display: string
  label: string
  query: string
  href: string
}

export const SuggestionItem: SFC<Props> = ({ href, display, label, query }) => {
  if (label === "FirstItem") {
    // `color="black100"` is misleading.
    //  The actual color doesn't really matter - the child element controls the displayed color.
    //  We specify color only because it makes the text not underlined on hover.
    return (
      <Link noUnderline href={href} color="black100">
        <SuggestionItemContainer>Search "{query}"</SuggestionItemContainer>
      </Link>
    )
  }

  const matches = match(display, query)
  const parts = parse(display, matches)

  return (
    // `color="black100"` is misleading.
    //  The actual color doesn't really matter - the child elements control the displayed color.
    //  We specify color only because it makes the text not underlined on hover.
    <Link noUnderline href={href} color="black100">
      <SuggestionItemContainer>
        <Serif size="3">
          {parts.map(({ highlight, text }, index) => {
            return highlight ? <strong key={index}>{text}</strong> : text
          })}
        </Serif>
        <Sans color={color("black60")} size="2">
          {label}
        </Sans>
      </SuggestionItemContainer>
    </Link>
  )
}
{'fraction_non_alphanumeric': 0.12740471869328493, 'fraction_numerical': 0.007259528130671506, 'mean_word_length': 3.0950965824665677, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4622117', 'n_tokens_mistral': 829, 'n_tokens_neox': 790, 'n_words': 239}