From 3131d400f80cf0391bdc0f5027b7f828fe1e4d04 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@Gmail.com>
Date: Wed, 28 Aug 2019 12:46:38 -0500
Subject: [PATCH] fix: paragraph width / math (#374)

* fix: paragraph width / math

* chore: remove test styles and fix broken image on demo page

* fix: right padding should be 16 not 32

* fix: aside demo html

* fix: offset for aside column

* chore: update paragraph row class

* fix: aside
---
 .../example/src/pages/components/Aside.mdx    | 12 +++----
 packages/example/src/pages/demo/index.mdx     | 32 +++++++++++++++++--
 .../src/components/Aside/Aside.module.scss    |  5 ++-
 .../components/markdown/Markdown.module.scss  | 17 +++++-----
 .../src/components/markdown/P.js              | 15 ++++++---
 5 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/packages/example/src/pages/components/Aside.mdx b/packages/example/src/pages/components/Aside.mdx
index e29265ccd..96920d870 100644
--- a/packages/example/src/pages/components/Aside.mdx
+++ b/packages/example/src/pages/components/Aside.mdx
@@ -6,14 +6,14 @@ title: Aside
 
 The `<Aside>` component is a wrapper component that adds styling to make the text display smaller than the default body text; using `body-long-01` and adds the correct top border styles.
 
-It should only be used within a `<Column>` component with specific parameters. `<Column colMd={2} colLg={3} offsetMd={1} noGutterSm>`
+It should only be used within a `<Column>` component with specific parameters. `<Column colMd={2} colLg={3} offsetMd={1}>`
 
 </PageDescription>
 
 ## Example
 
 <Row>
-<Column colMd={5} colLg={7}>
+<Column colMd={5} colLg={8}>
 
 It is more important than ever that we own our own ethos, make palpable our brand values, and incorporate an instantly identifiable IBMness in everything we do.
 
@@ -24,7 +24,7 @@ It is more important than ever that we own our own ethos, make palpable our bran
 Aesthetic is defined as the philosophical theory or set of principles governing outward appearance or actions.
 
 </Column>
-<Column colMd={2} colLg={3} offsetMd={1} noGutterSm>
+<Column colMd={3} colLg={3}>
 <Aside>
 
 **Good design is always good design.**
@@ -39,11 +39,9 @@ What we borrow from our own design history is not a mid-century aesthetic in sty
 ## Code
 
 ```jsx path=components/Aside/Aside.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Aside
-<Column colMd={2} colLg={3} offsetMd={1} noGutterSm>
+<Column colMd={2} colLg={3} offsetMd={1}>
   <Aside>
-    **Good design is always good design.**
-
-    What we borrow from our own design
+    **Good design is always good design.** What we borrow from our own design
     history is not a mid-century aesthetic in stylistic terms, but the modernist
     attitudes and approach used at the time.
   </Aside>
diff --git a/packages/example/src/pages/demo/index.mdx b/packages/example/src/pages/demo/index.mdx
index 93cfd6317..41122ea66 100644
--- a/packages/example/src/pages/demo/index.mdx
+++ b/packages/example/src/pages/demo/index.mdx
@@ -16,7 +16,33 @@ This page is meant to demonstrate some of the components in action. You can chec
 </AnchorLinks>
 
 <Row>
-<Column colMd={5} colLg={7}>
+<Column colMd={4} colLg={4}>
+
+![Grid Example](../components/images/Article_05.png)
+
+</Column>
+<Column colMd={4} colLg={4}>
+
+![Grid Example](../components/images/Article_05.png)
+
+</Column>
+<Column colMd={4} colLg={4}>
+
+![Grid Example](../components/images/Article_05.png)
+
+</Column>
+</Row>
+
+<PageDescription>
+
+Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
+
+</PageDescription>
+
+Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
+
+<Row>
+<Column colMd={5} colLg={8}>
 
 Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
 
@@ -26,7 +52,7 @@ Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pin
 IBMers believe in progress—that application of intelligence, reason and science can improve business, society and the human condition.
 
 </Column>
-<Column colMd={2} colLg={3} offsetLg={1} offsetMd={1} noGutterSm>
+<Column colMd={2} colLg={3} offsetMd={1}>
 <Aside>
 
 <p><strong>Good design is always<br />good design.</strong></p>
@@ -66,7 +92,7 @@ Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pin
 
 ## Images
 
-![Large blocky illustration](../images/large-image.png)
+![Large blocky illustration](../../images/large-image.png)
 
 ## Videos
 
diff --git a/packages/gatsby-theme-carbon/src/components/Aside/Aside.module.scss b/packages/gatsby-theme-carbon/src/components/Aside/Aside.module.scss
index f7dbc81ae..f1e5b428f 100644
--- a/packages/gatsby-theme-carbon/src/components/Aside/Aside.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/Aside/Aside.module.scss
@@ -3,7 +3,10 @@
   position: relative;
   padding-top: $spacing-04;
   top: -$spacing-04;
-  padding-right: 26%; //spacing values came from IDL site design
+
+  @include carbon--breakpoint('lg') {
+    padding-right: 26%; //spacing values came from IDL site design
+  }
 }
 
 .aside:before {
diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss b/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss
index a8f0421f3..b6aad784b 100644
--- a/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss
@@ -1,18 +1,20 @@
 //---------------------------------------
 // P
 //---------------------------------------
+.paragraph-row {
+  margin-bottom: $spacing-06;
+}
+
 .paragraph {
   @include carbon--type-style('body-long-02');
-  margin-bottom: $spacing-06;
 
   @include carbon--breakpoint('md') {
-    padding-right: $spacing-07;
+    padding-right: $spacing-05;
   }
 }
 
 // Responsive by default
 .paragraph--responsive {
-  margin-left: -$spacing-05;
   padding-left: $spacing-05;
 
   // 8 col
@@ -21,12 +23,13 @@
   }
 }
 
-// If paragraph is inside a user specified row then allow the grid code to set the width
-:global(.#{$prefix}--row) .paragraph {
+// If paragraph is inside a user specified row then allow the grid code to set the width and padding
+:global(.#{$prefix}--row .#{$prefix}--row) .paragraph {
   width: 100%;
+  padding-left: 0;
 
   @include carbon--breakpoint('md') {
-    padding-right: $spacing-07;
+    padding-right: 0;
   }
 }
 
@@ -113,8 +116,6 @@
 
 // If quote is inside a user specified row then allow the grid code to set the width
 :global(.#{$prefix}--row) .blockquote .paragraph {
-  padding-right: 0;
-
   @include carbon--breakpoint('md') {
     width: 100%;
   }
diff --git a/packages/gatsby-theme-carbon/src/components/markdown/P.js b/packages/gatsby-theme-carbon/src/components/markdown/P.js
index 4c797ffd7..e0359efe5 100644
--- a/packages/gatsby-theme-carbon/src/components/markdown/P.js
+++ b/packages/gatsby-theme-carbon/src/components/markdown/P.js
@@ -1,8 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { Row } from '../Grid';
 
-import { paragraph, paragraphResponsive } from './Markdown.module.scss';
+import {
+  paragraph,
+  paragraphResponsive,
+  paragraphRow,
+} from './Markdown.module.scss';
 
 export default class P extends React.Component {
   static propTypes = {
@@ -28,9 +33,11 @@ export default class P extends React.Component {
     });
 
     return (
-      <p className={paragraphClasses} {...rest}>
-        {children}
-      </p>
+      <Row className={paragraphRow}>
+        <p className={paragraphClasses} {...rest}>
+          {children}
+        </p>
+      </Row>
     );
   }
 }