Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add new ButtonCard component #961

Merged
merged 7 commits into from
May 18, 2021
Merged

Add new ButtonCard component #961

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d91275c
feat: add new button-card component
thomasguillot May 14, 2021
8affd56
feat(components-demo): add button-card examples
thomasguillot May 14, 2021
2e88435
style(card): remove unused class
thomasguillot May 14, 2021
e30d9fc
feat(dashboard): rework wizard using button-card
thomasguillot May 14, 2021
97d9c09
feat: improve button-card is-small style and add support for chevron
thomasguillot May 17, 2021
0f51dee
Merge branch 'master' into add/button-card-component
thomasguillot May 18, 2021
c39ee0e
fix: typo
thomasguillot May 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions assets/components/src/button-card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<a className={ classes } { ...otherProps }>
{ icon && <Icon icon={ icon } height={ 48 } width={ 48 } /> }
<div>
{ title && <div className="title">{ title }</div> }
{ desc && <div className="desc">{ desc }</div> }
</div>
{ chevron && <Icon icon={ chevronRight } height={ 24 } width={ 24 } /> }
</a>
);
}
}

export default ButtonCard;
140 changes: 140 additions & 0 deletions assets/components/src/button-card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
dkoo marked this conversation as resolved.
Show resolved Hide resolved
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;
}
}
}
12 changes: 0 additions & 12 deletions assets/components/src/card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
3 changes: 2 additions & 1 deletion assets/components/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
47 changes: 47 additions & 0 deletions assets/wizards/componentsDemo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -25,6 +26,7 @@ import {
CheckboxControl,
Card,
Button,
ButtonCard,
Handoff,
Notice,
Footer,
Expand Down Expand Up @@ -522,6 +524,51 @@ class ComponentsDemo extends Component {
</Button>
</Card>
</Card>
<Card>
<h2>{ __( 'ButtonCard' ) }</h2>
<ButtonCard
href="admin.php?page=newspack-site-design-wizard"
title={ __( 'Site Design', 'newspack' ) }
desc={ __( 'Branding, color, typography, layouts', 'newspack' ) }
icon={ typography }
chevron
/>
<ButtonCard
href="#"
title={ __( 'Start a new site', 'newspack' ) }
desc={ __( "You don't have content to import", 'newspack' ) }
icon={ plus }
className="br--top"
grouped
/>
<ButtonCard
href="#"
title={ __( 'Migrate an existing site', 'newspack' ) }
desc={ __( 'You have content to import', 'newspack' ) }
icon={ reusableBlock }
className="br--bottom"
grouped
/>
<ButtonCard
href="#"
title={ __( 'Add a new Podcast', 'newspack' ) }
desc="isSmall"
icon={ audio }
className="br--top"
isSmall
grouped
/>
<ButtonCard
href="#"
title={ __( 'Add a new Font', 'newspack' ) }
desc="isSmall + chevron"
icon={ typography }
className="br--bottom"
chevron
isSmall
grouped
/>
</Card>
</div>
<Footer />
</Fragment>
Expand Down
35 changes: 14 additions & 21 deletions assets/wizards/dashboard/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { Icon, plugins } from '@wordpress/icons';
*/
import {
GlobalNotices,
Button,
ButtonCard,
Card,
Waiting,
Footer,
Expand All @@ -30,11 +30,6 @@ import {
import DashboardCard from './views/dashboardCard';
import './style.scss';

/**
* External dependencies.
*/
import classnames from 'classnames';

const Dashboard = ( { items } ) => {
const params = qs.parse( window.location.search );
const authCode = params.code;
Expand Down Expand Up @@ -106,30 +101,28 @@ const Dashboard = ( { items } ) => {
</div>
) }
{ displayAuth ? (
<Card className={ classnames( 'newspack-dashboard-card', 'google-oauth2' ) }>
<>
{ userBasicInfo ? (
<div className="newspack-dashboard-card__contents">
<Icon icon={ plugins } />
<div className="newspack-dashboard-card__header">
<Card className="newspack-dashboard-card">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why a regular Card here—is it just so we can use the strong in the message? Wonder if we could adapt the ButtonCard to render children if it exists instead of (or in addition to) the desc prop?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not a link so it doesn't make sense to use a ButtonCard. It's also temporary and the Google oauth connection will be moved elsewhere.

<Icon icon={ plugins } height={ 48 } width={ 48 } />
<div>
<h2>{ __( 'Google OAuth2' ) }</h2>
<p>
{ __( 'Authorized Google as', 'newspack' ) }{' '}
<strong>{ userBasicInfo.email }</strong>
</p>
</div>
</div>
</Card>
) : (
<Button onClick={ goToAuthPage }>
<div className="newspack-dashboard-card__contents">
<Icon icon={ plugins } />
<div className="newspack-dashboard-card__header">
<h2>{ __( 'Google OAuth2' ) }</h2>
<p>{ __( 'Authorize Newspack with Google', 'newspack' ) }</p>
</div>
</div>
</Button>
<ButtonCard
onClick={ goToAuthPage }
title={ __( 'Google OAuth2', 'newspack' ) }
desc={ __( 'Authorize Newspack with Google', 'newspack' ) }
icon={ plugins }
tabIndex="0"
/>
) }
</Card>
</>
) : null }
</Grid>
</div>
Expand Down
Loading