@automattic/jetpack-components 0.72.2 → 0.72.4

package/components/admin-page/style.module.scss

@@ -21,8 +21,8 @@
 		letter-spacing: 0.2em;
 		text-shadow: none;
 		font-size: 9px;
-		font-weight: bold;
+		font-weight: 700;
 		cursor: pointer;
-		color: #ffffff;
+		color: #fff;
 	}
 }

package/components/admin-page/types.ts

@@ -1,4 +1,4 @@
-import type { JetpackFooterMenuItem } from '../jetpack-footer/types.js';
+import type { JetpackFooterMenuItem } from '../jetpack-footer/types.ts';
 
 export type AdminPageProps = {
 	/**

package/components/admin-section/basic/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.module.scss';
-import type { AdminSectionBaseProps } from '../types.js';
+import type { AdminSectionBaseProps } from '../types.ts';
 
 /**
  * This is the wrapper component to build sections within your admin page.

package/components/admin-section/hero/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.module.scss';
-import type { AdminSectionBaseProps } from '../types.js';
+import type { AdminSectionBaseProps } from '../types.ts';
 
 /**
  * The wrapper component for a Hero Section to be used in admin pages.

package/components/alert/style.module.scss

@@ -16,6 +16,7 @@
 
 .is-error {
 	color: var( --jp-red );
+
 	.icon {
 		fill: var( --jp-red );
 	}
@@ -23,6 +24,7 @@
 
 .is-warning {
 	color: var( --jp-yellow-40 );
+
 	.icon {
 		fill: var( --jp-yellow-40 );
 	}
@@ -30,6 +32,7 @@
 
 .is-info {
 	color: var( --jp-blue-40 );
+
 	.icon {
 		fill: var( --jp-blue-40 );
 	}
@@ -37,6 +40,7 @@
 
 .is-success {
 	color: var( --jp-green );
+
 	.icon {
 		fill: var( --jp-green );
 	}

package/components/automattic-byline-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { AutomatticBylineLogoProps } from './types.js';
+import { AutomatticBylineLogoProps } from './types.ts';
 
 /**
  * Automattic "By line" Logo component.

package/components/boost-score-bar/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import Gridicon from '../gridicon/index.js';
-import type { BoostScoreBarProps } from './types.js';
+import Gridicon from '../gridicon/index.tsx';
+import type { BoostScoreBarProps } from './types.ts';
 import type { FunctionComponent } from 'react';
 
 import './style.scss';

package/components/boost-score-bar/style.scss

@@ -25,6 +25,7 @@ $no_boost_score_size: 28px;
 
 	@media (max-width: 767px) {
 		flex-direction: column;
+
 		&__label {
 			background-color: transparent;
 		}
@@ -32,6 +33,7 @@ $no_boost_score_size: 28px;
 
 
 	&__loading {
+
 		@extend %score-pill;
 		width: $bar_height;
 		display: flex;
@@ -40,6 +42,7 @@ $no_boost_score_size: 28px;
 	}
 
 	&__label {
+
 		@extend %score-pill;
 		display: grid;
 		grid-template-columns: 24px 1fr;
@@ -57,6 +60,7 @@ $no_boost_score_size: 28px;
 	}
 
 	&__score {
+
 		@extend %score-pill;
 		border-radius: 100%;
 		font-weight: 700;
@@ -76,6 +80,7 @@ $no_boost_score_size: 28px;
 		max-width: 100%;
 		position: relative;
 		z-index: $label_z_index - 10;
+
 		@media (min-width: 768px) {
 			width: calc(100% + #{math.div($bar-height, 2)});
 			margin-left: math.div(-$bar_height, 2) ;
@@ -91,6 +96,7 @@ $no_boost_score_size: 28px;
 		will-change: width;
 		width: 0;
 		position: relative;
+
 		@media (max-width: 767px) {
 			min-width: $bar_height + 1px;
 			border-radius: inherit;

package/components/boost-score-graph/annotations-plugin.ts

@@ -1,5 +1,5 @@
 import uPlot from 'uplot';
-import { Annotation } from './index.js';
+import { Annotation } from './index.tsx';
 
 import './style-annotation.scss';
 

package/components/boost-score-graph/index.tsx

@@ -1,7 +1,7 @@
 import React, { type FunctionComponent } from 'react';
-import Text from '../text/index.js';
-import Background from './background.js';
-import UplotLineChart from './uplot-line-chart.js';
+import Text from '../text/index.tsx';
+import Background from './background.tsx';
+import UplotLineChart from './uplot-line-chart.tsx';
 import './style.scss';
 
 export interface Period {

package/components/boost-score-graph/style-annotation.scss

@@ -1,5 +1,5 @@
 $black: #101517;
-$white: #ffffff;
+$white: #fff;
 
 .jb-graph-annotations {
 	pointer-events: none;
@@ -33,6 +33,7 @@ $white: #ffffff;
 		}
 
 		&:hover {
+
 			&::after {
 				background: rgba(146, 175, 215, 1);
 			}
@@ -40,6 +41,7 @@ $white: #ffffff;
 	}
 
 	&__annotation {
+
 		&::after {
 			content: '';
 			width: 0;

package/components/boost-score-graph/style-tooltip.scss

@@ -1,6 +1,6 @@
 $grey: #8e8e8e;
 $black: #101517;
-$white: #ffffff;
+$white: #fff;
 
 .jb-score-tooltips-container {
     width: 100%;

package/components/boost-score-graph/tooltip.tsx

@@ -3,7 +3,7 @@ import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { type FunctionComponent } from 'react';
 import './style-tooltip.scss';
-import { Period } from './index.js';
+import { Period } from './index.tsx';
 
 export const Tooltip: FunctionComponent = ( { period }: { period: Period } ) => {
 	if ( ! period || ! period.dimensions || ! period.timestamp ) {

package/components/boost-score-graph/tooltips-plugin.ts

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom/client';
 import uPlot from 'uplot';
-import { Tooltip } from './tooltip.js';
-import { Period } from './index.js';
+import { Period } from './index.tsx';
+import { Tooltip } from './tooltip.tsx';
 
 /**
  * Custom tooltips plugin for uPlot.

package/components/boost-score-graph/uplot-line-chart.tsx

@@ -2,15 +2,15 @@ import { __ } from '@wordpress/i18n';
 import React, { useMemo, useRef, useCallback } from 'react';
 import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
-import { getUserLocale } from '../../lib/locale/index.js';
-import numberFormat from '../number-format/index.js';
-import { annotationsPlugin } from './annotations-plugin.js';
-import { dayHighlightPlugin } from './day-highlight-plugin.js';
-import getDateFormat from './get-date-format.js';
-import { tooltipsPlugin } from './tooltips-plugin.js';
-import { useBoostScoreTransform } from './use-boost-score-transform.js';
-import useResize from './use-resize.js';
-import { type Annotation, Period } from './index.js';
+import { getUserLocale } from '../../lib/locale/index.ts';
+import numberFormat from '../number-format/index.ts';
+import { annotationsPlugin } from './annotations-plugin.ts';
+import { dayHighlightPlugin } from './day-highlight-plugin.ts';
+import getDateFormat from './get-date-format.ts';
+import { type Annotation, Period } from './index.tsx';
+import { tooltipsPlugin } from './tooltips-plugin.ts';
+import { useBoostScoreTransform } from './use-boost-score-transform.ts';
+import useResize from './use-resize.ts';
 import './style-uplot.scss';
 
 const DEFAULT_DIMENSIONS = {

package/components/boost-score-graph/use-boost-score-transform.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Period } from './index.js';
+import { Period } from './index.tsx';
 
 type ScoreGraphAlignedData = [
 	number[], // timestamps

package/components/button/index.tsx

@@ -10,7 +10,7 @@ import React, { forwardRef } from 'react';
  * Internal dependencies
  */
 import styles from './style.module.scss';
-import type { ButtonProps } from './types.js';
+import type { ButtonProps } from './types.ts';
 
 /**
  * Button component

package/components/button/style.module.scss

@@ -14,6 +14,7 @@
 		padding: var( --spacing-base );
 		width: calc( var( --spacing-base ) * 5 );
 		height: calc( var( --spacing-base ) * 5 );
+
 		> svg:first-child {
 			margin: 0;
 			padding: 0;
@@ -170,6 +171,7 @@
 
 		// Link
 		&:global(.is-link) {
+
 			&:not(:disabled) {
 				color: var(--jp-red-50);
 			}

package/components/contextual-upgrade-trigger/index.tsx

@@ -1,9 +1,9 @@
 import { Icon, arrowRight } from '@wordpress/icons';
 import clsx from 'clsx';
-import IconTooltip from '../icon-tooltip/index.js';
-import Text from '../text/index.js';
+import IconTooltip from '../icon-tooltip/index.tsx';
+import Text from '../text/index.tsx';
 import styles from './style.module.scss';
-import { CutBaseProps } from './types.js';
+import { CutBaseProps } from './types.ts';
 import type React from 'react';
 
 const ContextualUpgradeTrigger: React.FC< CutBaseProps > = ( {

package/components/contextual-upgrade-trigger/style.module.scss

@@ -34,6 +34,7 @@
 
 	&:focus-within,
 	&:hover {
+
 		& .icon {
 			transform: translateX( calc( var( --spacing-base ) * 2 ) );
 		}
@@ -46,12 +47,12 @@
 
 	// Overwrite styles in Text component
 	.cta {
-		font-weight: bold;
+		font-weight: 700;
 	}
 }
 
 .cta {
-	font-weight: bold;
+	font-weight: 700;
 }
 
 .icon {

package/components/copy-to-clipboard/index.tsx

@@ -1,9 +1,9 @@
 import { useCopyToClipboard } from '@wordpress/compose';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import Button from '../button/index.js';
-import { ClipboardIcon, CheckmarkIcon } from '../icons/index.js';
-import { CopyToClipboardProps } from './types.js';
+import Button from '../button/index.tsx';
+import { ClipboardIcon, CheckmarkIcon } from '../icons/index.tsx';
+import { CopyToClipboardProps } from './types.ts';
 import type React from 'react';
 
 export const CopyToClipboard: React.FC< CopyToClipboardProps > = ( {

package/components/copy-to-clipboard/types.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../button/types.js';
+import { ButtonProps } from '../button/types.ts';
 
 export type CopyToClipboardProps = ButtonProps & {
 	buttonStyle?: 'icon' | 'text' | 'icon-text';

package/components/decorative-card/index.tsx

@@ -1,4 +1,4 @@
-import type { DecorativeCardProps } from './types.js';
+import type { DecorativeCardProps } from './types.ts';
 import type React from 'react';
 import './style.scss';
 

package/components/decorative-card/style.scss

@@ -22,7 +22,7 @@
 		background-size: cover;
 		position: relative;
 
-		&:before {
+		&::before {
 			content: '';
 			display: block;
 			position: absolute;
@@ -35,7 +35,7 @@
 	}
 
 	&__content {
-		background: #FFFFFF;
+		background: #FFF;
 		padding: 2rem;
 	}
 
@@ -85,7 +85,7 @@
 			top: calc(100% + 16px);
 		}
 
-		&:after {
+		&::after {
 			top: calc(100% + 32px);
 			width: 75%;
 		}

package/components/dialog/index.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
-import Col from '../layout/col/index.js';
-import Container from '../layout/container/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+import Col from '../layout/col/index.tsx';
+import Container from '../layout/container/index.tsx';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
 import styles from './style.module.scss';
 
 type DialogProps = {

package/components/dialog/style.module.scss

@@ -14,6 +14,7 @@
 // Fit images in secondary section.
 .secondary {
 	align-items: center;
+
 	img {
 		// let's fit images
 		object-fit: cover;

package/components/diff-viewer/index.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
-import parseFilename from './parse-filename.js';
-import parsePatch from './parse-patch.js';
+import parseFilename from './parse-filename.ts';
+import parsePatch from './parse-patch.ts';
 import styles from './styles.module.scss';
 
 const filename = ( {

package/components/donut-meter/style.scss

@@ -1,10 +1,13 @@
 .donut-meter {
+
   .donut-meter-segment {
     stroke: var(--jp-green);
   }
+
   &.is-warning .donut-meter-segment {
     stroke: var(--jp-yellow-10);
   }
+
   &.is-danger .donut-meter-segment {
     stroke: var(--jp-red);
   }

package/components/dot-pager/index.tsx

@@ -2,7 +2,7 @@ import { Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React, { Children, useState, useEffect, ReactNode, useCallback, useMemo } from 'react';
-import { Swipeable } from '../swipeable/index.js';
+import { Swipeable } from '../swipeable/index.tsx';
 
 import './style.scss';
 

package/components/dot-pager/style.scss

@@ -10,6 +10,7 @@
 .dot-pager__page {
 	height: 100%;
 	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+
 	@include reduce-motion( "transition" );
 	opacity: 1;
 	visibility: visible;
@@ -26,6 +27,7 @@
 	left: 0;
 	right: 0;
 	z-index: 1;
+
 	li {
 		display: inline-flex;
 		margin: 0 4px;
@@ -35,6 +37,7 @@
 		&:first-child {
 			margin-left: 0;
 		}
+
 		&:last-child {
 			margin-right: 0;
 		}
@@ -74,6 +77,7 @@
 }
 
 .dot-pager {
+
 	&__button {
 		margin-right: 10px;
 	}

package/components/global-notices/global-notices.tsx

@@ -1,6 +1,6 @@
 import { SnackbarList } from '@wordpress/components';
 import styles from './styles.module.scss';
-import { useGlobalNotices } from './use-global-notices.js';
+import { useGlobalNotices } from './use-global-notices.ts';
 
 export type GlobalNoticesProps = {
 	maxVisibleNotices?: number;

package/components/global-notices/index.ts

@@ -1,3 +1,3 @@
-export * from './global-notices.js';
-export * from './use-global-notices.js';
+export * from './global-notices.tsx';
+export * from './use-global-notices.ts';
 export { store as globalNoticesStore } from '@wordpress/notices';

package/components/global-notices/styles.module.scss

@@ -1,6 +1,7 @@
 @import '@automattic/jetpack-base-styles/gutenberg-base-styles';
 
 .global-notices {
+
 	&:global(.components-snackbar-list) {
 		position: fixed;
 		inset-block-start: auto; // top

package/components/gridicon/index.tsx

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { Component } from 'react';
 import './style.scss';
-import { GridiconProps } from './types.js';
+import { GridiconProps } from './types.ts';
 
 class Gridicon extends Component< GridiconProps > {
 	static defaultProps = {

package/components/icon-tooltip/index.tsx

@@ -1,9 +1,9 @@
 import { Popover } from '@wordpress/components';
 import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
-import Button from '../button/index.js';
-import Gridicon from '../gridicon/index.js';
-import { IconTooltipProps, Placement, Position } from './types.js';
+import Button from '../button/index.tsx';
+import Gridicon from '../gridicon/index.tsx';
+import { IconTooltipProps, Placement, Position } from './types.ts';
 
 import './style.scss';
 

package/components/icon-tooltip/style.scss

@@ -9,6 +9,7 @@ $arrow-color: var( --jp-gray );
 
 // Namespace to avoid overriding global styles
 .icon-tooltip-helper {
+
 	/*
 	* Fix arrow placement - section start
 	*/
@@ -19,6 +20,7 @@ $arrow-color: var( --jp-gray );
 	.components-popover:not([data-y-axis=middle])[data-x-axis=right] .components-popover__content {
 		margin-left: -62px;	
 	}
+
 	/*
 	* Fix arrow placement - section end
 	*/
@@ -49,6 +51,7 @@ $arrow-color: var( --jp-gray );
 	.components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
 		bottom: 4px;
 	}
