@sproutsocial/seeds-react-card 1.1.11 → 1.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +22 -0
  3. package/dist/esm/index.js +23 -1043
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/index.d.mts +17 -6
  6. package/dist/index.d.ts +17 -6
  7. package/dist/index.js +41 -1047
  8. package/dist/index.js.map +1 -1
  9. package/package.json +11 -10
  10. package/src/Card.tsx +16 -4
  11. package/src/CardTypes.ts +5 -5
  12. package/src/__tests__/Card.test.tsx +33 -12
  13. package/src/__tests__/CardTypes.typetest.tsx +1 -0
  14. package/src/styles.tsx +10 -5
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../node_modules/object-assign/index.js","../src/index.ts","../src/Card.tsx","../src/styles.tsx","../../../node_modules/@styled-system/core/dist/index.esm.js","../../../node_modules/@styled-system/layout/dist/index.esm.js","../../../node_modules/@styled-system/color/dist/index.esm.js","../../../node_modules/@styled-system/typography/dist/index.esm.js","../../../node_modules/@styled-system/flexbox/dist/index.esm.js","../../../node_modules/@styled-system/grid/dist/index.esm.js","../../../node_modules/@styled-system/border/dist/index.esm.js","../../../node_modules/@styled-system/background/dist/index.esm.js","../../../node_modules/@styled-system/position/dist/index.esm.js","../../../node_modules/@styled-system/space/dist/index.esm.js","../../../node_modules/@styled-system/shadow/dist/index.esm.js","../../../node_modules/@styled-system/css/dist/index.esm.js","../../../node_modules/@styled-system/variant/dist/index.esm.js","../../../node_modules/styled-system/dist/index.esm.js","../src/utils.ts","../src/subComponents.tsx","../src/CardTypes.ts"],"sourcesContent":["/*\nobject-assign\n(c) Sindre Sorhus\n@license MIT\n*/\n\n'use strict';\n/* eslint-disable no-unused-vars */\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\nfunction toObject(val) {\n\tif (val === null || val === undefined) {\n\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t}\n\n\treturn Object(val);\n}\n\nfunction shouldUseNative() {\n\ttry {\n\t\tif (!Object.assign) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Detect buggy property enumeration order in older V8 versions.\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t\tvar test1 = new String('abc'); // eslint-disable-line no-new-wrappers\n\t\ttest1[5] = 'de';\n\t\tif (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test2 = {};\n\t\tfor (var i = 0; i < 10; i++) {\n\t\t\ttest2['_' + String.fromCharCode(i)] = i;\n\t\t}\n\t\tvar order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t\t\treturn test2[n];\n\t\t});\n\t\tif (order2.join('') !== '0123456789') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test3 = {};\n\t\t'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t\t\ttest3[letter] = letter;\n\t\t});\n\t\tif (Object.keys(Object.assign({}, test3)).join('') !==\n\t\t\t\t'abcdefghijklmnopqrst') {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t} catch (err) {\n\t\t// We don't expect any of the above to throw, but better to be safe.\n\t\treturn false;\n\t}\n}\n\nmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\tvar from;\n\tvar to = toObject(target);\n\tvar symbols;\n\n\tfor (var s = 1; s < arguments.length; s++) {\n\t\tfrom = Object(arguments[s]);\n\n\t\tfor (var key in from) {\n\t\t\tif (hasOwnProperty.call(from, key)) {\n\t\t\t\tto[key] = from[key];\n\t\t\t}\n\t\t}\n\n\t\tif (getOwnPropertySymbols) {\n\t\t\tsymbols = getOwnPropertySymbols(from);\n\t\t\tfor (var i = 0; i < symbols.length; i++) {\n\t\t\t\tif (propIsEnumerable.call(from, symbols[i])) {\n\t\t\t\t\tto[symbols[i]] = from[symbols[i]];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn to;\n};\n","import Card from \"./Card\";\n\nexport default Card;\nexport { Card };\nexport { CardHeader, CardContent, CardFooter, CardLink } from \"./subComponents\";\nexport * from \"./CardTypes\";\n","import React, { useRef, useState } from \"react\";\nimport { StyledCard } from \"./styles\";\nimport type { TypeCardProps, TypeCardContext } from \"./CardTypes\";\nimport { SubComponentContext, onKeyDown } from \"./utils\";\nimport { SelectedIcon } from \"./subComponents\";\n\n/**\n * @link https://seeds.sproutsocial.com/components/card/\n *\n * Avoid nesting interactive content inside a Card with role='button'.\n *\n * Interactive content: \"a\", \"audio\", \"button\", \"embed\", \"iframe\", \"img\", \"input\", \"label\", \"select\", \"textarea\", \"video\"\n * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content\n *\n * @example\n * <Card role=\"button\" onClick={_onClick}>\n * <Button>Click me</Button>\n * </Card>\n */\n\nconst Card = ({\n children,\n disabled = false,\n elevation = \"low\",\n href,\n onClick,\n role = \"presentation\",\n selected,\n ...rest\n}: TypeCardProps) => {\n const [hasSubComponent, setHasSubComponent] = useState<boolean>(false);\n const containerRef = useRef<HTMLDivElement>(null);\n const linkRef = useRef<HTMLAnchorElement>(null);\n const isRoleLink = role === \"link\";\n const checkedConditions = role === \"checkbox\" ? selected : undefined;\n\n const cardContext: TypeCardContext = {\n setHasSubComponent: setHasSubComponent,\n href: href,\n linkRef: linkRef,\n };\n\n const handleClickConditions: React.MouseEventHandler = (e) =>\n isRoleLink ? linkRef.current?.click() : onClick?.(e);\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) =>\n onKeyDown({ e, href, onClick, ref: containerRef, role });\n\n return (\n <StyledCard\n tabIndex={isRoleLink ? -1 : 0}\n role={isRoleLink ? undefined : role}\n onClick={handleClickConditions}\n onKeyDown={handleKeyDown}\n $elevation={elevation}\n ref={containerRef}\n $selected={selected}\n aria-checked={checkedConditions}\n $disabled={disabled}\n aria-disabled={disabled && disabled}\n $compositionalComponents={hasSubComponent}\n $isRoleLink={isRoleLink}\n {...rest}\n >\n <SelectedIcon $selected={selected} />\n <SubComponentContext.Provider value={cardContext}>\n {children}\n </SubComponentContext.Provider>\n </StyledCard>\n );\n};\n\nexport default Card;\n","import styled from \"styled-components\";\nimport {\n border,\n color,\n flexbox,\n grid,\n layout,\n position,\n space,\n typography,\n} from \"styled-system\";\nimport { focusRing, disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport type {\n TypeStyledCard,\n TypeCardArea,\n TypeStyledSelectedIcon,\n TypeCardLink,\n} from \"./CardTypes\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n\n// TODO: Would be really cool to cherry pick specific props from style functions. For example,\n// removing the css prop 'color' from the color function or importing just the specific\n// props the component needs. It appears to be possible with some and not others.\n// https://github.com/styled-system/styled-system/issues/1569\n\nexport const StyledCardContent = styled.div<TypeCardArea>`\n display: flex;\n flex-direction: column;\n padding: ${({ theme }) => theme.space[400]};\n box-sizing: border-box;\n\n ${border}\n ${color}\n ${flexbox}\n ${grid}\n ${layout}\n ${space}\n`;\n\nexport const StyledCardHeader = styled(StyledCardContent)`\n flex-direction: row;\n border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid\n ${theme.colors.container.border.base}`};\n border-top-left-radius: ${({ theme }) => theme.radii.inner};\n border-top-right-radius: ${({ theme }) => theme.radii.inner};\n\n ${border}\n ${color}\n ${flexbox}\n ${grid}\n ${layout}\n ${space}\n`;\n\nexport const StyledCardFooter = styled(StyledCardContent)`\n flex-direction: row;\n border-top: ${({ theme }) => `${theme.borderWidths[500]} solid\n ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.inner};\n border-bottom-right-radius: ${({ theme }) => theme.radii.inner};\n\n ${border}\n ${color}\n ${flexbox}\n ${grid}\n ${layout}\n ${space}\n`;\n\nexport const SelectedIconWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: -8px;\n right: -8px;\n`;\n\nexport const StyledSelectedIcon = styled(Icon)<TypeStyledSelectedIcon>`\n border-radius: 50%;\n background: ${({ theme }) => theme.colors.container.background.base};\n opacity: 0;\n transition: opacity ${({ theme }) => theme.duration.medium};\n\n ${({ $selected }) =>\n $selected &&\n `\n opacity: 1;\n `}\n`;\n\nexport const StyledCardLink = styled.a<TypeCardLink>`\n font-family: ${(p) => p.theme.fontFamily};\n font-weight: ${(p) => p.theme.fontWeights.bold};\n color: ${(p) => p.theme.colors.text.headline};\n ${(p) => p.theme.typography[400]};\n\n ${color}\n ${typography}\n`;\n\nexport const StyledCard = styled.div<TypeStyledCard>`\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n margin: 0;\n background: ${({ theme }) => theme.colors.container.background.base};\n border: ${({ theme }) => theme.borderWidths[500]} solid\n ${({ theme }) => theme.colors.container.border.base};\n padding: ${({ theme, $compositionalComponents }) =>\n $compositionalComponents ? 0 : theme.space[400]};\n border-radius: ${({ theme }) => theme.radii.outer};\n transition: box-shadow ${({ theme }) => theme.duration.medium},\n border ${({ theme }) => theme.duration.medium};\n\n &[role=\"button\"],\n &[role=\"checkbox\"] {\n cursor: pointer;\n }\n\n ${({ $isRoleLink }) =>\n $isRoleLink &&\n `\n\t\tcursor: pointer;\n\t`}\n\n &:hover {\n box-shadow: ${({ theme, $elevation = \"low\" }) => theme.shadows[$elevation]};\n }\n\n &:focus-within {\n ${({ $isRoleLink }) => ($isRoleLink ? focusRing : null)}\n ${StyledCardLink}:focus {\n border: none;\n box-shadow: none;\n outline: none;\n }\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${({ $disabled }) =>\n $disabled &&\n `\n ${disabled}\n `}\n\n ${({ $selected, theme }) =>\n $selected &&\n `\n border: ${theme.borderWidths[500]} solid ${theme.colors.container.border.selected}; \n `}\n\n ${border}\n ${color}\n ${flexbox}\n ${grid}\n ${layout}\n ${position}\n ${space}\n`;\n\nexport const StyledCardAffordance = styled(Icon)`\n ${StyledCard}:hover & {\n transform: translateX(${(p) => p.theme.space[200]});\n }\n transition: ${(p) => p.theme.duration.medium};\n`;\n","import assign from 'object-assign';\nexport var merge = function merge(a, b) {\n var result = assign({}, a, b);\n\n for (var key in a) {\n var _assign;\n\n if (!a[key] || typeof b[key] !== 'object') continue;\n assign(result, (_assign = {}, _assign[key] = assign(a[key], b[key]), _assign));\n }\n\n return result;\n}; // sort object-value responsive styles\n\nvar sort = function sort(obj) {\n var next = {};\n Object.keys(obj).sort(function (a, b) {\n return a.localeCompare(b, undefined, {\n numeric: true,\n sensitivity: 'base'\n });\n }).forEach(function (key) {\n next[key] = obj[key];\n });\n return next;\n};\n\nvar defaults = {\n breakpoints: [40, 52, 64].map(function (n) {\n return n + 'em';\n })\n};\n\nvar createMediaQuery = function createMediaQuery(n) {\n return \"@media screen and (min-width: \" + n + \")\";\n};\n\nvar getValue = function getValue(n, scale) {\n return get(scale, n, n);\n};\n\nexport var get = function get(obj, key, def, p, undef) {\n key = key && key.split ? key.split('.') : [key];\n\n for (p = 0; p < key.length; p++) {\n obj = obj ? obj[key[p]] : undef;\n }\n\n return obj === undef ? def : obj;\n};\nexport var createParser = function createParser(config) {\n var cache = {};\n\n var parse = function parse(props) {\n var styles = {};\n var shouldSort = false;\n var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;\n\n for (var key in props) {\n if (!config[key]) continue;\n var sx = config[key];\n var raw = props[key];\n var scale = get(props.theme, sx.scale, sx.defaults);\n\n if (typeof raw === 'object') {\n cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, 'breakpoints', defaults.breakpoints);\n\n if (Array.isArray(raw)) {\n cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));\n styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));\n continue;\n }\n\n if (raw !== null) {\n styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));\n shouldSort = true;\n }\n\n continue;\n }\n\n assign(styles, sx(raw, scale, props));\n } // sort object-based responsive styles\n\n\n if (shouldSort) {\n styles = sort(styles);\n }\n\n return styles;\n };\n\n parse.config = config;\n parse.propNames = Object.keys(config);\n parse.cache = cache;\n var keys = Object.keys(config).filter(function (k) {\n return k !== 'config';\n });\n\n if (keys.length > 1) {\n keys.forEach(function (key) {\n var _createParser;\n\n parse[key] = createParser((_createParser = {}, _createParser[key] = config[key], _createParser));\n });\n }\n\n return parse;\n};\n\nvar parseResponsiveStyle = function parseResponsiveStyle(mediaQueries, sx, scale, raw, _props) {\n var styles = {};\n raw.slice(0, mediaQueries.length).forEach(function (value, i) {\n var media = mediaQueries[i];\n var style = sx(value, scale, _props);\n\n if (!media) {\n assign(styles, style);\n } else {\n var _assign2;\n\n assign(styles, (_assign2 = {}, _assign2[media] = assign({}, styles[media], style), _assign2));\n }\n });\n return styles;\n};\n\nvar parseResponsiveObject = function parseResponsiveObject(breakpoints, sx, scale, raw, _props) {\n var styles = {};\n\n for (var key in raw) {\n var breakpoint = breakpoints[key];\n var value = raw[key];\n var style = sx(value, scale, _props);\n\n if (!breakpoint) {\n assign(styles, style);\n } else {\n var _assign3;\n\n var media = createMediaQuery(breakpoint);\n assign(styles, (_assign3 = {}, _assign3[media] = assign({}, styles[media], style), _assign3));\n }\n }\n\n return styles;\n};\n\nexport var createStyleFunction = function createStyleFunction(_ref) {\n var properties = _ref.properties,\n property = _ref.property,\n scale = _ref.scale,\n _ref$transform = _ref.transform,\n transform = _ref$transform === void 0 ? getValue : _ref$transform,\n defaultScale = _ref.defaultScale;\n properties = properties || [property];\n\n var sx = function sx(value, scale, _props) {\n var result = {};\n var n = transform(value, scale, _props);\n if (n === null) return;\n properties.forEach(function (prop) {\n result[prop] = n;\n });\n return result;\n };\n\n sx.scale = scale;\n sx.defaults = defaultScale;\n return sx;\n}; // new v5 API\n\nexport var system = function system(args) {\n if (args === void 0) {\n args = {};\n }\n\n var config = {};\n Object.keys(args).forEach(function (key) {\n var conf = args[key];\n\n if (conf === true) {\n // shortcut definition\n config[key] = createStyleFunction({\n property: key,\n scale: key\n });\n return;\n }\n\n if (typeof conf === 'function') {\n config[key] = conf;\n return;\n }\n\n config[key] = createStyleFunction(conf);\n });\n var parser = createParser(config);\n return parser;\n};\nexport var compose = function compose() {\n var config = {};\n\n for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {\n parsers[_key] = arguments[_key];\n }\n\n parsers.forEach(function (parser) {\n if (!parser || !parser.config) return;\n assign(config, parser.config);\n });\n var parser = createParser(config);\n return parser;\n};\n","import { system, get } from '@styled-system/core';\n\nvar isNumber = function isNumber(n) {\n return typeof n === 'number' && !isNaN(n);\n};\n\nvar getWidth = function getWidth(n, scale) {\n return get(scale, n, !isNumber(n) || n > 1 ? n : n * 100 + '%');\n};\n\nvar config = {\n width: {\n property: 'width',\n scale: 'sizes',\n transform: getWidth\n },\n height: {\n property: 'height',\n scale: 'sizes'\n },\n minWidth: {\n property: 'minWidth',\n scale: 'sizes'\n },\n minHeight: {\n property: 'minHeight',\n scale: 'sizes'\n },\n maxWidth: {\n property: 'maxWidth',\n scale: 'sizes'\n },\n maxHeight: {\n property: 'maxHeight',\n scale: 'sizes'\n },\n size: {\n properties: ['width', 'height'],\n scale: 'sizes'\n },\n overflow: true,\n overflowX: true,\n overflowY: true,\n display: true,\n verticalAlign: true\n};\nexport var layout = system(config);\nexport default layout;\n","import { system } from '@styled-system/core';\nvar config = {\n color: {\n property: 'color',\n scale: 'colors'\n },\n backgroundColor: {\n property: 'backgroundColor',\n scale: 'colors'\n },\n opacity: true\n};\nconfig.bg = config.backgroundColor;\nexport var color = system(config);\nexport default color;\n","import { system } from '@styled-system/core';\nvar defaults = {\n fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]\n};\nvar config = {\n fontFamily: {\n property: 'fontFamily',\n scale: 'fonts'\n },\n fontSize: {\n property: 'fontSize',\n scale: 'fontSizes',\n defaultScale: defaults.fontSizes\n },\n fontWeight: {\n property: 'fontWeight',\n scale: 'fontWeights'\n },\n lineHeight: {\n property: 'lineHeight',\n scale: 'lineHeights'\n },\n letterSpacing: {\n property: 'letterSpacing',\n scale: 'letterSpacings'\n },\n textAlign: true,\n fontStyle: true\n};\nexport var typography = system(config);\nexport default typography;\n","import { system } from '@styled-system/core';\nvar config = {\n alignItems: true,\n alignContent: true,\n justifyItems: true,\n justifyContent: true,\n flexWrap: true,\n flexDirection: true,\n // item\n flex: true,\n flexGrow: true,\n flexShrink: true,\n flexBasis: true,\n justifySelf: true,\n alignSelf: true,\n order: true\n};\nexport var flexbox = system(config);\nexport default flexbox;\n","import { system } from '@styled-system/core';\nvar defaults = {\n space: [0, 4, 8, 16, 32, 64, 128, 256, 512]\n};\nvar config = {\n gridGap: {\n property: 'gridGap',\n scale: 'space',\n defaultScale: defaults.space\n },\n gridColumnGap: {\n property: 'gridColumnGap',\n scale: 'space',\n defaultScale: defaults.space\n },\n gridRowGap: {\n property: 'gridRowGap',\n scale: 'space',\n defaultScale: defaults.space\n },\n gridColumn: true,\n gridRow: true,\n gridAutoFlow: true,\n gridAutoColumns: true,\n gridAutoRows: true,\n gridTemplateColumns: true,\n gridTemplateRows: true,\n gridTemplateAreas: true,\n gridArea: true\n};\nexport var grid = system(config);\nexport default grid;\n","import { system } from '@styled-system/core';\nvar config = {\n border: {\n property: 'border',\n scale: 'borders'\n },\n borderWidth: {\n property: 'borderWidth',\n scale: 'borderWidths'\n },\n borderStyle: {\n property: 'borderStyle',\n scale: 'borderStyles'\n },\n borderColor: {\n property: 'borderColor',\n scale: 'colors'\n },\n borderRadius: {\n property: 'borderRadius',\n scale: 'radii'\n },\n borderTop: {\n property: 'borderTop',\n scale: 'borders'\n },\n borderTopLeftRadius: {\n property: 'borderTopLeftRadius',\n scale: 'radii'\n },\n borderTopRightRadius: {\n property: 'borderTopRightRadius',\n scale: 'radii'\n },\n borderRight: {\n property: 'borderRight',\n scale: 'borders'\n },\n borderBottom: {\n property: 'borderBottom',\n scale: 'borders'\n },\n borderBottomLeftRadius: {\n property: 'borderBottomLeftRadius',\n scale: 'radii'\n },\n borderBottomRightRadius: {\n property: 'borderBottomRightRadius',\n scale: 'radii'\n },\n borderLeft: {\n property: 'borderLeft',\n scale: 'borders'\n },\n borderX: {\n properties: ['borderLeft', 'borderRight'],\n scale: 'borders'\n },\n borderY: {\n properties: ['borderTop', 'borderBottom'],\n scale: 'borders'\n }\n};\nconfig.borderTopWidth = {\n property: 'borderTopWidth',\n scale: 'borderWidths'\n};\nconfig.borderTopColor = {\n property: 'borderTopColor',\n scale: 'colors'\n};\nconfig.borderTopStyle = {\n property: 'borderTopStyle',\n scale: 'borderStyles'\n};\nconfig.borderTopLeftRadius = {\n property: 'borderTopLeftRadius',\n scale: 'radii'\n};\nconfig.borderTopRightRadius = {\n property: 'borderTopRightRadius',\n scale: 'radii'\n};\nconfig.borderBottomWidth = {\n property: 'borderBottomWidth',\n scale: 'borderWidths'\n};\nconfig.borderBottomColor = {\n property: 'borderBottomColor',\n scale: 'colors'\n};\nconfig.borderBottomStyle = {\n property: 'borderBottomStyle',\n scale: 'borderStyles'\n};\nconfig.borderBottomLeftRadius = {\n property: 'borderBottomLeftRadius',\n scale: 'radii'\n};\nconfig.borderBottomRightRadius = {\n property: 'borderBottomRightRadius',\n scale: 'radii'\n};\nconfig.borderLeftWidth = {\n property: 'borderLeftWidth',\n scale: 'borderWidths'\n};\nconfig.borderLeftColor = {\n property: 'borderLeftColor',\n scale: 'colors'\n};\nconfig.borderLeftStyle = {\n property: 'borderLeftStyle',\n scale: 'borderStyles'\n};\nconfig.borderRightWidth = {\n property: 'borderRightWidth',\n scale: 'borderWidths'\n};\nconfig.borderRightColor = {\n property: 'borderRightColor',\n scale: 'colors'\n};\nconfig.borderRightStyle = {\n property: 'borderRightStyle',\n scale: 'borderStyles'\n};\nexport var border = system(config);\nexport default border;\n","import { system } from '@styled-system/core';\nvar config = {\n background: true,\n backgroundImage: true,\n backgroundSize: true,\n backgroundPosition: true,\n backgroundRepeat: true\n};\nconfig.bgImage = config.backgroundImage;\nconfig.bgSize = config.backgroundSize;\nconfig.bgPosition = config.backgroundPosition;\nconfig.bgRepeat = config.backgroundRepeat;\nexport var background = system(config);\nexport default background;\n","import { system } from '@styled-system/core';\nvar defaults = {\n space: [0, 4, 8, 16, 32, 64, 128, 256, 512]\n};\nvar config = {\n position: true,\n zIndex: {\n property: 'zIndex',\n scale: 'zIndices'\n },\n top: {\n property: 'top',\n scale: 'space',\n defaultScale: defaults.space\n },\n right: {\n property: 'right',\n scale: 'space',\n defaultScale: defaults.space\n },\n bottom: {\n property: 'bottom',\n scale: 'space',\n defaultScale: defaults.space\n },\n left: {\n property: 'left',\n scale: 'space',\n defaultScale: defaults.space\n }\n};\nexport var position = system(config);\nexport default position;\n","import { get, system, compose } from '@styled-system/core';\nvar defaults = {\n space: [0, 4, 8, 16, 32, 64, 128, 256, 512]\n};\n\nvar isNumber = function isNumber(n) {\n return typeof n === 'number' && !isNaN(n);\n};\n\nvar getMargin = function getMargin(n, scale) {\n if (!isNumber(n)) {\n return get(scale, n, n);\n }\n\n var isNegative = n < 0;\n var absolute = Math.abs(n);\n var value = get(scale, absolute, absolute);\n\n if (!isNumber(value)) {\n return isNegative ? '-' + value : value;\n }\n\n return value * (isNegative ? -1 : 1);\n};\n\nvar configs = {};\nconfigs.margin = {\n margin: {\n property: 'margin',\n scale: 'space',\n transform: getMargin,\n defaultScale: defaults.space\n },\n marginTop: {\n property: 'marginTop',\n scale: 'space',\n transform: getMargin,\n defaultScale: defaults.space\n },\n marginRight: {\n property: 'marginRight',\n scale: 'space',\n transform: getMargin,\n defaultScale: defaults.space\n },\n marginBottom: {\n property: 'marginBottom',\n scale: 'space',\n transform: getMargin,\n defaultScale: defaults.space\n },\n marginLeft: {\n property: 'marginLeft',\n scale: 'space',\n transform: getMargin,\n defaultScale: defaults.space\n },\n marginX: {\n properties: ['marginLeft', 'marginRight'],\n scale: 'space',\n transform: getMargin,\n defaultScale: defaults.space\n },\n marginY: {\n properties: ['marginTop', 'marginBottom'],\n scale: 'space',\n transform: getMargin,\n defaultScale: defaults.space\n }\n};\nconfigs.margin.m = configs.margin.margin;\nconfigs.margin.mt = configs.margin.marginTop;\nconfigs.margin.mr = configs.margin.marginRight;\nconfigs.margin.mb = configs.margin.marginBottom;\nconfigs.margin.ml = configs.margin.marginLeft;\nconfigs.margin.mx = configs.margin.marginX;\nconfigs.margin.my = configs.margin.marginY;\nconfigs.padding = {\n padding: {\n property: 'padding',\n scale: 'space',\n defaultScale: defaults.space\n },\n paddingTop: {\n property: 'paddingTop',\n scale: 'space',\n defaultScale: defaults.space\n },\n paddingRight: {\n property: 'paddingRight',\n scale: 'space',\n defaultScale: defaults.space\n },\n paddingBottom: {\n property: 'paddingBottom',\n scale: 'space',\n defaultScale: defaults.space\n },\n paddingLeft: {\n property: 'paddingLeft',\n scale: 'space',\n defaultScale: defaults.space\n },\n paddingX: {\n properties: ['paddingLeft', 'paddingRight'],\n scale: 'space',\n defaultScale: defaults.space\n },\n paddingY: {\n properties: ['paddingTop', 'paddingBottom'],\n scale: 'space',\n defaultScale: defaults.space\n }\n};\nconfigs.padding.p = configs.padding.padding;\nconfigs.padding.pt = configs.padding.paddingTop;\nconfigs.padding.pr = configs.padding.paddingRight;\nconfigs.padding.pb = configs.padding.paddingBottom;\nconfigs.padding.pl = configs.padding.paddingLeft;\nconfigs.padding.px = configs.padding.paddingX;\nconfigs.padding.py = configs.padding.paddingY;\nexport var margin = system(configs.margin);\nexport var padding = system(configs.padding);\nexport var space = compose(margin, padding);\nexport default space;\n","import { system } from '@styled-system/core';\nexport var shadow = system({\n boxShadow: {\n property: 'boxShadow',\n scale: 'shadows'\n },\n textShadow: {\n property: 'textShadow',\n scale: 'shadows'\n }\n});\nexport default shadow;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\n// based on https://github.com/developit/dlv\nexport var get = function get(obj, key, def, p, undef) {\n key = key && key.split ? key.split('.') : [key];\n\n for (p = 0; p < key.length; p++) {\n obj = obj ? obj[key[p]] : undef;\n }\n\n return obj === undef ? def : obj;\n};\nvar defaultBreakpoints = [40, 52, 64].map(function (n) {\n return n + 'em';\n});\nvar defaultTheme = {\n space: [0, 4, 8, 16, 32, 64, 128, 256, 512],\n fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]\n};\nvar aliases = {\n bg: 'backgroundColor',\n m: 'margin',\n mt: 'marginTop',\n mr: 'marginRight',\n mb: 'marginBottom',\n ml: 'marginLeft',\n mx: 'marginX',\n my: 'marginY',\n p: 'padding',\n pt: 'paddingTop',\n pr: 'paddingRight',\n pb: 'paddingBottom',\n pl: 'paddingLeft',\n px: 'paddingX',\n py: 'paddingY'\n};\nvar multiples = {\n marginX: ['marginLeft', 'marginRight'],\n marginY: ['marginTop', 'marginBottom'],\n paddingX: ['paddingLeft', 'paddingRight'],\n paddingY: ['paddingTop', 'paddingBottom'],\n size: ['width', 'height']\n};\nvar scales = {\n color: 'colors',\n backgroundColor: 'colors',\n borderColor: 'colors',\n margin: 'space',\n marginTop: 'space',\n marginRight: 'space',\n marginBottom: 'space',\n marginLeft: 'space',\n marginX: 'space',\n marginY: 'space',\n padding: 'space',\n paddingTop: 'space',\n paddingRight: 'space',\n paddingBottom: 'space',\n paddingLeft: 'space',\n paddingX: 'space',\n paddingY: 'space',\n top: 'space',\n right: 'space',\n bottom: 'space',\n left: 'space',\n gridGap: 'space',\n gridColumnGap: 'space',\n gridRowGap: 'space',\n gap: 'space',\n columnGap: 'space',\n rowGap: 'space',\n fontFamily: 'fonts',\n fontSize: 'fontSizes',\n fontWeight: 'fontWeights',\n lineHeight: 'lineHeights',\n letterSpacing: 'letterSpacings',\n border: 'borders',\n borderTop: 'borders',\n borderRight: 'borders',\n borderBottom: 'borders',\n borderLeft: 'borders',\n borderWidth: 'borderWidths',\n borderStyle: 'borderStyles',\n borderRadius: 'radii',\n borderTopRightRadius: 'radii',\n borderTopLeftRadius: 'radii',\n borderBottomRightRadius: 'radii',\n borderBottomLeftRadius: 'radii',\n borderTopWidth: 'borderWidths',\n borderTopColor: 'colors',\n borderTopStyle: 'borderStyles',\n borderBottomWidth: 'borderWidths',\n borderBottomColor: 'colors',\n borderBottomStyle: 'borderStyles',\n borderLeftWidth: 'borderWidths',\n borderLeftColor: 'colors',\n borderLeftStyle: 'borderStyles',\n borderRightWidth: 'borderWidths',\n borderRightColor: 'colors',\n borderRightStyle: 'borderStyles',\n outlineColor: 'colors',\n boxShadow: 'shadows',\n textShadow: 'shadows',\n zIndex: 'zIndices',\n width: 'sizes',\n minWidth: 'sizes',\n maxWidth: 'sizes',\n height: 'sizes',\n minHeight: 'sizes',\n maxHeight: 'sizes',\n flexBasis: 'sizes',\n size: 'sizes',\n // svg\n fill: 'colors',\n stroke: 'colors'\n};\n\nvar positiveOrNegative = function positiveOrNegative(scale, value) {\n if (typeof value !== 'number' || value >= 0) {\n return get(scale, value, value);\n }\n\n var absolute = Math.abs(value);\n var n = get(scale, absolute, absolute);\n if (typeof n === 'string') return '-' + n;\n return n * -1;\n};\n\nvar transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {\n var _extends2;\n\n return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));\n}, {});\nexport var responsive = function responsive(styles) {\n return function (theme) {\n var next = {};\n var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);\n var mediaQueries = [null].concat(breakpoints.map(function (n) {\n return \"@media screen and (min-width: \" + n + \")\";\n }));\n\n for (var key in styles) {\n var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];\n if (value == null) continue;\n\n if (!Array.isArray(value)) {\n next[key] = value;\n continue;\n }\n\n for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {\n var media = mediaQueries[i];\n\n if (!media) {\n next[key] = value[i];\n continue;\n }\n\n next[media] = next[media] || {};\n if (value[i] == null) continue;\n next[media][key] = value[i];\n }\n }\n\n return next;\n };\n};\nexport var css = function css(args) {\n return function (props) {\n if (props === void 0) {\n props = {};\n }\n\n var theme = _extends({}, defaultTheme, {}, props.theme || props);\n\n var result = {};\n var obj = typeof args === 'function' ? args(theme) : args;\n var styles = responsive(obj)(theme);\n\n for (var key in styles) {\n var x = styles[key];\n var val = typeof x === 'function' ? x(theme) : x;\n\n if (key === 'variant') {\n var variant = css(get(theme, val))(theme);\n result = _extends({}, result, {}, variant);\n continue;\n }\n\n if (val && typeof val === 'object') {\n result[key] = css(val)(theme);\n continue;\n }\n\n var prop = get(aliases, key, key);\n var scaleName = get(scales, prop);\n var scale = get(theme, scaleName, get(theme, prop, {}));\n var transform = get(transforms, prop, get);\n var value = transform(scale, val, val);\n\n if (multiples[prop]) {\n var dirs = multiples[prop];\n\n for (var i = 0; i < dirs.length; i++) {\n result[dirs[i]] = value;\n }\n } else {\n result[prop] = value;\n }\n }\n\n return result;\n };\n};\nexport default css;\n","import { get, createParser } from '@styled-system/core';\nimport css from '@styled-system/css';\nexport var variant = function variant(_ref) {\n var _config;\n\n var scale = _ref.scale,\n _ref$prop = _ref.prop,\n prop = _ref$prop === void 0 ? 'variant' : _ref$prop,\n _ref$variants = _ref.variants,\n variants = _ref$variants === void 0 ? {} : _ref$variants,\n key = _ref.key;\n var sx;\n\n if (Object.keys(variants).length) {\n sx = function sx(value, scale, props) {\n return css(get(scale, value, null))(props.theme);\n };\n } else {\n sx = function sx(value, scale) {\n return get(scale, value, null);\n };\n }\n\n sx.scale = scale || key;\n sx.defaults = variants;\n var config = (_config = {}, _config[prop] = sx, _config);\n var parser = createParser(config);\n return parser;\n};\nexport default variant;\nexport var buttonStyle = variant({\n key: 'buttons'\n});\nexport var textStyle = variant({\n key: 'textStyles',\n prop: 'textStyle'\n});\nexport var colorStyle = variant({\n key: 'colorStyles',\n prop: 'colors'\n});\n","import { createStyleFunction, createParser } from '@styled-system/core'; // v4 api shims\n\nimport layout from '@styled-system/layout';\nimport color from '@styled-system/color';\nimport typography from '@styled-system/typography';\nimport flexbox from '@styled-system/flexbox';\nimport grid from '@styled-system/grid';\nimport border from '@styled-system/border';\nimport background from '@styled-system/background';\nimport position from '@styled-system/position';\nexport { get, createParser, createStyleFunction, compose, system } from '@styled-system/core';\nexport { margin, padding, space } from '@styled-system/space';\nexport { color } from '@styled-system/color';\nexport { layout } from '@styled-system/layout';\nexport { typography } from '@styled-system/typography';\nexport { flexbox } from '@styled-system/flexbox';\nexport { border } from '@styled-system/border';\nexport { background } from '@styled-system/background';\nexport { position } from '@styled-system/position';\nexport { grid } from '@styled-system/grid';\nexport { shadow } from '@styled-system/shadow';\nexport { default as boxShadow, default as textShadow } from '@styled-system/shadow';\nexport { variant, buttonStyle, textStyle, colorStyle } from '@styled-system/variant';\nvar width = layout.width,\n height = layout.height,\n minWidth = layout.minWidth,\n minHeight = layout.minHeight,\n maxWidth = layout.maxWidth,\n maxHeight = layout.maxHeight,\n size = layout.size,\n verticalAlign = layout.verticalAlign,\n display = layout.display,\n overflow = layout.overflow,\n overflowX = layout.overflowX,\n overflowY = layout.overflowY;\nvar opacity = color.opacity;\nvar fontSize = typography.fontSize,\n fontFamily = typography.fontFamily,\n fontWeight = typography.fontWeight,\n lineHeight = typography.lineHeight,\n textAlign = typography.textAlign,\n fontStyle = typography.fontStyle,\n letterSpacing = typography.letterSpacing;\nvar alignItems = flexbox.alignItems,\n alignContent = flexbox.alignContent,\n justifyItems = flexbox.justifyItems,\n justifyContent = flexbox.justifyContent,\n flexWrap = flexbox.flexWrap,\n flexDirection = flexbox.flexDirection,\n flex = flexbox.flex,\n flexGrow = flexbox.flexGrow,\n flexShrink = flexbox.flexShrink,\n flexBasis = flexbox.flexBasis,\n justifySelf = flexbox.justifySelf,\n alignSelf = flexbox.alignSelf,\n order = flexbox.order;\nvar gridGap = grid.gridGap,\n gridColumnGap = grid.gridColumnGap,\n gridRowGap = grid.gridRowGap,\n gridColumn = grid.gridColumn,\n gridRow = grid.gridRow,\n gridAutoFlow = grid.gridAutoFlow,\n gridAutoColumns = grid.gridAutoColumns,\n gridAutoRows = grid.gridAutoRows,\n gridTemplateColumns = grid.gridTemplateColumns,\n gridTemplateRows = grid.gridTemplateRows,\n gridTemplateAreas = grid.gridTemplateAreas,\n gridArea = grid.gridArea;\nvar borderWidth = border.borderWidth,\n borderStyle = border.borderStyle,\n borderColor = border.borderColor,\n borderTop = border.borderTop,\n borderRight = border.borderRight,\n borderBottom = border.borderBottom,\n borderLeft = border.borderLeft,\n borderRadius = border.borderRadius;\nvar backgroundImage = background.backgroundImage,\n backgroundSize = background.backgroundSize,\n backgroundPosition = background.backgroundPosition,\n backgroundRepeat = background.backgroundRepeat;\nvar zIndex = position.zIndex,\n top = position.top,\n right = position.right,\n bottom = position.bottom,\n left = position.left;\nexport { default as borders } from '@styled-system/border';\nexport { width, height, minWidth, minHeight, maxWidth, maxHeight, size, verticalAlign, display, overflow, overflowX, overflowY // color\n, opacity // typography\n, fontSize, fontFamily, fontWeight, lineHeight, textAlign, fontStyle, letterSpacing // flexbox\n, alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexDirection, flex, flexGrow, flexShrink, flexBasis, justifySelf, alignSelf, order // grid\n, gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea // border\n, borderWidth, borderStyle, borderColor, borderTop, borderRight, borderBottom, borderLeft, borderRadius // background\n, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat // position\n, zIndex, top, right, bottom, left }; // v4 style API shim\n\nexport var style = function style(_ref) {\n var prop = _ref.prop,\n cssProperty = _ref.cssProperty,\n alias = _ref.alias,\n key = _ref.key,\n transformValue = _ref.transformValue,\n scale = _ref.scale,\n properties = _ref.properties;\n var config = {};\n config[prop] = createStyleFunction({\n properties: properties,\n property: cssProperty || prop,\n scale: key,\n defaultScale: scale,\n transform: transformValue\n });\n if (alias) config[alias] = config[prop];\n var parse = createParser(config);\n return parse;\n};\n","import { createContext, useContext, useEffect } from \"react\";\nimport { assertIsElement } from \"@sproutsocial/seeds-react-utilities\";\nimport type { TypeCardProps, TypeCardContext } from \"./CardTypes\";\n\nexport const SubComponentContext = createContext<TypeCardContext>({\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n setHasSubComponent: () => {},\n href: \"\",\n linkRef: null,\n});\n\nexport function useChildContext() {\n const { setHasSubComponent } = useContext(SubComponentContext);\n useEffect(() => {\n setHasSubComponent && setHasSubComponent(true);\n }, [setHasSubComponent]);\n}\n\ninterface navigateToParams extends Pick<TypeCardProps, \"href\"> {\n e: React.MouseEvent | React.KeyboardEvent;\n ref: React.RefObject<HTMLDivElement>;\n}\n\nexport const navigateTo = ({ e, href, ref }: navigateToParams) => {\n const { target } = e;\n\n // asserts that target is an element so `contains` accepts it\n assertIsElement(target);\n\n if (ref.current?.contains(target)) {\n if (\n target.getAttribute(\"onclick\") !== null ||\n target.getAttribute(\"href\") !== null\n ) {\n e.stopPropagation();\n return;\n }\n }\n\n window.open(href, \"_blank\")?.focus();\n};\n\ninterface onKeyDownParams\n extends Pick<TypeCardProps, \"href\" | \"onClick\" | \"role\"> {\n e: React.KeyboardEvent;\n ref: React.RefObject<HTMLDivElement>;\n}\n\nexport const onKeyDown = ({ e, href, onClick, ref, role }: onKeyDownParams) => {\n if (e?.key === \"Enter\") {\n if (role === \"link\") {\n return navigateTo({ e, href, ref });\n }\n\n if (role === \"presentation\") {\n return;\n }\n\n return onClick?.(e);\n }\n};\n","import React, { useContext } from \"react\";\nimport { useChildContext, SubComponentContext } from \"./utils\";\nimport type {\n TypeCardLink,\n TypeSharedCardSystemProps,\n TypeStyledSelectedIcon,\n} from \"./CardTypes\";\nimport {\n StyledCardContent,\n StyledCardHeader,\n StyledCardFooter,\n StyledSelectedIcon,\n SelectedIconWrapper,\n StyledCardAffordance,\n StyledCardLink,\n} from \"./styles\";\n\ninterface TypeSharedSubComponentProps extends TypeSharedCardSystemProps {\n children?: React.ReactNode;\n}\n\nexport const CardContent = ({\n children,\n ...rest\n}: TypeSharedSubComponentProps) => {\n // TODO: It could be cool to possibly adjust the context to include an array of names of child components.\n // Then, if CardHeader or CardFooter aren't used with CardContent throw an error.\n useChildContext();\n return <StyledCardContent {...rest}>{children}</StyledCardContent>;\n};\n\nexport const CardHeader = ({\n children,\n ...rest\n}: TypeSharedSubComponentProps) => {\n useChildContext();\n return <StyledCardHeader {...rest}>{children}</StyledCardHeader>;\n};\n\nexport const CardFooter = ({\n children,\n ...rest\n}: TypeSharedSubComponentProps) => {\n useChildContext();\n return <StyledCardFooter {...rest}>{children}</StyledCardFooter>;\n};\n\ninterface TypeSelectedIconProps {\n $selected?: TypeStyledSelectedIcon[\"$selected\"];\n}\n\nexport const SelectedIcon = ({ $selected }: TypeSelectedIconProps) => {\n return (\n <SelectedIconWrapper>\n <StyledSelectedIcon\n aria-hidden\n color=\"icon.base\"\n name=\"circle-check-solid\"\n $selected={$selected}\n />\n </SelectedIconWrapper>\n );\n};\n\nexport const CardAffordance = ({ ...rest }) => {\n return (\n <StyledCardAffordance\n {...rest}\n size=\"mini\"\n name=\"arrow-right-solid\"\n // TODO: probably need to make this available to the top level for external links https://sprout.atlassian.net/browse/DS-2223\n aria-hidden\n />\n );\n};\n\nexport const CardLink = ({\n affordance,\n children,\n external = false,\n color,\n ...rest\n}: React.PropsWithChildren<TypeCardLink>) => {\n const { href, linkRef } = useContext(SubComponentContext);\n\n // Because we are hijacking Card click event to directly click this link, we need to stop propagation to avoid a double click event.\n const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n e.stopPropagation();\n };\n\n return (\n <StyledCardLink\n {...rest}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noreferrer\" : undefined}\n href={href}\n onClick={handleClick}\n ref={linkRef}\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n >\n <>\n {children}\n {affordance ? <CardAffordance ml={300} /> : null}\n </>\n </StyledCardLink>\n );\n};\n","import type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\nimport * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeBorderSystemProps,\n TypeColorSystemProps,\n TypeFlexboxSystemProps,\n TypeGridSystemProps,\n TypeLayoutSystemProps,\n TypePositionSystemProps,\n TypeSpaceSystemProps,\n TypeTypographySystemProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSharedCardSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeBorderSystemProps,\n TypeColorSystemProps,\n TypeFlexboxSystemProps,\n TypeGridSystemProps,\n TypeLayoutSystemProps,\n TypePositionSystemProps,\n TypeSpaceSystemProps {}\n\n// consumer facing props that affect the styles of the component. We need to define these first so the user doesn't see our transient naming conventions.\nexport interface TypeCardStyleProps {\n elevation?: \"low\" | \"medium\" | \"high\";\n disabled?: boolean;\n compositionalComponents?: boolean;\n selected?: boolean;\n isRoleLink?: boolean;\n}\n\n// Since we only want to manage the style props in one place(above), we'll use this generic to prepend the properties of TypeCardStyleProps with $.\nexport type TypeStyleTransientProps<T> = {\n [K in Extract<keyof T, string> as `$${K}`]: T[K];\n};\n\nexport type TypeCardStyleTransientProps =\n TypeStyleTransientProps<TypeCardStyleProps>;\n\nexport interface TypeStyledCard\n extends TypeSharedCardSystemProps,\n TypeCardStyleTransientProps {}\n\nexport interface TypeCardStyles\n extends TypeSharedCardSystemProps,\n Omit<TypeCardStyleProps, \"compositionalComponents\"> {}\n\ntype TypeOnClick = (event: React.MouseEvent | React.KeyboardEvent) => void;\n\ntype TypeGenericCard = {\n /** role is used for to set accessibility properties,\n * to determine styling and interaction behavior,\n * and to determine which props should be allowed.*/\n role: \"link\" | \"button\" | \"checkbox\" | \"presentation\";\n /** When role is link, use href to determine the link destination.\n * Required for role=\"link\", disallowed for all other roles */\n href?: string;\n /** Required for role=\"button\" and role=\"checkbox\",\n * discouraged for role=\"presentation\", and disallowed for role=\"link\" */\n onClick?: TypeOnClick;\n /** Indicates whether the card is selected.\n * Required for role=\"checkbox\", disallowed for all other roles */\n selected?: boolean;\n};\n\nexport type TypeLinkCardProps = {\n role: \"link\";\n href: string;\n onClick?: never;\n selected?: never;\n};\n\nexport type TypeButtonCardProps = {\n role: \"button\";\n href?: never;\n onClick: TypeOnClick;\n selected?: never;\n};\n\nexport type TypeCheckboxCardProps = {\n role: \"checkbox\";\n href?: never;\n onClick: TypeOnClick;\n selected: boolean;\n};\n\nexport type TypePresentationCardProps = {\n role: \"presentation\";\n href?: never;\n /**\n * **Warning:**\n * `role='presentation'` is outside of the accessibility tree.\n * Using an `onClick` that performs a user action should likely be used\n * with `role='button'` instead.\n */\n onClick?: TypeOnClick;\n selected?: never;\n};\n\nexport type TypeCardConditions =\n | TypeLinkCardProps\n | TypeButtonCardProps\n | TypeCheckboxCardProps\n | TypePresentationCardProps;\n\nexport type TypeCardProps = React.PropsWithChildren<TypeCardStyles> &\n TypeGenericCard &\n TypeCardConditions;\n\nexport interface TypeCardArea extends TypeSharedCardSystemProps {\n $divider?: \"top\" | \"bottom\";\n}\n\nexport interface TypeStyledSelectedIcon extends TypeIconProps {\n $selected?: TypeCardStyleTransientProps[\"$selected\"];\n}\n\nexport interface TypeCardContext {\n setHasSubComponent?: React.Dispatch<React.SetStateAction<boolean>>;\n href?: string;\n linkRef: React.RefObject<HTMLAnchorElement> | null;\n}\n\nexport interface TypeCardLink\n extends Omit<React.ComponentPropsWithoutRef<\"a\">, \"color\">,\n TypeColorSystemProps,\n TypeTypographySystemProps {\n affordance?: boolean;\n external?: boolean;\n}\n"],"mappings":"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","names":["exports","module","import_react","merge","assign","sort","createMediaQuery","getValue","get","createParser","config","parse","parseResponsiveStyle","parseResponsiveObject","createStyleFunction","sx","scale","system","compose","parser","isNumber","getWidth","config","index_esm_default","defaults","config","index_esm_default","config","index_esm_default","defaults","config","index_esm_default","config","index_esm_default","config","index_esm_default","defaults","config","index_esm_default","defaults","isNumber","getMargin","get","positiveOrNegative","responsive","css","variant","index_esm_default","variant","sx","scale","index_esm_default","config","index_esm_default","styled","Icon","import_react","color","import_jsx_runtime","disabled","React"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/Card.tsx","../src/styles.tsx","../src/utils.ts","../src/subComponents.tsx","../src/CardTypes.ts"],"sourcesContent":["import Card from \"./Card\";\n\nexport default Card;\nexport { Card };\nexport { CardHeader, CardContent, CardFooter, CardLink } from \"./subComponents\";\nexport * from \"./CardTypes\";\n","import React, { useRef, useState } from \"react\";\nimport { StyledCard } from \"./styles\";\nimport type { TypeCardProps, TypeCardContext } from \"./CardTypes\";\nimport { SubComponentContext, onKeyDown } from \"./utils\";\nimport { SelectedIcon } from \"./subComponents\";\n\n/**\n * @link https://seeds.sproutsocial.com/components/card/\n *\n * Cards with role='presentation' are non-interactive for accessibility compliance.\n * Use role='button' for interactive Cards.\n *\n * Avoid nesting interactive content inside a Card with role='button'.\n *\n * Interactive content: \"a\", \"audio\", \"button\", \"embed\", \"iframe\", \"img\", \"input\", \"label\", \"select\", \"textarea\", \"video\"\n * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content\n *\n * @example\n * // Interactive Card\n * <Card role=\"button\" onClick={_onClick}>\n * <Text>Click this card</Text>\n * </Card>\n *\n * @example\n * // Presentation Card with interactive children\n * <Card role=\"presentation\">\n * <Text>This card is not interactive</Text>\n * <Link href=\"/details\">But this link is</Link>\n * </Card>\n */\n\nconst Card = ({\n children,\n disabled = false,\n elevation = \"low\",\n href,\n onClick,\n role = \"presentation\",\n selected,\n ...rest\n}: TypeCardProps) => {\n const [hasSubComponent, setHasSubComponent] = useState<boolean>(false);\n const containerRef = useRef<HTMLDivElement>(null);\n const linkRef = useRef<HTMLAnchorElement>(null);\n const isRoleLink = role === \"link\";\n const isRolePresentation = role === \"presentation\";\n const checkedConditions = role === \"checkbox\" ? selected : undefined;\n\n const cardContext: TypeCardContext = {\n setHasSubComponent: setHasSubComponent,\n href: href,\n linkRef: linkRef,\n };\n\n const handleClickConditions: React.MouseEventHandler = (e) =>\n isRoleLink ? linkRef.current?.click() : onClick?.(e);\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) =>\n onKeyDown({ e, href, onClick, ref: containerRef, role });\n\n return (\n <StyledCard\n tabIndex={isRoleLink || isRolePresentation ? -1 : 0}\n role={isRoleLink ? undefined : role}\n onClick={isRolePresentation ? undefined : handleClickConditions}\n onKeyDown={isRolePresentation ? undefined : handleKeyDown}\n $elevation={elevation}\n ref={containerRef}\n $selected={selected}\n aria-checked={checkedConditions}\n $disabled={disabled}\n aria-disabled={disabled && disabled}\n $compositionalComponents={hasSubComponent}\n $isRoleLink={isRoleLink}\n {...rest}\n >\n <SelectedIcon $selected={selected} />\n <SubComponentContext.Provider value={cardContext}>\n {children}\n </SubComponentContext.Provider>\n </StyledCard>\n );\n};\n\nexport default Card;\n","import styled from \"styled-components\";\nimport {\n border,\n color,\n flexbox,\n grid,\n layout,\n position,\n space,\n typography,\n} from \"styled-system\";\nimport { focusRing, disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport type {\n TypeStyledCard,\n TypeCardArea,\n TypeStyledSelectedIcon,\n TypeCardLink,\n} from \"./CardTypes\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n\n// TODO: Would be really cool to cherry pick specific props from style functions. For example,\n// removing the css prop 'color' from the color function or importing just the specific\n// props the component needs. It appears to be possible with some and not others.\n// https://github.com/styled-system/styled-system/issues/1569\n\nexport const StyledCardContent = styled.div<TypeCardArea>`\n display: flex;\n flex-direction: column;\n padding: ${({ theme }) => theme.space[400]};\n box-sizing: border-box;\n\n ${border}\n ${color}\n ${flexbox}\n ${grid}\n ${layout}\n ${space}\n`;\n\nexport const StyledCardHeader = styled(StyledCardContent)`\n flex-direction: row;\n border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid\n ${theme.colors.container.border.base}`};\n border-top-left-radius: ${({ theme }) => theme.radii.inner};\n border-top-right-radius: ${({ theme }) => theme.radii.inner};\n\n ${border}\n ${color}\n ${flexbox}\n ${grid}\n ${layout}\n ${space}\n`;\n\nexport const StyledCardFooter = styled(StyledCardContent)`\n flex-direction: row;\n border-top: ${({ theme }) => `${theme.borderWidths[500]} solid\n ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.inner};\n border-bottom-right-radius: ${({ theme }) => theme.radii.inner};\n\n ${border}\n ${color}\n ${flexbox}\n ${grid}\n ${layout}\n ${space}\n`;\n\nexport const SelectedIconWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: -8px;\n right: -8px;\n`;\n\nexport const StyledSelectedIcon = styled(Icon)<TypeStyledSelectedIcon>`\n border-radius: 50%;\n background: ${({ theme }) => theme.colors.container.background.base};\n opacity: 0;\n transition: opacity ${({ theme }) => theme.duration.medium};\n\n ${({ $selected }) =>\n $selected &&\n `\n opacity: 1;\n `}\n`;\n\nexport const StyledCardLink = styled.a<TypeCardLink>`\n font-family: ${(p) => p.theme.fontFamily};\n font-weight: ${(p) => p.theme.fontWeights.bold};\n color: ${(p) => p.theme.colors.text.headline};\n ${(p) => p.theme.typography[400]};\n\n ${color}\n ${typography}\n`;\n\nexport const StyledCard = styled.div<TypeStyledCard>`\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n margin: 0;\n background: ${({ theme }) => theme.colors.container.background.base};\n border: ${({ theme }) => theme.borderWidths[500]} solid\n ${({ theme }) => theme.colors.container.border.base};\n padding: ${({ theme, $compositionalComponents }) =>\n $compositionalComponents ? 0 : theme.space[400]};\n border-radius: ${({ theme }) => theme.radii.outer};\n transition: box-shadow ${({ theme }) => theme.duration.medium},\n border ${({ theme }) => theme.duration.medium};\n\n &[role=\"button\"],\n &[role=\"checkbox\"] {\n cursor: pointer;\n\n &:hover {\n box-shadow: ${({ theme, $elevation = \"low\" }) =>\n theme.shadows[$elevation]};\n }\n }\n\n ${({ $isRoleLink, theme, $elevation = \"low\" }) =>\n $isRoleLink &&\n `\n\t\tcursor: pointer;\n\n &:hover {\n box-shadow: ${theme.shadows[$elevation]};\n }\n\t`}\n\n &:focus-within {\n ${({ $isRoleLink }) => ($isRoleLink ? focusRing : null)}\n ${StyledCardLink}:focus {\n border: none;\n box-shadow: none;\n outline: none;\n }\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${({ $disabled }) =>\n $disabled &&\n `\n ${disabled}\n `}\n\n ${({ $selected, theme }) =>\n $selected &&\n `\n border: ${theme.borderWidths[500]} solid ${theme.colors.container.border.selected}; \n `}\n\n ${border}\n ${color}\n ${flexbox}\n ${grid}\n ${layout}\n ${position}\n ${space}\n`;\n\nexport const StyledCardAffordance = styled(Icon)`\n ${StyledCard}:hover & {\n transform: translateX(${(p) => p.theme.space[200]});\n }\n transition: ${(p) => p.theme.duration.medium};\n`;\n","import { createContext, useContext, useEffect } from \"react\";\nimport { assertIsElement } from \"@sproutsocial/seeds-react-utilities\";\nimport type { TypeCardProps, TypeCardContext } from \"./CardTypes\";\n\nexport const SubComponentContext = createContext<TypeCardContext>({\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n setHasSubComponent: () => {},\n href: \"\",\n linkRef: null,\n});\n\nexport function useChildContext() {\n const { setHasSubComponent } = useContext(SubComponentContext);\n useEffect(() => {\n setHasSubComponent && setHasSubComponent(true);\n }, [setHasSubComponent]);\n}\n\ninterface navigateToParams extends Pick<TypeCardProps, \"href\"> {\n e: React.MouseEvent | React.KeyboardEvent;\n ref: React.RefObject<HTMLDivElement>;\n}\n\nexport const navigateTo = ({ e, href, ref }: navigateToParams) => {\n const { target } = e;\n\n // asserts that target is an element so `contains` accepts it\n assertIsElement(target);\n\n if (ref.current?.contains(target)) {\n if (\n target.getAttribute(\"onclick\") !== null ||\n target.getAttribute(\"href\") !== null\n ) {\n e.stopPropagation();\n return;\n }\n }\n\n window.open(href, \"_blank\")?.focus();\n};\n\ninterface onKeyDownParams\n extends Pick<TypeCardProps, \"href\" | \"onClick\" | \"role\"> {\n e: React.KeyboardEvent;\n ref: React.RefObject<HTMLDivElement>;\n}\n\nexport const onKeyDown = ({ e, href, onClick, ref, role }: onKeyDownParams) => {\n if (e?.key === \"Enter\") {\n if (role === \"link\") {\n return navigateTo({ e, href, ref });\n }\n\n if (role === \"presentation\") {\n return;\n }\n\n return onClick?.(e);\n }\n};\n","import React, { useContext } from \"react\";\nimport { useChildContext, SubComponentContext } from \"./utils\";\nimport type {\n TypeCardLink,\n TypeSharedCardSystemProps,\n TypeStyledSelectedIcon,\n} from \"./CardTypes\";\nimport {\n StyledCardContent,\n StyledCardHeader,\n StyledCardFooter,\n StyledSelectedIcon,\n SelectedIconWrapper,\n StyledCardAffordance,\n StyledCardLink,\n} from \"./styles\";\n\ninterface TypeSharedSubComponentProps extends TypeSharedCardSystemProps {\n children?: React.ReactNode;\n}\n\nexport const CardContent = ({\n children,\n ...rest\n}: TypeSharedSubComponentProps) => {\n // TODO: It could be cool to possibly adjust the context to include an array of names of child components.\n // Then, if CardHeader or CardFooter aren't used with CardContent throw an error.\n useChildContext();\n return <StyledCardContent {...rest}>{children}</StyledCardContent>;\n};\n\nexport const CardHeader = ({\n children,\n ...rest\n}: TypeSharedSubComponentProps) => {\n useChildContext();\n return <StyledCardHeader {...rest}>{children}</StyledCardHeader>;\n};\n\nexport const CardFooter = ({\n children,\n ...rest\n}: TypeSharedSubComponentProps) => {\n useChildContext();\n return <StyledCardFooter {...rest}>{children}</StyledCardFooter>;\n};\n\ninterface TypeSelectedIconProps {\n $selected?: TypeStyledSelectedIcon[\"$selected\"];\n}\n\nexport const SelectedIcon = ({ $selected }: TypeSelectedIconProps) => {\n return (\n <SelectedIconWrapper>\n <StyledSelectedIcon\n aria-hidden\n color=\"icon.base\"\n name=\"circle-check-solid\"\n $selected={$selected}\n />\n </SelectedIconWrapper>\n );\n};\n\nexport const CardAffordance = ({ ...rest }) => {\n return (\n <StyledCardAffordance\n {...rest}\n size=\"mini\"\n name=\"arrow-right-solid\"\n // TODO: probably need to make this available to the top level for external links https://sprout.atlassian.net/browse/DS-2223\n aria-hidden\n />\n );\n};\n\nexport const CardLink = ({\n affordance,\n children,\n external = false,\n color,\n ...rest\n}: React.PropsWithChildren<TypeCardLink>) => {\n const { href, linkRef } = useContext(SubComponentContext);\n\n // Because we are hijacking Card click event to directly click this link, we need to stop propagation to avoid a double click event.\n const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n e.stopPropagation();\n };\n\n return (\n <StyledCardLink\n {...rest}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noreferrer\" : undefined}\n href={href}\n onClick={handleClick}\n ref={linkRef}\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n >\n <>\n {children}\n {affordance ? <CardAffordance ml={300} /> : null}\n </>\n </StyledCardLink>\n );\n};\n","import type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\nimport * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeBorderSystemProps,\n TypeColorSystemProps,\n TypeFlexboxSystemProps,\n TypeGridSystemProps,\n TypeLayoutSystemProps,\n TypePositionSystemProps,\n TypeSpaceSystemProps,\n TypeTypographySystemProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSharedCardSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeBorderSystemProps,\n TypeColorSystemProps,\n TypeFlexboxSystemProps,\n TypeGridSystemProps,\n TypeLayoutSystemProps,\n TypePositionSystemProps,\n TypeSpaceSystemProps {}\n\n// consumer facing props that affect the styles of the component. We need to define these first so the user doesn't see our transient naming conventions.\nexport interface TypeCardStyleProps {\n elevation?: \"low\" | \"medium\" | \"high\";\n disabled?: boolean;\n compositionalComponents?: boolean;\n selected?: boolean;\n isRoleLink?: boolean;\n}\n\n// Since we only want to manage the style props in one place(above), we'll use this generic to prepend the properties of TypeCardStyleProps with $.\nexport type TypeStyleTransientProps<T> = {\n [K in Extract<keyof T, string> as `$${K}`]: T[K];\n};\n\nexport type TypeCardStyleTransientProps =\n TypeStyleTransientProps<TypeCardStyleProps>;\n\nexport interface TypeStyledCard\n extends TypeSharedCardSystemProps,\n TypeCardStyleTransientProps {}\n\nexport interface TypeCardStyles\n extends TypeSharedCardSystemProps,\n Omit<TypeCardStyleProps, \"compositionalComponents\"> {}\n\ntype TypeOnClick = (event: React.MouseEvent | React.KeyboardEvent) => void;\n\ntype TypeGenericCard = {\n /** role is used for to set accessibility properties,\n * to determine styling and interaction behavior,\n * and to determine which props should be allowed.*/\n role: \"link\" | \"button\" | \"checkbox\" | \"presentation\";\n /** When role is link, use href to determine the link destination.\n * Required for role=\"link\", disallowed for all other roles */\n href?: string;\n /** Required for role=\"button\" and role=\"checkbox\",\n * discouraged for role=\"presentation\", and disallowed for role=\"link\" */\n onClick?: TypeOnClick;\n /** Indicates whether the card is selected.\n * Required for role=\"checkbox\", disallowed for all other roles */\n selected?: boolean;\n};\n\nexport type TypeLinkCardProps = {\n role: \"link\";\n href: string;\n onClick?: never;\n selected?: never;\n};\n\nexport type TypeButtonCardProps = {\n role: \"button\";\n href?: never;\n onClick: TypeOnClick;\n selected?: never;\n};\n\nexport type TypeCheckboxCardProps = {\n role: \"checkbox\";\n href?: never;\n onClick: TypeOnClick;\n selected: boolean;\n};\n\nexport type TypePresentationCardProps = {\n role: \"presentation\";\n href?: never;\n /**\n * **Not supported for accessibility:**\n * `role='presentation'` removes the element from the accessibility tree.\n * Presentation Cards do not support `onClick` handlers or keyboard interactions.\n * Use `role='button'` for interactive Cards instead.\n */\n onClick?: never;\n selected?: never;\n};\n\nexport type TypeCardConditions =\n | TypeLinkCardProps\n | TypeButtonCardProps\n | TypeCheckboxCardProps\n | TypePresentationCardProps;\n\nexport type TypeCardProps = React.PropsWithChildren<TypeCardStyles> &\n TypeGenericCard &\n TypeCardConditions;\n\nexport interface TypeCardArea extends TypeSharedCardSystemProps {\n $divider?: \"top\" | \"bottom\";\n}\n\nexport interface TypeStyledSelectedIcon extends TypeIconProps {\n $selected?: TypeCardStyleTransientProps[\"$selected\"];\n}\n\nexport interface TypeCardContext {\n setHasSubComponent?: React.Dispatch<React.SetStateAction<boolean>>;\n href?: string;\n linkRef: React.RefObject<HTMLAnchorElement> | null;\n}\n\nexport interface TypeCardLink\n extends Omit<React.ComponentPropsWithoutRef<\"a\">, \"color\">,\n TypeColorSystemProps,\n TypeTypographySystemProps {\n affordance?: boolean;\n external?: boolean;\n}\n"],"mappings":"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","names":["import_react","styled","Icon","import_react","color","import_jsx_runtime","disabled","React"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-card",
3
- "version": "1.1.11",
3
+ "version": "1.1.14",
4
4
  "description": "Seeds React Card",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -19,9 +19,10 @@
19
19
  },
20
20
  "dependencies": {
21
21
  "@sproutsocial/seeds-react-system-props": "^3.0.1",
22
- "@sproutsocial/seeds-react-mixins": "^4.1.6",
22
+ "@sproutsocial/seeds-react-mixins": "^4.2.0",
23
23
  "@sproutsocial/seeds-react-utilities": "^4.0.1",
24
- "@sproutsocial/seeds-react-icon": "^2.0.3"
24
+ "@sproutsocial/seeds-react-icon": "^2.0.4",
25
+ "styled-system": "^5.1.5"
25
26
  },
26
27
  "devDependencies": {
27
28
  "tsup": "^8.3.4",
@@ -33,14 +34,14 @@
33
34
  "@sproutsocial/seeds-tsconfig": "*",
34
35
  "@sproutsocial/seeds-testing": "*",
35
36
  "@sproutsocial/seeds-react-testing-library": "*",
36
- "@sproutsocial/seeds-react-banner": "^1.0.14",
37
- "@sproutsocial/seeds-react-badge": "^2.0.5",
38
- "@sproutsocial/seeds-react-box": "^1.1.7",
39
- "@sproutsocial/seeds-react-link": "^1.0.6",
40
- "@sproutsocial/seeds-react-partner-logo": "^1.4.0",
41
- "@sproutsocial/seeds-react-spot-illustration": "^1.1.0",
37
+ "@sproutsocial/seeds-react-banner": "^1.0.15",
38
+ "@sproutsocial/seeds-react-badge": "^2.0.7",
39
+ "@sproutsocial/seeds-react-box": "^1.1.8",
40
+ "@sproutsocial/seeds-react-link": "^1.0.7",
41
+ "@sproutsocial/seeds-react-partner-logo": "^1.5.0",
42
+ "@sproutsocial/seeds-react-spot-illustration": "^1.1.1",
42
43
  "@sproutsocial/seeds-react-text": "^1.3.2",
43
- "@sproutsocial/seeds-react-theme": "^3.2.1"
44
+ "@sproutsocial/seeds-react-theme": "^3.3.0"
44
45
  },
45
46
  "peerDependencies": {
46
47
  "styled-components": "^5.2.3"
package/src/Card.tsx CHANGED
@@ -7,14 +7,25 @@ import { SelectedIcon } from "./subComponents";
7
7
  /**
8
8
  * @link https://seeds.sproutsocial.com/components/card/
9
9
  *
10
+ * Cards with role='presentation' are non-interactive for accessibility compliance.
11
+ * Use role='button' for interactive Cards.
12
+ *
10
13
  * Avoid nesting interactive content inside a Card with role='button'.
11
14
  *
12
15
  * Interactive content: "a", "audio", "button", "embed", "iframe", "img", "input", "label", "select", "textarea", "video"
13
16
  * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content
14
17
  *
15
18
  * @example
19
+ * // Interactive Card
16
20
  * <Card role="button" onClick={_onClick}>
17
- * <Button>Click me</Button>
21
+ * <Text>Click this card</Text>
22
+ * </Card>
23
+ *
24
+ * @example
25
+ * // Presentation Card with interactive children
26
+ * <Card role="presentation">
27
+ * <Text>This card is not interactive</Text>
28
+ * <Link href="/details">But this link is</Link>
18
29
  * </Card>
19
30
  */
20
31
 
@@ -32,6 +43,7 @@ const Card = ({
32
43
  const containerRef = useRef<HTMLDivElement>(null);
33
44
  const linkRef = useRef<HTMLAnchorElement>(null);
34
45
  const isRoleLink = role === "link";
46
+ const isRolePresentation = role === "presentation";
35
47
  const checkedConditions = role === "checkbox" ? selected : undefined;
36
48
 
37
49
  const cardContext: TypeCardContext = {
@@ -48,10 +60,10 @@ const Card = ({
48
60
 
49
61
  return (
50
62
  <StyledCard
51
- tabIndex={isRoleLink ? -1 : 0}
63
+ tabIndex={isRoleLink || isRolePresentation ? -1 : 0}
52
64
  role={isRoleLink ? undefined : role}
53
- onClick={handleClickConditions}
54
- onKeyDown={handleKeyDown}
65
+ onClick={isRolePresentation ? undefined : handleClickConditions}
66
+ onKeyDown={isRolePresentation ? undefined : handleKeyDown}
55
67
  $elevation={elevation}
56
68
  ref={containerRef}
57
69
  $selected={selected}
package/src/CardTypes.ts CHANGED
@@ -91,12 +91,12 @@ export type TypePresentationCardProps = {
91
91
  role: "presentation";
92
92
  href?: never;
93
93
  /**
94
- * **Warning:**
95
- * `role='presentation'` is outside of the accessibility tree.
96
- * Using an `onClick` that performs a user action should likely be used
97
- * with `role='button'` instead.
94
+ * **Not supported for accessibility:**
95
+ * `role='presentation'` removes the element from the accessibility tree.
96
+ * Presentation Cards do not support `onClick` handlers or keyboard interactions.
97
+ * Use `role='button'` for interactive Cards instead.
98
98
  */
99
- onClick?: TypeOnClick;
99
+ onClick?: never;
100
100
  selected?: never;
101
101
  };
102
102
 
package/src/__tests__/Card.test.tsx CHANGED
@@ -91,14 +91,14 @@ describe("A card is interactive", () => {
91
91
  expect(card).toHaveAttribute("aria-disabled", "true");
92
92
  });
93
93
 
94
- it("should have an adjustable hover state style", async () => {
94
+ it("should have an adjustable hover state style for interactive cards", async () => {
95
95
  const { user } = render(
96
- <Card role="presentation" elevation="high">
96
+ <Card role="button" onClick={mockCardClick} elevation="high">
97
97
  Test
98
98
  </Card>
99
99
  );
100
100
 
101
- const card = screen.getByRole("presentation");
101
+ const card = screen.getByRole("button");
102
102
 
103
103
  // apparently, jest-dom can't do this with toHaveStyle
104
104
  // https://github.com/testing-library/jest-dom/issues/59
@@ -107,20 +107,19 @@ describe("A card is interactive", () => {
107
107
  // https://github.com/styled-components/jest-styled-components#tohavestylerule
108
108
  await user.hover(card);
109
109
  expect(card).toHaveStyleRule("box-shadow", theme.shadows.high, {
110
- modifier: ":hover",
110
+ modifier: '&[role="button"]:hover',
111
111
  });
112
112
  });
113
113
 
114
- it("can be focused", async () => {
114
+ it("can be focused when interactive", async () => {
115
115
  const { user } = render(
116
- <Card role="presentation">
116
+ <Card role="button" onClick={mockCardClick}>
117
117
  Test
118
118
  <button>child click test</button>
119
119
  </Card>
120
120
  );
121
121
 
122
- const card = screen.getByRole("presentation");
123
- const button = screen.getByRole("button");
122
+ const [card, button] = screen.getAllByRole("button");
124
123
 
125
124
  expect(card).toHaveAttribute("tabindex", "0");
126
125
 
@@ -190,18 +189,19 @@ describe("A card is interactive", () => {
190
189
  );
191
190
  });
192
191
 
193
- it("should support interactive children", async () => {
192
+ it("should support interactive children in button cards", async () => {
194
193
  const mockChildClick = jest.fn((e) => e.stopPropagation());
195
194
 
196
195
  const { user } = render(
197
- <Card role="presentation" onClick={mockCardClick}>
196
+ <Card role="button" onClick={mockCardClick}>
198
197
  Test
199
198
  <button onClick={mockChildClick}>child click test</button>
200
199
  </Card>
201
200
  );
202
201
 
203
- const card = screen.getByRole("presentation");
204
- const cardChild = screen.getByText("child click test");
202
+ const buttons = screen.getAllByRole("button");
203
+ const card = buttons[0]!;
204
+ const cardChild = buttons[1]!;
205
205
 
206
206
  // Expect clicking the card to trigger the card's onClick but not the child's
207
207
  await user.click(card);
@@ -213,6 +213,27 @@ describe("A card is interactive", () => {
213
213
  expect(mockCardClick).toBeCalledTimes(1);
214
214
  expect(mockChildClick).toBeCalledTimes(1);
215
215
  });
216
+
217
+ it("presentation cards are not interactive but support interactive children", async () => {
218
+ const mockChildClick = jest.fn();
219
+
220
+ const { user } = render(
221
+ <Card role="presentation">
222
+ Test
223
+ <button onClick={mockChildClick}>child click test</button>
224
+ </Card>
225
+ );
226
+
227
+ const card = screen.getByRole("presentation");
228
+ const cardChild = screen.getByText("child click test");
229
+
230
+ // Presentation cards should not be focusable
231
+ expect(card).toHaveAttribute("tabindex", "-1");
232
+
233
+ // Interactive children should still work
234
+ await user.click(cardChild);
235
+ expect(mockChildClick).toBeCalledTimes(1);
236
+ });
216
237
  });
217
238
 
218
239
  describe("A Card supports composable layouts", () => {
package/src/__tests__/CardTypes.typetest.tsx CHANGED
@@ -52,6 +52,7 @@ function CardTypes() {
52
52
  This is a card.
53
53
  </Card>
54
54
  <Card role="presentation">This is a card.</Card>
55
+ {/* @ts-expect-error - test that onClick is never allowed with role=presentation */}
55
56
  <Card
56
57
  role="presentation"
57
58
  onClick={() => {
package/src/styles.tsx CHANGED
@@ -117,17 +117,22 @@ export const StyledCard = styled.div<TypeStyledCard>`
117
117
  &[role="button"],
118
118
  &[role="checkbox"] {
119
119
  cursor: pointer;
120
+
121
+ &:hover {
122
+ box-shadow: ${({ theme, $elevation = "low" }) =>
123
+ theme.shadows[$elevation]};
124
+ }
120
125
  }
121
126
 
122
- ${({ $isRoleLink }) =>
127
+ ${({ $isRoleLink, theme, $elevation = "low" }) =>
123
128
  $isRoleLink &&
124
129
  `
125
130
  cursor: pointer;
126
- `}
127
131
 
128
- &:hover {
129
- box-shadow: ${({ theme, $elevation = "low" }) => theme.shadows[$elevation]};
130
- }
132
+ &:hover {
133
+ box-shadow: ${theme.shadows[$elevation]};
134
+ }
135
+ `}
131
136
 
132
137
  &:focus-within {
133
138
  ${({ $isRoleLink }) => ($isRoleLink ? focusRing : null)}