From 6aecf080b84c7b8a9a8103ec595efffe91a33bb7 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Thu, 2 May 2019 16:00:11 -0500 Subject: [PATCH] feat: add ResourceTile component --- packages/example/src/data/nav-items.yaml | 2 + .../pages/component-examples/ResourceTile.mdx | 97 ++++++++++++++ .../component-examples/images/github-icon.png | Bin 0 -> 6813 bytes packages/gatsby-theme-carbon/index.js | 1 + .../components/ResourceTile/ResourceTile.js | 126 ++++++++++++++++++ .../src/components/ResourceTile/index.js | 3 + .../ResourceTile/resource-tile.scss | 94 +++++++++++++ .../gatsby-theme-carbon/src/styles/_page.scss | 9 ++ .../gatsby-theme-carbon/src/styles/index.scss | 1 + 9 files changed, 333 insertions(+) create mode 100644 packages/example/src/pages/component-examples/ResourceTile.mdx create mode 100644 packages/example/src/pages/component-examples/images/github-icon.png create mode 100755 packages/gatsby-theme-carbon/src/components/ResourceTile/ResourceTile.js create mode 100644 packages/gatsby-theme-carbon/src/components/ResourceTile/index.js create mode 100644 packages/gatsby-theme-carbon/src/components/ResourceTile/resource-tile.scss 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 0000000000000000000000000000000000000000..6316d77ab081d5878cd290c6a8284ca9009155aa GIT binary patch literal 6813 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 C6BW|{ literal 0 HcmV?d00001 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