fix: Add paragraph prop for bottom margin

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -36,7 +36,7 @@ export default {
 export const InHeader = () => (
   <MemoryRouter>
     <h2>Standard breadcrumbs</h2>
-    <Typography>
+    <Typography paragraph>
       Underlined pages are links. This should show a hierarchical relationship.
     </Typography>
 
@@ -61,14 +61,14 @@ export const OutsideOfHeader = () => {
   const open = Boolean(anchorEl);
   return (
     <MemoryRouter>
-      <Typography>
+      <Typography paragraph>
         It might be the case that you want to keep your breadcrumbs outside of
         the header. In that case, they should be positioned above the title of
         the page.
       </Typography>
 
       <h2>Standard breadcrumbs</h2>
-      <Typography>
+      <Typography paragraph>
         Underlined pages are links. This should show a hierarchical
         relationship.
       </Typography>
@@ -82,7 +82,7 @@ export const OutsideOfHeader = () => {
       </Breadcrumbs>
 
       <h2>Hidden breadcrumbs</h2>
-      <Typography>
+      <Typography paragraph>
         Use this when you have more than three breadcrumbs. When user clicks on
         ellipses, expand the breadcrumbs out.
       </Typography>
@@ -96,7 +96,7 @@ export const OutsideOfHeader = () => {
       </Breadcrumbs>
 
       <h2>Layered breadcrumbs</h2>
-      <Typography>
+      <Typography paragraph>
         Use this when you want to show alternative breadcrumbs on the same
         hierarchical level.
       </Typography>