@financial-times/cp-content-pipeline-ui 7.11.1 → 8.0.0

package/src/components/content-tree/Clip/test/__snapshots__/snapshot.spec.tsx.snap

@@ -30,7 +30,9 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
           data-trackable=\\"toggle-open-close\\"
           class=\\"o-expander__toggle o-expander__toggle-empty\\"
         >
-          <span class=\\"o-expander__visually-hidden\\">Show video info</span>
+          <span class=\\"o-expander__visually-hidden o3-type-detail\\"
+            >Show video info</span
+          >
         </button>
         <div class=\\"o-expander__content video-info\\"></div>
       </div>
@@ -98,7 +100,9 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
           data-trackable=\\"toggle-open-close\\"
           class=\\"o-expander__toggle o-expander__toggle-empty\\"
         >
-          <span class=\\"o-expander__visually-hidden\\">Show video info</span>
+          <span class=\\"o-expander__visually-hidden o3-type-detail\\"
+            >Show video info</span
+          >
         </button>
         <div class=\\"o-expander__content video-info\\"></div>
       </div>
@@ -136,18 +140,23 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
           data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video description&lt;/span&gt;\\"
         >
           <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-            <span class=\\"o-expander__visually-hidden\\"
+            <span class=\\"o-expander__visually-hidden o3-type-detail\\"
               >Show video description</span
             >
           </button>
           <div class=\\"o-expander__content\\">
             <div class=\\"video-description\\">
               <h4 class=\\"video-description__title\\">Video description</h4>
-              <p class=\\"video-description__text\\">Video description</p>
+              <p class=\\"video-description__text o3-type-detail\\">
+                Video description
+              </p>
             </div>
           </div>
         </div>
-        <div data-cp-clip-caption=\\"true\\" class=\\"cp-clip__caption\\">
+        <div
+          data-cp-clip-caption=\\"true\\"
+          class=\\"cp-clip__caption o3-editorial-typography-caption\\"
+        >
           caption text<!-- -->
           <span class=\\"cp-clip__credit\\"
             >©
@@ -190,7 +199,9 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
         data-trackable=\\"toggle-open-close\\"
         class=\\"o-expander__toggle o-expander__toggle-empty\\"
       >
-        <span class=\\"o-expander__visually-hidden\\">Show video info</span>
+        <span class=\\"o-expander__visually-hidden o3-type-detail\\"
+          >Show video info</span
+        >
       </button>
       <div class=\\"o-expander__content video-info\\"></div>
     </div>
@@ -256,7 +267,9 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
         data-trackable=\\"toggle-open-close\\"
         class=\\"o-expander__toggle o-expander__toggle-empty\\"
       >
-        <span class=\\"o-expander__visually-hidden\\">Show video info</span>
+        <span class=\\"o-expander__visually-hidden o3-type-detail\\"
+          >Show video info</span
+        >
       </button>
       <div class=\\"o-expander__content video-info\\"></div>
     </div>
@@ -294,18 +307,23 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
         data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video description&lt;/span&gt;\\"
       >
         <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-          <span class=\\"o-expander__visually-hidden\\"
+          <span class=\\"o-expander__visually-hidden o3-type-detail\\"
             >Show video description</span
           >
         </button>
         <div class=\\"o-expander__content\\">
           <div class=\\"video-description\\">
             <h4 class=\\"video-description__title\\">Video description</h4>
-            <p class=\\"video-description__text\\">Video description</p>
+            <p class=\\"video-description__text o3-type-detail\\">
+              Video description
+            </p>
           </div>
         </div>
       </div>
-      <div data-cp-clip-caption=\\"true\\" class=\\"cp-clip__caption\\">
+      <div
+        data-cp-clip-caption=\\"true\\"
+        class=\\"cp-clip__caption o3-editorial-typography-caption\\"
+      >
         caption text<!-- -->
         <span class=\\"cp-clip__credit\\"
           >©
@@ -352,7 +370,9 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
             data-trackable=\\"toggle-open-close\\"
             class=\\"o-expander__toggle o-expander__toggle-empty\\"
           >
-            <span class=\\"o-expander__visually-hidden\\">Show video info</span>
+            <span class=\\"o-expander__visually-hidden o3-type-detail\\"
+              >Show video info</span
+            >
           </button>
           <div class=\\"o-expander__content video-info\\"></div>
         </div>
@@ -425,7 +445,9 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
             data-trackable=\\"toggle-open-close\\"
             class=\\"o-expander__toggle o-expander__toggle-empty\\"
           >
