temp: conditional to if

Author: jamiehenson

src/components/Layout/MDXWrapper.tsx

@@ -5,7 +5,7 @@ import '../../styles/global.css';
 import PageTitle from '../PageTitle';
 import { MarkdownProvider } from '../Markdown';
 import Article from '../Article';
-import Conditional from './mdx/Conditional';
+import If from './mdx/If';
 import CodeBlock from './mdx/CodeBlock';
 
 type PageContextType = {
@@ -23,7 +23,7 @@ const MDXWrapper: React.FC<MDXWrapperProps> = ({ children, pageContext }) => {
 
   return (
     <Article>
-      <MarkdownProvider extraComponents={{ Conditional, CodeBlock }}>
+      <MarkdownProvider components={{ If, CodeBlock }}>
         {title && <PageTitle>{title}</PageTitle>}
         {children}
       </MarkdownProvider>

src/components/Layout/mdx/Conditional.tsx renamed to src/components/Layout/mdx/If.tsx

@@ -2,17 +2,19 @@ import React from 'react';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import { LanguageKey } from 'src/data/languages/types';
 
-interface ConditionalProps {
+interface IfProps {
   lang: LanguageKey;
+  className?: string;
   children: React.ReactNode;
+  as?: React.ElementType;
 }
 
-const Conditional: React.FC<ConditionalProps> = ({ lang, children }) => {
+const If: React.FC<IfProps> = ({ lang, children, className, as: Component = 'div' }) => {
   const { activePage } = useLayoutContext();
   const { language } = activePage;
   const splitLang = lang.split(',');
 
   return splitLang.includes(language) ? children : null;
 };
 
-export default Conditional;
+export default If;

src/components/Markdown/MarkdownProvider.tsx

@@ -89,7 +89,7 @@ const Pre: FC<JSX.IntrinsicElements['pre']> = ({ children }) => {
   );
 };
 
-const components = {
+const defaultComponents = {
   h1: H1,
   h2: H2,
   h3: H3,
@@ -103,9 +103,9 @@ const components = {
 
 export const MarkdownProvider = ({
   children,
-  extraComponents,
+  components,
 }: {
   children: React.ReactNode;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  extraComponents?: Record<string, React.FC<any>>;
-}) => <MDXProvider components={{ ...components, ...extraComponents }}>{children}</MDXProvider>;
+  components: Record<string, React.FC<any>>;
+}) => <MDXProvider components={{ ...defaultComponents, ...components }}>{children}</MDXProvider>;

src/pages/docs/chat/index.mdx

@@ -18,6 +18,14 @@ Ably Chat provides the following key features:
 - [Typing indicators](#typing)
 - [Room reactions](#reactions)
 
+<If lang="javascript,react,swift">
+  start
+  <If lang="javascript">hello matey</If>
+  <If lang="react">hello pal</If>
+  <If lang="swift">hello sir</If>
+  end
+</If>
+
 ### Rooms and messages
 
 [Rooms](/docs/chat/rooms) are used to organize and separate your users and chat messages into 'chat rooms'. They are the entry object into chat and provide access to all other chat features, such as messages, online status, and typing indicators.