Skip to content

Commit

Permalink
Initial changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@arunshenoy99
arunshenoy99 committed Dec 3, 2023
1 parent 8c41d43 commit 4f16123
Show file tree
Hide file tree
Showing 20 changed files with 598 additions and 10 deletions.
103 changes: 103 additions & 0 deletions src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import { Icon, search } from '@wordpress/icons';
import { LivePreview } from '..';
import favorite from '../../../static/icons/sitegen/favorite.svg';

const LivePreviewSiteGenCard = ( {
className = 'nfd-onboarding-live-preview--sitegen-card',
slug,
title,
blockGrammer,
styling,
isFavorite = false,
viewportWidth,
previewSettings,
skeletonLoadingTime = 2500,
onFavorite,
onRegenerate,
onPreview,
} ) => {
const handleFavorite = ( slug ) => {

Check failure on line 19 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

'slug' is already declared in the upper scope on line 7 column 2
if ( typeof onFavorite === 'function' ) {
return onFavorite( slug );
}

return false;
};

const handleRegenerate = ( slug ) => {

Check failure on line 27 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

'slug' is already declared in the upper scope on line 7 column 2
if ( typeof onRegenerate === 'function' ) {
return onRegenerate( slug );
}

return false;
};

const handlePreview = () => {
if ( typeof onPreview === 'function' ) {
return onPreview( slug );
}

return false;
};
return (
<div className={ className }>
<div className={ `${ className }__live-preview-container` }>
<LivePreview
styling={ styling }
blockGrammer={ blockGrammer }
viewportWidth={ viewportWidth }
previewSettings={ previewSettings }
skeletonLoadingTime={ skeletonLoadingTime }
/>
<div

Check failure on line 52 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

Visible, non-interactive elements with click handlers must have at least one keyboard listener

Check failure on line 52 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
className={ `${ className }__live-preview-container__overlay` }
onClick={ () => handlePreview( slug ) }
>
<div
className={ `${ className }__live-preview-container__overlay__preview-button` }
>
<Icon
icon={ search }
className={ `${ className }__live-preview-container__overlay__preview-button__icon` }
></Icon>
<p
className={ `${ className }__live-preview-container__overlay__preview-button__text` }
>
Preview
</p>
</div>
</div>
</div>
<div className={ `${ className }__buttons` }>
<div className={ `${ className }__buttons__favorite` }>
<img

Check failure on line 73 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images

Check failure on line 73 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

Visible, non-interactive elements with click handlers must have at least one keyboard listener

Check failure on line 73 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

Non-interactive elements should not be assigned mouse or keyboard event listeners
src={ favorite }
className={ `${ className }__buttons__favorite__icon ${
isFavorite &&
`${ className }__buttons__favorite__icon__fill`
}` }
onClick={ () => handleFavorite( slug ) }
/>
<div
className={ `${ className }__buttons__favorite__text` }
>
{ title }
</div>
</div>
<div className={ `${ className }__buttons__regenerate` }>
<div

Check failure on line 88 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

Visible, non-interactive elements with click handlers must have at least one keyboard listener

Check failure on line 88 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
className={ `${ className }__buttons__regenerate__icon` }
onClick={ () => handleRegenerate( slug ) }
></div>
<div
className={ `${ className }__buttons__regenerate__text` }
>
Regenerate
</div>
</div>
</div>
</div>
);
};

export default LivePreviewSiteGenCard;
117 changes: 117 additions & 0 deletions src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
.nfd-onboarding-live-preview {
&--sitegen-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 24px;
width: 100%;
&__live-preview-container {
position: relative;
width: 90%;
overflow: hidden;
align-items: center;
border-radius: 8px;

&:hover {
cursor: pointer;
}

&__overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
z-index: 2;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0,0,0, 1);
display: flex;
align-items: center;
justify-content: center;

&__preview-button {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 30px;
z-index: 9999;
border-radius: 12px;
background-color: var(--nfd-onboarding-primary);
opacity: 1;
&__icon {
fill: var(--nfd-onboarding-secondary);
font-size: 20px;
height: 20px;
width: 20px;
text-align: center;
}
}

&:hover {
cursor: pointer;
opacity: 0.74;
}
}

.live-preview {

&__container {

&-custom {
width: 100%;
overflow: hidden;
height: 300px;
}
}
}

}