-            <span class=\\"o-expander__visually-hidden\\">Show video info</span>
+            <span class=\\"o-expander__visually-hidden o3-type-detail\\"
+              >Show video info</span
+            >
           </button>
           <div class=\\"o-expander__content video-info\\"></div>
         </div>
@@ -469,18 +491,23 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
               data-trackable=\\"toggle-open-close\\"
               class=\\"o-expander__toggle\\"
             >
-              <span class=\\"o-expander__visually-hidden\\"
+              <span class=\\"o-expander__visually-hidden o3-type-detail\\"
                 >Show video description</span
               >
             </button>
             <div class=\\"o-expander__content\\">
               <div class=\\"video-description\\">
                 <h4 class=\\"video-description__title\\">Video description</h4>
-                <p class=\\"video-description__text\\">Video description</p>
+                <p class=\\"video-description__text o3-type-detail\\">
+                  Video description
+                </p>
               </div>
             </div>
           </div>
-          <div data-cp-clip-caption=\\"true\\" class=\\"cp-clip__caption\\">
+          <div
+            data-cp-clip-caption=\\"true\\"
+            class=\\"cp-clip__caption o3-editorial-typography-caption\\"
+          >
             caption text<!-- -->
             <span class=\\"cp-clip__credit\\"
               >©
@@ -524,7 +551,9 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
         data-trackable=\\"toggle-open-close\\"
         class=\\"o-expander__toggle o-expander__toggle-empty\\"
       >
-        <span class=\\"o-expander__visually-hidden\\">Show video info</span>
+        <span class=\\"o-expander__visually-hidden o3-type-detail\\"
+          >Show video info</span
+        >
       </button>
       <div class=\\"o-expander__content video-info\\"></div>
     </div>
@@ -572,14 +601,14 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
         data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video description&lt;/span&gt;\\"
       >
         <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-          <span class=\\"o-expander__visually-hidden\\"
+          <span class=\\"o-expander__visually-hidden o3-type-detail\\"
             >Show video description</span
           >
         </button>
         <div class=\\"o-expander__content\\">
           <div class=\\"video-description\\">
             <h4 class=\\"video-description__title\\">Video description</h4>
-            <p class=\\"video-description__text\\">
+            <p class=\\"video-description__text o3-type-detail\\">
               Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio
               quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt
               sagittis sapien vehicula vitae.
@@ -587,7 +616,10 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
           </div>
         </div>
       </div>
-      <div data-cp-clip-caption=\\"true\\" class=\\"cp-clip__caption\\">
+      <div
+        data-cp-clip-caption=\\"true\\"
+        class=\\"cp-clip__caption o3-editorial-typography-caption\\"
+      >
         Aenean lobortis volutpat nunc vitae elementum
       </div>
     </div>
@@ -628,7 +660,9 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
           data-trackable=\\"toggle-open-close\\"
           class=\\"o-expander__toggle o-expander__toggle-empty\\"
         >
-          <span class=\\"o-expander__visually-hidden\\">Show video info</span>
+          <span class=\\"o-expander__visually-hidden o3-type-detail\\"
+            >Show video info</span
+          >
         </button>
         <div class=\\"o-expander__content video-info\\"></div>
       </div>
@@ -666,18 +700,23 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
           data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video description&lt;/span&gt;\\"
         >
           <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-            <span class=\\"o-expander__visually-hidden\\"
+            <span class=\\"o-expander__visually-hidden o3-type-detail\\"
               >Show video description</span
             >
           </button>
           <div class=\\"o-expander__content\\">
             <div class=\\"video-description\\">
               <h4 class=\\"video-description__title\\">Video description</h4>
-              <p class=\\"video-description__text\\">Video description</p>
+              <p class=\\"video-description__text o3-type-detail\\">
+                Video description
+              </p>
             </div>
           </div>
         </div>
-        <div data-cp-clip-caption=\\"true\\" class=\\"cp-clip__caption\\">
+        <div
+          data-cp-clip-caption=\\"true\\"
+          class=\\"cp-clip__caption o3-editorial-typography-caption\\"
+        >
           caption text<!-- -->
           <span class=\\"cp-clip__credit\\"
             >©

package/src/components/content-tree/Heading/index.tsx

