From ee3edb4522380ce97fff58332f708920199d8a73 Mon Sep 17 00:00:00 2001 From: Pedram Valiani Date: Thu, 31 Oct 2024 16:48:47 +0000 Subject: [PATCH 01/35] start setup for jumpto and readme --- src/app/components/JumpTo/README.md | 1 + src/app/components/JumpTo/index.tsx | 1 + 2 files changed, 2 insertions(+) create mode 100644 src/app/components/JumpTo/README.md create mode 100644 src/app/components/JumpTo/index.tsx diff --git a/src/app/components/JumpTo/README.md b/src/app/components/JumpTo/README.md new file mode 100644 index 00000000000..892ea015e1e --- /dev/null +++ b/src/app/components/JumpTo/README.md @@ -0,0 +1 @@ +## Description diff --git a/src/app/components/JumpTo/index.tsx b/src/app/components/JumpTo/index.tsx new file mode 100644 index 00000000000..8559dd1815f --- /dev/null +++ b/src/app/components/JumpTo/index.tsx @@ -0,0 +1 @@ +const JumpTo = () => {}; From 8f4fe7ad32fd492882529cff101e6715acff7b37 Mon Sep 17 00:00:00 2001 From: Pedram Valiani Date: Fri, 1 Nov 2024 08:49:02 +0000 Subject: [PATCH 02/35] Add component w/ tracking, props, semantic structure, heading and block mapping --- src/app/components/JumpTo/index.tsx | 91 ++++++++++++++++++++++++++++- 1 file changed, 90 insertions(+), 1 deletion(-) diff --git a/src/app/components/JumpTo/index.tsx b/src/app/components/JumpTo/index.tsx index 8559dd1815f..3cf09213a1a 100644 --- a/src/app/components/JumpTo/index.tsx +++ b/src/app/components/JumpTo/index.tsx @@ -1 +1,90 @@ -const JumpTo = () => {}; +/** @jsx jsx */ +import { useContext } from 'react'; +import { jsx } from '@emotion/react'; +import { ServiceContext } from '#contexts/ServiceContext'; +import useViewTracker from '#app/hooks/useViewTracker'; +import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler'; +import { EventTrackingMetadata } from '#app/models/types/eventTracking'; +import Heading from '#app/components/Heading'; + +interface JumpToHeading { + id: string; + title: string; +} + +interface JumpToProps { + jumpToData: { + model: { + blocks: Array<{ + id: string; + type: string; + model: { + blocks: Array<{ + type: string; + model: { + text?: string; + }; + }>; + }; + }>; + }; + }; + eventTrackingData?: EventTrackingMetadata; +} + +const JumpTo = ({ jumpToData, eventTrackingData }: JumpToProps) => { + const { translations } = useContext(ServiceContext); + const { jumpToText = 'Jump to' } = translations?.liveExperiencePage || {}; + + const viewRef = useViewTracker(eventTrackingData); + const clickTrackerHandler = useClickTrackerHandler({ + ...eventTrackingData, + identifier: 'JumpTo', + }); + + const headings: JumpToHeading[] = jumpToData?.model?.blocks + .map(block => { + const paragraphBlock = block.model.blocks.find( + b => b.type === 'paragraph', + ); + const fragmentBlock = paragraphBlock?.model?.blocks?.find( + b => b.type === 'fragment', + ); + const title = fragmentBlock?.model?.text || ''; + return title ? { id: block.id, title } : null; + }) + .filter(Boolean) as JumpToHeading[]; + + const headingId = 'jump-to-heading'; + + return ( +
+ + {jumpToText} + + +
+ ); +}; + +export default JumpTo; From 6db4b0c9d73c19dd0a996b492e90b13b5e4bf024 Mon Sep 17 00:00:00 2001 From: Pedram Valiani Date: Fri, 1 Nov 2024 08:50:30 +0000 Subject: [PATCH 03/35] note for service config added --- src/app/components/JumpTo/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/JumpTo/index.tsx b/src/app/components/JumpTo/index.tsx index 3cf09213a1a..2edff42ce9e 100644 --- a/src/app/components/JumpTo/index.tsx +++ b/src/app/components/JumpTo/index.tsx @@ -34,6 +34,7 @@ interface JumpToProps { const JumpTo = ({ jumpToData, eventTrackingData }: JumpToProps) => { const { translations } = useContext(ServiceContext); + // modify to suit updated config file for hindi w/ jumpto block added const { jumpToText = 'Jump to' } = translations?.liveExperiencePage || {}; const viewRef = useViewTracker(eventTrackingData); From 8ab8fe5d3d9c37d3621dc698796c0621bbb1f1ec Mon Sep 17 00:00:00 2001 From: Pedram Valiani Date: Fri, 1 Nov 2024 09:15:43 +0000 Subject: [PATCH 04/35] add WIP storybook story, code comms for areas to pair, metadata obj for stybk, WIP readme --- src/app/components/JumpTo/README.md | 13 ++++- src/app/components/JumpTo/index.stories.tsx | 63 +++++++++++++++++++++ src/app/components/JumpTo/index.tsx | 2 + src/app/components/JumpTo/metadata.json | 29 ++++++++++ 4 files changed, 106 insertions(+), 1 deletion(-) create mode 100644 src/app/components/JumpTo/index.stories.tsx create mode 100644 src/app/components/JumpTo/metadata.json diff --git a/src/app/components/JumpTo/README.md b/src/app/components/JumpTo/README.md index 892ea015e1e..5f2130805a2 100644 --- a/src/app/components/JumpTo/README.md +++ b/src/app/components/JumpTo/README.md @@ -1 +1,12 @@ -## Description +## Description - WORK IN PROGRESS + +The JumpTo component serves as an in-page navigation menu, similar to a table of contents, allowing users to quickly jump to specific sections within an article. This component renders an `H2` heading, a list of section titles as clickable `anchor` links, and groups them within a `navigation` region. When a link is clicked, the page scrolls down to the relevant section, identified by matching anchor `ids`. + +This component is typically used in articles where multiple sections are displayed, enhancing content accessibility by providing quick navigation options....blah blah blah + +## Props + +| Name | type | Description | +| ----------------- | --------------------- | ----------------------------------------------- | +| jumpToData | object | Contains article sections with titles and IDs | +| eventTrackingData | eventTrackingMetadata | Contains click and view tracking data for Piano | diff --git a/src/app/components/JumpTo/index.stories.tsx b/src/app/components/JumpTo/index.stories.tsx new file mode 100644 index 00000000000..86dfe2ac811 --- /dev/null +++ b/src/app/components/JumpTo/index.stories.tsx @@ -0,0 +1,63 @@ +import React from 'react'; + +import JumpTo from '.'; +import { StoryArgs } from '../../models/types/storybook'; +import metadata from './metadata.json'; +import readme from './README.md'; + +interface Props { + headings?: { id: string; title: string }[]; +} + +// can we simplify...? +const Component = ({ headings = [] }: Props) => { + const jumpToData = { + model: { + blocks: headings.map(heading => ({ + id: heading.id, + type: 'heading', + model: { + blocks: [ + { + type: 'paragraph', + model: { + blocks: [ + { + type: 'fragment', + model: { + text: heading.title, + }, + }, + ], + }, + }, + ], + }, + })), + }, + }; + + return ; +}; + +export default { + title: 'Components/JumpTo', + Component, + parameters: { + docs: { readme }, + metadata, + }, +}; + +// WIP - should pull titles from fixture +export const Example = (_: StoryArgs, globalArgs: Props) => { + const { + headings = [ + { id: 'heading-1', title: 'This is an article heading title - 1' }, + { id: 'heading-2', title: 'This is an article heading title - 2' }, + { id: 'heading-3', title: 'This is an article heading title - 3' }, + ], + } = globalArgs; + + return ; +}; diff --git a/src/app/components/JumpTo/index.tsx b/src/app/components/JumpTo/index.tsx index 2edff42ce9e..0de2f11a5d5 100644 --- a/src/app/components/JumpTo/index.tsx +++ b/src/app/components/JumpTo/index.tsx @@ -43,6 +43,7 @@ const JumpTo = ({ jumpToData, eventTrackingData }: JumpToProps) => { identifier: 'JumpTo', }); + // can we simplify the extraction process? const headings: JumpToHeading[] = jumpToData?.model?.blocks .map(block => { const paragraphBlock = block.model.blocks.find( @@ -58,6 +59,7 @@ const JumpTo = ({ jumpToData, eventTrackingData }: JumpToProps) => { const headingId = 'jump-to-heading'; + // check if this is semantically acceptable - a nav here for the list of titles seems a good idea return (
Date: Fri, 1 Nov 2024 11:08:58 +0000 Subject: [PATCH 05/35] update service config with placeholder, update translations type for article page jumpto, adjust code comments in jumpto source code --- src/app/components/JumpTo/index.tsx | 4 ++-- src/app/lib/config/services/hindi.ts | 3 +++ src/app/models/types/translations.ts | 3 +++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/components/JumpTo/index.tsx b/src/app/components/JumpTo/index.tsx index 0de2f11a5d5..6ab31ed6652 100644 --- a/src/app/components/JumpTo/index.tsx +++ b/src/app/components/JumpTo/index.tsx @@ -34,8 +34,8 @@ interface JumpToProps { const JumpTo = ({ jumpToData, eventTrackingData }: JumpToProps) => { const { translations } = useContext(ServiceContext); - // modify to suit updated config file for hindi w/ jumpto block added - const { jumpToText = 'Jump to' } = translations?.liveExperiencePage || {}; + // modify to suit updated config file for hindi w/ jumpto block added - fallback is english + const { jumpToText = 'Jump to' } = translations?.articlePage || {}; const viewRef = useViewTracker(eventTrackingData); const clickTrackerHandler = useClickTrackerHandler({ diff --git a/src/app/lib/config/services/hindi.ts b/src/app/lib/config/services/hindi.ts index 86a07b1e79a..4f0ce4b4382 100644 --- a/src/app/lib/config/services/hindi.ts +++ b/src/app/lib/config/services/hindi.ts @@ -87,6 +87,9 @@ export const service: DefaultServiceConfig = { audioPlayer: 'ऑडिया प्लेयर', videoPlayer: 'वीडियो प्लेयर', }, + articlePage: { + jumpTo: 'Jump to', // replace with Hindi translation later + }, liveExperiencePage: { liveLabel: 'लाइव', liveCoverage: 'लाइव कवरेज', diff --git a/src/app/models/types/translations.ts b/src/app/models/types/translations.ts index 570f05c47f5..b473f2f32f3 100644 --- a/src/app/models/types/translations.ts +++ b/src/app/models/types/translations.ts @@ -31,6 +31,9 @@ export interface Translations { audioPlayer: string; videoPlayer: string; }; + articlePage?: { + jumpTo: string; + }; liveExperiencePage: { liveLabel: string; liveCoverage: string; From 26b31308fbfbb7c8116102b28225141abdc4da1b Mon Sep 17 00:00:00 2001 From: Pedram Valiani Date: Fri, 1 Nov 2024 12:29:36 +0000 Subject: [PATCH 06/35] update code comments w/ aarons feedback --- src/app/components/JumpTo/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/components/JumpTo/index.tsx b/src/app/components/JumpTo/index.tsx index 6ab31ed6652..5dca9f3b3fe 100644 --- a/src/app/components/JumpTo/index.tsx +++ b/src/app/components/JumpTo/index.tsx @@ -59,7 +59,10 @@ const JumpTo = ({ jumpToData, eventTrackingData }: JumpToProps) => { const headingId = 'jump-to-heading'; - // check if this is semantically acceptable - a nav here for the list of titles seems a good idea + // check if this is semantically acceptable - a nav here for the list of titles seems a good idea but would we just use a span? + // use the Text component with the as prop to set it to whatever html we want - div? span? + // try inline link in place of anchor tag - might be more useful for styling + // add in classNames return (
Date: Fri, 1 Nov 2024 12:31:19 +0000 Subject: [PATCH 07/35] update headings to subheadlines --- src/app/components/JumpTo/index.stories.tsx | 31 +++++++++++++-------- src/app/components/JumpTo/index.tsx | 4 +-- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/app/components/JumpTo/index.stories.tsx b/src/app/components/JumpTo/index.stories.tsx index 86dfe2ac811..aa1f67d1f8b 100644 --- a/src/app/components/JumpTo/index.stories.tsx +++ b/src/app/components/JumpTo/index.stories.tsx @@ -6,16 +6,16 @@ import metadata from './metadata.json'; import readme from './README.md'; interface Props { - headings?: { id: string; title: string }[]; + subheadlines?: { id: string; title: string }[]; } // can we simplify...? -const Component = ({ headings = [] }: Props) => { +const Component = ({ subheadlines = [] }: Props) => { const jumpToData = { model: { - blocks: headings.map(heading => ({ - id: heading.id, - type: 'heading', + blocks: subheadlines.map(subheadline => ({ + id: subheadline.id, + type: 'subheadline', model: { blocks: [ { @@ -25,7 +25,7 @@ const Component = ({ headings = [] }: Props) => { { type: 'fragment', model: { - text: heading.title, + text: subheadline.title, }, }, ], @@ -52,12 +52,21 @@ export default { // WIP - should pull titles from fixture export const Example = (_: StoryArgs, globalArgs: Props) => { const { - headings = [ - { id: 'heading-1', title: 'This is an article heading title - 1' }, - { id: 'heading-2', title: 'This is an article heading title - 2' }, - { id: 'heading-3', title: 'This is an article heading title - 3' }, + subheadlines = [ + { + id: 'subheadline-1', + title: 'This is an article subheadline title - 1', + }, + { + id: 'subheadline-2', + title: 'This is an article subheadline title - 2', + }, + { + id: 'subheadline-3', + title: 'This is an article subheadline title - 3', + }, ], } = globalArgs; - return ; + return ; }; diff --git a/src/app/components/JumpTo/index.tsx b/src/app/components/JumpTo/index.tsx index 5dca9f3b3fe..da024a83915 100644 --- a/src/app/components/JumpTo/index.tsx +++ b/src/app/components/JumpTo/index.tsx @@ -44,7 +44,7 @@ const JumpTo = ({ jumpToData, eventTrackingData }: JumpToProps) => { }); // can we simplify the extraction process? - const headings: JumpToHeading[] = jumpToData?.model?.blocks + const subheadlines: JumpToHeading[] = jumpToData?.model?.blocks .map(block => { const paragraphBlock = block.model.blocks.find( b => b.type === 'paragraph', @@ -75,7 +75,7 @@ const JumpTo = ({ jumpToData, eventTrackingData }: JumpToProps) => {