added custom, dimension, margins and padding infos

xproglabs · Jan 4, 2021 · 3101873 · 3101873
1 parent f98985f
commit 3101873
Show file tree

Hide file tree

Showing 4 changed files with 387 additions and 57 deletions.
diff --git 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`
diff --git 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
+<Space size={3} />
+
+<ThemeProvider theme={theme}>
+  <Block 
+    bgColor='primary2'
+    fontColor='white'
+    width='100%'
+    height='20px'>
+    Texto simples
+  </Block>
+</ThemeProvider>
+
+<Space size={6} />