From 3101873d12990ad9d9910abeb1c0988861c65344 Mon Sep 17 00:00:00 2001
From: martinezpoa <mauricio@xproglabs.com>
Date: Mon, 4 Jan 2021 14:45:17 -0300
Subject: [PATCH] added custom, dimension, margins and padding infos

---
 components/Block/Custom.stories.mdx     |  66 ++++-----
 components/Block/Dimensions.stories.mdx |  71 ++++++++-
 components/Block/Margins.stories.mdx    | 182 ++++++++++++++++++++++--
 components/Block/Paddings.stories.mdx   | 125 +++++++++++++++-
 4 files changed, 387 insertions(+), 57 deletions(-)

diff --git a/components/Block/Custom.stories.mdx b/components/Block/Custom.stories.mdx
index 120be53f3..edf3d2d04 100644
--- a/components/Block/Custom.stories.mdx
+++ b/components/Block/Custom.stories.mdx
@@ -57,58 +57,46 @@ Utilize a propriedade `custom` para escrever qualquer regra CSS.
 
 ### Exemplo 2
 
-`bgColor`
+`row center`
 
-`fontColor`
+`bgColor: primary1`
 
-`height: 50px;`
+`*color: rgba(255, 200, 155, 3);`
 
-`width: 50px;`
+`*padding: 20px`
 
-<Space size={6} />
-
-### Exemplo 3
-
-`bgColor`
+<pre>
+  <CodeBlock>{`<Block align= 'row' alignx='center' bgColor='primary1' custom='
+    color: rgba(255, 200, 155, 3);
+    padding: 20px;
+  '></Block>`}</CodeBlock>
+</pre>
 
-`fontColor`
+<Space size={3} />
 
-`height: 50px;`
+<ThemeProvider theme={theme}>
+  <Block 
+    bgColor='primary1'
+    align='row'
+    alignx='center'
+    custom={`
+      color: rgba(255, 200, 155, 3);
+      padding: 20px;
+    `}>
+    <span>item1</span>
+    <span>item2</span>
+    <span>item3</span>
+  </Block>
+</ThemeProvider>
 
-`width: 50px;`
+<Space size={6} />
 
-`cursor: pointer`
+### Exemplo 3
 
 <Space size={6} />
 
 ### Exemplo 4
 
-`bgColor`
-
-`fontColor`
-
-`height: 50px;`
-
-`width: 50px;`
-
-`cursor: pointer`
-
-`border-radius: 5px`
-
 <Space size={6} />
 
 ### Exemplo 5
-
-`bgColor`
-
-`fontColor`
-
-`height: 50px;`
-
-`width: 50px;`
-
-`cursor: pointer`
-
-`border-radius: 5px`
-
-`hover behavior`
\ No newline at end of file
diff --git a/components/Block/Dimensions.stories.mdx b/components/Block/Dimensions.stories.mdx
index 6b1afe043..cf97c2717 100644
--- a/components/Block/Dimensions.stories.mdx
+++ b/components/Block/Dimensions.stories.mdx
@@ -25,12 +25,12 @@ Utilize a propriedade `height` ou `width`
 
 ### Exemplo 1
 
-`height: '50px'`
+`height: '20px'`
 
-`width: '50px'`
+`width: '100px'`
 
 <pre>
-  <CodeBlock>{`<Block width='50px'></Block>`}</CodeBlock>
+  <CodeBlock>{`<Block width='100px'></Block>`}</CodeBlock>
 </pre>
 
 <Space size={3} />
@@ -39,7 +39,8 @@ Utilize a propriedade `height` ou `width`
   <Block 
     bgColor='primary2'
     fontColor='white'
-    width='100px'>
+    width='100px'
+    height='20px'>
     Texto simples
   </Block>
 </ThemeProvider>
@@ -48,14 +49,72 @@ Utilize a propriedade `height` ou `width`
 
 ### Exemplo 2
 
