Replace usage of `cart-checkout/button` with `@woocommerce/base-components/button` (https://github.com/woocommerce/woocommerce-blocks/pull/2781)
* Change to base component * Remove todo
This commit is contained in:
Mike Jolley
GitHub
parent
73adef6c85
commit
d25d233f27
|
|
@ -12,8 +12,6 @@ import './style.scss';
|
|||
|
||||
/**
|
||||
* Component that visually renders a button but semantically might be `<button>` or `<a>` depending on the props.
|
||||
*
|
||||
* @todo Update cart and checkout button component. Cart and checkout should use base/components/button instead of cart-checkout/button.
|
||||
*/
|
||||
const Button = ( { className, showSpinner = false, children, ...props } ) => {
|
||||
const buttonClassName = classNames(
|
||||
|
|
|
|||
|
|
@ -4,12 +4,8 @@
|
|||
import Button from '../';
|
||||
|
||||
export default {
|
||||
title: 'WooCommerce Blocks/@base-components/cart-checkout/Button',
|
||||
title: 'WooCommerce Blocks/@base-components/Button',
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Default = () => (
|
||||
<div className="wc-block-cart">
|
||||
<Button>Buy now</Button>
|
||||
</div>
|
||||
);
|
||||
export const Default = () => <Button>Buy now</Button>;
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Button as WPButton } from 'wordpress-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Component that visually renders a button but semantically might be `<button>` or `<a>` depending on the props.
|
||||
*/
|
||||
const Button = ( { className, showSpinner = false, children, ...props } ) => {
|
||||
const buttonClassName = classNames(
|
||||
'wc-block-components-button',
|
||||
className,
|
||||
{
|
||||
'wc-block-components-button--loading': showSpinner,
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<WPButton className={ buttonClassName } { ...props }>
|
||||
{ showSpinner && (
|
||||
<span
|
||||
className="wc-block-components-button__spinner"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) }
|
||||
<span className="wc-block-components-button__text">
|
||||
{ children }
|
||||
</span>
|
||||
</WPButton>
|
||||
);
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
className: PropTypes.string,
|
||||
showSpinner: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default Button;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Button from '../';
|
||||
|
||||
export default {
|
||||
title: 'WooCommerce Blocks/@base-components/cart-checkout/Button',
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Default = () => (
|
||||
<div className="wc-block-cart">
|
||||
<Button>Buy now</Button>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
.wc-block-components-button:not(.is-link) {
|
||||
@include reset-typography();
|
||||
align-items: center;
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
min-height: 3em;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
padding: 0 $gap-small;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
position: relative;
|
||||
|
||||
&:disabled,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.wc-block-components-button__text {
|
||||
display: block;
|
||||
}
|
||||
.wc-block-components-button__spinner {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: -0.5em;
|
||||
color: inherit;
|
||||
box-sizing: content-box;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
box-sizing: border-box;
|
||||
transform-origin: 50% 50%;
|
||||
transform: translateZ(0) scale(0.5);
|
||||
backface-visibility: hidden;
|
||||
border-radius: 50%;
|
||||
border: 0.2em solid currentColor;
|
||||
border-left-color: transparent;
|
||||
animation: wc-block-components-button__spinner__animation 1s infinite linear;
|
||||
}
|
||||
}
|
||||
.wc-block-components-button__spinner + .wc-block-components-button__text {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wc-block-components-button__spinner__animation {
|
||||
0% {
|
||||
animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
export { default as AddressForm } from './address-form';
|
||||
export { default as Button } from './button';
|
||||
export { default as CheckoutForm } from './form';
|
||||
export { default as FormStep } from './form-step';
|
||||
export { default as OrderSummary } from './order-summary';
|
||||
|
|
|
|||
|
|
@ -4,11 +4,7 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { useCheckoutSubmit } from '@woocommerce/base-hooks';
|
||||
import { Icon, done } from '@woocommerce/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Button from '../button';
|
||||
import Button from '@woocommerce/base-components/button';
|
||||
|
||||
const PlaceOrderButton = () => {
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,8 @@
|
|||
*/
|
||||
import PropTypes from 'prop-types';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
AddressForm,
|
||||
Button,
|
||||
} from '@woocommerce/base-components/cart-checkout';
|
||||
import { AddressForm } from '@woocommerce/base-components/cart-checkout';
|
||||
import Button from '@woocommerce/base-components/button';
|
||||
import { useState } from '@wordpress/element';
|
||||
import isShallowEqual from '@wordpress/is-shallow-equal';
|
||||
import { useValidationContext } from '@woocommerce/base-context';
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useState, useEffect, useRef } from '@wordpress/element';
|
||||
import { Button } from '@woocommerce/base-components/cart-checkout';
|
||||
import Button from '@woocommerce/base-components/button';
|
||||
import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
|
||||
import Label from '@woocommerce/base-components/label';
|
||||
import { ValidationInputError } from '@woocommerce/base-components/validation';
|
||||
|
|
|
|||
|
|
@ -3,10 +3,8 @@
|
|||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useState } from '@wordpress/element';
|
||||
import {
|
||||
Button,
|
||||
PaymentMethodIcons,
|
||||
} from '@woocommerce/base-components/cart-checkout';
|
||||
import { PaymentMethodIcons } from '@woocommerce/base-components/cart-checkout';
|
||||
import Button from '@woocommerce/base-components/button';
|
||||
import { CHECKOUT_URL } from '@woocommerce/block-settings';
|
||||
import { useCheckoutContext } from '@woocommerce/base-context';
|
||||
import { usePaymentMethods } from '@woocommerce/base-hooks';
|
||||
|
|
|
|||
Loading…
Reference in New Issue