+
 	/*
 	* Fix arrow position for legacy position option - section end
 	*/

package/components/icons/index.tsx

@@ -2,7 +2,7 @@ import { Path, SVG, G, Polygon } from '@wordpress/components';
 import clsx from 'clsx';
 import { SocialLogo } from 'social-logos';
 import styles from './style.module.scss';
-import { BaseIconProps } from './types.js';
+import { BaseIconProps } from './types.ts';
 import type React from 'react';
 
 /**

package/components/icons/style.module.scss

@@ -1,7 +1,7 @@
 @import '@automattic/jetpack-base-styles/gutenberg-base-styles';
 
 .star-icon {
-	fill: black;
+	fill: #000;
 }
 
 .jetpack,
@@ -11,9 +11,11 @@
 
 .socialIcon {
 	fill: $gray-700;
+
 	&.bluesky {
 		fill: var( --color-bluesky );
 	}
+
 	&.facebook {
 		fill: var( --color-facebook );
 		// Add some specificity to override the border-radius on Jetpack settings page
@@ -21,24 +23,31 @@
 			border-radius: 50%;
 		}
 	}
+
 	&.instagram {
 		fill: var( --color-instagram );
 	}
+
 	&.twitter {
 		fill: var( --color-twitter );
 	}
+
 	&.linkedin {
 		fill: var( --color-linkedin );
 	}
+
 	&.tumblr {
 		fill: var( --color-tumblr );
 	}
+
 	&.google {
 		fill: var( --color-gplus );
 	}
+
 	&.mastodon {
 		fill: var( --color-mastodon );
 	}
+
 	&.nextdoor {
 		fill: var( --color-nextdoor );
 		// Add some specificity to override the border-radius on Jetpack settings page
@@ -46,14 +55,18 @@
 			border-radius: 50%;
 		}
 	}
+
 	&.instagram {
 		fill: var( --color-instagram );
 	}
+
 	&.whatsapp {
 		fill: var( --color-whatsapp );
 	}
+
 	&.threads {
 		fill: var( --color-threads );
+
 		&:global(.social-logo) {
 			border-radius: 40%;
 		}

package/components/indeterminate-progress-bar/index.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * Internal dependencies
  */
 import styles from './style.module.scss';
