Skip to content

Commit

Permalink
Merge branch 'trunk' into PRESS2-1679-bugfix-regenerate-version-namin…
Browse files Browse the repository at this point in the history
…g-tab-hover
  • Loading branch information
ajayadav09 committed Feb 21, 2024
2 parents a876d39 + 693a7a6 commit 575b3b2
Show file tree
Hide file tree
Showing 33 changed files with 18,450 additions and 187 deletions.
18,142 changes: 18,142 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

70 changes: 11 additions & 59 deletions src/OnboardingSPA/components/CardWithOptions/index.js
Original file line number Diff line number Diff line change
@@ -1,74 +1,26 @@
import { memo } from '@wordpress/element';
import { Icon, chevronRight } from '@wordpress/icons';
import OptionWithHeadingSubHeading from '../OptionWithHeadingSubHeading';

const CardWithOptions = ( { title, options, skip, callback } ) => {
const buildOptions = () => {
const CardWithOptions = ( { title, options, selection, callback } ) => {
const buildCardOptions = () => {
return options.map( ( data, idx ) => {
return (
<div
<OptionWithHeadingSubHeading
key={ idx }
role="button"
tabIndex={ 0 }
className={ 'nfd-sg-card__data__option' }
onClick={ () => {
if ( callback && typeof callback === 'function' ) {
callback( idx + 1 );
}
} }
onKeyDown={ () => {
if ( callback && typeof callback === 'function' ) {
callback( idx + 1 );
}
} }
>
<div className={ 'nfd-sg-card__data__option__wrapper' }>
<div className={ 'nfd-sg-card__data__option__left' }>
<div
className={
'nfd-sg-card__data__option__left_top'
}
>
{ data.title }
</div>
<div
className={
'nfd-sg-card__data__option__left_bottom'
}
>
{ data.desc }
</div>
</div>
<Icon
className={ 'nfd-sg-card__data__option__right' }
icon={ chevronRight }
/>
</div>
</div>
idx={ idx }
title={ data.title }
desc={ data.desc }
isSelected={ data.key === selection }
callback={ callback }
/>
);
} );
};

return (
<div className={ 'nfd-sg-card' }>
<div className={ 'nfd-sg-card__title' }>{ title }</div>
<div className={ 'nfd-sg-card__data' }>{ buildOptions() }</div>
<div
role="button"
tabIndex={ 0 }
className={ 'nfd-sg-card__skip' }
onClick={ () => {
if ( callback && typeof callback === 'function' ) {
callback( -1 );
}
} }
onKeyDown={ () => {
if ( callback && typeof callback === 'function' ) {
callback( -1 );
}
} }
>
{ skip }
</div>
<div className={ 'nfd-sg-card__data' }>{ buildCardOptions() }</div>
</div>
);
};
Expand Down
59 changes: 0 additions & 59 deletions src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,64 +28,5 @@ $background-color: var(--nfd-onboarding-card-background);

&__data {
margin: 12px;

&__option {

&__wrapper {
display: flex;
cursor: pointer;
margin: 16px 4px;
align-items: center;
border-radius: 8px;
padding: 16px 12px 16px 12px;
justify-content: space-between;
transition: background-color 400ms ease-in-out;

&:hover {
background-color: var(--nfd-onboarding-hover);
}
}

&:not(:last-child) {
border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
}

&__left_top {
color: var(--nfd-onboarding-primary);
font-size: 15px;
font-weight: 500;
margin-bottom: 7px;
line-height: 24px;
}

&__left_bottom {
color: rgba(var(--nfd-onboarding-primary-rgb), 0.7);

font-size: 14px;
font-weight: 300;
}

&__right {
fill: var(--nfd-onboarding-primary);
transition: all 200ms ease-in-out;

&:hover {
transform: scale(1.1);
}
}
}
}

&__skip {
cursor: pointer;
text-align: end;
margin: 0 20px 6px 20px;
transition: color 200ms ease-in-out;
color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);
font-weight: 500;

&:hover {
color: var(--nfd-onboarding-primary);
}
}
}
3 changes: 3 additions & 0 deletions src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ const NavPrimary = () => {
<div className="nfd-onboarding-drawer__panel-menu">
<ul className="nfd-onboarding-drawer__panel-routes">
{ topSteps.map( ( step ) => {
if ( false === step.drawerNavigation ) {
return false;
}
return (
<Tooltip
key={ step.path }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,10 @@
text-overflow: ellipsis;
text-wrap: nowrap;
overflow: hidden;

@media (max-width: #{ ($break-mobile) }) {
width: 150px;
}
}
}

Expand Down
11 changes: 7 additions & 4 deletions src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
import { memo, useEffect, useState } from '@wordpress/element';
import { store as nfdOnboardingStore } from '../../../store';

const SiteGenLoader = ( { autoNavigate = false } ) => {
const SiteGenLoader = ( { customNavPercentage, watcher = null } ) => {
let statusIdx = 0;
const content = getContents();
const navigate = useNavigate();
Expand Down Expand Up @@ -41,12 +41,15 @@ const SiteGenLoader = ( { autoNavigate = false } ) => {
}, [ currentData?.sitegen?.siteGenMetaStatus?.currentStatus ] );

useEffect( () => {
if ( percentage === 100 ) {
if ( nextStep && autoNavigate ) {
if ( percentage === customNavPercentage ) {
if ( nextStep ) {
if ( watcher !== null && watcher === false ) {
return;
}
navigate( nextStep.path );
}
}
}, [ percentage ] );
}, [ percentage, watcher ] );

return (
<div className={ 'nfd-sg-loader' }>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,25 @@ const SiteGen = () => {
}, [ newfoldBrand ] );
const location = useLocation();

const { currentData, initialize, pluginInstallHash, siteGenErrorStatus } =
useSelect( ( select ) => {
return {
currentData:
select( nfdOnboardingStore ).getCurrentOnboardingData(),
initialize: select( nfdOnboardingStore ).getInitialize(),
pluginInstallHash:
select( nfdOnboardingStore ).getPluginInstallHash(),
siteGenErrorStatus:
select( nfdOnboardingStore ).getSiteGenErrorStatus(),
};
} );
const {
currentData,
initialize,
pluginInstallHash,
siteGenErrorStatus,
interactionDisabled,
} = useSelect( ( select ) => {
return {
currentData:
select( nfdOnboardingStore ).getCurrentOnboardingData(),
initialize: select( nfdOnboardingStore ).getInitialize(),
pluginInstallHash:
select( nfdOnboardingStore ).getPluginInstallHash(),
siteGenErrorStatus:
select( nfdOnboardingStore ).getSiteGenErrorStatus(),
interactionDisabled:
select( nfdOnboardingStore ).getInteractionDisabled(),
};
} );

const { setCurrentOnboardingData, updateSiteGenErrorStatus } =
useDispatch( nfdOnboardingStore );
Expand Down Expand Up @@ -181,7 +188,10 @@ const SiteGen = () => {
}, [ location.pathname ] );

useEffect( () => {
if ( prevSiteGenErrorStatus.current === true && siteGenErrorStatus === false ) {
if (
prevSiteGenErrorStatus.current === true &&
siteGenErrorStatus === false
) {
generateSiteGenData();
syncStoreToDB();
}
Expand All @@ -205,6 +215,7 @@ const SiteGen = () => {
content={ <Content /> }
sidebar={ <Sidebar /> }
footer={ <Footer /> }
interactionDisabled={ interactionDisabled }
/>
</ThemeProvider>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ function NewfoldInterfaceSkeleton(
labels,
className,
shortcuts,
interactionDisabled,
},
ref
) {
Expand Down Expand Up @@ -182,6 +183,9 @@ function NewfoldInterfaceSkeleton(
{ footer }
</div>
) }
{ interactionDisabled && (
<div className="nfd-interface-interface-skeleton__overlay--disabled"></div>
) }
</div>
);
}
Expand Down
16 changes: 15 additions & 1 deletion src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,28 @@ html.nfd-interface-interface-skeleton__html-container {
top: 0;
}
}

&__overlay {
// z-index: to display over sidebar.
&--disabled {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(var(--nfd-onboarding-secondary-rgb), 0.3);
cursor: not-allowed;
z-index: 1000001;
}
}
}

.nfd-interface-interface-skeleton__editor {
display: flex;
flex-direction: column;
flex: 0 1 100%;
overflow: hidden;
position: relative;
}

@include editor-left(".nfd-interface-interface-skeleton");
Expand Down Expand Up @@ -197,4 +212,3 @@ html.nfd-interface-interface-skeleton__html-container {
}
}
}

