Merge pull request #20 from glorious-codes/docs_copy

Improve docs
glorious-codes · Aug 17, 2020 · 34928c8 · 34928c8
2 parents b425ad1 + b6ef0c9
commit 34928c8
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 36 deletions.
diff --git a/src/react/components/container/container.doc.js b/src/react/components/container/container.doc.js
@@ -6,6 +6,9 @@ const styles = `
   border-radius: 3px;
   box-sizing: border-box;
   border: 1px dashed #627380;
+}
+[data-wrapper]:not(:first-child) {
+  margin-top: 20px;
 }`;
 
 module.exports = {
@@ -35,30 +38,27 @@ module.exports = {
       styles
     },
     {
-      title: 'Small Container',
+      title: 'Container size',
+      description: 'You can optionally make container narrower or wider.',
       controller: function(){
         const { Container } = taslonicReact;
 
         return function(){
           return (
-            <Container size="sm">
-              <div>Default container streches up to 960px</div>
-            </Container>
-          );
-        }
-      },
-      styles
-    },
-    {
-      title: 'Large Container',
-      controller: function(){
-        const { Container } = taslonicReact;
-
-        return function(){
-          return (
-            <Container size="lg">
-              <div>Default container streches up to 1200px</div>
-            </Container>
+            <>
+              {/* The following div has been created for documentation purpose only */}
+              <div data-wrapper>
+                <Container size="sm">
+                  <div>Small container streches up to 960px</div>
+                </Container>
+              </div>
+              {/* The following div has been created for documentation purpose only */}
+              <div data-wrapper>
+                <Container size="lg">
+                  <div>Large container streches up to 960px</div>
+                </Container>
+              </div>
+            </>
           );
         }
       },

diff --git a/src/react/components/row/row.doc.js b/src/react/components/row/row.doc.js
@@ -78,7 +78,7 @@ module.exports = {
     },
     {
       title: 'Row alignment',
-      description: 'You can optionally align columns inside a row at left, center or right.',
+      description: 'You can optionally align columns at left, center or right of a row.',
       controller: function(){
         const { Col, Row } = taslonicReact;
 
@@ -160,7 +160,7 @@ module.exports = {
     },
     {
       title: 'Row vertical alignment',
-      description: 'You can optionally vertically align columns inside a row at top, middle or bottom.',
+      description: 'You can optionally vertically align columns at top, middle or bottom of a row.',
       controller: function(){
         const { Col, Row } = taslonicReact;
 

diff --git a/src/vue/components/container/container.doc.js b/src/vue/components/container/container.doc.js
@@ -6,6 +6,9 @@ const styles = `
   border-radius: 3px;
   box-sizing: border-box;
   border: 1px dashed #627380;
+}
+[data-wrapper]:not(:first-child) {
+  margin-top: 20px;
 }`;
 
 module.exports = {
@@ -29,20 +32,23 @@ module.exports = {
       styles
     },
     {
-      title: 'Small Container',
+      title: 'Container size',
+      description: 'You can optionally make container narrower or wider.',
       template: `
-      <t-container size="sm">
-        <p>Default container streches up to 960px</p>
-      </t-container>
-      `,
-      styles
-    },
-    {
-      title: 'Large Container',
-      template: `
-      <t-container size="lg">
-        <p>Default container streches up to 1200px</p>
-      </t-container>
+      <div>
+        <!-- The following div has been created for documentation purpose only -->
+        <div data-wrapper>
+          <t-container size="sm">
+            <p>Small container streches up to 960px</p>
+          </t-container>
+        </div>
+        <!-- The following div has been created for documentation purpose only -->
+        <div data-wrapper>
+          <t-container size="lg">
+            <p>Large container streches up to 960px</p>
+          </t-container>
+        </div>
+      </div>
       `,
       styles
     }

diff --git a/src/vue/components/row/row.doc.js b/src/vue/components/row/row.doc.js
@@ -72,7 +72,7 @@ module.exports = {
     },
     {
       title: 'Row alignment',
-      description: 'You can optionally align columns inside a row at left, center or right.',
+      description: 'You can optionally align columns at left, center or right of a row.',
       template: `
       <div>
         <!-- The following div has been created for documentation purpose only -->
@@ -142,7 +142,7 @@ module.exports = {
     },
     {
       title: 'Row vertical alignment',
-      description: 'You can optionally vertically align columns inside a row at top, middle or bottom.',
+      description: 'You can optionally vertically align columns at top, middle or bottom of a row.',
       template: `
       <div>
         <!-- The following div has been created for documentation purpose only -->