docs: Or 732 update figma storybook links (#1735)

* docs: update figma storybook links across different packages --------- Co-authored-by: Ben Freshwater <[email protected]> Co-authored-by: Lee Moody <[email protected]>
Financial-Times · Jul 8, 2024 · 765bc3f · 765bc3f
1 parent fe67b28
commit 765bc3f
Show file tree

Hide file tree

Showing 108 changed files with 1,455 additions and 457 deletions.
diff --git a/.github/labeler.yml b/.github/labeler.yml
@@ -146,6 +146,8 @@ o-tracking:
   - libraries/o-tracking/**/*
 o-utils:
   - libraries/o-utils/**/*
+o3-figma-sb-links:
+  - libraries/o3-figma-sb-links/**/*
 o3-tooling-token:
   - libraries/o3-tooling-token/**/*
 sass-mq:

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -149,6 +149,8 @@ jobs:
             - 'libraries/o-tracking/**'
           libraries/o-utils:
             - 'libraries/o-utils/**'
+          libraries/o3-figma-sb-links:
+            - 'libraries/o3-figma-sb-links/**'
           libraries/o3-tooling-token:
             - 'libraries/o3-tooling-token/**'
           libraries/sass-mq:

diff --git a/apps/for-everyone-website/package.json b/apps/for-everyone-website/package.json
@@ -22,6 +22,7 @@
 		"@astrojs/svelte": "^5.4.0",
 		"@financial-times/o3-button": "^1.0.0",
 		"@financial-times/o3-editorial-typography": "^1.0.0",
+		"@financial-times/o3-figma-sb-links": "^0.0.0",
 		"@financial-times/o3-foundation": "^1.0.0",
 		"@financial-times/o3-tooling-token": "^0.0.0",
 		"@financial-times/o3-tooltip": "^1.0.0",

diff --git a/apps/for-everyone-website/src/components/button/ButtonGroupPreview.astro b/apps/for-everyone-website/src/components/button/ButtonGroupPreview.astro
@@ -5,44 +5,10 @@ import FigmaSbLinks from '../utils/FigmaSbLinks.astro';
 
 const {brand} = Astro.props;
 
-let figma =
-	'https://www.figma.com/files/938480807921629744/team/1237702133754424766/Origami-for-Everyone-(NEW)?fuid=840167457508775739';
-switch (brand) {
-	case 'core':
-		figma =
-			'https://www.figma.com/design/VVM0PixrY3IRZq2ZUTdWfU/%F0%9F%92%A0-Core---Origami-(o3)?node-id=6605-826&t=mPp0f1R2Bgyi54UE-4';
-		break;
-	case 'professional':
-		figma =
-			'https://www.figma.com/design/qfi6fTq5V05b0mnXw3F7q5/%F0%9F%92%A0-Professional---Origami-(o3)?node-id=4173-834&t=mPp0f1R2Bgyi54UE-4';
-		break;
-	case 'internal':
-		figma =
-			'https://www.figma.com/design/H9vTWZgEzqzTtX689nwq4R/%F0%9F%92%A0-Internal---Origami-(o3)?node-id=5545-1833&t=mPp0f1R2Bgyi54UE-4';
-		break;
-	case 'sustainable-views':
-		figma =
-			'https://www.figma.com/design/Y7u0SwIJ1mCNDE0dpzgHCJ/%F0%9F%92%A0-Sustainable-Views---Origami-(o3)?node-id=6294-955&t=mPp0f1R2Bgyi54UE-4';
-		break;
-
-	default:
-		break;
-}
-
-let storybook = 'https://o3.origami.ft.com';
-if (brand) {
-	const storybookArgs = `grouped-buttons`;
-	const storybookbase = 'https://o3.origami.ft.com?path=/story';
-	storybook = `${storybookbase}/${brand}-o3-button--${storybookArgs}`;
-
-	if (brand === 'professional') {
-		storybook = `${storybookbase}/core-${brand}-o3-button--${storybookArgs}`;
-	}
-}
-
+const storybookId = `${brand}-o3-button--grouped-buttons`;
 ---
 
 <div>
 	<Preview component={Component} />
-	<FigmaSbLinks {figma} {storybook} />
+	<FigmaSbLinks {storybookId} />
 </div>
diff --git a/apps/for-everyone-website/src/components/button/ButtonPaginationPreview.astro b/apps/for-everyone-website/src/components/button/ButtonPaginationPreview.astro
@@ -4,15 +4,13 @@ import * as InverseComponent from './preview/ButtonPagination-inverse';
 import Preview from '../utils/Preview.astro';
 import FigmaSbLinks from '../utils/FigmaSbLinks.astro';
 
-const {theme} = Astro.props;
+const {theme, brand} = Astro.props;
 
 const Component = theme === 'inverse' ? InverseComponent : StandardComponent;
-const figma =
-	'https://www.figma.com/file/nSD9N3r4MiMpv9pA6F4Dpy/Pagination?type=design&node-id=5463-1742&mode=design';
-const storybook = `https://o3.origami.ft.com?path=/story/core-o3-button--pagination&args=theme:${theme}`;
+const storybookId = `${brand}-o3-button--pagination`;
 ---
 
 <div>
 	<Preview component={Component} />
-	<FigmaSbLinks {figma} {storybook} />
+	<FigmaSbLinks {storybookId} />
 </div>
diff --git a/apps/for-everyone-website/src/components/button/ButtonPreview.astro b/apps/for-everyone-website/src/components/button/ButtonPreview.astro
@@ -14,42 +14,7 @@ import FigmaSbLinks from '../utils/FigmaSbLinks.astro';
 
 const {previewFile, componentProps, brand} = Astro.props;
 
-let figma =
-	'https://www.figma.com/files/938480807921629744/team/1237702133754424766/Origami-for-Everyone-(NEW)?fuid=840167457508775739';
-switch (brand) {
-	case 'core':
-		figma =
-			'https://www.figma.com/file/VVM0PixrY3IRZq2ZUTdWfU/%F0%9F%92%A0-Core---Design-System?type=design&node-id=4059-1949&mode=design&t=Coj8qOkQwGndrOew-4';
-		break;
-	case 'professional':
-		figma =
-			'https://www.figma.com/file/qfi6fTq5V05b0mnXw3F7q5/%F0%9F%92%A0-Professional---Design-System?type=design&node-id=3786-2499&mode=design&t=3k5iL1exswqY1yJz-4';
-		break;
-	case 'internal':
-		figma =
-			'https://www.figma.com/file/H9vTWZgEzqzTtX689nwq4R/Internal---Design-System?type=design&node-id=4316-309&mode=design&t=3k5iL1exswqY1yJz-4';
-		break;
-	case 'sustainable-views':
-		figma =
-			'https://www.figma.com/file/Y7u0SwIJ1mCNDE0dpzgHCJ/Sustainable-Views---Design-System?type=design&node-id=4039-410&mode=design&t=3k5iL1exswqY1yJz-4';
-		break;
-
-	default:
-		break;
-}
-
-let storybook = 'https://o3.origami.ft.com';
-if (brand) {
-	const storybookArgs = `button&args=${Object.entries(componentProps)
-		.map(p => `${p[0]}:${p[1]};`)
-		.join('')}`;
-	const storybookbase = 'https://o3.origami.ft.com?path=/story';
-	storybook = `${storybookbase}/${brand}-o3-button--${storybookArgs}`;
-
-	if (brand === 'professional') {
-		storybook = `${storybookbase}/core-${brand}-o3-button--${storybookArgs}`;
-	}
-}
+const storybookId = `${brand}-o3-button--button`
 
 let component = Primary;
 
@@ -83,5 +48,5 @@ switch (previewFile) {
 
 <div>
 	<Preview {component} />
-	<FigmaSbLinks {figma} {storybook} />
+	<FigmaSbLinks {storybookId} sbPathParams={componentProps} />
 </div>
diff --git a/apps/for-everyone-website/src/components/editorial-typography/BigNumber.astro b/apps/for-everyone-website/src/components/editorial-typography/BigNumber.astro
@@ -3,10 +3,7 @@ import * as Component from './preview/BigNumber.tsx';
 import FigmaSbLinks from '../utils/FigmaSbLinks.astro';
 import Preview from '../utils/Preview.astro';
 const {brand} = Astro.props;
-const figma =
-	'https://www.figma.com/design/y25ZjT1MqqHbNXNXsm8DET/Documentation-Content-Template?node-id=754-4443&t=kyDVEfsg2tRJspyY-4';
-
-const storybook = `https://o3.origami.ft.com/?path=/story/${brand}-o3-editorial-typography--big-number`;
+const storybookId = `${brand}-o3-editorial-typography--big-number`
 ---
 
 <p>
@@ -16,4 +13,4 @@ const storybook = `https://o3.origami.ft.com/?path=/story/${brand}-o3-editorial-
 
 <Preview component={Component} />
 
-<FigmaSbLinks {figma} {storybook} />
+<FigmaSbLinks {storybookId} />
diff --git a/apps/for-everyone-website/src/components/editorial-typography/BodyStyles.astro b/apps/for-everyone-website/src/components/editorial-typography/BodyStyles.astro
@@ -6,15 +6,11 @@ import {
 } from '@financial-times/o3-editorial-typography/esm';
 import FigmaSbLinks from '../utils/FigmaSbLinks.astro';
 const {brand} = Astro.props;
-const figmaBody =
-	'https://www.figma.com/design/y25ZjT1MqqHbNXNXsm8DET/Documentation-Content-Template?node-id=754-4084&t=kyDVEfsg2tRJspyY-4';
-const figmaDetails =
-	'https://www.figma.com/design/y25ZjT1MqqHbNXNXsm8DET/Documentation-Content-Template?node-id=754-4178&t=kyDVEfsg2tRJspyY-4';
-const sbDomain = `https://o3.origami.ft.com/?path=/story/${brand}-o3-editorial-typography`;
-const sbBody = sbDomain + '--body';
-const sbTopicTag = sbDomain + '--topic-tag';
-const sbStandfirst = sbDomain + '--standfirst';
-const sbCaption = sbDomain + '--caption';
+const storybookIdBody = `${brand}-o3-editorial-typography--body`;
+const storybookIdTopicTag = `${brand}-o3-editorial-typography--topic-tag`;
+const storybookIdStandFirst = `${brand}-o3-editorial-typography--standfirst`;
+const storybookIdCaption = `${brand}-o3-editorial-typography--caption`;
+const storybookIdByline = `${brand}-o3-editorial-typography--byline`;
 ---
 
 <h4>Body</h4>
@@ -32,14 +28,14 @@ const sbCaption = sbDomain + '--caption';
 			<td>S</td>
 			<td class="body-s">body</td>
 			<td>
-				<FigmaSbLinks figma={figmaBody} storybook={sbBody} />
+				<FigmaSbLinks storybookId={storybookIdBody} />
 			</td>
 		</tr>
 		<tr>
 			<td>L</td>
 			<td class="body-l">body</td>
 			<td>
-				<FigmaSbLinks figma={figmaBody} storybook={sbBody} />
+				<FigmaSbLinks storybookId={storybookIdBody} />
 			</td>
 		</tr>
 	</tbody>
@@ -68,7 +64,7 @@ const sbCaption = sbDomain + '--caption';
 				(article cards) to indicate the category of a post.</td
 			>
 			<td>
-				<FigmaSbLinks figma={figmaDetails} storybook={sbTopicTag} />
+				<FigmaSbLinks storybookId={storybookIdTopicTag} />
 			</td>
 		</tr>
 		<tr>
@@ -80,7 +76,7 @@ const sbCaption = sbDomain + '--caption';
 				in combination with a header in the topper component.</td
 			>
 			<td>
-				<FigmaSbLinks figma={figmaDetails} storybook={sbStandfirst} />
+				<FigmaSbLinks storybookId={storybookIdStandFirst} />
 			</td>
 		</tr>
 		<tr>
@@ -91,7 +87,7 @@ const sbCaption = sbDomain + '--caption';
 				>For additional information about a piece or image that should be less
 				prominent.</td
 			>
-			<td><FigmaSbLinks figma={figmaDetails} storybook={sbCaption} /></td>
+			<td><FigmaSbLinks storybookId={storybookIdCaption} /></td>
 		</tr>
 		<tr>
 			<td class="o3-editorial-typography-byline-author not-content">
@@ -102,7 +98,7 @@ const sbCaption = sbDomain + '--caption';
 				component
 			</td>
 			<td>
-				<FigmaSbLinks figma={figmaDetails} />
+				<FigmaSbLinks storybookId={storybookIdByline} />
 			</td>
 		</tr>
 		<tr>
@@ -114,7 +110,7 @@ const sbCaption = sbDomain + '--caption';
 				component</td
 			>
 			<td>
-				<FigmaSbLinks figma={figmaDetails} />
+				<FigmaSbLinks storybookId={storybookIdByline} />
 			</td>
 		</tr>
 		<tr>
@@ -126,7 +122,7 @@ const sbCaption = sbDomain + '--caption';
 				component</td
 			>
 			<td>
-				<FigmaSbLinks figma={figmaDetails} />
+				<FigmaSbLinks storybookId={storybookIdByline} />
 			</td>
 		</tr>
 	</tbody>
@@ -153,6 +149,6 @@ const sbCaption = sbDomain + '--caption';
 
 	.not-content.o3-editorial-typography-blockquote__source,
 	.not-content.o3-editorial-typography-blockquote__author {
-		display: revert
+		display: revert;
 	}
 </style>
diff --git a/apps/for-everyone-website/src/components/editorial-typography/Byline.astro b/apps/for-everyone-website/src/components/editorial-typography/Byline.astro
@@ -4,11 +4,7 @@ import FigmaSbLinks from '../utils/FigmaSbLinks.astro';
 import Preview from '../utils/Preview.astro';
 
 const {brand} = Astro.props;
-const figma =
-	'https://www.figma.com/design/y25ZjT1MqqHbNXNXsm8DET/Documentation-Content-Template?node-id=754-4457&t=kyDVEfsg2tRJspyY-4';
-
-const storybook = `https://o3.origami.ft.com/?path=/story/${brand}-o3-editorial-typography--byline`;
-
+const storybookId = `${brand}-o3-editorial-typography--byline`
 ---
 
 <p>
@@ -18,4 +14,4 @@ const storybook = `https://o3.origami.ft.com/?path=/story/${brand}-o3-editorial-
 
 <Preview component={Component} />
 
-<FigmaSbLinks {figma} {storybook} />
+<FigmaSbLinks {storybookId} />
diff --git a/apps/for-everyone-website/src/components/editorial-typography/DropCap.astro b/apps/for-everyone-website/src/components/editorial-typography/DropCap.astro
@@ -1,18 +1,15 @@
 ---
-import * as DropCap from './preview/DropCap.tsx'
+import * as DropCap from './preview/DropCap.tsx';
 import FigmaSbLinks from '../utils/FigmaSbLinks.astro';
 import Preview from '../utils/Preview.astro';
 
 const {brand} = Astro.props;
-const figma =
-	'https://www.figma.com/design/y25ZjT1MqqHbNXNXsm8DET/Documentation-Content-Template?node-id=754-4370&t=kyDVEfsg2tRJspyY-4';
-const quoteSbLinkGenerator = () => {
-	return `/?path=/story/${brand}-o3-editorial-typography--body&args=dropCap:!true&globals=backgrounds.name:paper;backgrounds.value:!hex(ffffff)`;
+const storybookId = `${brand}-o3-editorial-typography--body`;
+const sbPathParams = {
+	dropCap: '!true',
 };
-const sb = quoteSbLinkGenerator();
-
 ---
 
 <Preview component={DropCap} />
 
-<FigmaSbLinks {figma} storybook={sb} />
+<FigmaSbLinks {storybookId} {sbPathParams} />
diff --git a/apps/for-everyone-website/src/components/editorial-typography/HeadingStyles.astro b/apps/for-everyone-website/src/components/editorial-typography/HeadingStyles.astro
@@ -2,10 +2,7 @@
 import {Headline} from '@financial-times/o3-editorial-typography';
 import FigmaSbLinks from '../utils/FigmaSbLinks.astro';
 const {brand} = Astro.props
-let storybook =
-	`https://o3.origami.ft.com/?path=/story/${brand}-o3-editorial-typography--heading`;
-let figma =
-	'https://www.figma.com/design/5ATknbGociZMlnNXX4sy4f/Whitelabel---Origami-(o3)?node-id=4717-652&t=JoNufjYjDEE8n0FL-4';
+const storybookId = `${brand}-o3-editorial-typography--heading`
 ---
 
 {brand === 'core' || brand === 'professional' && <>
@@ -29,21 +26,21 @@ let figma =
 			<td>S</td>
 			<td class="headline-large-s">Headline large</td>
 			<td>
-				<FigmaSbLinks {figma} {storybook} />
+				<FigmaSbLinks {storybookId} />
 			</td>
 		</tr>
 		<tr>
 			<td>M</td>
 			<td class="headline-large-m">Headline large</td>
 			<td>
-				<FigmaSbLinks {figma} {storybook} />
+				<FigmaSbLinks {storybookId} />
 			</td>
 		</tr>
 		<tr>
 			<td>L</td>
 			<td class="headline-large-l">Headline large</td>
 			<td>
-				<FigmaSbLinks {figma} {storybook} />
+				<FigmaSbLinks {storybookId} />
 			</td>
 		</tr>
 	</tbody>
@@ -64,21 +61,21 @@ let figma =
 			<td>S</td>
 			<td class="headline-s">Headline</td>
 			<td>
-				<FigmaSbLinks {figma} {storybook} />
+				<FigmaSbLinks {storybookId} />
 			</td>
 		</tr>
 		<tr>
 			<td>M</td>
 			<td class="headline-m">Headline</td>
 			<td>
-				<FigmaSbLinks {figma} {storybook} />
+				<FigmaSbLinks {storybookId} />
 			</td>
 		</tr>
 		<tr>
 			<td>L</td>
 			<td class="headline-l">Headline</td>
 			<td>
-				<FigmaSbLinks {figma} {storybook} />
+				<FigmaSbLinks {storybookId} />
 			</td>
 		</tr>
 	</tbody>
@@ -105,7 +102,7 @@ let figma =
 			</td>
 			<td>For in-page titles / chapters</td>
 			<td>
-				<FigmaSbLinks {figma} {storybook} />
+				<FigmaSbLinks {storybookId} />
 			</td>
 		</tr>
 		<tr>
@@ -114,7 +111,7 @@ let figma =
 			</td>
 			<td>For in-page sub-titles / sub-headings</td>
 			<td>
-				<FigmaSbLinks {figma} {storybook} />
+				<FigmaSbLinks {storybookId} />
 			</td>
 		</tr>
 		<tr>
@@ -126,7 +123,7 @@ let figma =
 				just above a chapter.
 			</td>
 			<td>
-				<FigmaSbLinks {figma} {storybook} />
+				<FigmaSbLinks {storybookId} />
 			</td>
 		</tr>
 	</tbody>