# All files / components/Navigation LogoHeader.js

50% Statements 3/6
100% Branches 0/0
0% Functions 0/2
50% Lines 3/6

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69

    5x

    5x

    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import Logo from '../Logo';
    import styled from 'styled-components';

    const Container = styled.div`
      margin: auto 0;
      display: flex;
      flex-direction: row;
    `;

    const Text = styled.span`
      font-size: 22px;
      font-weight: 100;
      line-height: 33px;
      border-left: 1px solid;
      margin-left: 0.5em;
      padding-left: 0.5em;
      height: 30px;
      display: inline-block;
      font-family: ${({ theme }) => theme.fonts.brand};
    `;

    class LogoHeader extends React.Component {
      static propTypes = {
        /**
         * The title to render inside the header.
         */
        children: PropTypes.string,
        /**
         * Adds a class name to the whole containing header element.
         */
        className: PropTypes.string,
        /**
         * Adds an id to the whole containing header element.
         */
        id: PropTypes.string,
      };

      static defaultProps = {
        children: 'Bandwidth',
        className: null,
        id: null,
      };

      render() {
        const { children, id, className } = this.props;

        return (
          <Container id={id} className={className}>
            <Logo />
            <Text>{children}</Text>
          </Container>
        );
      }
    }

    LogoHeader.usage = `
    LogoHeader is mostly used for the top nav. It's just like Header, except it renders a logo before the text you supply.

    Bandwidth and the BW logo are trademarks of Bandwidth.com, Inc.  Bandwidth reserves all rights to these trademarks, as well as any others that may be included from time to time.

    \`\`\`
    <LogoHeader>Bandwidth</LogoHeader>
    \`\`\`
    `;

    export default LogoHeader;