Skip to content

Commit f88e5b0

Browse files
wpalaniwpalani
committed
Change the select to a drop-down
1 parent 72be97e commit f88e5b0

File tree

4 files changed

+26
-86
lines changed

4 files changed

+26
-86
lines changed

‎src/app/steps/Intake/IntakeStep.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,11 @@ const IntakeStep = () => {
6161
/>
6262
<Container.Block separator={ false }>
6363
<div className="nfd-flex nfd-flex-col nfd-gap-6">
64-
<SiteTypeSelector value={ siteTypeValue } onChange={ setSiteTypeValue } />
65-
<div className="nfd-flex nfd-gap-4 nfd-w-full mobile:nfd-flex-col">
66-
<SiteTitleInput value={ siteTitleValue } onChange={ setSiteTitleValue } />
64+
<div className="nfd-flex nfd-gap-4 nfd-w-full nfd-pb-7 nfd-border-b mobile:nfd-flex-col">
65+
<SiteTypeSelector value={ siteTypeValue } onChange={ setSiteTypeValue } />
6766
<LanguageSelector value={ selectedLocaleValue } onChange={ setSelectedLocaleValue } />
6867
</div>
68+
<SiteTitleInput value={ siteTitleValue } onChange={ setSiteTitleValue } />
6969
<PromptInput value={ promptValue } onChange={ setPromptValue } />
7070
</div>
7171
</Container.Block>

‎src/app/steps/Intake/LanguageSelector.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const LanguageSelector = ( { value, onChange } ) => {
4141
} );
4242

