@financial-times/cp-content-pipeline-ui 7.0.2 → 7.1.1

package/src/components/RichText/BasicComponents.tsx

@@ -50,6 +50,10 @@ export const Strikethrough: React.FC<
   React.PropsWithChildren<ContentProps<ContentTree.Strikethrough>>
 > = (props) => <s>{props.children}</s>
 
+export const CccFallbackText: React.FC<
+  React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.CccFallbackText>>
+> = (props) => <div>{props.children}</div>
+
 export const TableRow: React.FC<
   React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.TableRow>>
 > = (props) => <tr>{props.children}</tr>

package/src/components/RichText/index.tsx

@@ -17,6 +17,7 @@ import Video from '../Video'
 import Table from '../Table'
 import Clip from '../Clip'
 import Paragraph from '../Paragraph'
+import CustomCodeComponent from '../CustomCodeComponent'
 
 import {
   List,
@@ -32,6 +33,7 @@ import {
   TableCaption,
   TableFooter,
   TableRow,
+  CccFallbackText,
 } from './BasicComponents'
 
 import type {
@@ -104,8 +106,10 @@ const componentMap: RichTextComponentMapRecord = {
   cite: Cite,
   blockquote: Blockquote,
   break: LineBreak,
+  'ccc-fallback-text': CccFallbackText,
   'clip-set': Clip,
   clip: Clip,
+  'custom-code-component': CustomCodeComponent,
   emphasis: Emphasis,
   flourish: Flourish,
   heading: Heading,

package/src/components/Workarounds.ts

@@ -2,6 +2,7 @@ import type { ContentTree } from '@financial-times/content-tree'
 import {
   ConceptFragment,
   TranscriptFragment,
+  CustomCodeComponentRichTextFragment,
 } from '@financial-times/cp-content-pipeline-client'
 import type { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
 import type {
@@ -188,3 +189,14 @@ export type Author = PartialToMaybe<
     concept?: ConceptFragment
   }
 >
+
+type CustomCodeComponentUI = Pick<
+  ContentTree.CustomCodeComponent,
+  'path' | 'versionRange' | 'id' | 'layoutWidth' | 'attributes' | 'type'
+>
+
+export type CustomCodeComponent = PartialToMaybeDeep<
+  CustomCodeComponentUI & {
+    body?: CustomCodeComponentRichTextFragment
+  }
+>

package/src/index.ts

@@ -6,6 +6,7 @@ export { default as Byline } from './components/Byline'
 export { default as Flourish } from './components/Flourish'
 export { default as Heading } from './components/Heading'
 export { default as ImageSet } from './components/ImageSet'
+export { default as CustomCodeComponent } from './components/CustomCodeComponent'
 export { default as Clip } from './components/Clip/template/component'
 export { Layout, LayoutContainer, LayoutSlot } from './components/Layout'
 export { default as LiveBlogBody } from './components/LiveBlogBody'
@@ -33,6 +34,7 @@ export {
   Strong,
   Strikethrough,
   Cite,
+  CccFallbackText,
 } from './components/RichText/BasicComponents'
 export {
   PresentationFlagsContext,

package/src/stories/Message.stories.scss

@@ -0,0 +1,5 @@
+$system-code: "cp-pipeline-ui-message-demo";
+@import "@financial-times/o-message/main";
+@import "./article-page.scss";
+
+@include oMessage();

package/src/stories/Message.stories.tsx

@@ -0,0 +1,29 @@
+import Message from '../components/Message'
+import type { MessageProps } from '../components/Message'
+import React from 'react'
+import './Message.stories.scss'
+
+export default {
+  title: 'Message',
+  component: Message,
+  content: {},
+}
+
+const noticeInformArgs: MessageProps = {
+  id: '',
+  type: 'notice',
+  state: 'inform',
+}
+
+export const noticeInformDefault = () => <Message {...noticeInformArgs} />
+
+const noticeInformCustomTextArgs: MessageProps = {
+  id: '',
+  type: 'notice',
+  state: 'inform',
+  text: 'This is a custom message',
+}
+
+export const noticeInformCustomText = () => (
+  <Message {...noticeInformCustomTextArgs} />
+)