# All files / behaviors/ScrollBox ScrollBox.js

55.56% Statements 5/9
0% Branches 0/2
0% Functions 0/2
55.56% Lines 5/9

    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
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80

    5x

    5x

    5x

    5x

    5x

     import PropTypes from 'prop-types';
    import styled, { css, keyframes } from 'styled-components';

    const appearAnimation = keyframes`
      from {
        opacity: 0;
        transform: translateY(-30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    `;

    const ScrollBox = styled.div.withConfig({ displayName: 'ScrollBox' })`
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      max-height: 100%;

      ${({ animateIn }) => {
        if (animateIn) {
          return css`
            animation: ${appearAnimation} 0.3s ease;
          `;
        }

        return '';
      }}

      &::-webkit-scrollbar {
        width: 0.5em;
        height: 0.5em;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.25);
      }

      &::-webkit-scrollbar-track {
        background: ${({ theme }) => theme.colors.gutter};
      }
    `;

    ScrollBox.propTypes = {
      /**
       * Whether or not to animate the contents as they are first rendered.
       */
      animateIn: PropTypes.bool,
      /**
       * Adds an id to the element.
       */
      id: PropTypes.string,
      /**
       * Adds a class name to the element.
       */
      className: PropTypes.string,
    }

    ScrollBox.defaultProps = {
      animateIn: false,
      id: null,
      className: null,
    };

    ScrollBox.usage = `
    # ScrollBox

    ScrollBox lays out content vertically via flexbox, and allows its content to scroll vertically. It also includes an optional little animation as content appears. You can turn this on with \`animateIn\`.

    \`\`\`
    <ScrollBox animateIn>
      <!-- content -->
    </ScrollBox>
    \`\`\`
    `;

    export default ScrollBox;