All files / elements/Card styled.js

100% Statements 11/11
100% Branches 0/0
100% Functions 2/2
100% Lines 11/11

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 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 107 108 109 110 111 112 113 114 115 116 117 118                    1x   1x       1x       1x                                                                                                                                             1x           8x 8x   9x 9x       8x       8x                
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import propTypes from '@styled-system/prop-types';
import { withHideable } from 'src/elements/utils/Hideable';
import { Box, Flex } from 'src/elements/grid';
import { Header, Paragraph } from 'src/elements/typography';
import { CardComponent } from './component';
import { cardPropTypes, cardDefaultProps } from './utils';
 
const Card = styled(withHideable(CardComponent))``;
 
Card.propTypes = {
  ...cardPropTypes,
};
 
Card.defaultProps = {
  ...cardDefaultProps,
};
 
const subComponentStarter = [
  {
    component: Flex,
    componentDefaultProps: {},
    componentPropTypes: {},
    name: 'Actions',
  },
  {
    component: Box,
    componentDefaultProps: {},
    componentPropTypes: {},
    name: 'Body',
  },
  {
    component: Box,
    componentDefaultProps: {},
    componentPropTypes: {},
    name: 'Inner',
  },
  {
    component: Box,
    componentDefaultProps: {
      width: 1,
    },
    componentPropTypes: {
      ...propTypes.layout,
    },
    name: 'RichMedia',
  },
  {
    component: Box,
    componentDefaultProps: {
      width: 1,
    },
    componentPropTypes: {
      ...propTypes.layout,
    },
    name: 'SecondaryMedia',
  },
  {
    component: Paragraph,
    componentDefaultProps: {
      color: 'gray',
      mb: 0,
      sm: true,
    },
    componentPropTypes: {
      ...propTypes.space,
      color: PropTypes.string,
      sm: PropTypes.bool,
    },
    name: 'Subtitle',
  },
  {
    component: Box,
    componentDefaultProps: {},
    componentPropTypes: {},
    name: 'Thumbnail',
  },
  {
    component: Header.h5,
    componentDefaultProps: {
      mb: 0,
    },
    componentPropTypes: {
      ...propTypes.space,
    },
    name: 'Title',
  },
];
 
subComponentStarter.forEach(starter => {
  const {
    name,
    componentDefaultProps,
    componentPropTypes,
    component: SubComponent,
  } = starter;
  Card[name] = props => {
    // eslint-disable-next-line react/prop-types
    const { children } = props;
    return (
      <SubComponent {...props}>{children}</SubComponent>
    );
  };
  Card[name].propTypes = {
    ...componentPropTypes,
    children: PropTypes.node,
  };
  Card[name].defaultProps = {
    ...componentDefaultProps,
    children: '',
  };
});
 
/** @component */
export { Card };