Rename SponsoredContentLabel to more generic component name and update JSDoc

Author: deedeeh

…onents/SponsoredContentLabel.stories.tsx …src/components/BrandingLabel.stories.tsxdotcom-rendering/src/components/SponsoredContentLabel.stories.tsx renamed to dotcom-rendering/src/components/BrandingLabel.stories.tsx dotcom-rendering/src/components/SponsoredContentLabel.stories.tsx renamed to dotcom-rendering/src/components/BrandingLabel.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta } from '@storybook/react-webpack5';
-import { SponsoredContentLabel } from './SponsoredContentLabel';
+import { BrandingLabel } from './BrandingLabel';
 
-const meta: Meta<typeof SponsoredContentLabel> = {
-	component: SponsoredContentLabel,
-	title: 'Components/SponsoredContentLabel',
+const meta: Meta<typeof BrandingLabel> = {
+	component: BrandingLabel,
+	title: 'Components/BrandingLabel For Labs',
 	parameters: {
 		layout: 'centered',
 		chromatic: {

…src/components/SponsoredContentLabel.tsx …ndering/src/components/BrandingLabel.tsxdotcom-rendering/src/components/SponsoredContentLabel.tsx renamed to dotcom-rendering/src/components/BrandingLabel.tsx dotcom-rendering/src/components/SponsoredContentLabel.tsx renamed to dotcom-rendering/src/components/BrandingLabel.tsx

@@ -100,13 +100,13 @@ const imageAdvertisingPartnerStyles = css`
 `;
 
 /**
- * Component used to display "paid for" label alonside the sponsor logo
- * for a particular set of branding
+ * Component used to display branding labels with sponsor logos for
+ * various types of branded content (paid-content, sponsored, foundation, etc.)
  *
- * This is used for front container level branding for labs content and
- * should replace `CardBranding` eventually
+ * This is used for front container level branding and supports both Labs
+ * and non-Labs designs. Should eventually replace `CardBranding` and `Badge`.
  */
-export const SponsoredContentLabel = ({
+export const BrandingLabel = ({
 	branding,
 	alignment = 'start',
 	orientation = 'horizontal',

dotcom-rendering/src/components/Card/Card.tsx

@@ -35,6 +35,7 @@ import type {
 import type { MainMedia } from '../../types/mainMedia';
 import type { OnwardsSource } from '../../types/onwards';
 import { Avatar } from '../Avatar';
+import { BrandingLabel } from '../BrandingLabel';
 import { CardCommentCount } from '../CardCommentCount.importable';
 import { CardHeadline, type ResponsiveFontSize } from '../CardHeadline';
 import type { Loading } from '../CardPicture';
@@ -47,7 +48,6 @@ import { Pill } from '../Pill';
 import { SlideshowCarousel } from '../SlideshowCarousel.importable';
 import { Snap } from '../Snap';
 import { SnapCssSandbox } from '../SnapCssSandbox';
-import { SponsoredContentLabel } from '../SponsoredContentLabel';
 import { StarRating } from '../StarRating/StarRating';
 import type { Alignment } from '../SupportingContent';
 import { SupportingContent } from '../SupportingContent';
@@ -779,7 +779,7 @@ export const Card = ({
 						}
 					`}
 				>
-					<SponsoredContentLabel
+					<BrandingLabel
 						branding={branding}
 						containerPalette={containerPalette}
 						orientation="horizontal"
@@ -800,7 +800,7 @@ export const Card = ({
 						}
 					`}
 				>
-					<SponsoredContentLabel
+					<BrandingLabel
 						branding={branding}
 						containerPalette={containerPalette}
 						orientation="vertical"

dotcom-rendering/src/components/FeatureCard.tsx

@@ -25,6 +25,7 @@ import type {
 	DCRSupportingContent,
 } from '../types/front';
 import type { MainMedia } from '../types/mainMedia';
+import { BrandingLabel } from './BrandingLabel';
 import { CardFooter } from './Card/components/CardFooter';
 import { CardLink } from './Card/components/CardLink';
 import type { MediaSizeType } from './Card/components/MediaWrapper';
@@ -39,7 +40,6 @@ import { FormatBoundary } from './FormatBoundary';
 import { Island } from './Island';
 import { MediaDuration } from './MediaDuration';
 import { Pill } from './Pill';
-import { SponsoredContentLabel } from './SponsoredContentLabel';
 import { StarRating } from './StarRating/StarRating';
 import { SupportingContent } from './SupportingContent';
 import { WaveForm } from './WaveForm';
@@ -730,7 +730,7 @@ export const FeatureCard = ({
 						/>
 					)}
 					{isLabs && branding && showLabsRedesign && (
-						<SponsoredContentLabel
+						<BrandingLabel
 							branding={branding}
 							containerPalette={containerPalette}
 							orientation="horizontal"

dotcom-rendering/src/components/FrontSection.tsx

@@ -15,6 +15,7 @@ import type {
 import type { TagPagePagination } from '../types/tagPage';
 import { isAustralianTerritory, type Territory } from '../types/territory';
 import { AustralianTerritorySwitcher } from './AustralianTerritorySwitcher.importable';
+import { BrandingLabel } from './BrandingLabel';
 import { ContainerOverrides } from './ContainerOverrides';
 import { ContainerTitle } from './ContainerTitle';
 import { FrontPagination } from './FrontPagination';
@@ -23,7 +24,6 @@ import { Island } from './Island';
 import { LabsSectionHeader } from './LabsSectionHeader';
 import { ShowHideButton } from './ShowHideButton';
 import { ShowMore } from './ShowMore.importable';
-import { SponsoredContentLabel } from './SponsoredContentLabel';
 import { Treats } from './Treats';
 
 type Props = {
@@ -829,7 +829,7 @@ export const FrontSection = ({
 						collectionBranding?.kind === 'paid-content' &&
 						!collectionBranding.hasMultipleBranding && (
 							<div css={sponsoredContentLabelWrapper}>
-								<SponsoredContentLabel
+								<BrandingLabel
 									branding={collectionBranding.branding}
 									containerPalette={containerPalette}
 									ophanComponentLink={

dotcom-rendering/src/components/FrontSectionTitle.tsx

@@ -9,7 +9,7 @@ import { Hide } from '@guardian/source/react-components';
 import { assertUnreachable } from '../lib/assert-unreachable';
 import { palette } from '../palette';
 import type { CollectionBranding } from '../types/branding';
-import { SponsoredContentLabel } from './SponsoredContentLabel';
+import { BrandingLabel } from './BrandingLabel';
 
 type Props = {
 	title: React.ReactNode;
@@ -90,14 +90,14 @@ export const FrontSectionTitle = ({ title, collectionBranding }: Props) => {
 					<>
 						<Hide until="leftCol">
 							<p css={[labelStyles]}>{logo.label}</p>
-							<SponsoredContentLabel
+							<BrandingLabel
 								branding={collectionBranding.branding}
 							/>
 						</Hide>
 						<div css={titleStyle}>
 							<Hide from="leftCol">
 								<p css={[labelStyles]}>{logo.label}</p>
-								<SponsoredContentLabel
+								<BrandingLabel
 									branding={collectionBranding.branding}
 								/>
 							</Hide>
@@ -134,7 +134,7 @@ export const FrontSectionTitle = ({ title, collectionBranding }: Props) => {
 							`}
 						>
 							Paid for by
-							<SponsoredContentLabel
+							<BrandingLabel
 								branding={collectionBranding.branding}
 							/>
 						</div>
@@ -145,13 +145,11 @@ export const FrontSectionTitle = ({ title, collectionBranding }: Props) => {
 			return (
 				<>
 					<Hide until="leftCol">
-						<SponsoredContentLabel
-							branding={collectionBranding.branding}
-						/>
+						<BrandingLabel branding={collectionBranding.branding} />
 					</Hide>
 					<div css={titleStyle}>
 						<Hide from="leftCol">
-							<SponsoredContentLabel
+							<BrandingLabel
 								branding={collectionBranding.branding}
 							/>
 						</Hide>
@@ -191,7 +189,7 @@ export const FrontSectionTitle = ({ title, collectionBranding }: Props) => {
 							>
 								{logo.label}
 							</p>
-							<SponsoredContentLabel
+							<BrandingLabel
 								branding={collectionBranding.branding}
 								isAdvertisingPartner={
 									isAdvertisingPartnerOrExclusive