/**
 * Material UI > Layout > Grid component.
 *
 * Site Kit by Google, Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import PropTypes from 'prop-types';
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import { forwardRef } from '@wordpress/element';

const Grid = forwardRef(
	( { alignLeft, fill, className, children, ...otherProps }, ref ) => {
		return (
			<div
				className={ classnames( 'mdc-layout-grid', className, {
					'mdc-layout-grid--align-left': alignLeft,
					'mdc-layout-grid--fill': fill,
				} ) }
				{ ...otherProps }
				ref={ ref }
			>
				{ children }
			</div>
		);
	}
);

Grid.propTypes = {
	alignLeft: PropTypes.bool,
	fill: PropTypes.bool,
	className: PropTypes.string,
	children: PropTypes.node,
};

Grid.defaultProps = {
	className: '',
};

export default Grid;

/**
 * Material UI > Layout > Grid component.
 *
 * Site Kit by Google, Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import PropTypes from 'prop-types';
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import { forwardRef } from '@wordpress/element';

const Grid = forwardRef(
	(
		{ alignLeft, fill, className, children, collapsed, ...otherProps },
		ref
	) => {
		return (
			<div
				className={ classnames( 'mdc-layout-grid', className, {
					'mdc-layout-grid--align-left': alignLeft,
					'mdc-layout-grid--collapsed': collapsed,
					'mdc-layout-grid--fill': fill,
				} ) }
				{ ...otherProps }
				ref={ ref }
			>
				{ children }
			</div>
		);
	}
);

Grid.propTypes = {
	alignLeft: PropTypes.bool,
	fill: PropTypes.bool,
	className: PropTypes.string,
	collapsed: PropTypes.bool,
	children: PropTypes.node,
};

Grid.defaultProps = {
	className: '',
};

export default Grid;

Add prop for collapsed Grid style.