diff --git a/packages/example/src/data/nav-items.yaml b/packages/example/src/data/nav-items.yaml index c177de163..66ffaf7d2 100644 --- a/packages/example/src/data/nav-items.yaml +++ b/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 diff --git a/packages/example/src/pages/components/FeatureCard.mdx b/packages/example/src/pages/components/FeatureCard.mdx new file mode 100644 index 000000000..3a6721260 --- /dev/null +++ b/packages/example/src/pages/components/FeatureCard.mdx @@ -0,0 +1,57 @@ +--- +title: FeatureCard +--- + +import { Row, Column, FeatureCard, PageDescription } from 'gatsby-theme-carbon'; + + + +The `` component takes the same props as the `` component (except for `aspectRatio`, this is fixed at `1:2` for the card), this component should not be used within `` or `` components as the grid is built in to the component already. + + + +## Example + + + +![demo image](/images/large-image.png) + + + +## Code + +``` + + + +![demo image](/images/large-image.png) + + + +``` + +## 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 | diff --git a/packages/example/src/pages/components/images/large-image.png b/packages/example/src/pages/components/images/large-image.png new file mode 100644 index 000000000..fbd353d3f Binary files /dev/null and b/packages/example/src/pages/components/images/large-image.png differ diff --git a/packages/gatsby-theme-carbon/gatsby-config.js b/packages/gatsby-theme-carbon/gatsby-config.js index c71d9e6bf..8d3a1c871 100644 --- a/packages/gatsby-theme-carbon/gatsby-config.js +++ b/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, }, diff --git a/packages/gatsby-theme-carbon/index.js b/packages/gatsby-theme-carbon/index.js index e62e90108..15acb79fa 100644 --- a/packages/gatsby-theme-carbon/index.js +++ b/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'; diff --git a/packages/gatsby-theme-carbon/src/components/AutolinkHeader/AutolinkHeader.module.scss b/packages/gatsby-theme-carbon/src/components/AutolinkHeader/AutolinkHeader.module.scss index d7fba606a..f29bb4a9a 100644 --- a/packages/gatsby-theme-carbon/src/components/AutolinkHeader/AutolinkHeader.module.scss +++ b/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; } diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js b/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js new file mode 100755 index 000000000..6e1957d0d --- /dev/null +++ b/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 = ( + <> + + +
+
+ {children} +
+
+
+ + + + +
+ + ); + + let cardContainer; + if (disabled === true) { + cardContainer =
{cardContent}
; + } else if (isLink === true && !disabled) { + cardContainer = ( + + {cardContent} + + ); + } else { + cardContainer = ( + + {cardContent} + + ); + } + + return
{cardContainer}
; + } +} diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss b/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss new file mode 100644 index 000000000..09009ce13 --- /dev/null +++ b/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; + } +} diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/index.js b/packages/gatsby-theme-carbon/src/components/FeatureCard/index.js new file mode 100644 index 000000000..262999f85 --- /dev/null +++ b/packages/gatsby-theme-carbon/src/components/FeatureCard/index.js @@ -0,0 +1,3 @@ +import FeatureCard from './FeatureCard'; + +export default FeatureCard; diff --git a/packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card.scss b/packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card.scss index 0634efa0a..405d20875 100644 --- a/packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card.scss +++ b/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%; diff --git a/packages/gatsby-theme-carbon/src/styles/index.scss b/packages/gatsby-theme-carbon/src/styles/index.scss index 19ab6dee2..ffaefdbed 100644 --- a/packages/gatsby-theme-carbon/src/styles/index.scss +++ b/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