From 5aec6fdade55662599d98bbba06c3ff286c169e6 Mon Sep 17 00:00:00 2001 From: wpalani Date: Mon, 4 Dec 2023 16:23:56 -0700 Subject: [PATCH] Use Newfold UI Page/Container components --- package-lock.json | 14 +- package.json | 2 +- src/app/components/webinars-banner/index.js | 11 +- src/app/pages/ecommerce/page.js | 2 +- src/app/pages/help/index.js | 22 ++-- src/app/pages/help/stylesheet.scss | 17 --- src/app/pages/home/index.js | 12 +- src/app/pages/home/stylesheet.scss | 123 ------------------ src/app/pages/marketplace/index.js | 17 +-- src/app/pages/performance/index.js | 27 ++-- src/app/pages/settings/automaticUpdates.js | 7 +- src/app/pages/settings/comingSoon.js | 7 +- src/app/pages/settings/commentSettings.js | 12 +- src/app/pages/settings/contentSettings.js | 7 +- src/app/pages/settings/index.js | 39 +++--- src/app/pages/staging/index.js | 16 --- src/app/util/hooks/useContainerBlockTarget.js | 43 ++++++ src/app/util/hooks/useHandlePageLoad.js | 4 + 18 files changed, 125 insertions(+), 257 deletions(-) delete mode 100644 src/app/pages/help/stylesheet.scss delete mode 100644 src/app/pages/home/stylesheet.scss create mode 100644 src/app/util/hooks/useContainerBlockTarget.js diff --git a/package-lock.json b/package-lock.json index d901c298c..221365c94 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@heroicons/react": "^2.0.18", "@newfold-labs/wp-module-ecommerce": "^1.3.9", "@newfold-labs/wp-module-runtime": "^1.0.7", - "@newfold/ui-component-library": "^1.0.0", + "@newfold/ui-component-library": "^1.0.1", "@reduxjs/toolkit": "^1.9.6", "@wordpress/compose": "^6.22.0", "@wordpress/dom-ready": "^3.45.0", @@ -3219,9 +3219,9 @@ } }, "node_modules/@newfold/ui-component-library": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@newfold/ui-component-library/-/ui-component-library-1.0.0.tgz", - "integrity": "sha512-zEP2oe+WHu1VJ4B34tKb+8cOdSIefSZ5sappZHLJtA3DM+LhP4NHoVvLt34YYNdm9Zq1mL/M5PH9uqCbMQZFOg==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@newfold/ui-component-library/-/ui-component-library-1.0.1.tgz", + "integrity": "sha512-p/nCSWcVNs7hOzUJNQXbyiQe82WAzUXbSENIvMX326FeLyETo0AtncqNUZJxABDIVQVQONu+19uRCAqCRvZBPQ==", "dependencies": { "@headlessui/react": "^1.7.8", "@heroicons/react": "^1.0.6", @@ -25415,9 +25415,9 @@ } }, "@newfold/ui-component-library": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@newfold/ui-component-library/-/ui-component-library-1.0.0.tgz", - "integrity": "sha512-zEP2oe+WHu1VJ4B34tKb+8cOdSIefSZ5sappZHLJtA3DM+LhP4NHoVvLt34YYNdm9Zq1mL/M5PH9uqCbMQZFOg==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@newfold/ui-component-library/-/ui-component-library-1.0.1.tgz", + "integrity": "sha512-p/nCSWcVNs7hOzUJNQXbyiQe82WAzUXbSENIvMX326FeLyETo0AtncqNUZJxABDIVQVQONu+19uRCAqCRvZBPQ==", "requires": { "@headlessui/react": "^1.7.8", "@heroicons/react": "^1.0.6", diff --git a/package.json b/package.json index 740a4643a..9df9a8a87 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "@heroicons/react": "^2.0.18", "@newfold-labs/wp-module-ecommerce": "^1.3.9", "@newfold-labs/wp-module-runtime": "^1.0.7", - "@newfold/ui-component-library": "^1.0.0", + "@newfold/ui-component-library": "^1.0.1", "@reduxjs/toolkit": "^1.9.6", "@wordpress/compose": "^6.22.0", "@wordpress/dom-ready": "^3.45.0", diff --git a/src/app/components/webinars-banner/index.js b/src/app/components/webinars-banner/index.js index 0a42a4b3e..c6868a70e 100644 --- a/src/app/components/webinars-banner/index.js +++ b/src/app/components/webinars-banner/index.js @@ -1,12 +1,11 @@ import { useState, useEffect } from '@wordpress/element'; -import { Button, Title } from '@newfold/ui-component-library'; +import { Button, Container, Title } from '@newfold/ui-component-library'; import { ArrowRightIcon, CalendarIcon, ClockIcon, } from '@heroicons/react/24/outline'; import { ReactComponent as WebinarsVector } from 'App/images/webinars-vector.svg'; -import { SectionContainer, SectionContent } from 'App/components/section'; /** * A component that displays the next monthly webinar. @@ -106,8 +105,8 @@ const WebinarsBanner = () => { } return ( - - + +
@@ -173,8 +172,8 @@ const WebinarsBanner = () => {
- - + + ); }; diff --git a/src/app/pages/ecommerce/page.js b/src/app/pages/ecommerce/page.js index 21e319c14..d9122eaa2 100644 --- a/src/app/pages/ecommerce/page.js +++ b/src/app/pages/ecommerce/page.js @@ -1,11 +1,11 @@ import './styles.scss'; import { useContext } from '@wordpress/element'; import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'; +import { Page } from '@newfold/ui-component-library'; import { NewfoldECommerce } from '@newfold-labs/wp-module-ecommerce'; import '@newfold-labs/wp-module-ecommerce/bluehost.css'; import AppStore from 'App/data/store'; import { bluehostSettingsApiFetch } from 'App/util/helpers'; -import { Page } from 'App/components/page'; import { useNotification } from 'App/components/notifications'; const ECommerce = () => { diff --git a/src/app/pages/help/index.js b/src/app/pages/help/index.js index fd0961d18..b1e0db6aa 100644 --- a/src/app/pages/help/index.js +++ b/src/app/pages/help/index.js @@ -1,10 +1,10 @@ -import { Button, Card, Title } from '@newfold/ui-component-library'; -import { Page } from 'App/components/page'; import { - SectionContainer, - SectionContent, - SectionHeader, -} from 'App/components/section'; + Button, + Card, + Container, + Page, + Title, +} from '@newfold/ui-component-library'; import help from 'App/data/help'; const HelpCard = ( { item } ) => { @@ -46,17 +46,17 @@ const Help = () => { }; return ( - - + - { renderHelpCards() } - + { renderHelpCards() } + ); }; diff --git a/src/app/pages/help/stylesheet.scss b/src/app/pages/help/stylesheet.scss deleted file mode 100644 index 66ddbf4d2..000000000 --- a/src/app/pages/help/stylesheet.scss +++ /dev/null @@ -1,17 +0,0 @@ -.card-help { - text-align: center; - flex-grow: 2; - - .components-card-header, - .components-card-footer { - flex-direction: column; - justify-content: end; - } - - /* <= WP 5.8 */ - .components-card__header, - .components-card__footer { - justify-content: center; - } - -} \ No newline at end of file diff --git a/src/app/pages/home/index.js b/src/app/pages/home/index.js index 22232a333..bd7f2254c 100644 --- a/src/app/pages/home/index.js +++ b/src/app/pages/home/index.js @@ -1,6 +1,4 @@ -import './stylesheet.scss'; -import { Page } from 'App/components/page'; -import { SectionContainer, SectionContent } from 'App/components/section'; +import { Container, Page } from '@newfold/ui-component-library'; import WebinarsBanner from 'App/components/webinars-banner'; import AccountCard from './accountCard'; import HelpCard from './helpCard'; @@ -11,14 +9,14 @@ const Home = () => { - - + +
- - + + ); }; diff --git a/src/app/pages/home/stylesheet.scss b/src/app/pages/home/stylesheet.scss deleted file mode 100644 index ace83d4b9..000000000 --- a/src/app/pages/home/stylesheet.scss +++ /dev/null @@ -1,123 +0,0 @@ -.wppbh-section { - margin: 0 0 2rem; - position: relative; - - .components-card__header { - background: var(--color-off-white); - border: 1px solid var(--color-border); - flex-direction: column; - @media screen and (min-width: 1132px) { - flex-direction: row; - } - .heading { - color: var(--color-title); - font-size: 1.5rem; - margin-bottom: 0 !important; // wp core override - @media screen and (min-width: 1132px) { - margin-bottom: 24px !important; - } - } - p { - color: var(--color-text); - font-weight: 700; - margin-left: 0; - } - } - .components-card__footer { - .heading { - display: flex; - align-items: center; - svg, - .dashicons { - margin-right: 4px; - } - } - } - - - &.wppbh-section-coming-soon { - - .wppbh-section-graphic { - top: -3rem; - right: -6rem; - } - } - - &:first-of-type { // allows for better reordering and injection - margin-top: 1rem; - } -} - -.section-graphic { - position: absolute; - right: 0; - top: 2rem; - transition: all .5s ease; - z-index: 0; - display: none; - @media screen and (min-width: 882px) { - display: block; - max-width: 260px; - } - @media screen and (min-width: 1190px) { - max-width: 330px; - } - @media screen and (min-width: 1399px) { - max-width: 400px; - } - - &.reverse { - transform: rotateY(180deg); - @media(prefers-reduced-motion) { - transform: none; - } - } -} - -.wppbh-section-card { - position: relative; - z-index: 1; - - @media screen and (min-width: 882px) { - max-width: 66%; - } - - .components-card__footer { - flex-direction: column; - - .wppbh-cardlist-content { - width: 100%; - .components-heading { - display: flex; - align-items: center; - .dashicons, svg { - margin-right: 8px; - color: var(--color-primary); - fill: var(--color-primary); - } - } - @media screen and (max-width: 700px) { - text-align: center; - .components-heading { - justify-content: center; - } - } - } - - .components-button { - margin: 1rem auto; - } - - @media screen and (min-width: 700px) { - flex-direction: row; - - .wppbh-cardlist-content { - max-width: 60%; - } - - .components-button { - margin: 0; - } - } - } -} \ No newline at end of file diff --git a/src/app/pages/marketplace/index.js b/src/app/pages/marketplace/index.js index ec617adcc..02e8cf6f6 100644 --- a/src/app/pages/marketplace/index.js +++ b/src/app/pages/marketplace/index.js @@ -2,12 +2,7 @@ import apiFetch from '@wordpress/api-fetch'; import { useState, useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; import classnames from 'classnames'; -import { Page } from 'App/components/page'; -import { - SectionContainer, - SectionHeader, - SectionContent, -} from 'App/components/section'; +import { Container, Page } from '@newfold/ui-component-library'; import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; // component sourced from marketplace module import { default as NewfoldMarketplace } from '@modules/wp-module-marketplace/components/marketplace/'; @@ -44,20 +39,14 @@ const MarketplacePage = () => { NewfoldRuntime, }; - const moduleComponents = { - SectionHeader, - SectionContent, - }; - return ( - + - + ); }; diff --git a/src/app/pages/performance/index.js b/src/app/pages/performance/index.js index b5afd1e6f..74ec1795e 100644 --- a/src/app/pages/performance/index.js +++ b/src/app/pages/performance/index.js @@ -1,21 +1,15 @@ -import AppStore from '../../data/store'; -import { Page } from '../../components/page'; -import { useState, useEffect, useContext, Fragment } from '@wordpress/element'; import apiFetch from '@wordpress/api-fetch'; -import classnames from 'classnames'; +import { useState, useEffect, useContext, Fragment } from '@wordpress/element'; import { useUpdateEffect } from 'react-use'; +import classnames from 'classnames'; +import { Container, Page } from '@newfold/ui-component-library'; import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; -import { - SectionContainer, - SectionHeader, - SectionContent, - SectionSettings, -} from 'App/components/section'; -import { useNotification } from 'App/components/notifications'; +import AppStore from '../../data/store'; import { bluehostSettingsApiFetch as newfoldSettingsApiFetch, bluehostPurgeCacheApiFetch as newfoldPurgeCacheApiFetch, } from 'App/util/helpers'; +import { useNotification } from 'App/components/notifications'; import { default as NewfoldPerformance } from '@modules/wp-module-performance/components/performance/'; @@ -39,18 +33,13 @@ const PerformancePage = () => { }; const moduleComponents = { - Page, - SectionHeader, - SectionContent, - SectionSettings, - SectionContainer, Fragment, }; return ( - - + { methods={ moduleMethods } Components={ moduleComponents } /> - + ); }; diff --git a/src/app/pages/settings/automaticUpdates.js b/src/app/pages/settings/automaticUpdates.js index 0758c2fa2..cc22f220e 100644 --- a/src/app/pages/settings/automaticUpdates.js +++ b/src/app/pages/settings/automaticUpdates.js @@ -1,9 +1,8 @@ import { useState } from '@wordpress/element'; import { useUpdateEffect } from 'react-use'; -import { Alert, ToggleField } from '@newfold/ui-component-library'; +import { Alert, Container, ToggleField } from '@newfold/ui-component-library'; import AppStore from '../../data/store'; import { bluehostSettingsApiFetch } from '../../util/helpers'; -import { SectionSettings } from 'App/components/section'; import { useNotification } from 'App/components/notifications'; const AutomaticUpdatesAll = ( { setError, notify } ) => { @@ -286,7 +285,7 @@ const AutomaticUpdates = () => { const notify = useNotification(); return ( - { ) } - + ); }; diff --git a/src/app/pages/settings/comingSoon.js b/src/app/pages/settings/comingSoon.js index de0d710cd..4e4c94573 100644 --- a/src/app/pages/settings/comingSoon.js +++ b/src/app/pages/settings/comingSoon.js @@ -1,12 +1,11 @@ import { useState } from '@wordpress/element'; import { useUpdateEffect } from 'react-use'; -import { Alert, ToggleField } from '@newfold/ui-component-library'; +import { Alert, Container, ToggleField } from '@newfold/ui-component-library'; import AppStore from '../../data/store'; import { bluehostSettingsApiFetch, comingSoonAdminbarToggle, } from '../../util/helpers'; -import { SectionSettings } from 'App/components/section'; import { useNotification } from 'App/components/notifications'; const ComingSoon = () => { @@ -85,7 +84,7 @@ const ComingSoon = () => { }; return ( - { ) } - + ); }; diff --git a/src/app/pages/settings/commentSettings.js b/src/app/pages/settings/commentSettings.js index fdd66e3a5..122e1bc24 100644 --- a/src/app/pages/settings/commentSettings.js +++ b/src/app/pages/settings/commentSettings.js @@ -1,9 +1,13 @@ import { useState } from '@wordpress/element'; import { useUpdateEffect } from 'react-use'; -import { Alert, SelectField, ToggleField } from '@newfold/ui-component-library'; +import { + Alert, + Container, + SelectField, + ToggleField, +} from '@newfold/ui-component-library'; import AppStore from '../../data/store'; import { bluehostSettingsApiFetch } from '../../util/helpers'; -import { SectionSettings } from 'App/components/section'; import { useNotification } from 'App/components/notifications'; const OldPostsComments = ( { setError, notify } ) => { @@ -244,7 +248,7 @@ const CommentSettings = () => { const notify = useNotification(); return ( - { ) } - + ); }; diff --git a/src/app/pages/settings/contentSettings.js b/src/app/pages/settings/contentSettings.js index 7beb8548a..2eff0cef3 100644 --- a/src/app/pages/settings/contentSettings.js +++ b/src/app/pages/settings/contentSettings.js @@ -1,9 +1,8 @@ import { useState } from '@wordpress/element'; import { useUpdateEffect } from 'react-use'; -import { Alert, SelectField } from '@newfold/ui-component-library'; +import { Alert, Container, SelectField } from '@newfold/ui-component-library'; import AppStore from 'App/data/store'; import { bluehostSettingsApiFetch } from 'App/util/helpers'; -import { SectionSettings } from 'App/components/section'; import { useNotification } from 'App/components/notifications'; const ContentRevisions = ( { setError, notify } ) => { @@ -190,7 +189,7 @@ const ContentSettings = () => { const notify = useNotification(); return ( - { ) } - + ); }; diff --git a/src/app/pages/settings/index.js b/src/app/pages/settings/index.js index 2316d1e86..fd0e5aa93 100644 --- a/src/app/pages/settings/index.js +++ b/src/app/pages/settings/index.js @@ -1,19 +1,16 @@ +import classNames from 'classnames'; +import { Container, Page } from '@newfold/ui-component-library'; +import useContainerBlockIsTarget from 'App/util/hooks/useContainerBlockTarget'; import AutomaticUpdates from './automaticUpdates'; -import ComingSoon from './comingSoon'; import CommentSettings from './commentSettings'; +import ComingSoon from './comingSoon'; import ContentSettings from './contentSettings'; -import { Page } from 'App/components/page'; -import { - SectionContainer, - SectionHeader, - SectionContent, -} from 'App/components/section'; const Settings = () => { return ( - - + { className={ 'wppbh-app-settings-header' } /> - - + - - + - - + - + - - + + ); }; diff --git a/src/app/pages/staging/index.js b/src/app/pages/staging/index.js index f2f470699..f6ecbd651 100644 --- a/src/app/pages/staging/index.js +++ b/src/app/pages/staging/index.js @@ -3,13 +3,6 @@ import { useState, useEffect } from '@wordpress/element'; import apiFetch from '@wordpress/api-fetch'; import classnames from 'classnames'; import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; -import { Page } from 'App/components/page'; -import { - SectionContainer, - SectionHeader, - SectionContent, - SectionSettings, -} from 'App/components/section'; import { useNotification } from 'App/components/notifications'; // component sourced from staging module import { default as NewfoldStaging } from '@modules/wp-module-staging/components/staging/'; @@ -32,17 +25,8 @@ const Staging = () => { useNotification, }; - const moduleComponents = { - Page, - SectionHeader, - SectionContent, - SectionSettings, - SectionContainer, - }; - return ( diff --git a/src/app/util/hooks/useContainerBlockTarget.js b/src/app/util/hooks/useContainerBlockTarget.js new file mode 100644 index 000000000..2c7c2bcc0 --- /dev/null +++ b/src/app/util/hooks/useContainerBlockTarget.js @@ -0,0 +1,43 @@ +import { useEffect, useState } from '@wordpress/element'; + +/** + * Checks if the container block is the target element based on the query param. + * If true, the hook will return that boolean value for a few seconds. + * The hook will set the value to false and remove the query param. + * + * @param {string} id - the container block id, used to check if it's the target. + * @return {boolean} - true if the container block is the target. + */ +const useContainerBlockIsTarget = ( id ) => { + const [ isTarget, setIsTarget ] = useState( false ); + const searchParams = new URLSearchParams( window.location.search ); + + useEffect( () => { + if ( + searchParams.has( 'nfd-target' ) && + searchParams.get( 'nfd-target' ) === id + ) { + setIsTarget( true ); + + setTimeout( () => { + setIsTarget( false ); + removeTargetQueryParam(); + }, 9500 ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ searchParams ] ); + + /* + * Remove the 'nfd-target={id}' query param from the URL + */ + const removeTargetQueryParam = () => { + searchParams.delete( 'nfd-target' ); + const currentURL = window.location.href; + const updatedURL = currentURL.replace( `&nfd-target=${ id }`, '' ); + window.history.replaceState( null, null, updatedURL ); + }; + + return isTarget; +}; + +export default useContainerBlockIsTarget; diff --git a/src/app/util/hooks/useHandlePageLoad.js b/src/app/util/hooks/useHandlePageLoad.js index ff64f706a..d90843fff 100644 --- a/src/app/util/hooks/useHandlePageLoad.js +++ b/src/app/util/hooks/useHandlePageLoad.js @@ -1,5 +1,9 @@ import { useLocation } from 'react-router-dom'; +/** + * Scrolls to top of page on route change. + * @return {boolean} - true + */ const useHandlePageLoad = () => { const location = useLocation(); const routeContents = document.querySelector( '.wppbh-app-body-inner' );