Updated Note to be included in mdx

packages/website/mdx/guides/page-template.mdx

@@ -1,6 +1,6 @@
 # Sol-coverage
 
-Sol-coverage uses transaction traces in order to figure out which lines of Solidity source code have been covered by your tests. In order for it to gather these traces, you must add the `CoverageSubprovider` to the [ProviderEngine](https://github.com/MetaMask/provider-engine) instance you use when running your Solidity tests. If you're unfamiliar with `ProviderEngine`, please read the [Web3 Provider explained](https://0x.org/wiki#Web3-Provider-Explained) wiki article.
+Sol-coverage <Note heading="Test note">This is a side-info callout used to explain things a little more when needed</Note> uses transaction traces in order to figure out which lines of Solidity source code have been covered by your tests. In order for it to gather these traces, you must add the `CoverageSubprovider` to the [ProviderEngine](https://github.com/MetaMask/provider-engine) instance you use when running your Solidity tests. If you're unfamiliar with `ProviderEngine`, please read the [Web3 Provider explained](https://0x.org/wiki#Web3-Provider-Explained) wiki article.
 
 The CoverageSubprovider eavesdrops on the `eth_sendTransaction` and `eth_call` RPC calls and collects traces after each call using `debug_traceTransaction`. `eth_call`'s' don't generate traces - so we take a snapshot, re-submit it as a transaction, get the trace and then revert the snapshot.
 

packages/website/ts/components/docs/mdx/note.tsx

@@ -1,24 +1,29 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Heading, Paragraph } from 'ts/components/text';
 import { colors } from 'ts/style/colors';
 
 export interface INoteProps {
-    heading: string;
+    children?: React.ReactNode;
     description?: string;
+    heading?: string;
 }
 
-export const Note: React.FC<INoteProps> = props => (
+export const Note: React.FC<INoteProps> = ({ children, description, heading }) => (
     <NoteWrapper>
-        <Heading asElement="h4" color={colors.brandDark} size={17} marginBottom="6px">
-            {props.heading}
-        </Heading>
-        <Description>{props.description}</Description>
+        {heading && <NoteHeading>{heading}</NoteHeading>}
+        <Description>{description || children}</Description>
     </NoteWrapper>
 );
 
-const NoteWrapper = styled.div`
+const NoteHeading = styled.strong`
+    display: block;
+    font-size: 17px,
+    margin-bottom: 10px;
+    color: ${colors.brandDark};
+`;
+
+const NoteWrapper = styled.span`
     background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;
     padding: 20px 14px;
@@ -28,7 +33,7 @@ const NoteWrapper = styled.div`
     margin-bottom: 30px;
 `;
 
-const Description = styled(Paragraph)`
+const Description = styled.span`
     font-size: 0.88rem;
     margin-bottom: 0;
     line-height: 1.4;

packages/website/ts/pages/docs/page.tsx

@@ -13,6 +13,7 @@ import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
 import { InlineCode } from 'ts/components/docs/mdx/inline_code';
 import { InlineLink } from 'ts/components/docs/mdx/inline_link';
 import { NewsletterWidget } from 'ts/components/docs/mdx/newsletter_widget';
+import { Note } from 'ts/components/docs/mdx/note';
 import { Notification } from 'ts/components/docs/mdx/notification';
 import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
 import { Table } from 'ts/components/docs/mdx/table';
@@ -153,5 +154,6 @@ const mdxComponents = {
     Animation,
     CodeTabs,
     NewsletterWidget,
+    Note,
     Notification,
 };

packages/website/ts/utils/algolia_meta.json

@@ -91,4 +91,4 @@
         "path": "tools/ethereum-types/v2.1.4/reference.mdx",
         "versions": ["v2.1.4"]
     }
-}
+}