Pass children elements to inside aspect ratio component

Author: IHIutch

packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.js

@@ -65,7 +65,7 @@ const CAspectRatioBox = {
         left: 0,
         ...vnode.data.attrs
       }
-    })
+    }, vnode.componentOptions.children || [])
 
     return h('div', {
       class: this.className,

packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.stories.js

@@ -22,3 +22,23 @@ storiesOf('UI | AspectRatioBox', module)
       }
     }
   }))
+  .add('Nested Elements', () => ({
+    components: { CAspectRatioBox, CBox },
+    template: `
+      <div style="width: 100vh; height: 100vw;">
+        <CAspectRatioBox maxW="560px" :ratio="16 / 9" bg="gray.200">
+          <CFlex align="center" justify="center">
+            <CBox text-align="center">
+              <CHeading>See the Vue</CHeading>
+              <CText mt="4">Vue makes front-end development a breeze.</CText>
+            </CBox>
+          </CFlex>
+        </CAspectRatioBox>
+      </div>
+    `,
+    data () {
+      return {
+        showCollapsed: true
+      }
+    }
+  }))