From 22818bb7ffab66611687e21c606e047982add357 Mon Sep 17 00:00:00 2001
From: Alquen Antonio Sarmiento <sarmientoalquen@gmail.com>
Date: Tue, 15 Oct 2024 15:26:09 +0800
Subject: [PATCH] feat: admin toolbar setting

---
 .../admin-toolbar-setting/editor.scss         |  7 +++
 src/components/admin-toolbar-setting/index.js | 63 +++++++++++++++++++
 src/welcome/admin.js                          | 58 ++++++++---------
 3 files changed, 99 insertions(+), 29 deletions(-)
 create mode 100644 src/components/admin-toolbar-setting/editor.scss
 create mode 100644 src/components/admin-toolbar-setting/index.js

diff --git a/src/components/admin-toolbar-setting/editor.scss b/src/components/admin-toolbar-setting/editor.scss
new file mode 100644
index 000000000..11f15bb4d
--- /dev/null
+++ b/src/components/admin-toolbar-setting/editor.scss
@@ -0,0 +1,7 @@
+.ugb-admin-toolbar-setting {
+	display: flex;
+	padding: 10px;
+	.ugb-button-component {
+		width: 100%;
+	}
+}
diff --git a/src/components/admin-toolbar-setting/index.js b/src/components/admin-toolbar-setting/index.js
new file mode 100644
index 000000000..8b77ca052
--- /dev/null
+++ b/src/components/admin-toolbar-setting/index.js
@@ -0,0 +1,63 @@
+import AdminBaseSetting from '../admin-base-setting'
+import Button from '../button'
+import { ButtonGroup } from '@wordpress/components'
+import { __ } from '@wordpress/i18n'
+
+const AdminToolbarSetting = props => {
+	return (
+		<AdminBaseSetting { ...props }>
+			<ButtonGroup
+				children={
+					props.controls.map( option => {
+						const isSelected = props.value ? props.value === option.value : props.placeholder === option.value
+						const tabindex = isSelected ? '0' : '-1'
+
+						return <Button
+							style={ option.selectedColor && isSelected ? { backgroundColor: option.selectedColor } : {} }
+							isPrimary={ ! option.selectedColor && isSelected }
+							key={ option.value }
+							label={ option.title || props.label }
+							tabIndex={ tabindex }
+							aria-pressed={ isSelected }
+							isSmall={ props.isSmall }
+							onClick={ () => {
+								if ( option.value === props.value ) {
+									return
+								}
+								props.onChange( option.value )
+							} }
+							onKeyDown={ e => {
+								const el = e.target
+								if ( el ) {
+									// On right, select the next value or loop to first.
+									if ( e.keyCode === 39 ) {
+										const nextEl = el.nextElementSibling || el.parentElement.firstElementChild
+										nextEl.focus()
+										nextEl.click()
+
+									// Trigger click on the previous option or loop to last.
+									} else if ( e.keyCode === 37 ) {
+										const prevEl = el.previousElementSibling || el.parentElement.lastElementChild
+										prevEl.focus()
+										prevEl.click()
+									}
+								}
+							} }
+							children={ <span className="ugb-admin-toolbar-setting__option">{ option.title }</span> }
+						/>
+					} )
+				}
+				className="ugb-admin-toolbar-setting"
+			/>
+		</AdminBaseSetting>
+	)
+}
+
+AdminToolbarSetting.defaultProps = {
+	controls: [],
+	label: '',
+	value: '',
+	onChange: () => {},
+}
+
+export default AdminToolbarSetting
diff --git a/src/welcome/admin.js b/src/welcome/admin.js
index f306aa146..2d4fb51a1 100644
--- a/src/welcome/admin.js
+++ b/src/welcome/admin.js
@@ -32,7 +32,7 @@ import { createRoot } from '~stackable/util/element'
 import AdminSelectSetting from '~stackable/components/admin-select-setting'
 import AdminToggleSetting from '~stackable/components/admin-toggle-setting'
 import AdminTextSetting from '~stackable/components/admin-text-setting'
-import AdvancedToolbarControl from '~stackable/components/advanced-toolbar-control'
+import AdminToolbarSetting from '~stackable/components/admin-toolbar-setting'
 import { GettingStarted } from './getting-started'
 import { BLOCK_STATE } from '~stackable/util/blocks'
 
@@ -313,7 +313,7 @@ const Sidenav = ( {
 
 const Searchbar = ( { currentSearch, handleSearchChange } ) => {
 	const handleSearch = e => {
-		handleSearchChange( ( e.target.value.toLowerCase(), i18n ) )
+		handleSearchChange( e.target.value.toLowerCase() )
 	}
 	return (
 		<div className="s-search-setting">
@@ -686,33 +686,33 @@ const Blocks = ( { settings, handleSettingsChange } ) => {
 								</>
 
 								return (
-									<>
-										{ title }
-										<AdvancedToolbarControl
-											key={ i }
-											value={ blockState }
-											isToggleOnly={ true }
-											default={ BLOCK_STATE.ENABLED }
-											controls={ [
-												{
-													value: BLOCK_STATE.ENABLED,
-													title: __( 'Enabled', i18n ),
-												},
-												{
-													value: BLOCK_STATE.HIDDEN,
-													title: __( 'Hidden', i18n ),
-												},
-												{
-													value: BLOCK_STATE.DISABLED,
-													title: __( 'Disabled', i18n ),
-												},
-											] }
-											onChange={ value => {
-												toggleBlock( block.name, id, value )
-											} }
-											isSmall={ true }
-										/>
-									</>
+									<AdminToolbarSetting
+										key={ i }
+										label={ title }
+										value={ blockState }
+										default={ BLOCK_STATE.ENABLED }
+										controls={ [
+											{
+												value: BLOCK_STATE.ENABLED,
+												title: __( 'Enabled', i18n ),
+												selectedColor: '#1b7800',
+											},
+											{
+												value: BLOCK_STATE.HIDDEN,
+												title: __( 'Hidden', i18n ),
+												selectedColor: '#7dba6c',
+											},
+											{
+												value: BLOCK_STATE.DISABLED,
+												title: __( 'Disabled', i18n ),
+												selectedColor: '#979e95',
+											},
+										] }
+										onChange={ value => {
+											toggleBlock( block.name, id, value )
+										} }
+										isSmall={ true }
+									/>
 								)
 							} ) }
 						</div>