feat: add ResourceTile component

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

@@ -6,6 +6,8 @@
       path: /component-examples/DoDontExample
     - title: Caption
       path: /component-examples/Caption
+    - title: Tile
+      path: /component-examples/Tile
     # - title: ImageComponent
     # path: /component-examples/ImageComponent
 - title: Contributing

packages/example/src/pages/component-examples/ResourceTile.mdx

@@ -0,0 +1,97 @@
+---
+title: ResourceTile
+---
+
+import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
+
+## ResourceTile
+
+<Row>
+<Column colMd={4} colLg={4} noGutterLg>
+    <ResourceTile
+      subTitle="Design Kit"
+      title="Explore & Create"
+      aspectRatio="2:1"
+      href="https://github.com/IBM/carbon-elements/blob/master/.github/CONTRIBUTING.md"
+      >
+
+![](/images/github-icon.png)
+
+  </ResourceTile>
+</Column>
+<Column colMd={4} colLg={4} noGutterLg>
+    <ResourceTile
+      subTitle="Download"
+      actionIcon="download"
+      aspectRatio="2:1"
+      href="https://github.com/IBM/carbon-elements/blob/master/.github/CONTRIBUTING.md"
+      >
+
+![](/images/github-icon.png)
+
+  </ResourceTile>
+</Column>
+</Row>
+
+### Dark
+
+<Row>
+<Column colMd={4} colLg={4} noGutterLg>
+    <ResourceTile
+      subTitle="Design Kit"
+      title="Explore & Create"
+      actionIcon="arrowRight"
+      aspectRatio="2:1"
+      dark
+      href="https://github.com/IBM/carbon-elements/blob/master/.github/CONTRIBUTING.md"
+      >
+
+![](/images/github-icon.png)
+
+  </ResourceTile>
+</Column>
+<Column colMd={4} colLg={4} noGutterLg>
+    <ResourceTile
+      subTitle="Design Kit"
+      actionIcon="launch"
+      aspectRatio="2:1"
+      dark
+      href="https://github.com/IBM/carbon-elements/blob/master/.github/CONTRIBUTING.md"
+      >
+
+![](/images/github-icon.png)
+
+  </ResourceTile>
+</Column>
+</Row>
+
+### Disabled
+
+<Row>
+  <Column colMd={4} colLg={4} noGutterLg>
+    <ResourceTile
+      subTitle="Design Kit"
+      title="Explore & Create"
+      aspectRatio="2:1"
+      actionIcon="launch"
+      disabled
+    />
+  </Column>
+  <Column colMd={4} colLg={4} noGutterLg>
+    <ResourceTile subTitle="Design Kit" aspectRatio="2:1" disabled />
+  </Column>
+</Row>
+<Row>
+  <Column colMd={4} colLg={4} noGutterLg>
+    <ResourceTile
+      subTitle="Design Kit"
+      title="Explore & Create"
+      aspectRatio="2:1"
+      disabled
+      dark
+    />
+  </Column>
+  <Column colMd={4} colLg={4} noGutterLg>
+    <ResourceTile subTitle="Design Kit" aspectRatio="2:1" disabled dark />
+  </Column>
+</Row>

packages/gatsby-theme-carbon/index.js

@@ -4,4 +4,5 @@ export { default as Video } from './src/components/Video';
 export { default as DoDontExample } from './src/components/DoDontExample';
 export { Row, Column } from './src/components/Grid';
 export { default as Caption } from './src/components/Caption';
