# All files / elements/typography/codeElements styled.js

100% Statements 6/6
100% Branches 0/0
100% Functions 0/0
100% Lines 6/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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

    8x

    8x

    8x

    8x

    8x

    8x

     import styled from 'styled-components';
    import {
      background,
      border,
      fontWeight,
      layout,
      space,
    } from 'styled-system';
    import {
      colorCore,
      ellipsisCore,
      fontFamilyCore,
      fontSizeCore,
      fontStyleCore,
      letterSpacingCore,
      lineHeightCore,
      textAlignCore,
      textDecorationCore,
    } from 'src/utils/styledHelpers';
    import { CodeComponent } from './component';
    import { codeDefaultProps, codePropTypes } from './utils';

    const Code = styled(CodeComponent)`
      ${background}
      ${border}
      ${colorCore}
      ${ellipsisCore}
      ${fontSizeCore}
      ${fontStyleCore}
      ${fontWeight}
      ${layout}
      ${letterSpacingCore}
      ${lineHeightCore}
      ${space}
      ${textAlignCore}
      ${textDecorationCore}
      > code {
        ${fontFamilyCore}
      }
    `;

    Code.propTypes = {
      ...codePropTypes,
    };

    Code.defaultProps = {
      ...codeDefaultProps,
    };

    const CodeBlock = styled(Code)``;

    CodeBlock.propTypes = {
      ...codePropTypes,
    };

    CodeBlock.defaultProps = {
      ...codeDefaultProps,
      display: 'block',
      my: [1, null, 2],
      overflowX: 'auto',
      p: [1, 2, 3],
    };

    /** @component */
    export { Code, CodeBlock };