+`height: '20px'`
+
+`width: '200px'`
+
+<pre>
+  <CodeBlock>{`<Block width='200px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    bgColor='primary2'
+    fontColor='white'
+    width='200px'
+    height='20px'>
+    Texto simples
+  </Block>
+</ThemeProvider>
+
 <Space size={6} />
 
 ### Exemplo 3
 
+`height: '20px'`
+
+`width: '400px'`
+
+<pre>
+  <CodeBlock>{`<Block width='400px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    bgColor='primary2'
+    fontColor='white'
+    width='400px'
+    height='20px'>
+    Texto simples
+  </Block>
+</ThemeProvider>
+
 <Space size={6} />
 
 ### Exemplo 4
 
-<Space size={6} />
+`height: '20px'`
+
+`width: '100%'`
+
+<pre>
+  <CodeBlock>{`<Block width='100%'></Block>`}</CodeBlock>
+</pre>
 
-### Exemplo 5
\ No newline at end of file
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    bgColor='primary2'
+    fontColor='white'
+    width='100%'
+    height='20px'>
+    Texto simples
+  </Block>
+</ThemeProvider>
+
+<Space size={6} />
diff --git a/components/Block/Margins.stories.mdx b/components/Block/Margins.stories.mdx
index b208999ff..00e8b894f 100644
--- a/components/Block/Margins.stories.mdx
+++ b/components/Block/Margins.stories.mdx
@@ -19,22 +19,32 @@ Block é um componente baseado em uma `<div>` para entregar posicionamentos bloc
 
 <Space size={3} />
 
-Utilize a propriedade `margin` para definir valor geral para o margin
+Utilize a propriedade `mt` para definir valor geral para o margin no topo
+
+Utilize a propriedade `mb` para definir valor geral para o margin embaixo
+
+Utilize a propriedade `ml` para definir valor geral para o margin na esquerda
+
+Utilize a propriedade `mr` para definir valor geral para o margin na direita
+
+Utilize a propriedade `mx` para definir valor geral para o margin na direita e na esquerda
+
+Utilize a propriedade `my` para definir valor geral para o margin no topo e embaixo
+
+É possível também usar os valores com os múltiplos de 8, use por exemplo `my={5}` para aplicar o valor de `40px`, por exemplo.
 
 <Space size={6} />
 
 ### Exemplo 1
 
-`margin: '10px'`
+`mt: '90px'`
 
 <pre>
   <CodeBlock>{`<Block 
     onClick={() => console.log('oi')}
     bgColor='primary2'
     fontColor='white'
-    mx={10}
-    py={5}
-    px='10px'
+    mt='90px'
     width='150px'></Block>`}</CodeBlock>
 </pre>
 
@@ -46,10 +56,8 @@ Utilize a propriedade `margin` para definir valor geral para o margin
     custom={`cursor: pointer;`}
     bgColor='primary2'
     fontColor='white'
-    mx={10}
-    py={5}
-    px='10px'
-    width={15}>
+    mt='90px'
+    width="150px">
     Texto simples
   </Block>
 </ThemeProvider>
@@ -58,14 +66,168 @@ Utilize a propriedade `margin` para definir valor geral para o margin
 
 ### Exemplo 2
 
+`mb: '90px'`
+
+<pre>
+  <CodeBlock>{`<Block 
+    onClick={() => console.log('oi')}
+    bgColor='primary2'
+    fontColor='white'
+    mb='90px'
+    width='150px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    onClick={() => console.log('oi')}
+    custom={`cursor: pointer;`}
+    bgColor='primary2'
+    fontColor='white'
+    mb='90px'
+    width="150px">
+    Texto simples
+  </Block>
+</ThemeProvider>
+
 <Space size={6} />
 
 ### Exemplo 3
 
+`ml: '90px'`
+
+<pre>
+  <CodeBlock>{`<Block 
+    onClick={() => console.log('oi')}
+    bgColor='primary2'
+    fontColor='white'
+    ml='90px'
+    width='150px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    onClick={() => console.log('oi')}
+    custom={`cursor: pointer;`}
+    bgColor='primary2'
+    fontColor='white'
+    ml='90px'
+    width="150px">
+    Texto simples
+  </Block>
+</ThemeProvider>
+
 <Space size={6} />
 
 ### Exemplo 4
 
+`mr: '90px'`
+
+<pre>
+  <CodeBlock>{`<Block 
+    onClick={() => console.log('oi')}
+    bgColor='primary2'
+    fontColor='white'
+    mr='90px'
+    width='150px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    onClick={() => console.log('oi')}
+    custom={`cursor: pointer;`}
+    bgColor='primary2'
+    fontColor='white'
+    mr='90px'
+    width="150px">
+    Texto simples
+  </Block>
+</ThemeProvider>
+
 <Space size={6} />
 
-### Exemplo 5
\ No newline at end of file
+### Exemplo 5
+
+`mx: '90px'`
+
+<pre>
+  <CodeBlock>{`<Block 
+    onClick={() => console.log('oi')}
+    bgColor='primary2'
+    fontColor='white'
+    mx='90px'
+    width='150px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    onClick={() => console.log('oi')}
+    custom={`cursor: pointer;`}
+    bgColor='primary2'
+    fontColor='white'
+    mx='90px'
+    width="150px">
+    Texto simples
+  </Block>
+</ThemeProvider>
+
+### Exemplo 6
+
+`my: '90px'`
+
+<pre>
+  <CodeBlock>{`<Block 
+    onClick={() => console.log('oi')}
+    bgColor='primary2'
+    fontColor='white'
+    my='90px'
+    width='150px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    onClick={() => console.log('oi')}
+    custom={`cursor: pointer;`}
+    bgColor='primary2'
+    fontColor='white'
+    my='90px'
+    width="150px">
+    Texto simples
+  </Block>
+</ThemeProvider>
+
+### Exemplo 7
+
+`my={5}`
+
+<pre>
+  <CodeBlock>{`<Block 
+    onClick={() => console.log('oi')}
+    bgColor='primary2'
+    fontColor='white'
+    my={5}
+    width='150px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    onClick={() => console.log('oi')}
+    custom={`cursor: pointer;`}
+    bgColor='primary2'
+    fontColor='white'
+    my={5}
+    width="150px">
+    Texto simples
+  </Block>
+</ThemeProvider>
\ No newline at end of file
diff --git a/components/Block/Paddings.stories.mdx b/components/Block/Paddings.stories.mdx
index fb7752497..2c76b9d13 100644
--- a/components/Block/Paddings.stories.mdx
+++ b/components/Block/Paddings.stories.mdx
@@ -19,7 +19,19 @@ Block é um componente baseado em uma `<div>` para entregar posicionamentos bloc
 
 <Space size={3} />
 
-Utilize a propriedade `padding-top` para definir valor geral para o padding
+Utilize a propriedade `pt` para definir valor geral para o padding no topo
+
+Utilize a propriedade `pb` para definir valor geral para o padding embaixo
+
+Utilize a propriedade `pl` para definir valor geral para o padding na esquerda
+
+Utilize a propriedade `pr` para definir valor geral para o padding na direita
+
+Utilize a propriedade `px` para definir valor geral para o padding na direita e na esquerda
+
+Utilize a propriedade `py` para definir valor geral para o padding no topo e embaixo
+
+É possível também usar os valores com os múltiplos de 8, use por exemplo `py={5}` para aplicar o valor de `40px`, por exemplo.
 
 <Space size={6} />
 
@@ -46,14 +58,123 @@ Utilize a propriedade `padding-top` para definir valor geral para o padding
 
 ### Exemplo 2
 
+`pb: '10px'`
+
+<pre>
+  <CodeBlock>{`<Block pb='10px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    bgColor='primary2'
+    fontColor='white'
+    pb='10px'>
+    Texto simples
+  </Block>
+</ThemeProvider>
+
 <Space size={6} />
 
 ### Exemplo 3
 
+`pl: '10px'`
+
+<pre>
+  <CodeBlock>{`<Block pl='10px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    bgColor='primary2'
+    fontColor='white'
+    pl='10px'>
+    Texto simples
+  </Block>
+</ThemeProvider>
+
+<Space size={6} />
+
+### Exemplo 4
+
+`pr: '10px'`
+
+<pre>
+  <CodeBlock>{`<Block pr='10px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    bgColor='primary2'
+    fontColor='white'
+    pr='10px'>
+    Texto simples
+  </Block>
+</ThemeProvider>
+
 <Space size={6} />
 
 ### Exemplo 4
 
+`px: '10px'`
+
+<pre>
+  <CodeBlock>{`<Block px='10px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    bgColor='primary2'
+    fontColor='white'
+    px='10px'>
+    Texto simples
+  </Block>
+</ThemeProvider>
+
 <Space size={6} />
 
-### Exemplo 5
\ No newline at end of file
+### Exemplo 5
+
+`py: '10px'`
+
+<pre>
+  <CodeBlock>{`<Block py='10px'></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    bgColor='primary2'
+    fontColor='white'
+    py='10px'>
+    Texto simples
+  </Block>
+</ThemeProvider>
+
+### Exemplo 6
+
+`py={5}`
+
+<pre>
+  <CodeBlock>{`<Block py={5}></Block>`}</CodeBlock>
+</pre>
+
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    bgColor='primary2'
+    fontColor='white'
+    py={5}>
+    Texto simples
+  </Block>
+</ThemeProvider>
+