+export { default as ResourceTile } from './src/components/ResourceTile';
 //export { default as ImageComponent } from './src/components/ImageComponent'; // in progress

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { ClickableTile } from 'carbon-components-react';
+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 ResourceTile extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+
+    /**
+     * Set url for tile
+     */
+    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 tile aspect ratio, default is 2:1
+     */
+    aspectRatio: PropTypes.bool,
+
+    /**
+     * Use for dark tile
+     */
+    dark: PropTypes.bool,
+
+    /**
+     * Use for disabled tile
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * Specify a custom class
+     */
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    dark: false,
+    disabled: false,
+    aspectRatio: '2:1',
+    actionIcon: 'launch',
+  };
+
+  render() {
+    const {
+      children,
+      href,
+      subTitle,
+      title,
+      dark,
+      disabled,
+      aspectRatio,
+      actionIcon,
+      className,
+    } = this.props;
+
+    const classNames = classnames([`${prefix}--resource-tile`], {
+      [className]: className,
+      [`${prefix}--resource-tile--disabled`]: disabled,
+      [`${prefix}--resource-tile--dark`]: dark,
+    });
+
+    const aspectRatioClassNames = classnames([`${prefix}--aspect-ratio`], {
+      [`${prefix}--aspect-ratio--2x1`]: aspectRatio === '2:1',
+      [`${prefix}--aspect-ratio--1x1`]: aspectRatio === '1:1',
+      // Add other aspect ratio classes here
+    });
+
+    return (
+      <div className={classNames}>
+        <div className={aspectRatioClassNames}>
+          <div className={`${prefix}--aspect-ratio--object`}>
+            <ClickableTile
+              target="_blank"
+              rel="noopener noreferrer"
+              href={href}
+            >
+              <h5 className={`${prefix}--resource-tile__subtitle`}>
+                {subTitle}
+              </h5>
+              <h4 className={`${prefix}--resource-tile__title`}>{title}</h4>
+              <div className={`${prefix}--resource-tile__icon--img`}>
+                {children}
+              </div>
+              <div className={`${prefix}--resource-tile__icon--action`}>
+                {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>
+            </ClickableTile>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

packages/gatsby-theme-carbon/src/components/ResourceTile/index.js

@@ -0,0 +1,3 @@
+import ResourceTile from './ResourceTile';
+
+export default ResourceTile;

packages/gatsby-theme-carbon/src/components/ResourceTile/resource-tile.scss

@@ -0,0 +1,94 @@
+.#{$prefix}--resource-tile .#{$prefix}--tile {
+  background: $ui-background;
+  height: 100%;
+  padding: $spacing-05;
+  position: relative;
+  transition: background $duration--fast-01;
+  text-decoration: none;
+}
+
+.#{$prefix}--resource-tile .#{$prefix}--tile:hover {
+  background: $hover-ui;
+}
+
+.#{$prefix}--resource-tile__title {
+  @include carbon--type-style('productive-heading-03');
+  text-decoration: none;
+  color: $text-01;
+}
+
+.#{$prefix}--resource-tile__subtitle {
+  @include carbon--type-style('body-short-02');
+  text-decoration: none;
+  color: $text-01;
+}
+
+.#{$prefix}--resource-tile__icon--img {
+  position: absolute;
+  bottom: 1rem;
+  left: 1rem;
+  width: 32px;
+  height: 32px;
+}
+
+.#{$prefix}--resource-tile__icon--action {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  width: 20px;
+  height: 20px;
+}
+
+// Dark
+.#{$prefix}--resource-tile--dark .#{$prefix}--tile {
+  background: $carbon--gray-90; //$ui-background for gray 90 theme
+}
+
+.#{$prefix}--resource-tile--dark .#{$prefix}--tile:hover {
+  background: $carbon--gray-80; //$hover-ui for gray 90 theme
+}
+
+.#{$prefix}--resource-tile--dark .#{$prefix}--resource-tile__title,
+.#{$prefix}--resource-tile--dark .#{$prefix}--resource-tile__subtitle {
+  color: $text-04;
+}
+
+.#{$prefix}--resource-tile--dark .#{$prefix}--resource-tile__icon--action svg {
+  fill: $carbon--white-0;
+}
+
+// Disabled
+.#{$prefix}--resource-tile--disabled .#{$prefix}--tile:hover {
+  background: $ui-background;
+  cursor: not-allowed;
+}
+
+.#{$prefix}--resource-tile--disabled .#{$prefix}--resource-tile__title,
+.#{$prefix}--resource-tile--disabled .#{$prefix}--resource-tile__subtitle {
+  color: $disabled-03;
+}
+
+.#{$prefix}--resource-tile--disabled
+  .#{$prefix}--resource-tile__icon--action
+  svg {
+  fill: $disabled-02;
+}
+
+// Disabled dark
+.#{$prefix}--resource-tile--disabled.#{$prefix}--resource-tile--dark
+  .#{$prefix}--tile:hover {
+  background: $carbon--gray-90; //$ui-background for gray 90 theme
+}
+
+.#{$prefix}--resource-tile--disabled.#{$prefix}--resource-tile--dark
+  .#{$prefix}--resource-tile__title,
+.#{$prefix}--resource-tile--disabled.#{$prefix}--resource-tile--dark
+  .#{$prefix}--resource-tile__subtitle {
+  color: $carbon--gray-50; //$disabled-023for gray 90
+}
+
+.#{$prefix}--resource-tile--disabled.#{$prefix}--resource-tile--dark
+  .#{$prefix}--resource-tile__icon--action
+  svg {
+  fill: $carbon--gray-70; //$disabled-02 for gray 90
+}

packages/gatsby-theme-carbon/src/styles/_page.scss

@@ -128,6 +128,15 @@ em {
   margin-bottom: $spacing-06;
 }
 
+.gatsby-resp-image-background-image {
+  background: transparent !important; // Need important to override inline style added by gatsby-remark-images
+}
+
+.gatsby-resp-image-image {
+  box-shadow: none !important; // Need important to override inline style added by gatsby-remark-images
+  border: none !important;
+}
+
 // iframe
 .gatsby-resp-iframe-wrapper {
   position: relative;

packages/gatsby-theme-carbon/src/styles/index.scss

@@ -56,4 +56,5 @@ $font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
 @import '../components/DoDontExample/do-dont-example.scss';
 @import '../components/AnchorLinks/anchor-links.scss';
 @import '../components/Caption/caption.scss';
+@import '../components/ResourceTile/resource-tile.scss';
 //@import '../components/ImageComponent/image-component.scss'; //WIP