autonomic-cooperative/woocommerce
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
naomi
2021-12-10 12:03:04 +00:00
commit c46c7ddbf0
3643 changed files with 582794 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
packages/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/index.js Normal file
View File

@ -0,0 +1,95 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Title from '@woocommerce/base-components/title';
/**
* Internal dependencies
*/
import './style.scss';
const StepHeading = ( { title, stepHeadingContent } ) => (
<div className="wc-block-components-checkout-step__heading">
<Title
aria-hidden="true"
className="wc-block-components-checkout-step__title"
headingLevel="2"
>
{ title }
</Title>
{ !! stepHeadingContent && (
<span className="wc-block-components-checkout-step__heading-content">
{ stepHeadingContent }
</span>
) }
</div>
);
const FormStep = ( {
id,
className,
title,
legend,
description,
children,
disabled = false,
showStepNumber = true,
stepHeadingContent = () => {},
} ) => {
// If the form step doesn't have a legend or title, render a <div> instead
// of a <fieldset>.
const Element = legend || title ? 'fieldset' : 'div';
return (
<Element
className={ classnames(
className,
'wc-block-components-checkout-step',
{
'wc-block-components-checkout-step--with-step-number': showStepNumber,
'wc-block-components-checkout-step--disabled': disabled,
}
) }
id={ id }
disabled={ disabled }
>
{ !! ( legend || title ) && (
<legend className="screen-reader-text">
{ legend || title }
</legend>
) }
{ !! title && (
<StepHeading
title={ title }
stepHeadingContent={ stepHeadingContent() }
/>
) }
<div className="wc-block-components-checkout-step__container">
{ !! description && (
<p className="wc-block-components-checkout-step__description">
{ description }
</p>
) }
<div className="wc-block-components-checkout-step__content">
{ children }
</div>
</div>
</Element>
);
};
FormStep.propTypes = {
id: PropTypes.string,
className: PropTypes.string,
title: PropTypes.string,
description: PropTypes.string,
children: PropTypes.node,
showStepNumber: PropTypes.bool,
stepHeadingContent: PropTypes.func,
disabled: PropTypes.bool,
legend: PropTypes.string,
};
export default FormStep;

129
packages/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss Normal file
View File

@ -0,0 +1,129 @@
.wc-block-components-form {
counter-reset: checkout-step;
}
.wc-block-components-form .wc-block-components-checkout-step {
position: relative;
border: none;
padding: 0 0 0 $gap-large;
background: none;
margin: 0;
.is-mobile &,
.is-small & {
padding-left: 0;
}
}
.wc-block-components-checkout-step--disabled {
opacity: 0.6;
}
.wc-block-components-checkout-step__container {
position: relative;
}
.wc-block-components-checkout-step__content > * {
margin-bottom: em($gap);
}
.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content > :last-child {
margin-bottom: 0;
padding-bottom: em($gap-large);
}
.wc-block-components-checkout-step__heading {
display: flex;
justify-content: space-between;
align-content: center;
flex-wrap: wrap;
margin: em($gap-small) 0 em($gap);
position: relative;
align-items: center;
gap: em($gap);
.wc-block-components-express-payment-continue-rule + .wc-block-components-checkout-step & {
margin-top: 0;
}
}
.wc-block-components-checkout-step:first-child .wc-block-components-checkout-step__heading {
margin-top: 0;
}
.wc-block-components-checkout-step__title {
margin: 0 $gap-small 0 0;
}
.wc-block-components-checkout-step__heading-content {
@include font-size(smaller);
a {
font-weight: bold;
color: inherit;
}
}
.wc-block-components-checkout-step__description {
@include font-size(small);
line-height: 1.25;
margin-bottom: $gap;
}
.wc-block-components-checkout-step--with-step-number {
.wc-block-components-checkout-step__title::before {
@include reset-box();
background: transparent;
counter-increment: checkout-step;
content: "\00a0" counter(checkout-step) ".";
content: "\00a0" counter(checkout-step) "." / "";
position: absolute;
width: $gap-large;
left: -$gap-large;
top: 0;
text-align: center;
transform: translateX(-50%);
.is-mobile &,
.is-small & {
position: static;
transform: none;
left: auto;
top: auto;
content: counter(checkout-step) ".\00a0";
content: counter(checkout-step) ".\00a0" / "";
}
}
.wc-block-components-checkout-step__container::after {
content: "";
height: 100%;
border-left: 1px solid;
opacity: 0.3;
position: absolute;
left: -$gap-large;
top: 0;
}
.is-mobile &,
.is-small & {
.wc-block-components-checkout-step__title::before {
position: static;
transform: none;
left: auto;
top: auto;
content: counter(checkout-step) ".\00a0";
content: counter(checkout-step) ".\00a0" / "";
}
.wc-block-components-checkout-step__container::after {
content: unset;
}
}
}
.editor-styles-wrapper {
.wp-block h4.wc-block-components-checkout-step__title {
@include font-size(regular);
line-height: 24px;
margin: 0 $gap-small 0 0;
}
}

