feat(ImageCard): add new ImageCard component

packages/example/src/data/nav-items.yaml

@@ -22,6 +22,8 @@
       path: /components/ArticleCard
     - title: FeatureCard
       path: /components/FeatureCard
+    - title: ImageCard
+      path: /components/ImageCard
 - title: Contributing
   pages:
     - title: Agreement

packages/example/src/pages/components/ArticleCard.mdx

@@ -6,7 +6,7 @@ import { Row, Column, ArticleCard, PageDescription } from 'gatsby-theme-carbon';
 
 <PageDescription>
 
-The `<ArticleCard>` component should generally be used inside of a `<Row>` and test `<Column>` with a `noGutterMdLeft` prop on the `<Column>` to allow it to "hang" to the left.
+The `<ArticleCard>` component should generally be used inside of a `<Row>` and `<Column>` with a `noGutterMdLeft` prop on the `<Column>` to allow it to "hang" to the left.
 
 </PageDescription>
 

packages/example/src/pages/components/ImageCard.mdx

@@ -0,0 +1,158 @@
+---
+title: ImageCard
+---
+
+import { Row, Column, ImageCard, PageDescription } from 'gatsby-theme-carbon';
+
+<PageDescription>
+
+The `<ImageCard>` component should generally be used inside of a `<Row>` and `<Column>` component.
+
+</PageDescription>
+
+## Example
+
+<Row className="image-card-group">
+<Column colMd={4} colLg={4} noGutterSm>
+    <ImageCard
+      title="Title"
+      subTitle="Subtitle"
+      href="/"
+      >
+
+![](/images/square.png)
+
+  </ImageCard>
+  <ImageCard
+      title="Title"
+      aspectRatio="1:1"
+      href="/"
+      actionIcon="arrowRight"
+      subTitleColor="dark"
+      subTitle="subTitle"
+      >
+
+![](/images/color-grid.svg)
+
+  </ImageCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ImageCard
+      title="Title"
+      subTitle="Subtitle"
+      aspectRatio="1:2"
+      href="/"
+      actionIcon="download"
+      titleColor="dark"
+      subTitleColor="dark"
+      >
+
+![](/images/featured.png)
+
+  </ImageCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ImageCard
+      aspectRatio="1:1"
+      href="/"
+      hoverColor="dark"
+      >
+
+![](/images/color-grid.svg)
+
+  </ImageCard>
+      <ImageCard
+      disabled
+      aspectRatio="1:1"
+      href="/"
+      >
+
+![](/images/square.png)
+
+  </ImageCard>
+</Column>
+</Row>
+
+## Code
+
+```
+
+<Row>
+  <Column colMd={4} colLg={4} noGutterSm>
+    <ImageCard
+      title="Title"
+      subTitle="Subtitle"
+      href="/"
+      >
+
+![](/images/square.png)
+
+  </ImageCard>
+  <ImageCard
+      title="Title"
+      aspectRatio="1:1"
+      href="/"
+      actionIcon="arrowRight"
+      subTitleColor="dark"
+      subTitle="subTitle"
+      >
+
+![](/images/color-grid.svg)
+
+  </ImageCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ImageCard
+      title="Title"
+      subTitle="Subtitle"
+      aspectRatio="1:2"
+      href="/"
+      actionIcon="download"
+      titleColor="dark"
+      subTitleColor="dark"
+      >
+
+![](/images/featured.png)
+
+  </ImageCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ImageCard
+      aspectRatio="1:1"
+      href="/"
+      hoverColor="dark"
+      >
+
+![](/images/color-grid.svg)
+
+  </ImageCard>
+      <ImageCard
+      disabled
+      aspectRatio="1:1"
+      href="/"
+      >
+
+![](/images/square.png)
+
+  </ImageCard>
+</Column>
+</Row>
+
+```
+
+## Props
+
+| property      | propType | required | default | description                                                                                                      |
+| ------------- | -------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| children      | node     |          |         | Background image for the card, make sure it is saved out at the correct aspect ratio or it will appear distorted |
+| href          | string   |          |         | Set url for card                                                                                                 |
+| aspectRatio   | string   |          | `1:1`   | Set card aspect ratio, default is `1:1`, options are `1:1`, `16:9`, `4:3`, `2:1`, `1:2`                          |
+| subTitle      | string   |          |         | Smaller title in bottom left of card                                                                             |
+| title         | string   |          |         | Large title                                                                                                      |
+| actionIcon    | string   |          |         | Action icon, default is no icon, options are `Launch`, `ArrowRight`, `Download`                                  |
+| titleColor    | string   |          | `light` | Set title text color, default is `light`, options are `light` or `dark`                                          |
+| subTitleColor | string   |          | `light` | Set sub title text color, default is `light`, options are `light` or `dark`                                      |
+| iconColor     | string   |          | `light` | Set icon color, default is `light`, options are `light` or `dark`                                                |
+| hoverColor    | string   |          | `light` | Set hover to lighten or darken the image, default is `light`, options are `light` or `dark`                      |
+| disabled      | bool     |          | `false` | Set for disabled card                                                                                            |
+| className     | string   |          |         | Add custom class name                                                                                            |

packages/gatsby-theme-carbon/index.js

@@ -9,6 +9,7 @@ export { default as ResourceCard } from './src/components/ResourceCard';
 export { default as ArticleCard } from './src/components/ArticleCard';
 export { default as Aside } from './src/components/Aside';
 export { default as FeatureCard } from './src/components/FeatureCard';
+export { default as ImageCard } from './src/components/ImageCard';
 
 // Homepage Template Components
 export { HomepageCallout, HomepageBanner } from './src/components/Homepage';

