@@ -12,7 +12,7 @@ import { SupportedPHPVersion, SupportedPHPVersions } from '@studio/common/types/
1212import { Icon , SelectControl , Notice } from '@wordpress/components' ;
1313import { createInterpolateElement } from '@wordpress/element' ;
1414import { __ , sprintf , _n } from '@wordpress/i18n' ;
15- import { tip , cautionFilled , chevronRight , chevronDown , chevronLeft } from '@wordpress/icons' ;
15+ import { cautionFilled , chevronRight , chevronDown , chevronLeft } from '@wordpress/icons' ;
1616import { useI18n } from '@wordpress/react-i18n' ;
1717import { FormEvent , useState , useEffect , useCallback , useMemo , useRef , RefObject } from 'react' ;
1818import Button from 'src/components/button' ;
@@ -59,107 +59,6 @@ interface CreateSiteFormProps {
5959 formRef ?: RefObject < HTMLFormElement > ;
6060}
6161
62- interface FormPathInputComponentProps {
63- value : string ;
64- onClick : ( ) => void ;
65- error ?: string ;
66- doesPathContainWordPress : boolean ;
67- id ?: string ;
68- }
69-
70- interface SiteFormErrorProps {
71- error ?: string ;
72- tipMessage ?: string ;
73- className ?: string ;
74- }
75-
76- const SiteFormError = ( { error, tipMessage = '' , className = '' } : SiteFormErrorProps ) => {
77- return (
78- ( error || tipMessage ) && (
79- < div
80- id = { error ? 'error-message' : 'tip-message' }
81- role = "alert"
82- aria-atomic = "true"
83- className = { cx (
84- 'flex items-start gap-1 text-xs' ,
85- error ? 'text-red-500' : 'text-frame-text-secondary' ,
86- className
87- ) }
88- >
89- < Icon
90- className = { cx (
91- 'shrink-0 basis-4' ,
92- error ? 'fill-red-500' : 'fill-frame-text-secondary'
93- ) }
94- icon = { error ? cautionFilled : tip }
95- width = { 16 }
96- height = { 16 }
97- />
98- < p > { error ? error : __ ( tipMessage ) } </ p >
99- </ div >
100- )
101- ) ;
102- } ;
103-
104- function FormPathInputComponent ( {
105- value,
106- onClick,
107- error,
108- doesPathContainWordPress,
109- id,
110- } : FormPathInputComponentProps ) {
111- const { __ } = useI18n ( ) ;
112- return (
113- < div className = "flex flex-col gap-2" >
114- < button
115- aria-invalid = { ! ! error }
116- /**
117- * The below `aria-describedby` presumes the error message always
118- * relates to the local path input, which is true currently as it is the
119- * only data validation in place. If we ever introduce additional data
120- * validation we need to expand the robustness of this
121- * `aria-describedby` attribute so that it only targets relevant error
122- * messages.
123- */
124- aria-describedby = { error ? 'site-path-error' : undefined }
125- type = "button"
126- aria-label = { `${ value } , ${ __ ( 'Select different local path' ) } ` }
127- className = { cx (
128- 'flex flex-row items-stretch rounded-sm border border-frame-border focus:border-frame-theme focus:shadow-[0_0_0_0.5px] focus:shadow-frame-theme outline-none transition-shadow transition-linear duration-100 [&_.local-path-icon]:focus:border-l-frame-theme [&:disabled]:cursor-not-allowed' ,
129- error && 'border-red-500 [&_.local-path-icon]:border-l-red-500'
130- ) }
131- data-testid = "select-path-button"
132- onClick = { onClick }
133- id = { id }
134- >
135- < div
136- aria-hidden = "true"
137- tabIndex = { - 1 }
138- className = "w-full text-left pl-3 py-3 min-h-10"
139- onChange = { ( ) => { } }
140- >
141- { value }
142- </ div >
143- < div
144- aria-hidden = "true"
145- className = "local-path-icon flex items-center py-[9px] px-2.5 self-center"
146- >
147- < FolderIcon className = "text-frame-text-secondary" />
148- </ div >
149- </ button >
150- < SiteFormError
151- error = { error }
152- tipMessage = {
153- doesPathContainWordPress
154- ? __ ( 'The existing WordPress site at this path will be added.' )
155- : ''
156- }
157- />
158- < input type = "hidden" data-testid = "local-path-input" value = { value } />
159- </ div >
160- ) ;
161- }
162-
16362export const CreateSiteForm = ( {
16463 defaultValues = { } ,
16564 onSelectPath,
0 commit comments