Adding CollapsibleContent component (#34129)

* Basic version of CollapsibleContent component

* Adding changelog

* Add story for component

* Update styling to match designs

* Add initially expanded example

Co-authored-by: Joshua Flowers <joshuatf@gmail.com>

packages/js/components/changelog/add-collapsed-content-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Adding basic CollapsibleContent component.

packages/js/components/src/collapsible-content/collapsible-content.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { createElement, useState } from '@wordpress/element';
+import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+
+export type CollapsedProps = {
+	initialCollapsed?: boolean;
+	toggleText: string;
+	children: React.ReactNode;
+} & React.HTMLAttributes< HTMLDivElement >;
+
+export const CollapsibleContent: React.FC< CollapsedProps > = ( {
+	initialCollapsed = true,
+	toggleText,
+	children,
+	...props
+}: CollapsedProps ) => {
+	const [ collapsed, setCollapsed ] = useState( initialCollapsed );
+	return (
+		<div
+			aria-expanded={ collapsed ? 'false' : 'true' }
+			className={ `woocommerce-collapsible-content` }
+		>
+			<button
+				className="woocommerce-collapsible-content__toggle"
+				onClick={ () => setCollapsed( ! collapsed ) }
+			>
+				<div>
+					<span>{ toggleText }</span>
+					<Icon
+						icon={ collapsed ? chevronDown : chevronUp }
+						size={ 16 }
+					/>
+				</div>
+			</button>
+			{ ! collapsed && (
+				<div
+					{ ...props }
+					className="woocommerce-collapsible-content__content"
+				>
+					{ children }
+				</div>
+			) }
+		</div>
+	);
+};

packages/js/components/src/collapsible-content/index.tsx

@@ -0,0 +1 @@
+export * from './collapsible-content';

packages/js/components/src/collapsible-content/stories/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CollapsibleContent } from '../';
+
+export const Basic: React.FC = () => {
+	return (
+		<CollapsibleContent toggleText="Advanced">
+			All this business in here is collapsed.
+		</CollapsibleContent>
+	);
+};
+
+export const Expanded: React.FC = () => {
+	return (
+		<CollapsibleContent toggleText="Advanced" initialCollapsed={ false }>
+			All this business in here is initially expanded.
+		</CollapsibleContent>
+	);
+};
+
+export default {
+	title: 'WooCommerce Admin/components/CollapsibleContent',
+	component: Basic,
+};

packages/js/components/src/collapsible-content/style.scss

@@ -0,0 +1,23 @@
+.woocommerce-collapsible-content {
+
+	.woocommerce-collapsible-content__toggle {
+		all: unset;
+		font-size: 13px;
+		color: #007CBA;
+		cursor: pointer;
+
+		> div {
+			display: flex;
+			align-items: center;
+		}
+	
+		svg {
+			fill: #007CBA;
+			margin-left: 2px;
+		}
+	}
+
+	.woocommerce-collapsible-content__content {
+		margin-top: $gap-large;
+	}
+}

packages/js/components/src/index.ts

@@ -60,3 +60,4 @@ export { Badge } from './badge';
 export { DynamicForm } from './dynamic-form';
 export { default as TourKit } from './tour-kit';
 export * as TourKitTypes from './tour-kit/types';
+export { CollapsibleContent } from './collapsible-content';

packages/js/components/src/style.scss

@@ -44,3 +44,4 @@
 @import 'badge/style.scss';
 @import 'dynamic-form/style.scss';
 @import 'tour-kit/style.scss';
+@import 'collapsible-content/style.scss';