packages/gatsby-theme-carbon/src/components/ImageCard/ImageCard.js

@@ -0,0 +1,188 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Link } from 'gatsby';
+import Launch20 from '@carbon/icons-react/es/launch/20';
+import Download20 from '@carbon/icons-react/es/download/20';
+import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
+import Error20 from '@carbon/icons-react/es/error/20';
+import { settings } from 'carbon-components';
+
+const { prefix } = settings;
+
+export default class ImageCard extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+
+    /**
+     * Set url for card
+     */
+    href: PropTypes.string,
+
+    /**
+     * Smaller heading
+     */
+    subTitle: PropTypes.string,
+
+    /**
+     * Large heading
+     */
+    title: PropTypes.string,
+
+    /**
+     * Action icon, default is launch, options are Launch, ArrowRight, Download, Error
+     */
+    actionIcon: PropTypes.string,
+
+    /**
+     * Set card aspect ratio, default is 1:1, options are 1:1, 16:9, 4:3, 2:1, 1:2
+     */
+    aspectRatio: PropTypes.bool,
+
+    /**
+     * Use for disabled card
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * Specify a custom class
+     */
+    className: PropTypes.string,
+
+    /**
+     * Set title text color, default is light, options are light or dark
+     */
+    titleColor: PropTypes.string,
+
+    /**
+     * Set sub title text color, default is light, options are light or dark
+     */
+    subTitleColor: PropTypes.string,
+
+    /**
+     * Set icon color, default is light, options are light or dark
+     */
+    iconColor: PropTypes.string,
+
+    /**
+     * Set hover to lighten or darken the image, default is light, options are light or dark
+     */
+    hoverColor: PropTypes.string,
+  };
+
+  static defaultProps = {
+    disabled: false,
+    aspectRatio: '1:1',
+    titleColor: 'light',
+    subTitleColor: 'light',
+    iconColor: 'light',
+    hoverColor: 'light',
+  };
+
+  render() {
+    const {
+      children,
+      href,
+      subTitle,
+      title,
+      titleColor,
+      subTitleColor,
+      iconColor,
+      hoverColor,
+      disabled,
+      aspectRatio,
+      actionIcon,
+      className,
+    } = this.props;
+
+    let isLink;
+    if (href !== undefined) {
+      isLink = href.charAt(0) === '/';
+    }
+
+    const ImageCardClassNames = classnames([`${prefix}--image-card`], {
+      [className]: className,
+      [`${prefix}--image-card--disabled`]: disabled,
+      [`${prefix}--image-card--dark`]: hoverColor === 'dark',
+    });
+
+    const aspectRatioClassNames = classnames([`${prefix}--aspect-ratio`], {
+      [`${prefix}--aspect-ratio--2x1`]: aspectRatio === '2:1',
+      [`${prefix}--aspect-ratio--1x2`]: aspectRatio === '1:2',
+      [`${prefix}--aspect-ratio--1x1`]: aspectRatio === '1:1',
+      [`${prefix}--aspect-ratio--16x9`]: aspectRatio === '16:9',
+      [`${prefix}--aspect-ratio--4x3`]: aspectRatio === '4:3',
+    });
+
+    const carbonTileclassNames = classnames(
+      [`${prefix}--tile`],
+      [`${prefix}--tile--clickable`]
+    );
+
+    const titleClassNames = classnames([`${prefix}--image-card__title`], {
+      [`${prefix}--image-card__title--dark`]: titleColor === 'dark',
+    });
+
+    const subTitleClassNames = classnames([`${prefix}--image-card__subtitle`], {
+      [`${prefix}--image-card__subtitle--dark`]: subTitleColor === 'dark',
+    });
+
+    const iconClassNames = classnames([`${prefix}--image-card__icon--action`], {
+      [`${prefix}--image-card__icon--action--dark`]: iconColor === 'dark',
+    });
+
+    const cardContent = (
+      <>
+        {title ? <h4 className={titleClassNames}>{title}</h4> : null}
+        {subTitle ? <h5 className={subTitleClassNames}>{subTitle}</h5> : null}
+        <div className={iconClassNames}>
+          {actionIcon === 'launch' && !disabled ? (
+            <Launch20 aria-label="Open resource" />
+          ) : null}
+          {actionIcon === 'arrowRight' && !disabled ? (
+            <ArrowRight20 aria-label="Open resource" />
+          ) : null}
+          {actionIcon === 'download' && !disabled ? (
+            <Download20 aria-label="Download" />
+          ) : null}
+          {actionIcon === 'disabled' || disabled === true ? (
+            <Error20 aria-label="disabled" />
+          ) : null}
+        </div>
+        <div className={`${prefix}--image-card__img`}>{children}</div>
+      </>
+    );
+
+    let cardContainer;
+    if (disabled === true) {
+      cardContainer = <div className={carbonTileclassNames}>{cardContent}</div>;
+    } else if (isLink === true) {
+      cardContainer = (
+        <Link to={href} className={carbonTileclassNames}>
+          {cardContent}
+        </Link>
+      );
+    } else {
+      cardContainer = (
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href={href}
+          className={carbonTileclassNames}
+        >
+          {cardContent}
+        </a>
+      );
+    }
+
+    return (
+      <div className={ImageCardClassNames}>
+        <div className={aspectRatioClassNames}>
+          <div className={`${prefix}--aspect-ratio--object`}>
+            {cardContainer}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

packages/gatsby-theme-carbon/src/components/ImageCard/aspect-ratio.scss

@@ -0,0 +1,3 @@
+.#{$prefix}--aspect-ratio--1x2 {
+  padding-bottom: 200%;
+}