<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import styled, { ThemeProvider } from 'styled-components';
import NavigationItems, { Container as ItemsContainer, linksPropType } from './NavigationItems';
import LogoHeader from './LogoHeader';
import theme from '../../theme';

const Container = styled.header.withConfig({ displayName: 'NavigationContainer' })`
  background: ${({ theme }) => theme.topNav.bg};
  color: ${({ theme }) => theme.topNav.fg};
  border-bottom: 1px solid ${({ theme }) => theme.shadow.color};
  padding: ${({ theme }) => theme.topNav.padding};
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  z-index: 1000;

  /* we don't want the nav to expand or collapse, just keep its natural size */
  flex: 0 0 auto;
`;

const Links = styled.div.withConfig({ displayName: 'NavigationLinks' })`
  align-self: flex-end;
  display: flex;
  flex-direction: column;

  & > div {
    margin-top: auto;
  }

  & > ${ItemsContainer}:nth-child(2) ${NavigationItems.Item} {
    padding-top: 10px !important;
  }
`;


class Navigation extends React.Component {
  static propTypes = {
    /**
     * The title to render within the navigation header (optional)
     */
    title: PropTypes.string,
    /**
     * A list of links to include in the main navigation.
     */
    links: linksPropType.isRequired,
    /**
     * A list of links to include above the main links (optional).
     */
    topLinks: linksPropType,
    /**
     * Adds a class name to the element.
     */
    className: PropTypes.string,
    /**
     * Adds an id to the element.
     */
    id: PropTypes.string,
  };

  static defaultProps = {
    topLinks: null,
    title: null,
    className: null,
    id: null,
  };

  render() {
    const { title, links, topLinks, id, className } = this.props;
    const RenderIf = ({ children, val }) => (val ? children : null);

    return (
      <Container id={id} className={className}>
        <RenderIf val={title}>
          <LogoHeader>{title}</LogoHeader>
        </RenderIf>
        <Links>
          <RenderIf val={topLinks}>
            <ThemeProvider theme={theme.small}>
              <NavigationItems links={topLinks} />
            </ThemeProvider>
          </RenderIf>
          <NavigationItems links={links} />
        </Links><commit_msg>KAT-1957 add anchor to navigation<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import styled, { ThemeProvider } from 'styled-components';
import NavigationItems, { Container as ItemsContainer, linksPropType } from './NavigationItems';
import LogoHeader from './LogoHeader';
import theme from '../../theme';
import Anchor from '../Anchor/Anchor';

const Container = styled.header.withConfig({ displayName: 'NavigationContainer' })`
  background: ${({ theme }) => theme.topNav.bg};
  color: ${({ theme }) => theme.topNav.fg};
  border-bottom: 1px solid ${({ theme }) => theme.shadow.color};
  padding: ${({ theme }) => theme.topNav.padding};
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  z-index: 1000;

  /* we don't want the nav to expand or collapse, just keep its natural size */
  flex: 0 0 auto;
`;

const Links = styled.div.withConfig({ displayName: 'NavigationLinks' })`
  align-self: flex-end;
  display: flex;
  flex-direction: column;

  & > div {
    margin-top: auto;
  }

  & > ${ItemsContainer}:nth-child(2) ${NavigationItems.Item} {
    padding-top: 10px !important;
  }
`;

const AnchoredLogoHeader = styled(LogoHeader)`
  color: ${({ theme }) => theme.topNav.fg};
`;

const CenteredAnchor = styled(Anchor)`
  align-self: center;
  height: 30px;
`;

class Navigation extends React.Component {
  static propTypes = {
    /**
     * The title to render within the navigation header (optional)
     */
    title: PropTypes.string,
    /**
     * A list of links to include in the main navigation.
     */
    links: linksPropType.isRequired,
    /**
     * A list of links to include above the main links (optional).
     */
    topLinks: linksPropType,
    /**
     * Adds a class name to the element.
     */
    className: PropTypes.string,
    /**
     * Adds an id to the element.
     */
    id: PropTypes.string,
    /**
     * A location url when logo is clicked.
     */
    logoLocation: PropTypes.string,
  };

  static defaultProps = {
    topLinks: null,
    title: null,
    className: null,
    id: null,
  };

  render() {
    const { title, links, topLinks, id, className, logoLocation } = this.props;
    const RenderIf = ({ children, val }) => (val ? children : null);
    const RenderLocation = ({ location }) =>
      (location?
        <RenderIf val={title}>
          <CenteredAnchor to={logoLocation}><AnchoredLogoHeader>{title}</AnchoredLogoHeader></CenteredAnchor>
        </RenderIf>
        :
        <RenderIf val={title}>
          <LogoHeader>{title}</LogoHeader>
        </RenderIf>
      );

    return (
      <Container id={id} className={className}>
        <RenderLocation location={logoLocation} />
        <Links>
          <RenderIf val={topLinks}>
            <ThemeProvider theme={theme.small}>
              <NavigationItems links={topLinks} />
            </ThemeProvider>
          </RenderIf>
          <NavigationItems links={links} />
        </Links>
{'fraction_non_alphanumeric': 0.14045686237492921, 'fraction_numerical': 0.00528601094959411, 'mean_word_length': 2.760113555713272, 'pattern_counts': {'":': 0, '<': 36, '<?xml version=': 0, '>': 52, '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': '2635772', 'n_tokens_mistral': 1595, 'n_tokens_neox': 1560, 'n_words': 435}