feat: muted prop for card to give light gray background (#1455)

src/Card/Card.scss

@@ -4,6 +4,10 @@
 .pgn__card,
 .pgn__card-body {
   width: 100%;
+
+  &.is-muted {
+    background-color: $light-200;
+  }
 }
 
 .pgn__card-grid {

src/Card/README.md

@@ -50,6 +50,33 @@ This component uses a `Card` from react-bootstrap as a base component and extend
 )}
 ```
 
+## With muted styling
+
+Use `muted` prop to show `Card` in inactive state.
+
+```jsx live
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Card style={{ width: isExtraSmall ? "100%" : "18rem" }} muted>
+      <Card.ImageCap 
+        src="https://source.unsplash.com/360x200/?nature,flower"
+        srcAlt="Card image"
+      />
+      <Card.Header
+        title="Card Title"
+      />
+      <Card.Section>
+        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
+      </Card.Section>
+      <Card.Footer>
+        <Button>Action 1</Button>
+      </Card.Footer>
+    </Card>
+)}
+```
+
 ## Clickable variant
 
 You use `isClickable` prop to add additional `hover` and `focus` styling to the `Card`.

src/Card/index.jsx

@@ -15,6 +15,7 @@ const Card = React.forwardRef(({
   isLoading,
   className,
   isClickable,
+  muted,
   ...props
 }, ref) => (
   <CardContextProvider orientation={orientation} isLoading={isLoading}>
@@ -23,6 +24,7 @@ const Card = React.forwardRef(({
       className={classNames(className, 'pgn__card', {
         horizontal: orientation === 'horizontal',
         clickable: isClickable,
+        'is-muted': muted,
       })}
       ref={ref}
       tabIndex={isClickable ? '0' : '-1'}
@@ -46,13 +48,16 @@ Card.propTypes = {
   isClickable: PropTypes.bool,
   /** Specifies loading state. */
   isLoading: PropTypes.bool,
+  /** Specifies whether to display `Card` in muted styling. */
+  muted: PropTypes.bool,
 };
 
 Card.defaultProps = {
   ...BaseCard.defaultProps,
   className: undefined,
   orientation: 'vertical',
   isClickable: false,
+  muted: false,
   isLoading: false,
 };