@@ -9,11 +9,23 @@ const Heading: React.FC<
 
   switch (props.content.level) {
     case 'chapter':
-      return <h2 className="n-content-heading-2">{props.children}</h2>
+      return (
+        <h2 className="n-content-heading-2 o3-editorial-typography-chapter">
+          {props.children}
+        </h2>
+      )
     case 'subheading':
-      return <h3 className="n-content-heading-3">{props.children}</h3>
+      return (
+        <h3 className="n-content-heading-3 o3-editorial-typography-subheading">
+          {props.children}
+        </h3>
+      )
     case 'label':
-      return <h5 className="n-content-heading-5">{props.children}</h5>
+      return (
+        <h5 className="n-content-heading-5 o3-editorial-typography-label">
+          {props.children}
+        </h5>
+      )
   }
 }
 

package/src/components/content-tree/ImageSet/index.tsx

@@ -264,7 +264,7 @@ const ImageSet: React.FC<ImageSetProps> = (props) => {
           </picture>
         </ImageSetOverrideWrapper>
         {(imageSet.picture.caption || imageSet.picture.credit) && (
-          <figcaption className="n-content-picture__caption">
+          <figcaption className="n-content-picture__caption o3-editorial-typography-caption">
             <span>{imageSet.picture.caption}</span>
             <span>
               {imageSet.picture.caption ? ' ' : ''}

package/src/components/content-tree/Pullquote/index.tsx

@@ -14,16 +14,20 @@ const Pullquote: React.FC<React.PropsWithChildren<PullquoteProps>> = ({
 
   return (
     <blockquote
-      className={classnames('n-content-pullquote', {
-        'n-content-pullquote--with-image': hasChildren,
-        'n-content-pullquote--no-image': !hasChildren,
-      })}
+      className={classnames(
+        'n-content-pullquote',
+        'o3-editorial-typography-pullquote',
+        {
+          'n-content-pullquote--with-image': hasChildren,
+          'n-content-pullquote--no-image': !hasChildren,
+        }
+      )}
       aria-hidden="true"
     >
-      <div className="n-content-pullquote__content">
-        <p>{text}</p>
-        <footer className="n-content-pullquote__footer">{source}</footer>
-      </div>
+      <p>{text}</p>
+      <footer className="o3-editorial-typography-pullquote__author">
+        {source}
+      </footer>
 
       {children}
     </blockquote>

package/src/components/content-tree/Recommended/index.tsx

@@ -29,7 +29,9 @@ const Recommended: React.FC<RecommendedProps> = ({
       data-component="recommended"
     >
       {!isInLiveBlog && (
-        <p className="n-content-recommended__title">{heading}</p>
+        <p className="n-content-recommended__title o3-type-body-highlight">
+          {heading}
+        </p>
       )}
       <Teaser
         modifiers={isInLiveBlog ? ['post'] : ['stacked']}

package/src/stories/BackToTop.stories.tsx

@@ -319,7 +319,7 @@ const Template: React.FC<PropsWithChildren> = ({ children }) => {
           </p>
         </section>
         <section id="footer">
-          <a onClick={handleClick} className="o-button o-button-primary">
+          <a onClick={handleClick} className="o3-button o3-button-primary">
             GO UP
           </a>
           <h3>From here button should be stick there</h3>

package/src/stories/Clip.stories.tsx

@@ -39,7 +39,7 @@ const ArticleWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
         style={{ position: 'relative' }}
       >
         <div
-          className="article__content-body n-content-body js-article__content-body"
+          className="article__content-body n-content-body js-article__content-body o3-type-body-content-base"
           data-attribute="article-content-body"
         >
           <p>
@@ -184,7 +184,7 @@ const ClipStory = (args: ClipProps) => {
   }, [])
   return (
     <ArticleWrapper>
-      <div className="n-content-body">
+      <div className="n-content-body o3-type-body-content-base">
         <ClipServer {...args} />
       </div>
     </ArticleWrapper>

package/src/stories/Expander.stories.tsx

@@ -262,7 +262,7 @@ const LiveBLogWrapper: React.FC<ArgsType> = (args) => {
           style={{ position: 'relative' }}
         >
           <div
-            className="article__content-body n-content-body js-article__content-body"
+            className="article__content-body n-content-body js-article__content-body o3-type-body-content-base"
             data-attribute="article-content-body"
           >
             <LiveBlogPostWrapper {...args} id="111"></LiveBlogPostWrapper>
@@ -290,7 +290,7 @@ const LiveBlogPostWrapper = (args: ArgsType) => {
   }, [])
   return (
     <article id={args.id}>
-      <div className="n-content-body">
+      <div className="n-content-body o3-type-body-content-base">
         <div
           data-trackable="truncated-post"
           data-trackable-context-post="1234"

package/src/stories/LiveBlogPost.stories.tsx

@@ -24,7 +24,6 @@ const args: Omit<LiveBlogPostProps, 'byline'> = {
   body: '', // cp-content-pipeline
   publishedTimestamp: '', // Remove once wordpress is no longer in use
   publishedDate: '2024-02-16T14:24:00',
-  isBreakingNews: false, // Remove once wordpress is no longer in use
   articleUrl: '',
   showShareButtons: true,
   showShareLinkButton: true,

package/src/stories/article-page.scss

@@ -10,23 +10,13 @@ figure {
     margin: 0 !important;
 }
 
-$o-brand: 'core';
-$o-typography-load-fonts: false;
-@import "@financial-times/o-typography/main";
-@import '@financial-times/o-normalise/main';
 @import '@financial-times/o-grid/main';
-@import '@financial-times/o-icons/main';
-@import "@financial-times/o-colors/main";
-@import "@financial-times/o-spacing/main";
+@import '@financial-times/o3-foundation/css/core.css';
 @import "@financial-times/o-teaser/main";
+@import "@financial-times/o3-editorial-typography/css/core.css";
 // HACK: n-content-body _should not_ include n-ui-foundations
 $n-ui-foundations-is-silent: true;
 @import '@financial-times/cp-content-pipeline-styles/main';
-// Load fonts for demos that we rely on being in the consuming apps
-@import '@financial-times/o-fonts/main';
-@include oFonts($opts: ('recommended': true));
-
-@include oNormalise(('body': ('font-smoothing')));
 
 .article__media {
     margin-bottom: 20px;
@@ -37,17 +27,9 @@ $n-ui-foundations-is-silent: true;
     }
 }
 
-.n-content-body>.n-content-blockquote,
-.n-content-body>p {
-    @include oTypographySans($scale: (default: 1,
-            XL: 2),
-        $line-height: 1.6,
-        $include-font-family: false);
-}
-
 //Give a background to responsive graphics so they appear above sticky elements
 .n-content-picture {
-    background-color: oColorsByUsecase(page, background);
+    background-color: var(--o3-color-use-case-page-background);
 }
 
 //Full bleed elements - amend the positioning to match grid
@@ -142,7 +124,7 @@ $n-ui-foundations-is-silent: true;
     }
 
     .article__content {
-        margin-bottom: oSpacingByName('s6');
+        margin-bottom: var(--o3-spacing-s);
         grid-area: content;
         max-width: 700px;
         width: 100%;
@@ -153,10 +135,6 @@ $n-ui-foundations-is-silent: true;
         }
     }
 
-    .article__content-body {
-        @include oNormaliseClearfix();
-    }
-
     .article__right {
         grid-area: rhr-top;
         margin: 0 auto;
@@ -169,7 +147,7 @@ $n-ui-foundations-is-silent: true;
         z-index: 1;
 
         >.sidebar-advert {
-            margin-bottom: oSpacingByName('s6');
+            margin-bottom: var(--o3-spacing-s);
         }
 
         >.sidebar-advert.o-ads-sticky {
@@ -204,8 +182,8 @@ $n-ui-foundations-is-silent: true;
     }
 
     .article-tools {
-        margin-bottom: oSpacingByName('s8');
-        padding: oSpacingByName('s6') 0 oSpacingByName('s6') 0;
+        margin-bottom: var(--o3-spacing-m);
+        padding: var(--o3-spacing-s) 0 var(--o3-spacing-s) 0;
         grid-area: tools;
         border-bottom: 1px solid #ccc1b7;
         border-top: 1px solid #ccc1b7;
@@ -246,7 +224,7 @@ $n-ui-foundations-is-silent: true;
         &:before {
             content: '';
             position: absolute;
-            background: oColorsByName('black-5');
+            background: var(--o3-color-palette-black-5);
             width: 100vw;
             margin-left: -50vw;
             left: 50%;
@@ -322,7 +300,6 @@ $desktop-breakpoint: 980px;
     display: none;
 }
 
-@include oIcons($opts: ('icons': ('warning-alt')));
 @include oTeaser(
 	$opts: (
 		'elements': (
@@ -341,4 +318,4 @@ $desktop-breakpoint: 980px;
 			'package'
 		)
 	)
-);
+);