59 changes: 59 additions & 0 deletions src/OnboardingSPA/components/OptionWithHeadingSubHeading/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import classNames from 'classnames';
import { memo } from '@wordpress/element';
import { Icon, chevronRight } from '@wordpress/icons';

const OptionWithHeadingSubHeading = ( {
idx,
title,
desc,
isSelected,
callback,
} ) => {
return (
<div
key={ idx }
role="button"
tabIndex={ 0 }
className={ 'nfd__option_heading_subheading' }
onClick={ () => {
if ( callback && typeof callback === 'function' ) {
callback( idx + 1 );
}
} }
onKeyDown={ () => {
if ( callback && typeof callback === 'function' ) {
callback( idx + 1 );
}
} }
>
<div
className={ classNames(
'nfd__option_heading_subheading__wrapper',
isSelected &&
'nfd__option_heading_subheading__wrapper--selected'
) }
>
<div className={ 'nfd__option_heading_subheading__left' }>
<div
className={ 'nfd__option_heading_subheading__left_top' }
>
{ title }
</div>
<div
className={
'nfd__option_heading_subheading__left_bottom'
}
>
{ desc }
</div>
</div>
<Icon
className={ 'nfd__option_heading_subheading__right' }
icon={ chevronRight }
/>
</div>
</div>
);
};

export default memo( OptionWithHeadingSubHeading );
Loading

0 comments on commit 575b3b2

Please sign in to comment.