├── .editorconfig ├── .eslintrc.js ├── .github ├── CODEOWNERS ├── dependabot.yml ├── scripts │ └── set-version-bump.js └── workflows │ ├── brand-plugin-test.yml │ ├── i18n-crowdin-download.yml │ ├── i18n-crowdin-upload.yml │ ├── lint-check-php.yml │ ├── lint-check-spa.yml │ ├── newfold-prep-release.yml │ ├── prep-release.yml │ ├── prepare-release.yml │ └── satis-update.yml ├── .gitignore ├── .nvmrc ├── .wp-env.json ├── LICENSE ├── README.md ├── bootstrap.php ├── build └── 2.7.4 │ ├── 100-rtl.css │ ├── 100.css │ ├── 100.js │ ├── 127.js │ ├── 202.js │ ├── 206.js │ ├── 218.js │ ├── 270.js │ ├── 287.js │ ├── 325.js │ ├── 328.js │ ├── 340.js │ ├── 356.js │ ├── 366.js │ ├── 367.js │ ├── 396-rtl.css │ ├── 396.css │ ├── 396.js │ ├── 40.js │ ├── 426.js │ ├── 508.js │ ├── 51.js │ ├── 546.js │ ├── 560.js │ ├── 585.js │ ├── 586.js │ ├── 595.js │ ├── 619.js │ ├── 627.js │ ├── 672.js │ ├── 761.js │ ├── 796.js │ ├── 803.js │ ├── 841.js │ ├── 859.js │ ├── 866.js │ ├── 871.js │ ├── 910.js │ ├── 97.js │ ├── 971.js │ ├── 978.js │ ├── 993.js │ ├── 994.js │ ├── 996.js │ ├── images │ ├── ai_bg.55900f2d.png │ ├── ai_bg_low.d8292556.png │ ├── bluesky.733ebcbf.png │ ├── content.fb050ea1.png │ ├── design.cc6a697f.png │ ├── features.593fb09c.png │ ├── full-service.7f58f410.png │ ├── full-service.adb3abd6.png │ ├── help.19cc7e75.png │ ├── step-interstitial.00b15f9e.png │ ├── toggle-light-mode.8d7afd07.png │ ├── wp-admin.2908b886.png │ ├── wp-admin.6c8af0b4.png │ └── wp-admin.d8650899.png │ ├── onboarding-restart-button.asset.php │ ├── onboarding-restart-button.css-rtl.css │ ├── onboarding-restart-button.css.asset.php │ ├── onboarding-restart-button.css.css │ ├── onboarding-restart-button.css.js │ ├── onboarding-restart-button.js │ ├── onboarding-rtl.css │ ├── onboarding.asset.php │ ├── onboarding.css │ ├── onboarding.js │ ├── sitegen-theme-marker.asset.php │ ├── sitegen-theme-marker.css-rtl.css │ ├── sitegen-theme-marker.css.asset.php │ ├── sitegen-theme-marker.css.css │ ├── sitegen-theme-marker.css.js │ └── sitegen-theme-marker.js ├── composer.json ├── composer.lock ├── crowdin.yml ├── cypress.json ├── includes ├── Application.php ├── Compatibility │ ├── Safe_Mode.php │ ├── Scan.php │ └── Status.php ├── ExternalRedirectInterceptor.php ├── LoginRedirect.php ├── Models │ └── Theme.php ├── ModuleController.php ├── Mustache │ ├── Mustache.php │ └── Templates │ │ └── themeStylesheet.mustache ├── Permissions.php ├── RestApi │ ├── BaseHiiveController.php │ ├── BlockRenderController.php │ ├── EventsController.php │ ├── FlowController.php │ ├── LanguagesController.php │ ├── PluginsController.php │ ├── RestApi.php │ ├── RestApiFilter.php │ ├── SettingsController.php │ ├── SiteClassificationController.php │ ├── SiteGenController.php │ ├── SiteImagesController.php │ ├── SitePagesController.php │ └── Themes │ │ ├── ApprovedThemesController.php │ │ ├── PatternsController.php │ │ ├── ThemeColorsController.php │ │ ├── ThemeFontsController.php │ │ ├── ThemeInstallerController.php │ │ └── ThemeVariationsController.php ├── Services │ ├── EventService.php │ ├── I18nService.php │ ├── LanguageService.php │ ├── PluginService.php │ ├── StatusService.php │ ├── ThemeService.php │ └── Webfonts.php ├── WP_Admin.php ├── WP_CLI.php └── WP_Config.php ├── languages ├── wp-module-onboarding-de_DE-nfd-onboarding.json ├── wp-module-onboarding-de_DE.l10n.php ├── wp-module-onboarding-de_DE.mo ├── wp-module-onboarding-de_DE.po ├── wp-module-onboarding-en_AU-nfd-onboarding.json ├── wp-module-onboarding-en_AU.l10n.php ├── wp-module-onboarding-en_AU.mo ├── wp-module-onboarding-en_AU.po ├── wp-module-onboarding-en_GB-nfd-onboarding.json ├── wp-module-onboarding-en_GB.l10n.php ├── wp-module-onboarding-en_GB.mo ├── wp-module-onboarding-en_GB.po ├── wp-module-onboarding-es_ES-nfd-onboarding.json ├── wp-module-onboarding-es_ES.l10n.php ├── wp-module-onboarding-es_ES.mo ├── wp-module-onboarding-es_ES.po ├── wp-module-onboarding-es_MX-nfd-onboarding.json ├── wp-module-onboarding-es_MX.l10n.php ├── wp-module-onboarding-es_MX.mo ├── wp-module-onboarding-es_MX.po ├── wp-module-onboarding-fr_FR-nfd-onboarding.json ├── wp-module-onboarding-fr_FR.l10n.php ├── wp-module-onboarding-fr_FR.mo ├── wp-module-onboarding-fr_FR.po ├── wp-module-onboarding-it_IT-nfd-onboarding.json ├── wp-module-onboarding-it_IT.l10n.php ├── wp-module-onboarding-it_IT.mo ├── wp-module-onboarding-it_IT.po ├── wp-module-onboarding-nl_NL-nfd-onboarding.json ├── wp-module-onboarding-nl_NL.l10n.php ├── wp-module-onboarding-nl_NL.mo ├── wp-module-onboarding-nl_NL.po ├── wp-module-onboarding-pt_BR-nfd-onboarding.json ├── wp-module-onboarding-pt_BR.l10n.php ├── wp-module-onboarding-pt_BR.mo ├── wp-module-onboarding-pt_BR.po └── wp-module-onboarding.pot ├── package-lock.json ├── package.json ├── phpcs.xml ├── phpunit.xml ├── src ├── Brands │ ├── bluehost │ │ ├── bluehost-logo.svg │ │ ├── bluesky.png │ │ ├── dark.svg │ │ ├── icon.svg │ │ ├── learn-more-basic-info.svg │ │ ├── learn-more-design-colors.svg │ │ ├── learn-more-design-fonts.svg │ │ ├── learn-more-design-header-menu.svg │ │ ├── learn-more-design-homepage.svg │ │ ├── learn-more-design-theme-styles.svg │ │ ├── learn-more-ecommerce-address.svg │ │ ├── learn-more-ecommerce-products.svg │ │ ├── learn-more-ecommerce-tax-info.svg │ │ ├── learn-more-get-started-site-type.svg │ │ ├── learn-more-get-started-welcome.svg │ │ ├── learn-more-get-started-wp-experience.svg │ │ ├── learn-more-pages.svg │ │ ├── learn-more-site-features.svg │ │ ├── learn-more-what-next.svg │ │ ├── logo.svg │ │ ├── step-error-logo.svg │ │ ├── step-interstitial.png │ │ ├── step-loader-logo.svg │ │ └── wp-admin.png │ ├── crazy-domains │ │ ├── full-service.png │ │ ├── icon-empty.svg │ │ ├── icon.svg │ │ ├── logo.svg │ │ ├── step-error-logo.svg │ │ ├── step-loader-logo.svg │ │ └── wp-admin.png │ ├── hostgator │ │ ├── dark.svg │ │ ├── icon.svg │ │ ├── logo.svg │ │ ├── step-error-logo.svg │ │ └── step-loader-logo.svg │ ├── newfold │ │ ├── icon.svg │ │ └── logo.svg │ ├── webcom │ │ ├── dark.svg │ │ ├── icon.svg │ │ └── logo.svg │ └── wordpress │ │ ├── dark-other.svg │ │ ├── dark.svg │ │ ├── full-service.png │ │ ├── icon.svg │ │ ├── logo.svg │ │ ├── step-error-logo.svg │ │ ├── step-loader-logo.svg │ │ └── wp-admin.png ├── OnboardingSPA │ ├── chapters │ │ ├── commerce.js │ │ ├── demographic.js │ │ ├── design.js │ │ ├── features.js │ │ ├── layoutContent.js │ │ ├── siteGen │ │ │ ├── core.js │ │ │ ├── design.js │ │ │ └── features.js │ │ ├── sitegen.js │ │ └── utils.js │ ├── components │ │ ├── Accordion │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── AdminBar │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── Animate │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── App │ │ │ └── index.js │ │ ├── Button │ │ │ ├── ButtonDark │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── ButtonNext │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── ButtonWhite │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── ButtonWithBackground │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── NavCardButton │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── NextButtonSiteGen │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── CardHeader │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── CardWithOptions │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── CheckboxTemplate │ │ │ ├── CheckboxItem │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── CheckboxList │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── CheckboxListSkeleton │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ └── index.js │ │ ├── ColorPickerButton │ │ │ └── index.js │ │ ├── ComingSoon │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── Content │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── Drawer │ │ │ ├── DrawerPanel │ │ │ │ ├── DesignColors.js │ │ │ │ ├── DesignFonts.js │ │ │ │ ├── DesignHeaderMenu.js │ │ │ │ ├── DesignHomepageMenu.js │ │ │ │ ├── DesignThemeStylesMenu.js │ │ │ │ ├── DesignThemeStylesPreview.js │ │ │ │ ├── DesignThemes.js │ │ │ │ ├── Ecommerce │ │ │ │ │ └── NavStoreInfo.js │ │ │ │ ├── NavDesign.js │ │ │ │ ├── NavGetStarted.js │ │ │ │ ├── NavPage.js │ │ │ │ ├── NavPrimary.js │ │ │ │ ├── WithDesignBack.js │ │ │ │ └── index.js │ │ │ ├── DrawerToggle │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── ErrorModal │ │ │ ├── ErrorModal.js │ │ │ └── stylesheet.scss │ │ ├── ErrorState │ │ │ ├── Step │ │ │ │ ├── SiteGen │ │ │ │ │ ├── contents.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── stylesheet.scss │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── ExitToWordPress │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── Footer │ │ │ ├── components │ │ │ │ └── SiteGenFooter │ │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── Grid │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── Header │ │ │ ├── components │ │ │ │ ├── SiteBuildHeader │ │ │ │ │ ├── HeaderEnd.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── step-navigation.js │ │ │ │ └── SiteGenHeader │ │ │ │ │ ├── index.js │ │ │ │ │ └── step-navigation.js │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── Heading │ │ │ ├── AIHeading │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ └── HeadingWithSubHeading │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ ├── HeadingWithSubHeading │ │ │ └── SiteGen │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ ├── ImageUploader │ │ │ └── components │ │ │ │ ├── ImageUploaderWithIcon │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ │ └── ImageUploaderWithText │ │ │ │ ├── index.js │ │ │ │ ├── stylesheet.scss │ │ │ │ └── utils.js │ │ ├── LanguageSelection │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── Layouts │ │ │ ├── Base.js │ │ │ ├── Common.js │ │ │ └── stylesheet.scss │ │ ├── LivePreview │ │ │ ├── BlockPreview │ │ │ │ ├── auto.js │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── GlobalStylesProvider │ │ │ │ └── index.js │ │ │ ├── LivePreviewSkeleton │ │ │ │ └── index.js │ │ │ ├── SelectableCard │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── SelectableCardWithInfo │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── SiteGenCard │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── SiteGenPreviewSelectableCard │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── Loaders │ │ │ ├── Chapter │ │ │ │ └── Interstitial │ │ │ │ │ ├── contents.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── stylesheet.scss │ │ │ ├── ImageUpload │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── SiteGenLoader │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── Spinner │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── Step │ │ │ │ ├── Ecommerce │ │ │ │ │ ├── contents.js │ │ │ │ │ └── index.js │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── MiniPreview │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── NeedHelpTag │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── NewfoldInterfaceSkeleton │ │ │ ├── SiteBuild │ │ │ │ └── index.js │ │ │ ├── SiteGen │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── style.scss │ │ │ └── themeToggleHOC.js │ │ ├── NewfoldLargeCard │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── OptionWithHeadingSubHeading │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── OrbAnimation │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── ProgressBar │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── SelectableCard │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── SelectableCardList │ │ │ ├── selectable-card-list.js │ │ │ └── stylesheet.scss │ │ ├── Sidebar │ │ │ ├── components │ │ │ │ ├── Customize │ │ │ │ │ ├── DesignColorsPanel │ │ │ │ │ │ ├── ColorPaletteIcon │ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ │ ├── CustomColorPalette │ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ ├── DesignFontsPanel │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ ├── Menu.js │ │ │ │ │ ├── Sidebar.js │ │ │ │ │ ├── Skeleton │ │ │ │ │ │ ├── SidebarSkeleton.js │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ ├── data.js │ │ │ │ │ └── stylesheet.scss │ │ │ │ ├── LearnMore │ │ │ │ │ ├── HeadingWithDescription │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ ├── HelpPanel │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ ├── IllustrationPanel │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ ├── InfoPanel │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ ├── Menu.js │ │ │ │ │ ├── Sidebar.js │ │ │ │ │ ├── Skeleton │ │ │ │ │ │ ├── SidebarSkeleton.js │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ ├── StepIntroPanel │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ ├── SupportLink │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── stylesheet.scss │ │ │ │ │ └── stylesheet.scss │ │ │ │ └── SitegenEditorPatterns │ │ │ │ │ ├── Sidebar.js │ │ │ │ │ └── stylesheet.scss │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── SiteGenPlaceholder │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── SkipButton │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── SocialMediaForm │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ ├── stylesheet.scss │ │ │ ├── urlValidator.js │ │ │ └── utils.js │ │ ├── StartOptions │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ ├── StateHandlers │ │ │ ├── Design │ │ │ │ ├── contents.js │ │ │ │ └── index.js │ │ │ ├── Flow │ │ │ │ └── index.js │ │ │ ├── SiteGen │ │ │ │ ├── contents.js │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── Tab │ │ │ └── index.js │ │ ├── TabPanelHover │ │ │ ├── container.js │ │ │ ├── index.js │ │ │ ├── menu.js │ │ │ ├── navigableContainer.js │ │ │ ├── stylesheet.scss │ │ │ └── tabbable.js │ │ ├── TextInput │ │ │ ├── TextAreaSiteGenDetails │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── TextInputSiteBuild │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ ├── TextInputSiteGen │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ │ └── TextInputSiteGenDetails │ │ │ │ ├── index.js │ │ │ │ └── stylesheet.scss │ │ ├── ThemeContextProvider │ │ │ └── index.js │ │ ├── ToggleDarkMode │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ │ └── Tooltip │ │ │ ├── index.js │ │ │ └── stylesheet.scss │ ├── data │ │ ├── flows │ │ │ ├── constants.js │ │ │ ├── default.js │ │ │ ├── ecommerce.js │ │ │ ├── index.js │ │ │ ├── sitegen.js │ │ │ └── utils.js │ │ ├── footers │ │ │ └── index.js │ │ ├── headers │ │ │ └── index.js │ │ ├── models │ │ │ ├── Chapter.js │ │ │ ├── Flow.js │ │ │ ├── Page.js │ │ │ ├── PseudoStep.js │ │ │ └── Step.js │ │ ├── sidebars │ │ │ └── index.js │ │ └── translations │ │ │ └── index.js │ ├── index.js │ ├── pages │ │ ├── ErrorPage │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ └── page.js │ │ └── IndexPage │ │ │ ├── index.js │ │ │ └── page.js │ ├── static │ │ ├── icons │ │ │ ├── back.svg │ │ │ ├── chevron-down.svg │ │ │ ├── chevron-left.svg │ │ │ ├── chevron-right.svg │ │ │ ├── chevron-up.svg │ │ │ ├── default-logo.svg │ │ │ ├── design.svg │ │ │ ├── equalizer.svg │ │ │ ├── forward.svg │ │ │ ├── more.svg │ │ │ ├── publish.svg │ │ │ ├── reload.svg │ │ │ ├── sell.svg │ │ │ ├── site-features │ │ │ │ ├── analytics.svg │ │ │ │ ├── bookingcalendar.svg │ │ │ │ ├── comingsoon.svg │ │ │ │ ├── email.svg │ │ │ │ ├── filter.svg │ │ │ │ ├── form.svg │ │ │ │ ├── lead.svg │ │ │ │ ├── search.svg │ │ │ │ ├── security.svg │ │ │ │ ├── share.svg │ │ │ │ └── wishlist.svg │ │ │ ├── sitegen │ │ │ │ ├── favorite-filled.svg │ │ │ │ ├── favorite.svg │ │ │ │ ├── heart-filled.svg │ │ │ │ ├── heart-stroked.svg │ │ │ │ ├── image-upload.svg │ │ │ │ ├── radio-checked.svg │ │ │ │ ├── radio-unchecked.svg │ │ │ │ ├── regenerate.svg │ │ │ │ ├── settings-dark.svg │ │ │ │ ├── settings.svg │ │ │ │ ├── sitegen-ai-icon.svg │ │ │ │ ├── toggle-dark-mode.svg │ │ │ │ └── toggle-light-mode.png │ │ │ └── social │ │ │ │ ├── facebook.svg │ │ │ │ ├── instagram.svg │ │ │ │ ├── linkedin.svg │ │ │ │ ├── tiktok.svg │ │ │ │ ├── twitter.svg │ │ │ │ ├── yelp.svg │ │ │ │ └── youtube.svg │ │ └── images │ │ │ ├── content.png │ │ │ ├── content.svg │ │ │ ├── design.png │ │ │ ├── design.svg │ │ │ ├── features.png │ │ │ ├── features.svg │ │ │ ├── help.png │ │ │ └── sitegen │ │ │ ├── ai_bg.png │ │ │ └── ai_bg_low.png │ ├── steps │ │ ├── BasicInfo │ │ │ ├── Sidebar │ │ │ │ └── LearnMore │ │ │ │ │ ├── contents.js │ │ │ │ │ └── index.js │ │ │ ├── basicInfoForm.js │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ ├── step.js │ │ │ └── stylesheet.scss │ │ ├── Complete │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ └── step.js │ │ ├── DesignColors │ │ │ ├── Sidebar │ │ │ │ └── LearnMore │ │ │ │ │ ├── contents.js │ │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── step.js │ │ │ ├── stylesheet.scss │ │ │ └── utils.js │ │ ├── DesignFonts │ │ │ ├── Sidebar │ │ │ │ └── LearnMore │ │ │ │ │ ├── contents.js │ │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── step.js │ │ │ └── stylesheet.scss │ │ ├── DesignHeaderMenu │ │ │ ├── Sidebar │ │ │ │ └── LearnMore │ │ │ │ │ ├── contents.js │ │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── step.js │ │ │ └── stylesheet.scss │ │ ├── DesignHomepageMenu │ │ │ ├── Sidebar │ │ │ │ └── LearnMore │ │ │ │ │ ├── contents.js │ │ │ │ │ └── index.js │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ ├── step.js │ │ │ └── stylesheet.scss │ │ ├── DesignThemeStyles │ │ │ ├── Menu │ │ │ │ ├── Sidebar │ │ │ │ │ └── LearnMore │ │ │ │ │ │ ├── contents.js │ │ │ │ │ │ └── index.js │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ └── stylesheet.scss │ │ │ ├── Preview │ │ │ │ ├── Sidebar │ │ │ │ │ └── LearnMore │ │ │ │ │ │ ├── contents.js │ │ │ │ │ │ └── index.js │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ └── stylesheet.scss │ │ │ ├── contents.js │ │ │ └── stylesheet.scss │ │ ├── Ecommerce │ │ │ ├── StepAddress │ │ │ │ ├── Sidebar │ │ │ │ │ └── LearnMore │ │ │ │ │ │ ├── contents.js │ │ │ │ │ │ └── index.js │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ └── step.js │ │ │ ├── StepProducts │ │ │ │ ├── Sidebar │ │ │ │ │ └── LearnMore │ │ │ │ │ │ ├── contents.js │ │ │ │ │ │ └── index.js │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ └── step.js │ │ │ ├── StepTax │ │ │ │ ├── Sidebar │ │ │ │ │ └── LearnMore │ │ │ │ │ │ ├── contents.js │ │ │ │ │ │ └── index.js │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ └── step.js │ │ │ ├── countries.json │ │ │ ├── currencies.json │ │ │ ├── stylesheet.scss │ │ │ └── useWPSettings.js │ │ ├── GetStarted │ │ │ ├── GetStartedExperience │ │ │ │ ├── Sidebar │ │ │ │ │ └── LearnMore │ │ │ │ │ │ ├── contents.js │ │ │ │ │ │ └── index.js │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ └── stylesheet.scss │ │ │ ├── SiteTypeSetup │ │ │ │ ├── PrimarySite │ │ │ │ │ ├── Sidebar │ │ │ │ │ │ └── LearnMore │ │ │ │ │ │ │ ├── contents.js │ │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── step.js │ │ │ │ │ └── stylesheet.scss │ │ │ │ ├── SecondarySite │ │ │ │ │ ├── Sidebar │ │ │ │ │ │ └── LearnMore │ │ │ │ │ │ │ ├── contents.js │ │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── step.js │ │ │ │ │ └── stylesheet.scss │ │ │ │ └── contents.js │ │ │ ├── Welcome │ │ │ │ ├── Sidebar │ │ │ │ │ └── LearnMore │ │ │ │ │ │ ├── contents.js │ │ │ │ │ │ └── index.js │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ └── stylesheet.scss │ │ │ └── index.js │ │ ├── SiteFeatures │ │ │ ├── Sidebar │ │ │ │ └── LearnMore │ │ │ │ │ ├── contents.js │ │ │ │ │ └── index.js │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ ├── step.js │ │ │ └── stylesheet.scss │ │ ├── SiteGen │ │ │ ├── Editor │ │ │ │ ├── Header │ │ │ │ │ ├── center.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── stylesheet.scss │ │ │ │ ├── Sidebar │ │ │ │ │ └── Customize │ │ │ │ │ │ ├── contents.js │ │ │ │ │ │ └── index.js │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ └── stylesheet.scss │ │ │ ├── Experience │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ └── stylesheet.scss │ │ │ ├── Migration │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ └── stylesheet.scss │ │ │ ├── Preview │ │ │ │ ├── contents.js │ │ │ │ ├── heartAnimation.js │ │ │ │ ├── index.js │ │ │ │ ├── pattern.js │ │ │ │ ├── regeneratingCard.js │ │ │ │ ├── step.js │ │ │ │ └── stylesheet.scss │ │ │ ├── SiteDetails │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ ├── stylesheet.scss │ │ │ │ └── walkthrough │ │ │ │ │ └── index.js │ │ │ ├── SiteLogo │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ └── stylesheet.scss │ │ │ ├── SocialMedia │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ └── stylesheet.scss │ │ │ └── Welcome │ │ │ │ ├── contents.js │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ └── stylesheet.scss │ │ ├── SitePages │ │ │ ├── Sidebar │ │ │ │ └── LearnMore │ │ │ │ │ ├── contents.js │ │ │ │ │ └── index.js │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ ├── step.js │ │ │ └── stylesheet.scss │ │ ├── TheFork │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ ├── step.js │ │ │ └── stylesheet.scss │ │ ├── TopPriority │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ ├── step.js │ │ │ └── stylesheet.scss │ │ ├── WhatNext │ │ │ ├── Sidebar │ │ │ │ └── LearnMore │ │ │ │ │ ├── contents.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── stylesheet.scss │ │ │ ├── contents.js │ │ │ ├── index.js │ │ │ ├── step.js │ │ │ └── stylesheet.scss │ │ └── index.js │ ├── store │ │ ├── actions.js │ │ ├── constants.js │ │ ├── index.js │ │ ├── reducer.js │ │ └── selectors.js │ ├── styles │ │ ├── _branding.scss │ │ ├── _icons.scss │ │ ├── _interface.scss │ │ ├── _utilities.scss │ │ ├── _wordpress.scss │ │ └── app.scss │ └── utils │ │ ├── analytics │ │ └── hiive │ │ │ ├── OnboardingEvent.js │ │ │ ├── constants.js │ │ │ └── index.js │ │ ├── api-queuer │ │ └── api-queue-executor.js │ │ ├── api │ │ ├── blockRender.js │ │ ├── buildRequestUrl.js │ │ ├── common.js │ │ ├── cronTrigger.js │ │ ├── ecommerce.js │ │ ├── flow.js │ │ ├── languages.js │ │ ├── patterns.js │ │ ├── plugins.js │ │ ├── resolve.js │ │ ├── settings.js │ │ ├── siteClassification.js │ │ ├── siteClassification.json │ │ ├── siteGen.js │ │ ├── themes.js │ │ ├── uploader.js │ │ └── utils.js │ │ ├── global-styles │ │ ├── get-block-css-selector.js │ │ ├── typography-utils.js │ │ ├── use-global-styles-output.js │ │ └── utils.js │ │ ├── index.js │ │ └── locales │ │ └── translations.js ├── Scripts │ ├── onboarding-restart-button │ │ ├── onboarding-restart-button.css │ │ └── onboarding-restart-button.js │ └── sitegen-theme-marker │ │ ├── sitegen-theme-marker.css │ │ └── sitegen-theme-marker.js ├── constants.js ├── onboarding.js └── webpack-public-path.js ├── tests ├── cypress │ ├── fixtures │ │ ├── color-palette.json │ │ ├── content-structure.json │ │ ├── content-tones.json │ │ ├── customize-data.json │ │ ├── flow.json │ │ ├── font-pair.json │ │ ├── homepage-regenerate.json │ │ ├── homepages.json │ │ ├── image.png │ │ ├── migrate-connect.json │ │ ├── plugin-recommendation.json │ │ ├── site-classification.json │ │ ├── site-config.json │ │ ├── sitemap.json │ │ ├── target-audience.json │ │ └── theme-style.json │ ├── integration │ │ ├── 1-Initial-steps │ │ │ ├── branding.cy.js │ │ │ ├── sidebar.cy.js │ │ │ └── whats-next.cy.js │ │ ├── 2-general-onboarding-flow │ │ │ ├── basic-info.cy.js │ │ │ ├── exit-to-wordpress.cy.js │ │ │ ├── get-started-experience.cy.js │ │ │ ├── get-started-welcome.cy.js │ │ │ ├── site-features.cy.js │ │ │ ├── sitetype-primary.cy.js │ │ │ ├── sitetype-secondary.cy.js │ │ │ └── top-priority.cy.js │ │ ├── 3-ecommerce-onboarding-flow │ │ │ ├── address.cy.js │ │ │ ├── basic-info.cy.js │ │ │ ├── exit-to-wordpress.cy.js │ │ │ ├── get-started-experience.cy.js │ │ │ ├── get-started-welcome.cy.js │ │ │ ├── products.cy.js │ │ │ ├── site-features.cy.js │ │ │ ├── sitetype-primary.cy.js │ │ │ ├── sitetype-secondary.cy.js │ │ │ └── tax-info.cy.js │ │ ├── 4-design-steps │ │ │ ├── colors-step.cy.js │ │ │ ├── continue-onboarding.cy.js │ │ │ ├── header-menu.cy.js │ │ │ ├── homepage-styles.cy.js │ │ │ ├── site-pages.cy.js │ │ │ ├── theme-styles-menu.cy.js │ │ │ ├── theme-styles-preview.cy.js │ │ │ └── typography-step.cy.js │ │ ├── 5-AI-SiteGen-onboarding-flow │ │ │ ├── 1-fork.cy.js │ │ │ ├── 2-welcome.cy.js │ │ │ ├── 3-site-details.cy.js │ │ │ ├── 4-site-logo.cy.js │ │ │ ├── 5-experience.cy.js │ │ │ ├── 6-preview.cy.js │ │ │ ├── 7-editor.cy.js │ │ │ └── 8-restart-onboarding.cy.js │ │ └── wp-module-support │ │ │ ├── EventsApi.cy.js │ │ │ ├── MockApi.cy.js │ │ │ ├── drawer.cy.js │ │ │ ├── header.cy.js │ │ │ ├── pluginID.cy.js │ │ │ ├── sidebar.cy.js │ │ │ ├── single-events-track.cy.js │ │ │ ├── siteGen.cy.js │ │ │ └── socialMedia.cy.js │ ├── plugins │ │ └── index.js │ └── support │ │ ├── commands.js │ │ └── index.js └── phpunit │ ├── ExampleTest.php │ └── bootstrap.php └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | # WordPress Coding Standards 5 | # https://make.wordpress.org/core/handbook/coding-standards/ 6 | 7 | root = true 8 | 9 | [*] 10 | charset = utf-8 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | indent_style = tab -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.github/workflows/i18n-crowdin-download.yml: -------------------------------------------------------------------------------- 1 | name: Crowdin Download Action 2 | 3 | on: 4 | workflow_dispatch: 5 | inputs: 6 | base_branch: 7 | description: 'Base branch for the pull request' 8 | required: false 9 | default: 'main' 10 | 11 | permissions: 12 | contents: write 13 | pull-requests: write 14 | 15 | jobs: 16 | call-crowdin-workflow: 17 | uses: newfold-labs/workflows/.github/workflows/i18n-crowdin-download.yml@main 18 | with: 19 | base_branch: ${{ inputs.base_branch }} 20 | CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }} 21 | secrets: 22 | CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }} 23 | -------------------------------------------------------------------------------- /.github/workflows/i18n-crowdin-upload.yml: -------------------------------------------------------------------------------- 1 | name: Crowdin Upload Action 2 | 3 | on: 4 | workflow_dispatch: 5 | 6 | jobs: 7 | call-crowdin-upload-workflow: 8 | uses: newfold-labs/workflows/.github/workflows/i18n-crowdin-upload.yml@main 9 | with: 10 | CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }} 11 | secrets: 12 | CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }} 13 | -------------------------------------------------------------------------------- /.github/workflows/satis-update.yml: -------------------------------------------------------------------------------- 1 | name: Trigger Satis Build 2 | 3 | on: 4 | release: 5 | types: 6 | - created 7 | 8 | jobs: 9 | webhook: 10 | name: Send Webhook 11 | runs-on: ubuntu-latest 12 | steps: 13 | 14 | - name: Set Package 15 | id: package 16 | env: 17 | REPO: ${{ github.repository }} 18 | run: echo "PACKAGE=${REPO##*/}" >> $GITHUB_OUTPUT 19 | 20 | - name: Set Version 21 | id: tag 22 | run: echo "VERSION=${GITHUB_REF##*/}" >> $GITHUB_OUTPUT 23 | 24 | - name: Repository Dispatch 25 | uses: peter-evans/repository-dispatch@ff45666b9427631e3450c54a1bcbee4d9ff4d7c0 # v3.0.0 26 | with: 27 | token: ${{ secrets.WEBHOOK_TOKEN }} 28 | repository: newfold-labs/satis 29 | event-type: 'satis-build' 30 | client-payload: >- 31 | { 32 | "vendor": "${{ github.repository_owner }}", 33 | "package": "${{ steps.package.outputs.PACKAGE }}", 34 | "version": "${{ steps.tag.outputs.VERSION }}" 35 | } 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | vendor 3 | .DS_Store 4 | .vscode 5 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v16 2 | -------------------------------------------------------------------------------- /.wp-env.json: -------------------------------------------------------------------------------- 1 | { 2 | "config": { 3 | "WP_DEBUG": true, 4 | "WP_DEBUG_LOG": true, 5 | "WP_DEBUG_DISPLAY": true 6 | }, 7 | "plugins": [ 8 | "." 9 | ], 10 | "port": 8880, 11 | "testsPort": 8881, 12 | "env": { 13 | "tests": { 14 | "config": { 15 | "WP_TESTS_DOMAIN": "localhost:8881", 16 | "WP_TESTS_EMAIL": "dave@bluehost.com", 17 | "WP_TESTS_TITLE": "WordPress Tests", 18 | "WP_TESTS_BINARY": "php" 19 | } 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /build/2.7.4/202.js: -------------------------------------------------------------------------------- 1 | "use strict";(globalThis.webpackChunknewfold_Onboarding=globalThis.webpackChunknewfold_Onboarding||[]).push([[202],{4202:(e,n,i)=>{i.r(n),i.d(n,{default:()=>l});var r=i(6427),s=i(8851),a=i(7143),d=i(7675),t=i(8969),b=i(6942),o=i.n(b),c=i(790);const l=()=>{const{isSidebarOpened:e,sideBarView:n,currentStep:i}=(0,a.useSelect)((e=>({isSidebarOpened:e(d.M).isSidebarOpened(),sideBarView:e(d.M).getSidebarView(),currentStep:e(d.M).getCurrentStep()}))),{setIsSidebarOpened:b,setSidebarActiveView:l}=(0,a.useDispatch)(d.M);return(0,c.jsx)(c.Fragment,{children:n&&i?.sidebars?.LearnMore&&(0,c.jsx)(r.Fill,{name:`${t.Qs}/${t.Qe}`,children:(0,c.jsx)(r.Button,{className:o()("nfd-onboarding-sidebar-learn-more__menu-button",{"is-pressed":e&&n===t.Qe}),disabled:!i,onClick:()=>{const i=n===t.Qe?!e:e;l(t.Qe),b(i)},icon:s.A})})})}}}]); -------------------------------------------------------------------------------- /build/2.7.4/206.js: -------------------------------------------------------------------------------- 1 | "use strict";(globalThis.webpackChunknewfold_Onboarding=globalThis.webpackChunknewfold_Onboarding||[]).push([[206],{3206:(e,a,n)=>{n.r(a),n.d(a,{default:()=>r});var o=n(6427),i=n(790);const r=({cssIcon:e="nfd-onboarding-sidebar-learn-more-get-started-welcome-illustration",baseClassName:a="nfd-onboarding-sidebar-learn-more--illustration-panel",backgroundPosition:n="center"})=>""!==window.getComputedStyle(document.body).getPropertyValue(`--${e}`)&&(0,i.jsx)(o.PanelBody,{className:`${a}__container`,initialOpen:!0,children:(0,i.jsx)("div",{className:`${a}__image`,style:{backgroundImage:`var(--${e})`,width:"100%",height:"100%",backgroundSize:"contain",backgroundRepeat:"no-repeat",backgroundPosition:n}})})}}]); -------------------------------------------------------------------------------- /build/2.7.4/508.js: -------------------------------------------------------------------------------- 1 | "use strict";(globalThis.webpackChunknewfold_Onboarding=globalThis.webpackChunknewfold_Onboarding||[]).push([[508],{6508:(n,e,a)=>{a.r(e),a.d(e,{default:()=>l});var s=a(6427),i=a(7677),c=a(790);const l=({baseClassName:n="nfd-onboarding-sidebar-learn-more--step-intro-panel",heading:e,subheading:a,icon:l})=>(0,c.jsx)(s.PanelBody,{className:n,children:(0,c.jsx)(s.PanelRow,{children:(0,c.jsxs)("div",{className:`${n}__container`,children:[(0,c.jsx)("div",{className:`${n}__container__icon`,children:(0,c.jsx)(i.A,{icon:l})}),(0,c.jsxs)("div",{className:`${n}__container__text`,children:[(0,c.jsx)("p",{className:`${n}__container__text__heading`,children:(0,c.jsx)("strong",{children:e})}),(0,c.jsx)("p",{className:`${n}__container__text__subheading`,children:a})]})]})})})}}]); -------------------------------------------------------------------------------- /build/2.7.4/672.js: -------------------------------------------------------------------------------- 1 | "use strict";(globalThis.webpackChunknewfold_Onboarding=globalThis.webpackChunknewfold_Onboarding||[]).push([[672],{6672:(e,n,a)=>{a.r(n),a.d(n,{default:()=>l});var i=a(6427),s=a(8468),d=a(790);const r=({heading:e,description:n,baseClassName:a="nfd-onboarding-sidebar-learn-more--heading-with-description"})=>(0,d.jsxs)(s.Fragment,{children:[(0,d.jsx)("h3",{className:`${a}__heading`,children:e}),(0,d.jsx)("p",{className:`${a}__description`,children:n})]}),l=({baseClassName:e="nfd-onboarding-sidebar-learn-more--info-panel",headingWithDescriptions:n})=>(0,d.jsx)(i.PanelBody,{className:e,initialOpen:!0,children:n.map(((e,n)=>(0,d.jsx)(r,{heading:e?.heading,description:e?.description},n)))})}}]); -------------------------------------------------------------------------------- /build/2.7.4/859.js: -------------------------------------------------------------------------------- 1 | "use strict";(globalThis.webpackChunknewfold_Onboarding=globalThis.webpackChunknewfold_Onboarding||[]).push([[859],{4859:(e,r,s)=>{s.r(r),s.d(r,{default:()=>c});var a=s(7143),t=s(8468),i=s(3988),n=s(1032),l=s(7044),d=s(8969),h=s(7675),_=s(790);const c=()=>{const{headerMenu:e}=(0,a.useSelect)((e=>({headerMenu:e(h.M).getHeaderMenuData()})),[]),[r,s]=(0,t.useState)(),{setDrawerActiveView:c,setSidebarActiveView:u}=(0,a.useDispatch)(h.M);return(0,t.useLayoutEffect)((()=>{s(e)}),[e]),(0,t.useEffect)((()=>{u(d.Qe),c(d.HJ)}),[]),(0,_.jsx)(n.UX,{children:(0,_.jsx)(l.Th,{children:(0,_.jsxs)(i.A,{className:"theme-header-menu-preview",children:[(0,_.jsx)("div",{className:"theme-header-menu-preview__title-bar",children:(0,_.jsxs)("div",{className:"theme-header-menu-preview__title-bar__browser",children:[(0,_.jsx)("span",{className:"theme-header-menu-preview__title-bar__browser__dot"}),(0,_.jsx)("span",{className:"theme-header-menu-preview__title-bar__browser__dot"}),(0,_.jsx)("span",{className:"theme-header-menu-preview__title-bar__browser__dot"})]})}),!r&&(0,_.jsx)(l.pA,{styling:"large",viewportWidth:1300}),r&&(0,_.jsx)(l.pA,{blockGrammer:r,styling:"large",viewportWidth:1300})]})})})}}}]); -------------------------------------------------------------------------------- /build/2.7.4/97.js: -------------------------------------------------------------------------------- 1 | "use strict";(globalThis.webpackChunknewfold_Onboarding=globalThis.webpackChunknewfold_Onboarding||[]).push([[97],{9097:(e,a,n)=>{n.r(a),n.d(a,{default:()=>l});var r=n(790);const l=({baseClassName:e="nfd-onboarding-sidebar-learn-more--support-link",link:a="#",text:n})=>""!==a&&(0,r.jsx)("a",{href:a,className:e,target:"_blank",rel:"noreferrer",children:n})}}]); -------------------------------------------------------------------------------- /build/2.7.4/993.js: -------------------------------------------------------------------------------- 1 | "use strict";(globalThis.webpackChunknewfold_Onboarding=globalThis.webpackChunknewfold_Onboarding||[]).push([[993],{1993:(a,n,e)=>{e.r(n),e.d(n,{default:()=>s});var l=e(790);const s=({children:a,baseClassName:n="nfd-onboarding-sidebar-learn-more--help-panel"})=>(0,l.jsx)("div",{className:`${n}__links`,children:a})}}]); -------------------------------------------------------------------------------- /build/2.7.4/images/ai_bg.55900f2d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/ai_bg.55900f2d.png -------------------------------------------------------------------------------- /build/2.7.4/images/ai_bg_low.d8292556.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/ai_bg_low.d8292556.png -------------------------------------------------------------------------------- /build/2.7.4/images/bluesky.733ebcbf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/bluesky.733ebcbf.png -------------------------------------------------------------------------------- /build/2.7.4/images/content.fb050ea1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/content.fb050ea1.png -------------------------------------------------------------------------------- /build/2.7.4/images/design.cc6a697f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/design.cc6a697f.png -------------------------------------------------------------------------------- /build/2.7.4/images/features.593fb09c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/features.593fb09c.png -------------------------------------------------------------------------------- /build/2.7.4/images/full-service.7f58f410.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/full-service.7f58f410.png -------------------------------------------------------------------------------- /build/2.7.4/images/full-service.adb3abd6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/full-service.adb3abd6.png -------------------------------------------------------------------------------- /build/2.7.4/images/help.19cc7e75.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/help.19cc7e75.png -------------------------------------------------------------------------------- /build/2.7.4/images/step-interstitial.00b15f9e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/step-interstitial.00b15f9e.png -------------------------------------------------------------------------------- /build/2.7.4/images/toggle-light-mode.8d7afd07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/toggle-light-mode.8d7afd07.png -------------------------------------------------------------------------------- /build/2.7.4/images/wp-admin.2908b886.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/wp-admin.2908b886.png -------------------------------------------------------------------------------- /build/2.7.4/images/wp-admin.6c8af0b4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/wp-admin.6c8af0b4.png -------------------------------------------------------------------------------- /build/2.7.4/images/wp-admin.d8650899.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/build/2.7.4/images/wp-admin.d8650899.png -------------------------------------------------------------------------------- /build/2.7.4/onboarding-restart-button.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => 'd62455f16c81c1c0e973'); 2 | -------------------------------------------------------------------------------- /build/2.7.4/onboarding-restart-button.css-rtl.css: -------------------------------------------------------------------------------- 1 | .build-with-ai{align-items:center;border:none;box-shadow:none;display:flex;height:auto;justify-content:center;text-align:center;transition:background .1s ease-in-out}.build-with-ai__link{display:flex;flex-direction:column;height:100%;position:relative;text-decoration:none}.build-with-ai__icon{flex-grow:1}.build-with-ai__icon,.build-with-ai__icon-span{align-items:center;display:flex;justify-content:center}.build-with-ai__icon-span{background-color:hsla(218,4%,56%,.1);border-radius:50%;color:#8c8f94;font-size:40px;height:100px;margin-bottom:10px;margin-top:25px;transition:background .1s ease-in-out;width:100px}.build-with-ai__text{color:#333;font-weight:400;margin:0;padding-bottom:48px;transition:color .1s ease-in-out}.build-with-ai:hover{background-color:#2271b1}.build-with-ai:hover .build-with-ai__icon-span{background-color:#fff}.build-with-ai:hover .build-with-ai__text{color:#fff} 2 | -------------------------------------------------------------------------------- /build/2.7.4/onboarding-restart-button.css.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => 'cb6286cfe4cecbf25546'); 2 | -------------------------------------------------------------------------------- /build/2.7.4/onboarding-restart-button.css.css: -------------------------------------------------------------------------------- 1 | .build-with-ai{align-items:center;border:none;box-shadow:none;display:flex;height:auto;justify-content:center;text-align:center;transition:background .1s ease-in-out}.build-with-ai__link{display:flex;flex-direction:column;height:100%;position:relative;text-decoration:none}.build-with-ai__icon{flex-grow:1}.build-with-ai__icon,.build-with-ai__icon-span{align-items:center;display:flex;justify-content:center}.build-with-ai__icon-span{background-color:hsla(218,4%,56%,.1);border-radius:50%;color:#8c8f94;font-size:40px;height:100px;margin-bottom:10px;margin-top:25px;transition:background .1s ease-in-out;width:100px}.build-with-ai__text{color:#333;font-weight:400;margin:0;padding-bottom:48px;transition:color .1s ease-in-out}.build-with-ai:hover{background-color:#2271b1}.build-with-ai:hover .build-with-ai__icon-span{background-color:#fff}.build-with-ai:hover .build-with-ai__text{color:#fff} 2 | -------------------------------------------------------------------------------- /build/2.7.4/onboarding-restart-button.css.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";var e={};(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),((window.newfold=window.newfold||{}).Onboarding=window.newfold.Onboarding||{})["onboarding-restart-button.css"]=e})(); -------------------------------------------------------------------------------- /build/2.7.4/onboarding.asset.php: -------------------------------------------------------------------------------- 1 | array('lodash', 'react', 'react-jsx-runtime', 'wp-a11y', 'wp-api-fetch', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-deprecated', 'wp-dom', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-preferences', 'wp-primitives', 'wp-style-engine', 'wp-url'), 'version' => '32b6345cc1239c3e26c7'); 2 | -------------------------------------------------------------------------------- /build/2.7.4/sitegen-theme-marker.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => '6db690db53b5e616aafe'); 2 | -------------------------------------------------------------------------------- /build/2.7.4/sitegen-theme-marker.css-rtl.css: -------------------------------------------------------------------------------- 1 | .theme-name{align-items:center;display:flex;flex-direction:row}.theme-name svg{margin-right:8px}.nfd-onboarding-sitegen-theme-marker-filled{fill:#1d2327}.theme.active .nfd-onboarding-sitegen-theme-marker-filled{fill:none}.nfd-onboarding-sitegen-theme-marker-title{margin-right:8px;overflow:hidden;text-overflow:ellipsis;width:120px} 2 | -------------------------------------------------------------------------------- /build/2.7.4/sitegen-theme-marker.css.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => '3b7b1b6d7ee01c692743'); 2 | -------------------------------------------------------------------------------- /build/2.7.4/sitegen-theme-marker.css.css: -------------------------------------------------------------------------------- 1 | .theme-name{align-items:center;display:flex;flex-direction:row}.theme-name svg{margin-left:8px}.nfd-onboarding-sitegen-theme-marker-filled{fill:#1d2327}.theme.active .nfd-onboarding-sitegen-theme-marker-filled{fill:none}.nfd-onboarding-sitegen-theme-marker-title{margin-left:8px;overflow:hidden;text-overflow:ellipsis;width:120px} 2 | -------------------------------------------------------------------------------- /build/2.7.4/sitegen-theme-marker.css.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";var e={};(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),((window.newfold=window.newfold||{}).Onboarding=window.newfold.Onboarding||{})["sitegen-theme-marker.css"]=e})(); -------------------------------------------------------------------------------- /crowdin.yml: -------------------------------------------------------------------------------- 1 | "project_id_env": "CROWDIN_PROJECT_ID" 2 | "api_token_env": "CROWDIN_PERSONAL_TOKEN" 3 | "base_path": "." 4 | 5 | "preserve_hierarchy": true 6 | 7 | "files": [ 8 | { 9 | "source": "/languages/wp-module-onboarding.pot", 10 | "translation": "/languages/wp-module-onboarding-%locale%.po", 11 | "languages_mapping": { 12 | "locale": { 13 | "de": "de_DE", 14 | "en-AU": "en_AU", 15 | "en-GB": "en_GB", 16 | "es-ES": "es_ES", 17 | "fr": "fr_FR", 18 | "it": "it_IT", 19 | "nl": "nl_NL" 20 | } 21 | } 22 | } 23 | ] -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "http://localhost:8880", 3 | "env": { 4 | "wpUsername": "admin", 5 | "wpPassword": "password" 6 | }, 7 | "fixturesFolder": "tests/cypress/fixtures", 8 | "integrationFolder": "tests/cypress/integration", 9 | "pluginsFile": "tests/cypress/plugins/index.js", 10 | "screenshotsFolder": "tests/cypress/screenshots", 11 | "supportFile": "tests/cypress/support/index.js", 12 | "video": false, 13 | "videosFolder": "tests/cypress/videos", 14 | "videoUploadOnPasses": false, 15 | "chromeWebSecurity": false 16 | } 17 | -------------------------------------------------------------------------------- /includes/Mustache/Mustache.php: -------------------------------------------------------------------------------- 1 | mustache_engine = new \Mustache_Engine( 21 | array( 22 | 'loader' => new \Mustache_Loader_FilesystemLoader( __DIR__ . '/Templates' ), 23 | ) 24 | ); 25 | } 26 | 27 | /** 28 | * Render respective template data. 29 | * 30 | * @param string $template_name Template Name 31 | * @param array $data Data 32 | * @return string 33 | */ 34 | public function render_template( $template_name, $data ) { 35 | return $this->mustache_engine->loadTemplate( $template_name )->render( $data ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /includes/Mustache/Templates/themeStylesheet.mustache: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: {{ site_title }} 3 | Author: {{ site_title }} & {{ brand_name }} 4 | Author URI: {{ site_url }} 5 | Description: A Custom WordPress Theme built for {{ site_title }} by {{ brand_name }} 6 | Version: 1.0.0 7 | Template: {{ parent_theme_slug }} 8 | Text Domain: {{ child_theme_slug }} 9 | */ 10 | -------------------------------------------------------------------------------- /includes/WP_CLI.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /phpunit.xml: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | tests/phpunit 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/Brands/bluehost/bluesky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/src/Brands/bluehost/bluesky.png -------------------------------------------------------------------------------- /src/Brands/bluehost/dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Brands/bluehost/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Brands/bluehost/step-interstitial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/src/Brands/bluehost/step-interstitial.png -------------------------------------------------------------------------------- /src/Brands/bluehost/wp-admin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/src/Brands/bluehost/wp-admin.png -------------------------------------------------------------------------------- /src/Brands/crazy-domains/full-service.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/src/Brands/crazy-domains/full-service.png -------------------------------------------------------------------------------- /src/Brands/crazy-domains/icon-empty.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/src/Brands/crazy-domains/icon-empty.svg -------------------------------------------------------------------------------- /src/Brands/crazy-domains/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Brands/crazy-domains/wp-admin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/src/Brands/crazy-domains/wp-admin.png -------------------------------------------------------------------------------- /src/Brands/newfold/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Brands/webcom/dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Brands/webcom/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Brands/wordpress/dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Brands/wordpress/full-service.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/src/Brands/wordpress/full-service.png -------------------------------------------------------------------------------- /src/Brands/wordpress/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Brands/wordpress/wp-admin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newfold-labs/wp-module-onboarding/65fbf5135aa97d87653d5b5ba9e52d6f5dfa43ab/src/Brands/wordpress/wp-admin.png -------------------------------------------------------------------------------- /src/OnboardingSPA/chapters/commerce.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | import { CHAPTER_COMMERCE } from '../../constants'; 4 | import ChapterInterstitialLoader from '../components/Loaders/Chapter/Interstitial'; 5 | import { stepAddress } from '../steps/Ecommerce/StepAddress/step'; 6 | import { stepProducts } from '../steps/Ecommerce/StepProducts/step'; 7 | import { Chapter } from '../data/models/Chapter'; 8 | import { Step } from '../data/models/Step'; 9 | import { ECOMMERCE_FLOW } from '../data/flows/constants'; 10 | 11 | const interstitialStep = new Step( { 12 | path: `/${ ECOMMERCE_FLOW }/step/interstitial`, 13 | Component: ChapterInterstitialLoader, 14 | } ); 15 | 16 | const steps = [ stepAddress, stepProducts ]; 17 | 18 | export const commerce = new Chapter( { 19 | id: CHAPTER_COMMERCE, 20 | name: __( 'Commerce', 'wp-module-onboarding' ), 21 | steps, 22 | interstitialSteps: [ interstitialStep ], 23 | } ); 24 | -------------------------------------------------------------------------------- /src/OnboardingSPA/chapters/features.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | import { CHAPTER_FEATURES } from '../../constants'; 4 | import { stepSiteFeatures } from '../steps/SiteFeatures/step'; 5 | import { Chapter } from '../data/models/Chapter'; 6 | 7 | const steps = [ stepSiteFeatures ]; 8 | 9 | export const features = new Chapter( { 10 | id: CHAPTER_FEATURES, 11 | name: __( 'Features', 'wp-module-onboarding' ), 12 | steps, 13 | } ); 14 | -------------------------------------------------------------------------------- /src/OnboardingSPA/chapters/layoutContent.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | import { CHAPTER_LAYOUT_AND_CONTENT } from '../../constants'; 4 | import ChapterInterstitialLoader from '../components/Loaders/Chapter/Interstitial'; 5 | import { stepDesignHeaderMenu } from '../steps/DesignHeaderMenu/step'; 6 | import { stepDesignHomepageMenu } from '../steps/DesignHomepageMenu/step'; 7 | import { stepSitePages } from '../steps/SitePages/step'; 8 | import { Chapter } from '../data/models/Chapter'; 9 | import { Step } from '../data/models/Step'; 10 | import { DEFAULT_FLOW } from '../data/flows/constants'; 11 | 12 | const interstitialStep = new Step( { 13 | path: `/${ DEFAULT_FLOW }/step/interstitial/${ CHAPTER_LAYOUT_AND_CONTENT }`, 14 | Component: ChapterInterstitialLoader, 15 | } ); 16 | 17 | const steps = [ stepDesignHeaderMenu, stepDesignHomepageMenu, stepSitePages ]; 18 | 19 | export const layoutContent = new Chapter( { 20 | id: CHAPTER_LAYOUT_AND_CONTENT, 21 | name: __( 'Layout & Content', 'wp-module-onboarding' ), 22 | steps, 23 | interstitialSteps: [ interstitialStep ], 24 | } ); 25 | -------------------------------------------------------------------------------- /src/OnboardingSPA/chapters/siteGen/core.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | import { CHAPTER_SITEGEN_CORE } from '../../../constants'; 4 | import { Chapter } from '../../data/models/Chapter'; 5 | import { stepSiteGenSiteDetails } from '../../steps/SiteGen/SiteDetails/step'; 6 | import { stepSiteGenSiteLogo } from '../../steps/SiteGen/SiteLogo/step'; 7 | 8 | const steps = [ stepSiteGenSiteDetails, stepSiteGenSiteLogo ]; 9 | 10 | export const siteGenCore = new Chapter( { 11 | id: CHAPTER_SITEGEN_CORE, 12 | name: __( 'Sitegen Core', 'wp-module-onboarding' ), 13 | steps, 14 | } ); 15 | -------------------------------------------------------------------------------- /src/OnboardingSPA/chapters/siteGen/design.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | import { CHAPTER_SITEGEN_DESIGN } from '../../../constants'; 4 | import { Chapter } from '../../data/models/Chapter'; 5 | import { stepSiteGenEditor } from '../../steps/SiteGen/Editor/step'; 6 | import { stepSiteGenPreview } from '../../steps/SiteGen/Preview/step'; 7 | 8 | const steps = [ stepSiteGenPreview, stepSiteGenEditor ]; 9 | 10 | export const siteGenDesign = new Chapter( { 11 | id: CHAPTER_SITEGEN_DESIGN, 12 | name: __( 'Sitegen Design', 'wp-module-onboarding' ), 13 | steps, 14 | } ); 15 | -------------------------------------------------------------------------------- /src/OnboardingSPA/chapters/siteGen/features.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | import { CHAPTER_SITEGEN_FEATURES } from '../../../constants'; 4 | import { Chapter } from '../../data/models/Chapter'; 5 | import { stepSiteGenExperience } from '../../steps/SiteGen/Experience/step'; 6 | 7 | const steps = [ stepSiteGenExperience ]; 8 | 9 | export const siteGenFeatures = new Chapter( { 10 | id: CHAPTER_SITEGEN_FEATURES, 11 | name: __( 'Sitegen Features', 'wp-module-onboarding' ), 12 | steps, 13 | } ); 14 | -------------------------------------------------------------------------------- /src/OnboardingSPA/chapters/sitegen.js: -------------------------------------------------------------------------------- 1 | import { CHAPTER_SITEGEN } from '../../constants'; 2 | import { Chapter } from '../data/models/Chapter'; 3 | import { __ } from '@wordpress/i18n'; 4 | import { stepSiteGenSiteDetails } from '../steps/SiteGen/SiteDetails/step'; 5 | import { stepSiteGenSiteLogo } from '../steps/SiteGen/SiteLogo/step'; 6 | import { stepSiteGenExperience } from '../steps/SiteGen/Experience/step'; 7 | import { stepSiteGenPreview } from '../steps/SiteGen/Preview/step'; 8 | import { stepSiteGenEditor } from '../steps/SiteGen/Editor/step'; 9 | 10 | const steps = [ 11 | stepSiteGenSiteDetails, 12 | stepSiteGenSiteLogo, 13 | stepSiteGenExperience, 14 | stepSiteGenPreview, 15 | stepSiteGenEditor, 16 | ]; 17 | 18 | export const sitegen = new Chapter( { 19 | id: CHAPTER_SITEGEN, 20 | name: __( 'Site Generation', 'wp-module-onboarding' ), 21 | steps, 22 | } ); 23 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Accordion/index.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | /** 3 | * Shows an open/closed accordion using native
. 4 | * 5 | * `sumamry` is a string or children to show inside the accordion next to the collapse. 6 | * `classname` is passed to the top-level details element. 7 | * `children` is put inside the accordion. 8 | * `isOpen` is a boolean to set the default state for the accordion. 9 | * 10 | * @param {object} props 11 | * @returns WPComponent 12 | */ 13 | const Accordion = ({ summary, className, children, isOpen = false }) => { 14 | return ( 15 |
19 | 20 | {summary} 21 | 22 |
{children}
23 |
24 | ); 25 | }; 26 | 27 | export default Accordion; 28 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Accordion/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-accordion { 2 | border: $border-width solid var(--nfd-onboarding-contrast); 3 | margin-bottom: $grid-unit-05; 4 | margin-top: $grid-unit-05; 5 | opacity: 0.8; 6 | padding: $border-width; 7 | transition: opacity 233ms ease; 8 | 9 | @include reduce-motion("transition"); 10 | 11 | &:hover, 12 | &:focus, 13 | &[open] { 14 | opacity: 1; 15 | } 16 | 17 | &__summary { 18 | background-color: var(--nfd-onboarding-base); 19 | color: var(--nfd-onboarding-contrast); 20 | cursor: pointer; 21 | font-weight: 700; 22 | padding: $grid-unit-05 $grid-unit-10; 23 | 24 | p { 25 | display: inline; 26 | } 27 | } 28 | 29 | &__content { 30 | margin: 0 $grid-unit-20; 31 | padding: $grid-unit-10 0; 32 | color: var(--nfd-onboarding-contrast); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/AdminBar/stylesheet.scss: -------------------------------------------------------------------------------- 1 | $light-grey : #a0a5aa; 2 | 3 | .nfd-onboarding-header { 4 | 5 | &__admin-bar { 6 | height: 32px; 7 | background-color: var(--nfd-onboarding-admin-bar-background); 8 | width: 100%; 9 | color: var(--nfd-onboarding-admin-bar-color); 10 | font-size: 13px; 11 | font-weight: 400; 12 | margin: 0; 13 | padding: 5px 7px; 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | box-sizing: border-box; 18 | 19 | &__wplogo { 20 | display: flex; 21 | align-items: center; 22 | 23 | span { 24 | margin-left: 7px; 25 | 26 | &:first-of-type { 27 | color: $light-grey; 28 | margin-left: 0; 29 | } 30 | } 31 | } 32 | 33 | &__profile { 34 | display: flex; 35 | align-items: center; 36 | margin-right: 2.5px; 37 | 38 | &__greeting { 39 | margin-right: 6px; 40 | } 41 | 42 | &__avatar { 43 | height: 16px; 44 | width: 16px; 45 | display: inline-block; 46 | 47 | img { 48 | border: 1px solid #8c8f94; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: contain; 52 | } 53 | } 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/App/index.js: -------------------------------------------------------------------------------- 1 | // WordPress 2 | import { FullscreenMode } from '@wordpress/interface'; 3 | import { SlotFillProvider } from '@wordpress/components'; 4 | import { Fragment } from '@wordpress/element'; 5 | 6 | // Components 7 | import { FlowStateHandler } from '../StateHandlers'; 8 | 9 | const App = () => { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | }; 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Button/ButtonDark/index.js: -------------------------------------------------------------------------------- 1 | import { Button } from '@wordpress/components'; 2 | import classNames from 'classnames'; 3 | 4 | const ButtonDark = ( { children, onClick } ) => { 5 | return ( 6 | 12 | ); 13 | }; 14 | 15 | export default ButtonDark; 16 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Button/ButtonDark/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-button { 2 | 3 | &--dark { 4 | background-color: var(--nfd-onboarding-navigation-back-background); 5 | height: 36px; 6 | color: var(--nfd-onboarding-primary); 7 | border-radius: 8px; 8 | padding: 0, 13px, 0 13px; 9 | 10 | &:hover { 11 | background-color: #fff; 12 | color: #272d30; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Button/ButtonNext/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-button { 2 | 3 | &--next { 4 | background-color: var(--nfd-onboarding-primary); 5 | color: var(--nfd-onboarding-secondary); 6 | width: 80px; 7 | height: 50px; 8 | font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem); 9 | border-radius: 8px; 10 | padding: 16px; 11 | 12 | &--disabled { 13 | background-color: rgba(var(--nfd-onboarding-primary-rgb), 0.4); 14 | 15 | &:hover { 16 | cursor: not-allowed; 17 | color: var(--nfd-onboarding-secondary); 18 | } 19 | } 20 | 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Button/ButtonWhite/index.js: -------------------------------------------------------------------------------- 1 | import { Button } from '@wordpress/components'; 2 | import { Icon } from '@wordpress/icons'; 3 | import classNames from 'classnames'; 4 | 5 | const ButtonWhite = ( { className, text, onClick, icon } ) => { 6 | return ( 7 | 19 | ); 20 | }; 21 | 22 | export default ButtonWhite; 23 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Button/ButtonWhite/stylesheet.scss: -------------------------------------------------------------------------------- 1 | 2 | .nfd-onboarding-button { 3 | 4 | &--white { 5 | justify-content: center; 6 | align-items: center; 7 | width: 100%; 8 | background: var(--nfd-onboarding-white); 9 | color: var(--wp-admin-theme-color); 10 | border: 1px solid var(--wp-admin-theme-color); 11 | height: 40px; 12 | border-radius: 2px; 13 | margin: 10px 0; 14 | 15 | &:hover { 16 | color: var(--wp-admin-theme-color-darker-20); 17 | border: 1px solid var(--wp-admin-theme-color-darker-20); 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Button/ButtonWithBackground/index.js: -------------------------------------------------------------------------------- 1 | import { Button } from '@wordpress/components'; 2 | import classNames from 'classnames'; 3 | 4 | const ButtonWithBackground = ( { className, text, onClick = false } ) => { 5 | return ( 6 | 16 | ); 17 | }; 18 | 19 | export default ButtonWithBackground; 20 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Button/ButtonWithBackground/stylesheet.scss: -------------------------------------------------------------------------------- 1 | 2 | .nfd-onboarding-button { 3 | 4 | &--background { 5 | justify-content: center; 6 | align-items: center; 7 | width: 100%; 8 | color: var(--nfd-onboarding-white); 9 | height: 40px; 10 | border: none; 11 | margin: 10px 0; 12 | white-space: normal !important; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-nav-card-button { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | color: var(--nfd-onboarding-white); 6 | background-color: var(--wp-admin-theme-color-darker-10); 7 | padding: 16px; 8 | width: 90%; 9 | font-size: clamp(1rem, 0.91rem + 0.43vw, 2rem); 10 | font-weight: 500; 11 | border-radius: 4px; 12 | border: none; 13 | outline: 1px solid transparent; 14 | 15 | &__icon { 16 | fill: var(--nfd-onboarding-white); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Button/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Common Button Component 3 | * Different variants can be added later based on our requirements 4 | * 5 | * @return Button 6 | */ 7 | 8 | const Button = ( { children, handleClick, disabled, className } ) => { 9 | const handleBtnClick = () => { 10 | if ( typeof handleClick === 'function' ) { 11 | handleClick(); 12 | } 13 | }; 14 | 15 | return ( 16 | 24 | ); 25 | }; 26 | 27 | export default Button; 28 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Button/stylesheet.scss: -------------------------------------------------------------------------------- 1 | @import "./ButtonWithBackground/stylesheet"; 2 | @import "./ButtonWhite/stylesheet"; 3 | 4 | .nfd-card-button { 5 | cursor: pointer; 6 | 7 | &:disabled { 8 | cursor: default; 9 | opacity: 0.3; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/CardHeader/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Common Heading Component for Card Header 3 | * Includes one heading, one sub-heading and one question 4 | * More text types can be added later based on requirements 5 | * 6 | * @return CardHeader 7 | */ 8 | 9 | import { memo } from '@wordpress/element'; 10 | 11 | const CardHeader = ( { heading, subHeading, question } ) => { 12 | return ( 13 |
14 | { heading && ( 15 |

{ heading }

16 | ) } 17 | 18 | { subHeading && ( 19 |

26 | { subHeading } 27 |

28 | ) } 29 | 30 | { question && ( 31 |

{ question }

32 | ) } 33 |
34 | ); 35 | }; 36 | 37 | export default memo( CardHeader ); 38 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/CardHeader/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-step-card-heading { 2 | margin: 5px; 3 | font-weight: 700; 4 | line-height: 1.25; 5 | text-align: center; 6 | font-size: clamp(1rem, 0.81rem + 0.92vw, 3.125rem); 7 | } 8 | 9 | .nfd-step-card-subheading { 10 | margin: 5px; 11 | font-weight: 700; 12 | color: var(--wp-admin-theme-color); 13 | font-size: clamp(1rem, 0.91rem + 0.43vw, 2rem); 14 | text-align: center; 15 | line-height: 1; 16 | } 17 | 18 | .nfd-step-card-subheading-other { 19 | font-weight: 700; 20 | margin-top: 35px; 21 | color: var(--wp-admin-theme-color); 22 | font-size: clamp(1rem, 0.93rem + 0.32vw, 1.75rem); 23 | } 24 | 25 | .nfd-step-card-question { 26 | margin: 18px; 27 | font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 2.5rem); 28 | line-height: 1.2; 29 | } 30 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/CardWithOptions/index.js: -------------------------------------------------------------------------------- 1 | import { memo } from '@wordpress/element'; 2 | import OptionWithHeadingSubHeading from '../OptionWithHeadingSubHeading'; 3 | 4 | const CardWithOptions = ( { title, options, selection, callback } ) => { 5 | const buildCardOptions = () => { 6 | return options.map( ( data, idx ) => { 7 | return ( 8 | 16 | ); 17 | } ); 18 | }; 19 | 20 | return ( 21 |
22 |
{ title }
23 |
{ buildCardOptions() }
24 |
25 | ); 26 | }; 27 | 28 | export default memo( CardWithOptions ); 29 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/CardWithOptions/stylesheet.scss: -------------------------------------------------------------------------------- 1 | $background-color: var(--nfd-onboarding-card-background); 2 | 3 | .nfd-sg-card { 4 | 5 | margin: 8px; 6 | max-width: 90vw; 7 | padding: 24px 16px; 8 | border-radius: 12px; 9 | background-color: $background-color; 10 | width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem); 11 | box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-primary-rgb), $alpha: 0.05); 12 | 13 | @media (max-width: #{ ($break-large) }) { 14 | margin: 12px; 15 | padding: 12px 6px; 16 | } 17 | 18 | &__title { 19 | color: var(--nfd-onboarding-primary); 20 | margin: 16px; 21 | line-height: 1.5; 22 | font-size: 18px; 23 | text-align: center; 24 | margin-bottom: 30px; 25 | font-weight: 400; 26 | letter-spacing: 1.5; 27 | } 28 | 29 | &__data { 30 | margin: 12px; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/CheckboxTemplate/CheckboxList/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .checkbox-list { 2 | display: flex; 3 | justify-content: center; 4 | align-items: flex-start; 5 | 6 | @media (max-width: #{ ($break-medium) }) { 7 | flex-direction: column; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | &-col { 13 | display: flex; 14 | align-items: center; 15 | flex-direction: column; 16 | justify-content: center; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .checkbox-skeleton-item { 2 | height: 45px; 3 | margin: 12px; 4 | padding: 16px; 5 | margin-top: 16px; 6 | border: 0.5px solid var(--nfd-onboarding-light-gray-6); 7 | cursor: not-allowed; 8 | width: clamp(15rem, 25vw, 35rem); 9 | box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295); 10 | background: var(--nfd-onboarding-light-gray-7); 11 | background-repeat: no-repeat; 12 | background-image: linear-gradient(to right, var(--nfd-onboarding-light-gray-7) 0%, var(--nfd-onboarding-light-gray) 20%, var(--nfd-onboarding-light-gray-7) 40%, var(--nfd-onboarding-light-gray-7) 100%); 13 | } 14 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/CheckboxTemplate/index.js: -------------------------------------------------------------------------------- 1 | export { default as CheckboxItem } from './CheckboxItem'; 2 | export { default as CheckboxList } from './CheckboxList'; 3 | export { default as CheckboxListSkeleton } from './CheckboxListSkeleton'; 4 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/ComingSoon/contents.js: -------------------------------------------------------------------------------- 1 | import { __, sprintf } from '@wordpress/i18n'; 2 | 3 | import { translations } from '../../utils/locales/translations'; 4 | 5 | const getContents = () => { 6 | return { 7 | title: __( 'Coming Soon', 'wp-module-onboarding' ), 8 | subtitle: sprintf( 9 | /* translators: %s: site or store */ 10 | __( 11 | 'Keep your %s private until you click launch', 12 | 'wp-module-onboarding' 13 | ), 14 | translations( 'site' ) 15 | ), 16 | desc: sprintf( 17 | /* translators: %s: site or store */ 18 | __( 19 | "We'll show a placeholder page to logged-out visitors while you build your %s.", 20 | 'wp-module-onboarding' 21 | ), 22 | translations( 'site' ) 23 | ), 24 | }; 25 | }; 26 | 27 | export default getContents; 28 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/ComingSoon/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .coming_soon { 2 | 3 | &__wrapper { 4 | width: 100%; 5 | display: flex; 6 | justify-content: center; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Content/index.js: -------------------------------------------------------------------------------- 1 | import { Route, Routes } from 'react-router-dom'; 2 | import { Fragment, memo, Suspense, useCallback } from '@wordpress/element'; 3 | import { useSelect } from '@wordpress/data'; 4 | 5 | import { store as nfdOnboardingStore } from '../../store'; 6 | 7 | /** 8 | * Primary content area within the . 9 | * 10 | * @return WPComponent 11 | */ 12 | 13 | const Content = () => { 14 | const { routes } = useSelect( ( select ) => { 15 | return { 16 | routes: select( nfdOnboardingStore ).getRoutes(), 17 | }; 18 | } ); 19 | 20 | const getMappedPages = useCallback( () => { 21 | return routes?.map( ( route ) => ( 22 | } 27 | /> 28 | ) ); 29 | }, [ routes ] ); 30 | 31 | return ( 32 |
33 | }> 34 | { getMappedPages( routes ) } 35 | 36 |
37 | ); 38 | }; 39 | 40 | const ContentMemo = memo( Content ); 41 | export default ContentMemo; 42 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Content/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .interface-interface-skeleton__content { 2 | background-color: var(--nfd-onboarding-content-base); 3 | color: var(--nfd-onboarding-content-contrast); 4 | } 5 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHomepageMenu.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | const DesignHomepageMenu = () => { 4 | return ( 5 |
6 |

{__('Pick a Homepage Design', 'wp-module-onboarding')}

7 |

8 | {__( 9 | 'Panel will show a few Homepage Patterns.', 10 | 'wp-module-onboarding' 11 | )} 12 |

13 |
14 | ); 15 | }; 16 | 17 | export default DesignHomepageMenu; 18 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesMenu.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | const DesignThemeStylesMenu = () => { 4 | return ( 5 |
6 |

{ __( 'Pick a Theme Style', 'wp-module-onboarding' ) }

7 |

{ __( 'No Style Selected', 'wp-module-onboarding' ) }

8 |

9 | { __( 10 | 'Panel will show Theme details', 11 | 'wp-module-onboarding' 12 | ) } 13 |

14 |

{ __( 'With Style Selected', 'wp-module-onboarding' ) }

15 |

16 | { __( 17 | 'Panel will show single-column of other Styles.', 18 | 'wp-module-onboarding' 19 | ) } 20 |

21 |
22 | ); 23 | }; 24 | 25 | export default DesignThemeStylesMenu; 26 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemes.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | const DesignThemes = () => { 4 | return ( 5 |
6 |

{__('Pick a Theme', 'wp-module-onboarding')}

7 |

{__('No Theme Selected', 'wp-module-onboarding')}

8 |

9 | {__('Panel will show contextual help', 'wp-module-onboarding')} 10 |

11 |

{__('With Theme Selected', 'wp-module-onboarding')}

12 |

13 | {__( 14 | 'Panel will show single-column of other Themes.', 15 | 'wp-module-onboarding' 16 | )} 17 |

18 |
19 | ); 20 | }; 21 | 22 | export default DesignThemes; 23 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Drawer/DrawerPanel/NavPage.js: -------------------------------------------------------------------------------- 1 | import { chevronLeft } from '@wordpress/icons'; 2 | 3 | import { Button } from '@wordpress/components'; 4 | import { VIEW_NAV_PRIMARY } from '../../../../constants'; 5 | import { __ } from '@wordpress/i18n'; 6 | import { store as nfdOnboardingStore } from '../../../store'; 7 | import { useDispatch } from '@wordpress/data'; 8 | import Animate from '../../Animate'; 9 | 10 | const NavPage = () => { 11 | const { setDrawerActiveView } = useDispatch( nfdOnboardingStore ); 12 | 13 | return ( 14 | 15 | 23 | 24 | ); 25 | }; 26 | 27 | export default NavPage; 28 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Drawer/DrawerPanel/WithDesignBack.js: -------------------------------------------------------------------------------- 1 | import { Button } from '@wordpress/components'; 2 | import { __ } from '@wordpress/i18n'; 3 | import { chevronLeft } from '@wordpress/icons'; 4 | import { useDispatch } from '@wordpress/data'; 5 | 6 | import { store as nfdOnboardingStore } from '../../../store'; 7 | import { VIEW_NAV_DESIGN } from '../../../../constants'; 8 | import Animate from '../../Animate'; 9 | 10 | const WithDesignBack = ( { children } ) => { 11 | const { setDrawerActiveView } = useDispatch( nfdOnboardingStore ); 12 | 13 | return ( 14 | 15 | 23 | { children } 24 | 25 | ); 26 | }; 27 | 28 | export default WithDesignBack; 29 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Drawer/index.js: -------------------------------------------------------------------------------- 1 | import { useDispatch } from '@wordpress/data'; 2 | import { useViewportMatch } from '@wordpress/compose'; 3 | import { Fragment, useEffect, memo } from '@wordpress/element'; 4 | 5 | import DrawerPanel from './DrawerPanel'; 6 | import DrawerToggle from './DrawerToggle'; 7 | import { store as nfdOnboardingStore } from '../../store'; 8 | 9 | /** 10 | * Off-canvas drawer to left of viewport. 11 | * 12 | * @param {*} param0 13 | * @return 14 | */ 15 | const Drawer = ( { isDefaultOpen = false } ) => { 16 | const isDesktopViewport = useViewportMatch( 'medium' ); 17 | const { setIsDrawerOpened } = useDispatch( nfdOnboardingStore ); 18 | 19 | useEffect( () => { 20 | setIsDrawerOpened( isDefaultOpen && isDesktopViewport ); 21 | }, [ isDefaultOpen, isDesktopViewport, setIsDrawerOpened ] ); 22 | 23 | return ( 24 | 25 | 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default memo( Drawer ); 32 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/ErrorModal/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .components-modal__frame { 2 | max-width: 40%; 3 | 4 | @media (max-width: #{ ($break-medium) }) { 5 | max-width: 100%; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/ErrorState/Step/index.js: -------------------------------------------------------------------------------- 1 | import CommonLayout from '../../Layouts/Common'; 2 | import HeadingWithSubHeading from '../../Heading/HeadingWithSubHeading'; 3 | import NeedHelpTag from '../../NeedHelpTag'; 4 | 5 | const StepErrorState = ( { title, subtitle, error } ) => { 6 | return ( 7 | 8 | 9 |
10 |

{ error }

11 | 12 | 13 | ); 14 | }; 15 | 16 | export default StepErrorState; 17 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/ErrorState/Step/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .step-error-state { 2 | justify-content: center; 3 | 4 | &__logo { 5 | background-image: var(--nfd-onboarding-step-error-icon); 6 | background-size: contain; 7 | background-repeat: no-repeat; 8 | background-position: center; 9 | width: 50vw; 10 | height: 400px; 11 | 12 | @media (max-width: #{($break-medium)}) { 13 | width: 100vw; 14 | height: 30vh; 15 | } 16 | } 17 | 18 | &__error { 19 | padding: 0; 20 | margin-bottom: 20px; 21 | font-weight: 400; 22 | text-align: center; 23 | font-size: clamp(0.85rem, 3.2vw, 1.7rem); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/ErrorState/index.js: -------------------------------------------------------------------------------- 1 | export { default as StepErrorState } from './Step'; 2 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/ErrorState/stylesheet.scss: -------------------------------------------------------------------------------- 1 | @import "./Step/stylesheet"; 2 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/ExitToWordPress/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-etw__buttons { 2 | display: flex; 3 | margin-top: $grid-unit-30; 4 | column-gap: $grid-unit-20; 5 | .components-button { 6 | width: 50%; 7 | justify-content: center; 8 | } 9 | } -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Footer/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-footer { 2 | position: absolute; 3 | bottom: 0; 4 | left: 0; 5 | z-index: 1; 6 | 7 | display: flex; 8 | flex-direction: row; 9 | 10 | height: auto; 11 | width: 20%; 12 | border: none; 13 | 14 | &__end { 15 | position: absolute; 16 | right: 25px; 17 | bottom: 25px; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | 22 | @media (max-width: #{ ($break-small) }) { 23 | right: 16px; 24 | bottom: 20px; 25 | } 26 | } 27 | 28 | &--background { 29 | background-color: rgba(var(--nfd-onboarding-secondary-rgb), 0.75); 30 | } 31 | 32 | @media (max-width: #{ ($break-small) }) { 33 | width: 100%; 34 | backdrop-filter: blur(2px); 35 | background: rgba(var(--nfd-onboarding-secondary-rgb), 0.5); 36 | border-top: 1px solid rgba(var(--nfd-onboarding-primary-rgb), 0.25); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Grid/index.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | 3 | /** 4 | * Grid Component 5 | * Shows the components in a grid view 6 | * 7 | * @param {Object} root0 8 | * @param {string} root0.className 9 | * @param {number} root0.size 10 | * @param {number} root0.colGap 11 | * @param {Object} root0.children 12 | * @return {WPComponent} NFDOnboarding Grid 13 | */ 14 | const Grid = ( { className = '', size, colGap = 0, children } ) => { 15 | return ( 16 |
23 | { children } 24 |
25 | ); 26 | }; 27 | 28 | export default Grid; 29 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Grid/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-grid { 2 | width: 100%; 3 | display: grid; 4 | justify-content: center; 5 | 6 | @media (max-width: #{ ($break-huge) }) { 7 | grid-template-columns: repeat(2, 1fr) !important; 8 | } 9 | 10 | @media (max-width: #{ ($break-small) }) { 11 | grid-template-columns: 1fr !important; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Header/components/SiteBuildHeader/HeaderEnd.js: -------------------------------------------------------------------------------- 1 | import { Fragment } from '@wordpress/element'; 2 | import { Slot } from '@wordpress/components'; 3 | import { useSelect } from '@wordpress/data'; 4 | 5 | import StepNavigation from './step-navigation'; 6 | import { store as nfdOnboardingStore } from '../../../../store'; 7 | import { SIDEBAR_MENU_SLOTFILL_PREFIX } from '../../../../../constants'; 8 | 9 | const HeaderEnd = () => { 10 | const { sidebars, isHeaderNavigationEnabled } = useSelect( ( select ) => { 11 | return { 12 | sidebars: select( nfdOnboardingStore ).getSidebars(), 13 | isHeaderNavigationEnabled: 14 | select( nfdOnboardingStore ).isHeaderNavigationEnabled(), 15 | }; 16 | } ); 17 | 18 | return ( 19 | 20 | { isHeaderNavigationEnabled && } 21 | { sidebars.map( ( sidebar ) => { 22 | return ( 23 | 27 | ); 28 | } ) } 29 | 30 | ); 31 | }; 32 | 33 | export default HeaderEnd; 34 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Heading/AIHeading/index.js: -------------------------------------------------------------------------------- 1 | import { memo } from '@wordpress/element'; 2 | import OrbAnimation from '../../OrbAnimation'; 3 | const AIHeading = ( { title } ) => { 4 | return ( 5 |
6 | 7 |
{ title }
8 |
9 | ); 10 | }; 11 | 12 | export default memo( AIHeading ); 13 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .ai-heading { 2 | 3 | width: 100%; 4 | display: flex; 5 | margin: 16px; 6 | align-items: center; 7 | 8 | .wnd-ai-logo { 9 | margin-right: 5px; 10 | } 11 | 12 | &--title { 13 | margin: 10px; 14 | line-height: 1.5; 15 | font-weight: 500; 16 | color: var(--nfd-onboarding-primary); 17 | font-size: clamp(1.2rem, 1.1rem + 0.273vw, 2.5rem); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Heading/HeadingWithSubHeading/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Interface Cards with standard design. 3 | * 4 | * @param {Object} root0 5 | * @param {string} root0.title 6 | * @param {string} root0.subtitle 7 | * @param {Object} root0.children 8 | */ 9 | const HeadingWithSubHeading = ( { title, subtitle, children } ) => { 10 | return ( 11 |
12 |

{ title }

13 | { subtitle && ( 14 |

{ subtitle }

15 | ) } 16 | { children } 17 |
18 | ); 19 | }; 20 | 21 | export default HeadingWithSubHeading; 22 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Heading/HeadingWithSubHeading/stylesheet.scss: -------------------------------------------------------------------------------- 1 | 2 | .nfd-main-heading { 3 | width: 96%; 4 | margin: 50px 0 50px; 5 | line-height: 1; 6 | 7 | &__title { 8 | font-weight: 700; 9 | text-align: center; 10 | color: var(--nfd-onboarding-primary); 11 | margin: 35px !important; 12 | font-size: clamp(1.6rem, 4vw, 3.6rem); 13 | } 14 | 15 | &__subtitle { 16 | color: var(--nfd-onboarding-black); 17 | font-weight: 400; 18 | text-align: center; 19 | font-size: clamp(0.85rem, 3.2vw, 1.7rem); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/LanguageSelection/index.js: -------------------------------------------------------------------------------- 1 | import { memo } from '@wordpress/element'; 2 | 3 | const LanguageSelection = ( { 4 | languageSelectionLabel, 5 | languageList, 6 | selectedLocale, 7 | setSelectedLocale, 8 | } ) => { 9 | return
10 | 11 | 27 |
; 28 | }; 29 | 30 | export default memo( LanguageSelection ); 31 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/LanguageSelection/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-sg-language { 2 | width: 100% !important; 3 | display: flex; 4 | flex-direction: column; 5 | 6 | &__label { 7 | font-size: 0.87rem; 8 | margin-top: 2%; 9 | color: var(--nfd-onboarding-primary); 10 | padding-left: 2px; 11 | } 12 | 13 | &__select { 14 | margin-top: 1%; 15 | border-radius: 8px !important; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Layouts/Base.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | import { speak } from '@wordpress/a11y'; 3 | import { useEffect } from '@wordpress/element'; 4 | import { useLocation } from 'react-router-dom'; 5 | 6 | const BaseLayout = ( { 7 | className = 'nfd-onboarding-layout__base', 8 | children, 9 | } ) => { 10 | const location = useLocation(); 11 | const mainContainer = document.querySelector( '.nfd-onboard-content' ); 12 | 13 | const speakRouteTitle = ( title = 'Showing new Onboarding Page' ) => { 14 | // [TODO]: Determine if some routes should not speak the title 15 | speak( title, 'assertive' ); 16 | }; 17 | 18 | useEffect( () => { 19 | mainContainer?.focus( { preventScroll: true } ); 20 | speakRouteTitle( 'Override' ); 21 | }, [ location.pathname ] ); 22 | 23 | return ( 24 |
25 | { children } 26 |
27 | ); 28 | }; 29 | 30 | export default BaseLayout; 31 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Layouts/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-layout__common { 2 | min-height: calc(100vh - #{$header-height} - #{$border-width} - #{$admin-bar-height-big}); 3 | @include break-medium { 4 | min-height: calc(100vh - #{$header-height} - #{$border-width}); 5 | } 6 | &.is-padded { 7 | min-height: calc(100vw - #{$header-height} - #{$border-width} - #{$grid-unit * 18} - #{$admin-bar-height-big}); 8 | @include break-medium { 9 | min-height: calc(100vh - #{$header-height} - #{$border-width} - #{$grid-unit * 18}); 10 | } 11 | padding: #{$grid-unit * 9}; 12 | } 13 | > .is-contained { 14 | width: 100%; 15 | max-width: $break-huge; 16 | } 17 | } -------------------------------------------------------------------------------- /src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss: -------------------------------------------------------------------------------- 1 | 2 | .live-preview--selectable-card { 3 | flex: 1; 4 | width: 100%; 5 | margin: 24px; 6 | display: flex; 7 | overflow: hidden; 8 | align-items: center; 9 | flex-direction: column; 10 | justify-content: center; 11 | 12 | 13 | &__live-preview-container { 14 | position: relative; 15 | width: 90%; 16 | overflow: hidden; 17 | align-items: center; 18 | border: 1px solid #e3dfdf; 19 | 20 | &:hover { 21 | cursor: pointer; 22 | } 23 | 24 | .live-preview { 25 | 26 | &__container { 27 | 28 | &-custom { 29 | width: 100%; 30 | overflow: hidden; 31 | height: 300px; 32 | } 33 | } 34 | } 35 | 36 | } 37 | } 38 | 39 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/LivePreview/index.js: -------------------------------------------------------------------------------- 1 | export { default as LivePreview } from './BlockPreview'; 2 | export { default as LivePreviewSkeleton } from './LivePreviewSkeleton'; 3 | export { default as LivePreviewSelectableCard } from './SelectableCard'; 4 | export { default as LivePreviewSelectableCardWithInfo } from './SelectableCardWithInfo'; 5 | export { default as GlobalStylesProvider } from './GlobalStylesProvider'; 6 | export { default as SiteGenPreviewSelectableCard } from './SiteGenPreviewSelectableCard'; 7 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/LivePreview/stylesheet.scss: -------------------------------------------------------------------------------- 1 | @import "./BlockPreview/stylesheet"; 2 | @import "./SelectableCard/stylesheet"; 3 | @import "./SelectableCardWithInfo/stylesheet"; 4 | @import "./SiteGenPreviewSelectableCard/stylesheet"; 5 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Loaders/ImageUpload/index.js: -------------------------------------------------------------------------------- 1 | import Animate from '../../Animate'; 2 | 3 | const ImageUploadLoader = () => { 4 | return ( 5 |
6 | 10 |
11 | ); 12 | }; 13 | 14 | export default ImageUploadLoader; 15 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .image-upload-loader { 2 | 3 | &--loading-box { 4 | width: 200px; 5 | height: 25px; 6 | position: relative; 7 | border-radius: 50px; 8 | overflow: hidden; 9 | border: 2px solid #ededed; 10 | 11 | &__loader { 12 | width: 100%; 13 | height: 100%; 14 | position: absolute; 15 | border-radius: 50px; 16 | background: linear-gradient(45deg, var(--nfd-onboarding-loader-start), var(--nfd-onboarding-loader-end)); 17 | left: -100%; 18 | } 19 | } 20 | 21 | } 22 | 23 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Loaders/SiteGenLoader/contents.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | const getContents = () => { 4 | return { 5 | title: __( 'Building Website', 'wp-module-onboarding' ), 6 | status: [ 7 | { 8 | title: __( 'Generating Website', 'wp-module-onboarding' ), 9 | }, 10 | { 11 | title: __( 'Finding Font Pairings', 'wp-module-onboarding' ), 12 | }, 13 | { 14 | title: __( 15 | 'Building Custom Color Palettes', 16 | 'wp-module-onboarding' 17 | ), 18 | }, 19 | { 20 | title: __( 'Populating Images', 'wp-module-onboarding' ), 21 | }, 22 | { 23 | title: __( 'Finalizing Previews', 'wp-module-onboarding' ), 24 | }, 25 | { 26 | title: __( 'Packaging Website', 'wp-module-onboarding' ), 27 | }, 28 | ], 29 | }; 30 | }; 31 | 32 | export default getContents; 33 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Loaders/Spinner/index.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | 3 | const Spinner = ( { className } ) => { 4 | return ( 5 |
11 | ); 12 | }; 13 | 14 | export default Spinner; 15 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Loaders/Spinner/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-loader { 2 | 3 | &--spinner { 4 | border-radius: 50%; 5 | width: 10em; 6 | height: 10em; 7 | font-size: 8px; 8 | border-top: 1.1em solid rgba(var(--nfd-onboarding-primary-rgb), 0.2); 9 | border-right: 1.1em solid rgba(var(--nfd-onboarding-primary-rgb), 0.2); 10 | border-bottom: 1.1em solid rgba(var(--nfd-onboarding-primary-rgb), 0.2); 11 | border-left: 1.1em solid var(--nfd-onboarding-primary); 12 | -webkit-transform: translateZ(0); 13 | -ms-transform: translateZ(0); 14 | transform: translateZ(0); 15 | -webkit-animation: spin 1.1s infinite linear; 16 | animation: spin 1.1s infinite linear; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | 21 | @media (prefers-reduced-motion) { 22 | animation: none !important; 23 | } 24 | } 25 | 26 | &::after { 27 | border-radius: 50%; 28 | width: 10em; 29 | height: 10em; 30 | } 31 | } 32 | 33 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Loaders/Step/Ecommerce/contents.js: -------------------------------------------------------------------------------- 1 | import { __, sprintf } from '@wordpress/i18n'; 2 | import { translations } from '../../../../utils/locales/translations'; 3 | 4 | const getContents = ( brandName ) => { 5 | return { 6 | title: sprintf( 7 | /* translators: 1: Brand 2: Site or Store */ 8 | __( 9 | 'Making the keys to your %1$s Online %2$s', 10 | 'wp-module-onboarding' 11 | ), 12 | brandName, 13 | translations( 'Site' ) 14 | ), 15 | subtitle: __( 16 | 'We’re installing WooCommerce for you to fill with your amazing products & services!', 17 | 'wp-module-onboarding' 18 | ), 19 | }; 20 | }; 21 | 22 | export default getContents; 23 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Loaders/Step/Ecommerce/index.js: -------------------------------------------------------------------------------- 1 | import StepLoader from '..'; 2 | import getContents from './contents'; 3 | import { useSelect } from '@wordpress/data'; 4 | 5 | import { store as nfdOnboardingStore } from '../../../../store'; 6 | 7 | const EcommerceStepLoader = () => { 8 | const { brandName } = useSelect( ( select ) => { 9 | return { 10 | brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), 11 | }; 12 | }, [] ); 13 | const contents = getContents( brandName ); 14 | return ( 15 | 16 | ); 17 | }; 18 | 19 | export default EcommerceStepLoader; 20 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Loaders/Step/index.js: -------------------------------------------------------------------------------- 1 | import CommonLayout from '../../Layouts/Common'; 2 | import HeadingWithSubHeading from '../../Heading/HeadingWithSubHeading'; 3 | import NeedHelpTag from '../../NeedHelpTag'; 4 | 5 | const StepLoader = ( { title, subtitle } ) => { 6 | return ( 7 | 8 | 9 |
10 |
11 |
12 | 13 | 14 | ); 15 | }; 16 | 17 | export default StepLoader; 18 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Loaders/Step/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .step-loader { 2 | 3 | cursor: wait; 4 | justify-content: space-evenly; 5 | 6 | @media (max-width: #{($break-medium)}) { 7 | justify-content: center; 8 | } 9 | 10 | &__logo { 11 | max-width: 256px; 12 | height: 256px; 13 | width: 50vw; 14 | background-image: var(--nfd-onboarding-step-loader-icon); 15 | background-size: contain; 16 | background-repeat: no-repeat; 17 | background-position: center; 18 | 19 | @media (max-width: #{($break-medium)}) { 20 | max-width: 256px; 21 | max-height: 256px; 22 | height: 30vh; 23 | width: 100vw; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Loaders/index.js: -------------------------------------------------------------------------------- 1 | export { default as StepLoader } from "./Step"; 2 | export { default as ImageUploadLoader } from "./ImageUpload"; 3 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Loaders/stylesheet.scss: -------------------------------------------------------------------------------- 1 | @import "./ImageUpload/stylesheet"; 2 | @import "./Step/stylesheet"; 3 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/MiniPreview/contents.js: -------------------------------------------------------------------------------- 1 | import { __, sprintf } from '@wordpress/i18n'; 2 | 3 | import { translations } from '../../utils/locales/translations'; 4 | 5 | const getContents = () => { 6 | return { 7 | heading: __( 'Preview', 'wp-module-onboarding' ), 8 | defaultTitle: sprintf( 9 | /* translators: %s: Site or Store */ 10 | __( 'WordPress %s', 'wp-module-onboarding' ), 11 | translations( 'Site' ) 12 | ), 13 | defaultDesc: sprintf( 14 | /* translators: %s: Site */ 15 | __( 'Just another WordPress %s', 'wp-module-onboarding' ), 16 | translations( 'Site' ) 17 | ), 18 | }; 19 | }; 20 | 21 | export default getContents; 22 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/NeedHelpTag/index.js: -------------------------------------------------------------------------------- 1 | import { store as nfdOnboardingStore } from '../../store'; 2 | import { select } from '@wordpress/data'; 3 | import { __ } from '@wordpress/i18n'; 4 | 5 | /** 6 | * Need Help Label and URL rendering component for most of the onboarding steps 7 | * Pass any Label and URL redirect which we want as is to display on the UI 8 | * 9 | * @param content 10 | * @return NeedHelpTag 11 | */ 12 | 13 | const NeedHelpTag = ( { 14 | question = __( 'Need Help?', 'wp-module-onboarding' ), 15 | urlLabel = __( 'Hire our Experts', 'wp-module-onboarding' ), 16 | } ) => { 17 | const hireExpertsUrl = select( nfdOnboardingStore ).getHireExpertsUrl(); 18 | 19 | return ( 20 | hireExpertsUrl && ( 21 |
22 | { question } 23 | 24 | { urlLabel } 25 | 26 |
27 | ) 28 | ); 29 | }; 30 | 31 | export default NeedHelpTag; 32 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/NeedHelpTag/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-card-need-help-tag { 2 | color: var(--nfd-onboarding-black); 3 | padding: 20px; 4 | font-weight: 200; 5 | text-align: center; 6 | font-style: italic; 7 | font-size: clamp(0.6rem, 1.5vw, 0.9rem); 8 | 9 | a { 10 | text-decoration: none; 11 | padding: 0 0.4rem; 12 | } 13 | 14 | @media (max-width: #{($break-medium)}) { 15 | padding: 9px; 16 | } 17 | 18 | @media (min-width: 2600px) { 19 | font-size: clamp(1.6rem, -0.09vw + 1rem, 1.78rem); 20 | font-weight: 450; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js: -------------------------------------------------------------------------------- 1 | import { useContext } from '@wordpress/element'; 2 | import { ThemeContext } from '../ThemeContextProvider'; 3 | import classNames from 'classnames'; 4 | import { THEME_DARK } from '../../../constants'; 5 | 6 | const themeToggleHOC = ( 7 | WrappedComponent, 8 | darkClass, 9 | lightClass, 10 | isForkStep = true 11 | ) => { 12 | return ( props ) => { 13 | const { theme } = useContext( ThemeContext ); 14 | const isDarkMode = theme === THEME_DARK; 15 | const shouldApply = isForkStep !== undefined ? isForkStep : true; 16 | const className = classNames( props.className, { 17 | [ darkClass ]: isDarkMode && shouldApply, 18 | [ lightClass ]: ! isDarkMode && shouldApply, 19 | } ); 20 | 21 | return ; 22 | }; 23 | }; 24 | 25 | export default themeToggleHOC; 26 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/NewfoldLargeCard/index.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | 3 | const NewfoldLargeCard = ( { className = '', children } ) => { 4 | return ( 5 |
6 |
7 | { children } 8 |
9 | ); 10 | }; 11 | 12 | export default NewfoldLargeCard; 13 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/ProgressBar/index.js: -------------------------------------------------------------------------------- 1 | const ProgressBar = ( { progress = 20 } ) => { 2 | return ( 3 |
4 |
8 |
9 | ); 10 | }; 11 | 12 | export default ProgressBar; 13 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/ProgressBar/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-header { 2 | 3 | &__progress-bar { 4 | width: 100%; 5 | background-color: var(--nfd-onboarding-progress-bar-background); 6 | height: 16px; 7 | 8 | &__progress { 9 | height: 16px; 10 | transition: width 2s ease-in-out; 11 | background-color: var(--nfd-onboarding-progress-bar-fill); 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/SelectableCardList/selectable-card-list.js: -------------------------------------------------------------------------------- 1 | import Card from '../SelectableCard'; 2 | 3 | const SelectableCardList = ({ contents, selected, onSelectedChange }) => { 4 | const cardList = contents.map((content, idx) => { 5 | return ( 6 | 15 | ); 16 | }); 17 | 18 | return
{cardList}
; 19 | }; 20 | 21 | export default SelectableCardList; 22 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/SelectableCardList/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .selectable_cards { 2 | gap: 1.5rem; 3 | width: 100%; 4 | display: flex; 5 | justify-content: center; 6 | 7 | @media (max-width: #{ ($break-large) }) { 8 | flex-direction: column; 9 | align-items: center; 10 | } 11 | } -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-sidebar--customize__color-palette-icon { 2 | 3 | &__container { 4 | text-align: center; 5 | 6 | &__icon { 7 | box-sizing: border-box; 8 | width: 45px; 9 | height: 45px; 10 | border-radius: 50%; 11 | cursor: pointer; 12 | box-shadow: "none"; 13 | } 14 | 15 | &__icon__selected { 16 | box-sizing: border-box; 17 | width: 45px; 18 | height: 45px; 19 | border-radius: 50%; 20 | cursor: pointer; 21 | box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nfd-onboarding-sitegen-customize-icon-selected); 22 | } 23 | 24 | p { 25 | margin-top: 8px; 26 | color: var(--nfd-onboarding-sitegen-customize-default-text-color); 27 | } 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js: -------------------------------------------------------------------------------- 1 | import { useState } from '@wordpress/element'; 2 | import { ColorPalette, Popover } from '@wordpress/components'; 3 | import './stylesheet.scss'; 4 | import { __ } from '@wordpress/i18n'; 5 | 6 | const CustomColorPalette = ( { onChange, palettePrimaryColors } ) => { 7 | const [ color, setColor ] = useState( palettePrimaryColors[ 0 ].color ); 8 | const baseClassName = 9 | 'nfd-onboarding-sidebar--customize__custom-color-palette'; 10 | const colors = [ 11 | { 12 | colors: palettePrimaryColors, 13 | name: __( 'THEME', 'wp-module-onboarding' ), 14 | }, 15 | ]; 16 | const handleColorChange = ( newColor ) => { 17 | setColor( newColor ); 18 | onChange( newColor ); 19 | }; 20 | return ( 21 | 22 |
23 | 28 |
29 | 30 | ); 31 | }; 32 | 33 | export default CustomColorPalette; 34 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-sidebar { 2 | 3 | &--customize { 4 | 5 | &__custom-color-palette { 6 | 7 | &__container { 8 | padding: 16px; 9 | width: 260px; 10 | } 11 | } 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/Customize/stylesheet.scss: -------------------------------------------------------------------------------- 1 | @import "./HeadingWithDescription/stylesheet"; 2 | @import "./StepIntroPanel/stylesheet"; 3 | @import "./IllustrationPanel/stylesheet"; 4 | @import "./InfoPanel/stylesheet"; 5 | @import "./HelpPanel/stylesheet"; 6 | @import "./SupportLink/stylesheet"; 7 | 8 | .components-button:focus:not(:disabled), 9 | .components-button.is-pressed:focus:not(:disabled) { 10 | box-shadow: none; 11 | } 12 | 13 | .nfd-onboarding-sidebar-learn-more { 14 | background: #fff; 15 | padding: 0 !important; 16 | border: none; 17 | overflow-y: auto; 18 | width: 100%; 19 | height: 100%; 20 | 21 | &__header { 22 | 23 | &__icon { 24 | width: 24px; 25 | height: 24px; 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | } 31 | 32 | &__menu-button { 33 | margin: 0 5px; 34 | min-height: 40px; 35 | } 36 | } 37 | 38 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/index.js: -------------------------------------------------------------------------------- 1 | import { Fragment } from '@wordpress/element'; 2 | 3 | const HeadingWithDescription = ( { 4 | heading, 5 | description, 6 | baseClassName = 'nfd-onboarding-sidebar-learn-more--heading-with-description', 7 | } ) => { 8 | return ( 9 | 10 |

{ heading }

11 |

12 | { description } 13 |

14 | 15 | ); 16 | }; 17 | 18 | export default HeadingWithDescription; 19 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-sidebar-learn-more { 2 | 3 | &--heading-with-description { 4 | 5 | &__heading { 6 | font-size: 14px; 7 | font-weight: 600; 8 | color: #1e1e1e; 9 | line-height: 20px; 10 | } 11 | 12 | &__description { 13 | line-height: 16px; 14 | font-size: 12px; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/HelpPanel/index.js: -------------------------------------------------------------------------------- 1 | const HelpPanel = ( { 2 | children, 3 | baseClassName = 'nfd-onboarding-sidebar-learn-more--help-panel', 4 | } ) => { 5 | return
{ children }
; 6 | }; 7 | 8 | export default HelpPanel; 9 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/HelpPanel/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-sidebar-learn-more { 2 | 3 | &--help-panel { 4 | 5 | &__links { 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: center; 9 | align-items: center; 10 | margin: 0 10px; 11 | } 12 | } 13 | } 14 | 15 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/IllustrationPanel/index.js: -------------------------------------------------------------------------------- 1 | import { PanelBody } from '@wordpress/components'; 2 | 3 | const IllustrationPanel = ( { 4 | cssIcon = 'nfd-onboarding-sidebar-learn-more-get-started-welcome-illustration', 5 | baseClassName = 'nfd-onboarding-sidebar-learn-more--illustration-panel', 6 | backgroundPosition = 'center', 7 | } ) => { 8 | const iconExists = 9 | window 10 | .getComputedStyle( document.body ) 11 | .getPropertyValue( `--${ cssIcon }` ) !== ''; 12 | 13 | return ( 14 | iconExists && ( 15 | 19 |
30 | 31 | ) 32 | ); 33 | }; 34 | 35 | export default IllustrationPanel; 36 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/IllustrationPanel/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-sidebar-learn-more { 2 | 3 | &--illustration-panel { 4 | 5 | &__container { 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | height: 200px; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/InfoPanel/index.js: -------------------------------------------------------------------------------- 1 | import { PanelBody } from '@wordpress/components'; 2 | 3 | import HeadingWithDescription from '../HeadingWithDescription'; 4 | 5 | const InfoPanel = ( { 6 | baseClassName = 'nfd-onboarding-sidebar-learn-more--info-panel', 7 | headingWithDescriptions, 8 | } ) => { 9 | return ( 10 | 11 | { headingWithDescriptions.map( ( headingWithDescription, idx ) => { 12 | return ( 13 | 18 | ); 19 | } ) } 20 | 21 | ); 22 | }; 23 | 24 | export default InfoPanel; 25 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/InfoPanel/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-sidebar-learn-more { 2 | 3 | &--info-panel { 4 | border-bottom: none; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/StepIntroPanel/index.js: -------------------------------------------------------------------------------- 1 | import { PanelBody, PanelRow } from '@wordpress/components'; 2 | 3 | import { Icon } from '@wordpress/icons'; 4 | 5 | const StepIntroPanel = ( { 6 | baseClassName = 'nfd-onboarding-sidebar-learn-more--step-intro-panel', 7 | heading, 8 | subheading, 9 | icon, 10 | } ) => { 11 | return ( 12 | 13 | 14 |
15 |
16 | { } 17 |
18 |
19 |

22 | { heading } 23 |

24 |

27 | { subheading } 28 |

29 |
30 |
31 | 32 | 33 | ); 34 | }; 35 | 36 | export default StepIntroPanel; 37 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/StepIntroPanel/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-sidebar-learn-more { 2 | 3 | &--step-intro-panel { 4 | border: none; 5 | 6 | &__container { 7 | display: flex; 8 | 9 | &__text { 10 | align-items: center; 11 | 12 | &__heading, 13 | &__subheading { 14 | margin-top: 2px; 15 | line-height: 16px; 16 | } 17 | } 18 | 19 | &__icon { 20 | margin-right: 5%; 21 | } 22 | 23 | } 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/SupportLink/index.js: -------------------------------------------------------------------------------- 1 | const SupportLink = ( { 2 | baseClassName = 'nfd-onboarding-sidebar-learn-more--support-link', 3 | link = '#', 4 | text, 5 | } ) => { 6 | return ( 7 | link !== '' && ( 8 | 14 | { text } 15 | 16 | ) 17 | ); 18 | }; 19 | 20 | export default SupportLink; 21 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/SupportLink/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-sidebar-learn-more { 2 | 3 | &--support-link { 4 | border-radius: 2px; 5 | text-decoration: none; 6 | color: var(--wp-admin-theme-color); 7 | margin: 10px 0; 8 | 9 | &:hover { 10 | color: var(--wp-admin-theme-color-darker-20); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/components/LearnMore/stylesheet.scss: -------------------------------------------------------------------------------- 1 | @import "./HeadingWithDescription/stylesheet"; 2 | @import "./StepIntroPanel/stylesheet"; 3 | @import "./IllustrationPanel/stylesheet"; 4 | @import "./InfoPanel/stylesheet"; 5 | @import "./HelpPanel/stylesheet"; 6 | @import "./SupportLink/stylesheet"; 7 | 8 | .components-button:focus:not(:disabled), 9 | .components-button.is-pressed:focus:not(:disabled) { 10 | box-shadow: none; 11 | } 12 | 13 | .nfd-onboarding-sidebar-learn-more { 14 | padding: 0 !important; 15 | border: none; 16 | overflow-y: auto; 17 | width: 100%; 18 | height: 100%; 19 | 20 | &__header { 21 | 22 | &__icon { 23 | width: 24px; 24 | height: 24px; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | } 30 | 31 | &__menu-button { 32 | margin: 0 5px; 33 | min-height: 40px; 34 | } 35 | } 36 | 37 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Sidebar/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .interface-interface-skeleton__sidebar { 2 | height: 100%; 3 | position: relative; 4 | overflow: hidden; 5 | } 6 | 7 | .nfd-onboarding-sidebar__panel { 8 | background: var(--nfd-onboarding-base); 9 | height: 100%; 10 | position: relative; 11 | width: 0; 12 | overflow: hidden; 13 | transition: width 100ms linear; 14 | 15 | @include reduce-motion("transition"); 16 | 17 | &-inner { 18 | position: relative; 19 | width: 100%; 20 | height: 100%; 21 | overflow: hidden; 22 | visibility: hidden; 23 | transition: visibility 100ms linear; 24 | 25 | @include reduce-motion("transition"); 26 | } 27 | } 28 | 29 | .nfd-onboarding-sidebar__panel.is-open { 30 | width: $nav-sidebar-width; 31 | border-left: 1px solid var(--nfd-onboarding-sidebar-border-left); 32 | 33 | .nfd-onboarding-sidebar__panel-inner, 34 | .interface-interface-skeleton__sidebar { 35 | visibility: visible; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/SiteGenPlaceholder/index.js: -------------------------------------------------------------------------------- 1 | import NextButtonSiteGen from '../Button/NextButtonSiteGen'; 2 | 3 | const SiteGenPlaceholder = ( { heading } ) => { 4 | return ( 5 |
6 |

7 | { heading } 8 |

9 | 10 |
11 | ); 12 | }; 13 | 14 | export default SiteGenPlaceholder; 15 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/SiteGenPlaceholder/stylesheet.scss: -------------------------------------------------------------------------------- 1 | .nfd-onboarding-placeholder { 2 | 3 | &--site-gen { 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | 9 | &__heading { 10 | color: var(--nfd-onboarding-primary); 11 | font-size: 70px; 12 | } 13 | 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/SkipButton/stylesheet.scss: -------------------------------------------------------------------------------- 1 | $primary-color: var(--nfd-onboarding-primary); 2 | 3 | .skip-button { 4 | padding: 10px; 5 | cursor: pointer; 6 | font-weight: 200; 7 | font-style: italic; 8 | color: $primary-color; 9 | } -------------------------------------------------------------------------------- /src/OnboardingSPA/components/SocialMediaForm/utils.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-extraneous-dependencies 2 | import { transform } from 'lodash'; 3 | 4 | // Types of Social Media Errors 5 | export const ERROR_TYPES = { 6 | NONE: 'none', 7 | AD_LINK_ERROR: 'ad-link-error', 8 | INVALID_LINK_ERROR: 'invalid-link-error', 9 | }; 10 | 11 | const socialMediaStoreToStateMap = { 12 | facebook_site: 'facebook', 13 | twitter_site: 'twitter', 14 | instagram_url: 'instagram', 15 | youtube_url: 'youtube', 16 | linkedin_url: 'linkedin', 17 | yelp_url: 'yelp', 18 | tiktok_url: 'tiktok', 19 | }; 20 | 21 | export const socialMediaStoreToState = ( socialMediaStore ) => { 22 | return transform( socialMediaStoreToStateMap, ( result, value, key ) => { 23 | const url = 24 | socialMediaStore?.[ key ] || 25 | socialMediaStore?.other_social_urls?.[ key ]; 26 | if ( url ) { 27 | result[ value ] = url; 28 | } 29 | } ); 30 | }; 31 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/StateHandlers/SiteGen/contents.js: -------------------------------------------------------------------------------- 1 | import { __, sprintf } from '@wordpress/i18n'; 2 | 3 | const getContents = ( brandName ) => { 4 | return { 5 | loader: { 6 | title: sprintf( 7 | /* translators: %s: Brand */ 8 | __( 'Preparing your %s design studio', 'wp-module-onboarding' ), 9 | brandName 10 | ), 11 | subtitle: __( 12 | 'Hang tight while we show you some of the best WordPress has to offer!', 13 | 'wp-module-onboarding' 14 | ), 15 | }, 16 | errorState: { 17 | title: sprintf( 18 | /* translators: %s: Brand */ 19 | __( 'Preparing your %s design studio', 'wp-module-onboarding' ), 20 | brandName 21 | ), 22 | subtitle: __( 23 | 'Hang tight while we show you some of the best WordPress has to offer!', 24 | 'wp-module-onboarding' 25 | ), 26 | error: __( 27 | 'Uh-oh, something went wrong. Please contact support.', 28 | 'wp-module-onboarding' 29 | ), 30 | }, 31 | }; 32 | }; 33 | 34 | export default getContents; 35 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/StateHandlers/SiteGen/index.js: -------------------------------------------------------------------------------- 1 | // WordPress 2 | import { Fragment } from '@wordpress/element'; 3 | import { useSelect } from '@wordpress/data'; 4 | 5 | // Classes and functions 6 | 7 | // Components 8 | import SiteGenStepErrorState from '../../ErrorState/Step/SiteGen'; 9 | 10 | // Misc 11 | import { store as nfdOnboardingStore } from '../../../store'; 12 | 13 | const SiteGenStateHandler = ( { children } ) => { 14 | const { siteGenErrorStatus } = useSelect( ( select ) => { 15 | return { 16 | currentStepPath: select( nfdOnboardingStore ).getCurrentStepPath(), 17 | siteGenErrorStatus: 18 | select( nfdOnboardingStore ).getSiteGenErrorStatus(), 19 | }; 20 | } ); 21 | 22 | const handleRender = () => { 23 | if ( siteGenErrorStatus ) { 24 | return ; 25 | } 26 | 27 | return children; 28 | }; 29 | return { handleRender() }; 30 | }; 31 | 32 | export default SiteGenStateHandler; 33 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/StateHandlers/index.js: -------------------------------------------------------------------------------- 1 | export { default as DesignStateHandler } from './Design'; 2 | export { default as FlowStateHandler } from './Flow'; 3 | export { default as SiteGenStateHandler } from './SiteGen'; 4 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/Tab/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Common Tab Component 3 | * 4 | * @return Tab 5 | */ 6 | 7 | import Animate from '../Animate'; 8 | 9 | const Tab = ( { title, text, imgType, className, animationName } ) => { 10 | return ( 11 |
12 |
13 |

{ title }

14 | { text } 15 |
16 |
17 |
18 | 19 |
20 | 21 |
22 |
23 |
24 | ); 25 | }; 26 | 27 | export default Tab; 28 | -------------------------------------------------------------------------------- /src/OnboardingSPA/components/TabPanelHover/navigableContainer.js: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | /** 3 | * Internal Dependencies 4 | */ 5 | export { default as NavigableMenu } from './menu'; 6 | export { default as TabbableContainer } from './tabbable'; -------------------------------------------------------------------------------- /src/OnboardingSPA/components/TextInput/TextAreaSiteGenDetails/index.js: -------------------------------------------------------------------------------- 1 | import { useRef, memo } from '@wordpress/element'; 2 | 3 | const TextAreaSiteGenDetails = ( { 4 | labelText, 5 | placeholder, 6 | customerInput, 7 | callback = null, 8 | } ) => { 9 | const textareaRef = useRef( null ); 10 | 11 | return ( 12 |
13 | 14 |
15 |