From 7a3603f22b278d98eda9093ec5aec7b221a12350 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Fri, 31 May 2024 15:43:12 +0200
Subject: [PATCH] More children preferredContents

---
 utopia/layout.utopia.js | 18 +++++++++++---
 utopia/text.utopia.js   | 53 ++++++++++++++++++++++++++++++-----------
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/utopia/layout.utopia.js b/utopia/layout.utopia.js
index 0f56f4b..0722063 100644
--- a/utopia/layout.utopia.js
+++ b/utopia/layout.utopia.js
@@ -7,6 +7,7 @@ import {
   Section,
   Container,
 } from '@h2/new/Layout'
+import { DefaultTextContents } from './text.utopia.js'
 
 export const BooleanSegmentControl = Utopia.radioControl([
   {
@@ -39,7 +40,7 @@ const ColumnWithPlaceholdersVariant = {
 </Flex>`,
 }
 
-const DefaultLayoutContent = [
+const DefaultLayoutContents = [
   {
     component: 'Flex row',
     moduleName: '@h2/new/Layout',
@@ -228,6 +229,13 @@ const annotations = {
       RowWithPlaceholdersVariant,
       ColumnWithPlaceholdersVariant,
     ],
+    children: {
+      preferredContents: [
+        ...ContainerContents,
+        ...DefaultLayoutContents,
+        ...DefaultTextContents,
+      ],
+    },
   },
   MultiColumn: {
     component: MultiColumn,
@@ -308,7 +316,8 @@ const annotations = {
     children: {
       preferredContents: [
         ...ContainerContents,
-        ...DefaultLayoutContent,
+        ...DefaultLayoutContents,
+        ...DefaultTextContents,
       ],
     },
     icon: 'dashedframe',
@@ -413,7 +422,10 @@ const annotations = {
       sections: ['typography'],
     },
     children: {
-      preferredContents: [...DefaultLayoutContent],
+      preferredContents: [
+        ...DefaultLayoutContents,
+        ...DefaultTextContents,
+      ],
     },
     variants: ContainerVariants,
     icon: 'dashedframe',
diff --git a/utopia/text.utopia.js b/utopia/text.utopia.js
index 8b93bf4..76470d1 100644
--- a/utopia/text.utopia.js
+++ b/utopia/text.utopia.js
@@ -15,6 +15,43 @@ const tshirtSizes = [
   '6xl',
 ]
 
+const HeadingVariants = tshirtSizes.map((size) => ({
+  label: `Heading (size ${size})`,
+  imports: `import { Heading } from '@h2/new/Text'`,
+  code: `<Heading size={'${size}'}>
+    Lorem ipsum
+</ Heading>`,
+}))
+
+const TextVariants = tshirtSizes.map((size) => ({
+  label: `Text (size ${size})`,
+  imports: `import { Text } from '@h2/new/Text'`,
+  code: `<Text size={'${size}'}>
+    Lorem ipsum 
+</ Text>`,
+}))
+
+const HeadingContents = [
+  {
+    component: 'Heading',
+    moduleName: '@h2/new/Text',
+    variants: HeadingVariants,
+  },
+]
+
+const TextContents = [
+  {
+    component: 'Text',
+    moduleName: '@h2/new/Text',
+    variants: TextVariants,
+  },
+]
+
+export const DefaultTextContents = [
+  ...HeadingContents,
+  ...TextContents,
+]
+
 const annotations = {
   Heading: {
     component: Heading,
@@ -244,13 +281,7 @@ const annotations = {
     },
     focus: 'never',
     inspector: 'hidden',
-    variants: tshirtSizes.map((size) => ({
-      label: `Heading (size ${size})`,
-      imports: `import { Heading } from '@h2/new/Text'`,
-      code: `<Heading size={'${size}'}>
-        Lorem ipsum
-    </ Heading>`,
-    })),
+    variants: HeadingVariants,
   },
   Text: {
     component: Text,
@@ -264,13 +295,7 @@ const annotations = {
     },
     focus: 'never',
     inspector: 'hidden',
-    variants: tshirtSizes.map((size) => ({
-      label: `Text (size ${size})`,
-      imports: `import { Text } from '@h2/new/Text'`,
-      code: `<Text size={'${size}'}>
-        Lorem ipsum
-    </ Text>`,
-    })),
+    variants: TextVariants,
   },
   Span: {
     component: Span,