Skip to content

Commit

Permalink
added fadein affect for the sitetype steps
Browse files Browse the repository at this point in the history
  • Loading branch information
@abhijitb
abhijitb committed Jan 5, 2023
1 parent de8bdd2 commit 6c85151
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 113 deletions.
111 changes: 57 additions & 54 deletions src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import NavCardButton from '../../../../../components/Button/NavCardButton';
import NeedHelpTag from '../../../../../components/NeedHelpTag';
import content from '../content.json';
import { translations } from '../../../../../utils/locales/translations';
import StepStateHandler from '../../../../../components/StateHandlers/StepStateHandler';

const StepPrimarySetup = () => {
const {
Expand Down Expand Up @@ -94,63 +95,65 @@ const StepPrimarySetup = () => {
) }
/>
</div>

<div className="nfd-setup-primary-categories">
{ content.categories.map( ( item, idx ) => {
return (
<div
key={ item?.name }
className={ `${
clickedIndex === idx ||
item.name === selectedPrimaryCategoryInStore
? 'chosenPrimaryCategory '
: ''
}nfd-card-category` }
onClick={ ( e ) => handleCategoryClick( idx ) }
>
<div className="nfd-card-category-wrapper">
<span
className="icon"
style={ {
backgroundImage:
clickedIndex !== idx &&
item.name !==
selectedPrimaryCategoryInStore
? item?.icon
: item?.iconWhite,
} }
></span>
<span className="categName">
{ item?.name }
</span>
<StepStateHandler watch={ content.categories }>
<div className="nfd-setup-primary-categories">
{ content.categories.map( ( item, idx ) => {
return (
<div
key={ item?.name }
className={ `${
clickedIndex === idx ||
item.name === selectedPrimaryCategoryInStore
? 'chosenPrimaryCategory '
: ''
}nfd-card-category` }
onClick={ ( e ) => handleCategoryClick( idx ) }
>
<div className="nfd-card-category-wrapper">
<span
className="icon"
style={ {
backgroundImage:
clickedIndex !== idx &&
item.name !==
selectedPrimaryCategoryInStore
? item?.icon
: item?.iconWhite,
} }
></span>
<span className="categName">
{ item?.name }
</span>
</div>
</div>
</div>
);
} ) }
</div>

<div className="nfd-setup-primary-second">
<div className="nfd-setup-primary-second-top">
<p className="blackText">or tell us here:</p>
<input
type="text"
onChange={ ( e ) => categoryInput( e ) }
className="tellUsInput"
placeholder={ sprintf(
__(
content.placeholderSiteTypeInput,
'wp-module-onboarding'
),
translations( 'site' )
) }
value={ inputCategVal }
/>
);
} ) }
</div>
<div className="nfd-setup-primary-second-bottom">
<NavCardButton text={ __( content.buttonText ) } />
<NeedHelpTag />

<div className="nfd-setup-primary-second">
<div className="nfd-setup-primary-second-top">
<p className="blackText">or tell us here:</p>
<input
type="text"
onChange={ ( e ) => categoryInput( e ) }
className="tellUsInput"
placeholder={ sprintf(
__(
content.placeholderSiteTypeInput,
'wp-module-onboarding'
),
translations( 'site' )
) }
value={ inputCategVal }
/>
</div>
</div>
</div>
</StepStateHandler>
<NavCardButton
text={ __( content.buttonText ) }
disabled={ content.categories === null}
/>
<NeedHelpTag />
</NewfoldLargeCard>
</CommonLayout>
);
Expand Down
123 changes: 64 additions & 59 deletions src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import NavCardButton from '../../../../../components/Button/NavCardButton';
import NeedHelpTag from '../../../../../components/NeedHelpTag';
import content from '../content.json';
import { translations } from '../../../../../utils/locales/translations';
import StepStateHandler from '../../../../../components/StateHandlers/StepStateHandler';

const StepPrimarySetup = () => {
const {
Expand Down Expand Up @@ -101,71 +102,75 @@ const StepPrimarySetup = () => {
) }
/>
</div>

<div className="nfd-setup-secondary-categories">
<div className="nfd-card-category-wrapper">
<div className="category-scrolling-wrapper">
<span
className="icon"
style={ {
backgroundImage: categoriesArray[ 0 ].icon,
} }
/>
<p className="categName">
{ ' ' }
{ categoriesArray[ 0 ].name }
</p>
<StepStateHandler watch={ categoriesArray[ 0 ]?.subCategories }>
<div className="nfd-setup-secondary-categories">
<div className="nfd-card-category-wrapper">
<div className="category-scrolling-wrapper">
<span
className="icon"
style={ {
backgroundImage: categoriesArray[ 0 ].icon,
} }
/>
<p className="categName">
{ ' ' }
{ categoriesArray[ 0 ].name }
</p>
</div>
</div>
</div>

<div className="subCategoriesSection">
{ categoriesArray[ 0 ]?.subCategories?.map(
( item, idx ) => {
return (
<span
key={ item }
onClick={ ( e ) =>
handleCategoryClick( idx )
}
className={ `${
clickedIndex === idx ||
item === selectedCategoryInStore
? 'chosenSecondaryCategory '
: ''
}nfd-card-category` }
>
{ item }
</span>
);
}
) }
</div>
</div>

<div className="nfd-setup-primary-second">
<div className="nfd-setup-primary-second-top">
<div className="blackText">
{ __(
content.tellusHereText,
'wp-module-onboarding'
<div className="subCategoriesSection">
{ categoriesArray[ 0 ]?.subCategories?.map(
( item, idx ) => {
return (
<span
key={ item }
onClick={ ( e ) =>
handleCategoryClick( idx )
}
className={ `${
clickedIndex === idx ||
item === selectedCategoryInStore
? 'chosenSecondaryCategory '
: ''
}nfd-card-category` }
>
{ item }
</span>
);
}
) }
</div>
<input
type="text"
onChange={ ( e ) => categoryInput( e ) }
className="tellUsInput"
placeholder={ sprintf(
__(
content.placeholderSiteTypeInput,
</div>

<div className="nfd-setup-primary-second">
<div className="nfd-setup-primary-second-top">
<div className="blackText">
{ __(
content.tellusHereText,
'wp-module-onboarding'
),
translations( 'site' )
) }
value={ inputCategVal }
/>
) }
</div>
<input
type="text"
onChange={ ( e ) => categoryInput( e ) }
className="tellUsInput"
placeholder={ sprintf(
__(
content.placeholderSiteTypeInput,
'wp-module-onboarding'
),
translations( 'site' )
) }
value={ inputCategVal }
/>
</div>
</div>
</div>
<NavCardButton text={ __( content.buttonText ) } />
</StepStateHandler>
<NavCardButton
text={ __( content.buttonText ) }
disabled={ categoriesArray[ 0 ]?.subCategories === null }
/>
<NeedHelpTag />
</NewfoldLargeCard>
</CommonLayout>
Expand Down

0 comments on commit 6c85151

Please sign in to comment.