Merge pull request #81 from alisonjoseph/feature-card

feat(FeatureCard): add feature card component

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

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

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

@@ -0,0 +1,57 @@
+---
+title: FeatureCard
+---
+
+import { Row, Column, FeatureCard, PageDescription } from 'gatsby-theme-carbon';
+
+<PageDescription>
+
+The `<FeatureCard>` component takes the same props as the `<ResourceCard>` component (except for `aspectRatio`, this is fixed at `1:2` for the card), this component should not be used within `<Row>` or `<Column>` components as the grid is built in to the component already.
+
+</PageDescription>
+
+## Example
+
+<FeatureCard
+  subTitle="With subtitle"
+  title="Title"
+  actionIcon="arrowRight"
+  href="/"
+  color="dark"
+  >
+
+![demo image](/images/large-image.png)
+
+</FeatureCard>
+
+## Code
+
+```
+
+<FeatureCard
+  subTitle="With subtitle"
+  title="Title"
+  actionIcon="arrowRight"
+  href="/"
+  disabled
+  color="dark"
+  >
+
+![demo image](/images/large-image.png)
+
+</FeatureCard>
+
+```
+
+## Props
+
+| property   | propType | required | default  | description                                                                             |
+| ---------- | -------- | -------- | -------- | --------------------------------------------------------------------------------------- |
+| children   | node     |          |          | Use large image as child, will display above the card                                   |
+| href       | string   |          |          | Set url for card                                                                        |
+| subTitle   | string   |          |          | Smaller title                                                                           |
+| title      | string   |          |          | Large title                                                                             |
+| actionIcon | string   |          | `launch` | Action icon, default is launch, options are `Launch`, `ArrowRight`, `Download`, `Error` |
+| color      | string   |          | light    | Set to `dark` for dark background                                                       |
+| disabled   | bool     |          | false    | Set for disabled card                                                                   |
+| className  | string   |          |          | Add custom class name                                                                   |

packages/gatsby-theme-carbon/gatsby-config.js

@@ -37,7 +37,7 @@ module.exports = themeOptions => {
             {
               resolve: `gatsby-remark-images`,
               options: {
-                maxWidth: 1164,
+                maxWidth: 1184,
                 linkImagesToOriginal: false,
                 tracedSVG: true,
               },

packages/gatsby-theme-carbon/index.js

@@ -8,6 +8,7 @@ export { default as Caption } from './src/components/Caption';
 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';
 
 // Homepage Template Components
 export { HomepageCallout, HomepageBanner } from './src/components/Homepage';

packages/gatsby-theme-carbon/src/components/AutolinkHeader/AutolinkHeader.module.scss

@@ -2,6 +2,7 @@
 
 .header {
   position: relative;
+
   &:hover {
     .anchor {
       opacity: 1;
@@ -15,10 +16,12 @@
   position: absolute;
   left: -$spacing-06;
   top: 0;
+
   &:hover,
   &:active {
     opacity: 1;
   }
+
   svg {
     fill: $interactive-01;
   }

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

@@ -0,0 +1,138 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Link } from 'gatsby';
+import { Row, Column } from '../Grid';
+import ResourceCard from '../ResourceCard';
+import { settings } from 'carbon-components';
+
+const { prefix } = settings;
+
+export default class FeatureCard 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 to "dark" for dark background card
+     */
+    color: PropTypes.string,
+
+    /**
+     * Use for disabled card
+     */
+    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,
+      color,
+      disabled,
+      actionIcon,
+      className,
+    } = this.props;
+
+    let isLink;
+    if (href !== undefined) {
+      isLink = href.charAt(0) === '/';
+    }
+
+    const FeatureCardClassNames = classnames([`${prefix}--feature-card`], {
+      [className]: className,
+    });
+
+    const cardContent = (
+      <>
+        <Row>
+          <Column noGutterSm>
+            <div
+              className={`${prefix}--feature-card__img ${prefix}--aspect-ratio--1x1`}
+            >
+              <div className={`${prefix}--aspect-ratio--object`}>
+                {children}
+              </div>
+            </div>
+          </Column>
+
+          <Column
+            className={`${prefix}--feature-card__row`}
+            colMd={4}
+            colLg={4}
+            offsetLg={8}
+            offsetMd={4}
+            noGutterSm
+          >
+            <ResourceCard
+              title={title}
+              subTitle={subTitle}
+              aspectRatio="2:1"
+              href={href}
+              actionIcon={actionIcon}
+              color={color}
+              disabled={disabled}
+            />
+          </Column>
+        </Row>
+      </>
+    );
+
+    let cardContainer;
+    if (disabled === true) {
+      cardContainer = <div>{cardContent}</div>;
+    } else if (isLink === true && !disabled) {
+      cardContainer = (
+        <Link className={`${prefix}--feature-card__link`} to={href}>
+          {cardContent}
+        </Link>
+      );
+    } else {
+      cardContainer = (
+        <a
+          className={`${prefix}--feature-card__link`}
+          target="_blank"
+          rel="noopener noreferrer"
+          href={href}
+        >
+          {cardContent}
+        </a>
+      );
+    }
+
+    return <div className={FeatureCardClassNames}>{cardContainer}</div>;
+  }
+}

packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss

@@ -0,0 +1,67 @@
+.#{$prefix}--feature-card {
+  position: relative;
+}
+
+.#{$prefix}--feature-card__row {
+  @include carbon--breakpoint('md') {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.#{$prefix}--feature-card__img {
+  position: relative;
+}
+
+.#{$prefix}--feature-card .gatsby-resp-image-wrapper {
+  margin-bottom: 0;
+}
+
+.#{$prefix}--feature-card:hover
+  .#{$prefix}--feature-card__link
+  .#{$prefix}--tile {
+  background: $hover-ui;
+}
+
+.#{$prefix}--feature-card:hover
+  .#{$prefix}--feature-card__link
+  .#{$prefix}--resource-card--dark
+  .#{$prefix}--tile {
+  background: $carbon--gray-80; //$hover-ui for gray 90 theme
+}
+
+// Display image at square aspect ratio only on mobile
+.#{$prefix}--feature-card__img.#{$prefix}--aspect-ratio--1x1 {
+  @include carbon--breakpoint('md') {
+    padding-bottom: 0;
+  }
+}
+
+.#{$prefix}--feature-card__img .#{$prefix}--aspect-ratio--object {
+  @include carbon--breakpoint('md') {
+    position: static;
+  }
+}
+
+@include carbon--breakpoint('sm') {
+  .#{$prefix}--feature-card .gatsby-resp-image-wrapper {
+    position: relative;
+    display: block;
+    margin-left: -1rem;
+    margin-right: -1rem;
+    max-width: 100%;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .#{$prefix}--feature-card .gatsby-resp-image-background-image {
+    padding-bottom: 100%;
+  }
+
+  .#{$prefix}--feature-card .gatsby-resp-image-image {
+    width: auto !important;
+    left: auto !important;
+    right: 0;
+  }
+}

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

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

packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card.scss

@@ -1,3 +1,8 @@
+.#{$prefix}--feature-card__row {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
 .#{$prefix}--resource-card .#{$prefix}--tile {
   background: $ui-background;
   height: 100%;

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

@@ -60,6 +60,7 @@ $font-family-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',
 @import '../components/Aside/aside.scss';
 @import '../components/Video/video.scss';
 @import '../components/Code/code.scss';
+@import '../components/FeatureCard/feature-card.scss';
 
 //---------------------------------------
 // Included last to ensure that class