initial commit

packages/woocommerce-blocks/assets/js/base/components/sidebar-layout/index.js

@@ -0,0 +1,3 @@
+export { default as Sidebar } from './sidebar';
+export { default as Main } from './main';
+export { default as SidebarLayout } from './sidebar-layout';

packages/woocommerce-blocks/assets/js/base/components/sidebar-layout/main.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+const Main = ( { children, className } ) => {
+	return (
+		<div className={ classNames( 'wc-block-components-main', className ) }>
+			{ children }
+		</div>
+	);
+};
+
+Main.propTypes = {
+	className: PropTypes.string,
+};
+
+export default Main;

packages/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { ContainerWidthContextProvider } from '@woocommerce/base-context';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const SidebarLayout = ( { children, className } ) => {
+	return (
+		<ContainerWidthContextProvider
+			className={ classNames(
+				'wc-block-components-sidebar-layout',
+				className
+			) }
+		>
+			{ children }
+		</ContainerWidthContextProvider>
+	);
+};
+
+SidebarLayout.propTypes = {
+	className: PropTypes.string,
+};
+
+export default SidebarLayout;

packages/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+const Sidebar = ( { children, className } ) => {
+	return (
+		<div
+			className={ classNames( 'wc-block-components-sidebar', className ) }
+		>
+			{ children }
+		</div>
+	);
+};
+
+Sidebar.propTypes = {
+	className: PropTypes.string,
+};
+
+export default Sidebar;

packages/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss

@@ -0,0 +1,74 @@
+.wc-block-components-sidebar-layout {
+	display: flex;
+	flex-wrap: wrap;
+	margin: 0 auto $gap;
+	position: relative;
+
+	.wc-block-components-main {
+		box-sizing: border-box;
+		margin: 0;
+		padding-right: percentage(math.div($gap-largest, 1060px)); // ~1060px is the default width of the content area in Storefront.
+		width: 65%;
+	}
+}
+
+.wc-block-components-sidebar {
+	box-sizing: border-box;
+	margin: 0;
+	padding-left: percentage(math.div($gap-large, 1060px));
+	width: 35%;
+
+	.wc-block-components-panel > h2 {
+		@include font-size(regular);
+		@include reset-box();
+	}
+}
+
+.is-medium,
+.is-small,
+.is-mobile {
+	&.wc-block-components-sidebar-layout {
+		flex-direction: column;
+		margin: 0 auto $gap;
+
+		.wc-block-components-main {
+			padding: 0;
+			width: 100%;
+		}
+		.wc-block-components-sidebar {
+			padding: 0;
+			width: 100%;
+		}
+	}
+}
+
+.is-large {
+	.wc-block-components-sidebar {
+		.wc-block-components-totals-item,
+		.wc-block-components-panel {
+			padding-left: $gap;
+			padding-right: $gap;
+		}
+
+		.wc-block-components-panel {
+			.wc-block-components-totals-item {
+				padding: 0;
+			}
+		}
+	}
+}
+
+.wc-block-components-sidebar .wc-block-components-panel > h2 {
+	@include reset-typography();
+	.wc-block-components-panel__button {
+		font-weight: 400;
+	}
+}
+
+// For Twenty Twenty we need to increase specificity a bit more.
+.theme-twentytwenty {
+	.wc-block-components-sidebar .wc-block-components-panel > h2 {
+		@include font-size(large);
+		@include reset-box();
+	}
+}