Update/component library

.wp-env.json

@@ -1,5 +1,5 @@
 {
-  "core": "WordPress/WordPress#tags/6.4.1",
+  "core": "WordPress/WordPress#tags/6.4.2",
   "config": {
     "WP_DEBUG": true,
     "WP_DEBUG_LOG": true,

composer.json

@@ -61,10 +61,10 @@
         "newfold-labs/wp-module-ecommerce": "^1.3.12",
         "newfold-labs/wp-module-global-ctb": "^1.0.9",
         "newfold-labs/wp-module-loader": "^1.0.10",
-        "newfold-labs/wp-module-marketplace": "^2.1.0",
+        "newfold-labs/wp-module-marketplace": "^2.2.0",
         "newfold-labs/wp-module-notifications": "^1.1.6",
         "newfold-labs/wp-module-onboarding": "1.11.8",
-        "newfold-labs/wp-module-performance": "^1.2.2",
+        "newfold-labs/wp-module-performance": "^1.3.0",
         "newfold-labs/wp-module-runtime": "^1.0.7",
         "newfold-labs/wp-module-secure-passwords": "^1.1",
         "newfold-labs/wp-module-sso": "^1.0.4",

package.json

@@ -15,7 +15,7 @@
         "@heroicons/react": "^2.0.18",
         "@newfold-labs/wp-module-ecommerce": "^1.3.12",
         "@newfold-labs/wp-module-runtime": "^1.0.7",
-        "@newfold/ui-component-library": "^1.0.0",
+        "@newfold/ui-component-library": "^1.0.1",
         "@reduxjs/toolkit": "^2.0.1",
         "@wordpress/compose": "^6.24.0",
         "@wordpress/dom-ready": "^3.47.0",

src/app/pages/ecommerce/page.js

@@ -1,9 +1,9 @@
-import { Page } from "../../components/page"
-import {NewfoldECommerce} from "@newfold-labs/wp-module-ecommerce";
+import { Page } from "@newfold/ui-component-library";
+import { NewfoldECommerce } from "@newfold-labs/wp-module-ecommerce";
 import { useNavigate, useLocation, useSearchParams } from "react-router-dom";
 import { useNotification } from "../../components/notifications/feed";
 import AppStore from "../../data/store";
-import {useContext } from "@wordpress/element";
+import { useContext } from "@wordpress/element";
 import { hostgatorSettingsApiFetch } from "../../util/helpers";
 import "@newfold-labs/wp-module-ecommerce/hostgator.css";
 

src/app/pages/help/index.js

@@ -1,8 +1,12 @@
-import { Page } from '../../components/page';
-import { SectionContainer, SectionContent, SectionHeader } from '../../components/section';
 import help from '../../data/help';
 import { getLinkPerRegion, supportsLinkPerRegion } from '../../util/helpers';
-import { Button, Card, Title } from "@newfold/ui-component-library";
+import { 
+	Button,
+	Card,
+	Title,
+	Container,
+	Page
+} from "@newfold/ui-component-library";
 
 const HelpCard = ({ item }) => {
 	return ( 
@@ -46,17 +50,17 @@ const Help = () => {
 	};
 	return (
 		<Page className={"hgwp-app-help-page"}>
-			<SectionContainer className={'hgwp-app-help-container'}>
-				<SectionHeader
+			<Container className={'hgwp-app-help-container'}>
+				<Container.Header
 					title={__('Help', 'wp-plugin-hostgator')}
-					subTitle={__('We are available 24/7 to help answer questions and solve your problems.',
+					description={__('We are available 24/7 to help answer questions and solve your problems.',
 					'wp-plugin-hostgator')}
 				/>
 
-				<SectionContent>
+				<Container.Block>
 					{renderHelpCards()}
-				</SectionContent>
-			</SectionContainer>
+				</Container.Block>
+			</Container>
 		</Page>
 	);
 };

src/app/pages/home/freeAddonsSection.js

@@ -1,4 +1,4 @@
-import {FreePlugins} from "@newfold-labs/wp-module-ecommerce";
+import { FreePlugins } from "@newfold-labs/wp-module-ecommerce";
 import { useNotification } from "../../components/notifications/feed";
 
 const FreePluginsSection = () => {

src/app/pages/home/index.js

@@ -1,5 +1,4 @@
-import { Page } from '../../components/page';
-import { SectionContainer, SectionHeader, SectionContent } from '../../components/section';
+import { Container, Page } from "@newfold/ui-component-library";
 import ComingSoon from '../settings/comingSoon';
 import FreePluginsSection from './freeAddonsSection';
 import SettingsSection from './settingsSection';
@@ -12,27 +11,27 @@ const Home = () => {
 		<Page title="Settings" className={"hgwp-app-home-page hgwp-home"}>
 			<WelcomeSection />
 			<FreePluginsSection />
-			<SectionContainer className={'hgwp-app-home-container'}>
-				<SectionHeader
+			<Container className={'hgwp-app-home-container'}>
+				<Container.Header
 					title={__('More', 'wp-plugin-hostgator')}
 					className={'hgwp-app-home-header display-none'}
 				/>
-				<SectionContent separator={true} className={'hgwp-app-home-coming-soon'}>
+				<Container.Block separator={true} className={'hgwp-app-home-coming-soon'}>
 					<ComingSoon />
-				</SectionContent>
+				</Container.Block>
 
-				<SectionContent separator={true} className={'hgwp-app-home-content'}>
+				<Container.Block separator={true} className={'hgwp-app-home-content'}>
 					<WebContentSection />
-				</SectionContent>
+				</Container.Block>
 
-				<SectionContent separator={true} className={'hgwp-app-home-settings'}>
+				<Container.Block separator={true} className={'hgwp-app-home-settings'}>
 					<SettingsSection />
-				</SectionContent>
+				</Container.Block>
 
-				<SectionContent separator={false} className={'hgwp-app-home-hosting'}>
+				<Container.Block separator={false} className={'hgwp-app-home-hosting'}>
 					<WebHostingSection />
-				</SectionContent>
-			</SectionContainer>
+				</Container.Block>
+			</Container>
 		</Page>
 	);
 };

src/app/pages/home/settingsSection.js

@@ -1,9 +1,9 @@
 import ActionField from "../../components/action-field";
-import { SectionSettings } from "../../components/section";
+import { Container } from "@newfold/ui-component-library";
 
 const SettingsSection = () => {
 	return (
-		<SectionSettings
+		<Container.SettingsField
 			title={__('Settings and Performance', 'wp-plugin-hostgator')}
 			description={__('Customize & fine-tune your site.', 'wp-plugin-hostgator')}
 		>
@@ -35,7 +35,7 @@ const SettingsSection = () => {
 					{__('Add site services, themes or plugins from the marketplace.', 'wp-plugin-hostgator')}
 				</ActionField>
 			</div>
-		</SectionSettings >
+		</Container.SettingsField>
 	);
 };