4343
return (
44-
<div className="nfd-w-[40%] mobile:nfd-w-full">
44+
<div className="nfd-w-1/2 mobile:nfd-w-full">
4545
<SelectField
4646
id="nfd-onboarding-language-selector"
4747
label={ __( 'Language', 'wp-module-onboarding' ) }

‎src/app/steps/Intake/SiteTitleInput.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { TextField } from '@newfold/ui-component-library';
22

33
const SiteTitleInput = ( { value, onChange } ) => {
44
return (
5-
<div className="nfd-w-[60%] mobile:nfd-w-full">
5+
<div className="nfd-w-full">
66
<TextField
77
label={ __( 'Site Title', 'wp-module-onboarding' ) }
88
id="nfd-onboarding-site-title"

‎src/app/steps/Intake/SiteTypeSelector.js

Lines changed: 21 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,51 @@
1-
import { FeaturesSelect, Label, Title } from '@newfold/ui-component-library';
2-
import { UserIcon as UserIconOutline, BuildingOfficeIcon as BuildingOfficeIconOutline, ShoppingBagIcon as ShoppingBagIconOutline } from '@heroicons/react/24/outline';
3-
import { UserIcon as UserIconSolid, BuildingOfficeIcon as BuildingOfficeIconSolid, ShoppingBagIcon as ShoppingBagIconSolid } from '@heroicons/react/24/solid';
1+
import { SelectField } from '@newfold/ui-component-library';
2+
import classNames from 'classnames';
43

54
const SiteTypeSelector = ( { value: selectedSiteType, onChange } ) => {
65
const siteTypeOptions = [
76
{
8-
id: 'nfd-onboarding-site-type-option__blog',
9-
name: 'nfd-onboarding-site-type-option-group',
107
value: 'personal',
118
label: __( 'Personal', 'wp-module-onboarding' ),
12-
description: __( 'Share your story, thoughts, and ideas.', 'wp-module-onboarding' ),
13-
Icon: UserIconOutline,
14-
IconSelected: UserIconSolid,
159
},
1610
{
17-
id: 'nfd-onboarding-site-type-option__business-service',
18-
name: 'nfd-onboarding-site-type-option-group',
1911
value: 'business',
2012
label: __( 'Business & Service', 'wp-module-onboarding' ),
21-
description: __( 'Showcase your work and services.', 'wp-module-onboarding' ),
22-
Icon: BuildingOfficeIconOutline,
23-
IconSelected: BuildingOfficeIconSolid,
2413
},
2514
{
26-
id: 'nfd-onboarding-site-type-option__ecommerce',
27-
name: 'nfd-onboarding-site-type-option-group',
2815
value: 'ecommerce',
2916
label: __( 'Online Store', 'wp-module-onboarding' ),
30-
description: __( 'Sell your products and services online.', 'wp-module-onboarding' ),
31-
Icon: ShoppingBagIconOutline,
32-
IconSelected: ShoppingBagIconSolid,
3317
},
3418
];
3519

36-
const handleChange = ( event ) => {
37-
const newValue = event.target.value;
20+
const getSelectedLabel = ( value ) => {
21+
const option = siteTypeOptions.find( ( o ) => o.value === value );
22+
return option ? option.label : __( 'Site Type', 'wp-module-onboarding' );
23+
};
24+
25+
const handleChange = ( newValue ) => {
3826
// Validate the value is one of the options.
3927
const allowedValues = siteTypeOptions.map( ( option ) => option.value );
4028
if ( allowedValues.includes( newValue ) && newValue !== selectedSiteType ) {
4129
onChange( newValue );
4230
}
4331
};
4432

45-
/**
46-
* Styles for parts that are not exposed by the FeaturesSelect component.
47-
*/
48-
const getCustomStyles = () => {
49-
return (
50-
<style>
51-
{ `
52-
.nfd-onboarding-site-type-options .nfd-features-select__feature .nfd-label {
53-
box-shadow: 0px 4px 9.6px 10px #85BCF209 !important;
54-
}
55-
56-
.nfd-onboarding-site-type-options .nfd-features-select__feature-content {
57-
padding: 1rem !important;
58-
border-color: #DEE3E9 !important;
59-
width: 100% !important;
60-
}
61-
62-
.nfd-onboarding-site-type-options .nfd-features-select__feature .nfd-features-select__feature-input:checked + .nfd-label .nfd-features-select__feature-content {
63-
background-color: #EAF4FB !important;
64-
}
65-
` }
66-
</style>
67-
);
68-
};
69-
70-
const SiteTypeOption = ( { option } ) => {
71-
const Icon = option.Icon;
72-
const IconSelected = option.IconSelected;
73-
74-
return (
75-
<FeaturesSelect.Feature
76-
key={ option.id }
77-
id={ option.id }
78-
name={ option.name }
79-
value={ option.value }
80-
checked={ selectedSiteType === option.value }
81-
screenReaderLabel={ option.label }
82-
onChange={ handleChange }
83-
className="nfd-w-[30%] nfd-flex-grow [&>label]:nfd-h-full [&>label]:nfd-flex mobile:nfd-w-full"
84-
>
85-
<div className="nfd-flex nfd-flex-col nfd-self-stretch nfd-gap-1 nfd-text-left">
86-
{ selectedSiteType === option.value ? <IconSelected className="nfd-h-6 nfd-w-6 nfd-text-primary nfd-mb-1" /> : <Icon className="nfd-h-6 nfd-w-6 nfd-text-primary nfd-mb-1" /> }
87-
<Title as="h4" className="nfd-text-sm nfd-font-semibold">{ option.label }</Title>
88-
<p className="nfd-text-sm">{ option.description }</p>
89-
</div>
90-
</FeaturesSelect.Feature>
91-
);
92-
};
93-
9433
return (
95-
<div className="nfd-onboarding-site-type-options nfd-pb-7 nfd-border-b">
96-
{ getCustomStyles() }
97-
<Label
34+
<div className="nfd-onboarding-site-type-options nfd-w-1/2 mobile:nfd-w-full">
35+
<SelectField
9836
label={ __( 'Site Type', 'wp-module-onboarding' ) }
99-
required={ true }
100-
requiredIndicator={ true }
101-
className="nfd-mb-2 nfd-block"
37+
labelProps={ {
38+
required: true,
39+
requiredIndicator: true,
40+
} }
41+
options={ siteTypeOptions }
42+
onChange={ handleChange }
43+
value={ selectedSiteType || '' }
44+
selectedLabel={ getSelectedLabel( selectedSiteType ) }
45+
className={ classNames(
46+
! selectedSiteType && '[&_button>span]:nfd-text-gray-500',
47+
) }
10248
/>
103-
<FeaturesSelect
104-
behavior="radio"
105-
className="nfd-flex mobile:nfd-flex-col"
106-
>
107-
{ siteTypeOptions.map( ( option ) => <SiteTypeOption key={ option.id } option={ option } /> ) }
108-
</FeaturesSelect>
10949
</div>
11050
);
11151
};

0 commit comments

Comments
 (0)