chore: improve how styles are handled on doc examples

glorious-codes · Jan 20, 2021 · 4d7ffc2 · 4d7ffc2
1 parent 6598d2e
commit 4d7ffc2
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 55 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -2,7 +2,7 @@ const project = require('./project.json');
 
 module.exports = {
   collectCoverageFrom: project.tests.source.files,
-  coverageReporters: ['html'],
+  coverageReporters: ['html', 'text-summary'],
   coverageThreshold: {
     global: {
       statements: 100,

diff --git a/src/react/components/input/input.doc.js b/src/react/components/input/input.doc.js
@@ -142,7 +142,7 @@ module.exports = {
       title: 'Input with custom validations',
       description: 'Validations should be an Array of objects containing a function isValid that returns a Boolean and an errorMessage.',
       controller: function(){
-        const { Input } = taslonicReact;
+        const { Row, Col, Input } = taslonicReact;
 
         return function(){
           const validations = [{
@@ -151,14 +151,14 @@ module.exports = {
           }];
 
           return (
-            <Input validations={validations} placeholder="Enter a programming language" />
+            <Row>
+              <Col md="4">
+                <Input validations={validations} placeholder="Enter a programming language" block />
+              </Col>
+            </Row>
           );
         }
-      },
-      styles: `
-        p-external-component-examples-list p-list-item:nth-child(6) .t-form-control { max-width: 100%; }
-        p-external-component-examples-list p-list-item:nth-child(6) input { width: 300px; max-width: 100%; }
-      `
+      }
     },
     {
       title: 'Input with autofocus',
@@ -193,13 +193,13 @@ module.exports = {
         return function(){
           return (
             <Row>
-              <Col xs="4">
+              <Col sm="4">
                 <Input block />
               </Col>
-              <Col xs="4">
+              <Col sm="4">
                 <Input block />
               </Col>
-              <Col xs="4">
+              <Col sm="4">
                 <Input block />
               </Col>
             </Row>

diff --git a/src/react/components/loader/loader.doc.js b/src/react/components/loader/loader.doc.js
@@ -29,17 +29,14 @@ module.exports = {
 
         return function(){
           return (
-            <Loader theme="light" />
+            <div className="example-loader-theme">
+              <Loader theme="light" />
+            </div>
           )
         }
       },
       styles: `
-        p-external-component-examples-list p-list-item:nth-child(2) .p-external-component-preview { height: 100% }
-        p-external-component-examples-list p-list-item:nth-child(2) .p-tabs-content [data-name="Preview"] .p-tab {
-          margin: -30px;
-          height: 80px;
-          background-color: #6772FF;
-        }
+        .example-loader-theme { height: 80px; background-color: #6772FF; }
       `
     }
   ]

diff --git a/src/react/components/select/select.doc.js b/src/react/components/select/select.doc.js
@@ -60,7 +60,7 @@ module.exports = {
       description: 'Validations should be an Array of objects containing a function isValid that returns a Boolean and an errorMessage.',
       controller: function(){
         const { useState } = React;
-        const { Select } = taslonicReact;
+        const { Row, Col, Select } = taslonicReact;
 
         return function(){
           const validations = [{
@@ -69,18 +69,18 @@ module.exports = {
           }]
 
           return (
-            <Select validations={validations} placeholder="Select">
-              <option value="java">Java</option>
-              <option value="javascript">Javascript</option>
-              <option value="go">Go</option>
-            </Select>
+            <Row>
+              <Col md="3">
+                <Select validations={validations} placeholder="Select" block>
+                  <option value="java">Java</option>
+                  <option value="javascript">Javascript</option>
+                  <option value="go">Go</option>
+                </Select>
+              </Col>
+            </Row>
           )
         }
-      },
-      styles: `
-        p-external-component-examples-list p-list-item:nth-child(2) .t-form-control { max-width: 100%; }
-        p-external-component-examples-list p-list-item:nth-child(2) select { width: 200px; max-width: 100%; }
-      `
+      }
     },
     {
       title: 'Block Select',

diff --git a/src/react/components/tag/tag.doc.js b/src/react/components/tag/tag.doc.js
@@ -28,19 +28,19 @@ module.exports = {
 
         return function(){
           return (
-            <>
+            <div className="example-tag-theme">
               <Tag theme="primary">Primary</Tag>
               <Tag theme="secondary">Secondary</Tag>
               <Tag theme="info">Info</Tag>
               <Tag theme="success">Success</Tag>
               <Tag theme="warning">Warning</Tag>
               <Tag theme="danger">Danger</Tag>
-            </>
+            </div>
           )
         }
       },
       styles: `
-      .p-external-component-examples-list p-list-item:nth-child(2) .t-tag:not(:first-child) { margin-left: 5px; }
+        .example-tag-theme .t-tag:not(:first-child) { margin-left: 5px; }
       `
     }
   ]

diff --git a/src/vue/components/input/input.doc.js b/src/vue/components/input/input.doc.js
@@ -138,11 +138,11 @@ module.exports = {
         }
       },
       template: `
-      <t-input :validations="validations" placeholder="Enter a programming language" />
-      `,
-      styles: `
-        p-external-component-examples-list p-list-item:nth-child(6) .t-form-control { max-width: 100%; }
-        p-external-component-examples-list p-list-item:nth-child(6) input { width: 300px; max-width: 100%; }
+      <t-row>
+        <t-col md="4">
+          <t-input :validations="validations" placeholder="Enter a programming language" block />
+        </t-col>
+      </t-row>
       `
     },
     {
@@ -162,13 +162,13 @@ module.exports = {
       description: 'Block property makes inputs behave like a block.',
       template: `
       <t-row>
-        <t-col xs="4">
+        <t-col sm="4">
           <t-input block />
         </t-col>
-        <t-col xs="4">
+        <t-col sm="4">
           <t-input block />
         </t-col>
-        <t-col xs="4">
+        <t-col sm="4">
           <t-input block />
         </t-col>
       </t-row>

diff --git a/src/vue/components/loader/loader.doc.js b/src/vue/components/loader/loader.doc.js
@@ -19,14 +19,12 @@ module.exports = {
       title: 'Loader theme',
       description: 'A loader is dark by default, but you can optionally make it light.',
       template: `
-      <t-loader theme="light" />
+      <div class="example-loader-theme">
+        <t-loader theme="light" />
+      </div\>
       `,
       styles: `
-        p-external-component-examples-list p-list-item:nth-child(2) .p-tabs-content [data-name="Preview"] .p-tab {
-          margin: -30px;
-          height: 80px;
-          background-color: #6772FF;
-        }
+        .example-loader-theme { height: 80px; background-color: #6772FF; }
       `
     }
   ]

diff --git a/src/vue/components/select/select.doc.js b/src/vue/components/select/select.doc.js
@@ -115,15 +115,15 @@ module.exports = {
         }
       },
       template: `
-      <t-select :validations="validations" placeholder="Select">
-        <option value="java">Java</option>
-        <option value="javascript">Javascript</option>
-        <option value="go">Go</option>
-      </t-select>
-      `,
-      styles: `
-        p-external-component-examples-list p-list-item:nth-child(4) .t-form-control { max-width: 100%; }
-        p-external-component-examples-list p-list-item:nth-child(4) select { width: 200px; max-width: 100%; }
+      <t-row>
+        <t-col md="3">
+          <t-select :validations="validations" placeholder="Select" block>
+            <option value="java">Java</option>
+            <option value="javascript">Javascript</option>
+            <option value="go">Go</option>
+          </t-select>
+        </t-col>
+      </t-row>
       `
     },
     {