Move <Callout> from @automattic/components into dashboard directory

Author: p-jackson

client/dashboard/components/callout-overlay/index.stories.tsx

@@ -1,6 +1,6 @@
-import { Callout } from '@automattic/components/src/callout';
 import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@wordpress/components';
+import { Callout } from '../callout';
 import { PageHeader } from '../page-header';
 import PageLayout from '../page-layout';
 import { CalloutOverlay } from './index';

packages/components/src/callout/index.stories.tsx renamed to client/dashboard/components/callout/index.stories.tsx

@@ -3,7 +3,7 @@ import { Button, __experimentalText as Text } from '@wordpress/components';
 import { Callout } from './';
 
 const meta: Meta< typeof Callout > = {
-	title: 'Callout',
+	title: 'client/dashboard/Callout',
 	component: Callout,
 	tags: [ 'autodocs' ],
 };

packages/components/src/callout/index.tsx renamed to client/dashboard/components/callout/index.tsx

@@ -23,24 +23,24 @@ function UnforwardedCallout(
 	ref: React.ForwardedRef< HTMLElement >
 ) {
 	return (
-		<Card ref={ ref } className={ `a8c-components-callout is-${ variant }` }>
+		<Card ref={ ref } className={ `dashboard-callout is-${ variant }` }>
 			<HStack
-				className="a8c-components-callout__h-container"
+				className="dashboard-callout__h-container"
 				spacing="6"
 				alignment="stretch"
 				justify="stretch"
 				expanded={ false }
 			>
 				<VStack justify="flex-start" alignment="flex-start" spacing="4">
 					{ icon && <Icon icon={ icon } /> }
-					<Heading level={ headingLevel } className="a8c-components-callout__title">
+					<Heading level={ headingLevel } className="dashboard-callout__title">
 						{ title }
 					</Heading>
 					{ description }
 					{ actions }
 				</VStack>
 				{ imageSrc && (
-					<VStack justify="stretch" alignment="stretch" className="a8c-components-callout__image">
+					<VStack justify="stretch" alignment="stretch" className="dashboard-callout__image">
 						<img src={ imageSrc } alt={ imageAlt } />
 					</VStack>
 				) }

packages/components/src/callout/styles.scss renamed to client/dashboard/components/callout/styles.scss

@@ -3,15 +3,15 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 
-.a8c-components-callout {
+.dashboard-callout {
 	max-width: 600px;
 
 	&.is-highlight {
 		background: rgba(56, 88, 233, 0.04);
 	}
 }
 
-.a8c-components-callout__h-container {
+.dashboard-callout__h-container {
 	padding: $grid-unit-40;
 	@include body-medium;
 	color: $gray-700;
@@ -21,12 +21,12 @@
 	}
 }
 
-.a8c-components-callout__title {
+.dashboard-callout__title {
 	@include heading-large;
 	color: $gray-900;
 }
 
-.a8c-components-callout__image {
+.dashboard-callout__image {
 	display: none;
 	position: relative;
 

packages/components/src/callout/test/index.tsx renamed to client/dashboard/components/callout/test/index.tsx

@@ -1,9 +1,9 @@
-import { Callout } from '@automattic/components/src/callout';
 import { useQuery } from '@tanstack/react-query';
 import { __experimentalText as Text } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { siteQuery } from '../../app/queries';
 import { siteRoute } from '../../app/router';
+import { Callout } from '../../components/callout';
 import { CalloutOverlay } from '../../components/callout-overlay';
 import DataViewsCard from '../../components/dataviews-card';
 import { PageHeader } from '../../components/page-header';