From 4d6065949252ecf5aa7f3a384cc752174d51b7f5 Mon Sep 17 00:00:00 2001
From: Niklas Molnes Hole <nikasmh@hotmail.com>
Date: Fri, 23 Oct 2020 11:44:58 +0200
Subject: [PATCH 1/5] Fix #11358 by adding pre-wrap on code blocks

---
 lib/components/src/blocks/ArgsTable/ArgRow.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
index fdf95425cfdf..a02f84be8265 100644
--- a/lib/components/src/blocks/ArgsTable/ArgRow.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
@@ -41,6 +41,10 @@ const Description = styled.div(({ theme }) => ({
     margin: 0,
     display: 'inline-block',
   },
+
+  '& pre > code': {
+    whiteSpace: 'pre-wrap',
+  },
 }));
 
 const Type = styled.div<{ hasDescription: boolean }>(({ theme, hasDescription }) => ({

From 564cff33c15acb4abb4ab9dd240e4d92aa0763d1 Mon Sep 17 00:00:00 2001
From: Niklas Molnes Hole <nikasmh@hotmail.com>
Date: Fri, 23 Oct 2020 12:44:17 +0200
Subject: [PATCH 2/5] Add example for multiline propTypes code block comment

---
 .../cra-kitchen-sink/src/components/Container.js    | 11 ++++++++++-
 .../cra-kitchen-sink/src/stories/test.stories.mdx   | 13 ++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/examples/cra-kitchen-sink/src/components/Container.js b/examples/cra-kitchen-sink/src/components/Container.js
index efd894da18a1..af3f53831359 100644
--- a/examples/cra-kitchen-sink/src/components/Container.js
+++ b/examples/cra-kitchen-sink/src/components/Container.js
@@ -10,7 +10,16 @@ const Container = ({ children, title, age, isAmazing }) => (
 );
 
 Container.propTypes = {
-  /** The nodes to be rendered in the button */
+  /**
+   * The nodes to be rendered in the button
+   * 
+   * Example value:
+   * 
+   * ```
+   * <h1>Node 1</h1>
+   * <h2>Node 2</h2>
+   * ```
+   */
   children: PropTypes.node.isRequired,
   /** Show exclamation marks */
   isAmazing: PropTypes.bool,
diff --git a/examples/cra-kitchen-sink/src/stories/test.stories.mdx b/examples/cra-kitchen-sink/src/stories/test.stories.mdx
index 6d296277b347..97c896b2349a 100644
--- a/examples/cra-kitchen-sink/src/stories/test.stories.mdx
+++ b/examples/cra-kitchen-sink/src/stories/test.stories.mdx
@@ -1,7 +1,14 @@
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta, ArgsTable } from '@storybook/addon-docs/blocks';
+import Container from '../components/Container'
 
-<Meta title="Docs/Test" />
+<Meta title="Docs/Test" component={Container} />
 
 <Story name="NewStory123">
-  <h2> Hello </h2>
+  <Container>
+    <h1>Hello</h1>
+  </Container>
 </Story>
+
+## Arguments
+
+<ArgsTable story="NewStory123" />

From b9b360bb5cde244fadc4f0fcc44960c9d7cd8365 Mon Sep 17 00:00:00 2001
From: Niklas Molnes Hole <nikasmh@hotmail.com>
Date: Fri, 23 Oct 2020 12:44:37 +0200
Subject: [PATCH 3/5] Add example for multiline interface code block comment

---
 .../cra-ts-kitchen-sink/src/components/Button.tsx     | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/examples/cra-ts-kitchen-sink/src/components/Button.tsx b/examples/cra-ts-kitchen-sink/src/components/Button.tsx
index 0d3f77ead09b..a50f0cb33b48 100644
--- a/examples/cra-ts-kitchen-sink/src/components/Button.tsx
+++ b/examples/cra-ts-kitchen-sink/src/components/Button.tsx
@@ -4,7 +4,16 @@ export type Type = 'default' | 'action';
 
 interface Props {
   /**
-   * Click event handler
+   * Click event `handler`
+   * 
+   * Example function:
+   * 
+   * ```
+   * () => {
+   *   doThis();
+   * }
+   * ```
+   * 
    * @default null
    */
   onClick?: () => void;

From 919520f6c0eaa9dfc010ad85d13a3619c4c5b8f7 Mon Sep 17 00:00:00 2001
From: Niklas Molnes Hole <nikasmh@hotmail.com>
Date: Thu, 12 Aug 2021 17:07:51 +0200
Subject: [PATCH 4/5] Set smaller font-size on code blocks inside ArgRow

Setting smaller font-size on code blocks is also done at GitHub
---
 lib/components/src/blocks/ArgsTable/ArgRow.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
index a02f84be8265..03404f17ba61 100644
--- a/lib/components/src/blocks/ArgsTable/ArgRow.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
@@ -35,7 +35,10 @@ const Description = styled.div(({ theme }) => ({
     },
   },
 
-  code: codeCommon({ theme }),
+  code: {
+    ...codeCommon({ theme }),
+    fontSize: 12,
+  },
 
   '& code': {
     margin: 0,

From c7cd395f091f5da07d799d601c7463332185be9d Mon Sep 17 00:00:00 2001
From: Niklas Molnes Hole <nikasmh@hotmail.com>
Date: Sun, 15 Aug 2021 18:16:36 +0200
Subject: [PATCH 5/5] Specify font on code in ArgRow description

---
 lib/components/src/blocks/ArgsTable/ArgRow.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
index 03404f17ba61..e62aef714004 100644
--- a/lib/components/src/blocks/ArgsTable/ArgRow.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
@@ -38,6 +38,7 @@ const Description = styled.div(({ theme }) => ({
   code: {
     ...codeCommon({ theme }),
     fontSize: 12,
+    fontFamily: theme.typography.fonts.mono,
   },
 
   '& code': {