Fix product task text shown before accordion is expanded on stack layout
This commit is contained in:
parent
a287963fa4
commit
5453737747
|
@ -22,7 +22,7 @@
|
|||
color: #007cba;
|
||||
padding: 0;
|
||||
height: fit-content;
|
||||
margin-top: 25px;
|
||||
margin-top: 21px;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
|
|
|
@ -116,6 +116,7 @@ export const Products = () => {
|
|||
<Stack
|
||||
items={ visibleProductTypes }
|
||||
onClickLoadSampleProduct={ loadSampleProduct }
|
||||
showOtherOptions={ isExpanded }
|
||||
/>
|
||||
) : (
|
||||
<CardLayout items={ visibleProductTypes } />
|
||||
|
|
|
@ -67,6 +67,7 @@
|
|||
.woocommerce-stack__other-options {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 4px;
|
||||
color: $gray-700;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
|
|
@ -18,52 +18,55 @@ type StackProps = {
|
|||
onClick: () => void;
|
||||
} )[];
|
||||
onClickLoadSampleProduct: () => void;
|
||||
showOtherOptions?: boolean;
|
||||
};
|
||||
|
||||
const Stack: React.FC< StackProps > = ( {
|
||||
items,
|
||||
onClickLoadSampleProduct,
|
||||
showOtherOptions = true,
|
||||
} ) => {
|
||||
return (
|
||||
<div className="woocommerce-products-stack">
|
||||
<List items={ items } />
|
||||
<Text className="woocommerce-stack__other-options">
|
||||
{ interpolateComponents( {
|
||||
mixedString: __(
|
||||
'Can’t find your product type? {{sbLink}}Start Blank{{/sbLink}} or {{LspLink}}Load Sample Products{{/LspLink}} to see what they look like in your store.',
|
||||
'woocommerce'
|
||||
),
|
||||
components: {
|
||||
sbLink: (
|
||||
<Link
|
||||
onClick={ () => {
|
||||
window.location = getAdminLink(
|
||||
'post-new.php?post_type=product&wc_onboarding_active_task=products&tutorial=true'
|
||||
);
|
||||
return false;
|
||||
} }
|
||||
href=""
|
||||
type="wc-admin"
|
||||
>
|
||||
<></>
|
||||
</Link>
|
||||
{ showOtherOptions && (
|
||||
<Text className="woocommerce-stack__other-options">
|
||||
{ interpolateComponents( {
|
||||
mixedString: __(
|
||||
'Can’t find your product type? {{sbLink}}Start Blank{{/sbLink}} or {{LspLink}}Load Sample Products{{/LspLink}} to see what they look like in your store.',
|
||||
'woocommerce'
|
||||
),
|
||||
LspLink: (
|
||||
// TODO: Update this to the load sample product.
|
||||
<Link
|
||||
href=""
|
||||
type="wc-admin"
|
||||
onClick={ () => {
|
||||
onClickLoadSampleProduct();
|
||||
return false;
|
||||
} }
|
||||
>
|
||||
<></>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
} ) }
|
||||
</Text>
|
||||
components: {
|
||||
sbLink: (
|
||||
<Link
|
||||
onClick={ () => {
|
||||
window.location = getAdminLink(
|
||||
'post-new.php?post_type=product&wc_onboarding_active_task=products&tutorial=true'
|
||||
);
|
||||
return false;
|
||||
} }
|
||||
href=""
|
||||
type="wc-admin"
|
||||
>
|
||||
<></>
|
||||
</Link>
|
||||
),
|
||||
LspLink: (
|
||||
<Link
|
||||
href=""
|
||||
type="wc-admin"
|
||||
onClick={ () => {
|
||||
onClickLoadSampleProduct();
|
||||
return false;
|
||||
} }
|
||||
>
|
||||
<></>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
} ) }
|
||||
</Text>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -93,6 +93,10 @@ describe( 'Products', () => {
|
|||
const fetchMock = jest.spyOn( global, 'fetch' );
|
||||
const { queryByText, getByRole } = render( <Products /> );
|
||||
|
||||
userEvent.click(
|
||||
getByRole( 'button', { name: 'View more product types' } )
|
||||
);
|
||||
|
||||
expect( queryByText( 'Load Sample Products' ) ).toBeInTheDocument();
|
||||
|
||||
userEvent.click(
|
||||
|
|
|
@ -27,6 +27,24 @@ describe( 'Stack', () => {
|
|||
expect( queryAllByRole( 'link' ) ).toHaveLength( 2 );
|
||||
} );
|
||||
|
||||
it( 'should not render other product options', () => {
|
||||
const { queryByText } = render(
|
||||
<Stack
|
||||
showOtherOptions={ false }
|
||||
onClickLoadSampleProduct={ () => {} }
|
||||
items={ [
|
||||
{
|
||||
...productTypes[ 0 ],
|
||||
onClick: () => {},
|
||||
},
|
||||
] }
|
||||
/>
|
||||
);
|
||||
|
||||
expect( queryByText( 'Start Blank' ) ).not.toBeInTheDocument();
|
||||
expect( queryByText( 'Load Sample Products' ) ).not.toBeInTheDocument();
|
||||
} );
|
||||
|
||||
it( 'should call onClickLoadSampleProduct when the "Load Sample Products" link is clicked', async () => {
|
||||
const onClickLoadSampleProduct = jest.fn();
|
||||
const { getByRole } = render(
|
||||
|
|
Loading…
Reference in New Issue