diff --git a/packages/example/src/data/nav-items.yaml b/packages/example/src/data/nav-items.yaml index 95cc996ce..57ac8745a 100644 --- a/packages/example/src/data/nav-items.yaml +++ b/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 diff --git a/packages/example/src/pages/component-examples/ResourceTile.mdx b/packages/example/src/pages/component-examples/ResourceTile.mdx new file mode 100644 index 000000000..97a7454a1 --- /dev/null +++ b/packages/example/src/pages/component-examples/ResourceTile.mdx @@ -0,0 +1,97 @@ +--- +title: ResourceTile +--- + +import { Row, Column, ResourceTile } from 'gatsby-theme-carbon'; + +## ResourceTile + + + + + +![](/images/github-icon.png) + + + + + + +![](/images/github-icon.png) + + + + + +### Dark + + + + + +![](/images/github-icon.png) + + + + + + +![](/images/github-icon.png) + + + + + +### Disabled + + + + + + + + + + + + + + + + + diff --git a/packages/example/src/pages/component-examples/images/github-icon.png b/packages/example/src/pages/component-examples/images/github-icon.png new file mode 100644 index 000000000..6316d77ab Binary files /dev/null and b/packages/example/src/pages/component-examples/images/github-icon.png differ diff --git a/packages/gatsby-theme-carbon/index.js b/packages/gatsby-theme-carbon/index.js index a6e3fe8d6..59c63b30d 100644 --- a/packages/gatsby-theme-carbon/index.js +++ b/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 diff --git a/packages/gatsby-theme-carbon/src/components/ResourceTile/ResourceTile.js b/packages/gatsby-theme-carbon/src/components/ResourceTile/ResourceTile.js new file mode 100755 index 000000000..87ed23c3a --- /dev/null +++ b/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 ( +
+
+
+ +
+ {subTitle} +
+

{title}

+
+ {children} +
+
+ {actionIcon === 'launch' && !disabled ? ( + + ) : null} + {actionIcon === 'arrowRight' && !disabled ? ( + + ) : null} + {actionIcon === 'download' && !disabled ? ( + + ) : null} + {actionIcon === 'disabled' || disabled === true ? ( + + ) : null} +
+ +
+
+
+ ); + } +} diff --git a/packages/gatsby-theme-carbon/src/components/ResourceTile/index.js b/packages/gatsby-theme-carbon/src/components/ResourceTile/index.js new file mode 100644 index 000000000..29ebf04ca --- /dev/null +++ b/packages/gatsby-theme-carbon/src/components/ResourceTile/index.js @@ -0,0 +1,3 @@ +import ResourceTile from './ResourceTile'; + +export default ResourceTile; diff --git a/packages/gatsby-theme-carbon/src/components/ResourceTile/resource-tile.scss b/packages/gatsby-theme-carbon/src/components/ResourceTile/resource-tile.scss new file mode 100644 index 000000000..623154ebe --- /dev/null +++ b/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 +} diff --git a/packages/gatsby-theme-carbon/src/styles/_page.scss b/packages/gatsby-theme-carbon/src/styles/_page.scss index 2fbfb9cc9..69829e050 100644 --- a/packages/gatsby-theme-carbon/src/styles/_page.scss +++ b/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; diff --git a/packages/gatsby-theme-carbon/src/styles/index.scss b/packages/gatsby-theme-carbon/src/styles/index.scss index 51d0a509b..7eb10ee67 100644 --- a/packages/gatsby-theme-carbon/src/styles/index.scss +++ b/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