initial commit

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/index.js

@@ -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;

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss

@@ -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;
+	}
+}

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/test/__snapshots__/index.js.snap

@@ -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>
+`;

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/test/index.js

@@ -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();
+	} );
+} );