Skip to content
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.

Sign up for GitHub

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

Boost: Migrate Tips to react #34697

Merged
merged 2 commits into from
Dec 19, 2023
Merged

Boost: Migrate Tips to react #34697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35df62c
Update Tips to react
dilirity Dec 18, 2023
30e1ce7
add changelog
dilirity Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion projects/plugins/boost/app/assets/src/css/admin-style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
// Components
@import 'components/connection';
@import 'components/feature-toggle';
@import 'components/benchmarks';
@import 'components/error-message';
@import 'components/critical-css';
@import 'components/close-button';
Expand Down
4 changes: 2 additions & 2 deletions projects/plugins/boost/app/assets/src/js/layout/SettingsPage/SettingsPage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import SpeedScore from '../../features/speed-score/speed-score';
import Support from './support/support';
import Tips from './Tips.svelte';
import Tips from './tips/tips';
import ReactComponent from '$features/ReactComponent.svelte';
import Footer from '$layout/footer/footer';
import Header from '$layout/header/header';
Expand Down Expand Up @@ -37,7 +37,7 @@
<slot />
</div>

<Tips />
<ReactComponent this={Tips} />

{#if $hasPrioritySupport}
<ReactComponent this={Support} />
Expand Down
45 changes: 0 additions & 45 deletions projects/plugins/boost/app/assets/src/js/layout/SettingsPage/Tips.svelte
View file
Open in desktop

This file was deleted.

17 changes: 10 additions & 7 deletions ...assets/src/css/components/benchmarks.scss → ...layout/SettingsPage/tips/tips.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,32 @@
.jb-dashboard .jb-tips {
@import '../../../../css/main/variables.scss';
@import '../../../../css/main/mixins.scss';

.tips {
margin: 0 auto;

&__title {
.tips-title {
margin-bottom: $padding;
}

&__items {
.tips-items {
@include breakpoint(md) {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2em; }
grid-gap: 2em;
}
}

.item {
@include breakpoint(sm) {
display: grid;
grid-template-columns: 80px 1fr;
grid-gap: 1em;

}

margin-bottom: 2em;


&__rate {
.item-rate {
font-size: 24px;
font-weight: 400;
line-height: 30px;
Expand All @@ -36,7 +39,7 @@
}
}

&__description {
.item-description {
flex-basis: 70%;
font-weight: 400;
line-height: 24px;
Expand Down
53 changes: 53 additions & 0 deletions projects/plugins/boost/app/assets/src/js/layout/SettingsPage/tips/tips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { getRedirectUrl } from '@automattic/jetpack-components';
import { createInterpolateElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import styles from './tips.module.scss';

const Tips = () => {
const pingdomLink = getRedirectUrl( 'jetpack-boost-pingdom' );
const whySpeedLink = getRedirectUrl( 'jetpack-boost-why-speed' );

return (
<div className="jb-section jb-section--alt">
<div className="jb-container--narrow">
<div className={ styles.tips }>
<h3 className={ styles[ 'tips-title' ] }>{ __( 'Did you know?', 'jetpack-boost' ) }</h3>
<div className={ styles[ 'tips-items' ] }>
<div className={ styles.item }>
<div className={ styles[ 'item-rate' ] }>4x</div>
<div className={ styles[ 'item-description' ] }>
{ createInterpolateElement(
__(
`Pages that take over 3 seconds to load have 4x the bounce rate of pages that load in 2 seconds or less. (source: <link>Pingdom</link>).`,
'jetpack-boost'
),
{
// eslint-disable-next-line jsx-a11y/anchor-has-content
link: <a href={ pingdomLink } target="_blank" rel="noopener noreferrer" />,
}
) }
</div>
</div>
<div className={ styles.item }>
<div className={ styles[ 'item-rate' ] }>20%</div>
<div className={ styles[ 'item-description' ] }>
{ createInterpolateElement(
__(
`A one-second delay in loading times can reduce conversion rates by 20%. (source: <link>Google</link>).`,
'jetpack-boost'
),
{
// eslint-disable-next-line jsx-a11y/anchor-has-content
link: <a href={ whySpeedLink } target="_blank" rel="noopener noreferrer" />,
}
) }
</div>
</div>
</div>
</div>
</div>
</div>
);
};

export default Tips;
5 changes: 5 additions & 0 deletions projects/plugins/boost/changelog/migrate-settings-page-tips
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Significance: patch
Type: changed
Comment: Migrate Settings Page Tips to react.


Loading