Badge: Update references to point to new package component (#78812)

* Fix typescript errors with badge type

* Update BadgeProps to break out BadgeType props list

* Move Badge component to @automattic/components

* Update references to point to new package component

* Ignore eslint warnings or the purposes of this PR

* update playground scope

* Fix ref

* Remove unused badge files (#78814)

* Remove isREquired since we're setting a default.

* Update TSX rather than JSX

* Don't delete anything yet.

* Restore deleted files for now

* Fix type errors

* Update branch with BadgeType rather than all BadgeProps

* Remove deleted files

* One more :)

* Remove dupe reference

* Remove duplicate in devdocs playground

client/blocks/eligibility-warnings/warning-list.tsx

@@ -1,8 +1,7 @@
-import { Card } from '@automattic/components';
+import { Card, Badge } from '@automattic/components';
 import { localize, LocalizeProps, translate } from 'i18n-calypso';
 import { Fragment } from 'react';
 import ActionPanelLink from 'calypso/components/action-panel/link';
-import Badge from 'calypso/components/badge';
 import ExternalLink from 'calypso/components/external-link';
 import type { DomainNames, EligibilityWarning } from 'calypso/state/automated-transfer/selectors';
 

client/blocks/importer/components/domain-info/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable wpcalypso/jsx-classname-namespace */
 
+import { Badge } from '@automattic/components';
 import { __ } from '@wordpress/i18n';
-import Badge from 'calypso/components/badge';
 import './style.scss';
 
 interface Props {

client/components/advanced-credentials/host-selection/index.tsx

@@ -1,9 +1,8 @@
-import { Gridicon } from '@automattic/components';
+import { Gridicon, Badge } from '@automattic/components';
 import { useMobileBreakpoint } from '@automattic/viewport-react';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslate } from 'i18n-calypso';
 import { FunctionComponent, useMemo } from 'react';
-import Badge from 'calypso/components/badge';
 import { settingsPath } from 'calypso/lib/jetpack/paths';
 import wpcom from 'calypso/lib/wp';
 import { useDispatch, useSelector } from 'calypso/state';

client/components/domains/connect-domain-step/index.jsx

@@ -1,12 +1,11 @@
-import { Gridicon } from '@automattic/components';
+import { Badge, Gridicon } from '@automattic/components';
 import { BackButton } from '@automattic/onboarding';
 import { sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import page from 'page';
 import PropTypes from 'prop-types';
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { connect, useDispatch } from 'react-redux';
-import Badge from 'calypso/components/badge';
 import ConnectDomainStepSupportInfoLink from 'calypso/components/domains/connect-domain-step/connect-domain-step-support-info-link';
 import DomainTransferRecommendation from 'calypso/components/domains/domain-transfer-recommendation';
 import TwoColumnsLayout from 'calypso/components/domains/layout/two-columns-layout';

client/components/domains/domain-registration-suggestion/index.jsx

@@ -1,4 +1,4 @@
-import { Gridicon } from '@automattic/components';
+import { Badge, Gridicon } from '@automattic/components';
 import formatCurrency from '@automattic/format-currency';
 import { localizeUrl } from '@automattic/i18n-utils';
 import classNames from 'classnames';
@@ -7,7 +7,6 @@ import { get, includes } from 'lodash';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
 import { connect } from 'react-redux';
-import Badge from 'calypso/components/badge';
 import {
 	parseMatchReasons,
 	VALID_MATCH_REASONS,

client/components/domains/domain-registration-suggestion/premium-badge/index.jsx

@@ -1,7 +1,7 @@
+import { Badge } from '@automattic/components';
 import classNames from 'classnames';
 import { localize } from 'i18n-calypso';
 import { Component } from 'react';
-import Badge from 'calypso/components/badge';
 import InfoPopover from 'calypso/components/info-popover';
 
 import './style.scss';

client/components/domains/domain-transfer-recommendation/index.jsx

@@ -1,7 +1,6 @@
-import { Button, Card } from '@automattic/components';
+import { Badge, Button, Card } from '@automattic/components';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { __ } from '@wordpress/i18n';
-import Badge from 'calypso/components/badge';
 import CardHeading from 'calypso/components/card-heading';
 import { INCOMING_DOMAIN_TRANSFER } from 'calypso/lib/url/support';
 

client/components/domains/use-my-domain/transfer-or-connect/option-content.jsx

@@ -1,9 +1,8 @@
-import { Button, Gridicon } from '@automattic/components';
+import { Badge, Button, Gridicon } from '@automattic/components';
 import { useLocalizeUrl } from '@automattic/i18n-utils';
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import Badge from 'calypso/components/badge';
 
 import '../style.scss';
 

client/components/gsuite/gsuite-price/index.jsx

@@ -1,7 +1,7 @@
+import { Badge } from '@automattic/components';
 import classNames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import Badge from 'calypso/components/badge';
 import { getAnnualPrice, getMonthlyPrice } from 'calypso/lib/gsuite';
 
 import './style.scss';

client/components/jetpack/backup-badge/index.jsx

@@ -1,7 +1,6 @@
-import { ScreenReaderText } from '@automattic/components';
+import { Badge, ScreenReaderText } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
 import moment from 'moment';
-import Badge from 'calypso/components/badge';
 import { getBackupWarnings } from 'calypso/lib/jetpack/backup-utils';
 import { useLatestBackupAttempt } from 'calypso/my-sites/backup/status/hooks';
 

client/components/jetpack/backup-card/index.tsx

@@ -1,11 +1,10 @@
-import { Button, Card } from '@automattic/components';
+import { Badge, Button, Card } from '@automattic/components';
 import classNames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
 import { useRef, FunctionComponent, useState, useCallback } from 'react';
 import ActivityActor, { SIZE_S } from 'calypso/components/activity-card/activity-actor';
 import ActivityDescription from 'calypso/components/activity-card/activity-description';
 import ActivityMedia from 'calypso/components/activity-card/activity-media';
-import Badge from 'calypso/components/badge';
 import cloudIcon from 'calypso/components/jetpack/daily-backup-status/status-card/icons/cloud-success.svg';
 import useGetDisplayDate from 'calypso/components/jetpack/daily-backup-status/use-get-display-date';
 import { useLocalizedMoment } from 'calypso/components/localized-moment';

client/components/jetpack/scan-badge/index.tsx

@@ -1,7 +1,6 @@
-import { ScreenReaderText } from '@automattic/components';
+import { Badge, ScreenReaderText } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
 import { FunctionComponent } from 'react';
-import Badge from 'calypso/components/badge';
 import './style.scss';
 
 interface Props {

client/components/jetpack/threat-item-subheader/index.tsx

@@ -1,8 +1,8 @@
+import { Badge } from '@automattic/components';
 import classnames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
 import moment from 'moment';
 import * as React from 'react';
-import Badge from 'calypso/components/badge';
 import { Threat } from 'calypso/components/jetpack/threat-item/types';
 import {
 	getThreatPayloadSubtitle,

client/components/promo-section/promo-card/index.tsx

@@ -1,12 +1,11 @@
-import { Gridicon } from '@automattic/components';
+import { Badge, Gridicon } from '@automattic/components';
 import classNames from 'classnames';
 import { TranslateResult } from 'i18n-calypso';
 import { Children, cloneElement, FunctionComponent, isValidElement } from 'react';
 import ActionPanel from 'calypso/components/action-panel';
 import ActionPanelBody from 'calypso/components/action-panel/body';
 import ActionPanelFigure from 'calypso/components/action-panel/figure';
 import ActionPanelTitle from 'calypso/components/action-panel/title';
-import Badge from 'calypso/components/badge';
 import PromoCardCta from './cta';
 import type { ReactElement } from 'react';
 

client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/contact-list/item.tsx

@@ -1,8 +1,7 @@
-import { Card, Button } from '@automattic/components';
+import { Badge, Card, Button } from '@automattic/components';
 import { Icon, moreHorizontal } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { useState, useRef, useContext, useCallback } from 'react';
-import Badge from 'calypso/components/badge';
 import PopoverMenu from 'calypso/components/popover-menu';
 import PopoverMenuItem from 'calypso/components/popover-menu/item';
 import DashboardDataContext from '../../sites-overview/dashboard-data-context';

client/jetpack-cloud/sections/partner-portal/invoices-list-card/index.tsx

@@ -1,8 +1,7 @@
-import { Button, Gridicon } from '@automattic/components';
+import { Badge, Button, Gridicon } from '@automattic/components';
 import formatCurrency from '@automattic/format-currency';
 import { useTranslate } from 'i18n-calypso';
 import { memo, useCallback } from 'react';
-import Badge from 'calypso/components/badge';
 import FormattedDate from 'calypso/components/formatted-date';
 import { useLocalizedMoment } from 'calypso/components/localized-moment';
 import InvoicesListRow from 'calypso/jetpack-cloud/sections/partner-portal/invoices-list-row';

client/jetpack-cloud/sections/partner-portal/license-preview/index.tsx

@@ -1,11 +1,10 @@
 import { getUrlParts } from '@automattic/calypso-url';
-import { Button, Gridicon } from '@automattic/components';
+import { Badge, Button, Gridicon } from '@automattic/components';
 import { getQueryArg, removeQueryArgs } from '@wordpress/url';
 import classnames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
 import page from 'page';
 import { useCallback, useEffect, useState } from 'react';
-import Badge from 'calypso/components/badge';
 import FormattedDate from 'calypso/components/formatted-date';
 import LicenseDetails from 'calypso/jetpack-cloud/sections/partner-portal/license-details';
 import LicenseListItem from 'calypso/jetpack-cloud/sections/partner-portal/license-list-item';

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/sidebar.tsx

@@ -1,13 +1,12 @@
 import { PLAN_PERSONAL, PLAN_PREMIUM } from '@automattic/calypso-products';
-import { Gridicon, CircularProgressBar } from '@automattic/components';
+import { Badge, Gridicon, CircularProgressBar } from '@automattic/components';
 import { OnboardSelect, useLaunchpad } from '@automattic/data-stores';
 import { Launchpad } from '@automattic/launchpad';
 import { isBlogOnboardingFlow } from '@automattic/onboarding';
 import { useSelect } from '@wordpress/data';
 import { useRef, useState } from '@wordpress/element';
 import { Icon, copy } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
-import Badge from 'calypso/components/badge';
 import ClipboardButton from 'calypso/components/forms/clipboard-button';
 import Tooltip from 'calypso/components/tooltip';
 import { NavigationControls } from 'calypso/landing/stepper/declarative-flow/internals/types';

client/layout/sidebar/item.jsx

@@ -1,9 +1,8 @@
-import { Gridicon } from '@automattic/components';
+import { Badge, Gridicon } from '@automattic/components';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import Badge from 'calypso/components/badge';
 import Count from 'calypso/components/count';
 import MaterialIcon from 'calypso/components/material-icon';
 import TranslatableString from 'calypso/components/translatable/proptype';

client/me/purchases/manage-purchase/index.tsx

@@ -37,7 +37,15 @@ import {
 	AKISMET_UPGRADES_PRODUCTS_MAP,
 	JETPACK_STARTER_UPGRADE_MAP,
 } from '@automattic/calypso-products';
-import { Spinner, Button, Card, CompactCard, ProductIcon, Gridicon } from '@automattic/components';
+import {
+	Badge,
+	Spinner,
+	Button,
+	Card,
+	CompactCard,
+	ProductIcon,
+	Gridicon,
+} from '@automattic/components';
 import classNames from 'classnames';
 import { localize, LocalizeProps } from 'i18n-calypso';
 import page from 'page';
@@ -46,7 +54,6 @@ import { connect } from 'react-redux';
 import { SupportedSlugs } from 'calypso/../packages/components/src/product-icon/config';
 import googleWorkspaceIcon from 'calypso/assets/images/email-providers/google-workspace/icon.svg';
 import AsyncLoad from 'calypso/components/async-load';
-import Badge from 'calypso/components/badge';
 import QueryCanonicalTheme from 'calypso/components/data/query-canonical-theme';
 import QuerySiteDomains from 'calypso/components/data/query-site-domains';
 import QuerySitePurchases from 'calypso/components/data/query-site-purchases';

client/my-sites/add-ons/components/add-ons-card.tsx

@@ -1,10 +1,9 @@
 import { PRODUCT_1GB_SPACE } from '@automattic/calypso-products';
-import { Button, Gridicon, Spinner } from '@automattic/components';
+import { Badge, Button, Gridicon, Spinner } from '@automattic/components';
 import styled from '@emotion/styled';
 import { Card, CardBody, CardFooter, CardHeader } from '@wordpress/components';
 import { Icon } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
-import Badge from 'calypso/components/badge';
 import type { AddOnMeta } from '../hooks/use-add-ons';
 
 export interface Props {

client/my-sites/checkout/upsell-nudge/professional-email-upsell/index.tsx

@@ -1,13 +1,12 @@
 import { TITAN_MAIL_MONTHLY_SLUG, TITAN_MAIL_YEARLY_SLUG } from '@automattic/calypso-products';
-import { Gridicon } from '@automattic/components';
+import { Badge, Gridicon } from '@automattic/components';
 import formatCurrency from '@automattic/format-currency';
 import { MOBILE_BREAKPOINT } from '@automattic/viewport';
 import { useBreakpoint } from '@automattic/viewport-react';
 import classNames from 'classnames';
 import i18n, { useTranslate } from 'i18n-calypso';
 import { useState } from 'react';
 import poweredByTitanLogo from 'calypso/assets/images/email-providers/titan/powered-by-titan-caps.svg';
-import Badge from 'calypso/components/badge';
 import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import { titanMailMonthly, titanMailYearly } from 'calypso/lib/cart-values/cart-items';
 import { BillingIntervalToggle } from 'calypso/my-sites/email/email-providers-comparison/billing-interval-toggle';

client/my-sites/customer-home/cards/tasks/site-setup-list/current-task-item.jsx

@@ -1,7 +1,6 @@
-import { Button, Gridicon } from '@automattic/components';
+import { Badge, Button, Gridicon } from '@automattic/components';
 import classnames from 'classnames';
 import { translate } from 'i18n-calypso';
-import Badge from 'calypso/components/badge';
 
 const CurrentTaskItem = ( { currentTask, skipTask, startTask, useAccordionLayout } ) => {
 	return (

client/my-sites/customer-home/cards/tasks/task.tsx

@@ -1,11 +1,10 @@
-import { Button, Gridicon, Spinner } from '@automattic/components';
+import { Badge, Button, Gridicon, Spinner } from '@automattic/components';
 import { isDesktop } from '@automattic/viewport';
 import { useInstanceId } from '@wordpress/compose';
 import classnames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
 import { useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
-import Badge from 'calypso/components/badge';
 import PopoverMenu from 'calypso/components/popover-menu';
 import PopoverMenuItem from 'calypso/components/popover-menu/item';
 import useSkipCurrentViewMutation from 'calypso/data/home/use-skip-current-view-mutation';

client/my-sites/domains/domain-management/list/domain-row.jsx

@@ -1,4 +1,4 @@
-import { Button, Spinner } from '@automattic/components';
+import { Badge, Button, Spinner } from '@automattic/components';
 import { Icon, home, info, redo } from '@wordpress/icons';
 import classnames from 'classnames';
 import { localize } from 'i18n-calypso';
@@ -7,7 +7,6 @@ import page from 'page';
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { connect } from 'react-redux';
-import Badge from 'calypso/components/badge';
 import { useMyDomainInputMode } from 'calypso/components/domains/connect-domain-step/constants';
 import EllipsisMenu from 'calypso/components/ellipsis-menu';
 import FormCheckbox from 'calypso/components/forms/form-checkbox';

client/my-sites/domains/domain-management/list/free-domain-item.jsx

@@ -1,13 +1,12 @@
 /* eslint-disable wpcalypso/jsx-classname-namespace */
 
-import { Spinner } from '@automattic/components';
+import { Badge, Spinner } from '@automattic/components';
 import { createInterpolateElement, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, edit, home } from '@wordpress/icons';
 import PropTypes from 'prop-types';
 import { createElement } from 'react';
 import SiteAddressChanger from 'calypso/blocks/site-address-changer';
-import Badge from 'calypso/components/badge';
 import EllipsisMenu from 'calypso/components/ellipsis-menu';
 import PopoverMenuItem from 'calypso/components/popover-menu/item';
 

client/my-sites/domains/domain-management/settings/settings-header.tsx

@@ -1,9 +1,9 @@
+import { Badge } from '@automattic/components';
 import { Circle, SVG } from '@wordpress/components';
 import { home, Icon, info } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import classnames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
-import Badge from 'calypso/components/badge';
 import FormattedHeader from 'calypso/components/formatted-header';
 import { useCurrentRoute } from 'calypso/components/route';
 import { resolveDomainStatus } from 'calypso/lib/domains';

client/my-sites/earn/ads/payments.jsx

@@ -1,10 +1,9 @@
-import { Card } from '@automattic/components';
+import { Badge, Card } from '@automattic/components';
 import classNames from 'classnames';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
 import { connect } from 'react-redux';
-import Badge from 'calypso/components/badge';
 import QueryWordadsPayments from 'calypso/components/data/query-wordads-payments';
 import QueryWordadsSettings from 'calypso/components/data/query-wordads-settings';
 import Notice from 'calypso/components/notice';

client/my-sites/earn/memberships/products.jsx

@@ -3,13 +3,12 @@ import {
 	FEATURE_PREMIUM_CONTENT_CONTAINER,
 	FEATURE_RECURRING_PAYMENTS,
 } from '@automattic/calypso-products';
-import { Button, CompactCard, Gridicon } from '@automattic/components';
+import { Badge, Button, CompactCard, Gridicon } from '@automattic/components';
 import formatCurrency from '@automattic/format-currency';
 import { localize } from 'i18n-calypso';
 import { Component } from 'react';
 import { connect } from 'react-redux';
 import UpsellNudge from 'calypso/blocks/upsell-nudge';
-import Badge from 'calypso/components/badge';
 import QueryMembershipProducts from 'calypso/components/data/query-memberships';
 import QueryMembershipsSettings from 'calypso/components/data/query-memberships-settings';
 import EllipsisMenu from 'calypso/components/ellipsis-menu';

client/my-sites/email/email-management/home/email-plan-mailboxes-list.jsx

@@ -1,8 +1,7 @@
-import { CompactCard, Gridicon } from '@automattic/components';
+import { Badge, CompactCard, Gridicon } from '@automattic/components';
 import classNames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import Badge from 'calypso/components/badge';
 import MaterialIcon from 'calypso/components/material-icon';
 import SectionHeader from 'calypso/components/section-header';
 import { isRecentlyRegistered } from 'calypso/lib/domains/utils';

client/my-sites/email/email-management/home/email-plan/index.jsx

@@ -1,10 +1,10 @@
 import config from '@automattic/calypso-config';
+import { Badge } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
 import page from 'page';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import titleCase from 'to-title-case';
-import Badge from 'calypso/components/badge';
 import DocumentHead from 'calypso/components/data/document-head';
 import QuerySitePurchases from 'calypso/components/data/query-site-purchases';
 import HeaderCake from 'calypso/components/header-cake';

client/my-sites/hosting/github/deployment-card/deployment-status-badge.tsx

@@ -1,6 +1,6 @@
+import { Badge } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
-import Badge from 'calypso/components/badge';
 import type { BadgeType } from '@automattic/components';
 
 interface DeploymentStatusBadgeProps {

client/my-sites/hosting/github/github-card-heading/index.tsx

@@ -1,5 +1,5 @@
+import { Badge } from '@automattic/components';
 import { translate } from 'i18n-calypso';
-import Badge from 'calypso/components/badge';
 import CardHeading from 'calypso/components/card-heading';
 import SocialLogo from 'calypso/components/social-logo';
 import './style.scss';