woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Update the Settings UI design to match the Figma files

Browse source
This commit is contained in:
Daniel Dudzic 2024-12-08 09:33:49 +01:00
parent 7bf579c508
commit 390a3f69f8
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
41 changed files with 1887 additions and 1541 deletions
Download patch file Download diff file Expand all files Collapse all files

146
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js
View file

@ -1,146 +0,0 @@
import { Button, ToggleControl, TextControl } from '@wordpress/components';
import data from '../../utils/data';
import { useState } from '@wordpress/element';
import Select, { components } from 'react-select';
export const SETTINGS_BLOCK_TYPE_EMPTY = 'empty';
export const SETTINGS_BLOCK_TYPE_TOGGLE = 'toggle';
export const SETTINGS_BLOCK_TYPE_TOGGLE_CONTENT = 'toggle-content';
export const SETTINGS_BLOCK_TYPE_INPUT = 'input';
export const SETTINGS_BLOCK_TYPE_BUTTON = 'button';
export const SETTINGS_BLOCK_TYPE_SELECT = 'select';
export const SETTINGS_BLOCK_STYLING_TYPE_PRIMARY = 'primary';
export const SETTINGS_BLOCK_STYLING_TYPE_SECONDARY = 'secondary';
export const SETTINGS_BLOCK_STYLING_TYPE_TERTIARY = 'tertiary';
const SettingsBlock = ( {
className,
title,
description,
children,
style,
actionProps,
tag,
} ) => {
const [ toggleContentVisible, setToggleContentVisible ] = useState(
actionProps?.type !== SETTINGS_BLOCK_TYPE_TOGGLE_CONTENT
);
const toggleContent = () => {
if ( actionProps?.type !== SETTINGS_BLOCK_TYPE_TOGGLE_CONTENT ) {
return;
}
setToggleContentVisible( ! toggleContentVisible );
};
const blockClassName = [ 'ppcp-r-settings-block' ];
blockClassName.push( 'ppcp-r-settings-block--' + style );
blockClassName.push( 'ppcp-r-settings-block--' + actionProps?.type );
if ( className ) {
blockClassName.push( className );
}
if (
toggleContentVisible &&
actionProps?.type === SETTINGS_BLOCK_TYPE_TOGGLE_CONTENT
) {
blockClassName.push( 'ppcp-r-settings-block--content-visible' );
}
return (
<div className={ blockClassName.join( ' ' ) }>
<div
className="ppcp-r-settings-block__header"
onClick={ () => toggleContent() }
>
<div className="ppcp-r-settings-block__header-inner">
<span className="ppcp-r-settings-block__title">
{ title }
{ tag && tag }
</span>
<p
className="ppcp-r-settings-block__description"
dangerouslySetInnerHTML={ { __html: description } }
/>
</div>
{ actionProps?.type !== SETTINGS_BLOCK_TYPE_EMPTY && (
<div className="ppcp-r-settings-block__action">
{ actionProps?.type === SETTINGS_BLOCK_TYPE_TOGGLE && (
<ToggleControl
className="ppcp-r-settings-block__toggle"
__nextHasNoMarginBottom={ true }
checked={ actionProps?.value }
onChange={ ( newValue ) =>
actionProps?.callback(
actionProps?.key,
newValue
)
}
/>
) }
{ actionProps?.type === SETTINGS_BLOCK_TYPE_INPUT && (
<>
<TextControl
className="ppcp-r-vertical-text-control"
placeholder={ actionProps?.placeholder }
value={ actionProps?.value }
onChange={ ( newValue ) =>
actionProps?.callback(
actionProps?.key,
newValue
)
}
/>
</>
) }
{ actionProps?.type === SETTINGS_BLOCK_TYPE_BUTTON && (
<Button
variant={ actionProps.buttonType }
onClick={
actionProps?.callback
? () => actionProps.callback()
: undefined
}
>
{ actionProps.value }
</Button>
) }
{ actionProps?.type ===
SETTINGS_BLOCK_TYPE_TOGGLE_CONTENT && (
<div className="ppcp-r-settings-block__toggle-content">
{ data().getImage( 'icon-arrow-down.svg' ) }
</div>
) }
{ actionProps?.type === SETTINGS_BLOCK_TYPE_SELECT && (
<Select
className="ppcp-r-multiselect"
classNamePrefix="ppcp-r"
isMulti={ actionProps?.isMulti }
options={ actionProps?.options }
components={ { DropdownIndicator } }
/>
) }
</div>
) }
</div>
{ children && toggleContentVisible && (
<div className="ppcp-r-settings-block__content">
{ children }
</div>
) }
</div>
);
};
const DropdownIndicator = ( props ) => {
return (
<components.DropdownIndicator { ...props }>
{ data().getImage( 'icon-arrow-down.svg' ) }
</components.DropdownIndicator>
);
};
export default SettingsBlock;