@automattic/jetpack-components 1.9.0 → 1.11.0

package/components/chip/style.module.scss

@@ -11,8 +11,4 @@
 	line-height: 20px;
 	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
-	&.is-new {
-		background-color: var(--jp-green-5);
-		color: var(--jp-green-50);
-	}
 }

package/components/gravatar/index.tsx

@@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+import { Hovercards } from '@gravatar-com/hovercards';
+import '@gravatar-com/hovercards/dist/style.css';
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+import { sha256 } from 'js-sha256';
+import './style.scss';
+
+/**
+ * Gravatar `defaultImage` styles, mirroring https://docs.gravatar.com/sdk/images/#default-image
+ */
+type DefaultImage =
+	| 'blank'
+	| 'color'
+	| 'identicon'
+	| 'initials'
+	| 'monsterid'
+	| 'mp'
+	| 'retro'
+	| 'robohash'
+	| 'wavatar';
+
+export type GravatarProps = {
+	/**
+	 * Style of the placeholder image when the email has no Gravatar profile.
+	 * @default 'initials'
+	 */
+	defaultImage?: DefaultImage;
+	/**
+	 * Display name for accessibility (used as `alt` text and the hovercard label).
+	 */
+	displayName?: string;
+	/**
+	 * Email address to look up on Gravatar.
+	 */
+	email: string;
+	/**
+	 * Rendered avatar size in pixels.
+	 * @default 48
+	 */
+	size?: number;
+	/**
+	 * Optional class name forwarded to the underlying `<img>` element. The
+	 * default `jetpack-components-gravatar` class is always applied so consumers
+	 * can target it directly.
+	 */
+	className?: string;
+	/**
+	 * Whether to attach a Gravatar profile hovercard to the avatar.
+	 * @default true
+	 */
+	useHovercard?: boolean;
+};
+
+/**
+ * Renders a Gravatar profile image with an optional Gravatar profile hovercard.
+ *
+ * If the email has no Gravatar profile, the configured `defaultImage` style is
+ * used (initials by default).
+ *
+ * Long-term, this is the seam for switching to a core or Gravatar-shipped
+ * component (see https://github.com/WordPress/gutenberg/issues/76836); until
+ * then, Forms and Newsletter share this implementation.
+ *
+ * @param props              - The component props.
+ * @param props.defaultImage - Style of the placeholder image when the email has no Gravatar.
+ * @param props.displayName  - Display name used for `alt` text + hovercard label.
+ * @param props.email        - Email address to look up on Gravatar.
+ * @param props.size         - Rendered avatar size in pixels.
+ * @param props.className    - Optional class name forwarded to the underlying `<img>`.
+ * @param props.useHovercard - Whether to attach the Gravatar profile hovercard.
+ * @return The Gravatar avatar `<img>`, or null when no email is available.
+ */
+export default function Gravatar( {
+	defaultImage = 'initials',
+	displayName,
+	email,
+	size = 48,
+	className,
+	useHovercard = true,
+}: GravatarProps ): JSX.Element | null {
+	const profileImageRef = useRef< HTMLImageElement | null >( null );
+	const hovercardRef = useRef< Hovercards | null >( null );
+
+	useEffect( () => {
+		if ( ! useHovercard || ! profileImageRef.current ) {
+			return;
+		}
+		hovercardRef.current = new Hovercards( {
+			// See https://github.com/Automattic/gravatar/tree/trunk/web/packages/hovercards#translations
+			i18n: {
+				'Edit your profile →': __( 'Edit your profile →', 'jetpack-components' ),
+				'View profile →': __( 'View profile →', 'jetpack-components' ),
+				Contact: __( 'Contact', 'jetpack-components' ),
+				'Send money': __( 'Send money', 'jetpack-components' ),
+				'Sorry, we are unable to load this Gravatar profile.': __(
+					'Sorry, we are unable to load this Gravatar profile.',
+					'jetpack-components'
+				),
+				'Gravatar not found.': __( 'Gravatar not found.', 'jetpack-components' ),
+				'This profile is private.': __( 'This profile is private.', 'jetpack-components' ),
+				'Too Many Requests.': __( 'Too many requests.', 'jetpack-components' ),
+				'Internal Server Error.': __( 'Internal server error.', 'jetpack-components' ),
+				'Is this you?': __( 'Is this you?', 'jetpack-components' ),
+				'Claim your free profile.': __( 'Claim your free profile.', 'jetpack-components' ),
+				Email: __( 'Email', 'jetpack-components' ),
+				'Home Phone': __( 'Home phone', 'jetpack-components' ),
+				'Work Phone': __( 'Work phone', 'jetpack-components' ),
+				'Cell Phone': __( 'Cell phone', 'jetpack-components' ),
+				'Contact Form': __( 'Contact form', 'jetpack-components' ),
+				Calendar: __( 'Calendar', 'jetpack-components' ),
+			},
+		} );
+		hovercardRef.current.attach( profileImageRef.current );
+	}, [ useHovercard ] );
+
+	if ( ! email ) {
+		return null;
+	}
+
+	const hashedEmail = sha256( email );
+	const hovercardName = displayName ? `&name=${ encodeURIComponent( displayName ) }` : '';
+
+	return (
+		<img
+			ref={ profileImageRef }
+			className={ clsx( 'jetpack-components-gravatar', className ) }
+			alt={ displayName || '' }
+			src={ `https://secure.gravatar.com/avatar/${ hashedEmail }?d=${ defaultImage }${ hovercardName }` }
+			width={ size }
+			height={ size }
+			loading="lazy"
+		/>
+	);
+}

