React App




/* -----  Card.jsx -------*/

import { border, color, space, layout } from '@styled-system/prop-types';
import PropTypes from 'react'
 
// Apply proptypes from styled system + custom prop types
Card.propTypes = {
     id: PropTypes.string.isRequired,
     variant: PropTypes.string,
     ...border,
     ...color,
     ...space,
     ...layout,
}

// Apply default props
Card.defaultProps = {
  borderRadius: 2,
  bg: 'white',
  p: 2,
  variant: ""
}

/* -----  index.jsx -------*/

import Card from './Card'
import { StyledSystemPropsTable as PropsTable } from 'styled-system-props-table'

// This function will decorate the proptype data with additional info
const transformProps = (name = '', properties = {}) => {
  if (name === 'variant') return {
    ...properties,
    description: <>
      <div><strong>Card variants</strong></div>
      <ul>
        <li><strong>product</strong> large card, lots of padding horizontally stacked</li>
        <li><strong>product-small</strong> small card for sidebars</li>
        <li><strong>info</strong> small card with sharp corners and no box-shadow</li>
      </ul>
    </>
  }
}

return () => {
  <Card maxWidth={950} mx="auto" my={2} px={0} py={2} bg="white">
    <PropsTable
      component={Card}
      theme={theme}
      transformProps={transformProps}
    />
  </Card>
}

