first

wp-content/plugins/visual-portfolio/gutenberg/components/collapse-control/index.js

@@ -0,0 +1,66 @@
+import './style.scss';
+
+import classnames from 'classnames/dedupe';
+
+import { Button } from '@wordpress/components';
+import { Fragment, useState } from '@wordpress/element';
+
+/**
+ * Component Class
+ *
+ * @param props
+ */
+export default function CollapseControl(props) {
+	const { children, options, initialOpen } = props;
+
+	const [collapsed, setCollapsed] = useState(initialOpen);
+
+	return (
+		<div className="vpf-component-collapse-control">
+			{options.map((option) => {
+				return (
+					<Fragment key={option.category}>
+						<Button
+							onClick={() => {
+								setCollapsed(
+									option.category === collapsed
+										? ''
+										: option.category
+								);
+							}}
+							className={classnames(
+								'vpf-component-collapse-control-toggle',
+								option.category === collapsed
+									? 'vpf-component-collapse-control-active'
+									: ''
+							)}
+						>
+							<span>{option.title}</span>
+							<svg
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								className="components-panel__arrow"
+								aria-hidden="true"
+								focusable="false"
+							>
+								<path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" />
+							</svg>
+						</Button>
+						<div
+							className={classnames(
+								'vpf-component-collapse-control-content',
+								option.category === collapsed
+									? 'vpf-component-collapse-control-content-active'
+									: ''
+							)}
+						>
+							{children(option)}
+						</div>
+					</Fragment>
+				);
+			})}
+		</div>
+	);
+}

wp-content/plugins/visual-portfolio/gutenberg/components/collapse-control/style.scss

@@ -0,0 +1,49 @@
+.vpf-component-collapse-control {
+	margin-top: 0;
+	margin-top: -10px;
+	margin-right: -16px;
+	margin-bottom: -10px;
+	margin-left: -16px;
+
+	// Toggle.
+	.vpf-component-collapse-control-toggle {
+		display: flex;
+		gap: 6px;
+		width: 100%;
+		padding: 10px 16px;
+		font-weight: 500;
+
+		// Remove default Gutenberg box shadow.
+		&:focus:not(:focus-visible) {
+			box-shadow: none;
+		}
+
+		svg {
+			margin-left: auto;
+		}
+	}
+
+	.vpf-component-collapse-control-active svg {
+		transform: rotate(180deg);
+	}
+
+	// Content.
+	.vpf-component-collapse-control-content {
+		display: none;
+	}
+
+	.vpf-component-collapse-control-content-active {
+		display: block;
+	}
+
+	// Fix panel styles.
+	.components-panel__body {
+		padding-top: 10px;
+		padding-bottom: 10px;
+		border-top: none;
+	}
+
+	.components-panel__body:has(+ .vpf-component-collapse-control-toggle) {
+		padding-bottom: 0;
+	}
+}