Rename checkout classes from 'wc-blocks-xyz' to 'wc-block-xyz' (https://github.com/woocommerce/woocommerce-blocks/pull/1449)
* Rename checkout classes from 'wc-blocks-checkout' to 'wc-block-checkout' * Rename form components classes from 'wc-blocks-checkout' to 'wc-block-checkout' * Rename 'wc-components' class names to 'wc-block'
This commit is contained in:
Albert Juhé Lluveras
GitHub
parent
892a56364c
commit
e082a14e3b
|
|
@ -13,7 +13,7 @@ import './style.scss';
|
|||
|
||||
const StepNumber = ( { stepNumber } ) => {
|
||||
return (
|
||||
<div className="wc-components-checkout-step__number">
|
||||
<div className="wc-block-checkout-step__number">
|
||||
<Label
|
||||
label={ stepNumber }
|
||||
screenReaderLabel={ sprintf(
|
||||
|
|
@ -30,9 +30,9 @@ const StepNumber = ( { stepNumber } ) => {
|
|||
};
|
||||
|
||||
const StepHeading = ( { title, stepHeadingContent } ) => (
|
||||
<div className="wc-components-checkout-step__heading">
|
||||
<h4 className="wc-components-checkout-step__title">{ title }</h4>
|
||||
<span className="wc-components-checkout-step__heading-content">
|
||||
<div className="wc-block-checkout-step__heading">
|
||||
<h4 className="wc-block-checkout-step__title">{ title }</h4>
|
||||
<span className="wc-block-checkout-step__heading-content">
|
||||
{ stepHeadingContent }
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -49,7 +49,7 @@ const FormStep = ( {
|
|||
} ) => {
|
||||
return (
|
||||
<div
|
||||
className={ classnames( className, 'wc-components-checkout-step' ) }
|
||||
className={ classnames( className, 'wc-block-checkout-step' ) }
|
||||
id={ id }
|
||||
>
|
||||
<StepNumber stepNumber={ stepNumber } />
|
||||
|
|
@ -57,12 +57,10 @@ const FormStep = ( {
|
|||
title={ title }
|
||||
stepHeadingContent={ stepHeadingContent() }
|
||||
/>
|
||||
<span className="wc-components-checkout-step__description">
|
||||
<span className="wc-block-checkout-step__description">
|
||||
{ description }
|
||||
</span>
|
||||
<div className="wc-components-checkout-step__content">
|
||||
{ children }
|
||||
</div>
|
||||
<div className="wc-block-checkout-step__content">{ children }</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
$circle-size: 24px;
|
||||
$line-offset-from-circle-size: 8px;
|
||||
|
||||
.wc-components-checkout-step {
|
||||
.wc-block-checkout-step {
|
||||
position: relative;
|
||||
padding-left: $gap-large;
|
||||
padding-bottom: $gap-larger;
|
||||
|
|
@ -11,7 +11,7 @@ $line-offset-from-circle-size: 8px;
|
|||
}
|
||||
}
|
||||
|
||||
.wc-components-checkout-step__heading {
|
||||
.wc-block-checkout-step__heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
|
|
@ -20,7 +20,7 @@ $line-offset-from-circle-size: 8px;
|
|||
}
|
||||
|
||||
// @todo: remove the parent class once we dial the specification down.
|
||||
.wc-components-checkout-step__heading .wc-components-checkout-step__title {
|
||||
.wc-block-checkout-step__heading .wc-block-checkout-step__title {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: $gray-80;
|
||||
|
|
@ -29,7 +29,7 @@ $line-offset-from-circle-size: 8px;
|
|||
}
|
||||
|
||||
// @todo: remove the parent class once we dial the specification down.
|
||||
.wc-components-checkout-step .wc-components-checkout-step__heading-content {
|
||||
.wc-block-checkout-step .wc-block-checkout-step__heading-content {
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
color: $gray-80;
|
||||
|
|
@ -39,7 +39,7 @@ $line-offset-from-circle-size: 8px;
|
|||
color: $gray-80;
|
||||
}
|
||||
}
|
||||
.wc-components-checkout-step__description {
|
||||
.wc-block-checkout-step__description {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: $gray-60;
|
||||
|
|
@ -48,7 +48,7 @@ $line-offset-from-circle-size: 8px;
|
|||
margin-bottom: $gap-large;
|
||||
}
|
||||
|
||||
.wc-components-checkout-step__number {
|
||||
.wc-block-checkout-step__number {
|
||||
position: absolute;
|
||||
width: $circle-size;
|
||||
height: $circle-size;
|
||||
|
|
@ -65,7 +65,7 @@ $line-offset-from-circle-size: 8px;
|
|||
|
||||
// because themes can register different background colors, we can't always
|
||||
// relay on using white border to offest the step left line,
|
||||
.wc-components-checkout-step::before {
|
||||
.wc-block-checkout-step::before {
|
||||
content: "";
|
||||
// 1 Circle size + offset of the first circle and next circle.
|
||||
height: calc(100% - #{$circle-size + $line-offset-from-circle-size * 2});
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@ import './style.scss';
|
|||
|
||||
const CheckoutForm = ( { className, children } ) => {
|
||||
return (
|
||||
<form
|
||||
className={ classnames( 'wc-components-checkout-form', className ) }
|
||||
>
|
||||
<form className={ classnames( 'wc-block-checkout-form', className ) }>
|
||||
{ children }
|
||||
</form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.wc-components-checkout-form {
|
||||
.wc-block-checkout-form {
|
||||
margin-left: $gap-large;
|
||||
margin-right: $gap-large;
|
||||
width: $content-width;
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
// Responsive media styles.
|
||||
@include breakpoint( "<480px" ) {
|
||||
.wc-components-checkout-form {
|
||||
.wc-block-checkout-form {
|
||||
margin-left: $gap-smaller;
|
||||
margin-right: $gap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ const NoShipping = () => {
|
|||
<Placeholder
|
||||
icon={ <ShippingIcon /> }
|
||||
label={ __( 'Shipping options', 'woo-gutenberg-products-block' ) }
|
||||
className="wc-blocks-checkout__no-shipping"
|
||||
className="wc-block-checkout__no-shipping"
|
||||
>
|
||||
<span className="wc-blocks-checkout__no-shipping-description">
|
||||
<span className="wc-block-checkout__no-shipping-description">
|
||||
{ __(
|
||||
'Your store does not have any Shipping Options configured. Once you have added your Shipping Options they will appear here.',
|
||||
'woo-gutenberg-products-block'
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.wc-blocks-checkout__no-shipping-description {
|
||||
.wc-block-checkout__no-shipping-description {
|
||||
display: block;
|
||||
margin: 0.25em 0 1em 0;
|
||||
font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import './style.scss';
|
|||
|
||||
const InputRow = ( { className, children } ) => {
|
||||
return (
|
||||
<div className={ classnames( 'wc-blocks-input-row', className ) }>
|
||||
<div className={ classnames( 'wc-block-input-row', className ) }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.wc-blocks-input-row {
|
||||
.wc-block-input-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
& > .wc-blocks-text-input {
|
||||
& > .wc-block-text-input {
|
||||
margin-right: $gap-small;
|
||||
flex-grow: 1;
|
||||
margin-top: $gap;
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
// Responsive media styles.
|
||||
@include breakpoint( "<480px" ) {
|
||||
.wc-blocks-text-input {
|
||||
.wc-block-text-input {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const RadioControl = ( {
|
|||
return (
|
||||
options.length && (
|
||||
<div
|
||||
className={ classnames( 'wc-blocks-radio-control', className ) }
|
||||
className={ classnames( 'wc-block-radio-control', className ) }
|
||||
>
|
||||
{ options.map(
|
||||
( {
|
||||
|
|
@ -32,12 +32,12 @@ const RadioControl = ( {
|
|||
} ) => (
|
||||
<label
|
||||
key={ `${ id }-${ value }` }
|
||||
className="wc-blocks-radio-control__option"
|
||||
className="wc-block-radio-control__option"
|
||||
htmlFor={ `${ id }-${ value }` }
|
||||
>
|
||||
<input
|
||||
id={ `${ id }-${ value }` }
|
||||
className="wc-blocks-radio-control__input"
|
||||
className="wc-block-radio-control__input"
|
||||
type="radio"
|
||||
name={ id }
|
||||
value={ value }
|
||||
|
|
@ -56,7 +56,7 @@ const RadioControl = ( {
|
|||
wrapperElement="span"
|
||||
wrapperProps={ {
|
||||
className:
|
||||
'wc-blocks-radio-control__label',
|
||||
'wc-block-radio-control__label',
|
||||
id: `${ id }-${ value }__label`,
|
||||
} }
|
||||
>
|
||||
|
|
@ -69,7 +69,7 @@ const RadioControl = ( {
|
|||
wrapperElement="span"
|
||||
wrapperProps={ {
|
||||
className:
|
||||
'wc-blocks-radio-control__secondary-label',
|
||||
'wc-block-radio-control__secondary-label',
|
||||
id: `${ id }-${ value }__secondary-label`,
|
||||
} }
|
||||
>
|
||||
|
|
@ -82,7 +82,7 @@ const RadioControl = ( {
|
|||
wrapperElement="span"
|
||||
wrapperProps={ {
|
||||
className:
|
||||
'wc-blocks-radio-control__description',
|
||||
'wc-block-radio-control__description',
|
||||
id: `${ id }-${ value }__description`,
|
||||
} }
|
||||
>
|
||||
|
|
@ -95,7 +95,7 @@ const RadioControl = ( {
|
|||
wrapperElement="span"
|
||||
wrapperProps={ {
|
||||
className:
|
||||
'wc-blocks-radio-control__secondary-description',
|
||||
'wc-block-radio-control__secondary-description',
|
||||
id: `${ id }-${ value }__secondary-description`,
|
||||
} }
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.wc-blocks-radio-control__option {
|
||||
.wc-block-radio-control__option {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
|
|
@ -7,30 +7,30 @@
|
|||
border-bottom: 1px solid $core-grey-light-600;
|
||||
}
|
||||
|
||||
.wc-blocks-radio-control__input {
|
||||
.wc-block-radio-control__input {
|
||||
position: absolute;
|
||||
left: $gap-large;
|
||||
top: $gap-large;
|
||||
}
|
||||
|
||||
.wc-blocks-radio-control__label,
|
||||
.wc-blocks-radio-control__secondary-label {
|
||||
.wc-block-radio-control__label,
|
||||
.wc-block-radio-control__secondary-label {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: $core-grey-dark-600;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.wc-blocks-radio-control__description,
|
||||
.wc-blocks-radio-control__secondary-description {
|
||||
.wc-block-radio-control__description,
|
||||
.wc-block-radio-control__secondary-description {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: $core-grey-dark-400;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.wc-blocks-radio-control__secondary-label,
|
||||
.wc-blocks-radio-control__secondary-description {
|
||||
.wc-block-radio-control__secondary-label,
|
||||
.wc-block-radio-control__secondary-description {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const TextInput = ( {
|
|||
const onChangeValue = ( event ) => onChange( event.target.value );
|
||||
return (
|
||||
<div
|
||||
className={ classnames( 'wc-blocks-text-input', className, {
|
||||
className={ classnames( 'wc-block-text-input', className, {
|
||||
'is-active': isActive || value,
|
||||
} ) }
|
||||
>
|
||||
|
|
@ -52,7 +52,7 @@ const TextInput = ( {
|
|||
aria-describedby={ !! help ? id + '__help' : undefined }
|
||||
/>
|
||||
{ !! help && (
|
||||
<p id={ id + '__help' } className="wc-blocks-text-input__help">
|
||||
<p id={ id + '__help' } className="wc-block-text-input__help">
|
||||
{ help }
|
||||
</p>
|
||||
) }
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.wc-blocks-text-input {
|
||||
.wc-block-text-input {
|
||||
position: relative;
|
||||
margin-top: $gap;
|
||||
}
|
||||
|
||||
.wc-blocks-text-input label {
|
||||
.wc-block-text-input label {
|
||||
position: absolute;
|
||||
transform: translateX(#{$gap}) translateY(#{$gap-small});
|
||||
font-size: 16px;
|
||||
|
|
@ -12,14 +12,14 @@
|
|||
color: $gray-50;
|
||||
}
|
||||
|
||||
.wc-blocks-text-input.is-active label {
|
||||
.wc-block-text-input.is-active label {
|
||||
transform: translateX(#{$gap - $gap-small}) translateY(#{$gap-smallest}) scale(0.75);
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
.wc-blocks-text-input input[type="tel"],
|
||||
.wc-blocks-text-input input[type="url"],
|
||||
.wc-blocks-text-input input[type="text"],
|
||||
.wc-blocks-text-input input[type="email"] {
|
||||
.wc-block-text-input input[type="tel"],
|
||||
.wc-block-text-input input[type="url"],
|
||||
.wc-block-text-input input[type="text"],
|
||||
.wc-block-text-input input[type="email"] {
|
||||
padding: $gap-small $gap;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $input-border-gray;
|
||||
|
|
@ -32,9 +32,9 @@
|
|||
height: 48px;
|
||||
color: $input-text-active;
|
||||
}
|
||||
.wc-blocks-text-input.is-active input[type="tel"],
|
||||
.wc-blocks-text-input.is-active input[type="url"],
|
||||
.wc-blocks-text-input.is-active input[type="text"],
|
||||
.wc-blocks-text-input.is-active input[type="email"] {
|
||||
.wc-block-text-input.is-active input[type="tel"],
|
||||
.wc-block-text-input.is-active input[type="url"],
|
||||
.wc-block-text-input.is-active input[type="text"],
|
||||
.wc-block-text-input.is-active input[type="email"] {
|
||||
padding: $gap-large $gap $gap-smallest;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
|
|||
<CheckoutForm>
|
||||
<FormStep
|
||||
id="billing-fields"
|
||||
className="wc-blocks-checkout__billing-fields"
|
||||
className="wc-block-checkout__billing-fields"
|
||||
title={ __(
|
||||
'Contact information',
|
||||
'woo-gutenberg-products-block'
|
||||
|
|
@ -65,7 +65,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
|
|||
}
|
||||
/>
|
||||
<CheckboxControl
|
||||
className="wc-blocks-checkout__keep-updated"
|
||||
className="wc-block-checkout__keep-updated"
|
||||
label={ __(
|
||||
'Keep me up to date on news and exclusive offers',
|
||||
'woo-gutenberg-products-block'
|
||||
|
|
@ -82,7 +82,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
|
|||
{ shippingMethods.length === 0 && (
|
||||
<FormStep
|
||||
id="shipping-fields"
|
||||
className="wc-blocks-checkout__shipping-fields"
|
||||
className="wc-block-checkout__shipping-fields"
|
||||
title={ __(
|
||||
'Shipping address',
|
||||
'woo-gutenberg-products-block'
|
||||
|
|
@ -100,7 +100,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
|
|||
<Fragment>
|
||||
<FormStep
|
||||
id="shipping-fields"
|
||||
className="wc-blocks-checkout__shipping-fields"
|
||||
className="wc-block-checkout__shipping-fields"
|
||||
title={ __(
|
||||
'Shipping address',
|
||||
'woo-gutenberg-products-block'
|
||||
|
|
@ -245,7 +245,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
|
|||
}
|
||||
/>
|
||||
<CheckboxControl
|
||||
className="wc-blocks-checkout__use-address-for-billing"
|
||||
className="wc-block-checkout__use-address-for-billing"
|
||||
label={ __(
|
||||
'Use same address for billing',
|
||||
'woo-gutenberg-products-block'
|
||||
|
|
@ -261,7 +261,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
|
|||
</FormStep>
|
||||
<FormStep
|
||||
id="shipping-option"
|
||||
className="wc-blocks-checkout__shipping-option"
|
||||
className="wc-block-checkout__shipping-option"
|
||||
title={ __(
|
||||
'Shipping options',
|
||||
'woo-gutenberg-products-block'
|
||||
|
|
@ -306,7 +306,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
|
|||
] }
|
||||
/>
|
||||
<CheckboxControl
|
||||
className="wc-blocks-checkout__add-note"
|
||||
className="wc-block-checkout__add-note"
|
||||
label="Add order notes?"
|
||||
checked={ shippingMethod.orderNote }
|
||||
onChange={ () =>
|
||||
|
|
@ -321,7 +321,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
|
|||
) }
|
||||
<FormStep
|
||||
id="payment-method"
|
||||
className="wc-blocks-checkout__payment-method"
|
||||
className="wc-block-checkout__payment-method"
|
||||
title={ __( 'Payment method', 'woo-gutenberg-products-block' ) }
|
||||
description={ __(
|
||||
'Select a payment method below.',
|
||||
|
|
@ -331,7 +331,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
|
|||
>
|
||||
<Placeholder>Payment methods, coming soon</Placeholder>
|
||||
<CheckboxControl
|
||||
className="wc-blocks-checkout__save-card-info"
|
||||
className="wc-block-checkout__save-card-info"
|
||||
label={ __(
|
||||
'Save payment information to my account for future purchases.',
|
||||
'woo-gutenberg-products-block'
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.editor-styles-wrapper .wp-block h4.wc-components-checkout-step__title {
|
||||
.editor-styles-wrapper .wp-block h4.wc-block-checkout-step__title {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin: 0 $gap-small 0 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.wc-blocks-checkout__add-note,
|
||||
.wc-blocks-checkout__keep-updated,
|
||||
.wc-blocks-checkout__use-address-for-billing {
|
||||
.wc-block-checkout__add-note,
|
||||
.wc-block-checkout__keep-updated,
|
||||
.wc-block-checkout__use-address-for-billing {
|
||||
margin-top: $gap;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue