From 6f7a110193f74cfc44596f8649a8b0d5e03f9256 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 16 Jan 2024 01:38:44 +0530 Subject: [PATCH 1/2] Sitegen Minor Fixes 2 --- .../CardWithOptions/stylesheet.scss | 2 +- .../Heading/AIHeading/stylesheet.scss | 4 +- .../steps/SiteGen/SiteLogo/step.js | 2 +- .../steps/SiteGen/SocialMedia/contents.js | 2 +- .../steps/SiteGen/SocialMedia/stylesheet.scss | 2 +- src/OnboardingSPA/steps/TheFork/contents.js | 2 +- .../site-logo.cy.js | 103 +++++++++--------- 7 files changed, 58 insertions(+), 59 deletions(-) diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss index cee7bd97f..65eeab356 100644 --- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss +++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss @@ -34,7 +34,7 @@ $background-color: var(--nfd-onboarding-card-background); margin: 16px 4px; align-items: center; border-radius: 4px 4px 0 0; - padding: 16px 12px 20px 12px; + padding: 16px 12px 16px 12px; justify-content: space-between; transition: background-color 400ms ease-in-out; diff --git a/src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss b/src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss index 5efc1b434..e503ad829 100644 --- a/src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss +++ b/src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss @@ -2,12 +2,12 @@ width: 100%; display: flex; - margin-bottom: 20px; + margin: 16px; align-items: center; &--icon { width: 50px; - margin: 4px; + margin-right: 4px; height: 50px; background-size: 200%; background-position: center; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/step.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/step.js index ca6a0f0c2..0a1b940d3 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/step.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/step.js @@ -6,7 +6,7 @@ import { Step } from '../../../data/models/Step'; const SiteGenSiteLogo = lazy( () => import( './index' ) ); export const stepSiteGenSiteLogo = new Step( { - path: '/sitgen/step/site-logo', + path: '/sitegen/step/site-logo', title: __( 'Page Layouts', 'wp-module-onboarding' ), Component: SiteGenSiteLogo, icon: copy, diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js b/src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js index 0db9b1e39..e92e99019 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js @@ -11,7 +11,7 @@ const getContents = () => { 'wp-module-onboarding' ), facebookDesc: __( - 'By connecting a Facebook profile, we can fetch relevant data to increase the accuracy of your Al generated site.', + 'By connecting a Facebook profile, we can fetch relevant data to increase the accuracy of your AI generated site.', 'wp-module-onboarding' ), facebookButton: __( 'Connect Facebook', 'wp-module-onboarding' ), diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss index 43901277e..915ab88cd 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss @@ -7,7 +7,7 @@ &__container { display: flex; - align-items: center; + width: 40vw; flex-direction: column; justify-content: center; diff --git a/src/OnboardingSPA/steps/TheFork/contents.js b/src/OnboardingSPA/steps/TheFork/contents.js index e4a75f776..b4fee1673 100644 --- a/src/OnboardingSPA/steps/TheFork/contents.js +++ b/src/OnboardingSPA/steps/TheFork/contents.js @@ -20,7 +20,7 @@ const getContents = () => { { title: __( ' Website Creator', 'wp-module-onboarding' ), subtitle: __( - 'Custom Al generated content & design.', + 'Custom AI generated content & design.', 'wp-module-onboarding' ), span: __( 'AI', 'wp-module-onboarding' ), diff --git a/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/site-logo.cy.js b/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/site-logo.cy.js index eb669a901..1b151b9a2 100644 --- a/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/site-logo.cy.js +++ b/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/site-logo.cy.js @@ -1,70 +1,69 @@ // -import { AdminBarCheck, BackButtonCheck, DarkBGCheck, DisabledNextButton, LightBGChcek, ProgressBarCheck, SkipButtonCheck } from "../wp-module-support/siteGen.cy"; +import { AdminBarCheck, BackButtonCheck, DarkBGCheck, DisabledNextButton, LightBGChcek, ProgressBarCheck, SkipButtonCheck } from '../wp-module-support/siteGen.cy'; -describe( 'SiteGen Site Logo Step', function () { +describe( 'SiteGen Site Logo Step', function() { before( () => { cy.visit( - 'wp-admin/?page=nfd-onboarding#/sitgen/step/site-logo' + 'wp-admin/?page=nfd-onboarding#/sitegen/step/site-logo' ); } ); - it( 'Check for the header admin bar', () => { - AdminBarCheck(); - } ); + it( 'Check for the header admin bar', () => { + AdminBarCheck(); + } ); - it( 'Check for the existing dark background', () => { + it( 'Check for the existing dark background', () => { DarkBGCheck(); } ); - it( 'Check for the light background', () => { - LightBGChcek(); - } ); - - it( 'Check the Progress Bar Value', () => { - ProgressBarCheck('33.3333%'); - }); + it( 'Check for the light background', () => { + LightBGChcek(); + } ); - it( 'Check for back button and go back', () => { - BackButtonCheck('sitgen/step/site-logo'); - } ); + it( 'Check the Progress Bar Value', () => { + ProgressBarCheck( '33.3333%' ); + } ); - it( 'Check if the heading is visible', () => { - cy.get('.ai-heading').should('be.visible'); - } ); + it( 'Check for back button and go back', () => { + BackButtonCheck( 'sitegen/step/site-logo' ); + } ); - it( 'Check for the skip button and click', () => { - SkipButtonCheck('sitgen/step/site-logo'); - } ); + it( 'Check if the heading is visible', () => { + cy.get( '.ai-heading' ).should( 'be.visible' ); + } ); - it( 'Check if the Next Button is disabled when there is no logo', () => { - DisabledNextButton(); - } ); + it( 'Check for the skip button and click', () => { + SkipButtonCheck( 'sitegen/step/site-logo' ); + } ); - it( 'Check if Image gets uploaded and Next button is enabled', () => { - const sampleLogoPath = `vendor/newfold-labs/wp-module-onboarding/tests/cypress/fixtures/image.png`; - const LogoPreviewClass = '.nfd-onboarding-image-uploader--with-text__site_logo__preview'; - if( - cy.get('.nfd-onboarding-button--site-gen-next--disabled') - .should('be.visible') - ){ - cy.get(LogoPreviewClass) - .should('not.exist'); - }; - cy.get('input[type=file]', { timeout: 10000 }) - .should('exist') - .selectFile( sampleLogoPath , {force: true} ) - .then( () => { - cy.wait( 1000 ); - cy.get(LogoPreviewClass, { timeout: 10000 } ).should( 'be.visible' ); - cy.get( '.nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button' ) - .scrollIntoView() - .should( 'be.visible' ); - } ); - cy.get('.nfd-onboarding-button--site-gen-next') - .should('not.be.disabled') - .click(); - cy.url().should('not.contain', 'sitgen/step/site-logo'); - }); + it( 'Check if the Next Button is disabled when there is no logo', () => { + DisabledNextButton(); + } ); -}); + it( 'Check if Image gets uploaded and Next button is enabled', () => { + const sampleLogoPath = `vendor/newfold-labs/wp-module-onboarding/tests/cypress/fixtures/image.png`; + const LogoPreviewClass = '.nfd-onboarding-image-uploader--with-text__site_logo__preview'; + if ( + cy.get( '.nfd-onboarding-button--site-gen-next--disabled' ) + .should( 'be.visible' ) + ) { + cy.get( LogoPreviewClass ) + .should( 'not.exist' ); + } + cy.get( 'input[type=file]', { timeout: 10000 } ) + .should( 'exist' ) + .selectFile( sampleLogoPath, { force: true } ) + .then( () => { + cy.wait( 1000 ); + cy.get( LogoPreviewClass, { timeout: 10000 } ).should( 'be.visible' ); + cy.get( '.nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button' ) + .scrollIntoView() + .should( 'be.visible' ); + } ); + cy.get( '.nfd-onboarding-button--site-gen-next' ) + .should( 'not.be.disabled' ) + .click(); + cy.url().should( 'not.contain', 'sitegen/step/site-logo' ); + } ); +} ); From d984c30b2afa981f55bce94ccfbbc3773fc8e3d4 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 17 Jan 2024 00:23:35 +0530 Subject: [PATCH 2/2] Reduce footer width on larger screens --- src/OnboardingSPA/components/Footer/stylesheet.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Footer/stylesheet.scss b/src/OnboardingSPA/components/Footer/stylesheet.scss index 3a6c4dad3..ececa03a0 100644 --- a/src/OnboardingSPA/components/Footer/stylesheet.scss +++ b/src/OnboardingSPA/components/Footer/stylesheet.scss @@ -8,7 +8,7 @@ flex-direction: row; height: auto; - width: 100%; + width: 20%; border: none; &__end { @@ -30,6 +30,7 @@ } @media (max-width: #{ ($break-small) }) { + width: 100%; backdrop-filter: blur(2px); background: rgba(var(--nfd-onboarding-secondary-rgb), 0.5); border-top: 1px solid rgba(var(--nfd-onboarding-primary-rgb), 0.25);