&__buttons {
width: 90%;
color: var(--nfd-onboarding-primary);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 16px;
&__favorite {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
&__icon {
width: 20px;
height: 20px;
margin-right: 12px;
cursor: pointer;

&__fill {
background-color: var(--nfd-onboarding-favorite-fill);
}

}

&__text {}
}

&__regenerate {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
&__icon {
background-image: var(--sitegen-regenerate);
width: 16px;
height: 18px;
margin-right: 12px;
}
}
}
}
}
5 changes: 5 additions & 0 deletions src/OnboardingSPA/data/homepages/1.json
View file

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions src/OnboardingSPA/data/homepages/2.json
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions src/OnboardingSPA/data/homepages/3.json
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions src/OnboardingSPA/data/homepages/4.json
View file

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions src/OnboardingSPA/data/homepages/getHomepages.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import one from './1.json';
import two from './2.json';
import three from './3.json';
const getHomepages = () => {
return [one, two, three];

Check failure on line 5 in src/OnboardingSPA/data/homepages/getHomepages.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

Replace `·····return·[one,·two,·three` with `↹return·[·one,·two,·three·`
}

export default getHomepages;
3 changes: 3 additions & 0 deletions src/OnboardingSPA/static/icons/sitegen/favorite.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/OnboardingSPA/static/icons/sitegen/regenerate.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 64 additions & 0 deletions src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { Fill, Dropdown } from '@wordpress/components';
import { HEADER_CENTER, HEADER_END, HEADER_SITEGEN, HEADER_START } from '../../../../../constants';
import { Icon, chevronDown, home } from '@wordpress/icons';
import { store as nfdOnboardingStore } from '../../../../store';

import { useSelect, useDispatch } from '@wordpress/data';

import { useEffect, useState } from '@wordpress/element';

const StepSiteGenEditorHeader = () => {
const [homepage, setHomepage] = useState();

const { setCurrentOnboardingData } = useDispatch(nfdOnboardingStore);
const { currentData } = useSelect((select) => {
return {
currentData: select(nfdOnboardingStore).getCurrentOnboardingData(),
}
})

const handleFavorite = () => {
homepage.favorite = ! homepage.favorite;
currentData.sitegen.homepages.data[homepage.slug] = homepage;
setCurrentOnboardingData( currentData );
}

useEffect(() => {
if ( currentData.sitegen.homepages.active ) {

setHomepage(currentData.sitegen.homepages.active)
}
}, [])
return <>
<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_START }` }>
<div className='nfd-onboarding-header--sitegen__editor__start'>
<button className='nfd-onboarding-header--sitegen__editor__start__regenerate'>
<div className={`nfd-onboarding-header--sitegen__editor__start__regenerate__icon`}></div>
<div className={`nfd-onboarding-header--sitegen__editor__start__regenerate__text`}>Regenerate</div>
</button>
</div>
</Fill>
<Fill name={`${HEADER_SITEGEN}/${HEADER_CENTER}`}>
<div className='nfd-onboarding-header--sitegen__editor__center'>
<div className='nfd-onboarding-header--sitegen__editor__center__icon'></div>
<Dropdown className='nfd-onboarding-header--sitegen__editor__center__dropdown'
renderToggle={( { isOpen, onToggle } ) => {
return <>
<p className={`nfd-onboarding-header--sitegen__editor__center__dropdown__favorite-icon ${homepage.favorite && 'nfd-onboarding-header--sitegen__editor__center__dropdown__favorite-icon__fill'}`} onClick={handleFavorite}></p>
<div className='nfd-onboarding-header--sitegen__editor__center__dropdown__info' onClick={onToggle}>
<p className='nfd-onboarding-header--sitegen__editor__center__dropdown__info__text'>{homepage.title}</p>
<Icon className='nfd-onboarding-header--sitegen__editor__center__dropdown__info__down-icon' icon={chevronDown} />
</div>
</>

}}
renderContent={() => <div>Hello World</div>}
/>
</div>
</Fill>
<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_END }` }>
</Fill>
</>
}

export default StepSiteGenEditorHeader;
68 changes: 68 additions & 0 deletions src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
.nfd-onboarding-header {
&--sitegen{
&__editor {
&__start {
&__regenerate {
margin-left: 20px;
height: 36px;
color: var(--nfd-onboarding-primary);
background-color: var(--nfd-onboarding-preview-favorite-background);
border: none;
:hover {
cursor: pointer;
}
&__icon {
background-image: var(--sitegen-regenerate);
width: 16px;
height: 18px;
}
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
width: 130px;
}
}

&__center {
&__dropdown {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;

color: var(--nfd-onboarding-primary);

&__favorite-icon {
background-image: var(--sitegen-favorite);
height: 20px;
width: 20px;
margin-right: 15px;
cursor: pointer;

&__fill {
background-color: var(--nfd-onboarding-favorite-fill);
}
}

&__info {
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
&__text {
font-size: 18px;
margin-right: 15px;
}

&__down-icon {
fill: var(--nfd-onboarding-primary);
width: 20px;
height: 20px;
}
}
}
}
}
}
}
Loading

0 comments on commit 4f16123

Please sign in to comment.