-
Notifications
You must be signed in to change notification settings - Fork 325
[11333] Update the splash screen's layout #11492
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 34 commits
Commits
Show all changes
35 commits
Select commit
Hold shift + click to select a range
ed85b32
Add RefreshedSplash component.
ankitrox 0a7e3d2
Add refresh flow test.
ankitrox a5c43c2
Update tests and snapshots.
ankitrox ba39e16
Add stories for SFR.
ankitrox bda97c5
Add support for wider viewport.
ankitrox e7864a6
Fix: Redo plugin setup layout.
ankitrox f548203
Add lazy svg component.
ankitrox 686b0ef
Update tests.
ankitrox 9d5fea2
Restore package.json file.
ankitrox 1908d8a
Snapshots updated.
ankitrox 51938ab
Revert file changes.
ankitrox 447b585
Resolve conflicts.
ankitrox f22e3c6
Address CR feedback.
ankitrox 908a079
Merge branch 'develop' into enhancement/11333-splash-screen.
ankitrox 5b3d138
Address CR feedback.
ankitrox 88e397a
Merge branch 'develop' into enhancement/11333-splash-screen.
ankitrox 82f43ad
Address CR feedback.
ankitrox 893b317
Merge branch 'develop' into enhancement/11333-splash-screen.
ankitrox 0f9ffaa
Add minor styling adjustments.
ankitrox 193db13
Update status.
ankitrox bb45f16
Align opt-in checkbox.
ankitrox 63c655f
Merge branch 'develop' into enhancement/11333-splash-screen.
ankitrox 9c8edce
Update: CR feedback addressal.
ankitrox f0d7501
Update reference images.
ankitrox 40a9c51
Fix: splash screen VRT differences.
ankitrox 0f68333
Update responsive designs.
ankitrox 974e8e1
Update VRT reference images.
ankitrox a81a9b4
Add `viewBox` to `splash-screenshot-wide-viewport.svg`.
techanvil 8524fba
Simplify screenshot rendering, remove unneeded image, and fix styling.
techanvil 88c5036
Merge branch 'develop' into enhancement/11333-splash-screen.
ankitrox 5734453
Merge branch 'enhancement/11333-splash-screen' of github.com:google/s…
ankitrox 856d9a9
Restore inline rendering of SVGs for the legacy splash screen.
techanvil 5503dbb
Update snapshots.
techanvil 47f3af6
Update VRT reference images.
ankitrox 7bbba32
Update VRT reference images.
ankitrox File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Some comments aren't visible on the classic Files Changed page.
There are no files selected for viewing
157 changes: 157 additions & 0 deletions
157
assets/js/components/setup/SetupUsingProxyWithSignIn/LegacySplashContent.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| /** | ||
| * LegacySplashContent component. | ||
| * | ||
| * Site Kit by Google, Copyright 2025 Google LLC | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * https://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| /** | ||
| * External dependencies | ||
| */ | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { createInterpolateElement } from '@wordpress/element'; | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import ActivateAnalyticsNotice from '@/js/components/setup/ActivateAnalyticsNotice'; | ||
| import CompatibilityChecks from '@/js/components/setup/CompatibilityChecks'; | ||
| import Link from '@/js/components/Link'; | ||
| import P from '@/js/components/Typography/P'; | ||
| import WelcomeSVG from '@/svg/graphics/welcome.svg'; | ||
| import WelcomeAnalyticsSVG from '@/svg/graphics/welcome-analytics.svg'; | ||
| import Typography from '@/js/components/Typography'; | ||
| import { Cell, Row } from '@/js/material-components'; | ||
| import { DISCONNECTED_REASON_CONNECTED_URL_MISMATCH } from '@/js/googlesitekit/datastore/user/constants'; | ||
|
|
||
| export default function LegacySplashContent( { | ||
| analyticsModuleActive, | ||
| analyticsModuleAvailable, | ||
| children, | ||
| connectedProxyURL, | ||
| description, | ||
| disconnectedReason, | ||
| getHelpURL, | ||
| homeURL, | ||
| secondAdminLearnMoreLink, | ||
| showLearnMoreLink, | ||
| title, | ||
| } ) { | ||
| const cellDetailsProp = analyticsModuleActive | ||
| ? { smSize: 4, mdSize: 8, lgSize: 6 } | ||
| : { smSize: 4, mdSize: 8, lgSize: 8 }; | ||
|
|
||
| return ( | ||
| <Row className="googlesitekit-setup__content"> | ||
| <Cell | ||
| smSize={ 4 } | ||
| mdSize={ 8 } | ||
| lgSize={ ! analyticsModuleActive ? 4 : 6 } | ||
| className="googlesitekit-setup__icon" | ||
| > | ||
| { analyticsModuleActive && ( | ||
| <WelcomeSVG width="570" height="336" /> | ||
| ) } | ||
| { ! analyticsModuleActive && ( | ||
| <WelcomeAnalyticsSVG height="167" width="175" /> | ||
| ) } | ||
| </Cell> | ||
|
|
||
| <Cell { ...cellDetailsProp }> | ||
| <Typography | ||
| as="h1" | ||
| className="googlesitekit-setup__title" | ||
| size="large" | ||
| type="headline" | ||
| > | ||
| { title } | ||
| </Typography> | ||
|
|
||
| <p className="googlesitekit-setup__description"> | ||
| { ! showLearnMoreLink && description } | ||
|
|
||
| { showLearnMoreLink && | ||
| createInterpolateElement( | ||
| sprintf( | ||
| /* translators: 1: The description. 2: The learn more link. */ | ||
| __( | ||
| '%1$s <Link>%2$s</Link>', | ||
| 'google-site-kit' | ||
| ), | ||
| description, | ||
| __( 'Learn more', 'google-site-kit' ) | ||
| ), | ||
| { | ||
| Link: ( | ||
| <Link | ||
| href={ secondAdminLearnMoreLink } | ||
| external | ||
| /> | ||
| ), | ||
| } | ||
| ) } | ||
| </p> | ||
| { getHelpURL && ( | ||
| <Link href={ getHelpURL } external> | ||
| { __( 'Get help', 'google-site-kit' ) } | ||
| </Link> | ||
| ) } | ||
| { DISCONNECTED_REASON_CONNECTED_URL_MISMATCH === | ||
| disconnectedReason && | ||
| connectedProxyURL !== homeURL && ( | ||
| <P> | ||
| { sprintf( | ||
| /* translators: %s: Previous Connected Proxy URL */ | ||
| __( '— Old URL: %s', 'google-site-kit' ), | ||
| connectedProxyURL | ||
| ) } | ||
| <br /> | ||
| { sprintf( | ||
| /* translators: %s: Connected Proxy URL */ | ||
| __( '— New URL: %s', 'google-site-kit' ), | ||
| homeURL | ||
| ) } | ||
| </P> | ||
| ) } | ||
|
|
||
| { analyticsModuleAvailable && ! analyticsModuleActive && ( | ||
| <ActivateAnalyticsNotice /> | ||
| ) } | ||
|
|
||
| <CompatibilityChecks>{ children }</CompatibilityChecks> | ||
| </Cell> | ||
| </Row> | ||
| ); | ||
| } | ||
|
|
||
| LegacySplashContent.propTypes = { | ||
| analyticsModuleActive: PropTypes.bool, | ||
| analyticsModuleAvailable: PropTypes.bool, | ||
| children: PropTypes.func, | ||
| connectedProxyURL: PropTypes.oneOfType( [ | ||
| PropTypes.string, | ||
| PropTypes.bool, | ||
| ] ), | ||
| description: PropTypes.string, | ||
| disconnectedReason: PropTypes.string, | ||
| getHelpURL: PropTypes.string, | ||
| homeURL: PropTypes.string, | ||
| secondAdminLearnMoreLink: PropTypes.string, | ||
| title: PropTypes.string.isRequired, | ||
| }; | ||
48 changes: 48 additions & 0 deletions
48
assets/js/components/setup/SetupUsingProxyWithSignIn/SetupFlowSVG.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /** | ||
| * SetupFlowSVG component. | ||
| * | ||
| * Site Kit by Google, Copyright 2025 Google LLC | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * https://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { lazy, Suspense } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import PreviewBlock from '@/js/components/PreviewBlock'; | ||
| import MediaErrorHandler from '@/js/components/MediaErrorHandler'; | ||
|
|
||
| const LazySVGComponent = lazy( () => | ||
| import( '../../../../svg/graphics/splash-screenshot.svg' ) | ||
| ); | ||
|
|
||
| export default function SetupFlowSVG() { | ||
| return ( | ||
| <Suspense fallback={ <PreviewBlock width="100%" height="100%" /> }> | ||
| <MediaErrorHandler | ||
| errorMessage={ __( | ||
| 'Failed to load graphic', | ||
| 'google-site-kit' | ||
| ) } | ||
| > | ||
| <LazySVGComponent /> | ||
| </MediaErrorHandler> | ||
| </Suspense> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.