package/components/gravatar/style.scss

@@ -0,0 +1,7 @@
+.jetpack-components-gravatar {
+	background-color: var(--jp-gray-5, #dcdcde);
+	border-radius: 50%;
+	display: block;
+	flex-shrink: 0; // Prevent shrinking when Gravatar is inside flex containers.
+	overflow: hidden;
+}

package/components/icon-tooltip/index.tsx

@@ -1,8 +1,8 @@
 import { Popover } from '@wordpress/components';
+import { Icon, info } from '@wordpress/icons';
 import clsx from 'clsx';
 import { useCallback, useState, ReactElement, FC } from 'react';
 import Button from '../button/index.tsx';
-import Gridicon from '../gridicon/index.tsx';
 import { IconTooltipProps, Placement, Position } from './types.ts';
 
 import './style.scss';
@@ -31,7 +31,7 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 	iconClassName = '',
 	placement = 'bottom-end',
 	animate = true,
-	iconCode = 'info-outline',
+	iconCode = info,
 	iconSize = 18,
 	offset = 10,
 	title,
@@ -109,7 +109,7 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 		>
 			{ ! isAnchorWrapper && (
 				<Button variant="link" onMouseDown={ toggleTooltip }>
-					<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />
+					<Icon className={ iconClassName } icon={ iconCode } size={ iconSize } />
 				</Button>
 			) }
 			<div

package/components/icon-tooltip/types.ts

@@ -1,3 +1,4 @@
+import type { IconType } from '@wordpress/components';
 import type { ReactNode } from 'react';
 
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
@@ -17,7 +18,7 @@ export type IconTooltipProps = {
 	className?: string;
 
 	/**
-	 * The class name applied to Gridicon.
+	 * The class name applied to the icon.
 	 */
 	iconClassName?: string;
 
@@ -37,9 +38,9 @@ export type IconTooltipProps = {
 	animate?: boolean;
 
 	/**
-	 * The icon code for Gridicon.
+	 * The icon to display. Accepts icon components from `@wordpress/icons`.
 	 */
-	iconCode?: string;
+	iconCode?: IconType;
 
 	/**
 	 * The title of Popover.

package/components/jetpack-footer/index.tsx

@@ -69,12 +69,12 @@ const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherPro
 					return (
 						<li key={ item.label }>
 							<Text
-								variant="body-sm"
+								variant="body-md"
 								className="jetpack-footer__menu-item"
 								render={
 									isButton ? (
 										<Link
-											render={ <Text variant="body-md" render={ <span /> } /> }
+											render={ <span /> }
 											tone="neutral"
 											variant="default"
 											role={ item.role }
@@ -84,7 +84,6 @@ const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherPro
 										/>
 									) : (
 										<Link
-											render={ <Text variant="body-md" render={ <a /> } /> }
 											tone="neutral"
 											variant="default"
 											href={ item.href || '' }

package/components/terms-of-service/index.tsx

@@ -1,6 +1,6 @@
-import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
 import { getRedirectUrl } from '../../index.ts';
 import Text from '../text/index.tsx';
@@ -46,8 +46,8 @@ const MultipleButtonsText = ( { multipleButtonsLabels } ) => {
 			),
 			{
 				strong: <strong />,
-				tosLink: <Link slug="wpcom-tos" />,
-				shareDetailsLink: <Link slug="jetpack-support-what-data-does-jetpack-sync" />,
+				tosLink: <TosLink slug="wpcom-tos" />,
+				shareDetailsLink: <TosLink slug="jetpack-support-what-data-does-jetpack-sync" />,
 			}
 		);
 	}
@@ -58,8 +58,8 @@ const MultipleButtonsText = ( { multipleButtonsLabels } ) => {
 			'jetpack-components'
 		),
 		{
-			tosLink: <Link slug="wpcom-tos" />,
-			shareDetailsLink: <Link slug="jetpack-support-what-data-does-jetpack-sync" />,
+			tosLink: <TosLink slug="wpcom-tos" />,
+			shareDetailsLink: <TosLink slug="jetpack-support-what-data-does-jetpack-sync" />,
 		}
 	);
 };
@@ -76,8 +76,8 @@ const SingleButtonText = ( { agreeButtonLabel } ) =>
 		),
 		{
 			strong: <strong />,
-			tosLink: <Link slug="wpcom-tos" />,
-			shareDetailsLink: <Link slug="jetpack-support-what-data-does-jetpack-sync" />,
+			tosLink: <TosLink slug="wpcom-tos" />,
+			shareDetailsLink: <TosLink slug="jetpack-support-what-data-does-jetpack-sync" />,
 		}
 	);
 
@@ -88,15 +88,15 @@ const TermsOfServiceTextOnly = () =>
 			'jetpack-components'
 		),
 		{
-			tosLink: <Link slug="wpcom-tos" />,
-			shareDetailsLink: <Link slug="jetpack-support-what-data-does-jetpack-sync" />,
+			tosLink: <TosLink slug="wpcom-tos" />,
+			shareDetailsLink: <TosLink slug="jetpack-support-what-data-does-jetpack-sync" />,
 		}
 	);
 
-const Link: FC< { slug: string; children?: ReactNode } > = ( { slug, children } ) => (
-	<ExternalLink className="terms-of-service__link" href={ getRedirectUrl( slug ) }>
+const TosLink: FC< { slug: string; children?: ReactNode } > = ( { slug, children } ) => (
+	<Link openInNewTab className="terms-of-service__link" href={ getRedirectUrl( slug ) }>
 		{ children }
-	</ExternalLink>
+	</Link>
 );
 
 export default TermsOfService;

package/components/testimonials/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback } from '@wordpress/element';
-import Gridicon from '../gridicon/index.tsx';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 import { Testimonial } from './testimonial.tsx';
 import { TestimonialsType } from './types.ts';
 
@@ -30,7 +30,7 @@ const Testimonials: TestimonialsType = ( { testimonials } ) => {
 					className="testimonials__left-arrow"
 					onClick={ decrementTestimonial }
 				>
-					<Gridicon icon="chevron-left" size={ 48 } />
+					<Icon icon={ chevronLeft } size={ 48 } />
 				</button>
 			) }
 
@@ -48,7 +48,7 @@ const Testimonials: TestimonialsType = ( { testimonials } ) => {
 					className="testimonials__right-arrow"
 					onClick={ incrementTestimonial }
 				>
-					<Gridicon icon="chevron-right" size={ 48 } />
+					<Icon icon={ chevronRight } size={ 48 } />
 				</button>
 			) }
 		</div>

package/components/toggle-control/index.tsx

@@ -23,6 +23,9 @@ export interface ToggleControlProps {
 	/** The label for the toggle. */
 	label?: ReactNode;
 
+	/** Accessible name for the underlying checkbox. Use when no visible `label` is rendered. */
+	'aria-label'?: string;
+
 	/** The size of the toggle. */
 	size?: 'small' | 'normal';
 
@@ -37,6 +40,7 @@ const ToggleControl: FC< ToggleControlProps > = ( {
 	help,
 	toggling,
 	label,
+	'aria-label': ariaLabel,
 	size = 'normal',
 	onChange,
 } ) => {
@@ -67,6 +71,7 @@ const ToggleControl: FC< ToggleControlProps > = ( {
 			disabled={ disabled }
 			help={ help }
 			label={ label }
+			aria-label={ ariaLabel }
 			onChange={ handleOnChange }
 		/>
 	);

package/index.ts

@@ -25,8 +25,10 @@ export { default as AutomatticBylineLogo } from './components/automattic-byline-
 export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.tsx';
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.tsx';
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
+/** @deprecated Use `Spinner` from `@wordpress/components` instead. */
 export { default as Spinner } from './components/spinner/index.tsx';
-export { default as Gridicon } from './components/gridicon/index.tsx';
+export { default as Gravatar } from './components/gravatar/index.tsx';
+export type { GravatarProps } from './components/gravatar/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
 export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.9.0",
+	"version": "1.11.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -22,6 +22,22 @@
 			"types": "./build/index.d.ts",
 			"default": "./build/index.js"
 		},
+		"./admin-page": {
+			"types": "./build/components/admin-page/index.d.ts",
+			"default": "./build/components/admin-page/index.js"
+		},
+		"./global-notices": {
+			"types": "./build/components/global-notices/index.d.ts",
+			"default": "./build/components/global-notices/index.js"
+		},
+		"./gravatar": {
+			"types": "./build/components/gravatar/index.d.ts",
+			"default": "./build/components/gravatar/index.js"
+		},
+		"./jetpack-footer": {
+			"types": "./build/components/jetpack-footer/index.d.ts",
+			"default": "./build/components/jetpack-footer/index.js"
+		},
 		"./jetpack-logo": {
 			"types": "./build/components/jetpack-logo/index.d.ts",
 			"default": "./build/components/jetpack-logo/index.js"
@@ -45,12 +61,13 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.23",
-		"@automattic/jetpack-boost-score-api": "^1.0.38",
-		"@automattic/jetpack-script-data": "^0.6.2",
-		"@automattic/number-formatters": "^1.1.6",
+		"@automattic/jetpack-api": "^1.0.24",
+		"@automattic/jetpack-boost-score-api": "^1.0.40",
+		"@automattic/jetpack-script-data": "^0.6.3",
+		"@automattic/number-formatters": "^1.1.7",
 		"@babel/runtime": "^7",
-		"@wordpress/admin-ui": "1.12.0",
+		"@gravatar-com/hovercards": "0.16.0",
+		"@wordpress/admin-ui": "2.0.0",
 		"@wordpress/browserslist-config": "6.44.0",
 		"@wordpress/components": "32.6.0",
 		"@wordpress/compose": "7.44.0",
@@ -63,15 +80,16 @@
 		"@wordpress/theme": "0.11.0",
 		"@wordpress/ui": "0.11.0",
 		"clsx": "2.1.1",
+		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.13",
+		"social-logos": "^3.3.14",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.1.0",
+		"@automattic/jetpack-base-styles": "^1.2.1",
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@jest/globals": "30.3.0",

package/build/components/gridicon/index.d.ts

@@ -1,14 +0,0 @@
-import { Component } from 'react';
-import './style.scss';
-import { GridiconProps } from './types.ts';
-declare class Gridicon extends Component<GridiconProps> {
-    static defaultProps: {
-        'aria-hidden': string;
-        focusable: string;
-    };
-    needsOffset(icon: any, size: any): boolean;
-    getSVGDescription(icon: any): string;
-    renderIcon(icon: any): import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export default Gridicon;

package/build/components/gridicon/index.js

@@ -1,173 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* !!!
-This is a fork of the Jetpack Gridicon code:
- https://github.com/Automattic/jetpack/blob/f8078c2cd12ac508334da2fb08e37a92cf283c14/_inc/client/components/gridicon/index.jsx
-
-It has been modified to work with Preact, and only includes the icons that we need.
-!!! */
-import { __ } from '@wordpress/i18n';
-import clsx from 'clsx';
-import { Component } from 'react';
-import './style.scss';
-class Gridicon extends Component {
-    static defaultProps = {
-        'aria-hidden': 'false',
-        focusable: 'true',
-    };
-    needsOffset(icon, size) {
-        const iconNeedsOffset = [
-            'gridicons-arrow-left',
-            'gridicons-arrow-right',
-            'gridicons-calendar',
-            'gridicons-cart',
-            'gridicons-folder',
-            'gridicons-help-outline',
-            'gridicons-info',
-            'gridicons-info-outline',
-            'gridicons-posts',
-            'gridicons-star-outline',
-            'gridicons-star',
-        ];
-        if (iconNeedsOffset.indexOf(icon) >= 0) {
-            return size % 18 === 0;
-        }
-        return false;
-    }
-    getSVGDescription(icon) {
-        // Enable overriding desc with falsy/truthy values.
-        if ('description' in this.props) {
-            return this.props.description;
-        }
-        switch (icon) {
-            default:
-                return '';
-            case 'gridicons-audio':
-                return __('Has audio', 'jetpack-components');
-            case 'gridicons-arrow-left':
-                return __('Arrow left', 'jetpack-components');
-            case 'gridicons-arrow-right':
-                return __('Arrow right', 'jetpack-components');
-            case 'gridicons-calendar':
-                return __('Is an event', 'jetpack-components');
-            case 'gridicons-cart':
-                return __('Is a product', 'jetpack-components');
-            case 'chevron-down':
-                return __('Show filters', 'jetpack-components');
-            case 'gridicons-comment':
-                return __('Matching comment', 'jetpack-components');
-            case 'gridicons-cross':
-                return __('Close', 'jetpack-components');
-            case 'gridicons-domains':
-                return __('Website', 'jetpack-components');
-            case 'gridicons-filter':
-                return __('Toggle search filters', 'jetpack-components');
-            case 'gridicons-folder':
-                return __('Category', 'jetpack-components');
-            case 'gridicons-help-outline':
-                return __('Help', 'jetpack-components');
-            case 'gridicons-info':
-            case 'gridicons-info-outline':
-                return __('Information', 'jetpack-components');
-            case 'gridicons-image-multiple':
-                return __('Has multiple images', 'jetpack-components');
-            case 'gridicons-image':
-                return __('Has an image', 'jetpack-components');
-            case 'gridicons-page':
-                return __('Page', 'jetpack-components');
-            case 'gridicons-post':
-                return __('Post', 'jetpack-components');
-            case 'gridicons-jetpack-search':
-            case 'gridicons-search':
-                return __('Magnifying Glass', 'jetpack-components');
-            case 'gridicons-tag':
-                return __('Tag', 'jetpack-components');
-            case 'gridicons-video':
-                return __('Has a video', 'jetpack-components');
-        }
-    }
-    renderIcon(icon) {
-        switch (icon) {
-            default:
-                return null;
-            case 'gridicons-audio':
-                return (_jsx("g", { children: _jsx("path", { d: "M8 4v10.184C7.686 14.072 7.353 14 7 14c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3V7h7v4.184c-.314-.112-.647-.184-1-.184-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3V4H8z" }) }));
-            case 'gridicons-arrow-left':
-                return (_jsx("g", { children: _jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }));
-            case 'gridicons-arrow-right':
-                return (_jsx("g", { children: _jsx("path", { d: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" }) }));
-            case 'gridicons-block':
-                return (_jsx("g", { children: _jsx("path", { d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zM4 12c0-4.418 3.582-8 8-8 1.848 0 3.545.633 4.9 1.686L5.686 16.9C4.633 15.545 4 13.848 4 12zm8 8c-1.848 0-3.546-.633-4.9-1.686L18.314 7.1C19.367 8.455 20 10.152 20 12c0 4.418-3.582 8-8 8z" }) }));
-            case 'gridicons-calendar':
-                return (_jsx("g", { children: _jsx("path", { d: "M19 4h-1V2h-2v2H8V2H6v2H5c-1.105 0-2 .896-2 2v13c0 1.104.895 2 2 2h14c1.104 0 2-.896 2-2V6c0-1.104-.896-2-2-2zm0 15H5V8h14v11z" }) }));
-            case 'gridicons-cart':
-                return (_jsx("g", { children: _jsx("path", { d: "M9 20c0 1.1-.9 2-2 2s-1.99-.9-1.99-2S5.9 18 7 18s2 .9 2 2zm8-2c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm.396-5c.937 0 1.75-.65 1.952-1.566L21 5H7V4c0-1.105-.895-2-2-2H3v2h2v11c0 1.105.895 2 2 2h12c0-1.105-.895-2-2-2H7v-2h10.396z" }) }));
-            case 'gridicons-checkmark':
-                return (_jsx("g", { children: _jsx("path", { d: "M11 17.768l-4.884-4.884 1.768-1.768L11 14.232l8.658-8.658C17.823 3.39 15.075 2 12 2 6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10c0-1.528-.353-2.97-.966-4.266L11 17.768z" }) }));
-            case 'gridicons-chevron-left':
-                return (_jsx("g", { children: _jsx("path", { d: "M16.443 7.41L15.0399 6L9.06934 12L15.0399 18L16.443 16.59L11.8855 12L16.443 7.41Z" }) }));
-            case 'gridicons-chevron-right':
-                return (_jsx("g", { children: _jsx("path", { d: "M10.2366 6L8.8335 7.41L13.391 12L8.8335 16.59L10.2366 18L16.2072 12L10.2366 6Z" }) }));
-            case 'gridicons-chevron-down':
-                return (_jsx("g", { children: _jsx("path", { d: "M20 9l-8 8-8-8 1.414-1.414L12 14.172l6.586-6.586" }) }));
-            case 'gridicons-comment':
-                return (_jsx("g", { children: _jsx("path", { d: "M3 6v9c0 1.105.895 2 2 2h9v5l5.325-3.804c1.05-.75 1.675-1.963 1.675-3.254V6c0-1.105-.895-2-2-2H5c-1.105 0-2 .895-2 2z" }) }));
-            case 'gridicons-computer':
-                return (_jsx("g", { children: _jsx("path", { d: "M20 2H4c-1.104 0-2 .896-2 2v12c0 1.104.896 2 2 2h6v2H7v2h10v-2h-3v-2h6c1.104 0 2-.896 2-2V4c0-1.104-.896-2-2-2zm0 14H4V4h16v12z" }) }));
-            case 'gridicons-cross':
-                return (_jsx("g", { children: _jsx("path", { d: "M18.36 19.78L12 13.41l-6.36 6.37-1.42-1.42L10.59 12 4.22 5.64l1.42-1.42L12 10.59l6.36-6.36 1.41 1.41L13.41 12l6.36 6.36z" }) }));
-            case 'gridicons-domains':
-                return (_jsx("g", { children: _jsx("path", { d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm6.918 6h-3.215a49.088 49.088 0 00-.565-3.357A8.048 8.048 0 0118.918 8zm-5.904-3.928c.068.352.387 2.038.645 3.928h-3.318c.258-1.89.577-3.576.645-3.928C11.319 4.029 11.656 4 12 4s.681.029 1.014.072zM14 12c0 .598-.043 1.286-.109 2h-3.782c-.066-.714-.109-1.402-.109-2s.043-1.286.109-2h3.782c.066.714.109 1.402.109 2zM8.862 4.643A49.088 49.088 0 008.297 8H5.082a8.048 8.048 0 013.78-3.357zM4.263 10h3.821C8.033 10.668 8 11.344 8 12s.033 1.332.085 2H4.263C4.097 13.359 4 12.692 4 12s.098-1.359.263-2zm.819 6h3.215c.188 1.424.42 2.65.565 3.357A8.048 8.048 0 015.082 16zm5.904 3.928A77.282 77.282 0 0110.341 16h3.318a78.303 78.303 0 01-.645 3.928c-.333.043-.67.072-1.014.072s-.681-.029-1.014-.072zm4.152-.571c.145-.707.377-1.933.565-3.357h3.215a8.048 8.048 0 01-3.78 3.357zM19.737 14h-3.821c.051-.668.084-1.344.084-2s-.033-1.332-.085-2h3.821c.166.641.264 1.308.264 2s-.097 1.359-.263 2z" }) }));
-            case 'gridicons-filter':
-                return (_jsx("g", { children: _jsx("path", { d: "M10 19h4v-2h-4v2zm-4-6h12v-2H6v2zM3 5v2h18V5H3z" }) }));
-            case 'gridicons-folder':
-                return (_jsx("g", { children: _jsx("path", { d: "M18 19H6c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h3c1.1 0 2 .9 2 2h7c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2z" }) }));
-            case 'gridicons-help-outline':
-                return (_jsx("g", { children: _jsx("path", { d: "M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-1.962-2v-.528c0-.4.082-.74.246-1.017.163-.276.454-.546.87-.808.333-.21.572-.397.717-.565.146-.168.22-.36.22-.577 0-.172-.078-.308-.234-.41-.156-.1-.358-.15-.608-.15-.62 0-1.34.22-2.168.658l-.854-1.67c1.02-.58 2.084-.872 3.194-.872.913 0 1.63.202 2.15.603.52.4.78.948.78 1.64 0 .495-.116.924-.347 1.287-.23.362-.6.705-1.11 1.03-.43.278-.7.48-.807.61-.108.13-.163.282-.163.458V13h-1.885z" }) }));
-            case 'gridicons-image':
-                return (_jsx("g", { children: _jsx("path", { d: "M13 9.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5zM22 6v12c0 1.105-.895 2-2 2H4c-1.105 0-2-.895-2-2V6c0-1.105.895-2 2-2h16c1.105 0 2 .895 2 2zm-2 0H4v7.444L8 9l5.895 6.55 1.587-1.85c.798-.932 2.24-.932 3.037 0L20 15.426V6z" }) }));
-            case 'gridicons-image-multiple':
-                return (_jsx("g", { children: _jsx("path", { d: "M15 7.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5S17.328 9 16.5 9 15 8.328 15 7.5zM4 20h14c0 1.105-.895 2-2 2H4c-1.1 0-2-.9-2-2V8c0-1.105.895-2 2-2v14zM22 4v12c0 1.105-.895 2-2 2H8c-1.105 0-2-.895-2-2V4c0-1.105.895-2 2-2h12c1.105 0 2 .895 2 2zM8 4v6.333L11 7l4.855 5.395.656-.73c.796-.886 2.183-.886 2.977 0l.513.57V4H8z" }) }));
-            case 'gridicons-info':
-                return (_jsx("g", { children: _jsx("path", { d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
-            case 'gridicons-info-outline':
-                return (_jsx("g", { children: _jsx("path", { d: "M13 9h-2V7h2v2zm0 2h-2v6h2v-6zm-1-7c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z" }) }));
-            case 'gridicons-jetpack-search':
-                return (_jsx("g", { children: _jsx("path", { d: "M0 9.257C0 4.15 4.151 0 9.257 0c5.105 0 9.256 4.151 9.256 9.257a9.218 9.218 0 01-2.251 6.045l.034.033h1.053L24 22.01l-1.986 1.989-6.664-6.662v-1.055l-.033-.033a9.218 9.218 0 01-6.06 2.264C4.15 18.513 0 14.362 0 9.257zm4.169 1.537h4.61V1.82l-4.61 8.973zm5.547-3.092v8.974l4.61-8.974h-4.61z" }) }));
-            case 'gridicons-phone':
-                return (_jsx("g", { children: _jsx("path", { d: "M16 2H8c-1.104 0-2 .896-2 2v16c0 1.104.896 2 2 2h8c1.104 0 2-.896 2-2V4c0-1.104-.896-2-2-2zm-3 19h-2v-1h2v1zm3-2H8V5h8v14z" }) }));
-            case 'gridicons-pages':
-                return (_jsx("g", { children: _jsx("path", { d: "M16 8H8V6h8v2zm0 2H8v2h8v-2zm4-6v12l-6 6H6c-1.105 0-2-.895-2-2V4c0-1.105.895-2 2-2h12c1.105 0 2 .895 2 2zm-2 10V4H6v16h6v-4c0-1.105.895-2 2-2h4z" }) }));
-            case 'gridicons-posts':
-                return (_jsx("g", { children: _jsx("path", { d: "M16 19H3v-2h13v2zm5-10H3v2h18V9zM3 5v2h11V5H3zm14 0v2h4V5h-4zm-6 8v2h10v-2H11zm-8 0v2h5v-2H3z" }) }));
-            case 'gridicons-search':
-                return (_jsx("g", { children: _jsx("path", { d: "M21 19l-5.154-5.154C16.574 12.742 17 11.42 17 10c0-3.866-3.134-7-7-7s-7 3.134-7 7 3.134 7 7 7c1.42 0 2.742-.426 3.846-1.154L19 21l2-2zM5 10c0-2.757 2.243-5 5-5s5 2.243 5 5-2.243 5-5 5-5-2.243-5-5z" }) }));
-            case 'gridicons-star-outline':
-                return (_jsx("g", { children: _jsx("path", { d: "M12 6.308l1.176 3.167.347.936.997.042 3.374.14-2.647 2.09-.784.62.27.963.91 3.25-2.813-1.872-.83-.553-.83.552-2.814 1.87.91-3.248.27-.962-.783-.62-2.648-2.092 3.374-.14.996-.04.347-.936L12 6.308M12 2L9.418 8.953 2 9.257l5.822 4.602L5.82 21 12 16.89 18.18 21l-2.002-7.14L22 9.256l-7.418-.305L12 2z" }) }));
-            case 'gridicons-star':
-                return (_jsx("g", { children: _jsx("path", { d: "M12 2l2.582 6.953L22 9.257l-5.822 4.602L18.18 21 12 16.89 5.82 21l2.002-7.14L2 9.256l7.418-.304" }) }));
-            case 'gridicons-tag':
-                return (_jsx("g", { children: _jsx("path", { d: "M20 2.007h-7.087c-.53 0-1.04.21-1.414.586L2.592 11.5c-.78.78-.78 2.046 0 2.827l7.086 7.086c.78.78 2.046.78 2.827 0l8.906-8.906c.376-.374.587-.883.587-1.413V4.007c0-1.105-.895-2-2-2zM17.007 9c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z" }) }));
-            case 'gridicons-video':
-                return (_jsx("g", { children: _jsx("path", { d: "M20 4v2h-2V4H6v2H4V4c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2v-2h2v2h12v-2h2v2c1.105 0 2-.895 2-2V6c0-1.105-.895-2-2-2zM6 16H4v-3h2v3zm0-5H4V8h2v3zm4 4V9l4.5 3-4.5 3zm10 1h-2v-3h2v3zm0-5h-2V8h2v3z" }) }));
-            case 'gridicons-lock':
-                return (_jsxs(_Fragment, { children: [
-                        _jsx("g", { id: "lock", children: _jsx("path", { d: "M18,8h-1V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H6c-1.105,0-2,0.895-2,2v10c0,1.105,0.895,2,2,2h12c1.105,0,2-0.895,2-2V10\n\t\t\t\t\t\t\t\t\tC20,8.895,19.105,8,18,8z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M13,15.723V18h-2v-2.277c-0.595-0.346-1-0.984-1-1.723\n\t\t\t\t\t\t\t\t\tc0-1.105,0.895-2,2-2s2,0.895,2,2C14,14.738,13.595,15.376,13,15.723z" }) }), _jsx("g", { id: "Layer_1" })
-                    ] }));
-            case 'gridicons-external':
-                return (_jsx("g", { children: _jsx("path", { d: "M19 13v6c0 1.105-.895 2-2 2H5c-1.105 0-2-.895-2-2V7c0-1.105.895-2 2-2h6v2H5v12h12v-6h2zM13 3v2h4.586l-7.793 7.793 1.414 1.414L19 6.414V11h2V3h-8z" }) }));
-        }
-    }
-    render() {
-        const { size = 24, className = '' } = this.props;
-        const height = this.props.height || size;
-        const width = this.props.width || size;
-        const style = this.props.style || { height, width };
-        const icon = 'gridicons-' + this.props.icon;
-        const iconClass = clsx('gridicon', icon, className, {
-            'needs-offset': this.needsOffset(icon, size),
-        });
-        const description = this.getSVGDescription(icon);
-        return (_jsxs("svg", { className: iconClass, focusable: this.props.focusable, height: height, onClick: this.props.onClick, style: style, viewBox: "0 0 24 24", width: width, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.props['aria-hidden'], children: [description ? _jsx("desc", { children: description }) : null, this.renderIcon(icon)] }));
-    }
-}
-export default Gridicon;

package/build/components/gridicon/style.scss

@@ -1,16 +0,0 @@
-.gridicon {
-	fill: currentColor;
-	display: inline-block;
-
-	&.needs-offset g {
-		transform: translate(1px, 1px); /* translates to .5px because it's in a child element */
-	}
-
-	&.needs-offset-x g {
-		transform: translate(1px, 0); /* only nudges horizontally */
-	}
-
-	&.needs-offset-y g {
-		transform: translate(0, 1px); /* only nudges vertically */
-	}
-}