Name	Type	Default	Description	Theme values
id*	string
opacity	number, string, array, object
variant	string	""	Card variants product large card, lots of padding horizontally stacked product-small small card for sidebars info small card with sharp corners and no box-shadow
m	number, string, array, object		margin	[0,4,8,16,32,64]
mb	number, string, array, object		margin-bottom	[0,4,8,16,32,64]
ml	number, string, array, object		margin-left	[0,4,8,16,32,64]
mr	number, string, array, object		margin-right	[0,4,8,16,32,64]
mt	number, string, array, object		margin-top	[0,4,8,16,32,64]
mx	number, string, array, object		padding	[0,4,8,16,32,64]
my	number, string, array, object		margin-top & margin-bottom	[0,4,8,16,32,64]
p	number, string, array, object	2	padding	[0,4,8,16,32,64]
pb	number, string, array, object		padding-bottom	[0,4,8,16,32,64]
pl	number, string, array, object		padding-left	[0,4,8,16,32,64]
pr	number, string, array, object		padding-right	[0,4,8,16,32,64]
pt	number, string, array, object		padding-top	[0,4,8,16,32,64]
px	number, string, array, object		padding-left & padding-right	[0,4,8,16,32,64]
py	number, string, array, object		padding-top & padding-bottom	[0,4,8,16,32,64]
margin	number, string, array, object		margin	[0,4,8,16,32,64]
marginBottom	number, string, array, object		margin-bottom	[0,4,8,16,32,64]
marginLeft	number, string, array, object		margin-left	[0,4,8,16,32,64]
marginRight	number, string, array, object		margin-right	[0,4,8,16,32,64]
marginTop	number, string, array, object		margin-top	[0,4,8,16,32,64]
marginX	number, string, array, object		margin-left & margin-right	[0,4,8,16,32,64]
marginY	number, string, array, object		margin-top & margin-bottom	[0,4,8,16,32,64]
padding	number, string, array, object		padding	[0,4,8,16,32,64]
paddingBottom	number, string, array, object		padding-bottom	[0,4,8,16,32,64]
paddingLeft	number, string, array, object		padding-left	[0,4,8,16,32,64]
paddingRight	number, string, array, object		padding-right	[0,4,8,16,32,64]
paddingTop	number, string, array, object		padding-top	[0,4,8,16,32,64]
paddingX	number, string, array, object		padding-left & padding-right	[0,4,8,16,32,64]
paddingY	number, string, array, object		padding-top & padding-bottom	[0,4,8,16,32,64]
backgroundColor	number, string, array, object		background-color	{"eggshell":"#f4f1de","terracotta":"#e07a5f","independence":"#3d405b","green":"#81b29a","champagne":"#f2cc8f","white":"#fff","black":"#000","link":"#3f51b5","grey":["rgb(50,50,50)","rgb(100,100,100)","rgb(150,150,150)","rgb(200,200,200)"]}
bg	number, string, array, object	"white"	background-color	{"eggshell":"#f4f1de","terracotta":"#e07a5f","independence":"#3d405b","green":"#81b29a","champagne":"#f2cc8f","white":"#fff","black":"#000","link":"#3f51b5","grey":["rgb(50,50,50)","rgb(100,100,100)","rgb(150,150,150)","rgb(200,200,200)"]}
color	number, string, array, object		color	{"eggshell":"#f4f1de","terracotta":"#e07a5f","independence":"#3d405b","green":"#81b29a","champagne":"#f2cc8f","white":"#fff","black":"#000","link":"#3f51b5","grey":["rgb(50,50,50)","rgb(100,100,100)","rgb(150,150,150)","rgb(200,200,200)"]}
display	number, string, array, object		display
height	number, string, array, object		height	[100,200,400,620,800,1200]
maxHeight	number, string, array, object		max-height	[100,200,400,620,800,1200]
maxWidth	number, string, array, object		max-width	[100,200,400,620,800,1200]
minHeight	number, string, array, object		min-height	[100,200,400,620,800,1200]
minWidth	number, string, array, object		min-width	[100,200,400,620,800,1200]
overflow	number, string, array, object		overflow
overflowX	number, string, array, object		overflow-x
overflowY	number, string, array, object		overflow-y
size	number, string, array, object		width & height	[100,200,400,620,800,1200]
verticalAlign	number, string, array, object		vetical-align
width	number, string, array, object		width	[100,200,400,620,800,1200]
border	number, string, array, object		border	{}
borderBottom	number, string, array, object		border-bottom	{}
borderBottomColor	number, string, array, object		border-bottom-color	{"eggshell":"#f4f1de","terracotta":"#e07a5f","independence":"#3d405b","green":"#81b29a","champagne":"#f2cc8f","white":"#fff","black":"#000","link":"#3f51b5","grey":["rgb(50,50,50)","rgb(100,100,100)","rgb(150,150,150)","rgb(200,200,200)"]}
borderBottomLeftRadius	number, string, array, object		border-bottom-left-radius	["2px","4px","6px","12px"]
borderBottomRightRadius	number, string, array, object		border-bottom-right-radius	["2px","4px","6px","12px"]
borderBottomStyle	number, string, array, object		border-bottom-style
borderBottomWidth	number, string, array, object		border-bottom-width	["none","1px","2px"]
borderColor	number, string, array, object		border-color	{"eggshell":"#f4f1de","terracotta":"#e07a5f","independence":"#3d405b","green":"#81b29a","champagne":"#f2cc8f","white":"#fff","black":"#000","link":"#3f51b5","grey":["rgb(50,50,50)","rgb(100,100,100)","rgb(150,150,150)","rgb(200,200,200)"]}
borderLeft	number, string, array, object		border-left	{}
borderLeftColor	number, string, array, object		border-left-color	{"eggshell":"#f4f1de","terracotta":"#e07a5f","independence":"#3d405b","green":"#81b29a","champagne":"#f2cc8f","white":"#fff","black":"#000","link":"#3f51b5","grey":["rgb(50,50,50)","rgb(100,100,100)","rgb(150,150,150)","rgb(200,200,200)"]}
borderLeftStyle	number, string, array, object		borderLeftStyle
borderLeftWidth	number, string, array, object		border-left-width	["none","1px","2px"]
borderRadius	number, string, array, object	2	border-radius	["2px","4px","6px","12px"]
borderRight	number, string, array, object		border-right	{}
borderRightColor	number, string, array, object		border-right-color	{"eggshell":"#f4f1de","terracotta":"#e07a5f","independence":"#3d405b","green":"#81b29a","champagne":"#f2cc8f","white":"#fff","black":"#000","link":"#3f51b5","grey":["rgb(50,50,50)","rgb(100,100,100)","rgb(150,150,150)","rgb(200,200,200)"]}
borderRightStyle	number, string, array, object		border-right-style
borderRightWidth	number, string, array, object		border-right-width	["none","1px","2px"]
borderStyle	number, string, array, object		border-style
borderTop	number, string, array, object		border-top	{}
borderTopColor	number, string, array, object		border-top-color	{"eggshell":"#f4f1de","terracotta":"#e07a5f","independence":"#3d405b","green":"#81b29a","champagne":"#f2cc8f","white":"#fff","black":"#000","link":"#3f51b5","grey":["rgb(50,50,50)","rgb(100,100,100)","rgb(150,150,150)","rgb(200,200,200)"]}
borderTopLeftRadius	number, string, array, object		border-top-left-radius	["2px","4px","6px","12px"]
borderTopRightRadius	number, string, array, object		border-top-right-radius	["2px","4px","6px","12px"]
borderTopStyle	number, string, array, object		border-top-style
borderTopWidth	number, string, array, object		border-top-width	["none","1px","2px"]
borderWidth	number, string, array, object		border-width	["none","1px","2px"]
borderX	number, string, array, object		border-right & border-left	{}
borderY	number, string, array, object		border-top & border-bottom	{}