-import { IndeterminateProgressBarProps } from './types.js';
+import { IndeterminateProgressBarProps } from './types.ts';
 import type React from 'react';
 
 /**

package/components/indeterminate-progress-bar/style.module.scss

@@ -22,12 +22,14 @@
 }
 
 @keyframes indeterminate_progress_bar__animation {
+
 	0% {
 		background-position: 136px 0;
 	}
 }
 
 @media (prefers-reduced-motion: no-preference) {
+
 	.indeterminate-progress-bar {
 		animation: indeterminate_progress_bar__animation 2000ms infinite linear;
 	}

package/components/jetpack-footer/index.tsx

@@ -2,13 +2,13 @@ import { __, _x } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import clsx from 'clsx';
 import React from 'react';
-import { getRedirectUrl } from '../../index.js';
-import getSiteAdminUrl from '../../tools/get-site-admin-url/index.js';
-import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
+import { getRedirectUrl } from '../../index.ts';
+import getSiteAdminUrl from '../../tools/get-site-admin-url/index.ts';
+import AutomatticBylineLogo from '../automattic-byline-logo/index.tsx';
 import './style.scss';
-import JetpackLogo from '../jetpack-logo/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
-import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.js';
+import JetpackLogo from '../jetpack-logo/index.tsx';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
+import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.ts';
 
 const JetpackIcon: React.FC = () => (
 	<JetpackLogo logoColor="#000" showText={ false } height={ 16 } aria-hidden="true" />