Updated Note to be included in mdx

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;