diff --git a/assets/components/src/button-card/index.js b/assets/components/src/button-card/index.js new file mode 100644 index 0000000000..4e5b5480cd --- /dev/null +++ b/assets/components/src/button-card/index.js @@ -0,0 +1,49 @@ +/** + * Button Card + */ + +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; +import { Icon, chevronRight } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import './style.scss'; + +/** + * External dependencies + */ +import classnames from 'classnames'; + +class ButtonCard extends Component { + /** + * Render + */ + render() { + const { chevron, className, desc, grouped, icon, isSmall, title, ...otherProps } = this.props; + const classes = classnames( + 'newspack-button-card', + className, + chevron && 'has-chevron', + grouped && 'grouped', + icon && 'has-icon', + isSmall && 'is-small' + ); + + return ( + + { icon && } +
+ { title &&
{ title }
} + { desc &&
{ desc }
} +
+ { chevron && } + + ); + } +} + +export default ButtonCard; diff --git a/assets/components/src/button-card/style.scss b/assets/components/src/button-card/style.scss new file mode 100644 index 0000000000..8d00e8c490 --- /dev/null +++ b/assets/components/src/button-card/style.scss @@ -0,0 +1,140 @@ +/** + * Button Card + */ + +@import '../../../shared/scss/colors'; +@import '~@wordpress/base-styles/colors'; + +.newspack-button-card { + border-radius: 3px; + border: 1px solid $light-gray-500; + box-shadow: inset 0 0 0 2px transparent; + cursor: pointer; + display: block; + margin: 32px 0; + padding: 32px; + text-decoration: none; + transition: background-color 125ms ease-in-out, border-color 125ms ease-in-out, + box-shadow 125ms ease-in-out; + + &:active, + &:focus, + &:hover { + background-color: $light-gray-100; + color: $primary-600; + text-decoration: none; + + .title, + .desc { + color: inherit; + } + } + + &:focus { + border-color: $primary-500; + box-shadow: inset 0 0 0 2px $primary-500 !important; + outline: none !important; + position: relative; + } + + .title, + .desc { + line-height: 24px; + transition: color 125ms ease-in-out; + } + + .title { + color: $dark-gray-900; + font-size: 17px; + font-weight: bold; + } + + .desc { + color: $dark-gray-300; + font-size: 14px; + } + + // Grouped + + &.grouped { + border-radius: 0; + + & + &:not( .br--top ) { + margin-top: -33px; + } + + &.br--bottom { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + + &.br--top { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + } + + // Chevron & Icon + + &.has-chevron, + &.has-icon { + align-items: center; + display: grid; + grid-gap: 16px; + grid-template-columns: auto 24px; + + &:active, + &:focus, + &:hover { + svg { + fill: currentColor; + } + } + + svg { + fill: $primary-500; + transition: fill 125ms ease-in-out; + } + } + + &.has-icon { + grid-template-columns: 48px auto; + + &.has-chevron { + grid-template-columns: 48px auto 24px; + } + } + + // Is Small + + &.is-small { + padding: 16px; + + &.has-chevron, + &.has-icon { + grid-gap: 8px; + + svg { + height: 24px; + width: 24px; + } + } + + &.has-icon { + grid-template-columns: 24px auto; + + &.has-chevron { + grid-template-columns: 24px auto 24px; + } + } + + .title { + font-size: 14px; + } + + .desc { + font-size: 12px; + line-height: 16px; + } + } +} diff --git a/assets/components/src/card/style.scss b/assets/components/src/card/style.scss index 73311ae1fa..58c829299e 100644 --- a/assets/components/src/card/style.scss +++ b/assets/components/src/card/style.scss @@ -41,18 +41,6 @@ } } - // Is Clickable - - &--is-clickable { - cursor: pointer; - transition: box-shadow 150ms ease-in-out, transform 150ms ease-in-out; - - &:hover { - box-shadow: 0 8px 16px rgba( black, 0.08 ); - transform: translateY( -4px ); - } - } - // Is Small &__is-small { diff --git a/assets/components/src/index.js b/assets/components/src/index.js index 0aecf0cb41..ad5eddc9b8 100644 --- a/assets/components/src/index.js +++ b/assets/components/src/index.js @@ -1,7 +1,8 @@ export { default as ActionCard } from './action-card'; export { default as AutocompleteTokenField } from './autocomplete-tokenfield'; -export { default as Button } from './button'; export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions'; +export { default as Button } from './button'; +export { default as ButtonCard } from './button-card'; export { default as ButtonGroup } from './button-group'; export { default as Card } from './card'; export { default as PreviewBox } from './preview-box'; diff --git a/assets/wizards/componentsDemo/index.js b/assets/wizards/componentsDemo/index.js index 67e8047b90..a32592aff3 100644 --- a/assets/wizards/componentsDemo/index.js +++ b/assets/wizards/componentsDemo/index.js @@ -14,6 +14,7 @@ import apiFetch from '@wordpress/api-fetch'; import { decodeEntities } from '@wordpress/html-entities'; import { addQueryArgs } from '@wordpress/url'; import { __ } from '@wordpress/i18n'; +import { audio, plus, reusableBlock, typography } from '@wordpress/icons'; /** * Internal dependencies. @@ -25,6 +26,7 @@ import { CheckboxControl, Card, Button, + ButtonCard, Handoff, Notice, Footer, @@ -522,6 +524,51 @@ class ComponentsDemo extends Component { + +

{ __( 'ButtonCard' ) }

+ + + + + +