Use Newfold UI Page/Container components

bluehost · Dec 4, 2023 · 5aec6fd · 5aec6fd
1 parent dbcbf8e
commit 5aec6fd
Show file tree

Hide file tree

Showing 18 changed files with 125 additions and 257 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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 (
-		<SectionContainer className="wppbh-webinars-banner-section nfd-bg-[#E5F6FE]">
-			<SectionContent>
+		<Container className="wppbh-webinars-banner-section nfd-bg-[#E5F6FE]">
+			<Container.Block>
 				<div className="nfd-flex nfd-flex-col nfd-gap-8 xl:nfd-flex-row xl:nfd-items-center">
 					<div className="max-[1378px]:nfd-hidden">
 						<WebinarsVector />
@@ -173,8 +172,8 @@ const WebinarsBanner = () => {
 						</Button>
 					</div>
 				</div>
-			</SectionContent>
-		</SectionContainer>
+			</Container.Block>
+		</Container>
 	);
 };
 

diff --git 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
@@ -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 (
 		<Page className={ 'wppbh-app-help-page' }>
-			<SectionContainer className={ 'wppbh-app-help-container' }>
-				<SectionHeader
+			<Container className={ 'wppbh-app-help-container' }>
+				<Container.Header
 					title={ __( 'Help', 'wp-plugin-bluehost' ) }
-					subTitle={ __(
+					description={ __(
 						'We are available 24/7 to help answer questions and solve your problems.',
 						'wp-plugin-bluehost'
 					) }
 				/>
 
-				<SectionContent>{ renderHelpCards() }</SectionContent>
-			</SectionContainer>
+				<Container.Block>{ renderHelpCards() }</Container.Block>
+			</Container>
 		</Page>
 	);
 };

diff --git a/src/app/pages/help/stylesheet.scss b/src/app/pages/help/stylesheet.scss
diff --git 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 = () => {
 		<Page className="wppbh-home">
 			<WelcomeSection />
 			<WebinarsBanner />
-			<SectionContainer className="wppbh-account-help-section">
-				<SectionContent>
+			<Container className="wppbh-account-help-section">
+				<Container.Block>
 					<div className="nfd-grid nfd-grid-cols-2 nfd-gap-6">
 						<AccountCard />
 						<HelpCard />
 					</div>
-				</SectionContent>
-			</SectionContainer>
+				</Container.Block>
+			</Container>
 		</Page>
 	);
 };

diff --git a/src/app/pages/home/stylesheet.scss b/src/app/pages/home/stylesheet.scss
diff --git 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 (
 		<Page className={ 'wppbh-app-marketplace-page' }>
-			<SectionContainer className={ 'wppbh-app-marketplace-container' }>
+			<Container className={ 'wppbh-app-marketplace-container' }>
 				<NewfoldMarketplace
 					methods={ moduleMethods }
 					constants={ moduleConstants }
-					Components={ moduleComponents }
 				/>
-			</SectionContainer>
+			</Container>
 		</Page>
 	);
 };

diff --git 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 (
 		<Page title="Performance" className={ 'wppbh-app-settings-page' }>
-			<SectionContainer className={ 'wppbh-app-settings-container' }>
-				<SectionHeader
+			<Container className={ 'wppbh-app-settings-container' }>
+				<Container.Header
 					title={ __( 'Performance', 'wp-plugin-bluehost' ) }
 					subTitle={ __(
 						'This is where you can manage cache settings for your website.',
@@ -63,7 +52,7 @@ const PerformancePage = () => {
 					methods={ moduleMethods }
 					Components={ moduleComponents }
 				/>
-			</SectionContainer>
+			</Container>
 		</Page>
 	);
 };