feat(CCard): add CCardImageOverlay component

Author: mrholek

src/components/card/CCardImageOverlay.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CCardImageOverlayProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CCardImageOverlay = forwardRef<HTMLDivElement, CCardImageOverlayProps>(
+  ({ children, className, ...rest }, ref) => {
+    const _className = classNames('card-img-overlay', className)
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)
+
+CCardImageOverlay.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CCardImageOverlay.displayName = 'CCardImageOverlay'

src/index.ts

@@ -22,6 +22,7 @@ import { CCardFooter } from './components/card/CCardFooter'
 import { CCardGroup } from './components/card/CCardGroup'
 import { CCardHeader } from './components/card/CCardHeader'
 import { CCardImage } from './components/card/CCardImage'
+import { CCardImageOverlay } from './components/card/CCardImageOverlay'
 import { CCardLink } from './components/card/CCardLink'
 import { CCardSubtitle } from './components/card/CCardSubtitle'
 import { CCardText } from './components/card/CCardText'
@@ -152,6 +153,7 @@ export {
   CCardFooter,
   CCardHeader,
   CCardImage,
+  CCardImageOverlay,
   CCardLink,
   CCardSubtitle,
   CCardText,