feat(react cardnode): add support for applying a custom class to the …

…outer node

The CardNode component has a `color` prop which can be used to specify the
colour of the border applied on the outer node. However, this requires the
code to be aware of the active theme, handle dark mode, etc. to select an
appropriate colour in some cases.

For component libraries this can be problematic as now both the components
and their consumers need to be aware of theme rather than relying on this
being handled entirely in (S)CSS.

Add support for applying a custom class to the CardNode component which will
be applied to the outer node and can be used to apply styles to the card and
its children, including specifying the border colour for the card.

resolves carbon-design-system#1221

packages/react/src/diagrams/CardNode/CardNode.tsx

@@ -13,6 +13,7 @@ const namespace = `${prefix}--cc--card-node`;
 const CardNode = ({
 	as = 'div',
 	children,
+	className,
 	color,
 	href = null,
 	onMouseEnter = null,
@@ -37,6 +38,7 @@ const CardNode = ({
 	const cardClasses = classnames(namespace, {
 		[`${namespace}--stacked`]: stacked,
 		[`${namespace}--${Component}`]: Component,
+		[className]: className,
 	});
 
 	return (
@@ -67,6 +69,11 @@ CardNode.propTypes = {
 	 */
 	children: PropTypes.node,
 
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+
 	/**
 	 * Specify the node's border color
 	 */