-
Notifications
You must be signed in to change notification settings - Fork 799
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
My plan: Add checklist progress banner UI (#12277)
Adds components and styles necessary for the checklist. Checklist will not be visible because no data is included.
- Loading branch information
Showing
16 changed files
with
450 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import PropTypes from 'prop-types'; | ||
import { Component } from 'react'; | ||
import { connect } from 'react-redux'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { isLoading } from 'state/checklist/selectors'; | ||
import { requestSiteChecklist } from 'state/checklist/actions'; | ||
|
||
class QuerySiteChecklist extends Component { | ||
static propTypes = { | ||
requestSiteChecklist: PropTypes.func, | ||
isLoading: PropTypes.bool, | ||
}; | ||
|
||
componentDidMount() { | ||
if ( ! this.props.isLoading ) { | ||
this.props.requestSiteChecklist(); | ||
} | ||
} | ||
|
||
render() { | ||
return null; | ||
} | ||
} | ||
|
||
export default connect( | ||
state => ( { | ||
isLoading: isLoading( state ), | ||
} ), | ||
{ requestSiteChecklist } | ||
)( QuerySiteChecklist ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React from 'react'; | ||
|
||
/** | ||
* Relies on WordPress core styling via "screen-reader-text" class: | ||
* https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/ | ||
*/ | ||
|
||
export default function ScreenReaderText( { children } ) { | ||
return <span className="screen-reader-text">{ children }</span>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { translate as __ } from 'i18n-calypso'; | ||
import React from 'react'; | ||
import { connect } from 'react-redux'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import Button from 'components/button'; | ||
import Card from 'components/card'; | ||
import ProgressBar from './progress-bar'; | ||
import QueryChecklistProgress from 'components/data/query-checklist-progress'; | ||
import { getSiteRawUrl } from 'state/initial-state'; | ||
import { getChecklistCompletion } from 'state/checklist/selectors'; | ||
|
||
function ChecklistProgressCard( { completed, total, siteSlug } ) { | ||
return ( | ||
<> | ||
<QueryChecklistProgress /> | ||
{ completed && total && ( | ||
<Card compact className="checklist__header"> | ||
<div className="checklist__header-main"> | ||
<div className="checklist__header-progress"> | ||
<span className="checklist__header-progress-text"> | ||
{ __( 'Your Jetpack setup progress', { | ||
comment: 'Onboarding task list progress', | ||
} ) } | ||
</span> | ||
<span className="checklist__header-progress-number">{ `${ completed }/${ total }` }</span> | ||
</div> | ||
<ProgressBar total={ total } value={ completed } /> | ||
</div> | ||
<div className="checklist__header-secondary"> | ||
<Button compact primary href={ `https://wordpress.com/plans/my-plan/${ siteSlug }` }> | ||
{ __( 'Complete Jetpack Setup', { | ||
comment: 'Text on link to list of onboarding tasks', | ||
} ) } | ||
</Button> | ||
</div> | ||
</Card> | ||
) } | ||
</> | ||
); | ||
} | ||
|
||
export default connect( state => { | ||
return { | ||
siteSlug: getSiteRawUrl( state ), | ||
...getChecklistCompletion( state ), // add completed and total | ||
}; | ||
} )( ChecklistProgressCard ); |
43 changes: 43 additions & 0 deletions
43
_inc/client/my-plan/checklist-progress-card/progress-bar/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import PropTypes from 'prop-types'; | ||
import React, { PureComponent } from 'react'; | ||
import classnames from 'classnames'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import ScreenReaderText from 'components/screen-reader-text'; | ||
|
||
export default class ProgressBar extends PureComponent { | ||
static defaultProps = { | ||
total: 100, | ||
}; | ||
|
||
static propTypes = { | ||
value: PropTypes.number.isRequired, | ||
total: PropTypes.number, | ||
title: PropTypes.string, | ||
className: PropTypes.string, | ||
}; | ||
|
||
render() { | ||
const classes = classnames( this.props.className, 'checklist-header-progress-bar' ); | ||
const percentage = Math.min( Math.ceil( ( this.props.value / this.props.total ) * 100 ), 100 ); | ||
const title = this.props.title ? ( | ||
<ScreenReaderText>{ this.props.title }</ScreenReaderText> | ||
) : null; | ||
|
||
return ( | ||
<div className={ classes }> | ||
<div | ||
className="checklist-header-progress-bar__progress" | ||
style={ { width: percentage + '%' } } | ||
> | ||
{ title } | ||
</div> | ||
</div> | ||
); | ||
} | ||
} |
52 changes: 52 additions & 0 deletions
52
_inc/client/my-plan/checklist-progress-card/progress-bar/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
.progress-bar { | ||
width: 100%; | ||
display: inline-block; | ||
position: relative; | ||
height: 9px; | ||
background-color: $muriel-gray-100; | ||
border-radius: 4.5px; | ||
|
||
&.is-compact { | ||
height: 4px; | ||
} | ||
} | ||
|
||
.progress-bar__progress { | ||
display: inline-block; | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
height: 100%; | ||
background-color: $muriel-blue-500; | ||
border-radius: 4.5px; | ||
transition: width 200ms; | ||
} | ||
|
||
.progress-bar.is-pulsing .progress-bar__progress { | ||
animation: jetpack_progress-bar-animation 3300ms infinite linear; | ||
|
||
background-size: 50px 100%; | ||
background-image: linear-gradient( | ||
-45deg, | ||
$muriel-blue-500 28%, | ||
$muriel-blue-300 28%, | ||
$muriel-blue-300 72%, | ||
$muriel-blue-500 72% | ||
); | ||
} | ||
|
||
@keyframes jetpack_progress-bar-animation { | ||
0% { | ||
background-position: 100px 0; | ||
} | ||
} | ||
|
||
/* Percentage bar */ | ||
.percentage-bar { | ||
border-radius: 0; | ||
height: 8px; | ||
width: 150px; | ||
.progress-bar__progress { | ||
border-radius: 0; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,122 @@ | ||
.checklist__header { | ||
display: flex; | ||
flex-direction: row; | ||
|
||
&-main { | ||
display: flex; | ||
flex: 1 1; | ||
flex-direction: column; | ||
align-items: stretch; | ||
} | ||
|
||
&-secondary { | ||
display: flex; | ||
flex: 2 1; | ||
flex-direction: row; | ||
align-items: center; | ||
justify-content: flex-end; | ||
} | ||
|
||
&-progress { | ||
display: flex; | ||
flex-direction: row; | ||
font-size: 14px; | ||
white-space: nowrap; | ||
margin-bottom: 5px; | ||
} | ||
|
||
&-progress-text { | ||
display: flex; | ||
flex: 1 1; | ||
margin: 0; | ||
color: $muriel-gray-500; | ||
} | ||
|
||
&-progress-number { | ||
display: flex; | ||
color: $muriel-gray-500; | ||
padding-left: 1em; | ||
} | ||
|
||
&-summary { | ||
font-size: 12px; | ||
line-height: 24px; | ||
color: $muriel-gray-500; | ||
cursor: pointer; | ||
} | ||
|
||
&-action { | ||
position: absolute; | ||
top: 0; | ||
right: 0; | ||
width: 48px; | ||
height: 100%; | ||
border-left: 1px solid $muriel-gray-0; | ||
cursor: pointer; | ||
|
||
.gridicon { | ||
fill: $muriel-gray-300; | ||
vertical-align: middle; | ||
align-items: center; | ||
transition: transform 0.15s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ), color 0.2s ease-in; | ||
} | ||
|
||
.checklist.is-expanded & { | ||
.gridicon { | ||
transform: rotate( 180deg ); | ||
} | ||
} | ||
|
||
.accessible-focus &:focus { | ||
box-shadow: inset 0 0 0 2px $muriel-blue-300; | ||
} | ||
} | ||
|
||
.checklist.is-expanded &-action { | ||
.gridicon { | ||
transform: rotate( 180deg ); | ||
} | ||
} | ||
|
||
.dops-button.is-primary { | ||
margin-right: 0; | ||
background: $green-primary; | ||
border-color: $green-secondary; | ||
|
||
&:focus { | ||
box-shadow: 0 0 0 2px lighten( $green-secondary, 20% ); | ||
} | ||
} | ||
} | ||
|
||
@media ( max-width: 600px ) { | ||
.checklist__header { | ||
display: block; | ||
|
||
&-secondary { | ||
display: block; | ||
text-align: left; | ||
padding-top: 15px; | ||
} | ||
} | ||
} | ||
|
||
.checklist-header-progress-bar { | ||
width: 100%; | ||
display: inline-block; | ||
position: relative; | ||
background-color: $muriel-gray-100; | ||
border-radius: 4.5px; | ||
height: 4px; | ||
} | ||
|
||
.checklist-header-progress-bar__progress { | ||
display: inline-block; | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
height: 100%; | ||
background-color: $muriel-hot-green-400; | ||
border-radius: 4.5px; | ||
transition: width 200ms; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.