More children preferredContents

concrete-utopia · May 31, 2024 · 7a3603f · 7a3603f
1 parent b0718fd
commit 7a3603f
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 17 deletions.
diff --git 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
@@ -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,