refactor: added sources for utilities

src/styles/utilities.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import { Meta, Story, Canvas, ArgsTable, Source } from '@storybook/addon-docs'
 import * as styles from './spacing'
 import { cx } from '@linaria/core'
 import { RenderHtmlMarkup } from '../storybook/render-html-markup'
@@ -74,7 +74,10 @@ This is best explained with some examples and varaible values below;
   </Story>
 </Canvas>
 
-<RenderHtmlMarkup component="Utilities" story="Margin" />
+<Source language="html" dark={true} code={`
+<div class="el-mb6">elMb6, el-mb6</div>
+<div class="el-m6">elM6, el-mb6</div>
+`} />
 
 #### Padding
 
@@ -95,7 +98,10 @@ This is best explained with some examples and varaible values below;
   </Story>
 </Canvas>
 
-<RenderHtmlMarkup component="Utilities" story="Padding" />
+<Source language="html" dark={true} code={`
+<div class="el-pb6">elP6, el-pb6</div>
+<div class="el-p6">elP6, el-pb6</div>
+`} />
 
 ### Height and Width
 
@@ -156,7 +162,10 @@ As per above, this is best demonstrated with some examples - in each case the he
   </Story>
 </Canvas>
 
-<RenderHtmlMarkup component="Utilities" story="Height and Width" />
+<Source language="html" dark={true} code={`
+<div class="el-w6 el-h6">elW6 elH6, el-w6 el-h6</div>
+<div class="el-w-screen el-h-screen">elWScreen elHScreen, el-w-screen el-h-screen</div>
+`} />
 
 ### Border, Border Radius and Box Shadow
 
@@ -185,4 +194,11 @@ As per above some examples;
   </Story>
 </Canvas>
 
-<RenderHtmlMarkup component="Utilities" story="Border Border Radius and Box Shadow" />
+<Source language="html" dark={true} code={`
+<div class="el-border-grey">elBorderGrey, el-border-grey</div>
+<div class="el-border-blue">elBorderBlue, el-border-blue</div>
+<div class="el-border-grey-l">elBorderGreyL, el-border-grey-l</div>
+<div class="el-border-blue el-border-radius">elBorderRadius elBorderBlue, el-border-radius el-border-blue</div>
+<div class="el-border-grey el-border-radius-r">elBorderRadiusR elBorderGrey, el-border-radius-r el-border-grey</div>
+<div class="el-box-shadow">elBoxShadow, el-box-shadow</div>
+`} />