Skip to content

Commit

Permalink
feat: reorganise donations wizard and use buttongroup for donation ty…
Browse files Browse the repository at this point in the history 
…pe (#1824)
  • Loading branch information
@thomasguillot @dkoo
thomasguillot authored and dkoo committed Aug 10, 2022
1 parent 340cf85 commit 1e4d98f
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 106 deletions.
7 changes: 7 additions & 0 deletions assets/components/src/card/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,20 @@
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: space-between;
margin-bottom: -16px;

> * {
margin-bottom: 0 !important;
margin-top: 0 !important;
}

.newspack-select-control {
.components-base-control__field {
margin-bottom: 0;
}
}
}

// Is Narrow
Expand Down
3 changes: 3 additions & 0 deletions assets/components/src/select-control/ButtonGroupControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { hooks } from '..';

const ButtonGroupControl = ( {
buttonOptions,
buttonSmall,
className,
hideLabelFromVision,
label,
Expand All @@ -42,7 +43,9 @@ const ButtonGroupControl = ( {
<Button
key={ option.value }
variant={ isSelected ? 'primary' : null }
isPressed={ isSelected }
onClick={ () => onChange( option.value ) }
isSmall={ buttonSmall }
>
<Label />
</Button>
Expand Down
8 changes: 6 additions & 2 deletions assets/components/src/select-control/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class SelectControl extends Component {
* Render.
*/
render() {
const { className, optgroups, buttonOptions, ...otherProps } = this.props;
const { className, optgroups, buttonOptions, buttonSmall, ...otherProps } = this.props;
const classes = classNames(
'newspack-select-control',
optgroups && 'newspack-grouped-select-control',
Expand All @@ -38,7 +38,11 @@ class SelectControl extends Component {
{ optgroups ? (
<GroupedSelectControl optgroups={ optgroups } { ...otherProps } />
) : buttonOptions ? (
<ButtonGroupControl buttonOptions={ buttonOptions } { ...otherProps } />
<ButtonGroupControl
buttonOptions={ buttonOptions }
buttonSmall={ buttonSmall }
{ ...otherProps }
/>
) : (
<BaseComponent { ...otherProps } />
) }
Expand Down
77 changes: 36 additions & 41 deletions assets/wizards/readerRevenue/components/money-input/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,54 +4,49 @@

@use '~@wordpress/base-styles/colors' as wp-colors;

.newspack-donations-wizard__money-input-container {
margin-bottom: 10px;
p {
margin: 0 0 8px;
}
@media screen and ( min-width: 480px ) {
margin-bottom: 0;
& + & {
margin-left: 16px;
.newspack-donations-wizard {
&__money-input {
align-items: stretch;
display: flex;
margin: 8px 0 0;

.currency {
border: 1px solid wp-colors.$gray-700;
border-right: 0;
align-items: center;
background: wp-colors.$gray-100;
border-radius: 2px 0 0 2px;
display: flex;
flex: 0 0 14px;
height: auto;
justify-content: center;
line-height: 1;
margin: 0;
padding: 0 8px;
text-align: center;
}
}
}

.newspack-donations-wizard__money-input {
align-items: stretch;
display: flex;
margin: 8px 0 0;

.currency {
border: 1px solid wp-colors.$gray-700;
border-right: 0;
align-items: center;
background: wp-colors.$gray-100;
border-radius: 2px 0 0 2px;
display: flex;
flex: 0 0 14px;
height: auto;
justify-content: center;
line-height: 1;
margin: 0;
padding: 0 8px;
text-align: center;
}
.newspack-text-control {
margin: 0 !important;
width: 100%;

.newspack-text-control {
margin: 0 !important;
width: 100%;
@media screen and ( min-width: 1128px ) {
max-width: 100%;
}

@media screen and ( min-width: 1128px ) {
max-width: 100%;
}
input[type='number'] {
border-radius: 0 2px 2px 0;
}

input[type='number'] {
border-radius: 0 2px 2px 0;
.components-base-control__field {
margin-bottom: 0;
}
}

.components-base-control__field {
margin-bottom: 0;
&-container {
p {
margin: 0 0 8px;
}
}
}
}
144 changes: 81 additions & 63 deletions assets/wizards/readerRevenue/views/donation/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ import { MoneyInput } from '../../components';
import {
Button,
Card,
Grid,
Notice,
SectionHeader,
SelectControl,
Wizard,
ActionCard,
} from '../../../../components/src';
import { READER_REVENUE_WIZARD_SLUG } from '../../constants';

Expand Down Expand Up @@ -82,71 +83,88 @@ export const DonationAmounts = () => {

return (
<>
<SectionHeader
title={ __( 'Suggested Donations', 'newspack' ) }
description={ __(
'Set suggested donation amounts. These will be the default settings for the Donate block.',
'newspack'
) }
/>
<ToggleControl
label={ __( 'Tiered', 'newspack' ) }
checked={ tiered }
onChange={ changeHandler( [ 'tiered' ] ) }
/>
<Card headerActions noBorder>
<SectionHeader
title={ __( 'Suggested Donations', 'newspack' ) }
description={ __(
'Set suggested donation amounts. These will be the default settings for the Donate block.',
'newspack'
) }
noMargin
/>
<SelectControl
label={ __( 'Donation Type', 'newspack' ) }
onChange={ () => changeHandler( [ 'tiered' ] )( ! tiered ) }
buttonOptions={ [
{ value: true, label: __( 'Tiered', 'newspack' ) },
{ value: false, label: __( 'Untiered', 'newspack' ) },
] }
buttonSmall
value={ tiered }
hideLabelFromVision
/>
</Card>
{ tiered ? (
availableFrequencies.map( section => {
const isFrequencyDisabled = disabledFrequencies[ section.key ];
const isOneFrequencyActive =
Object.values( disabledFrequencies ).filter( Boolean ).length ===
FREQUENCY_SLUGS.length - 1;
return (
<ActionCard
key={ section.key }
toggleChecked={ ! isFrequencyDisabled }
toggleOnChange={ () =>
changeHandler( [ 'disabledFrequencies', section.key ] )( ! isFrequencyDisabled )
}
title={ section.tieredLabel }
disabled={ ! isFrequencyDisabled && isOneFrequencyActive }
>
{ ! isFrequencyDisabled && (
<div className="flex-ns">
<MoneyInput
currencySymbol={ currencySymbol }
label={ __( 'Low-tier' ) }
value={ amounts[ section.key ][ 0 ] }
onChange={ changeHandler( [ 'amounts', section.key, 0 ] ) }
/>
<MoneyInput
currencySymbol={ currencySymbol }
label={ __( 'Mid-tier' ) }
value={ amounts[ section.key ][ 1 ] }
onChange={ changeHandler( [ 'amounts', section.key, 1 ] ) }
<Grid columns={ 1 } gutter={ 16 }>
{ availableFrequencies.map( section => {
const isFrequencyDisabled = disabledFrequencies[ section.key ];
const isOneFrequencyActive =
Object.values( disabledFrequencies ).filter( Boolean ).length ===
FREQUENCY_SLUGS.length - 1;
return (
<Card isMedium key={ section.key }>
<Grid columns={ 1 } gutter={ 16 }>
<ToggleControl
checked={ ! isFrequencyDisabled }
onChange={ () =>
changeHandler( [ 'disabledFrequencies', section.key ] )(
! isFrequencyDisabled
)
}
label={ section.tieredLabel }
disabled={ ! isFrequencyDisabled && isOneFrequencyActive }
/>
<MoneyInput
currencySymbol={ currencySymbol }
label={ __( 'High-tier' ) }
value={ amounts[ section.key ][ 2 ] }
onChange={ changeHandler( [ 'amounts', section.key, 2 ] ) }
/>
</div>
) }
</ActionCard>
);
} )
{ ! isFrequencyDisabled && (
<Grid columns={ 3 } rowGap={ 16 }>
<MoneyInput
currencySymbol={ currencySymbol }
label={ __( 'Low-tier' ) }
value={ amounts[ section.key ][ 0 ] }
onChange={ changeHandler( [ 'amounts', section.key, 0 ] ) }
/>
<MoneyInput
currencySymbol={ currencySymbol }
label={ __( 'Mid-tier' ) }
value={ amounts[ section.key ][ 1 ] }
onChange={ changeHandler( [ 'amounts', section.key, 1 ] ) }
/>
<MoneyInput
currencySymbol={ currencySymbol }
label={ __( 'High-tier' ) }
value={ amounts[ section.key ][ 2 ] }
onChange={ changeHandler( [ 'amounts', section.key, 2 ] ) }
/>
</Grid>
) }
</Grid>
</Card>
);
} ) }
</Grid>
) : (
<div className="flex-ns">
{ availableFrequencies.map( section => (
<MoneyInput
currencySymbol={ currencySymbol }
label={ section.staticLabel }
value={ amounts[ section.key ][ 3 ] }
onChange={ changeHandler( [ 'amounts', section.key, 3 ] ) }
key={ section.key }
/>
) ) }
</div>
<Card isMedium>
<Grid columns={ 3 } rowGap={ 16 }>
{ availableFrequencies.map( section => (
<MoneyInput
currencySymbol={ currencySymbol }
label={ section.staticLabel }
value={ amounts[ section.key ][ 3 ] }
onChange={ changeHandler( [ 'amounts', section.key, 3 ] ) }
key={ section.key }
/>
) ) }
</Grid>
</Card>
) }
</>
);
Expand Down

0 comments on commit 1e4d98f

Please sign in to comment.