# All files / components/CloseButton index.js

100% Statements 16/16
100% Branches 0/0
100% Functions 7/7
100% Lines 16/16

    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106

    2x

    6x

    6x

    6x

    6x

    4x
    4x

    4x
    4x
    4x

    4x

    6x

    6x

    2x

    2x

    2x

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

    import { textColor, themeColor } from '../../utils/style';

    const CloseButton = (props) => {
      const {
        onClick, size, border, boxShadow, margin,
      } = props;

      const StyledDismissButtonContainer = styled.div`
        position: absolute;
        top: 0px;
        right: 0px;
      `;

      StyledDismissButtonContainer.displayName = 'StyledDismissButtonContainer';

      const StyledDismissButton = styled.span`
        width: ${size}px;
        height: ${size}px;
        position: absolute;
        z-index: 2147483647;
        cursor: pointer;
        right: 0px;
        top: 0px;
        color: ${(innerProps) => textColor(innerProps.theme, 'dark', 'primary')};
        background-color: ${(innerProps) => themeColor(innerProps.theme, 'foreground', 'base')};
        opacity: 0.7;
        padding: ${size / 2 + 1}px;
        border: ${border};
        box-shadow: ${boxShadow};
        border-radius: 50%;
        font-size: ${(innerProps) => innerProps.theme.typography.classes.caption.fontSize};
        line-height: ${(innerProps) => innerProps.theme.typography.classes.caption.lineHeight};
        font-weight: ${(innerProps) => innerProps.theme.typography.weights.fontWeightMedium};
        margin: ${margin};

        &:before, &:after {
          position: absolute;
          left: ${size}px;
          top: ${size / 2 + 2}px;
          content: ' ';
          height: ${size}px;
          width: 2px;
          background-color: ${(innerProps) => textColor(innerProps.theme, 'dark', 'primary')};
        }

        &:before {
          transform: rotate(45deg);
        }

        &:after {
          transform: rotate(-45deg);
        }

        &:hover {
          opacity: 1;
        }
      `;
      StyledDismissButton.displayName = 'StyledDismissButton';

      return (
        <StyledDismissButtonContainer>
          <StyledDismissButton onClick={onClick}></StyledDismissButton>
        </StyledDismissButtonContainer>
      );
    };

    CloseButton.propTypes = {
      /**
       * Function to execute when user clicks on Notification content
       */
      onClick: PropTypes.func,
      /**
       * Set the close size (in pixeles)
       */
      size: PropTypes.number,
      /**
       * border color for the notification
       */
      border: PropTypes.string,
      /**
       * margin for the notification box
       */
      margin: PropTypes.string,
      /**
       * boxShadow: shadow for the close button for the notification
       */
      boxShadow: PropTypes.string,
    };

    CloseButton.defaultProps = {
      onClick: null,
      size: 10,
      margin: '0px',
      border: 'none',
      boxShadow: 'none',
    };

    CloseButton.displayName = 'CloseButton';

    export default CloseButton;