Adding new Filter Button component (#13909)

* Adding new Filter Button component. 

Co-authored-by: Charley Campbell <[email protected]>
Co-authored-by: Emma Imber <[email protected]>

Author: 3 people

dotcom-rendering/src/components/ProductLinkButton.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProductLinkButton } from './ProductLinkButton';
+
+const meta = {
+	component: ProductLinkButton,
+	title: 'Components/ProductLinkButton',
+	parameters: {
+		layout: 'padded',
+	},
+	args: {
+		label: '£6.50 for 350g at Ollie’s Kimchi',
+		url: 'https://ollieskimchi.co.uk/shop/ols/products/ollies-kimchi',
+	},
+} satisfies Meta<typeof ProductLinkButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {} satisfies Story;

dotcom-rendering/src/components/ProductLinkButton.tsx

@@ -0,0 +1,26 @@
+import {
+	LinkButton,
+	SvgArrowRightStraight,
+} from '@guardian/source/react-components';
+
+type ProductLinkButtonProps = {
+	label: string;
+	url: string;
+};
+
+export const ProductLinkButton = ({ label, url }: ProductLinkButtonProps) => {
+	return (
+		<LinkButton
+			href={url}
+			rel="sponsored"
+			iconSide="right"
+			aria-label={`Open ${label} in a new tab`}
+			icon={<SvgArrowRightStraight />}
+			data-ignore="global-link-styling"
+			data-link-name="in body link"
+			data-spacefinder-role="inline"
+		>
+			{label}
+		</LinkButton>
+	);
+};

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -673,6 +673,9 @@
                 {
                     "$ref": "#/definitions/KeyTakeawaysBlockElement"
                 },
+                {
+                    "$ref": "#/definitions/LinkBlockElement"
+                },
                 {
                     "$ref": "#/definitions/ListBlockElement"
                 },
@@ -2497,6 +2500,31 @@
                 "title"
             ]
         },
+        "LinkBlockElement": {
+            "type": "object",
+            "properties": {
+                "_type": {
+                    "type": "string",
+                    "const": "model.dotcomrendering.pageElements.LinkBlockElement"
+                },
+                "url": {
+                    "type": "string"
+                },
+                "label": {
+                    "type": "string"
+                },
+                "linkType": {
+                    "type": "string",
+                    "const": "ProductButton"
+                }
+            },
+            "required": [
+                "_type",
+                "label",
+                "linkType",
+                "url"
+            ]
+        },
         "ListBlockElement": {
             "type": "object",
             "properties": {

dotcom-rendering/src/lib/renderElement.tsx

@@ -36,6 +36,7 @@ import { MultiBylines } from '../components/MultiBylines';
 import { MultiImageBlockComponent } from '../components/MultiImageBlockComponent';
 import { NumberedTitleBlockComponent } from '../components/NumberedTitleBlockComponent';
 import { PersonalityQuizAtom } from '../components/PersonalityQuizAtom.importable';
+import { ProductLinkButton } from '../components/ProductLinkButton';
 import { ProfileAtomWrapper } from '../components/ProfileAtomWrapper.importable';
 import { PullQuoteBlockComponent } from '../components/PullQuoteBlockComponent';
 import { QandaAtom } from '../components/QandaAtom.importable';
@@ -562,6 +563,17 @@ export const renderElement = ({
 					/>
 				</Island>
 			);
+		case 'model.dotcomrendering.pageElements.LinkBlockElement':
+			return (
+				<>
+					{element.linkType === 'ProductButton' && (
+						<ProductLinkButton
+							label={element.label}
+							url={element.url}
+						/>
+					)}
+				</>
+			);
 		case 'model.dotcomrendering.pageElements.PullquoteBlockElement':
 			return (
 				<PullQuoteBlockComponent

dotcom-rendering/src/model/block-schema.json

@@ -162,6 +162,9 @@
                 {
                     "$ref": "#/definitions/KeyTakeawaysBlockElement"
                 },
+                {
+                    "$ref": "#/definitions/LinkBlockElement"
+                },
                 {
                     "$ref": "#/definitions/ListBlockElement"
                 },
@@ -1986,6 +1989,31 @@
                 "title"
             ]
         },
+        "LinkBlockElement": {
+            "type": "object",
+            "properties": {
+                "_type": {
+                    "type": "string",
+                    "const": "model.dotcomrendering.pageElements.LinkBlockElement"
+                },
+                "url": {
+                    "type": "string"
+                },
+                "label": {
+                    "type": "string"
+                },
+                "linkType": {
+                    "type": "string",
+                    "const": "ProductButton"
+                }
+            },
+            "required": [
+                "_type",
+                "label",
+                "linkType",
+                "url"
+            ]
+        },
         "ListBlockElement": {
             "type": "object",
             "properties": {

dotcom-rendering/src/types/content.ts

@@ -393,6 +393,13 @@ export interface ListItem {
 	bylineHtml?: string;
 }
 
+export interface LinkBlockElement {
+	_type: 'model.dotcomrendering.pageElements.LinkBlockElement';
+	url: string;
+	label: string;
+	linkType: 'ProductButton';
+}
+
 export interface ListBlockElement {
 	_type: 'model.dotcomrendering.pageElements.ListBlockElement';
 	listElementType:
@@ -792,6 +799,7 @@ export type FEElement =
 	| InteractiveBlockElement
 	| ItemLinkBlockElement
 	| KeyTakeawaysBlockElement
+	| LinkBlockElement
 	| ListBlockElement
 	| MapBlockElement
 	| MediaAtomBlockElement