newspack-components 4.7.0 → 4.8.0

package/dist/esm/with-wizard-screen/style.scss

@@ -3,18 +3,18 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 .newspack-wizard {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-600};
-	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
-	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
-	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
+	--wp-admin-theme-color: #{np-colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{np-colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{np-colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{np-colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{np-colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{np-colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{np-colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{np-colors.$primary-000--rgb};
 
 	color: wp-colors.$gray-900;
 

package/dist/esm/wizard/index.js

@@ -11,16 +11,18 @@ import classnames from 'classnames';
  * WordPress dependencies.
  */
 // Notice is aliased: `Notice` below is Newspack's own, which this file also uses.
-import { DropdownMenu, MenuGroup, MenuItem, Notice as CoreNotice, SlotFillProvider, createSlotFill } from '@wordpress/components';
+import { DropdownMenu, MenuGroup, MenuItem, Notice as CoreNotice, SlotFillProvider, createSlotFill,
+// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+__experimentalVStack as VStack } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, createInterpolateElement, isValidElement, useRef, useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, createInterpolateElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Footer, Notice, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page } from '../';
+import { Footer, Notice, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page, Waiting } from '../';
 import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
@@ -204,6 +206,7 @@ var Wizard = function Wizard(_ref2, ref) {
     sectionDescription = headerData.sectionDescription,
     sectionMenu = headerData.sectionMenu,
     sectionName = headerData.sectionName,
+    sectionSize = headerData.sectionSize,
     sectionTitle = headerData.sectionTitle,
     sectionPrimaryAction = headerData.sectionPrimaryAction,
     sectionSecondaryAction = headerData.sectionSecondaryAction;
@@ -226,6 +229,14 @@ var Wizard = function Wizard(_ref2, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     pluginRequirementsSatisfied = _useState2[0],
     setPluginRequirementsSatisfied = _useState2[1];
+  // Whether the requirements check has reported back. Until it has, the check
+  // shows the same fetching treatment as the rest of the wizard rather than
+  // the installer's own spinner and the swapped header; the installer only
+  // surfaces once a plugin is actually found missing.
+  var _useState3 = useState(requiredPlugins.length === 0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pluginRequirementsKnown = _useState4[0],
+    setPluginRequirementsKnown = _useState4[1];
 
   // The data fetch above runs once per mount, while the required plugins are
   // still missing — endpoints that need them answer empty or error outright,
@@ -240,6 +251,7 @@ var Wizard = function Wizard(_ref2, ref) {
     // Leave the installer first: whatever happens to the refetch, the user
     // should not be stranded on a required-plugins screen for a plugin they
     // just installed.
+    setPluginRequirementsKnown(true);
     setPluginRequirementsSatisfied(complete);
     if (!complete) {
       requirementsWereUnmet.current = true;
@@ -251,13 +263,31 @@ var Wizard = function Wizard(_ref2, ref) {
     }
   };
   if (!pluginRequirementsSatisfied) {
-    headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin');
+    if (pluginRequirementsKnown) {
+      headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin');
+    }
     displayedSections = [{
       path: '/',
       render: function render() {
-        return /*#__PURE__*/_jsx(PluginInstaller, {
-          plugins: requiredPlugins,
-          onStatus: onPluginStatus
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [!pluginRequirementsKnown && /*#__PURE__*/_jsx("div", {
+            className: "newspack-wizard__loader",
+            children: /*#__PURE__*/_jsxs(VStack, {
+              alignment: "center",
+              spacing: 2,
+              children: [/*#__PURE__*/_jsx(Waiting, {
+                noMargin: true
+              }), /*#__PURE__*/_jsx("strong", {
+                children: __('Fetching…', 'newspack-plugin')
+              })]
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            hidden: !pluginRequirementsKnown,
+            children: /*#__PURE__*/_jsx(PluginInstaller, {
+              plugins: requiredPlugins,
+              onStatus: onPluginStatus
+            })
+          })]
         });
       }
     }];
@@ -321,6 +351,7 @@ var Wizard = function Wizard(_ref2, ref) {
                   primaryAction: sectionPrimaryAction || section.primaryAction,
                   secondaryAction: sectionSecondaryAction || section.secondaryAction,
                   heading: 2,
+                  size: sectionSize || section.size,
                   noMargin: true
                 }), /*#__PURE__*/_jsx(SectionComponent, _objectSpread(_objectSpread(_objectSpread({}, routerProps), sectionProps), sharedProps))]
               });

package/dist/esm/wizard/store/index.js

@@ -257,6 +257,28 @@ var store = createReduxStore(WIZARD_STORE_NAMESPACE, {
     })
   }
 });
+
+/**
+ * Register the wizard store, unless it already exists.
+ *
+ * This package is bundled separately into each consuming plugin, so more than one
+ * bundle can call this on the same page (e.g. the block editor loads assets from
+ * both newspack-blocks and newspack-manager). @wordpress/data keeps a single
+ * registry on `wp.data`, so the second call is a no-op that logs
+ * `Store "newspack/wizards" is already registered.` — guard it instead.
+ *
+ * The first bundle to register wins, and it is not necessarily the newest one:
+ * consumers rebuild on their own schedules, so an older copy of this package can
+ * get there first and leave newer selectors missing. That is worth knowing about
+ * while developing, so keep the breadcrumb outside production builds.
+ */
 export default (function () {
-  return register(store);
+  if (select(WIZARD_STORE_NAMESPACE)) {
+    if ('production' !== process.env.NODE_ENV) {
+      // eslint-disable-next-line no-console
+      console.warn("Wizard store: \"".concat(WIZARD_STORE_NAMESPACE, "\" is already registered, so this copy of newspack-components was ignored. Two bundles of the package are on this page and the first one to load wins."));
+    }
+    return;
+  }
+  register(store);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

package/src/_mixins.scss

@@ -0,0 +1,13 @@
+@use "../../colors/colors.module" as colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+@mixin text-muted {
+	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
+	color: var( --wpds-color-foreground-content-neutral-weak, #{wp-colors.$gray-700} );
+}
+
+@mixin wpds-focus-ring {
+	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
+	outline: var( --wpds-border-width-focus, var( --wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) ) solid var( --wpds-color-stroke-focus, var( --wp-admin-theme-color, #{colors.$primary-600} ) );
+}

package/src/_variables.scss

@@ -0,0 +1,12 @@
+/**
+ * SCSS Variables.
+ *
+ * The steps this package needs above the @wordpress/base-styles scale. Please
+ * reach for a base-styles variable first, and only add here when there is no
+ * counterpart and you're pretty sure the value will be reused in many places.
+ * It's purely for UI. Don't add component-specific values, which belong in that
+ * component's own stylesheet.
+ */
+
+$font-size-3x-large: 48px;
+$font-line-height-3x-large: 1.125;

package/src/action-card/action-card.d.ts

@@ -1,3 +1,5 @@
+import type { CardBadge } from '../types';
+
 export interface ActionCardProps {
 	id?: string | number;
 	title?: string | React.ReactNode;
@@ -5,8 +7,7 @@ export interface ActionCardProps {
 	href?: string;
 	description?: string | React.ReactNode;
 	actionText?: React.ReactNode | string | null;
-	badge?: string;
-	badgeLevel?: 'success' | 'info' | 'warning' | 'error';
+	badges?: CardBadge[];
 	className?: string;
 	indent?: string;
 	notification?: string | Error | null;

package/src/action-card/index.js

@@ -9,6 +9,7 @@ import { Draggable, ExternalLink, ToggleControl } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, check, chevronDown, chevronUp, dragHandle } from '@wordpress/icons';
+import { Badge } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -28,8 +29,7 @@ import classnames from 'classnames';
  * @return {JSX.Element} ActionCard component.
  */
 const ActionCard = ( {
-	badge,
-	badgeLevel,
+	badges,
 	className,
 	checkbox,
 	children,
@@ -78,6 +78,11 @@ const ActionCard = ( {
 	dragWrapperRef,
 	onDragCallback,
 } ) => {
+	// A badge with no label paints an empty pill, since the library Badge styles its
+	// wrapper rather than its text. Callers derive labels from data that can be absent
+	// (a gateway with no connection status, an unmapped placement), so drop those here
+	// rather than asking every caller to guard its own array.
+	const visibleBadges = ( badges || [] ).filter( badge => badge?.label );
 	const [ expanded, setExpanded ] = useState( Boolean( isExpanded ) );
 	const [ dragging, setDragging ] = useState( false );
 	const [ targetIndex, setTargetIndex ] = useState( null );
@@ -124,7 +129,6 @@ const ActionCard = ( {
 	const togglePositionClass = togglePosition === 'trailing' ? 'is-toggle-trailing' : 'is-toggle-leading';
 	const hasInternalLink = href && href.indexOf( 'http' ) !== 0;
 	const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
-	const badges = ! Array.isArray( badge ) && badge ? [ badge ] : badge;
 	const HeadingTag = `h${ heading }`;
 
 	const cardContent = (
@@ -166,15 +170,11 @@ const ActionCard = ( {
 								) }
 								{ ! titleLink && ! expandable && title }
 							</span>
-							{ badges?.length &&
-								badges.map( ( badgeText, i ) => (
-									<span
-										key={ `badge-${ i }` }
-										className={ `newspack-action-card__badge newspack-action-card__badge-level-${ badgeLevel }` }
-									>
-										{ badgeText }
-									</span>
-								) ) }
+							{ visibleBadges.map( ( { label, intent }, i ) => (
+								<Badge key={ `badge-${ i }` } intent={ intent ?? 'none' }>
+									{ label }
+								</Badge>
+							) ) }
 						</HeadingTag>
 						{ description && (
 							<p>

package/src/action-card/index.test.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import ActionCard from './index';
+
+/**
+ * The library Badge styles its wrapper rather than its text, so a badge with no label
+ * paints a bare coloured pill. Callers build the `badges` array from data that can be
+ * absent — a payment gateway reports no connection status until it is enabled, a prompt
+ * can sit on a placement with no entry in the placement map — and an array literal is
+ * always non-empty, so the component has to drop those itself.
+ */
+describe( 'ActionCard badges', () => {
+	const badgeText = () => screen.queryAllByText( ( _, node ) => /__badge/.test( node?.className || '' ) );
+
+	it( 'renders a badge that has a label', () => {
+		render( <ActionCard title="Stripe" badges={ [ { label: 'Connected', intent: 'stable' } ] } /> );
+
+		expect( screen.getByText( 'Connected' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders no badge when the label is null', () => {
+		const { container } = render( <ActionCard title="Stripe" badges={ [ { label: null, intent: 'informational' } ] } /> );
+
+		expect( container.querySelectorAll( '[class*="__badge"]' ) ).toHaveLength( 0 );
+	} );
+
+	it( 'renders no badge when the label is undefined or empty', () => {
+		const { container } = render( <ActionCard title="Stripe" badges={ [ { label: undefined }, { label: '' } ] } /> );
+
+		expect( container.querySelectorAll( '[class*="__badge"]' ) ).toHaveLength( 0 );
+	} );
+
+	it( 'keeps the labelled badges and drops only the empty ones', () => {
+		render( <ActionCard title="Plans" badges={ [ { label: 'Premium' }, { label: null }, { label: 'Archived', intent: 'draft' } ] } /> );
+
+		expect( screen.getByText( 'Premium' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Archived' ) ).toBeInTheDocument();
+		expect( badgeText() ).toHaveLength( 2 );
+	} );
+
+	it( 'renders nothing for an absent or empty badges prop', () => {
+		const { container: withoutProp } = render( <ActionCard title="Stripe" /> );
+		expect( withoutProp.querySelectorAll( '[class*="__badge"]' ) ).toHaveLength( 0 );
+
+		const { container: withEmptyArray } = render( <ActionCard title="Stripe" badges={ [] } /> );
+		expect( withEmptyArray.querySelectorAll( '[class*="__badge"]' ) ).toHaveLength( 0 );
+		// An empty array used to fall through as a literal `0` in the heading.
+		expect( withEmptyArray.textContent ).not.toContain( '0' );
+	} );
+} );

package/src/action-card/style.scss

@@ -4,6 +4,7 @@
 
 @use "sass:color";
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-card.newspack-action-card {
 	padding: 0;
@@ -196,11 +197,7 @@
 		align-items: center;
 		display: flex;
 		flex-wrap: wrap;
-		margin-right: -8px;
-
-		.newspack-action-card__title {
-			margin-right: 8px;
-		}
+		gap: wp-vars.$grid-unit-10;
 
 		a {
 			color: inherit;
@@ -372,41 +369,6 @@
 		margin: 0;
 	}
 
-	/* Badge */
-	.newspack-action-card__badge {
-		background: wp-colors.$gray-100;
-		border-radius: 2px;
-		color: wp-colors.$gray-900;
-		display: block;
-		flex: 0 0 auto;
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 1.333;
-		margin: 0 8px 0 0;
-		padding: 2px 4px;
-
-		&.newspack-action-card__badge-level-warning {
-			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-yellow);
-			color: color-mix(in srgb, #000 50%, wp-colors.$alert-yellow);
-		}
-		&.newspack-action-card__badge-level-error {
-			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-red);
-			color: color-mix(in srgb, #000 50%, wp-colors.$alert-red);
-		}
-		&.newspack-action-card__badge-level-success {
-			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-green);
-			color: color-mix(in srgb, #000 50%, wp-colors.$alert-green);
-		}
-		&.newspack-action-card__badge-level-brand {
-			background-color: color-mix(in srgb, #fff 90%, var(--wp-admin-theme-color));
-			color: color-mix(in srgb, #000 50%, var(--wp-admin-theme-color));
-		}
-
-		+ .newspack-action-card__badge {
-			margin-left: -4px;
-		}
-	}
-
 	/* Description Card */
 	&.newspack-description-card {
 		font-style: italic;

package/src/button/index.test.js

@@ -4,6 +4,11 @@
 import { act, render, screen } from '@testing-library/react';
 import { MemoryRouter, useHistory } from 'react-router-dom';
 
+/**
+ * WordPress dependencies.
+ */
+import { createRef } from '@wordpress/element';
+
 /**
  * Internal dependencies.
  */
@@ -20,6 +25,16 @@ const clickButton = async () => {
 	} );
 };
 
+// React formats its warnings with `%s` placeholders and passes the values as
+// further arguments, so assert against the whole call rather than one argument.
+const messagesFrom = spy => spy.mock.calls.flat().join( ' ' );
+
+// A failing assertion skips any `mockRestore()` left after it, which would leave
+// the console swallowed for every later test in the file.
+afterEach( () => {
+	jest.restoreAllMocks();
+} );
+
 describe( 'Button href with onClick', () => {
 	it( 'awaits the onClick, then pushes the route', async () => {
 		const historyRef = { current: null };
@@ -113,7 +128,6 @@ describe( 'Button href with onClick outside a router', () => {
 			expect( window.location.href ).toBe( '' );
 		} );
 		expect( warn ).toHaveBeenCalledWith( expect.stringContaining( 'javascript:' ) );
-		warn.mockRestore();
 	} );
 } );
 
@@ -121,19 +135,18 @@ describe( 'Button with a javascript: href alone', () => {
 	const link = () => screen.getByText( 'Save' ).closest( 'a' );
 
 	it( 'renders no link', () => {
-		const warn = jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+		// Silenced only; the assertion below is about the markup, not the warning.
+		jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
 		render( <Button href="JavaScript:alert(1)">Save</Button> );
 
 		expect( link() ).toBeNull();
-		warn.mockRestore();
 	} );
 
 	it( 'sees through interleaved control characters', () => {
-		const warn = jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+		jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
 		render( <Button href={ 'java\nscript:alert(1)' }>Save</Button> );
 
 		expect( link() ).toBeNull();
-		warn.mockRestore();
 	} );
 
 	it( 'leaves an ordinary href alone', () => {
@@ -141,3 +154,37 @@ describe( 'Button with a javascript: href alone', () => {
 		expect( link() ).toHaveAttribute( 'href', '/wp-admin/admin.php?page=next' );
 	} );
 } );
+
+describe( 'Button loading prop', () => {
+	const button = () => screen.getByRole( 'button', { name: 'Save' } );
+
+	it( 'renders the core busy state without putting `loading` on the DOM node', () => {
+		const error = jest.spyOn( console, 'error' ).mockImplementation( () => {} );
+		const { rerender } = render( <Button>Save</Button> );
+
+		expect( button() ).not.toHaveClass( 'is-busy' );
+
+		rerender( <Button loading>Save</Button> );
+
+		expect( button() ).toHaveClass( 'is-busy' );
+		// React drops an unknown boolean-valued attribute instead of writing it, so
+		// the warning rather than the absent attribute is what a revert trips. It is
+		// also deduped per property name for the life of the module registry, which
+		// is why this names the message instead of asserting no errors at all.
+		expect( messagesFrom( error ) ).not.toContain( 'non-boolean attribute' );
+	} );
+} );
+
+// core's Button wraps itself in a Tooltip when it is given a `label`, and the
+// Tooltip needs a ref on its child. Two call sites do that with this Button:
+// the experimental-tools back button and the audience segment-group heading.
+describe( 'Button ref', () => {
+	it( 'forwards the ref to the rendered button', () => {
+		const error = jest.spyOn( console, 'error' ).mockImplementation( () => {} );
+		const ref = createRef();
+		render( <Button ref={ ref }>Save</Button> );
+
+		expect( ref.current ).toBe( screen.getByRole( 'button', { name: 'Save' } ) );
+		expect( messagesFrom( error ) ).not.toContain( 'Function components cannot be given refs' );
+	} );
+} );

package/src/button/index.tsx

@@ -6,7 +6,7 @@
  * WordPress dependencies.
  */
 import { Button as BaseComponent } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { forwardRef, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -32,7 +32,7 @@ const isJavascriptHref = ( href?: string ) =>
 		.toLowerCase()
 		.startsWith( 'javascript:' );
 
-const Button = ( { href, loading = undefined, onClick, ...otherProps }: Props ) => {
+const Button = forwardRef< HTMLElement, Props >( ( { href, loading = undefined, onClick, ...otherProps }: Props, ref ) => {
 	const history = useHistory();
 	const [ isAwaitingOnClick, setIsAwaitingOnClick ] = useState( false );
 
@@ -67,8 +67,13 @@ const Button = ( { href, loading = undefined, onClick, ...otherProps }: Props )
 	if ( isAwaitingOnClick ) {
 		otherProps.disabled = true;
 	}
+	// `loading` is this component's own prop name; @wordpress/components' Button
+	// expresses the same state as `isBusy`. Forwarding `loading` verbatim would
+	// land it on the DOM node, which React rejects as a non-boolean attribute.
 	// @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
-	return <BaseComponent loading={ loading ? true : undefined } { ...otherProps } />;
-};
+	return <BaseComponent ref={ ref } isBusy={ loading ? true : undefined } { ...otherProps } />;
+} );
+
+Button.displayName = 'Button';
 
 export default Button;

package/src/card/core-card.js

@@ -152,7 +152,6 @@ const CoreCard = ( {
 						<ToggleControl
 							className="newspack-card--core__action"
 							label={ otherProps.title }
-							hideLabelFromVision
 							checked={ isActive }
 							onChange={ onToggle }
 						/>
@@ -165,7 +164,6 @@ const CoreCard = ( {
 						<ToggleControl
 							className="newspack-card--core__action"
 							label={ otherProps.title }
-							hideLabelFromVision
 							checked={ isActive }
 							onChange={ onToggle }
 						/>

package/src/card/style-core.scss

@@ -4,7 +4,6 @@
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/variables" as wp-vars;
-@use "../../../colors/colors.module" as colors;
 
 .newspack-card--core,
 .newspack-wizard .newspack-card--core {
@@ -45,7 +44,13 @@
 		}
 		.newspack-card--core {
 			&__header-content {
-				* {
+				h1,
+				h2,
+				h3,
+				h4,
+				h5,
+				h6,
+				p {
 					line-height: wp-vars.$font-line-height-small;
 				}
 			}
@@ -210,9 +215,6 @@
 					text-decoration: underline;
 				}
 			}
-			.newspack-badge {
-				font-weight: 400;
-			}
 		}
 	}
 	&__is-selectable {