| 1 | {"version":3,"file":"Card.js","sources":["../src/components/Card/Card.js"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { useInside } from 'use-inside'\nimport { css } from 'styled-components'\nimport { GU, RADIUS } from '../../style'\nimport { useTheme } from '../../theme'\nimport ButtonBase from '../ButtonBase/ButtonBase'\n\nconst DEFAULT_WIDTH = 35 * GU\nconst DEFAULT_HEIGHT = 40 * GU\n\nfunction dimension(insideCardLayout, value, defaultValue) {\n if (insideCardLayout) {\n return '100%'\n }\n if (typeof value === 'number') {\n value = `${value}px`\n }\n return value === undefined ? defaultValue : value\n}\n\nfunction Card({ children, width, height, onClick, ...props }) {\n const theme = useTheme()\n const [insideCardLayout] = useInside('CardLayout')\n const interactive = Boolean(onClick)\n\n const interactiveProps = interactive\n ? { as: ButtonBase, element: 'div', focusRingRadius: RADIUS, onClick }\n : {}\n\n const cssWidth = dimension(insideCardLayout, width, `${DEFAULT_WIDTH}px`)\n const cssHeight = dimension(insideCardLayout, height, `${DEFAULT_HEIGHT}px`)\n\n return (\n <div\n {...interactiveProps}\n css={`\n position: relative;\n width: ${cssWidth};\n height: ${cssHeight};\n background: ${theme.surface};\n border: 1px solid ${theme.border};\n border-radius: ${RADIUS}px;\n cursor: ${interactive ? 'pointer' : 'default'};\n\n // Default layout\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n ${interactive &&\n css`\n border: 0;\n box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);\n transition-property: transform, box-shadow;\n transition-duration: 50ms;\n transition-timing-function: ease-in-out;\n\n // Reset some styles applied by ButtonBase\n text-align: left;\n white-space: normal;\n\n &:active {\n transform: translateY(1px);\n box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);\n }\n `}\n `}\n {...props}\n >\n {children}\n </div>\n )\n}\n\nCard.propTypes = {\n children: PropTypes.node,\n height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onClick: PropTypes.func,\n}\n\nexport default Card\n"],"names":["DEFAULT_WIDTH","GU","DEFAULT_HEIGHT","dimension","insideCardLayout","value","defaultValue","undefined","RADIUS","Card","children","width","height","onClick","props","theme","useTheme","useInside","interactive","Boolean","interactiveProps","as","ButtonBase","element","focusRingRadius","cssWidth","cssHeight","React","surface","border","css","propTypes","PropTypes","node","oneOfType","string","number","func"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAMA,aAAa,GAAG,KAAKC,YAA3B;AACA,IAAMC,cAAc,GAAG,KAAKD,YAA5B;;AAEA,SAASE,SAAT,CAAmBC,gBAAnB,EAAqCC,KAArC,EAA4CC,YAA5C,EAA0D;AACxD,MAAIF,gBAAJ,EAAsB;AACpB,WAAO,MAAP;AACD;;AACD,MAAI,OAAOC,KAAP,KAAiB,QAArB,EAA+B;AAC7BA,IAAAA,KAAK,aAAMA,KAAN,OAAL;AACD;;AACD,SAAOA,KAAK,KAAKE,SAAV,GAAsBD,YAAtB,GAAqCD,KAA5C;AACD;;;;;;;;;;;;;GAuBwBG;;;;;;AArBzB,SAASC,IAAT,OAA8D;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BC,MAA6B,QAA7BA,MAA6B;AAAA,MAArBC,OAAqB,QAArBA,OAAqB;AAAA,MAATC,KAAS;;AAC5D,MAAMC,KAAK,GAAGC,cAAQ,EAAtB;;AAD4D,mBAEjCC,SAAS,CAAC,YAAD,CAFwB;AAAA;AAAA,MAErDb,gBAFqD;;AAG5D,MAAMc,WAAW,GAAGC,OAAO,CAACN,OAAD,CAA3B;AAEA,MAAMO,gBAAgB,GAAGF,WAAW,GAChC;AAAEG,IAAAA,EAAE,EAAEC,kBAAN;AAAkBC,IAAAA,OAAO,EAAE,KAA3B;AAAkCC,IAAAA,eAAe,EAAEhB,gBAAnD;AAA2DK,IAAAA,OAAO,EAAPA;AAA3D,GADgC,GAEhC,EAFJ;AAIA,MAAMY,QAAQ,GAAGtB,SAAS,CAACC,gBAAD,EAAmBO,KAAnB,YAA6BX,aAA7B,QAA1B;AACA,MAAM0B,SAAS,GAAGvB,SAAS,CAACC,gBAAD,EAAmBQ,MAAnB,YAA8BV,cAA9B,QAA3B;AAEA,sBACEyB,iEACMP,gBADN,EAmCMN,KAnCN;AAAA,UAIaW,QAJb;AAAA,WAKcC,SALd;AAAA,WAMkBX,KAAK,CAACa,OANxB;AAAA,WAOwBb,KAAK,CAACc,MAP9B;AAAA,WAScX,WAAW,GAAG,SAAH,GAAe,SATxC;AAAA,WAiBMA,WAAW,IACXY,WADW;AAjBjB,MAqCGpB,QArCH,CADF;AAyCD;;AAEDD,IAAI,CAACsB,SAAL,GAAiB;AACfrB,EAAAA,QAAQ,EAAEsB,eAAS,CAACC,IADL;AAEfrB,EAAAA,MAAM,EAAEoB,eAAS,CAACE,SAAV,CAAoB,CAACF,eAAS,CAACG,MAAX,EAAmBH,eAAS,CAACI,MAA7B,CAApB,CAFO;AAGfzB,EAAAA,KAAK,EAAEqB,eAAS,CAACE,SAAV,CAAoB,CAACF,eAAS,CAACG,MAAX,EAAmBH,eAAS,CAACI,MAA7B,CAApB,CAHQ;AAIfvB,EAAAA,OAAO,EAAEmB,eAAS,CAACK;AAJJ,CAAjB;;;;"} |