57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import type { ReactElement } from 'react';
|
|
import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
|
|
|
|
const OptionLayout = ( {
|
|
label,
|
|
secondaryLabel,
|
|
description,
|
|
secondaryDescription,
|
|
id,
|
|
}: Partial< PackageRateOption > ): ReactElement => {
|
|
return (
|
|
<div className="wc-block-components-radio-control__option-layout">
|
|
<div className="wc-block-components-radio-control__label-group">
|
|
{ label && (
|
|
<span
|
|
id={ id && `${ id }__label` }
|
|
className="wc-block-components-radio-control__label"
|
|
>
|
|
{ label }
|
|
</span>
|
|
) }
|
|
{ secondaryLabel && (
|
|
<span
|
|
id={ id && `${ id }__secondary-label` }
|
|
className="wc-block-components-radio-control__secondary-label"
|
|
>
|
|
{ secondaryLabel }
|
|
</span>
|
|
) }
|
|
</div>
|
|
<div className="wc-block-components-radio-control__description-group">
|
|
{ description && (
|
|
<span
|
|
id={ id && `${ id }__description` }
|
|
className="wc-block-components-radio-control__description"
|
|
>
|
|
{ description }
|
|
</span>
|
|
) }
|
|
{ secondaryDescription && (
|
|
<span
|
|
id={ id && `${ id }__secondary-description` }
|
|
className="wc-block-components-radio-control__secondary-description"
|
|
>
|
|
{ secondaryDescription }
|
|
</span>
|
|
) }
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OptionLayout;
|