262
packages/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/test/__snapshots__/index.js.snap Normal file
View File

@ -0,0 +1,262 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FormStep fieldset legend should default to legend prop when title and legend are defined 1`] = `
<fieldset
className="wc-block-components-checkout-step wc-block-components-checkout-step--with-step-number"
disabled={false}
>
<legend
className="screen-reader-text"
>
Lorem Ipsum 2
</legend>
<div
className="wc-block-components-checkout-step__heading"
>
<h2
aria-hidden="true"
className="wc-block-components-title wc-block-components-checkout-step__title"
>
Lorem Ipsum
</h2>
</div>
<div
className="wc-block-components-checkout-step__container"
>
<div
className="wc-block-components-checkout-step__content"
>
Dolor sit amet
</div>
</div>
</fieldset>
`;
exports[`FormStep should apply id and className props 1`] = `
<div
className="my-classname wc-block-components-checkout-step wc-block-components-checkout-step--with-step-number"
disabled={false}
id="my-id"
>
<div
className="wc-block-components-checkout-step__container"
>
<div
className="wc-block-components-checkout-step__content"
>
Dolor sit amet
</div>
</div>
</div>
`;
exports[`FormStep should remove step number CSS class if prop is false 1`] = `
<fieldset
className="wc-block-components-checkout-step"
disabled={false}
>
<legend
className="screen-reader-text"
>
Lorem Ipsum
</legend>
<div
className="wc-block-components-checkout-step__heading"
>
<h2
aria-hidden="true"
className="wc-block-components-title wc-block-components-checkout-step__title"
>
Lorem Ipsum
</h2>
</div>
<div
className="wc-block-components-checkout-step__container"
>
<div
className="wc-block-components-checkout-step__content"
>
Dolor sit amet
</div>
</div>
</fieldset>
`;
exports[`FormStep should render a div if no title or legend is provided 1`] = `
<div
className="wc-block-components-checkout-step wc-block-components-checkout-step--with-step-number"
disabled={false}
>
<div
className="wc-block-components-checkout-step__container"
>
<div
className="wc-block-components-checkout-step__content"
>
Dolor sit amet
</div>
</div>
</div>
`;
exports[`FormStep should render a fieldset if a legend is provided 1`] = `
<fieldset
className="wc-block-components-checkout-step wc-block-components-checkout-step--with-step-number"
disabled={false}
>
<legend
className="screen-reader-text"
>
Lorem Ipsum 2
</legend>
<div
className="wc-block-components-checkout-step__container"
>
<div
className="wc-block-components-checkout-step__content"
>
Dolor sit amet
</div>
</div>
</fieldset>
`;
exports[`FormStep should render a fieldset with heading if a title is provided 1`] = `
<fieldset
className="wc-block-components-checkout-step wc-block-components-checkout-step--with-step-number"
disabled={false}
>
<legend
className="screen-reader-text"
>
Lorem Ipsum
</legend>
<div
className="wc-block-components-checkout-step__heading"
>
<h2
aria-hidden="true"
className="wc-block-components-title wc-block-components-checkout-step__title"
>
Lorem Ipsum
</h2>
</div>
<div
className="wc-block-components-checkout-step__container"
>
<div
className="wc-block-components-checkout-step__content"
>
Dolor sit amet
</div>
</div>
</fieldset>
`;
exports[`FormStep should render step description 1`] = `
<fieldset
className="wc-block-components-checkout-step wc-block-components-checkout-step--with-step-number"
disabled={false}
>
<legend
className="screen-reader-text"
>
Lorem Ipsum
</legend>
<div
className="wc-block-components-checkout-step__heading"
>
<h2
aria-hidden="true"
className="wc-block-components-title wc-block-components-checkout-step__title"
>
Lorem Ipsum
</h2>
</div>
<div
className="wc-block-components-checkout-step__container"
>
<p
className="wc-block-components-checkout-step__description"
>
This is the description
</p>
<div
className="wc-block-components-checkout-step__content"
>
Dolor sit amet
</div>
</div>
</fieldset>
`;
exports[`FormStep should render step heading content 1`] = `
<fieldset
className="wc-block-components-checkout-step wc-block-components-checkout-step--with-step-number"
disabled={false}
>
<legend
className="screen-reader-text"
>
Lorem Ipsum
</legend>
<div
className="wc-block-components-checkout-step__heading"
>
<h2
aria-hidden="true"
className="wc-block-components-title wc-block-components-checkout-step__title"
>
Lorem Ipsum
</h2>
<span
className="wc-block-components-checkout-step__heading-content"
>
<span>
Some context to render next to the heading
</span>
</span>
</div>
<div
className="wc-block-components-checkout-step__container"
>
<div
className="wc-block-components-checkout-step__content"
>
Dolor sit amet
</div>
</div>
</fieldset>
`;
exports[`FormStep should set disabled prop to the fieldset element when disabled is true 1`] = `
<fieldset
className="wc-block-components-checkout-step wc-block-components-checkout-step--with-step-number wc-block-components-checkout-step--disabled"
disabled={true}
>
<legend
className="screen-reader-text"
>
Lorem Ipsum
</legend>
<div
className="wc-block-components-checkout-step__heading"
>
<h2
aria-hidden="true"
className="wc-block-components-title wc-block-components-checkout-step__title"
>
Lorem Ipsum
</h2>
</div>
<div
className="wc-block-components-checkout-step__container"
>
<div
className="wc-block-components-checkout-step__content"
>
Dolor sit amet
</div>
</div>
</fieldset>
`;

100
packages/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/test/index.js Normal file
View File

@ -0,0 +1,100 @@
/**
* External dependencies
*/
import TestRenderer from 'react-test-renderer';
/**
* Internal dependencies
*/
import FormStep from '..';
describe( 'FormStep', () => {
test( 'should render a div if no title or legend is provided', () => {
const component = TestRenderer.create(
<FormStep>Dolor sit amet</FormStep>
);
expect( component.toJSON() ).toMatchSnapshot();
} );
test( 'should apply id and className props', () => {
const component = TestRenderer.create(
<FormStep id="my-id" className="my-classname">
Dolor sit amet
</FormStep>
);
expect( component.toJSON() ).toMatchSnapshot();
} );
test( 'should render a fieldset if a legend is provided', () => {
const component = TestRenderer.create(
<FormStep legend="Lorem Ipsum 2">Dolor sit amet</FormStep>
);
expect( component.toJSON() ).toMatchSnapshot();
} );
test( 'should render a fieldset with heading if a title is provided', () => {
const component = TestRenderer.create(
<FormStep title="Lorem Ipsum">Dolor sit amet</FormStep>
);
expect( component.toJSON() ).toMatchSnapshot();
} );
test( 'fieldset legend should default to legend prop when title and legend are defined', () => {
const component = TestRenderer.create(
<FormStep title="Lorem Ipsum" legend="Lorem Ipsum 2">
Dolor sit amet
</FormStep>
);
expect( component.toJSON() ).toMatchSnapshot();
} );
test( 'should remove step number CSS class if prop is false', () => {
const component = TestRenderer.create(
<FormStep title="Lorem Ipsum" showStepNumber={ false }>
Dolor sit amet
</FormStep>
);
expect( component.toJSON() ).toMatchSnapshot();
} );
test( 'should render step heading content', () => {
const component = TestRenderer.create(
<FormStep
title="Lorem Ipsum"
stepHeadingContent={ () => (
<span>Some context to render next to the heading</span>
) }
>
Dolor sit amet
</FormStep>
);
expect( component.toJSON() ).toMatchSnapshot();
} );
test( 'should render step description', () => {
const component = TestRenderer.create(
<FormStep title="Lorem Ipsum" description="This is the description">
Dolor sit amet
</FormStep>
);
expect( component.toJSON() ).toMatchSnapshot();
} );
test( 'should set disabled prop to the fieldset element when disabled is true', () => {
const component = TestRenderer.create(
<FormStep title="Lorem Ipsum" disabled={ true }>
Dolor sit amet
</FormStep>
);
expect( component.toJSON() ).toMatchSnapshot();
} );
} );