<commit_before>import React from 'react';
import _map from 'lodash.map';
import FitText from '@kennethormandy/react-fittext';

const GlyphHidden = (props) => {
  return (
    <span style={{opacity: 0}} className="speak-none" aria-hidden="true">
      {props.text}
    </span>
  );
};

GlyphHidden.defaultProps = {
  text: '',
};

class FontList extends React.Component {
  render() {
    const props = this.props;
    const data = props.data;
    let textAlign = props.textAlignment;

    if (props.textAlignment === 'left' || props.textAlignment === 'right') {
      textAlign = `${props.textAlignment}-align`;
    }

    let typefaceList = Object.keys(data.fonts).map(function(index) {
      let font = data.fonts[index];
      let fontWeight = 400;
      let fontString = (
        <span>
          <GlyphHidden text="安" />あア
        </span>
      );
      let fontSizeAdjust =
        typeof font.font_size_adjust === 'undefined'
          ? 1
          : 1 / font.font_size_adjust;

      if (font.published !== false && font.designer) {
        if (font.hiragana === false) {
          fontString = (
            <span>
              <GlyphHidden text="安あ" />ア
            </span>
          );
        }
        if (font.kanji === true) {
          fontString = '安あア';
        }

        return (
          <li
            className={`col-12 m0 ${props.className}`}
            key={`header_${index}`}>
            <a className="block py2 border-none" href={`#${index}`}>
              <div className="flex items-center py3 border-top border-muted-light height-fontlist-item">
                <div
                  className={`h1 line-height-1 col-4 sm-col-3 md-col-5 lg-col-${
                    props.firstColumnLgCol
                  } ${props.color} ${textAlign}`}>
                  <FitText
                    compressor={0.33 * fontSizeAdjust}
                    minFontSize={props.minFontSize}
                    maxFontSize={props.maxFontSize}>
                    <div
                      className={`break-none wf-${index} font-weight-${fontWeight}`}
                      style={{fontSize: `${font.font_size_adjust || 1}em`}}>
                      {fontString}
                    </div>
                  </FitText>
                </div>
                <div className="flex-auto line-height-2 pl2">
                  <span>
                    {font.name.ja}{' '}
                    <span lang="en" className="muted-dark">
                      {font.name.en === font.name.ja ? '' : font.name.en}
                    </span>
                  </span>
                  <span className="block mt1">
                    {font.designer.name.ja}{' '}
                    <span lang="en" className="muted-dark">
                      {font.designer.name.en === font.designer.name.ja
                        ? ''
                        : font.designer.name.en}
                    </span>
                  </span>
                </div>
              </div>
            </a>
          </li>
        );
      }
    });

    return (
      <ul className="flex flex-wrap m0 p0 list-style-none items-center">
        {typefaceList}
      </ul>
    );
  }
}

FontList.defaultProps = {
  data: {},
  color: 'black',
  maxFontSize: 120,
  minFontSize: 24,
  firstColumnLgCol: 5, // TODO This this a quick fix, could be much nicer. Fixes column width on footer
  textAlignment: 'left',
};

export default FontList;<commit_msg>Refactors FontList into FontListItem<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import _map from 'lodash.map';
import FitText from '@kennethormandy/react-fittext';

const GlyphHidden = props => {
  return (
    <span style={{ opacity: 0 }} className="speak-none" aria-hidden="true">
      {props.text}
    </span>
  );
};

GlyphHidden.defaultProps = {
  text: '',
};

const FontListItemDesigner = props => {
  if (props) {
    return (
      <span className="block mt1">
        {props.name.ja}{' '}
        <span lang="en" className="muted-dark">
          {props.name.en === props.name.ja ? '' : props.name.en}
        </span>
      </span>
    );
  }

  return null;
};

const FontListItem = props => {
  if (props.published === false || typeof props.designer === 'undefined') {
    return null;
  }

  let fontSizeAdjust =
    typeof props.font_size_adjust === 'undefined'
      ? 1
      : 1 / props.font_size_adjust;

  let textString = ['安', 'あ', 'ア'];

  if (props.kanji !== true) {
    textString[0] = <GlyphHidden text={textString[0]} />;
  }

  if (props.hiragana !== true) {
    textString[1] = <GlyphHidden text={textString[1]} />;
  }

  if (props.katakana !== true) {
    textString[2] = <GlyphHidden text={textString[2]} />;
  }

  return (
    <li className={`col-12 m0 ${props.className}`}>
      <a className="block py2 border-none" href={`#${props.font}`}>
        <div className="flex items-center py3 border-top border-muted-light height-fontlist-item">
          <div
            className={`h1 line-height-1 col-4 sm-col-3 md-col-5 lg-col-${
              props.firstColumnLgCol
            } ${props.color} ${props.textAlign}`}>
            <div style={{ fontSize: `${props.font_size_adjust || 1}em` }}>
              <FitText
                compressor={0.33 * fontSizeAdjust}
                minFontSize={props.minFontSize}
                maxFontSize={props.maxFontSize}>
                <div
                  className={`break-none wf-${props.font} font-weight-${
                    props.fontWeight
                  }`}>
                  <span>{textString}</span>
                </div>
              </FitText>
            </div>
          </div>
          <div className="flex-auto line-height-2 pl2">
            <span>
              {props.name.ja}{' '}
              <span lang="en" className="muted-dark">
                {props.name.en === props.name.ja ? '' : props.name.en}
              </span>
            </span>
            <FontListItemDesigner {...props.designer} />
            {props.earlyAccess === true ? (
              <div className="font-weight-600 red mt2">
                <span lang="en">{props.earlyAccessLabel.en}</span>{' '}
                <span style={{ fontSize: '0.9em' }} lang="ja">
                  {props.earlyAccessLabel.ja}
                </span>
              </div>
            ) : null}
          </div>
        </div>
      </a>
    </li>
  );
};

FontListItem.propTypes = {
  designer: PropTypes.object.isRequired,
};

FontListItem.defaultProps = {
  color: 'black',
  fontWeight: 400,
  maxFontSize: 120,
  minFontSize: 24,
  firstColumnLgCol: 5, // TODO This this a quick fix, could be much nicer. Fixes column width on footer
  textAlignment: 'left',
  className: '',
  earlyAccessLabel: {
    en: 'Early Access',
    ja: '早期アクセス',
  },
};

class FontList extends React.Component {
  render() {
    const props = this.props;
    const data = props.data;

    let textAlign = props.textAlignment;

    if (props.textAlignment === 'left' || props.textAlignment === 'right') {
      textAlign = `${props.textAlignment}-align`;
    }

    let typefaceList = Object.keys(data.fonts).map(function(index) {
      return (
        <FontListItem
          key={`header_${index}`}
          font={index}
          textAlign={textAlign}
          {...props}
          {...data.fonts[index]}
        />
      );
    });

    return (
      <ul className="flex flex-wrap m0 p0 list-style-none items-center">
        {typefaceList}
      </ul>
    );
  }
}

FontList.defaultProps = {
  data: {},
};

export default FontList;
{'fraction_non_alphanumeric': 0.14980184940554822, 'fraction_numerical': 0.00977542932628798, 'mean_word_length': 1.7361763642934587, 'pattern_counts': {'":': 0, '<': 76, '<?xml version=': 0, '>': 80, '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': '4894031', 'n_tokens_mistral': 2386, 'n_tokens_neox': 2292, 'n_words': 464}