create new labs logo component

Author: dskamiotis

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

@@ -0,0 +1,33 @@
+// LabsLogo.stories.tsx
+import type { StoryObj } from '@storybook/react';
+import { LabsLogo } from './LabsLogo';
+import type { LabsLogoProps } from './LabsLogo';
+
+export default {
+	title: 'Components/LabsLogo',
+	component: LabsLogo,
+};
+
+export const Default: StoryObj<LabsLogoProps> = {
+	args: { size: 100 },
+};
+
+export const Small = () => <LabsLogo size={50} />;
+export const Large = () => <LabsLogo size={200} />;
+
+export const SizeComparison = () => (
+	<div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
+		<div>
+			<LabsLogo size={50} />
+			<p>Small (50px)</p>
+		</div>
+		<div>
+			<LabsLogo size={100} />
+			<p>Default (100px)</p>
+		</div>
+		<div>
+			<LabsLogo size={200} />
+			<p>Large (200px)</p>
+		</div>
+	</div>
+);

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

@@ -0,0 +1,43 @@
+import { css } from '@emotion/react';
+import { palette } from '@guardian/source/foundations';
+
+const labsLogoContainer = css`
+	background-color: ${palette.labs[200]};
+	border-radius: 50%;
+	position: relative;
+`;
+
+const labsLogoSvgText = css`
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	width: 90%;
+	height: 90%;
+	transform: translate(-50%, -50%);
+`;
+
+export type LabsLogoProps = {
+	size?: number; // optional, default to 100
+};
+
+export const LabsLogo = ({ size = 100 }: LabsLogoProps) => {
+	const circleStyle = {
+		width: `${size}px`,
+		height: `${size}px`,
+	};
+	return (
+		<div css={[labsLogoContainer, circleStyle]}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 89 47"
+				fill="white"
+				css={labsLogoSvgText}
+			>
+				<title>Guardian Labs</title>{' '}
+				<path d="M20.2 15.6l1.5-.8V2.6h-1.2l-2.9 3.8h-.3l.2-4.2H30l.2 4.2h-.3l-2.8-3.8h-1.2v12.2l1.6.8v.4h-7.2v-.4zm11.2-.6V1.5L30.2 1V.8l4.4-.8h.4v6.4l.1-.1a6 6 0 0 1 3.7-1.4c1.9 0 2.7 1.1 2.7 3.1v7l1 .6v.4h-5.7v-.4l1-.6V8c0-1.1-.5-1.5-1.4-1.5-.6 0-1.1.2-1.5.5v8l1 .6v.4h-5.7v-.4l1.2-.6zm14.3-4.1c.1 2.2 1.1 4 3.5 4 1.1 0 2-.5 2.7-.9v.4c-.6.8-2.1 1.9-4.2 1.9-3.7 0-5.5-2-5.5-5.6 0-3.5 2.1-5.6 5.4-5.6 3.1 0 4.7 1.6 4.7 5.7v.1h-6.6zm0-.5l3.2-.2c0-2.8-.5-4.6-1.4-4.6-1 0-1.8 2.1-1.8 4.8zM0 21.4c0-5.9 3.9-8 8.2-8 1.8 0 3.6.3 4.5.7l.1 4.1h-.4l-2.5-4C9.5 14 9 14 8.3 14c-2.3 0-3.5 2.7-3.4 7 0 5.2 1 7.6 3.1 7.6l1.3-.2v-5.6L7.8 22v-.5h6.7v.5l-1.4.8v5.5c-1.1.4-3.1.9-5.1.9-4.9 0-8-2.3-8-7.8z" />
+				<path d="M13.9 18.6v-.3l4.5-.8h.5v8.9c0 1.1.5 1.4 1.4 1.4.6 0 1.1-.2 1.5-.7v-8l-1.2-.5v-.4l4.5-.8h.5v10.2l1.2.5v.3l-4.5.6h-.5v-1.3h-.1c-.8.8-2 1.4-3.4 1.4-2.2 0-3.2-1.3-3.2-3.2v-6.8l-1.2-.5zm28.5-1.1h.4v3.3h.1c.5-2.4 1.6-3.3 2.9-3.3l.6.1V21l-.9-.1c-1 0-1.8.2-2.5.5v6.5l1 .6v.4h-6v-.4l1.1-.6V19l-1.2-.4v-.3l4.5-.8zm11.3.2v-3.5l-1.2-.4v-.3l4.6-.8.4.1v15l1.3.5v.4l-4.5.6h-.4v-1.2h-.1a4 4 0 0 1-3 1.3c-2.5 0-4.3-1.9-4.3-5.7 0-4.1 2.1-6.1 5.3-6.1.9-.2 1.6 0 1.9.1zm0 9.6v-9c-.3-.2-.5-.4-1.3-.4-1.2 0-2 1.9-2 5.2 0 3 .5 4.6 2.2 4.6.5 0 .9-.1 1.1-.4zm10-9.8h.4v10.4l1 .6v.4h-5.9v-.4l1.1-.6v-8.8l-1.3-.5v-.3l4.7-.8zm.4-2.9c0 1.1-.9 1.9-2 1.9s-2-.8-2-1.9c0-1.1.9-1.9 2-1.9s2 .8 2 1.9zm13.2 13.3V19l-1.2-.4v-.4l4.5-.8h.5v1.3h.1c1-.9 2.4-1.4 3.9-1.4 2 0 2.8.9 2.8 3v7.6l1.1.6v.4h-6v-.4l1.1-.6v-7.4c0-1.1-.5-1.6-1.4-1.6a3 3 0 0 0-1.6.5v8.5l1 .6v.4h-5.9v-.4l1.1-.6zm-6.4-5.6v-1.5c0-2.2-.5-3-1.9-3h-.5L66 21.1h-.3V18c1.1-.3 2.4-.7 4.1-.7 3 0 4.8.8 4.8 3.4v7.2l1.1.3v.3c-.4.3-1.3.5-2.2.5-1.5 0-2.2-.5-2.5-1.3h-.1c-.6.9-1.5 1.3-2.9 1.3-1.8 0-3-1.1-3-3.1 0-1.9 1.2-2.9 3.5-3.3l2.4-.3zm0 5v-4.5l-.8.1c-1.2.1-1.6.9-1.6 2.5 0 1.8.6 2.3 1.4 2.3.6 0 .8-.1 1-.4zm-38.1-5v-1.5c0-2.2-.5-3-1.9-3h-.5L28 21.3h-.3v-3.1c1.1-.3 2.4-.7 4.1-.7 3 0 4.8.8 4.8 3.4v7.2l1.1.3v.3c-.4.3-1.3.5-2.2.5-1.5 0-2.2-.5-2.5-1.3h-.1c-.6.9-1.5 1.3-2.9 1.3-1.8 0-3-1.1-3-3.1 0-1.9 1.2-2.9 3.5-3.3l2.3-.5zm0 5v-4.5l-.8.1c-1.2.1-1.6.9-1.6 2.5 0 1.8.6 2.3 1.4 2.3.5 0 .8-.1 1-.4zm-12.7 19l1.4-.3V32.4l-1.4-.3v-.4h7.2v.4l-1.5.3v13.9h2.4l3.4-5.3h.4l-.3 5.7H20.1v-.4zM38.6 40v-1.5c0-2.3-.5-3-1.8-3h-.4l-2.8 3.8h-.4l.1-3.5c1.1-.3 2.4-.7 4.2-.7 3.1 0 4.8.8 4.8 3.4v7.4l1.1.3v.3c-.4.3-1.3.5-2.3.5-1.5 0-2.2-.5-2.6-1.3h-.1c-.6.9-1.6 1.4-3 1.4-1.8 0-3.1-1.1-3.1-3.1 0-1.9 1.2-2.9 3.6-3.4l2.7-.6zm0 5.1v-4.6l-.8.1c-1.2.1-1.6.9-1.6 2.6 0 1.8.6 2.3 1.4 2.3.6 0 .8-.1 1-.4zm16.6-4.4c0 4.4-2.5 6.3-6.2 6.3-1.9 0-3.8-.4-4.8-1V31.8l-1.3-.5V31l4.5-.7.5.1v6.1h.1c.6-.7 1.7-1.4 3.3-1.4 2.1 0 3.9 1.5 3.9 5.6zm-4 .4c0-3.4-.7-4.4-2-4.4l-1.2.2v9.3c.3.3.7.4 1.2.4 1.2 0 2-1.4 2-5.5zm13.3 2.1c0 2.3-1.6 3.7-4.7 3.7-1.4 0-2.8-.2-3.9-.6l-.1-3.3h.4l3 3.5.6.1c1.3 0 1.8-.7 1.8-1.7 0-.9-.5-1.3-1.8-1.9l-.7-.3c-2.1-1-3.3-2-3.3-3.9 0-2.3 1.6-3.7 4.4-3.7 1.1 0 2.4.1 3.3.4l.1 3.1h-.4l-2.3-3-.7-.1c-1.1 0-1.6.6-1.6 1.6s.5 1.3 1.9 2l.6.3c2.3.9 3.4 1.7 3.4 3.8z" />
+			</svg>
+			;
+		</div>
+	);
+};