typo and transform list preset

Author: LucasLeandro1204

docs/presets/README.md

@@ -9,6 +9,7 @@ pageClass: extra-spacing
 `VclFacebook`
 
 <Showcase type="VclFacebook" />
+<!--
 
 ## Instagram
 
@@ -22,14 +23,13 @@ pageClass: extra-spacing
 
 <Showcase type="VclCode" />
 
-<!--
-
 ## List
 
 `VclList`
 
 <Showcase type="VclList" />
 
+
 ## Bullet List
 
 `VclBulletList`

src/components/presets/Code.js

@@ -1,9 +1,7 @@
 import VueContentLoading from '../VueContentLoading';
 
 export default {
-  components: {
-    VueContentLoading,
-  },
+  functional: true,
 
   render: (h, {
     data,

src/components/presets/Facebook.js

@@ -1,18 +1,20 @@
 import VueContentLoading from '../VueContentLoading';
 
 export default {
-  funcional: true,
+  functional: true,
 
-  render: (h, {
+  render (h, {
     data,
-  } = {}) => (
-    <VueContentLoading {...data}>
-      <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
-      <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
-      <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
-      <rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
-      <rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
-      <rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
-    </VueContentLoading>
-  ),
+  } = {}) {
+    return (
+      <VueContentLoading {...data}>
+        <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
+        <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
+        <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
+        <rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
+        <rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
+        <rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
+      </VueContentLoading>
+    );
+  },
 };

src/components/presets/Instagram.js

@@ -1,9 +1,7 @@
 import VueContentLoading from '../VueContentLoading';
 
 export default {
-  components: {
-    VueContentLoading,
-  },
+  functional: true,
 
   render: (h, {
     data,

src/components/presets/List.js

@@ -0,0 +1,18 @@
+import VueContentLoading from '../VueContentLoading';
+
+export default {
+  functional: true,
+
+  render: (h, {
+    data,
+  } = {}) => (
+    <VueContentLoading {...data} width={300} height={120}>
+      <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
+      <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
+      <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
+      <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
+      <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
+      <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
+    </VueContentLoading>
+  ),
+};

src/components/presets/List.vue

@@ -1,22 +1,22 @@
-import VueContentLoading from './components/VueContentLoading';
+// import VueContentLoading from './components/VueContentLoading';
 
 import VclCode from './components/presets/Code';
-// import VclList from './components/presets/List.vue';
+import VclList from './components/presets/List';
 // import VclTable from './components/presets/Table.vue';
 // import VclTwitch from './components/presets/Twitch.vue';
 import VclFacebook from './components/presets/Facebook';
 import VclInstagram from './components/presets/Instagram';
 // import VclBulletList from './components/presets/BulletList.vue';
 
-export default VueContentLoading;
+// export default VueContentLoading;
 
 export {
   VclCode,
-  // VclList,
+  VclList,
   // VclTable,
   // VclTwitch,
   VclFacebook,
   VclInstagram,
   // VclBulletList,
-  VueContentLoading,
+  // VueContentLoading,
 };